/* HARUUZ — hoja de estilos.
   IDENTIDAD DE MARCA (Guía de marca v1.0, docs/REGLAS-INTERFAZ.md sección 26): Carbón #232021 (único negro) · Topo #6A5950 ·
   Arena #DDD1C1 · Blanco · Cálidos #7E6759/#967B69/#B5947E (solo detalles, nunca fondo completo) · Pizarra #494C58 = color de acción.
   Los nombres --azul* se conservan como alias histórico (hoy valen Pizarra, ya no son azules). TODOS los colores viven en el
   bloque :root de abajo: se cambian SOLO ahí. TIPOGRAFÍA: Cormorant Garamond solo en títulos (h1/h2/cabeceras de página);
   Montserrat en todo lo demás (cifras y tablas incluidas); ambas servidas desde /static/fonts (nada de Google Fonts).
   ESTRUCTURA: tomada de los paneles de Logger (barra superior con ruta, cabecera de página título + subtítulo,
   franja de cifras con divisores, accesos rápidos en tarjeta, bloques numerados, tablas dentro de tarjeta,
   pastillas de estado, escala de espacios de 4 px). Regla de Logger que se respeta: el color de acción es SOLO para
   acciones y "estás aquí"; lo que no es acción, no va en él. */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: optional; src: url("/static/fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: optional; src: url("/static/fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: optional; src: url("/static/fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: optional; src: url("/static/fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 500; font-style: normal; font-display: optional; src: url("/static/fonts/CormorantGaramond-Medium.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-style: normal; font-display: optional; src: url("/static/fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal; font-display: optional; src: url("/static/fonts/CormorantGaramond-Bold.ttf") format("truetype"); }
:root {
  /* ── Marca (valores de siempre) ── */
  --negro: #232021;
  --azul: #494C58;        /* alias histórico = Pizarra: acción (botones, enlaces, sección activa) */
  --azul-osc: color-mix(in srgb, var(--azul) 78%, var(--negro));    /* hover de la acción (≈ #41424C) */
  --azul-claro: color-mix(in srgb, var(--azul) 10%, var(--blanco)); /* fondo suave de la acción (caja del total, ≈ #EDEDEE) */
  --pizarra: var(--azul);
  --topo: #6A5950;        /* títulos secundarios, rótulos, detalles */
  --calido-1: #7E6759;    /* cálidos: solo degradados, detalles y botones secundarios; NUNCA fondo completo */
  --calido-2: #967B69;
  --calido-3: #B5947E;    /* sobre Carbón: 5,77:1 */
  --gris: #616262;        /* textos secundarios */
  --arena: #ddd1c1;
  --arena-clara: #f3eee7;
  --blanco: #ffffff;
  --linea: #e4dbcf;
  --texto-suave: #6f6660;
  --rojo: #a33a32;
  --rojo-fondo: #f8e9e7;
  --verde: #3d6b47;
  --verde-fondo: #e8f0e9;
  --ambar: #7a5a12;       /* alerta reversible (antes escrito a mano en .aviso.alerta) */
  --ambar-fondo: #fbf3dc;
  --ambar-linea: #ecd9a0;
  /* Gráficas de resultados (sección 29): colores de las series. Opción C de Stiven (28/10/2026), validados el 29/10/2026:
     barra contra blanco >= 3:1 y ΔE entre series >= 20. Costo 3,86:1. Gastos: #C2A35B daba 2,42:1, se oscureció lo mínimo a 3,04:1. */
  --grafica-ventas: var(--azul);       /* Pizarra, 8,54:1 */
  --grafica-costo: #A5785A;
  --grafica-ganancia: var(--verde);    /* 6,19:1 */
  --grafica-gastos: #AF9048;
  --grafica-perdida: var(--rojo);      /* rojo SOLO para pérdida, 6,54:1 */
  /* Tablero (sección 30, fase 1): línea del acumulado del mes. Cálido 2 #967B69: 3,94:1 contra blanco y ΔE 30,6 contra Pizarra
     (las barras). Topo, que traía la maqueta, daba ΔE 17,1 contra Pizarra (< 20) y no pasa. */
  --grafica-acum: var(--calido-2);
  --grafica-acum-texto: var(--topo);   /* rótulos del eje derecho: texto, no serie; Topo 7,3:1 contra blanco (la línea sola, 3,94:1, no alcanza para letras) */
  /* Tablero fases 2 y 3 (sección 34.8). Mapa de calor: 5 peldaños de Pizarra sobre blanco. Formas de pago: de la marca. Se miden en
     tests/test_tablero_distribucion.py (barra contra blanco >= 3:1; texto del número >= 4,5:1 sobre cada peldaño). */
  --calor-1: #d7d8da;   /* respaldo para navegadores sin color-mix() (valor calculado de la línea siguiente) */
  --calor-1: color-mix(in srgb, var(--azul) 22%, var(--blanco));
  --calor-2: #b6b7bc;   /* respaldo para navegadores sin color-mix() (valor calculado de la línea siguiente) */
  --calor-2: color-mix(in srgb, var(--azul) 40%, var(--blanco));
  --calor-3: #92949b;   /* respaldo para navegadores sin color-mix() (valor calculado de la línea siguiente) */
  --calor-3: color-mix(in srgb, var(--azul) 60%, var(--blanco));
  --calor-4: #6d7079;   /* respaldo para navegadores sin color-mix() (valor calculado de la línea siguiente) */
  --calor-4: color-mix(in srgb, var(--azul) 80%, var(--blanco));
  --calor-5: var(--azul);
  --pago-efectivo: var(--verde);
  --pago-nequi: var(--azul);
  --pago-transferencia: var(--calido-1);
  --pago-datafono: var(--gris);
  --pago-breb: var(--calido-2);
  --pago-saldo-favor: var(--topo);   /* además con rayas: no es dinero del día */
  --naranja: #b34a0b;     /* aviso fuerte antes del rojo (vigilante del tope, 90 % a 99,9 %); fondos y bordes se derivan con color-mix */

  /* ── Usos (apuntan a los de arriba; cambiar la marca = cambiar el bloque de arriba) ── */
  --fondo: var(--arena-clara);       /* lienzo de la página */
  --superficie: var(--blanco);       /* tarjetas y formularios */
  --superficie-2: var(--arena-clara);/* cabecera de tabla, cajas secundarias */
  --linea-fuerte: color-mix(in srgb, var(--linea) 90%, var(--negro));
  --menu-fondo: var(--negro);
  --menu-texto: var(--arena);
  --menu-rotulo: color-mix(in srgb, var(--arena) 72%, var(--negro));
  --menu-linea: #3a3537;
  --menu-hover: #2f2a2c;
  --menu-activo: color-mix(in srgb, var(--arena) 16%, var(--negro));
  --anulada: var(--texto-suave);
  --fuente: "Montserrat", system-ui, sans-serif;
  --fuente-titulo: "Cormorant Garamond", Georgia, serif;
  /* Tonos de los tipos de ropa (lista CERRADA, app/models/inventario.py → TONOS). Cada tono sale de las
     variables de arriba; no hay paleta nueva. «intermedio» = mezcla de arena y negro (el de Americana). */
  --tipo-am: var(--topo);   /* Americana = Topo (blanco sobre Topo 6,65:1; la mezcla anterior daba 3,83:1) */
  --tipo-am-texto: var(--blanco);
  --tono-negro: var(--negro);          --tono-negro-texto: var(--arena);
  --tono-arena: var(--arena);          --tono-arena-texto: var(--negro);
  --tono-intermedio: var(--tipo-am);   --tono-intermedio-texto: var(--tipo-am-texto);
  --tono-azul: var(--calido-3);        --tono-azul-texto: var(--negro);  /* etiqueta visible «Cálido»; el valor guardado «azul» NO cambia. Pizarra era ≈ Carbón (1,89:1); Cálido 3 con texto Carbón 5,77:1 */
  --tono-azul-claro: var(--azul-claro);--tono-azul-claro-texto: var(--azul);
  --tono-verde: var(--verde);          --tono-verde-texto: var(--blanco);
  --tono-ambar: var(--ambar);          --tono-ambar-texto: var(--blanco);
  --tono-gris: color-mix(in srgb, var(--gris) 60%, var(--blanco)); --tono-gris-texto: var(--negro);  /* Gris de apoyo aclarado: el oscuro se confundía con Topo (ΔE 6 a 10) */

  /* ── Forma y espacio (escala de 4 px, como Logger) ── */
  --ancho-menu: 232px;
  --alto-barra: 56px;
  --radio: 12px;
  --radio-chico: 8px;
  --sombra: 0 1px 2px rgba(35, 32, 33, .05), 0 6px 20px rgba(35, 32, 33, .05);
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 22px; --e6: 32px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente);
  background: var(--fondo);
  color: var(--negro);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); }
h1 { font-family: var(--fuente-titulo); font-variant-numeric: lining-nums; font-size: 1.75rem; font-weight: 600; margin: 0 0 var(--e1); letter-spacing: -.01em; line-height: 1.2; }
h2 { font-family: var(--fuente-titulo); font-variant-numeric: lining-nums; font-size: 1.25rem; font-weight: 700; margin: var(--e5) 0 var(--e3); }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.suave { color: var(--texto-suave); font-size: .88rem; }

/* ═══ Menú lateral (computador) y cajón (celular) ═══ */
.lateral { position: fixed; top: 0; left: 0; bottom: 0; width: var(--ancho-menu); background: var(--menu-fondo);
  color: var(--menu-texto); display: flex; flex-direction: column; padding: 18px 13px 12px; z-index: 30; overflow-y: auto; }
.marca-bloque { display: block; padding: 15px 20px 28px; text-decoration: none; color: var(--blanco); }  /* aire ≥ alto de la «H» del wordmark (33 px a 150 px de ancho; 31.1) */
.logo-completo { display: block; width: 150px; min-width: 120px; max-width: 100%; height: auto; }  /* logo-claro.png (1175×897): solo se fija el ancho; el nombre HARUUZ NO se escribe con fuente (26.4): lo dice el archivo */
.marca { display: block; line-height: 0; text-decoration: none; }
.marca img { display: block; height: 36px; width: auto; }  /* barra del celular: emblema-claro.png, solo se fija el alto */
.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-det { margin: 0; }
.nav-grupo { font-size: .75rem; color: var(--calido-3); font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.1px; padding: 10px 10px 6px; }
.nav-det > summary.nav-grupo { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  list-style: none; user-select: none; min-height: 38px; border-radius: var(--radio-chico); }
.nav-det > summary.nav-grupo::-webkit-details-marker { display: none; }
.nav-det > summary.nav-grupo::after { content: "\25B8"; font-size: .85rem; letter-spacing: 0; transition: transform .18s ease; }
.nav-det[open] > summary.nav-grupo::after { transform: rotate(90deg); }
.nav-det > summary.nav-grupo:hover { color: var(--arena); }
.nav-det > summary.nav-grupo:focus-visible { outline: 2px solid var(--arena); outline-offset: 1px; }
.nav-items { display: flex; flex-direction: column; gap: 2px; padding-bottom: 2px; }
/* Sin animación al abrir/cargar un grupo: el grupo activo viene abierto de fábrica en CADA página y animarlo parpadeaba (31.7). */
@media (prefers-reduced-motion: reduce) {
  .nav-det > summary.nav-grupo::after { transition: none; }
}
/* Cambio de página sin pantallazo en blanco (31.7): el navegador funde la página vieja con la nueva; el menú se queda quieto. */
@view-transition { navigation: auto; }
.lateral { view-transition-name: menu-lateral; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.nav a, .salir button { display: flex; align-items: center; gap: 9px; color: var(--menu-texto); text-decoration: none;
  padding: 7px 10px; border-radius: var(--radio-chico); font-size: .8125rem; font-weight: 500; min-height: 36px; }
.nav a:hover, .salir button:hover { background: var(--menu-hover); color: var(--blanco); }
.nav a.activo { background: var(--menu-activo); color: var(--blanco); font-weight: 600; box-shadow: inset 3px 0 0 var(--arena); }
.nav a:focus-visible, .salir button:focus-visible { outline: 2px solid var(--arena); outline-offset: 1px; }
.ico { flex: none; opacity: .9; width: 18px; height: 18px; }
.pie-menu { border-top: 1px solid var(--menu-linea); padding-top: 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.quien { display: flex; align-items: center; gap: 10px; padding: 4px 8px; min-width: 0; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--arena); color: var(--negro); display: grid;
  place-items: center; font-weight: 700; font-size: .78rem; flex: none; text-transform: uppercase; }
.quien b { display: block; color: var(--blanco); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { display: block; color: var(--menu-rotulo); font-size: .75rem; }
.quien small a { display: inline-block; padding: 8px 0; min-height: 24px; }
.salir { margin: 0; }
.salir button { width: 100%; background: none; border: 0; font: inherit; font-size: .8125rem; cursor: pointer; text-align: left; }
.velo { position: fixed; inset: 0; background: rgba(20, 18, 19, .55); z-index: 25; }
.velo[hidden] { display: none; }
body.con-menu { padding-left: var(--ancho-menu); }

/* Barra superior: ruta de la página (Logger: «crumb»). En celular lleva además el botón ☰. */
.barra { position: sticky; top: 0; z-index: 20; min-height: var(--alto-barra); display: flex; align-items: center; gap: 12px;
  padding: 8px 26px; background: color-mix(in srgb, var(--fondo) 92%, transparent); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linea); }
.ruta { font-size: .82rem; color: var(--texto-suave); }
.ruta a { color: var(--texto-suave); text-decoration: none; }
.ruta a:hover { text-decoration: underline; }
.ruta b { color: var(--negro); font-weight: 600; }
.barra .marca { display: none; }
.abrir-menu { display: none; background: none; border: 1px solid var(--linea-fuerte); color: var(--negro); font-size: 1.3rem;
  width: 44px; height: 44px; cursor: pointer; border-radius: 10px; flex: none; }
.abrir-menu:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (max-width: 767px) {
  body.con-menu { padding-left: 0; }
  .barra { padding: 6px 12px; background: var(--menu-fondo); border-bottom: 0; }
  .barra .ruta { display: none; }
  .barra .marca { display: block; }
  .abrir-menu { display: grid; place-items: center; color: var(--blanco); border-color: var(--menu-linea); }
  .abrir-menu:focus-visible { outline-color: var(--arena); }
  .lateral { transform: translateX(-100%); transition: transform .22s ease; width: min(80vw, 270px); box-shadow: 4px 0 18px rgba(0,0,0,.25); }
  body.menu-abierto .lateral { transform: none; }
  .nav a, .salir button { min-height: 40px; }
  .nav-det > summary.nav-grupo { min-height: 44px; }
  body.menu-abierto { overflow: hidden; }
}
@media print { .lateral, .barra, .velo { display: none !important; } body.con-menu { padding-left: 0; } }

main { max-width: 1180px; margin: 0 auto; padding: var(--e5) 26px 70px; }
/* Páginas de listas y tablas (Envíos, Ventas, Inventario, Kardex, Clientes, Apartados, Entradas, Ajustes):
   usan casi todo el ancho de la ventana. Los formularios y detalles siguen en 1180px. */
main.ancha { max-width: 1680px; }
@media (min-width: 768px) { main.ancha { padding-left: 18px; padding-right: 18px; } }
@media (max-width: 767px) { main { padding: var(--e4) 16px 56px; } }

/* Cabecera de página (Logger: título + subtítulo apagado, acciones a la derecha) */
.cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.cabecera h1 { margin: 0; }
.cabecera .sub { color: var(--texto-suave); font-size: .9rem; margin: 3px 0 0; }
.cabecera .acciones { margin: 0; }

/* ═══ Tarjetas ═══ */
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.tarjeta > h2:first-child { margin-top: 0; }
.rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--e4); }
.rejilla > .tarjeta { margin-bottom: 0; }
.cifra { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.cifra-label { color: var(--texto-suave); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* Bloques dentro de una tarjeta (Logger: .blk con cabecera numerada) */
.tarjeta.con-bloques { padding: 0; }
.bloque { padding: var(--e5) var(--e5); border-bottom: 1px solid var(--linea); }
.bloque:last-child { border-bottom: 0; }
.bloque-cab { display: flex; align-items: center; gap: 9px; margin-bottom: var(--e4); flex-wrap: wrap; }
.bloque-cab h2 { margin: 0; font-family: var(--fuente); font-size: 1rem; font-weight: 600; }  /* rótulo compacto: Montserrat */
.bloque-cab .n { width: 24px; height: 24px; border-radius: 7px; background: var(--superficie-2); border: 1px solid var(--linea);
  display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; }
.bloque-cab .suave { margin-left: auto; }

/* Franja de cifras (Logger: .pcifras — una sola tarjeta, cifras separadas por divisores) */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--linea);
  border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); margin-bottom: var(--e4); }
