/* frontend/css/marca.css -- capa de identidad visual Gonzalitoz (se carga AL FINAL).
   Fuente: brand/brand.md + brand/palette.json (Brand Kit real). Solo estetica: no cambia estructura
   de menus ni comportamiento.

   SISTEMA DE COLOR (regla 60-30-10, para no saturar de verde):
   - Blanco / casi blanco (60%): lienzo y superficies. Mucho aire.
   - Negro (30%): estructura -- titulos, menu lateral activo, encabezados de paneles, contornos.
   - Acentos (10%), cada uno con UNA funcion:
       dorado = botones de accion (al pasar el mouse se vuelven verdes) y avisos.
       verde  = respuesta al mouse en botones, seccion activa del navbar y "bien/exito".
       negro  = ademas, lo SELECCIONADO (filtros, pestanas, categorias, periodos) para no confundirlo con un boton.
       rojo   = alerta y llamada de atencion (badges, peligro, precios del menu, subrayado de titulos).
   Sin degradados ni sombras difuminadas: sombras duras tipo sticker. Bebas solo en titulos generales. */

/* ---------- Titulos generales (Bebas, negro con subrayado rojo como "TAQUERIA" bajo el logotipo) ---------- */
#appContainer h1,
.man-page h1,
.cos-panel-tt,
body.kiosk-mode h2,
.admin-header h2 {
    font-family: var(--font-titulo);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.05;
}
#appContainer h1:not(.hero-title),
.admin-header h2 { color: var(--marca-negro); }
.admin-header h2::after {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin-top: 6px;
    background: var(--marca-rojo);
    border-radius: 2px;
}
.cos-panel-tt { font-size: 1.6rem; }
.man-card h2 { font-family: var(--font-titulo); font-weight: 400; text-transform: uppercase; font-size: 1.75rem; letter-spacing: 1px; }

/* ---------- Navbar blanco con logotipo oficial ---------- */
.navbar { background-color: var(--marca-blanco); }
.logo-box { width: 150px; height: 56px; }
.brand-text { display: none; } /* el logotipo ya dice GONZALITOZ TAQUERIA */
.icon-btn:hover { background-color: var(--hover); }
/* Navbar: seccion activa en dorado (como los botones); al pasar el mouse, verde */
.nav-link { color: var(--text-primary); transition: background-color 0.15s, color 0.15s; }
.nav-link:hover { background-color: var(--marca-verde); color: var(--marca-blanco); }
.nav-link.active {
    background-color: var(--marca-dorado);
    color: var(--marca-negro);
    box-shadow: 2px 2px 0 var(--marca-negro);
}
.nav-link.active:hover { background-color: var(--marca-verde); color: var(--marca-blanco); }
.side-menu-dropdown { border: 2px solid var(--marca-negro); box-shadow: var(--shadow-sticker); }
.badge { background-color: var(--marca-rojo); border-color: var(--marca-blanco); }
@media (max-width: 900px) {
    .logo-box { width: 116px; height: 44px; }
    .nav-menu { border-right: 3px solid var(--marca-negro); box-shadow: none; }
}

/* ---------- Pantalla de carga ---------- */
.boot-sub { color: var(--text-secondary); }
.boot-title { color: var(--marca-negro); }

/* ---------- Portada: fondo dorado como las piezas de publicidad, personaje verde, texto negro ---------- */
.hero-section { background-color: var(--marca-dorado); color: var(--marca-negro); }
.hero-title { color: var(--marca-negro); }
.hero-subtitle { color: var(--marca-negro); opacity: 1; font-weight: 500; }
.hero-pill { background-color: var(--marca-dorado); color: var(--marca-negro); }   /* F5.6: contraste ≥ 4.5:1; el rojo queda para alertas y precios */
.hero-stats .stat-icon { background-color: var(--hover); color: var(--marca-verde); }
@media (max-width: 900px) {
    .hero-section { justify-content: flex-start; padding-top: 40px; background-position: center bottom 16px; background-size: auto 34%; }
    .hero-title { font-size: 3.4rem; }
}

