/* ============================================================
   VEPOX POS — Ingredientes & Recetas v2 + modales
   Coherente con el POS v2 y con Inventario v2 (reusa .iv-* de
   css/inventario.css). Prefijos: .rc-* (la vista), .md-* (modales).
   ============================================================ */

#view-recetas { max-width: 1180px; margin: 0 auto; }

/* ── Tabla de insumos ── */
.rc-tabla .unid { font-size: 12.5px; }
.rc-tabla .unid small { display: block; color: var(--muted); font-size: 11px; }
.rc-tabla .costo { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; }
.rc-tabla .costo small { display: block; font-family: 'DM Sans', sans-serif; font-size: 11px; letter-spacing: 0; color: var(--muted); }
.rc-tabla .costo.sin { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--iv-warn); font-weight: 700; }
.rc-imps { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.rc-imp { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--iv-ok-bg); color: var(--iv-ok); }
.rc-imp.no { background: var(--iv-bad-bg); color: var(--iv-bad); }
.rc-acciones { display: flex; gap: 4px; justify-content: flex-end; }
.rc-ico { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rc-ico svg { width: 15px; height: 15px; }
.rc-ico:hover { color: var(--text); border-color: var(--iv-amarillo); }
.rc-ico.peligro:hover { color: var(--iv-bad); border-color: var(--iv-bad); }

/* ── Sub-recetas ── */
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rc-sr { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.rc-sr-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.rc-sr-nombre { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 1.5px; line-height: 1.05; }
.rc-sr-nombre small { display: block; font-family: 'DM Sans', sans-serif; font-size: 11.5px; letter-spacing: 0; color: var(--muted); margin-top: 3px; }
.rc-kind { font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--surface2); color: var(--muted); white-space: nowrap; }
.rc-kind.extra { background: var(--iv-warn-bg); color: var(--iv-warn); }
.rc-sr-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-sr-kpis div { background: var(--surface2); border-radius: 12px; padding: 9px 12px; }
.rc-sr-kpis small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.rc-sr-kpis b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; margin-top: 2px; }
.rc-sr-kpis b.sin { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--iv-warn); }
.rc-sr-lineas { display: flex; flex-direction: column; gap: 2px; }
.rc-sr-linea { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.rc-sr-linea:last-child { border-bottom: none; }
.rc-sr-linea span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-sr-linea small { color: var(--muted); }
.rc-sr-linea b { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .5px; white-space: nowrap; }
.rc-sr-linea b.sin { font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--iv-warn); }
.rc-sr-pie { display: flex; justify-content: flex-end; gap: 6px; margin-top: auto; }

/* ── Recetas ── */
.rc-prod { font-weight: 800; display: flex; flex-direction: column; gap: 2px; }
.rc-prod small { display: flex; gap: 8px; align-items: center; color: var(--muted); font-weight: 400; }
.rc-prod .precio { font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: .5px; color: var(--iv-ok); }
.rc-receta { font-size: 12px; color: var(--muted); max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-receta b { color: var(--text); }
.rc-margen { display: inline-flex; flex-direction: column; align-items: flex-end; }
.rc-margen b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; line-height: 1; }
.rc-margen small { font-size: 10.5px; color: var(--muted); }
.rc-margen.bien b { color: var(--iv-ok); } .rc-margen.ojo b { color: var(--iv-warn); } .rc-margen.mal b { color: var(--iv-bad); }
.rc-falta { font-size: 11px; color: var(--iv-warn); font-weight: 700; }

/* ── Modales v2 ── */
/* El editor de receta se abre desde el modal de ajustes: tiene que quedar encima. */
#receta-modal-overlay.show { z-index: 10001; }