.cifras > .kpi { background: var(--superficie); padding: var(--e4) var(--e5); min-width: 0; }
.kpi .l { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--texto-suave); }
.kpi .v { font-size: 1.65rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.15; overflow-wrap: anywhere; }
.kpi .p { font-size: .8rem; color: var(--texto-suave); margin-top: 3px; }
.kpi .v.v-texto { font-size: 1.05rem; }   /* cifra que es una palabra («Al cobro»), no un número */
.kpi.alerta .l, .kpi.alerta .v { color: var(--rojo); }
.kpi.bien .v { color: var(--verde); }
.kpi.apagado .v, .kpi.apagado .l { color: var(--texto-suave); opacity: .6; }
@media (max-width: 767px) {
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras > .kpi { padding: var(--e3) var(--e4); }
  .kpi .v { font-size: 1.3rem; }
  .cifras > .kpi.ancho { grid-column: 1 / -1; }
  /* si la última cifra queda sola en su fila, ocupa la fila entera (sin hueco) */
  .cifras:has(> .ancho) > .kpi:last-child:nth-child(even),
  .cifras:not(:has(> .ancho)) > .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Cabecera de bloque en el panel (Logger: .pblock-h — título, subtítulo y enlace «ver») */
.seccion-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: var(--e6) 0 var(--e3); }
.seccion-cab h2 { margin: 0; font-size: 1.3rem; }
.seccion-cab .sub { font-size: .84rem; color: var(--texto-suave); margin: 0; }
.ver { font-size: .86rem; font-weight: 600; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }  /* subrayado: Pizarra se parece al texto negro (26.8) */
.ver:hover { text-decoration-thickness: 2px; }

/* Franja superior del panel (Logger: «póster» de la portada) */
.cartel { background: var(--negro); color: var(--blanco); border-radius: var(--radio); padding: var(--e5) 28px; margin-bottom: var(--e5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; box-shadow: var(--sombra); }
.cartel { border-bottom: 3px solid var(--calido-3); }  /* filete de marca, discreto */
.cartel h1 { font-size: 2.1rem; margin: 0; letter-spacing: -.01em; }
.cartel .meta { color: var(--arena); font-size: .9rem; margin: 6px 0 0; }
.cartel .hola { text-align: right; color: var(--arena); font-size: .86rem; }
.cartel .hola b { display: block; color: var(--blanco); font-size: 1.1rem; font-weight: 600; }
.cartel .chip { vertical-align: middle; }
@media (max-width: 767px) { .cartel { padding: var(--e4) 18px; } .cartel h1 { font-size: 1.7rem; } .cartel .hola { text-align: left; } }

/* Accesos rápidos (Logger: .pacc — icono en cuadro, título, descripción, flecha) */
.accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--e4); }
.acceso { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e4) var(--e5);
  box-shadow: var(--sombra); display: flex; align-items: center; gap: var(--e4); text-decoration: none; color: var(--negro); min-height: 84px;
  transition: border-color .12s, transform .12s; }
.acceso:hover { border-color: var(--azul); transform: translateY(-1px); }
.acceso:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.acceso .ic { width: 46px; height: 46px; border-radius: 11px; background: var(--superficie-2); color: var(--negro); display: grid; place-items: center; flex: none; }
.acceso.principal { border-color: var(--azul); }
.acceso.principal .ic { background: var(--azul); color: var(--blanco); }
.acceso .t { display: block; font-size: 1.05rem; font-weight: 600; }
.acceso .d { display: block; font-size: .84rem; color: var(--texto-suave); }
.acceso .ir { margin-left: auto; color: var(--azul); font-size: 1.3rem; font-weight: 600; flex: none; }  /* flecha: ya no se confunde con texto negro */

/* ═══ Botones (Logger: primario sólido, secundario blanco con borde, 8 px de radio) ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.15rem;
  border-radius: var(--radio-chico); border: 1px solid var(--azul); background: var(--azul); color: var(--blanco); font: inherit;
  font-weight: 600; font-size: .92rem; cursor: pointer; text-decoration: none; transition: background .12s; }
.btn:hover { background: var(--azul-osc); border-color: var(--azul-osc); }
.btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.sec { background: var(--blanco); color: var(--negro); border-color: var(--linea-fuerte); }
.btn.sec:hover { background: var(--superficie-2); }
.btn.peligro { background: var(--blanco); color: var(--rojo); border-color: var(--rojo); }
.btn.peligro:hover { background: var(--rojo-fondo); }
.btn.rojo { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }
.btn.rojo:hover { filter: brightness(.93); }
.btn.grande { min-height: 56px; font-size: 1.05rem; width: 100%; }
.btn.chico { min-height: 36px; padding: .3rem .8rem; font-size: .84rem; }
.acciones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: var(--e3) 0; }
.acciones.derecha { justify-content: flex-end; }

/* ═══ Formularios (Logger: rótulo pequeño en negrita arriba, casilla con borde fino y aro de foco) ═══ */
label { display: block; font-size: .8rem; font-weight: 600; margin: var(--e3) 0 6px; }
input, select, textarea { width: 100%; font: inherit; font-size: .95rem; padding: .55rem .75rem; min-height: 44px; border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); background: var(--blanco); color: var(--negro); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }
.fila { display: grid; gap: var(--e3) var(--e4); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fila > div > label:first-child { margin-top: 0; }
.fila label { margin-top: var(--e2); }
.check { display: flex; gap: .5rem; align-items: center; font-weight: 500; font-size: .9rem; }
.check input { width: 20px; height: 20px; min-height: auto; accent-color: var(--azul); flex: none; }
/* Barra de filtros: una tarjeta con los campos en fila y el botón al final (Logger: buscadores) */
form.filtros { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; padding: var(--e4) var(--e5); }
form.filtros label { margin-top: 0; }
details.tarjeta > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 32px; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
details.tarjeta > summary::-webkit-details-marker { display: none; }

/* ═══ Tablas (Logger: dentro de tarjeta, cabecera en papel, filas con divisor fino, cifras a la derecha) ═══ */
.tabla-caja { overflow-x: auto; }
.tabla-caja.tarjeta { padding: 0; overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: var(--blanco); font-size: .9rem; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: middle; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); font-weight: 700;
  background: var(--superficie-2); border-bottom-color: var(--linea-fuerte); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 55%, var(--blanco)); }
td.num { font-weight: 600; }
td a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
td a:hover { text-decoration: underline; }
td[colspan].suave { text-align: center; padding: var(--e5); }
/* Anuladas (venta, gasto, cierre, despacho…): SIN tachado (Stiven, 30/09/2026). Se distinguen por la etiqueta
   de estado (ANULADA/ANULADO) y la fila va en gris suave. */
tr.anulada td { color: var(--anulada); }
tfoot td { font-weight: 700; border-top: 1px solid var(--linea-fuerte); border-bottom: 0; background: var(--superficie-2); }

/* ═══ Pastillas de estado (Logger: fondo suave + texto del mismo tono, radio 20 px) ═══
   Regla única de la etiqueta (docs/REGLAS-INTERFAZ.md, regla 13): SIEMPRE en MAYÚSCULAS con la misma letra,
   peso y espaciado en todo el sistema. En la plantilla el texto va normal («anulada», «con devolución»): la
   mayúscula la pone el CSS, así el title y los lectores de pantalla leen natural. Ningún otro selector
   cambia font-size, font-weight, letter-spacing ni text-transform de .chip (solo el relleno/color). */
.chip { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700; padding: 2px 10px; border-radius: 20px;
  background: var(--superficie-2); color: var(--negro); border: 1px solid var(--linea);
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; line-height: 1.3; }
.chip.rojo { background: var(--rojo-fondo); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 25%, var(--rojo-fondo)); }
.chip.verde { background: var(--verde-fondo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 25%, var(--verde-fondo)); }
/* Aviso de Inicio (24.7 regla 30): apartados vencidos o liberados con abonos por resolver, en el cartel de Hoy. */
.por-resolver { color: var(--naranja); font-weight: 700; text-decoration: none; }
.por-resolver:hover, .por-resolver:focus-visible { text-decoration: underline; }
.chip.naranja { background: color-mix(in srgb, var(--naranja) 12%, var(--blanco)); color: var(--naranja); border-color: color-mix(in srgb, var(--naranja) 35%, var(--blanco)); }
.chip.ambar { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-linea); }
/* Pastilla del tipo de ropa: el color lo elige Stiven en Referencias → Categorías (atributo data-tono).
   Va DESPUÉS de rojo/verde/ámbar para que siempre mande el tono del tipo. */
[data-tono] { --tono: var(--tono-gris); --tono-texto: var(--tono-gris-texto); }
[data-tono="negro"] { --tono: var(--tono-negro); --tono-texto: var(--tono-negro-texto); }
[data-tono="arena"] { --tono: var(--tono-arena); --tono-texto: var(--tono-arena-texto); }
[data-tono="intermedio"] { --tono: var(--tono-intermedio); --tono-texto: var(--tono-intermedio-texto); }
[data-tono="azul"] { --tono: var(--tono-azul); --tono-texto: var(--tono-azul-texto); }
[data-tono="azul-claro"] { --tono: var(--tono-azul-claro); --tono-texto: var(--tono-azul-claro-texto); }
[data-tono="verde"] { --tono: var(--tono-verde); --tono-texto: var(--tono-verde-texto); }
[data-tono="ambar"] { --tono: var(--tono-ambar); --tono-texto: var(--tono-ambar-texto); }
.chip[data-tono] { background: var(--tono); color: var(--tono-texto); border-color: var(--tono); }
/* Muestra del color (tabla de categorías y ventana de categoría) */
.tonos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e1) var(--e3); margin-top: var(--e1); }
.tonos .tono { display: flex; align-items: center; gap: var(--e2); margin: 0; font-weight: 500; cursor: pointer; }
.tonos .tono input { width: auto; min-height: 0; margin: 0; }
.muestra-tono { display: inline-block; width: 22px; height: 14px; border-radius: 4px; vertical-align: middle;
  background: var(--tono); border: 1px solid color-mix(in srgb, var(--negro) 15%, transparent); }

/* ═══ Mensajes (Logger: franja suave con borde del mismo tono) ═══ */
.aviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: var(--e4); border: 1px solid transparent; font-size: .92rem; }
.aviso.ok { background: var(--verde-fondo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 25%, var(--verde-fondo)); }
.aviso.error { background: var(--rojo-fondo); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 25%, var(--rojo-fondo)); }
.aviso.info { background: var(--blanco); color: var(--negro); border-color: var(--linea-fuerte); box-shadow: inset 3px 0 0 var(--arena); }
.aviso.alerta { background: var(--ambar-fondo); color: var(--ambar); border-color: var(--ambar-linea); }

/* ═══ Entrar / cambiar clave / error ═══ */
body:not(.con-menu) main { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.login { width: 100%; max-width: 400px; margin: 10vh auto 0; }
.login .marca-grande { background: var(--negro); border-radius: var(--radio); padding: var(--e5) var(--e5) var(--e4);
  margin-bottom: var(--e4); display: flex; justify-content: center; box-shadow: var(--sombra); }
.login .marca-grande img { display: block; width: 210px; max-width: 100%; height: auto; }  /* logo-claro.png sobre Carbón; nunca bajo 120 px */
.login .tarjeta { padding: var(--e5) var(--e5) var(--e5); }
.login h1 { font-size: 1.6rem; margin-bottom: var(--e3); }
.login .pie { text-align: center; margin-top: var(--e3); }

/* ═══ Vender ═══ */
.buscador { position: sticky; top: var(--alto-barra); z-index: 5; background: var(--fondo); padding: 0 0 var(--e3); }
.buscador input { min-height: 50px; font-size: 1rem; padding-left: 2.6rem;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%236f6660' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E") no-repeat 14px center; }
.productos { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); max-height: 56vh; overflow-y: auto; padding: 2px 2px var(--e2); }
.prod { text-align: left; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) 14px;
  min-height: 100px; cursor: pointer; font: inherit; color: var(--negro); box-shadow: var(--sombra); display: flex; flex-direction: column;
  align-items: flex-start; gap: 6px; transition: border-color .12s, transform .12s; }
.prod:hover { border-color: var(--azul); transform: translateY(-1px); }
.prod:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.prod:active { transform: none; background: var(--azul-claro); }
.prod[disabled] { opacity: .45; cursor: not-allowed; }
.prod b { display: block; font-size: 1rem; line-height: 1.25; }
.prod .suave { display: block; margin-top: auto; font-size: .84rem; }
/* Cuadros de tipo (uno por tipo de ropa): se elige uno y abajo salen solo sus prendas */
.tipos-venta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e4); }
.cuadro-tipo { text-align: left; font: inherit; cursor: pointer; border-radius: var(--radio); padding: var(--e4); min-height: 118px;
  display: flex; flex-direction: column; gap: 4px; border: 2px solid transparent; box-shadow: var(--sombra); transition: transform .12s, box-shadow .12s; }
.cuadro-tipo[data-tono] { background: var(--tono); color: var(--tono-texto); }
.cuadro-tipo .nombre { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.cuadro-tipo .cifra { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: auto; }
.cuadro-tipo .det { font-size: .82rem; opacity: .85; }
.cuadro-tipo:not([disabled]):hover { transform: translateY(-1px); }
.cuadro-tipo:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.cuadro-tipo.activo { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro), var(--sombra); }
.cuadro-tipo[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cuadro-tipo[disabled] .cifra { display: none; }
.cuadro-tipo[disabled] .det { font-size: .8rem; }
.tipo-activo-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); margin: 0 0 var(--e3); }
.tipo-activo-cab h2 { margin: 0; font-family: var(--fuente); font-size: 1.05rem; font-weight: 600; }
.tipo-activo-cab[hidden], .elige-tipo[hidden], .productos[hidden] { display: none; }
.elige-tipo { border: 1px dashed var(--linea-fuerte); border-radius: var(--radio); padding: var(--e5); text-align: center; color: var(--texto-suave); background: var(--superficie); }
@media (max-width: 600px) {
  .tipos-venta { gap: var(--e2); }
  .cuadro-tipo { padding: var(--e3); min-height: 92px; }
  .cuadro-tipo .nombre { font-size: 1rem; }
  .cuadro-tipo .cifra { font-size: 1.35rem; }
  .cuadro-tipo .det { font-size: .72rem; }
}
.venta-rejilla { display: grid; gap: var(--e5); grid-template-columns: 1.15fr 1fr; align-items: start; }
@media (max-width: 900px) { .venta-rejilla { grid-template-columns: 1fr; } }
.linea-carrito { border: 1px solid var(--linea); border-radius: 10px; padding: var(--e3) 14px; margin-bottom: var(--e3); background: var(--blanco); }
.linea-carrito .n { font-size: 1rem; }
.linea-carrito .fila { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .5rem; }
/* Total de la venta (Logger: .totalrow — caja suave con rótulo y cifra grande) */
.total-grande { font-size: 2rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  background: var(--azul-claro); color: var(--azul); border: 1px solid color-mix(in srgb, var(--azul) 18%, var(--azul-claro));
  border-radius: 10px; padding: var(--e3) var(--e4); margin-top: var(--e3); line-height: 1.2; }