/* ---------- Botones ---------- */
.btn { font-weight: 700; }
.btn-primary:focus-visible { outline-color: var(--marca-verde); }
.btn:disabled, .btn[disabled] { box-shadow: none; transform: none; }
.btn-outline-light:hover { background-color: var(--hover); }
.btn-outline-light:active { transform: translate(1px, 1px); }

/* ---------- Formularios (mismo tamano y estructura; solo color y foco) ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
    background-color: var(--marca-blanco);
    color: var(--text-primary);
    font-family: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
    outline: 2px solid var(--marca-negro);
    outline-offset: 1px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca-verde); }
::selection { background: var(--marca-dorado); color: var(--marca-negro); }

/* ---------- Ventanas (modales): encabezado blanco con linea negra ---------- */
.modal-box > div:first-child { background: var(--marca-blanco); border-bottom: 2px solid var(--marca-negro) !important; }

/* ---------- Avisos (toasts) ---------- */
.toast { border-left-width: 8px; }

/* ---------- Tablas: encabezado limpio con linea negra (sin relleno de color) ---------- */
#appContainer table thead th,
#appContainer table > tr:first-child > th,
.cos-table th {
    background-color: var(--marca-blanco);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--marca-negro);
}
#appContainer table tbody tr:hover td { background-color: var(--hover); }

/* ---------- Menu lateral (Admin / Inventario): activo en negro con marca dorada ---------- */
.nav-btn { color: var(--text-primary); }
.nav-btn:hover { background: var(--hover); }
.nav-btn.active,
[data-admin-sidebar="1"] .nav-btn.active,
[data-inv-sidebar="1"] .nav-btn.active {
    background: var(--marca-negro);
    color: var(--marca-blanco);
    border-color: var(--marca-negro);
    box-shadow: inset 5px 0 0 var(--marca-dorado);
}
.nav-btn.active i { color: var(--marca-dorado); }

/* ---------- Seleccion (filtros, pestanas, periodos, categorias): negro -- los botones son dorados ---------- */
.cos-seg button.on { background: var(--marca-negro); color: var(--marca-blanco); }
.cos-tab.on { border-bottom-color: var(--marca-negro); }
.pos-cat-pill.active {
    background: var(--marca-negro) !important;
    border-color: var(--marca-negro) !important;
    color: var(--marca-blanco) !important;
}

/* Botones de accion de costeo/dashboard/activos: mismo comportamiento que .btn-primary */
.cos-btn.primary { background: var(--marca-dorado); color: var(--marca-negro); border-color: var(--marca-negro); }
.cos-btn.primary:hover { background: var(--marca-verde); color: var(--marca-blanco); }
.dt-mustard { color: var(--marca-negro); }

/* ---------- Tarjetas y piezas compartidas ---------- */
.mcard { border-color: var(--border-color); }
.dt-pill { background: var(--marca-blanco); }
.list-btn:hover { border-color: var(--marca-negro) !important; }
.btn-icon-grid:hover { background: var(--hover) !important; color: var(--marca-negro) !important; }
.cos-btn:hover { border-color: var(--marca-negro); }

/* Paneles laterales de detalle (costeo/dashboard/activos): encabezado negro con linea dorada */
.cos-panel-h { background: var(--marca-negro); color: var(--marca-blanco); border-bottom-color: var(--marca-dorado); }
.cos-panel-h .cos-btn, .cos-panel-h .cos-muted { color: var(--marca-blanco); }
.cos-panel-h .cos-btn { border-color: rgba(255, 255, 255, 0.4); }