.md-box { width: min(560px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-modal); }
.md-box.ancho { width: min(680px, 96vw); }
.md-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 22px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.md-tit { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 1.5px; line-height: 1; color: var(--text); }
.md-sub { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
.md-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; flex: 0 0 auto; }
.md-x:hover { color: var(--text); border-color: var(--iv-amarillo); }
.md-body { padding: 16px 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.md-sec { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--surface); }
.md-sec.resaltada { border-color: var(--iv-amarillo); background: rgba(253,200,15,.06); }
.md-sec-tit { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.md-sec-tit svg { width: 13px; height: 13px; color: var(--iv-amarillo); }
.md-sec-tit span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.md-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.md-hint { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.md-hint b { color: var(--text); }
.md-hint .err { color: var(--iv-bad); font-weight: 700; }
.md-pie { display: flex; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface2); }
.md-pie .iv-btn { flex: 1; justify-content: center; }
.md-pie .iv-btn.primario { flex: 2; }
.md-switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.md-switch input { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background .15s; flex: 0 0 auto; margin: 0; }
.md-switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.md-switch input:checked { background: var(--iv-amarillo); }
.md-switch input:checked::after { transform: translateX(18px); }
.md-switch small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.md-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.md-kpis.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-kpis div { background: var(--surface2); border-radius: 12px; padding: 9px 10px; text-align: center; }
.md-kpis small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.md-kpis b { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .5px; margin-top: 2px; line-height: 1.1; }
.md-kpis b.ok { color: var(--iv-ok); } .md-kpis b.bad { color: var(--iv-bad); } .md-kpis b.warn { color: var(--iv-warn); } .md-kpis b.grande { font-size: 28px; }
.md-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.md-tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--iv-ok-bg); color: var(--iv-ok); }
.md-tag.no { background: var(--iv-bad-bg); color: var(--iv-bad); }
.md-tag small { font-weight: 400; opacity: .8; }
.md-tag button { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.md-tag button:hover { opacity: 1; }
.md-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(90px, 1fr) auto; gap: 8px; align-items: end; margin-top: 10px; }
.md-add .iv-select, .md-add .iv-input { min-height: 42px; }
.md-lista { display: flex; flex-direction: column; gap: 4px; }
.md-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 32px; gap: 10px; align-items: center; padding: 8px 10px; background: var(--surface2); border-radius: 10px; font-size: 13px; }
.md-item .n { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-item .n small { color: var(--muted); font-weight: 400; }
.md-item .c { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .5px; white-space: nowrap; }
.md-item .p { font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.md-item .p.bien { color: var(--iv-ok); } .md-item .p.ojo { color: var(--iv-warn); } .md-item .p.mal { color: var(--iv-bad); }
.md-item .x { width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; }
.md-item .x:hover { color: var(--iv-bad); background: var(--iv-bad-bg); }
.md-total { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 10px 0; font-size: 12px; color: var(--muted); }
.md-total b { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: .5px; color: var(--text); }
.md-vacio { padding: 14px; text-align: center; color: var(--muted); font-size: 12.5px; border: 1px dashed var(--border); border-radius: 12px; }
.md-aviso { padding: 10px 12px; border-radius: 12px; background: var(--iv-warn-bg); border: 1px solid rgba(245,158,11,.35); font-size: 12.5px; }
.md-aviso b { color: var(--iv-warn); }
.md-aviso small { display: block; color: var(--muted); margin-top: 3px; }
.md-aviso .iv-btn { margin-top: 10px; }
/* Modo básico: descuenta pan + bolitas, la completa guardada manda en costo */
.md-aviso.basica { background: var(--iv-info-bg); border-color: rgba(59,130,246,.35); }
.md-aviso.basica b { color: var(--iv-info); }
.rc-basica { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; letter-spacing: .6px; padding: 2px 7px; border-radius: 999px; background: var(--iv-info-bg); color: var(--iv-info); vertical-align: 1px; }
.rc-basica svg { width: 11px; height: 11px; }
.md-ajuste { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 8px; }
.md-ajuste .n { font-weight: 800; min-width: 0; }
.md-ajuste .n small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ajuste .c { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--iv-ok); letter-spacing: .5px; }

@media (max-width: 640px) {
  .md-box { width: 100vw; max-height: 100vh; border-radius: 0; }
  .md-body { padding: 14px 16px; }
  .md-cab, .md-pie { padding-left: 16px; padding-right: 16px; }
  .md-row-3 { grid-template-columns: 1fr 1fr; }
  .md-kpis.c4 { grid-template-columns: 1fr 1fr; }
  .md-add { grid-template-columns: 1fr; }
  .rc-tabla { min-width: 760px; }
}