.segmentado { display: flex; gap: var(--e2); }
.segmentado label { flex: 1; margin: 0; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.segmentado span { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid var(--linea-fuerte);
  border-radius: 10px; color: var(--negro); background: var(--blanco); cursor: pointer; font-weight: 600; font-size: 1rem; }
.segmentado input:checked + span { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.segmentado input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.x { background: none; border: none; color: var(--rojo); font-size: 1.4rem; cursor: pointer; min-height: 44px; min-width: 44px; border-radius: 8px; }
.x:hover { background: var(--rojo-fondo); }
.calculo { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 10px; padding: .7rem .9rem; font-variant-numeric: tabular-nums; }
.estado-linea { font-size: .84rem; margin-top: .4rem; }
.estado-linea:empty { display: none; }
.estado-linea.rojo { color: var(--rojo); font-weight: 600; }
.estado-linea.amarillo { color: var(--ambar); font-weight: 600; }
.info-costo { font-size: .8rem; color: var(--texto-suave); margin-top: .2rem; }
.panel-bajo-costo { border: 2px solid var(--rojo); background: var(--rojo-fondo); color: var(--rojo); border-radius: var(--radio); padding: var(--e4) var(--e5); margin-bottom: var(--e4); }
.panel-bajo-costo p { margin: .3rem 0; font-weight: 600; }
.panel-bajo-costo label { color: var(--negro); }
.cuadre { font-weight: 600; text-align: right; margin-top: .4rem; }
.cuadre.ok { color: var(--verde); } .cuadre.mal { color: var(--rojo); }
.diferencia.neg { color: var(--rojo); font-weight: 600; } .diferencia.pos { color: var(--verde); font-weight: 600; }
.pago-fila { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
@media (max-width: 480px) { .pago-fila { grid-template-columns: 1fr 1fr; } }

/* Referencias: cada referencia es una fila editable; en celular se apila con sus rótulos.
   El <form> usa display:contents para que sus casillas sean columnas de la misma rejilla. */
.ref-fila { display: grid; grid-template-columns: minmax(160px, 2fr) repeat(4, minmax(100px, 1fr)) auto minmax(84px, auto); gap: var(--e3);
  align-items: end; padding: var(--e3) var(--e5); border-bottom: 1px solid var(--linea); }
.ref-fila:last-child { border-bottom: 0; }
.ref-form { display: contents; }
.ref-fila label { margin: 0 0 4px; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); }
.ref-fila .boton { margin: 0; }
.ref-fila .boton .btn { width: 100%; min-height: 44px; }
@media (min-width: 768px) { .ref-fila:not(:first-child) label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (max-width: 767px) {
  .ref-fila { grid-template-columns: 1fr 1fr; padding: var(--e4); }
  .ref-fila .ref-form > div:first-child { grid-column: 1 / -1; }
  .ref-fila .boton:empty { display: none; }
}

/* Tablas anchas en celular (< 768 px): cada fila se vuelve una tarjeta apilada, con la etiqueta de
   cada dato a la izquierda y el valor a la derecha. Así se ven costo ponderado, precio mínimo,
   disponible, esperado, contado y diferencia SIN deslizar de lado. */
@media (max-width: 767px) {
  .tabla-caja:has(> table.tabla-tarjetas) { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  table.tabla-tarjetas { background: transparent; }
  table.tabla-tarjetas thead { display: none; }
  table.tabla-tarjetas, table.tabla-tarjetas tbody, table.tabla-tarjetas tfoot,
  table.tabla-tarjetas tr, table.tabla-tarjetas td { display: block; width: 100%; }
  table.tabla-tarjetas tr { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
    margin-bottom: .6rem; padding: .35rem 0; overflow: hidden; box-shadow: var(--sombra); }
  table.tabla-tarjetas tbody tr:hover td { background: transparent; }
  table.tabla-tarjetas tfoot tr { background: var(--azul-claro); }
  table.tabla-tarjetas tfoot td { background: transparent; border-top: 0; }
  table.tabla-tarjetas td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border-bottom: 0; padding: .3rem .9rem; text-align: right; white-space: normal; }
  table.tabla-tarjetas td::before { content: attr(data-label); flex: none; max-width: 55%; text-align: left;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
  table.tabla-tarjetas td.cab { display: block; text-align: left; font-weight: 600; font-size: 1rem;
    border-bottom: 1px solid var(--linea); padding-bottom: .45rem; margin-bottom: .2rem; }
  table.tabla-tarjetas td.cab::before, table.tabla-tarjetas td[data-label=""]::before { content: none; }
  table.tabla-tarjetas td:empty { display: none; }
  table.tabla-tarjetas td.clave { font-size: 1.02rem; font-weight: 600; color: var(--negro); }
  table.tabla-tarjetas td.clave.diferencia.neg { color: var(--rojo); }
  table.tabla-tarjetas td.clave.diferencia.pos { color: var(--verde); }
  table.tabla-tarjetas td[colspan] { display: block; text-align: left; }
}
.enlace-menu { color: inherit; text-decoration: none; }
.enlace-menu:hover { color: var(--blanco); text-decoration: underline; }

/* ═══ Filas clicables (lista de ventas): toda la fila abre el detalle ═══ */
tr.fila-clic { cursor: pointer; }
tr.fila-clic:hover td { background: var(--azul-claro); }
tr.fila-clic:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
td.acciones-fila { white-space: nowrap; text-align: right; }
tr.anulada td.acciones-fila { text-decoration: none; }
@media (max-width: 767px) {
  table.tabla-tarjetas tr.fila-clic:hover { border-color: var(--azul); }
  table.tabla-tarjetas td.acciones-fila { justify-content: flex-end; gap: .5rem; padding-top: .5rem; }
}
p.volver { margin: 0 0 var(--e3); }
p.volver a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
p.volver a:hover { text-decoration: underline; }
dl.datos { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.datos dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); padding-top: .15rem; }
dl.datos dd { margin: 0; overflow-wrap: anywhere; }

/* ═══ Visor del comprobante dentro de la pantalla de la venta ═══ */
dialog.visor-comprobante { width: min(460px, calc(100vw - 32px)); height: min(88vh, 900px); padding: 0; border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); background: var(--superficie); display: none; flex-direction: column; }
dialog.visor-comprobante[open] { display: flex; }
dialog.visor-comprobante::backdrop { background: rgba(35, 32, 33, .45); }
.visor-barra { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem .9rem; border-bottom: 1px solid var(--linea); }
dialog.visor-comprobante iframe { flex: 1; width: 100%; border: 0; background: #f3eee7; }

/* ═══ Envíos: pestañas «Pendientes / Entregados a la transportadora», panel de acción y filas atrasadas ═══ */
.pestanas { display: flex; gap: var(--e2); flex-wrap: wrap; margin: 0 0 var(--e4); border-bottom: 1px solid var(--linea); }
.pestanas a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .9rem; font-weight: 600;
  font-size: .92rem; color: var(--texto-suave); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pestanas a:hover { color: var(--negro); }
.pestanas a.activa { color: var(--negro); border-bottom-color: var(--azul); }
.pestanas a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pestanas .cuenta { font-size: .75rem; font-weight: 700; background: var(--superficie-2); border: 1px solid var(--linea);
  border-radius: 20px; padding: 1px 8px; color: var(--negro); }
.panel-envio { border: 2px solid var(--azul); scroll-margin-top: calc(var(--alto-barra) + 12px); }
.panel-cab { display: flex; justify-content: space-between; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.panel-cab h2 { margin: 0; }
tr.atrasada td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
@media (max-width: 767px) {
  .pestanas a { flex: 1; justify-content: center; text-align: center; padding: .5rem .4rem; font-size: .86rem; }
  table.tabla-tarjetas tr.atrasada { border-color: var(--rojo); }
  table.tabla-tarjetas tr.atrasada td:first-child { box-shadow: none; }
  /* el dato secundario (documento, teléfono, guía, quién) baja a su propia línea dentro de la tarjeta */
  table.tabla-envios td { flex-wrap: wrap; overflow-wrap: anywhere; }
  table.tabla-envios td > div.suave { flex-basis: 100%; text-align: right; }
}
a.kpi.enlace-kpi { display: block; color: inherit; text-decoration: none; }
a.kpi.enlace-kpi:hover { background: var(--azul-claro); }
a.kpi.enlace-kpi:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* Tabla compacta (lista de Ventas): densidad tipo tabla contable. Menos relleno vertical,
   cada dato en una sola línea; el nombre largo se recorta con «…» (title trae el completo). */
table.tabla-compacta { font-size: .875rem; }
table.tabla-compacta th, table.tabla-compacta td { padding: 5px 8px; white-space: nowrap; }
table.tabla-compacta td.recorte { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* En computador la tabla compacta NUNCA desborda: las columnas de texto largo (cliente, dirección, prendas,
   transportadora) toman solo el espacio que sobra después de las columnas cortas y se recortan con «…».
   Truco: max-width:0 + un ancho en % → el navegador no las deja empujar la tabla más allá del 100%. */
@media (min-width: 768px) {
  /* encabezados más chicos y que puedan partirse («Fecha despacho» en dos renglones): no deben fijar el ancho */
  table.tabla-compacta th { white-space: normal; font-size: .75rem; letter-spacing: .02em; }
  table.tabla-compacta td.recorte { max-width: 0; width: 18%; }
  table.tabla-compacta td.recorte.r-corta { width: 12%; }
  table.tabla-compacta td.recorte.r-larga { width: 24%; }
  /* Entregados a la transportadora: los dos botones van uno debajo del otro para no ensanchar la fila */
  table.tabla-envios td.acciones-fila .btn { display: flex; justify-content: center; }
  table.tabla-envios td.acciones-fila .btn + .btn { margin-top: 4px; }
}
table.tabla-compacta .chip { padding: 1px 7px; }
table.tabla-compacta .btn.chico { min-height: 28px; padding: .15rem .6rem; font-size: .8rem; }
@media (max-width: 767px) {
  table.tabla-compacta tr { margin-bottom: .45rem; padding: .2rem 0; }
  table.tabla-compacta td { padding: .18rem .8rem; white-space: normal; }
  table.tabla-compacta td.recorte { max-width: none; min-width: 0; }
  table.tabla-compacta td.cab { padding-bottom: .3rem; }
}

/* ═══ La ventana auxiliar (estructura copiada de Logger, «＋ Crear tercero»; colores y letra de HARUUZ) ═══
   dialog.ventana      transparente: solo sostiene la ✕ y la caja
     .ventana-x        la ✕ redonda, en la esquina
     .ventana-caja     el papel (aquí es el <form>): fondo, radio, sombra
       .ventana-cab    título + una línea de qué pasa
       .ventana-cuerpo el ÚNICO que se desplaza
       .ventana-pie    franja clara con la nota a la izquierda y los botones
   Lo pone app.js (Ventana): cerrar con ✕/Cancelar/clic en el velo y devolver el foco. Esc lo pone el navegador. */
dialog.ventana { padding: 0; border: none; background: transparent; color: var(--negro);
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible; }
dialog.ventana::backdrop { background: rgba(35, 32, 33, .45); }
.ventana-caja { position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); margin: 0; }
.ventana-x { position: absolute; top: 0; right: 0; transform: translate(40%, -40%); z-index: 1; width: 38px; height: 38px;
  border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--linea-fuerte);
  box-shadow: var(--sombra); color: var(--negro); font: inherit; font-size: 17px; line-height: 1; cursor: pointer; }
.ventana-x:hover { background: var(--superficie-2); }
.ventana-x:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ventana-cab { flex: none; padding: var(--e5) var(--e5) var(--e3); border-bottom: 1px solid var(--linea); }
.ventana-cab h2 { margin: 0; font-size: 1.35rem; }
.ventana-cab p { margin: var(--e1) 0 0; color: var(--texto-suave); font-size: .86rem; }
.ventana-cuerpo { flex: 1 1 auto; overflow: auto; padding: var(--e2) var(--e5) var(--e5); }
.ventana-cuerpo > label:first-child, .ventana-avisos:empty + label { margin-top: var(--e3); }
.ventana-avisos .aviso { margin: var(--e3) 0 0; }
.ventana-pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) var(--e5); background: var(--superficie-2); border-top: 1px solid var(--linea); }
.ventana-pie .info { flex: 1 1 200px; color: var(--texto-suave); font-size: .8rem; }
.ventana-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-left: auto; }
.ventana-advertencia { margin: var(--e4) 0 0; }
.ventana .segmentado span { min-height: 44px; font-size: .92rem; }
.ventana .plazo { margin: var(--e2) 0 0; }
/* Celular: la ventana ocupa casi toda la pantalla y la ✕ entra en la caja (en la esquina se saldría). */
@media (max-width: 600px) {
  dialog.ventana { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .ventana-caja { max-height: calc(100dvh - 16px); min-height: min(88dvh, 640px); }
  .ventana-x { transform: none; top: 10px; right: 10px; }
  .ventana-cab { padding: var(--e4) 56px var(--e3) var(--e4); }
  .ventana-cuerpo { padding: var(--e2) var(--e4) var(--e4); }
  .ventana-pie { padding: var(--e3) var(--e4); }
  .ventana-botones { width: 100%; }
  .ventana-botones .btn { flex: 1; }
}
@media (prefers-reduced-motion: no-preference) { dialog.ventana[open] { animation: ventana-entra .16s ease-out; } }
@keyframes ventana-entra { from { opacity: 0; transform: translateY(8px) scale(.99); } }

/* ═══ Tablas centradas (pedido de Stiven, 30/09/2026): encabezados y celdas —también cifras y acciones—
   al centro en TODAS las tablas del sistema. En celular las tarjetas conservan rótulo a la izquierda y valor
   a la derecha (se reafirma abajo). El comprobante y el cierre para imprimir tienen su propio estilo. ═══ */
table th, table td, table th.num, table td.num, table td.acciones-fila { text-align: center; }
@media (max-width: 767px) {
  table.tabla-tarjetas td, table.tabla-tarjetas td.num { text-align: right; }
}


/* ═══ Reglas de interfaz para TODAS las listas (docs/REGLAS-INTERFAZ.md, 30/09/2026) ═══
   Ventana auxiliar más ancha para formularios con varias columnas (Nuevo apartado). */
dialog.ventana.ventana-ancha { width: min(780px, calc(100vw - 32px)); }
@media (max-width: 600px) { dialog.ventana.ventana-ancha { width: calc(100vw - 16px); } }
/* Fila apagada (referencia desactivada): se ve en gris, sin tacharse. */
tr.apagada td { color: var(--texto-suave); }
/* Acciones de fila: botones pequeños lado a lado, con un respiro entre ellos. */
table.tabla-compacta:not(.tabla-envios) td.acciones-fila .btn + .btn { margin-left: 4px; }
@media (max-width: 767px) { table.tabla-compacta td.acciones-fila .btn + .btn { margin-left: 0; } }

/* === Cierre de caja === (rediseño aprobado por Stiven, 30/09/2026; solo lo usan caja.html y caja_ver.html)
   Colores de la diferencia, con las variables de :root: CUADRA = --verde · FALTA plata = --rojo ·
   SOBRA plata = --ambar (no es pérdida, pero tampoco cuadra: se revisa). */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caja-cab h1 .chip { vertical-align: middle; margin-left: 4px; }
.selector-dia { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.selector-dia input { width: auto; }
.caja-cifras { margin-bottom: var(--e4); }
.caja-cifras .kpi .p + .p { margin-top: 0; }
.kpi.kpi-dif.cero { background: var(--verde-fondo); } .kpi.kpi-dif.cero .v, .kpi.kpi-dif.cero .l { color: var(--verde); }
.kpi.kpi-dif.neg { background: var(--rojo-fondo); } .kpi.kpi-dif.neg .v, .kpi.kpi-dif.neg .l { color: var(--rojo); }
.kpi.kpi-dif.pos { background: var(--ambar-fondo); } .kpi.kpi-dif.pos .v, .kpi.kpi-dif.pos .l { color: var(--ambar); }
.kpi.kpi-dif.vacia .v { color: var(--texto-suave); }
.diferencia.cero { color: var(--verde); font-weight: 600; }
.diferencia.neg { color: var(--rojo); font-weight: 600; }
.diferencia.pos { color: var(--ambar); font-weight: 600; }
/* Tabla de cuadre: el contado se escribe en la misma fila */
table.tabla-cuadre td.contado { padding-top: 6px; padding-bottom: 6px; }
table.tabla-cuadre td.contado input { width: 11rem; max-width: 100%; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
table.tabla-cuadre td.num, table.tabla-cuadre td.diferencia { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla-cuadre tfoot td { font-size: .98rem; }
.caja-cerrar { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e4); align-items: end; }
.caja-cerrar label { margin-top: 0; }
.caja-cerrar #falta-contar { grid-column: 1 / -1; margin: 0; color: var(--rojo); font-weight: 600; }
.caja-cerrar #falta-contar:empty { display: none; }
.caja-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.caja-pie-botones { display: flex; flex-wrap: wrap; gap: var(--e2); margin-left: auto; }
/* Resumen dentro de la ventana de confirmación */
.resumen-cierre { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e4); padding: var(--e3) var(--e4);
  background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio-chico); font-size: .9rem; }
.resumen-cierre b { font-variant-numeric: tabular-nums; margin-left: 4px; }
/* Plegables: libro del día y cierres anteriores */
details.plegable > summary::before { content: "▸"; display: inline-block; transition: transform .15s; }
details.plegable[open] > summary::before { transform: rotate(90deg); }
details.plegable > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.plegable-cuerpo { margin-top: var(--e3); }
.plegable-cuerpo > .tabla-caja.tarjeta { box-shadow: none; margin-bottom: var(--e2); }
.plegable-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e2); margin-bottom: var(--e3); }
.plegable-sub { margin: var(--e3) 0 var(--e2); font-weight: 600; }
@media (max-width: 767px) {
  .caja-cab { align-items: stretch; }
  .selector-dia { width: 100%; }
  .selector-dia input { flex: 1; }
  .caja-cifras > .kpi.kpi-dif { grid-column: auto; }
  table.tabla-tarjetas td.clave.diferencia.cero { color: var(--verde); }
  table.tabla-tarjetas td.clave.diferencia.pos { color: var(--ambar); }
  table.tabla-cuadre td.contado { align-items: center; }
  table.tabla-cuadre td.contado input { flex: 0 1 11rem; width: auto; min-width: 0; }
  .caja-cerrar { grid-template-columns: 1fr; }
  .caja-cerrar .btn { width: 100%; }
  .caja-pie-botones { width: 100%; }
  .caja-pie-botones .btn { flex: 1; }
}
/* Gastos de caja (30/09/2026): botón «+ Registrar gasto» junto al selector de día, tarjeta Gastos y la lista. */
.caja-cab-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.kpi.kpi-gastos .v { font-variant-numeric: tabular-nums; }
table.tabla-gastos td.num { font-variant-numeric: tabular-nums; }
.gastos-hoy { color: var(--texto-suave); font-weight: 600; }
#categorias-gasto .bloque-cab .btn { margin-left: auto; }
@media (max-width: 767px) {
  .caja-cab-acciones { width: 100%; }
  .caja-cab-acciones > .btn { width: 100%; }
}
/* PDF e historial de cierres (30/09/2026): la ventana «Historial de cierres» es más ancha que las de formulario. */
dialog.ventana.ventana-historial { width: min(1100px, calc(100vw - 32px)); }
.ventana-historial .ventana-caja { min-height: min(70dvh, 560px); }
.historial-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2) var(--e3); margin: var(--e3) 0 var(--e3); }
.historial-filtros > div { flex: 0 1 auto; }
.historial-filtros label { margin-top: 0; }
.historial-filtros input, .historial-filtros select { width: auto; min-width: 9.5rem; }
.historial-filtros-botones { display: flex; gap: var(--e2); }
.historial-resumen { margin-bottom: var(--e2); font-size: .82rem; }
.ventana-historial .tabla-caja.tarjeta { box-shadow: none; margin-bottom: var(--e2); }
table.tabla-historial td.num { font-variant-numeric: tabular-nums; }
table.tabla-historial td.acciones-fila .btn + .btn { margin-left: 4px; }
.historial-paginas { display: flex; align-items: center; justify-content: center; gap: var(--e3); margin-top: var(--e2); }
.historial-vacio { color: var(--texto-suave); text-align: center; padding: var(--e5) 0; margin: 0; }
#historial-contenido[aria-busy="true"] { opacity: .55; }
@media (max-width: 600px) { dialog.ventana.ventana-historial { width: calc(100vw - 16px); } }
@media (max-width: 767px) {
  .historial-filtros > div { flex: 1 1 45%; }
  .historial-filtros input, .historial-filtros select { width: 100%; min-width: 0; }
  .historial-filtros-botones { flex-basis: 100%; }
  .historial-filtros-botones .btn { flex: 1; }
}
/* «pos» (sobra plata) choca con .pos de Vender (rejilla de dos columnas): aquí se le quita la rejilla.
   Pasaba en la celda Diferencia y en la tarjeta Diferencia cuando sobraba plata (medido 30/09/2026). */