/* POS: precio en rojo (como la cartelera), variante en dorado; tarjeta con contorno al pasar */
.pos-product-price { color: var(--marca-rojo) !important; }
.pos-badge-variants {
    background: var(--marca-dorado) !important;
    color: var(--marca-negro) !important;
    border-color: var(--marca-negro) !important;
}
.pos-product-card:hover { box-shadow: var(--shadow-sticker) !important; border-color: var(--marca-negro) !important; }
.pos-img-wrap { background: var(--bg-main) !important; }
/* Agotado (H-35): gris, sin contorno al pasar; la etiqueta en rojo de alerta */
.pos-product-card.pos-agotado { position: relative; cursor: not-allowed; }
.pos-product-card.pos-agotado .pos-img-wrap, .pos-product-card.pos-agotado .pos-product-body { opacity: 0.45; filter: grayscale(1); }
.pos-product-card.pos-agotado:hover { box-shadow: none !important; border-color: var(--border-color) !important; }
.pos-agotado-tag {
    position: absolute; top: 8px; left: 8px; z-index: 2; padding: 2px 10px; border: 2px solid var(--marca-negro);
    background: var(--marca-rojo); color: var(--marca-blanco); font-weight: 800; font-size: 0.75rem; text-transform: uppercase;
}

/* Dashboard: KPIs con contorno al pasar */
.dsh-kpi:hover { border-color: var(--marca-negro); box-shadow: var(--shadow-sticker); }

/* ---------- Manuales: tarjetas alternando los colores de la marca ---------- */
.man-grid > .man-card:nth-child(4n+2) { background: var(--marca-negro); }
.man-grid > .man-card:nth-child(4n+3) { background: var(--marca-rojo); color: var(--marca-blanco); }
.man-grid > .man-card:nth-child(4n+3) h2 { color: var(--marca-blanco); }
.man-grid > .man-card:nth-child(4n+3) .man-ico { background: var(--marca-blanco); color: var(--marca-rojo); }
.man-grid > .man-card:nth-child(4n+4) { background: var(--marca-dorado); color: var(--marca-negro); }
.man-grid > .man-card:nth-child(4n+4) h2 { color: var(--marca-negro); }
.man-grid > .man-card:nth-child(4n+4) .man-ico { background: var(--marca-negro); color: var(--marca-dorado); }
.man-grid > .man-card:nth-child(4n+4) .man-tag { background: rgba(29, 29, 27, 0.12); color: var(--marca-negro); }
.man-card .btn-primary { background: var(--marca-blanco); color: var(--marca-negro); }
.man-card .btn-primary:hover { background: var(--marca-dorado); color: var(--marca-negro); }

/* Lector de manuales: barra superior negra con linea dorada */
.mt-top { background: var(--marca-negro); border-bottom-color: var(--marca-dorado); }
.mt-item.on { background: var(--marca-negro); color: var(--marca-blanco); }

/* ---------- Kiosco (autoservicio y pantalla de turnos) ---------- */
body.kiosk-mode .app-container { background: var(--marca-blanco); }
body.kiosk-mode h2 { font-size: 2.4rem !important; }

/* ---------- Ilustracion del personaje (login y vinculacion de dispositivos) ---------- */
.marca-ilustracion { display: block; margin: 0 auto 12px; height: 140px; width: auto; }

/* ---------- Scrollbar discreta en tinta de marca ---------- */
* { scrollbar-color: rgba(29, 29, 27, 0.35) transparent; }

/* Titulos de tarjeta pintados en linea con el color primario (login, seleccion de sucursal): negro */
#appContainer h2[style*="color:var(--primary)"] { color: var(--marca-negro) !important; }

/* Pestanas de periodo y filtros activos (Kardex, Caja, Ventas, Compras, Existencias...): se pintan en linea con
   el color primario; aqui pasan al color de SELECCION (negro), distinto de los botones de accion (dorados). */