table td.pos { display: table-cell; grid-template-columns: none; gap: 0; }
.kpi.kpi-dif.pos { display: block; }
@media (max-width: 767px) { table.tabla-tarjetas td.pos { display: flex; gap: 1rem; } }
/* === fin Cierre de caja === */

/* === Vender (POS) === (rediseño del 30/09/2026, aprobado por Stiven)
   .pos              dos columnas: catálogo a la izquierda y el ticket a la derecha
   .pos-ticket       fijo (sticky) a la altura de la ventana; su cuerpo se desplaza y el pie (COBRAR) siempre se ve
   .pos-barra        solo en celular: barra inferior «N prendas · $X · COBRAR» que despliega el ticket
   .ventana-cobro    la ventana auxiliar de siempre con el resumen de la venta
   Lo viejo de Vender (.cuadro-tipo, .prod, .productos, .venta-rejilla…) ya no lo usa ninguna pantalla. */
.pos [hidden], .ventana-cobro [hidden] { display: none !important; }
main.pos-main { padding-bottom: 16px; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) clamp(330px, 30vw, 410px); gap: 18px; align-items: start; }
.pos-catalogo { min-width: 0; }
.pos-titulo { font-size: 1.15rem; margin: 0 0 var(--e3); }
.pos-titulo.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.enlace { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; font-weight: 600; color: var(--azul); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { text-decoration: underline; }
.enlace:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.aviso-campo { font-size: .78rem; font-weight: 600; color: var(--rojo); margin-top: 4px; }

/* Pestañas de tipo: blancas con el punto del color del tipo; la elegida se pinta del color del tipo */
.pos-tipos { display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e3); }  /* tantas pestañas como tipos activos */
.pos-tipo { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 6px;
  min-height: 44px; padding: 6px 12px; font: inherit; font-weight: 600; font-size: .92rem; color: var(--negro); cursor: pointer;
  background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: 10px; text-align: center; transition: background .12s; }
.pos-tipo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; border: 1px solid rgba(0, 0, 0, .15); }
.pos-tipo[data-tono]::before { background: var(--tono); }
.pos-tipo .cifra { font-size: inherit; font-weight: 600; margin: 0; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pos-tipo .det { font-size: .72rem; font-weight: 500; color: var(--texto-suave); }
.pos-tipo:not([disabled]):hover { border-color: var(--azul); }
.pos-tipo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pos-tipo.activo { border-color: transparent; box-shadow: 0 0 0 2px var(--azul-claro); }
.pos-tipo.activo[data-tono] { background: var(--tono); color: var(--tono-texto); }
.pos-tipo.activo::before { border-color: currentColor; }
.pos-tipo[disabled] { opacity: .55; cursor: not-allowed; background: var(--superficie-2); }
.pos-buscador input { min-height: 44px; }
.pos-info { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); margin: 0 0 var(--e2); font-size: .84rem; color: var(--texto-suave); }
.pos-aviso { margin: 0 0 var(--e2); padding: 6px 10px; font-size: .84rem; font-weight: 600; color: var(--ambar); background: var(--ambar-fondo);
  border: 1px solid var(--ambar-linea); border-radius: var(--radio-chico); }
.pos-aviso:not(.visible) { display: none; }
.pos-vacio { margin: var(--e2) 0; }

/* Tarjetas de prenda: nombre, PRECIO grande, «quedan N» */
.pos-grilla { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); padding: 2px; }
.pos-prod { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 96px; padding: 10px 12px;
  text-align: left; font: inherit; color: var(--negro); cursor: pointer; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 10px; box-shadow: var(--sombra); transition: border-color .12s, transform .12s; }
.pos-prod:hover { border-color: var(--azul); transform: translateY(-1px); }
.pos-prod:active { transform: none; background: var(--azul-claro); }
.pos-prod:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pos-prod-nombre { font-size: .88rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.pos-prod .chip { padding: 1px 8px; }
.pos-prod-quedan { margin-top: auto; padding-top: 6px; font-size: .8rem; color: var(--texto-suave); }
.pos-prod.agotada { opacity: .5; }
/* Tarjeta deshabilitada por falta de precio mínimo: sigue apagada (fondo gris, sin hover) pero el aviso se lee bien
   (antes todo el botón iba al 50 % de opacidad y el texto gris quedaba casi invisible). Solo variables del :root. */
.pos-prod.sin-minimo { opacity: 1; background: var(--superficie-2); cursor: not-allowed; }
.pos-prod.sin-minimo:hover { border-color: var(--linea); transform: none; }
.pos-prod.sin-minimo .pos-prod-nombre { color: var(--texto-suave); }
.pos-prod.sin-minimo .pos-prod-quedan { color: var(--ambar); font-weight: 600; }

/* Ticket */
.pos-ticket { position: sticky; top: calc(var(--alto-barra) + var(--e5)); height: calc(100dvh - var(--alto-barra) - var(--e5) - 16px); min-height: 420px; }
.pos-barra { display: none; }
.pos-ticket-caja { height: 100%; display: flex; flex-direction: column; margin: 0; background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.pos-ticket-cab { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: 12px 18px 10px;
  border-bottom: 1px solid var(--linea); }
.pos-ticket-cab h2 { margin: 0; font-family: var(--fuente); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); }
.pos-ticket-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pos-ticket-pie { flex: none; padding: 10px 18px 14px; border-top: 1px solid var(--linea); background: var(--superficie-2); }
.pos-lineas { padding: 2px 18px; }
.pos-lineas > .pos-vacio { margin: 14px 0; }
.pos-linea { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.pos-linea:last-child { border-bottom: 0; }
.pos-linea-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); }
.pos-linea-cab .n { font-size: .9rem; font-weight: 600; line-height: 1.25; }
.pos-linea .x, .pos-pagos .x { min-height: 32px; min-width: 32px; font-size: .95rem; }
.pos-linea-ctl { display: flex; align-items: center; gap: var(--e2); margin-top: 6px; }
.pos-cant { flex: none; display: flex; align-items: center; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); overflow: hidden; background: var(--blanco); }
.pos-cant button { width: 32px; height: 36px; border: 0; background: var(--superficie-2); font: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; color: var(--negro); }
.pos-cant button:disabled { opacity: .4; cursor: not-allowed; }
.pos-cant button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.pos-cant input { width: 40px; min-height: 36px; padding: 0; border: 0; border-radius: 0; text-align: center; font-weight: 600; }
.pos-precio { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pos-precio input { flex: 1 1 60px; min-width: 0; min-height: 36px; padding: .3rem .5rem; text-align: right; }
.pos-precio .suave { font-size: .74rem; }
.pos-precio .aviso-campo { flex-basis: 100%; }
.pos-sub { flex: none; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.pos-desc-toggle { margin-top: 6px; }
.pos-desc { margin-top: 4px; }
.pos-desc .fila { grid-template-columns: 1fr 1.4fr; gap: 0 var(--e2); }
.pos-desc label { margin: 4px 0 3px; font-size: .74rem; }
.pos-desc input { min-height: 36px; padding: .3rem .5rem; }
.pos-costos { margin: 6px 0 0; font-size: .74rem; }
.pos-linea .estado-linea { font-size: .78rem; padding: 4px 8px; border-radius: 6px; margin-top: 6px; }
.pos-linea .estado-linea.rojo { background: var(--rojo-fondo); }
.pos-linea .estado-linea.amarillo { background: var(--ambar-fondo); }
.pos-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); padding: 10px 18px;
  border-top: 1px solid var(--linea); background: var(--azul-claro); }
.pos-total span { font-size: .74rem; font-weight: 700; letter-spacing: 1px; color: var(--azul); }
.pos-total b { font-size: 1.6rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pos-seccion { padding: 12px 18px; border-top: 1px solid var(--linea); }
.pos-seccion > label:first-child { margin-top: 0; }
.pos-canal { display: flex; align-items: center; gap: var(--e3); }
.pos-canal .segmentado { flex: 1; }
.pos-canal .segmentado span { min-height: 40px; }
.pos-envio { margin: 0; white-space: nowrap; }
.pos-canal-fijo { font-size: .9rem; padding: 8px 16px; }
.pos-nota-envio { margin: 6px 0 0; font-size: .78rem; }
.pos-plegar { width: 100%; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 0; background: none; border: 0;
  font: inherit; font-weight: 600; font-size: .9rem; color: var(--negro); text-align: left; cursor: pointer; }
.pos-plegar:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
.pos-plegar-flecha { display: inline-block; color: var(--texto-suave); transition: transform .15s; }
.pos-plegar.abierto .pos-plegar-flecha { transform: rotate(90deg); }
.pos-cliente-regla { margin: 0 0 4px; font-size: .76rem; color: var(--ambar); }
.pos-cliente-campos .fila { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.pos-cliente-campos label { margin: 6px 0 3px; font-size: .74rem; }
.pos-cliente-campos input { min-height: 38px; padding: .35rem .6rem; font-size: .9rem; }
.pos-encontrado { font-size: .8rem; margin-top: 4px; }
.pos-encontrado .btn { margin: 3px 0; }
.pos-pago-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--e2); font-size: .9rem; }
.pos-formas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pos-forma { min-height: 40px; padding: 4px 8px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--negro); cursor: pointer;
  background: var(--blanco); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); }
.pos-forma:hover { border-color: var(--azul); }
.pos-forma:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pos-forma.activo { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.pos-pagos { margin-top: var(--e2); }
.pos-pagos .pago-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 6px; margin-bottom: 6px; }
.pos-pagos select, .pos-pagos input { min-height: 38px; padding: .3rem .5rem; font-size: .88rem; }
.pos-pagos .btn.chico { min-height: 38px; padding: .2rem .55rem; }
.pos-ticket .cuadre { font-size: .84rem; }
.pos-ticket .cuadre:empty { display: none; }
.pos-razon { margin: 0 0 6px; font-size: .8rem; font-weight: 600; color: var(--rojo); }
.pos-razon:empty { display: none; }
.pos-razon.resalta { animation: pos-resalta .9s ease; }
@keyframes pos-resalta { 0%, 100% { background: transparent; } 30% { background: var(--rojo-fondo); } }
.pos-cobrar { letter-spacing: .04em; font-weight: 700; }

/* Ventana de cobro: resumen en filas «rótulo … valor» */
.pos-resumen { margin-top: var(--e3); }
.pos-res-fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); padding: 6px 0; border-bottom: 1px dashed var(--linea); font-size: .9rem; }
.pos-res-fila span { color: var(--texto-suave); }
.pos-res-fila b { font-weight: 600; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pos-res-prendas .pos-res-fila span { color: var(--negro); }
.pos-res-total { border-bottom: 2px solid var(--linea-fuerte); }
.pos-res-total span { font-weight: 700; color: var(--negro); }
.pos-res-total b { font-size: 1.2rem; }
.ventana-cobro .aviso { margin: var(--e3) 0 0; }
.ventana-cobro .panel-bajo-costo { margin: var(--e3) 0 0; padding: var(--e3) var(--e4); }
.ventana-cobro .panel-bajo-costo .fila { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ventana-cobro #aviso-apartado .check { margin: 6px 0 0; }
.pos-conf-error { margin: var(--e3) 0 0; font-size: .88rem; font-weight: 600; color: var(--rojo); }
.pos-conf-error:empty { display: none; }

/* Pantallas medianas: el ticket un poco más angosto */
@media (min-width: 768px) and (max-width: 1100px) {
  .pos { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e4); }
  .pos-grilla { grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); }
}
/* Celular: catálogo arriba y el ticket como barra inferior fija que se despliega en un panel */
@media (max-width: 767px) {
  main.pos-main { padding-bottom: 96px; }
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-tipo { font-size: .82rem; padding: 6px 6px; gap: 0 5px; flex-wrap: nowrap; white-space: nowrap; }
  .pos-tipo[disabled] { flex-wrap: wrap; }
  .pos-tipo .det { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: .66rem; }
  .pos-grilla { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--e2); }
  .pos-prod { min-height: 88px; padding: 8px 10px; }
  .pos-ticket { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; min-height: 0; z-index: 15; }
  .pos-barra { display: flex; align-items: center; gap: var(--e2); padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--negro); color: var(--blanco); box-shadow: 0 -6px 20px rgba(35, 32, 33, .18); }
  .pos-barra-info { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 4px;
    background: none; border: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
  .pos-barra-info:focus-visible { outline: 2px solid var(--arena); outline-offset: 2px; border-radius: 6px; }
  .pos-barra-flecha { transition: transform .15s; }
  .pos-barra-cobrar { min-height: 44px; padding: .4rem 1.1rem; font-weight: 700; letter-spacing: .04em; background: var(--arena); color: var(--negro); border-color: var(--arena); }
  .pos-barra-cobrar:hover { background: var(--blanco); border-color: var(--blanco); }
  .pos-ticket .pos-ticket-caja { display: none; }
  .pos-ticket.abierto .pos-ticket-caja { display: flex; height: min(80dvh, calc(100dvh - var(--alto-barra) - 70px)); border-radius: 0; border: 0; box-shadow: none; }
  .pos-ticket.abierto .pos-barra-flecha { transform: rotate(180deg); }
  .pos-ticket.abierto .pos-barra-cobrar { display: none; }
  .pos-lineas, .pos-seccion, .pos-total { padding-left: 14px; padding-right: 14px; }
  .pos-ticket-pie { padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
/* === fin Vender (POS) === */


/* ═══ Estado de resultados (regla 19 de docs/REGLAS-INTERFAZ.md) ═══
   Estructura tomada de la tabla del Cost Report de Logger (estilo-b.css, bloque `.cr-tbl`/`.cr-n1`..`.cr-n3`/`.cr-total`):
   escalera de 3 peldaños (grupo con su total, renglones debajo, total general), conceptos a la izquierda y cifras a la
   derecha con dígitos tabulares, encabezados en versalitas con línea de 2 px debajo. Colores: solo los de :root. */
table.tabla-resultados th.rotulo-col { text-align: left; }
table.tabla-resultados td.rotulo { text-align: left; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; font-weight: 600; }
table.tabla-resultados td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabla-resultados th.num { text-align: right; }
table.tabla-resultados thead th { border-bottom: 2px solid var(--linea-fuerte); }
table.tabla-resultados td.pct { width: 20%; color: var(--texto-suave); font-weight: 400; font-size: .82rem; }
table.tabla-resultados td.num { width: 26%; }
.etq-pct { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-right: 2px; }
/* peldaño 1 = grupo (Cost Report .cr-n1: fondo más marcado, línea de 2 px arriba, riel de 3 px a la izquierda) */
table.tabla-resultados tr.g1 td { background: color-mix(in srgb, var(--arena) 38%, var(--blanco)); border-top: 2px solid var(--linea-fuerte); font-weight: 700; padding-top: 7px; padding-bottom: 7px; }
table.tabla-resultados tr.g1 td:first-child { border-left: 3px solid var(--negro); }
table.tabla-resultados tr.g1 td.pct { color: var(--negro); font-weight: 600; }
/* peldaño 3 = renglón (Cost Report .cr-n3: blanco, sangría, peso normal, riel suave) */
table.tabla-resultados tr.g3 td { background: var(--superficie); font-weight: 500; }
table.tabla-resultados tr.g3 td:first-child { border-left: 3px solid var(--linea); padding-left: 26px; font-weight: 500; }
table.tabla-resultados tr.g3 td.num { font-weight: 400; }
/* resultado de un tramo (Cost Report .cr-total: negrita, línea de 2 px que cierra el bloque) */
table.tabla-resultados tr.gr td { background: var(--azul-claro); font-weight: 700; border-top: 2px solid var(--linea-fuerte); padding-top: 8px; padding-bottom: 8px; }
table.tabla-resultados tr.gr td:first-child { border-left: 3px solid var(--azul); }
table.tabla-resultados tr.gr td.pct { color: var(--negro); font-weight: 700; }
table.tabla-resultados tr.gr.r-mal td { background: var(--rojo-fondo); color: var(--rojo); }
table.tabla-resultados tr.gr.r-mal td:first-child { border-left-color: var(--rojo); }
table.tabla-resultados tr.gr.r-bien td { background: var(--verde-fondo); color: var(--verde); }
table.tabla-resultados tr.gr.r-bien td:first-child { border-left-color: var(--verde); }
table.tabla-resultados tr.gtotal td { border-bottom: 2px solid var(--linea-fuerte); font-size: 1rem; padding-top: 11px; padding-bottom: 11px; }
table.tabla-resultados tr.gtotal td.rotulo { font-size: .86rem; }
/* panel principal: centrado, tamaño cómodo, con aire (pedido de Stiven 30/09) */
.gyp-caja { max-width: 820px; margin: var(--e4) auto; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(35,32,33,.10); }
.gyp-nota { max-width: 820px; margin: calc(-1 * var(--e2)) auto var(--e4); text-align: center; font-size: .85rem; }
table.tabla-resultados th, table.tabla-resultados td { padding-top: 6px; padding-bottom: 6px; }
table.tabla-resultados thead th { padding-top: 10px; padding-bottom: 10px; font-size: .75rem; }
table.tabla-resultados td.rotulo { font-size: .8rem; }
table.tabla-resultados td.num { font-size: .95rem; }
table.tabla-resultados td.pct { font-size: .85rem; }
table.tabla-resultados tr.g1 td, table.tabla-resultados tr.gr td { padding-top: 9px; padding-bottom: 9px; }
table.tabla-resultados tr.gtotal td { font-size: 1.1rem; padding-top: 14px; padding-bottom: 14px; }
table.tabla-resultados tr.gtotal td.rotulo { font-size: .92rem; letter-spacing: .08em; }
td.neg { color: var(--rojo); }
form.filtros.filtros-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e2) var(--e3); padding: var(--e3) var(--e4); }
.filtros-fila > div { flex: 0 1 auto; }
.filtros-fila input, .filtros-fila select { width: auto; min-width: 9.5rem; }
@media (max-width: 767px) {
  .filtros-fila > div:not(.filtros-botones) { flex: 1 1 42%; }
  .filtros-fila input, .filtros-fila select { width: 100%; min-width: 0; }
  .filtros-fila > div:not(.filtros-botones):has(select) { flex-basis: 100%; }
  .filtros-fila .filtros-botones { flex-basis: 100%; display: flex; gap: var(--e2); }
  .filtros-fila .filtros-botones .btn { flex: 1; }
  table.tabla-resultados td.num { width: auto; }
  table.tabla-resultados td.pct { width: 24%; font-size: .75rem; }
  table.tabla-resultados td.rotulo, table.tabla-resultados td.rotulo { font-size: .75rem; letter-spacing: .02em; }
  table.tabla-resultados tr.g3 td:first-child { padding-left: 14px; }
  table.tabla-resultados th { font-size: .75rem; }
}

/* ── Vigilante del tope de 3.500 UVT (regla 21): solo colores del :root ── */
.tope { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e5);
  margin-bottom: var(--e5); color: inherit; text-decoration: none; }
.tope:hover { border-color: var(--linea-fuerte); }
.tope:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.tope-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.tope-rotulo { font-size: .68rem; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--texto-suave); }
.tope-cifras { font-size: .9rem; font-variant-numeric: tabular-nums; margin-left: auto; }
.tope-barra { height: 8px; border-radius: 4px; background: var(--arena-clara); border: 1px solid var(--linea); overflow: hidden; margin: 6px 0; }
.tope-barra > i { display: block; height: 100%; background: var(--verde); }
.tope-nota { margin: 0; font-size: .76rem; color: var(--texto-suave); line-height: 1.35; }
.tope-amarillo { background: var(--ambar-fondo); border-color: var(--ambar-linea); }
.tope-amarillo .tope-barra > i { background: var(--ambar); }
.tope-naranja { background: color-mix(in srgb, var(--naranja) 10%, var(--blanco)); border-color: var(--naranja); }
.tope-naranja .tope-barra > i { background: var(--naranja); }
.tope-naranja .tope-cifras { color: var(--naranja); }
.tope-rojo { background: var(--rojo-fondo); border-color: var(--rojo); border-width: 2px; }
.tope-rojo .tope-barra > i { background: var(--rojo); }
.tope-rojo .tope-cifras, .tope-rojo .tope-rotulo { color: var(--rojo); }
@media (max-width: 767px) { .tope { padding: var(--e3) var(--e4); } .tope-cifras { margin-left: 0; } }


/* ═══ Informes fase 3 (regla 22): fila de subtotal por referencia; solo colores de :root ═══ */
table.tabla-compacta tr.subtotal td { background: var(--superficie-2); font-weight: 700; }

/* ── Panel de acceso (sección 25): interruptor ACTIVO y clave temporal. Solo colores del :root. ── */
h2.subtitulo { font-family: var(--fuente); font-weight: 600; font-size: 1rem; margin: var(--e6, 24px) 0 var(--e2, 8px); }
.forma-interruptor { margin: 0; display: inline-flex; }
.interruptor { position: relative; width: 42px; height: 24px; padding: 0; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--linea); transition: background .15s; }
.interruptor span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 1px 2px rgba(35,32,33,.35); transition: left .15s; }
.interruptor.encendido { background: var(--verde); border-color: var(--verde); }
.interruptor.encendido span { left: 20px; }
.interruptor:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.interruptor:disabled { opacity: .45; cursor: not-allowed; }
.clave-temporal { display: flex; gap: var(--e2, 8px); align-items: stretch; flex-wrap: wrap; }
.clave-temporal input { flex: 1 1 200px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.15rem;
  letter-spacing: .08em; text-align: center; background: var(--azul-claro); }

/* ═══ Toma de inventario (24.12) ═══ */
.barra-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); margin: 0 0 var(--e3); font-size: .9rem; }
form.en-linea { display: inline; margin: 0; }
#tabla-conteo input.conteo { width: 5.5rem; min-height: 38px; text-align: center; font-size: 1.05rem; font-weight: 600; }

/* Ajustes: salida (−, rojo) y entrada por conteo (+, verde); el signo va escrito, el color no es lo único que avisa. */
.ajuste-salida { color: var(--rojo); font-weight: 600; }
.ajuste-entrada { color: var(--verde); font-weight: 600; }

/* === Venta Live sin datos (27.1 y 28.6, fase 1) ===
   Lista que aparece MIENTRAS SE ESCRIBE el documento (desde el 3.er dígito): Vender «Ya los mandó» y Completar datos.
   Colores solo del :root; sin desplazamiento lateral (el texto envuelve). */
.ac-caja { position: relative; }
.ac-lista { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 8px; box-shadow: 0 8px 24px color-mix(in srgb, var(--negro) 14%, transparent); max-height: 260px; overflow: auto; margin-top: 2px; }
.ac-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 9px 12px; cursor: pointer; font-size: .88rem;
  border-bottom: 1px solid var(--linea); overflow-wrap: anywhere; }
.ac-item:last-child { border-bottom: 0; }
.ac-item:hover, .ac-item.sel { background: var(--arena-clara); }
.ac-item b { font-variant-numeric: tabular-nums; }
.ac-item mark { background: var(--arena); color: inherit; padding: 0 1px; border-radius: 2px; }
.ac-item .exacto { font-size: .68rem; font-weight: 700; color: var(--verde); }
.ac-vacio { padding: 10px 12px; font-size: .85rem; color: var(--texto-suave); }
.sin-datos-ref { overflow-wrap: anywhere; }
.pos-cliente-campos .fila.una { grid-template-columns: 1fr; }
#live-ref .segmentado { margin: 8px 0 10px; }

/* ═══ Gráficas de resultados (sección 29 de docs/REGLAS-INTERFAZ.md) ═══
   SVG armado por el servidor, sin JavaScript. Los colores salen SOLO de las variables --grafica-* del :root. */
.gb-ventas { --g: var(--grafica-ventas); } .gb-costo { --g: var(--grafica-costo); } .gb-ganancia { --g: var(--grafica-ganancia); }
.gb-gastos { --g: var(--grafica-gastos); } .gb-perdida { --g: var(--grafica-perdida); }
svg.grafica rect.gb-ventas, svg.grafica rect.gb-costo, svg.grafica rect.gb-ganancia, svg.grafica rect.gb-gastos, svg.grafica rect.gb-perdida { fill: var(--g); }
/* «Después de gastos» (35.13): barra HUECA en Pizarra (se distingue por la forma, no solo por el color). Pizarra contra blanco 8,54:1. */
.gb-despues { --g: var(--azul); }
svg.grafica rect.gb-despues { fill: var(--blanco); stroke: var(--g); stroke-width: 1.5; }
.leyenda li.gb-despues .muestra { background: var(--blanco); border: 1.5px solid var(--g); }
svg.grafica { display: block; width: 100%; height: auto; max-width: 760px; margin: 0 auto; }
svg.grafica text { font-family: var(--fuente); fill: var(--negro); font-size: 11px; font-variant-numeric: tabular-nums; }
svg.grafica .g-eje, svg.grafica .g-mes { fill: var(--texto-suave); font-size: 10px; }
svg.grafica .g-valor { font-weight: 600; font-size: 10.5px; }
/* Celular: cada gráfica trae dos dibujos (ancho y angosto). Se muestra el angosto cuando la TARJETA es estrecha (consulta de
   contenedor, sin JavaScript); el angosto mide 290 de ancho de dibujo y sus letras son de 12 px, así que a 360-390 px de
   pantalla se leen a ~12 px reales. La tabla «Ver cifras» sigue siendo la salida completa. */