button[onclick*="._set"][style*="background:var(--primary)"],
button.btn-primary[onclick*="._set"] {
    background: var(--marca-negro) !important;
    border-color: var(--marca-negro) !important;
    color: var(--marca-blanco) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Botones de accion pintados en linea con colores de estado (aviso/exito): mismo comportamiento que .btn-primary
   (dorado, verde al pasar el mouse). Los de peligro conservan el rojo, con contorno de marca. */
.btn[style*="background-color:var(--warning)"], .btn[style*="background:var(--warning)"],
.btn[style*="background-color:var(--success)"], .btn[style*="background:var(--success)"] {
    background: var(--marca-dorado) !important;
    color: var(--marca-negro) !important;
    border: 2px solid var(--marca-negro) !important;
    box-shadow: var(--shadow-sticker);
    transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn[style*="background-color:var(--warning)"]:hover, .btn[style*="background:var(--warning)"]:hover,
.btn[style*="background-color:var(--success)"]:hover, .btn[style*="background:var(--success)"]:hover {
    background: var(--marca-verde) !important;
    color: var(--marca-blanco) !important;
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--marca-negro);
}
.btn[style*="background-color:var(--danger)"], .btn[style*="background:var(--danger)"] {
    border: 2px solid var(--marca-negro) !important;
    box-shadow: var(--shadow-sticker);
}


/* ---------- Menu de Admin por tareas (cap. 27): grupos plegables, buscador y ruta de la pantalla ---------- */
.adm-buscar { position:relative; margin:4px 0 10px; }
.adm-buscar i { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:.85rem; color:var(--text-muted); }
.adm-buscar input { width:100%; padding:9px 10px 9px 30px; border:2px solid var(--marca-negro); border-radius:var(--radius-sm); font-size:.9rem; background:#fff; }
.adm-buscar-vacio { font-size:.82rem; color:var(--text-muted); padding:4px 2px 8px; }
details.adm-grp { margin-top:10px; }
details.adm-grp > summary { list-style:none; cursor:pointer; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--marca-negro); padding:6px 4px; border-bottom:2px solid var(--marca-negro); display:flex; justify-content:space-between; align-items:center; }
details.adm-grp > summary::-webkit-details-marker { display:none; }
details.adm-grp > summary::after { content:'+'; font-size:1rem; }
details.adm-grp[open] > summary::after { content:'–'; }
details.adm-grp > summary:hover { color:var(--marca-verde); border-color:var(--marca-verde); }
.adm-solo-busqueda { display:none !important; }
.adm-buscando .adm-solo-busqueda:not(.adm-oculto) { display:flex !important; }
.adm-oculto { display:none !important; }
.adm-ruta { padding:14px 32px 0; font-size:.8rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; min-height:14px; }
.adm-ruta span { margin:0 4px; color:var(--marca-dorado); }
@media (max-width:900px) { .adm-ruta { display:none; } }
details.adm-grp > .nav-btn { margin-top:6px; }
@media (max-width:900px) {
  [data-admin-sidebar="1"] .side-nav > .adm-buscar, [data-admin-sidebar="1"] .side-nav > .adm-buscar-vacio,
  [data-admin-sidebar="1"] .side-nav > details.adm-grp { grid-column:1 / -1; }
  details.adm-grp[open] { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  details.adm-grp > summary { grid-column:1 / -1; }
  details.adm-grp > .nav-btn { margin-top:0; }
}

/* ---------- "¿De donde sale este numero?" (cap. 26 §26.13): todo lo que se abre se ve tocable ---------- */
.ct-num { border-bottom:2px dotted var(--marca-dorado); cursor:pointer; }
.ct-num:hover, .ct-num:focus { color:var(--marca-verde); border-bottom-color:var(--marca-verde); outline:none; }
.ct-fila { cursor:pointer; }
.ct-fila:hover > td { background:rgba(242,178,48,.12); }
.ct-kpi { cursor:pointer; transition:transform .08s; }
.ct-kpi:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--marca-dorado); }
.ct-ver { font-size:.72rem; font-weight:700; color:var(--marca-verde); white-space:nowrap; }
.ct-formula td { padding:9px 10px; }

/* ---------- Recorridos "Enséñame" (cap. 27 §27.5) ---------- */
#tourHL { position:fixed; z-index:4400; border:3px solid var(--marca-dorado); border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(29,29,27,.62); transition:all .18s ease; }
#tourPop { position:fixed; z-index:4401; background:#fff; border:3px solid var(--marca-negro); border-radius:12px; padding:14px 16px;
  box-shadow:6px 6px 0 var(--marca-dorado); }