.grafica-caja { container-type: inline-size; }
svg.grafica.g-compacto { display: none; max-width: 460px; }
svg.grafica.g-compacto text { font-size: 12px; }
svg.grafica.g-compacto .g-mes, svg.grafica.g-compacto .g-eje { font-size: 12px; }
svg.grafica.g-compacto .g-rotulo { font-size: 12px; }
svg.grafica.g-compacto .g-valor { font-size: 12px; }
@container (max-width: 579px) { .g-vert svg.grafica { display: none; } .g-vert svg.grafica.g-compacto { display: block; } }
@container (max-width: 479px) { .g-horiz svg.grafica { display: none; } .g-horiz svg.grafica.g-compacto { display: block; } }
svg.grafica .g-rotulo { font-size: 12px; }
svg.grafica .g-grilla { stroke: var(--linea); stroke-width: 1; }
svg.grafica .g-cero { stroke: var(--texto-suave); stroke-width: 1; }
.grafica-caja { padding: var(--e4) var(--e5); margin-bottom: var(--e4); min-width: 0; }
.grafica-caja h2 { margin: 0 0 var(--e2); font-size: 1.25rem; }
@media (max-width: 600px) { .grafica-caja { padding: var(--e4) var(--e3); } }
.graficas-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--e4); }
.graficas-rejilla > .grafica-caja { min-width: 0; }
@media (max-width: 899px) { .graficas-rejilla { grid-template-columns: 1fr; } }
.leyenda { display: flex; flex-wrap: wrap; gap: var(--e1, 4px) var(--e4); list-style: none; padding: 0; margin: 0 0 var(--e2); font-size: .85rem; }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda .muestra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--g); }
.nota-ceros { margin: 0 0 var(--e2); text-align: center; }
.sin-datos-grafica { text-align: center; color: var(--texto-suave); padding: var(--e6, 24px) 0; margin: 0; }
.grafica-caja details { margin-top: var(--e2); }
.grafica-caja details > summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; min-height: 28px; }
.grafica-caja details .tabla-caja { margin-top: var(--e2); }
.fuera-linea { margin: var(--e2) 0 0; }
.filtros-atajos { display: flex; flex-wrap: wrap; gap: var(--e2); }

/* ═══ Tablero general (sección 30 de docs/REGLAS-INTERFAZ.md, fase 1) ═══
   Filtros como <details> sin JavaScript, tarjetas con comparación y la gráfica de ventas por día. Colores solo del :root. */
svg.grafica.g-dias { max-width: none; }
svg.grafica .g-acum { fill: none; stroke: var(--grafica-acum); stroke-width: 2.2; stroke-linejoin: round; }
svg.grafica .g-area { fill: var(--grafica-acum); opacity: .09; stroke: none; }
svg.grafica .g-punto { fill: var(--grafica-acum); stroke: var(--blanco); stroke-width: 1.5; }
svg.grafica .g-eje-acum { fill: var(--grafica-acum-texto); font-weight: 600; }
svg.grafica .g-futuro { opacity: .4; }
svg.grafica .g-vie { font-weight: 700; fill: var(--negro); }
svg.grafica .g-primero { font-weight: 700; }
.panel-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); padding: var(--e4) var(--e5); margin-bottom: var(--e3); overflow: visible; }
.fila-desp { display: flex; gap: var(--e3); }
.desplegable { position: relative; flex: 0 1 auto; min-width: 0; }
.desplegable > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: .45rem .9rem; cursor: pointer;
  background: var(--blanco); color: var(--negro); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); font-size: .92rem; white-space: nowrap; max-width: 100%; }
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary:hover { background: var(--superficie-2); }
.desplegable > summary:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.desplegable[open] > summary { border-color: var(--azul); box-shadow: 0 0 0 2px var(--azul-claro); }
.d-rot { color: var(--texto-suave); font-weight: 600; }
.d-valor { overflow: hidden; text-overflow: ellipsis; }
.d-flecha { color: var(--texto-suave); margin-left: var(--e1); }
.d-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(20rem, calc(100vw - 2 * var(--e4)));
  max-height: min(60vh, 22rem); overflow-y: auto; display: grid; padding: var(--e2); background: var(--blanco); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-chico); box-shadow: var(--sombra), 0 12px 32px color-mix(in srgb, var(--negro) 18%, transparent); }
.d-panel a { display: flex; align-items: center; gap: var(--e2); min-height: 40px; padding: 6px var(--e3); border-radius: var(--radio-chico); color: var(--negro); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.d-panel a:hover { background: var(--azul-claro); }
.d-panel a:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.d-panel a[aria-current="true"] { font-weight: 700; background: var(--azul-claro); }
.d-panel .ck { display: inline-block; width: 1em; color: var(--azul); font-weight: 700; }
.filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linea); font-size: .9rem; }
.ficha-filtro { display: inline-flex; gap: 6px; align-items: center; background: var(--azul-claro); color: var(--azul); border: 1px solid var(--azul); border-radius: 20px; padding: 3px 12px; font-weight: 600; font-size: .85rem; text-decoration: none; }
.ficha-filtro:hover { background: var(--blanco); }
.btn.chico { min-height: 36px; text-decoration: none; }
.btn.chico[aria-current="true"] { box-shadow: 0 0 0 2px var(--azul-claro); }
.cabecera .acciones { display: flex; gap: var(--e2); flex-wrap: wrap; }
.cabecera .btn { text-decoration: none; }
.dl { font-weight: 700; } .dl.up { color: var(--verde); } .dl.down { color: var(--ambar); } .dl.igual, .dl.sin { color: var(--texto-suave); font-weight: 600; }
.kpi .ref { display: block; }
.kpi .neto { display: block; font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--texto-suave); margin-top: 2px; }
.cifras.seis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--e3); }
.nota-canal { margin: var(--e3) 0; }
.destacado { margin: 0 0 var(--e3); padding: var(--e2) var(--e3); background: var(--azul-claro); border-left: 3px solid var(--azul); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; font-size: .92rem; }
.selector { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.grupo-btn { display: flex; flex-wrap: wrap; gap: var(--e2); min-width: 0; }
.nota-g { margin: var(--e2) 0 0; }
.tabla-caja.tarjeta { margin-top: var(--e2); }
table.tabla-compacta td:first-child, table.tabla-compacta th:first-child { text-align: left; }
@container (max-width: 579px) { .g-vert svg.grafica.g-dias { display: none; } .g-vert svg.grafica.g-dias.g-compacto { display: block; } }
@media (max-width: 767px) {
  .panel-filtros { padding: var(--e3); }
  .fila-desp { gap: var(--e2); }
  .desplegable { flex: 1 1 0; position: static; }
  .fila-desp { position: relative; }
  .desplegable > summary { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: .3rem 1.4rem .3rem .6rem; font-size: .85rem; line-height: 1.25; position: relative; }
  .d-rot { font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; }
  .d-valor { max-width: 100%; }
  .d-flecha { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); margin: 0; }
  .d-panel { left: 0; right: 0; width: auto; max-width: none; }
  .cabecera .acciones { width: 100%; }
  .cabecera .acciones .btn { flex: 1; }
  .btn.chico { padding: .3rem .65rem; }
}
.gb-acum { --g: var(--grafica-acum); }
/* 30.3.4: en celular el acumulado es un NÚMERO (sin línea ni eje derecho); en el ancho, la línea. */
.g-acum-num, .leyenda li.ley-angosto { display: none; }
.g-acum-num { margin: var(--e2) 0 0; font-size: .95rem; text-align: center; }
@container (max-width: 579px) { .g-vert .g-acum-num { display: block; } .g-vert .leyenda li.ley-angosto { display: inline-flex; } .g-vert .leyenda li.ley-ancho { display: none; } }
.leyenda li.gb-acum .muestra { height: 3px; border-radius: 2px; }
svg.grafica.g-dias:not(.g-compacto) text, svg.grafica.g-dias:not(.g-compacto) .g-eje, svg.grafica.g-dias:not(.g-compacto) .g-mes, svg.grafica.g-dias:not(.g-compacto) .g-valor { font-size: 12.5px; }


/* ═══ Estado de resultados en una sola pantalla (sección 33). Todos los colores salen de las variables del :root (cero hex). ═══ */
main { scroll-padding-top: calc(var(--alto-barra) + 60px); }
.cabecera { scroll-margin-top: calc(var(--alto-barra) + 12px); }
.indice { position: sticky; top: var(--alto-barra); z-index: 15; display: flex; align-items: center; gap: var(--e4); min-height: 48px; margin: 0 0 var(--e4);
  padding: 4px 0; background: var(--fondo); border-bottom: 1px solid var(--linea-fuerte); }
.indice-ver { flex: none; max-width: 22rem; font-size: .85rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.indice-ver b { color: var(--negro); }
.indice ul { flex: 1 1 auto; min-width: 0; display: flex; gap: var(--e2); margin: 0; padding: 2px 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.indice li { flex: none; scroll-snap-align: start; }
.indice a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 14px; border-radius: 20px; border: 1px solid var(--linea-fuerte); background: var(--blanco);
  color: var(--negro); font-size: .88rem; text-decoration: none; white-space: nowrap; }
.indice a b { color: var(--topo); }
.indice a:hover { background: var(--azul-claro); }
.indice a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* «section.sec» y no «.sec»: .sec también es la clase del botón secundario (.btn.sec). Sin el prefijo, cada botón
   «Ver»/«Kardex»/«Filtrar» heredaba 32 px de margen abajo, 12 px de relleno arriba y una raya arriba (medido 29/10/2026). */
section.sec { scroll-margin-top: calc(var(--alto-barra) + 60px); margin: 0 0 var(--e6); padding-top: var(--e3); border-top: 2px solid var(--arena); }
.sec-cab { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e1) var(--e3); align-items: start; margin-bottom: var(--e4); }
.sec-cab h2 { margin: 0; font-size: 1.6rem; }
.sec-num { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--arena); color: var(--negro); font-weight: 700; font-size: 1rem; }
.sec-que { margin: 2px 0 0; color: var(--texto-suave); font-size: .92rem; max-width: 62ch; }
.sec-afecta { align-self: center; font-size: .78rem; color: var(--texto-suave); background: var(--superficie); border: 1px solid var(--linea); border-radius: 20px; padding: 3px 12px; }
.sec-afecta b { color: var(--topo); }
.sec-per { margin: 0 0 var(--e3); }
.sec-pie { margin: var(--e4) 0 0; text-align: right; }
.volver { display: inline-flex; align-items: center; min-height: 36px; font-size: .88rem; font-weight: 600; color: var(--azul); }
.sub-tarj h3 { margin: 0 0 var(--e2); font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 700; }
.alerta-caja { padding: var(--e4) var(--e5); margin-bottom: var(--e3); }
.alerta-caja h3 { margin: 0 0 var(--e2); font-family: var(--fuente-titulo); font-size: 1.2rem; font-weight: 700; }
.alertas-lista { list-style: none; margin: 0 0 var(--e2); padding: 0; display: grid; gap: var(--e3); }
.alertas-lista li { display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--e3); align-items: start; font-size: .92rem; }
.alertas-lista .chip { justify-self: start; }
.d-grupo { padding: var(--e2) var(--e3) 2px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); }
.d-grupo:not(:first-child) { margin-top: var(--e2); border-top: 1px solid var(--linea); }
.d-rango { display: grid; gap: var(--e2); padding: var(--e2) var(--e3) var(--e3); }
.d-rango label { display: grid; gap: 2px; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.d-rango input { font: inherit; font-size: 1rem; min-height: 44px; padding: 6px 10px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio-chico); color: var(--negro); background: var(--blanco); }
.d-rango small { font-size: .78rem; }
.que-cambia { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea); }
.que-cambia > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--azul); min-height: 32px; }
.que-cambia td:not(:first-child), .que-cambia th:not(:first-child) { text-align: center; }
.panel-filtros { margin-bottom: var(--e3); }
@media (max-width: 767px) {
  .fila-desp { flex-wrap: wrap; }
  .desplegable.d-periodo { flex: 1 1 100%; }
  .desplegable:not(.d-periodo) { flex: 1 1 calc(50% - 8px); }
  .indice-ver { display: none; }
  .sec-cab { grid-template-columns: auto 1fr; }
  .sec-afecta { grid-column: 1 / -1; justify-self: start; align-self: start; }
  .sec-cab h2 { font-size: 1.4rem; }
  .alertas-lista li { grid-template-columns: 1fr; gap: 4px; }
  .alerta-caja { padding: var(--e3); }
  .indice a { font-size: .9rem; }
}
.rango-fila { grid-template-columns: repeat(2, minmax(0, 12rem)) auto; align-items: end; padding-left: 0; padding-right: 0; }
/* Rango: minmax(0, 1fr) y min-width: 0 (con «1fr» a secas la casilla de fecha tiene un ancho mínimo propio y reventaba la columna:
   a 320 px la página medía 385). Hasta 479 px una casilla debajo de otra; de 480 a 767, dos columnas. */
.d-rango label, .d-rango input { min-width: 0; }
.d-rango input { width: 100%; box-sizing: border-box; }
@media (max-width: 767px) { .rango-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .rango-fila button { grid-column: 1 / -1; } }
@media (max-width: 479px) { .rango-fila { grid-template-columns: minmax(0, 1fr); } }
/* Celular: áreas táctiles de al menos 40 px (en escritorio sigue la excepción compacta de §31.8). */
@media (max-width: 767px) {
  .volver, .rango-fila button.btn.chico, .selector .btn.chico, .filtros-activos .btn.chico { min-height: 40px; }
  .que-cambia > summary, .grafica-caja details > summary { min-height: 40px; box-sizing: border-box; padding-block: 11px; }
}
.neg { color: var(--rojo); }

/* ═══ Tablero, fases 2 y 3 (sección 34 de docs/REGLAS-INTERFAZ.md). Todos los colores salen de variables del :root (cero hex). ═══ */
@media (max-width: 767px) { .ficha-filtro { min-height: 40px; padding-block: 8px; } }   /* chips «Tipo: T1 ✕»: toque >= 40 px en celular */
/* Corrección de letras (34.10, medida en Chrome a 600-1440 px): los dibujos ANCHOS de barras horizontales (520 de dibujo) y de «Ventas por día»
   (1000 de dibujo) bajaban de 12 px con tarjetas de 480 a 519 px y de 580 a 959 px. Se muestran solo cuando el dibujo no se encoge (escala >= 1 y
   >= 0,96); por debajo se ve el angosto, que escala hacia arriba. */
@container (max-width: 519px) { .g-horiz svg.grafica { display: none; } .g-horiz svg.grafica.g-compacto { display: block; } }
@container (max-width: 959px) { .g-vert svg.grafica.g-dias { display: none; } .g-vert svg.grafica.g-dias.g-compacto { display: block; }
  .g-vert .g-acum-num { display: block; } .g-vert .leyenda li.ley-angosto { display: inline-flex; } .g-vert .leyenda li.ley-ancho { display: none; } }