#tourPop .tour-n { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
#tourPop .tour-t { font-size:1.08rem; font-weight:800; margin:4px 0; }
#tourPop .tour-x { font-size:.9rem; line-height:1.4; }
#tourPop .tour-b { display:flex; gap:8px; margin-top:12px; align-items:center; }
#tourPop .tour-b .btn { padding:8px 14px; }
.tour-item { display:flex; gap:12px; align-items:center; width:100%; text-align:left; background:var(--bg-main); border:2px solid var(--marca-negro);
  border-radius:10px; padding:10px 12px; margin-bottom:8px; cursor:pointer; }
.tour-item:hover { box-shadow:3px 3px 0 var(--marca-dorado); }
.tour-item > div { flex:1; }
.tour-aqui { background:var(--marca-dorado); color:var(--marca-negro); font-size:.7rem; font-weight:800; border-radius:999px; padding:1px 8px; }
#mtArticle img { max-width:100%; border:2px solid var(--marca-negro); border-radius:8px; margin:6px 0 10px; box-shadow:4px 4px 0 var(--marca-dorado); }
a.mt-tour { display:inline-flex; gap:6px; align-items:center; background:var(--marca-dorado); color:var(--marca-negro) !important; font-weight:800;
  border:2px solid var(--marca-negro); border-radius:999px; padding:6px 14px; text-decoration:none; margin:4px 0; }
a.mt-tour:hover { background:var(--marca-verde); color:#fff !important; }

/* ---------- Cuenta -> Capacitacion (cap. 27 §27.6) ---------- */
.cap-head { display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; background:#fff; border:2px solid var(--marca-negro);
  border-radius:12px; padding:14px 16px; margin-bottom:14px; box-shadow:4px 4px 0 var(--marca-dorado); }
.cap-tit { font-size:1.15rem; font-weight:800; }
.cap-pct { min-width:200px; font-size:.86rem; }
.cap-barra { height:10px; background:var(--marca-crema); border:1px solid var(--marca-negro); border-radius:999px; overflow:hidden; margin-top:4px; }
.cap-barra > span { display:block; height:100%; background:var(--marca-verde); }
.cap-leccion { display:flex; gap:14px; background:#fff; border:1px solid var(--border-color); border-left:5px solid var(--marca-dorado); border-radius:10px;
  padding:12px 14px; margin-bottom:10px; }
.cap-leccion.ok { border-left-color:var(--marca-verde); }
.cap-num { width:34px; height:34px; border-radius:50%; background:var(--marca-negro); color:#fff; font-weight:800; display:flex; align-items:center;
  justify-content:center; flex:none; }
.cap-leccion.ok .cap-num { background:var(--marca-verde); }
.cap-ok { font-size:.72rem; font-weight:800; color:var(--marca-verde); }
.cap-btns { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.cap-btns .btn { padding:7px 12px; font-size:.84rem; }
.cap-btns .btn-outline-light { color:var(--text-main); border-color:var(--border-color); }
.cap-preg { border:1px solid var(--border-color); border-radius:10px; padding:10px 12px; margin-bottom:10px; }
.cap-op { display:block; padding:6px 4px; cursor:pointer; }
.cap-porque { margin-top:6px; font-size:.84rem; padding:6px 8px; border-radius:6px; }
.cap-porque.bien { background:rgba(37,124,77,.12); color:var(--marca-verde); }
.cap-porque.mal { background:rgba(225,68,72,.1); color:var(--marca-rojo); }

/* ---------- Corte de caja (§21.11) ---------- */
.corte-pasos { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.corte-pasos span { font-size:.76rem; font-weight:800; padding:4px 10px; border-radius:999px; border:1.5px solid var(--border-color); }
.corte-pasos span.on { background:var(--marca-dorado); border-color:var(--marca-negro); }
.corte-pasos span.ok { background:var(--marca-verde); color:#fff; border-color:var(--marca-verde); }
.corte-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; }
.corte-den { display:flex; flex-direction:column; gap:3px; background:var(--bg-main); border:1px solid var(--border-color); border-radius:8px; padding:8px; }
.corte-den span { font-weight:800; font-size:.84rem; }
.corte-den small { font-size:.76rem; color:var(--text-muted); text-align:right; }
.corte-total { margin-top:10px; font-size:1.05rem; text-align:right; }

/* ---------- Modo practica (cap. 27 §27.7) ---------- */
#practicaLetrero { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:2500; background:var(--marca-dorado);
  color:var(--marca-negro); border:3px solid var(--marca-negro); border-radius:999px; padding:8px 10px 8px 18px; font-size:.9rem;
  box-shadow:4px 4px 0 var(--marca-negro); display:flex; gap:10px; align-items:center; white-space:nowrap; }
#practicaLetrero button { background:var(--marca-negro); color:#fff; border:none; border-radius:999px; padding:6px 14px; font-weight:800; cursor:pointer; }
body.modo-practica .navbar { box-shadow:inset 0 -6px 0 var(--marca-dorado); }
.cap-practica { display:flex; gap:14px; justify-content:space-between; align-items:center; flex-wrap:wrap; background:var(--marca-crema);
  border:2px dashed var(--marca-negro); border-radius:12px; padding:12px 16px; margin:16px 0; }
.cap-practica .btn-outline-light { color:var(--text-main); border-color:var(--marca-negro); }
@media (max-width:700px) { #practicaLetrero { white-space:normal; width:calc(100% - 24px); justify-content:space-between; } }

/* Caja sin internet (H-36, js/offline.js): barra fija abajo; ambar con ventas por subir, roja sin red */
.offline-barra {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 3000; padding: 8px 16px; text-align: center; font-size: 0.9rem;
    background: var(--marca-dorado); color: var(--marca-negro); border-top: 2px solid var(--marca-negro);
}
.offline-barra.sin-red { background: var(--marca-rojo); color: var(--marca-blanco); }
.offline-barra a { color: inherit; text-decoration: underline; font-weight: 700; }

/* ---------- Admin → Insumos: lista agrupada por categoría y estados (cap. 5 §5.10) ---------- */
.ins-barra { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.ins-barra input[type=search] { flex:1; min-width:220px; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-sm); }
.ins-seg { display:inline-flex; border:1.5px solid var(--marca-negro); border-radius:999px; overflow:hidden; }
.ins-seg button { border:none; background:var(--marca-blanco); padding:7px 14px; font-weight:700; font-size:.82rem; cursor:pointer; color:var(--text-main); }
.ins-seg button + button { border-left:1.5px solid var(--marca-negro); }
.ins-seg button.on { background:var(--marca-negro); color:var(--marca-blanco); }
.ins-chip { border:1.5px solid var(--border-color); background:var(--marca-blanco); border-radius:999px; padding:6px 12px; font-size:.8rem; font-weight:700; cursor:pointer; color:var(--text-main); }
.ins-chip.on { background:var(--marca-dorado); border-color:var(--marca-negro); }
.ins-chip b { margin-left:4px; }
.ins-grupo { border:1.5px solid var(--marca-negro); border-radius:12px; margin-bottom:12px; background:var(--surface); box-shadow:3px 3px 0 var(--marca-negro); overflow:hidden; }
.ins-grupo > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; padding:10px 14px; font-weight:800; background:var(--marca-crema); }
.ins-grupo > summary::-webkit-details-marker { display:none; }
.ins-grupo > summary .fa-chevron-right { transition:transform .15s; font-size:.8rem; }
.ins-grupo[open] > summary .fa-chevron-right { transform:rotate(90deg); }
.ins-grupo > summary .ins-n { font-weight:600; color:var(--text-muted); font-size:.85rem; }
.ins-tabla { width:100%; border-collapse:collapse; font-size:.88rem; }
.ins-tabla th { text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted); padding:8px 12px; border-bottom:1px solid var(--border-color); }
.ins-tabla td { padding:9px 12px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.ins-tabla tr:last-child td { border-bottom:none; }
.ins-tabla tr.inactivo td { opacity:.55; }
.ins-sub { display:block; color:var(--text-muted); font-size:.76rem; font-weight:500; margin-top:2px; }
.ins-tag { display:inline-block; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px; padding:2px 7px; border-radius:999px; margin:2px 4px 2px 0; white-space:nowrap; }
.ins-tag.rojo { background:var(--marca-rojo); color:var(--marca-blanco); }
.ins-tag.ambar { background:var(--marca-dorado); color:var(--marca-negro); }
.ins-tag.info { background:rgba(29,29,27,.08); color:var(--text-main); }
.ins-tag.prep { background:rgba(37,124,77,.12); color:var(--marca-verde); }
.ins-uso { background:none; border:none; padding:0; color:var(--text-main); text-decoration:underline; cursor:pointer; font:inherit; text-align:left; }
.ins-vacio { padding:24px; text-align:center; color:var(--text-muted); }
@media (max-width:800px) { .ins-tabla .ins-col-opc { display:none; } }

/* Editor de receta de preparado: alta rápida de insumo y costo en vivo */
.ir-nuevo { margin-top:8px; padding:10px; border:1.5px dashed var(--marca-negro); border-radius:10px; background:var(--bg-main); display:grid; gap:8px; }
.ir-nuevo .ir-nuevo-campos { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.ir-nuevo label { display:block; font-weight:700; font-size:.76rem; margin-bottom:4px; }
.ir-nuevo select, .ir-nuevo input { padding:8px; border:1px solid var(--border-color); border-radius:var(--radius-sm); }
.ir-costo { font-size:.8rem; color:var(--text-muted); margin-top:6px; }
.ir-costo b { color:var(--text-main); }
.ir-total { background:var(--marca-crema); border:1.5px solid var(--marca-negro); border-radius:10px; padding:10px 14px; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.88rem; }
.ir-total b { font-size:1rem; }

/* ---------- Registrar gasto o compra (super admin, cap. 21 §21.16) ---------- */
.rg-paso { display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1.5px solid var(--marca-negro); border-radius:12px; box-shadow:3px 3px 0 var(--marca-negro); padding:16px; margin-bottom:14px; }
.rg-num { flex:0 0 34px; height:34px; border-radius:50%; background:var(--marca-dorado); border:2px solid var(--marca-negro); display:flex; align-items:center; justify-content:center; font-weight:900; }
.rg-tit { font-weight:800; font-size:1.02rem; margin-bottom:10px; }
.rg-tipos { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; }
.rg-tipo { display:flex; flex-direction:column; gap:4px; text-align:left; background:var(--marca-blanco); border:1.5px solid var(--border-color); border-radius:10px; padding:12px; cursor:pointer; color:var(--text-main); font:inherit; }
.rg-tipo i { font-size:1.2rem; }
.rg-tipo span { font-size:.78rem; color:var(--text-muted); }
.rg-tipo.on { background:var(--marca-dorado); border-color:var(--marca-negro); box-shadow:3px 3px 0 var(--marca-negro); }
.rg-tipo.on span { color:var(--marca-negro); }
.rg-tipo-ir { border-style:dashed; }
.rg-opciones { display:flex; flex-wrap:wrap; gap:10px; }
.rg-op { display:flex; gap:8px; align-items:flex-start; border:1.5px solid var(--border-color); border-radius:10px; padding:10px 12px; cursor:pointer; min-width:220px; }
.rg-op small { display:block; color:var(--text-muted); font-size:.76rem; }
.rg-op:has(input:checked) { border-color:var(--marca-negro); background:var(--marca-crema); }
.rg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.rg-linea { display:flex; gap:8px; align-items:flex-start; flex-wrap:wrap; }
.rg-previa { background:var(--marca-crema); border:1.5px solid var(--marca-negro); border-radius:10px; padding:12px 14px; color:var(--text-main); }
.rg-previa ol { margin:8px 0 0 18px; display:grid; gap:4px; }
.rg-previa-tot { font-size:1.02rem; }
.rg-aviso { margin-top:8px; font-size:.86rem; }
.rg-dup { color:var(--marca-rojo); font-weight:700; }