.g-horiz svg.grafica:not(.g-compacto) text, .g-vert svg.grafica:not(.g-compacto):not(.g-dias) text, .g-horiz svg.grafica:not(.g-compacto) .g-valor,
.g-vert svg.grafica:not(.g-compacto):not(.g-dias) .g-valor, .g-vert svg.grafica:not(.g-compacto):not(.g-dias) .g-eje,
.g-vert svg.grafica:not(.g-compacto):not(.g-dias) .g-mes { font-size: 12px; }
svg.grafica rect.calor-1 { fill: var(--calor-1); } svg.grafica rect.calor-2 { fill: var(--calor-2); } svg.grafica rect.calor-3 { fill: var(--calor-3); }
svg.grafica rect.calor-4 { fill: var(--calor-4); } svg.grafica rect.calor-5 { fill: var(--calor-5); }
.leyenda .muestra.calor-1 { background: var(--calor-1); } .leyenda .muestra.calor-2 { background: var(--calor-2); } .leyenda .muestra.calor-3 { background: var(--calor-3); }
.leyenda .muestra.calor-4 { background: var(--calor-4); } .leyenda .muestra.calor-5 { background: var(--calor-5); }
.leyenda .muestra.calor-1, .leyenda .muestra.calor-2 { border: 1px solid var(--linea-fuerte); }
svg.grafica rect.calor-1, svg.grafica rect.calor-2, svg.grafica rect.calor-3, svg.grafica rect.calor-4, svg.grafica rect.calor-5 { stroke: var(--linea-fuerte); stroke-width: 1; }
svg.grafica .calor-fondo { fill: var(--superficie-2); }
svg.grafica .calor-num { font-size: 12px; font-weight: 600; }
svg.grafica .calor-t-claro { fill: var(--negro); } svg.grafica .calor-t-oscuro { fill: var(--blanco); }
svg.grafica .calor-marco { fill: none; stroke: var(--negro); stroke-width: 2; stroke-dasharray: 4 3; pointer-events: none; }
.g-calor svg.grafica { max-width: none; }
.g-calor svg.grafica text, .g-calor svg.grafica .g-mes, .g-calor svg.grafica .g-rotulo { font-size: 12px; }
.g-calor .calor-aviso-angosto { display: none; }
@container (max-width: 639px) { .g-calor .calor-rejilla, .g-calor .leyenda { display: none; } .g-calor .calor-aviso-angosto { display: block; } }
.sub-h { margin: var(--e3) 0 var(--e2); font-size: .95rem; font-weight: 700; }
.mejores-horas { margin: 0 0 var(--e3); padding-left: 1.4rem; display: grid; gap: var(--e1); font-size: .95rem; }
/* barras clicables: la fila entera es el área de toque */
svg.grafica.g-filtro { max-width: none; }
svg.grafica.g-filtro.g-compacto { max-width: 460px; }
svg.grafica a { cursor: pointer; text-decoration: none; }
svg.grafica .fila-clic { fill: transparent; stroke: none; }
svg.grafica a:hover .fila-clic { fill: var(--azul-claro); }
svg.grafica a:focus-visible { outline: none; }
svg.grafica a:focus-visible .fila-clic { stroke: var(--azul); stroke-width: 2; }
svg.grafica .fila-clic.fila-sel { fill: var(--azul-claro); stroke: var(--azul); stroke-width: 2.5; }
svg.grafica .g-sel { font-weight: 700; }
svg.grafica.g-filtro .g-valor { font-size: 12px; }
svg.grafica rect.gp-efectivo { fill: var(--pago-efectivo); } svg.grafica rect.gp-nequi { fill: var(--pago-nequi); }
svg.grafica rect.gp-transferencia { fill: var(--pago-transferencia); } svg.grafica rect.gp-datafono { fill: var(--pago-datafono); }
svg.grafica rect.gp-breb { fill: var(--pago-breb); }
svg.grafica rect.gp-saldo-favor { fill: none; stroke: var(--pago-saldo-favor); stroke-width: 1.5; }
svg.grafica .gp-trama { stroke: var(--pago-saldo-favor); stroke-dasharray: 3 3; }
.cifras.cuatro { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: var(--e3); }
.tabla-pad { padding: var(--e4) var(--e5); }
@media (max-width: 600px) { .tabla-pad { padding: var(--e4) var(--e3); } }

/* ═══ Gastos y Resumen de gastos (REGLAS-INTERFAZ §35.9 y §35.12, parte B, 30/10/2026) ═══ Pasado de la maqueta aprobada por Stiven
   (docs/maquetas/cuentas_por_pagar/extra.css). Solo variables del :root; letras de 12 px o más; en celular los toques miden 40 px o más.
   Cambios frente a la maqueta, por choque con reglas viejas: «.btn.enlace» pasó a «.btn.enlace-b» (ya existe «.enlace» con otra letra y sin relleno);
   «.volver», «.rejilla» y los toques de celular quedan dentro de «main.aire» (solo estas pantallas); las ventanas llevan «.ventana-gasto». */
main.aire { max-width: 1180px; }
main.aire .cabecera { margin-bottom: var(--e6); }
main.aire h2 { margin-top: var(--e6); }
main.aire .volver { display: inline-flex; align-items: center; min-height: 40px; color: var(--texto-suave); font-size: .88rem; font-weight: 600; text-decoration: none; margin-bottom: var(--e2); }
main.aire .volver:hover { color: var(--negro); }
main.aire .btn.grande-pill, .btn.grande-pill { min-height: 52px; padding: .7rem 1.7rem; font-size: 1rem; border-radius: 999px; }

/* Cifras de portada: sin cajas ni divisores, mucho aire */
.portada-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--e6) 28px; margin: 0 0 var(--e6); }
.gran .l { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--texto-suave); }
.gran .v { font-size: clamp(1.9rem, 5.2vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 6px; overflow-wrap: anywhere; }
.gran .p { font-size: .85rem; color: var(--texto-suave); margin-top: 6px; }
.gran.alerta .l, .gran.alerta .v { color: var(--rojo); }

/* Pastillas desplegables (filtros) y control segmentado (pestañas) */
.pastillas { display: flex; gap: var(--e3); flex-wrap: wrap; margin: 0 0 var(--e6); }
.filtro-pill { display: inline-flex; align-items: center; gap: .5rem; background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px; padding: 0 .4rem 0 1.1rem; min-height: 44px; margin: 0; font-size: .85rem; color: var(--texto-suave); font-weight: 600; }
.filtro-pill select { border: 0; background: transparent; box-shadow: none; width: auto; min-height: 40px; padding: 0 .6rem; font-weight: 600; color: var(--negro); border-radius: 999px; }
.filtro-pill:focus-within { border-color: var(--azul); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--superficie-2); border-radius: 999px; padding: 4px; margin: 0 0 var(--e6); max-width: 100%; }
.seg a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.seg a:hover { color: var(--negro); }
.seg a.activa { background: var(--blanco); color: var(--negro); box-shadow: var(--sombra); }
.seg a:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.seg .cuenta { font-size: .75rem; color: var(--texto-suave); }

/* Tarjeta de gasto (Resumen) */
main.aire .rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.tarjeta-gasto { display: flex; flex-direction: column; gap: var(--e3); background: var(--blanco); border: 1px solid transparent; border-radius: 18px; box-shadow: var(--sombra);
  padding: 24px; color: var(--negro); text-decoration: none; min-width: 0; }
a.tarjeta-gasto:hover { box-shadow: 0 2px 4px color-mix(in srgb, var(--negro) 6%, transparent), 0 10px 28px color-mix(in srgb, var(--negro) 9%, transparent); }
a.tarjeta-gasto:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.tarjeta-gasto.vencido { border: 1.5px solid var(--rojo); }
.tg-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e3); }
.tg-nombre { font-weight: 600; font-size: 1.02rem; line-height: 1.3; overflow-wrap: anywhere; }
.tg-tipo { font-size: .8rem; color: var(--texto-suave); margin-top: 2px; }
.tg-falta { margin-top: var(--e2); }
.tg-falta .l { font-size: .75rem; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--texto-suave); }
.tg-falta .v { font-size: 2rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tg-lin { font-size: .82rem; color: var(--texto-suave); display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; }
.tg-prox { font-size: .82rem; color: var(--texto-suave); padding-top: var(--e3); border-top: 1px solid var(--linea); margin-top: auto; }
.tg-prox b { color: var(--negro); font-weight: 600; }
.avance.fino { height: 6px; }
.avance.grueso { height: 10px; border-radius: 8px; }
.avance { display: block; height: 8px; min-width: 60px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.avance > i { display: block; height: 100%; background: var(--azul); border-radius: inherit; }
.avance-txt { font-size: .8rem; color: var(--texto-suave); }

/* Lista de gastos: filas amplias con una sola acción */
.lista-gastos { display: grid; gap: 14px; }
.fila-gasto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; gap: var(--e4) var(--e5); align-items: center;
  background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 20px 24px; }
.fg-nombre a { font-weight: 600; color: var(--negro); text-decoration: none; font-size: 1rem; }
.fg-nombre a:hover { text-decoration: underline; }
.fg-sub { font-size: .8rem; color: var(--texto-suave); margin-top: 3px; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.fg-dato .l { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--texto-suave); }
.fg-dato .v { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fg-dato .p { font-size: .8rem; color: var(--texto-suave); }
.fila-gasto.vencido { box-shadow: inset 0 0 0 1.5px var(--rojo); }

/* Detalle: cabeza con el número grande */
.hero { background: var(--blanco); border-radius: 22px; box-shadow: var(--sombra); padding: 32px; margin-bottom: var(--e6); }
.hero .l { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--texto-suave); }
.hero .v { font-size: clamp(2.2rem, 8vw, 3.4rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: 6px 0 var(--e4); overflow-wrap: anywhere; }
.hero .linea { display: flex; justify-content: space-between; gap: var(--e3); flex-wrap: wrap; font-size: .88rem; color: var(--texto-suave); margin-top: var(--e3); }
.hero .dos { display: flex; gap: 32px; flex-wrap: wrap; margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linea); }
.hero .dos div { min-width: 0; }
.hero .dos .l { font-size: .75rem; }
.hero .dos .n { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hero .dos .p { font-size: .8rem; color: var(--texto-suave); }

/* Cuotas / meses: lista ordenada */
.cuotas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cuota { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; gap: var(--e3) var(--e4); align-items: center; background: var(--blanco); border-radius: 14px; box-shadow: var(--sombra); padding: 14px 20px; }
.cuota .num-c { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: .85rem; font-weight: 700; background: var(--superficie-2); color: var(--negro); }
.cuota.pagada .num-c { background: var(--verde-fondo); color: var(--verde); }
.cuota.vencida .num-c { background: var(--rojo-fondo); color: var(--rojo); }
.cuota.vencida { box-shadow: inset 0 0 0 1.5px var(--rojo); }
.cuota .t { font-weight: 600; font-size: .98rem; }
.cuota .s { font-size: .8rem; color: var(--texto-suave); margin-top: 2px; overflow-wrap: anywhere; }
.cuota .monto { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.cuota .acc { display: flex; gap: var(--e2); flex-wrap: wrap; justify-content: flex-end; }
.btn.enlace-b { background: transparent; border-color: transparent; color: var(--azul); text-decoration: underline; text-underline-offset: 3px; }
.btn.enlace-b:hover { background: var(--superficie-2); }
.btn.enlace-b.rojo-t { color: var(--rojo); }
.resumen-cuotas { font-size: .85rem; color: var(--texto-suave); margin: var(--e3) 4px 0; }

/* Ayudas desplegables (en vez de párrafos) */
details.ayuda { margin: var(--e4) 0 0; }
details.ayuda > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; min-height: 32px; color: var(--azul); font-size: .85rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
details.ayuda > summary::-webkit-details-marker { display: none; }
details.ayuda > div, details.ayuda > p { font-size: .88rem; color: var(--texto-suave); margin: var(--e2) 0 0; max-width: 62ch; }
.dato-linea { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.dato-linea:last-child { border-bottom: 0; }
.desglose { background: var(--azul-claro); border-radius: 12px; padding: .7rem 1rem; margin-top: var(--e3); font-size: .85rem; }
.nota-uso { font-size: .9rem; color: var(--texto-suave); margin: 0 0 var(--e6); }
.nota-uso b { color: var(--negro); font-variant-numeric: tabular-nums; }

/* Alertas: una línea cada una */
.lista-alertas { list-style: none; margin: 0 0 var(--e6); padding: 0; display: grid; gap: var(--e2); }
.lista-alertas li { border-radius: 14px; padding: .75rem 1.1rem; font-size: .9rem; background: var(--blanco); box-shadow: var(--sombra); }
.lista-alertas li.roja { background: var(--rojo-fondo); color: var(--rojo); }
.lista-alertas li.ambar { background: var(--ambar-fondo); color: var(--ambar); }
.lista-alertas a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-block; }

/* Vacío, asistente */
.vacio-tarjeta { text-align: center; padding: 56px var(--e5); background: var(--blanco); border-radius: 22px; box-shadow: var(--sombra); }
.vacio-tarjeta p { margin: 0 auto var(--e5); color: var(--texto-suave); max-width: 46ch; }
.vacio-tarjeta .btn { margin: 0 auto; }

/* Ventanas más limpias */
dialog.ventana-gasto .ventana-cuerpo { display: grid; gap: var(--e3); align-content: start; }
dialog.ventana-gasto .ventana-cuerpo label { margin: 0 0 4px; }
dialog.ventana-gasto details.ayuda { margin-top: 0; }


@media (max-width: 899px) {
  .fila-gasto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 18px 20px; }
  .fg-nombre { grid-column: 1 / -1; }
  .fila-gasto .btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 767px) {
  .hero { padding: 22px; border-radius: 18px; }
  .tarjeta-gasto { padding: 20px; }
  .cuota { grid-template-columns: 36px minmax(0, 1fr); }
  .cuota .monto { grid-column: 2; text-align: left; }
  .cuota .acc { grid-column: 1 / -1; justify-content: flex-start; }
  main.aire .btn.chico, .cuota .btn, main.aire .volver, .seg a, details.ayuda > summary, .lista-alertas a, .filtro-pill select { min-height: 40px; }
  .btn.enlace-b { min-height: 40px; }
  .seg { display: flex; border-radius: 22px; }
  .seg a { flex: 1 1 auto; justify-content: center; padding: 0 .8rem; }
  }

/* Tarjeta resumen de pagos únicos (Resumen de gastos) */
.mini-lista { list-style: none; margin: var(--e2) 0 0; padding: 0; display: grid; gap: var(--e3); }
.mini-lista li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); font-size: .92rem; }
.mini-lista li span { min-width: 0; overflow-wrap: anywhere; }
.mini-lista small { display: block; font-size: .78rem; color: var(--texto-suave); }
.mini-lista b { font-variant-numeric: tabular-nums; font-weight: 600; }
.ver-todos { display: inline-flex; align-items: center; min-height: 40px; margin-top: auto; color: var(--azul); font-weight: 600; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; }

/* ───── Registro de un gasto: UNA pantalla (REGLAS-INTERFAZ §35.5 y §35.12) ───── */
.registro { max-width: 640px; margin: 0 auto; padding-bottom: 24px; }
.registro [hidden] { display: none !important; }
.reg-titulo { text-align: center; font-size: 1.7rem; margin: 0 0 var(--e5); }
.seg-radio { display: flex; width: 100%; margin: 0 0 var(--e6); }
.seg-radio label { flex: 1 1 0; margin: 0; position: relative; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.seg-radio span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .6rem; border-radius: 999px; font-size: .9rem; font-weight: 600; color: var(--texto-suave); text-align: center; cursor: pointer; }
.seg-radio input:checked + span { background: var(--blanco); color: var(--negro); box-shadow: var(--sombra); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.seg-radio.chico { width: auto; margin: 0; display: inline-flex; }
.campo { margin: 0 0 var(--e5); min-width: 0; }
.campo .etq, .etq { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); margin: 0 0 8px; }
.campo input.txt, .campo select.txt { min-height: 52px; border-radius: 14px; font-size: 1rem; padding: 0 1rem; background: var(--blanco); }
.error-linea { color: var(--rojo); font-size: .85rem; font-weight: 600; margin: 8px 2px 0; }
.campo-error input.txt, .campo-error .valor-grande input { border-color: var(--rojo); }
.campo-error input.txt { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rojo) 14%, transparent); }
.campo-error .pildora span { border-color: var(--rojo); }
.campo.valor { text-align: center; margin-bottom: var(--e6); }
.valor-grande { display: block; }
.valor-grande input { width: 100%; text-align: center; border: 0; border-bottom: 2px solid var(--linea-fuerte); border-radius: 0; background: transparent; box-shadow: none;
  font-size: clamp(2.4rem, 11vw, 3.6rem); font-weight: 600; letter-spacing: -.02em; min-height: 84px; padding: 0 .25rem; font-variant-numeric: tabular-nums; color: var(--negro); }
.valor-grande input::placeholder { color: var(--calido-3); }
.valor-grande input:focus { outline: none; border-bottom-color: var(--azul); box-shadow: none; }
.campo.valor .etq { text-align: center; }
.campo.valor .error-linea { text-align: center; }
.vg-ventana input { font-size: 2.2rem; min-height: 64px; }
.sugerencias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.sugerencias .etq { margin: 0 4px 0 0; }
.sug { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px dashed var(--linea-fuerte); background: transparent; font: inherit; font-size: .85rem; font-weight: 600; color: var(--negro); cursor: pointer; }
.sug:hover { background: var(--blanco); border-style: solid; }
.sug:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.pildora { position: relative; margin: 0; }
.pildora input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; pointer-events: none; }
.pildora span, .pildora-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--linea); font-size: .88rem; font-weight: 600; color: var(--negro); cursor: pointer; }
.pildora:hover span { border-color: var(--linea-fuerte); }
.pildora input:checked + span, .pildora-btn.on { background: var(--azul); border-color: var(--azul); color: var(--blanco); }
.pildora input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.pildora-btn { font-family: inherit; }
.fila-estado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--e4) var(--e5); align-items: start; }
.fila-estado.dos { grid-template-columns: 1fr 1fr; }
.fila-estado.una { grid-template-columns: minmax(0, 1fr); }
.fila-estado .campo { margin-bottom: var(--e5); }
.mas-datos { margin: 0 0 var(--e5); background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 4px 18px; }
.mas-datos > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 600; font-size: .9rem; color: var(--negro); }
.mas-datos > summary::-webkit-details-marker { display: none; }
.mas-datos > summary::after { content: "+"; font-size: 1.3rem; color: var(--texto-suave); }
.mas-datos[open] > summary::after { content: "–"; }
.mas-datos .campo { margin: 4px 0 var(--e4); }
.mini-cuotas { background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra); padding: 18px 20px; margin: 0 0 var(--e5); }
.mc-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.mc-cab b { font-size: .95rem; }
.mc-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.mc-fila small { display: block; font-size: .8rem; color: var(--texto-suave); }
.mc-fila .num-c { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--superficie-2); }
.mc-monto { font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-edit { grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); }
.mc-edit input { min-height: 44px; border-radius: 12px; }
.mc-mas { padding: 10px 0 2px; font-size: .85rem; color: var(--texto-suave); }
.mc-total { font-size: .88rem; color: var(--texto-suave); margin-top: 8px; font-variant-numeric: tabular-nums; }
.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 0 calc(8px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fondo) 78%, transparent); margin-top: var(--e5); }
.barra-guardar .btn { min-width: 280px; }
.cancelar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; color: var(--texto-suave); font-size: .88rem; font-weight: 600; text-decoration: none; }
.cancelar:hover { color: var(--negro); text-decoration: underline; }
.exito { text-align: center; background: var(--blanco); border-radius: 24px; box-shadow: var(--sombra); padding: 44px 28px; }
.exito .tic { width: 64px; height: 64px; border-radius: 50%; background: var(--verde-fondo); color: var(--verde); display: grid; place-items: center; font-size: 1.9rem; font-weight: 700; margin: 0 auto var(--e4); }
.exito h2 { margin: 0 0 8px; font-size: 1.5rem; }
.exito p { color: var(--texto-suave); margin: 0 auto var(--e5); max-width: 40ch; overflow-wrap: anywhere; }
.exito .acc2 { display: flex; flex-direction: column; align-items: center; gap: 8px; }
@media (max-width: 767px) {
  .fila-estado, .fila-estado.dos { grid-template-columns: minmax(0, 1fr); }
  .barra-guardar .btn { width: 100%; min-width: 0; }
  .exito { padding: 32px 20px; }
}

/* ───── Resumen de gastos: pulido (§35.12, mejoras 1 a 6) ───── */
.gran { display: flex; flex-direction: column; min-width: 0; }
.gran .p { min-height: 2.7em; }
.gran .p b { color: var(--negro); font-weight: 600; }
.mes-titulo { font-family: var(--fuente-titulo); font-size: 1.15rem; font-weight: 700; margin: 0 0 var(--e4); display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mes-titulo small { font-family: var(--fuente); font-size: .82rem; font-weight: 600; color: var(--texto-suave); }
.filtro-pill.activa { border-color: var(--azul); background: var(--azul-claro); color: var(--negro); }
.tg-cab { min-height: 4.1rem; }
.tg-nombre { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-tipo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tg-barra { display: flex; align-items: center; gap: 12px; }
.tg-barra .avance { flex: 1 1 auto; height: 8px; }
.tg-barra b { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; color: var(--negro); }
.tg-barra b.suave-t { font-weight: 600; color: var(--texto-suave); }
.tg-lin { justify-content: flex-start; }
.vacio-icono { width: 72px; height: 72px; border-radius: 50%; background: var(--superficie-2); color: var(--azul); display: grid; place-items: center; margin: 0 auto var(--e4); }
.vacio-tarjeta h2 { margin: 0 0 8px; font-size: 1.5rem; }
@media (max-width: 767px) {
  main.aire .cabecera .acciones { width: 100%; }
  main.aire .cabecera .acciones .btn { width: 100%; }
}

/* ───── Estado de resultados con gastos (maqueta de la sección «Estado de resultados» de /resultados) ───── */
.er-rotulo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 var(--e5); font-size: .88rem; color: var(--texto-suave); }
.er-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--e5); margin-bottom: var(--e5); }
.er-bloque { background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra); padding: 24px; }
.er-bloque.fuerte { background: var(--azul); color: var(--blanco); }
.er-bloque .l { font-size: .78rem; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--texto-suave); }
.er-bloque.fuerte .l { color: color-mix(in srgb, var(--blanco) 82%, var(--azul)); }
.er-bloque .v { font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 6px; overflow-wrap: anywhere; }
.er-bloque .p { font-size: .85rem; color: var(--texto-suave); margin-top: 6px; }
.er-bloque.fuerte .p { color: color-mix(in srgb, var(--blanco) 82%, var(--azul)); }
.er-barras { display: grid; gap: 10px; margin-top: var(--e4); }
.er-barra { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; align-items: center; font-size: .82rem; color: var(--texto-suave); }
.er-barra svg { display: block; width: 100%; height: 12px; }
.er-barra rect.antes { fill: var(--grafica-ganancia); }
.er-barra rect.despues { fill: var(--azul); }
.er-panel { background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra); padding: 8px 24px; margin-bottom: var(--e5); }
.er-fila { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea); font-size: .93rem; }
.er-fila:last-child { border-bottom: 0; }
.er-fila > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.er-fila small { display: block; font-size: .78rem; color: var(--texto-suave); }
.er-fila.cab-t { font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--texto-suave); padding: 14px 0 10px; }
.er-fila.tot { font-weight: 700; background: var(--superficie-2); margin: 0 -24px; padding: 14px 24px; border-bottom: 0; }
.er-fila.sub-t { font-weight: 700; padding-top: 18px; border-bottom: 0; }
.er-fila.indent > span:first-child { padding-left: 18px; }
.er-fila .sube { color: var(--rojo); }
.er-fila .baja { color: var(--verde); }
.er-fila .mismo { color: var(--texto-suave); }
.er-fila.cero > span { color: var(--texto-suave); }
.er-notas { display: grid; gap: var(--e3); margin-bottom: var(--e5); }
.er-nota { background: var(--blanco); border-radius: 16px; box-shadow: var(--sombra); padding: 14px 20px; font-size: .9rem; }
.er-nota b { font-variant-numeric: tabular-nums; }
.er-nota .rot { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--texto-suave); margin-bottom: 2px; }
.er-alerta { background: var(--ambar-fondo); color: var(--ambar); border-radius: 16px; padding: 14px 20px; margin-bottom: var(--e5); font-size: .9rem; }
.er-alerta a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
@media (max-width: 767px) {
  .er-panel { padding: 4px 16px; }
  .er-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .er-fila.cab-t { display: none; }
  .er-fila.tot { margin: 0 -16px; padding: 14px 16px; }
  .er-fila a { min-height: 40px; }
  .er-alerta a { min-height: 40px; }
}
.vacio-icono svg { width: 32px; height: 32px; }
@media (min-width: 768px) { .er-sub { display: contents; } .er-sub > span { text-align: right; font-variant-numeric: tabular-nums; } .er-fila.sub-t .er-sub { display: contents; } }
@media (max-width: 767px) {
  .er-sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: .8rem; color: var(--texto-suave); }
  .er-sub > span[data-et]::before { content: attr(data-et) ": "; }
  .er-fila > span:nth-child(3) { grid-column: 1 / -1; }
}

.seg { background: color-mix(in srgb, var(--arena) 55%, var(--fondo)); }
@media (min-width: 768px) { .er-fila { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1.35fr); } .er-sub > span { white-space: nowrap; } }
@media (max-width: 767px) { .gran .p { min-height: 0; } }
.tg-cab > div:first-child { min-width: 0; flex: 1 1 auto; }
.tg-cab .chip { flex: none; }
.er-rotulo .chip { white-space: normal; text-align: left; line-height: 1.3; padding-top: 4px; padding-bottom: 4px; }
.tg-cab { min-height: 3.9rem; }
.tg-falta .fl { display: flex; justify-content: space-between; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.exito h2:focus { outline: none; }

/* Sin JavaScript (35.5): las ventanas auxiliares aparecen como formularios al final de la página y el registro muestra las tres clases. */
html:not(.js) dialog.ventana-gasto:not([open]) { display: block; position: static; width: auto; max-width: 640px; margin: 0 0 var(--e5); }
html:not(.js) dialog.ventana-gasto .ventana-x, html:not(.js) .solo-js, html:not(.js) dialog.ventana-extra { display: none; }
html.js .solo-sin-js { display: none; }
.registro [data-modo][hidden], .registro [data-est][hidden] { display: none !important; }
.valor-grande input::-webkit-outer-spin-button, .valor-grande input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campo .nota-repetido { margin: 8px 0 0; padding: .6rem .9rem; border-radius: 12px; background: var(--ambar-fondo); color: var(--ambar); font-size: .85rem; font-weight: 600; }
.mc-edit-fila { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.mc-edit-fila input { min-height: 44px; border-radius: 12px; }
.mc-edit-fila .num-c { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 700; background: var(--superficie-2); }
.mc-edit-fila .e2 { grid-column: 2 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.mc-aviso { font-size: .85rem; font-weight: 600; margin-top: 8px; }
.mc-aviso.mal { color: var(--rojo); }
.mc-aviso.bien { color: var(--verde); }
.tg-nota { font-size: .8rem; color: var(--texto-suave); }
.sin-js-nota { margin: 0 0 var(--e5); }
.fila-gasto .fg-dato { min-width: 0; }
.fila-gasto .btn { white-space: nowrap; }
.fg-sub .chip { flex: none; }
dialog.ventana-gasto .valor-grande input { text-align: center; }
dialog.ventana-gasto .pildoras { margin-top: 4px; }
.cuota .t, .cuota .s { min-width: 0; }
.cuota > div:nth-child(2) { min-width: 0; }
.cuota .monto .chip { margin-top: 4px; }
.cuota.anulada { opacity: .75; }
.cuota.anulada .t { text-decoration: none; }
.pie-gasto { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; margin: var(--e5) 0 0; }
.pie-gasto form { margin: 0; }
.hero .barra-nota { margin-top: var(--e3); }
/* Con la tarjeta «Resultado después de gastos» (7 en total) cada una pide más ancho para que las cifras no se partan. */
.cifras.siete { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cifras.siete > .kpi:last-child { grid-column: 1 / -1; }
/* Ajustes de la revisión en celular (390 y 320 px): nada se sale del ancho y los enlaces de nombre miden 40 px. */
.filtro-pill { max-width: 100%; min-width: 0; }
.filtro-pill select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .pastillas .filtro-pill { flex: 1 1 100%; }
  .pastillas .filtro-pill select { flex: 1 1 auto; }
  .fg-nombre a, .mini-lista a { display: inline-flex; align-items: center; min-height: 40px; }
  .tg-nombre { -webkit-line-clamp: 3; }
}

/* ───── Cifras grandes del módulo Gastos: SIEMPRE en un renglón, hasta $99.999.999.999 (corrección de la auditoría ciega, 30/10/2026) ─────
   La caja que las contiene mide su ancho (container-type) y la letra se adapta a ese ancho; el servidor agrega «cf-m» (11 a 13 caracteres) o
   «cf-s» (14 o más) para que las cifras normales sigan grandes. Sin saltos de línea dentro de la cifra. */
.gran, .tg-falta, .fg-dato, .hero, .er-bloque { container-type: inline-size; min-width: 0; }
.gran .v { --max: clamp(1.9rem, 5.2vw, 2.6rem); }
.tg-falta .v { --max: 2rem; }
.fg-dato .v { --max: 1.25rem; }
.hero .v { --max: clamp(2.2rem, 8vw, 3.4rem); }
.er-bloque .v { --max: clamp(1.9rem, 6vw, 2.6rem); }
:is(.gran, .tg-falta, .fg-dato, .hero, .er-bloque) .v { white-space: nowrap; overflow-wrap: normal; font-size: max(12px, min(var(--max), 14cqw)); }
:is(.gran, .tg-falta, .fg-dato, .hero, .er-bloque) .v.cf-m { font-size: max(12px, min(calc(var(--max) * .82), 11.2cqw)); }
:is(.gran, .tg-falta, .fg-dato, .hero, .er-bloque) .v.cf-s { font-size: max(12px, min(calc(var(--max) * .68), 9.2cqw)); }
/* Enlaces cortos dentro de textos (ayudas, datos, notas): en celular, área táctil de 40 px */
@media (max-width: 767px) {
  main.aire details.ayuda a, main.aire .dato-linea a, main.aire .nota-uso a, main.aire .mini-lista a, main.aire .er-nota a, main.aire .tg-prox a, main.aire .cuota .s a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ═══ Densidad de escritorio (§31, 29/10/2026) ═══ Stiven: «el espacio se ve sumamente grande». Causa medida: el botón
   secundario (.btn.sec) heredaba la regla de sección (.sec) y sumaba 32 px de margen, 12 px de relleno y una raya;
   eso estiraba cada fila de 39 a 71 px. Arreglado arriba (section.sec). Aquí, además, una densidad cómoda SOLO en
   escritorio (≥ 768 px): filas de ~50 px con botón de 30 px centrado, y menos aire entre bloques. En celular
   no cambia nada: las áreas táctiles de 44 px de §26 siguen igual. */
@media (min-width: 768px) {
  table.tabla-compacta th, table.tabla-compacta td { padding: 7px 7px; line-height: 1.5; }
  table.tabla-compacta th { padding-top: 6px; padding-bottom: 6px; line-height: 1.25; }
  table.tabla-compacta td.acciones-fila { vertical-align: middle; }
  table.tabla-compacta .btn.chico { min-height: 26px; padding: .1rem .55rem; line-height: 1.2; vertical-align: middle; }
  table.tabla-compacta .chip { padding: 1px 6px; line-height: 1.3; }
  .cabecera { margin-bottom: var(--e4); }
  .tarjeta { margin-bottom: var(--e3); }
  .rejilla, .cifras { margin-bottom: var(--e3); }
  .cifras > .kpi { padding: var(--e3) var(--e5); }
  form.filtros { padding: var(--e3) var(--e4); gap: var(--e2) var(--e3); }
  form.filtros input, form.filtros select, form.filtros .btn { min-height: 38px; padding-top: .3rem; padding-bottom: .3rem; }
}