/* =========================================================================
   PRUEBA DE DISEÑO (16/9/2026) — rama prueba-diseno, NO va a producción.
   -------------------------------------------------------------------------
   Capa que carga DESPUÉS de estilo.css y la reviste con la propuesta:
   tinta azul que ordena, verde solo en la acción principal, azul para
   información, montos grandes. Cada pantalla trae su propia hoja
   diseno-<pantalla>.css para que el trabajo se reparta sin chocar.

   CONTRATO DE TOKENS (lo usan todas las hojas diseno-*.css):
     --tinta, --tinta-2, --sobre-tinta, --sobre-tinta-tenue, --lima
     --verde, --verde-hover, --verde-suave, --sobre-verde
     --azul, --azul-suave
     --ambar, --ambar-suave, --rojo, --rojo-suave, --gris-suave
     --fuente-titulo, --fuente-texto, --sombra-chica, --radio-grande
   y los de siempre: --fondo, --papel, --papel-2, --borde, --texto, --tenue.
   ========================================================================= */

:root {
  /*
     LA PÁGINA, EL RELLENO Y EL CONTORNO, MEDIDOS (17/9/2026, al pasar a
     producción). La propuesta traía la página en #f3f5f8 y el contorno de
     las tarjetas en #d6dde6: la tarjeta blanca daba 1,09:1 contra la página
     —lo mismo que Mario fotografió el 15/9: «que haya más contraste entre
     ellas y lo de atrás»— y su contorno 1,25:1, debajo del 3:1 de la WCAG
     1.4.11. Los números vuelven a los que vigilan las guardas
     (color-centrado-y-telefono.test.ts los mide en Edge):
       · página #eef1f6: el papel da 1,13:1 contra ella. No baja más porque
         el verde de los enlaces queda en 4,52:1 encima.
       · relleno de los campos #edf1f6: 1,13:1 contra el papel, y el verde
         encima 4,51:1.
       · contorno #78828f (tarjetas, campos y botones): 3,44:1 contra la
         página, 3,90:1 contra el papel y 3,44:1 contra el relleno.
     --borde se queda suave: es la rayita de tablas y títulos, no un contorno.
  */
  --fondo: #eef1f6;
  --papel: #ffffff;
  --papel-2: #edf1f6;
  --borde: #d6dde6;
  --borde-fuerte: #9aa6b4;
  --borde-tarjeta: #78828f;
  --texto: #16202c;
  --tenue: #566374;

  --tinta: #0f2a4a;
  --tinta-2: #1a3d66;
  --sobre-tinta: #e9f0f8;
  --sobre-tinta-tenue: #a9bdd3;
  --lima: #57fc0f;

  --verde: #2e7e07;
  --verde-hover: #256a05;
  --verde-suave: #e9f5e0;
  --sobre-verde: #ffffff;
  --azul: #0f4ea8;
  --azul-suave: #e5eefb;
  --ambar: #9a6100;
  --ambar-suave: #fbf1de;
  --rojo: #b3261e;
  --rojo-suave: #fcebe9;
  --gris-suave: #eceff3;

  /* Los tokens viejos apuntan a la familia nueva. */
  --acento: var(--verde);
  --acento-suave: var(--verde-suave);
  --sobre-acento: var(--sobre-verde);
  --sobre-acento-suave: #276b06;
  --exito: var(--verde);
  --exito-suave: var(--verde-suave);
  --alerta: var(--ambar);
  --alerta-suave: var(--ambar-suave);
  --error: var(--rojo);
  --error-suave: var(--rojo-suave);
  --azul-icono: var(--azul);

  /* Sin descargar letras: Windows 11 trae Segoe UI Variable, que tiene corte
     de títulos y de texto. En otros equipos cae en la del sistema. */
  --fuente-titulo: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  /*
     LA ESCALA DE LA VERSIÓN 3 (6/10/2026). Todo lo que se mide en la v3 sale
     de aquí; una hoja diseno-*.css que escriba un número suelto se está
     saliendo de la escala. Ver docs/superpowers/specs/2026-10-06-frontend-v3-design.md.

     ESPACIOS, de 4 en 4: --e-1 entre un ícono y su texto; --e-2 entre cosas
     que van juntas; --e-3 el relleno de un renglón; --e-4 el relleno de una
     tarjeta y el hueco entre tarjetas; --e-5 entre secciones; --e-6 el aire
     de una pieza sola (un vacío, un error).
  */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;

  /* RADIOS: chico (teclas, barritas), control (botones y campos), el de
     siempre (renglones del menú, fichas) y grande (tarjetas y cuadros). */
  --radio-chico: 6px;
  --radio-control: 8px;
  --radio: 10px;
  --radio-grande: 14px;

  /* TAMAÑOS DE LETRA: nota (lo que acompaña), texto (lo que se lee), título
     (el de una tarjeta), página (el de la pantalla) y cifra (el número grande). */
  --t-nota: 12.5px;
  --t-texto: 14.5px;
  --t-titulo: 15px;
  --t-pagina: 24px;
  --t-cifra: 24px;

  /* SOMBRAS: la v3 es plana. En reposo, una tarjeta se sostiene con su
     contorno (--borde-tarjeta, el 3:1 que pidió Mario) y un filo de sombra;
     la media es de lo que responde al ratón; la grande, solo de lo que flota
     encima de la página (menús, cuadros, el cajón). */
  --sombra-chica: 0 1px 0 rgba(15, 42, 74, .05);
  --sombra-media: 0 2px 4px rgba(15, 42, 74, .06), 0 6px 16px rgba(15, 42, 74, .08);
  --sombra: 0 1px 2px rgba(15, 42, 74, .08), 0 12px 32px rgba(15, 42, 74, .14);

  /* EL MENÚ AZUL (Mario, 4–6/10/2026): cada renglón es una tarjetita suave;
     el activo, verde azulado translúcido; las rayas separan los tres grupos. */
  --menu-renglon: rgba(255, 255, 255, .045);
  --menu-renglon-hover: rgba(255, 255, 255, .10);
  --menu-activo: rgba(46, 204, 170, .20);
  --menu-raya: rgba(255, 255, 255, .12);
}

html[data-theme="oscuro"] {
  /* Lo mismo en oscuro (17/9/2026). La propuesta daba 1,09:1 el papel contra
     la página, 1,08:1 el relleno contra el papel y 1,54:1 el contorno.
       · papel #141e2b: 1,13:1 contra la página.
       · relleno #1d2838: 1,13:1 contra el papel.
       · contorno #6b7889: 4,21:1 contra la página, 3,74:1 contra el papel y
         3,31:1 contra el relleno. */
  --fondo: #0a111b;
  --papel: #141e2b;
  --papel-2: #1d2838;
  --borde: #2a3644;
  --borde-fuerte: #4a5868;
  --borde-tarjeta: #6b7889;
  --texto: #e6ebf1;
  --tenue: #98a5b5;

  /* La tinta en oscuro sube hacia el azul para despegarse del papel. */
  --tinta: #173a63;
  --tinta-2: #22497a;
  --sobre-tinta: #dfe8f2;
  --sobre-tinta-tenue: #8fa3ba;

  --verde: #4ee311;
  --verde-hover: #6bec36;
  --verde-suave: #15290d;
  --sobre-verde: #07130a;
  --azul: #5c9ff0;
  --azul-suave: #11233b;
  --ambar: #e8b45c;
  --ambar-suave: #2e240f;
  --rojo: #f08b84;
  --rojo-suave: #361917;
  --gris-suave: #1c2633;

  --sobre-acento-suave: #82e850;
  --sobre-azul-icono: #0b1a33;
  --sombra-chica: 0 1px 0 rgba(0, 0, 0, .35);
  --sombra-media: 0 2px 4px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .35);
  --sombra: 0 1px 2px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .5);

  --menu-renglon: rgba(255, 255, 255, .05);
  --menu-renglon-hover: rgba(255, 255, 255, .11);
  --menu-activo: rgba(46, 204, 170, .22);
  --menu-raya: rgba(255, 255, 255, .13);
}

/* ------------------------------------------------------------ letras -- */
body { font: 14.5px/1.5 var(--fuente-texto); }
h1, h2, h3, h4 { font-family: var(--fuente-titulo); letter-spacing: -.01em; text-wrap: balance; }
.num, .numero, td.numero, .monto { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ------------------------------------------------- menú lateral en tinta -- */
.lateral {
  background: var(--tinta);
  border-right: 0;
  color: var(--sobre-tinta);
}
/* Los renglones del menú (v3) viven en diseno-marco.css. */
.pie-lateral { border-top-color: rgba(255, 255, 255, .08) !important; color: var(--sobre-tinta-tenue); }
.pie-lateral .encoger-menu { color: var(--sobre-tinta-tenue); }
.pie-lateral .encoger-menu:hover { background: var(--tinta-2); color: #fff; }

/* -------------------------------------------------------------- barra -- */
header.barra { height: 56px; box-shadow: var(--sombra-chica); position: relative; z-index: 5; }
header.barra .marca span { font-family: var(--fuente-titulo); font-weight: 650; }

/* ---------------------------------------------------------- tarjetas -- */
/* Contorno --borde-tarjeta y no --borde: es el 3:1 que Mario pidió el 2/9
   («cada tarjeta debe tener más presencia, verse bien que está ahí»). */
.tarjeta {
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-chica);
}
/* La cabecera deja de ser franja verde: título en tinta sobre papel, con
   una rayita abajo. El verde queda para la acción. */
.tarjeta > h2 {
  font-family: var(--fuente-titulo);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  color: var(--texto);
  background: transparent;
  border-bottom: 1px solid var(--borde);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  padding: 14px 18px;
}

/* ----------------------------------------------------------- botones -- */
/* Tres pesos: verde (uno por pantalla), borde (lo demás), peligro.
   El borde del secundario es --borde-tarjeta: con --borde-fuerte daba 2,5:1
   contra el papel, y el botón se perdía en su cuadro (Mario, 10/9/2026:
   «siempre debe verse mas contraste en los cuadritos de toda la pagina»). */
.boton {
  border: 1px solid var(--borde-tarjeta);
  border-radius: 8px;
  background: var(--papel);
  color: var(--texto);
  font-weight: 600;
  padding: 7px 14px;
  transition: background-color .12s ease, border-color .12s ease;
}
.boton:hover:not(:disabled) { background: var(--papel-2); border-color: var(--texto); color: var(--texto); }
.boton.primario {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--sobre-verde);
  box-shadow: var(--sombra-chica);
}
.boton.primario:hover:not(:disabled) { background: var(--verde-hover); border-color: var(--verde-hover); filter: none; color: var(--sobre-verde); }
.boton.peligro { color: var(--rojo); border-color: var(--rojo); background: var(--papel); }
.boton.peligro:hover:not(:disabled) { background: var(--rojo-suave); color: var(--rojo); border-color: var(--rojo); }
.boton.azul { background: var(--azul); border-color: var(--azul); color: #fff; }
html[data-theme="oscuro"] .boton.azul { color: #0b1a33; }
.boton.azul:hover:not(:disabled) { background: var(--azul); filter: brightness(1.1); }
/* Botón de solo texto: para «Cancelar», «Ver todos». */
.boton.texto { background: transparent; border-color: transparent; color: var(--azul); padding-inline: 8px; }
.boton.texto:hover:not(:disabled) { background: var(--azul-suave); border-color: transparent; color: var(--azul); }

/* ------------------------------------------------------------ campos -- */
/* Contorno --borde-tarjeta (Mario, 4/9/2026: «esos cuadritos… deberían ser
   más visibles»): con --borde-fuerte el campo daba 2,2:1 contra su relleno. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
select, textarea {
  border-radius: 8px;
  border-color: var(--borde-tarjeta);
  background: var(--papel-2);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:not([type=checkbox]):not([type=radio]):focus,
select:focus, textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px var(--azul-suave);
  outline: none;
  background: var(--papel);
}

/* ------------------------------------------------------------- tablas -- */
/* Los títulos de columna son los de estilo.css, sin capa encima: centrados,
   en el azul del ícono y sin mayúsculas. La propuesta los traía grises, en
   mayúsculas y a la izquierda, y eso deshacía dos pedidos de Mario: el del
   14/8 («no quiero nada así», las mayúsculas) y el del 16/9 («centrado y en
   un color de fondo azul más profundo, que se vea diferente al de la
   zebra»; con el gris salían del MISMO color que la zebra).

   La celda va a 1,4 de interlineado (20,3 px, el mismo renglón de antes del
   rediseño): con el 1,5 del cuerpo, la factura de un cliente de nombre largo
   medía 124 px de alto en el teléfono y Mario pidió «que el renglón de la
   factura no sea tan re ancho» (15/9). Con 1,4, 117 px. */
td { border-bottom-color: var(--borde); line-height: 1.4; }
tbody tr:hover td { background: color-mix(in srgb, var(--azul-suave) 60%, transparent); }

/* ---------------------------------------------------------- pastillas -- */
.pastilla { font-size: 12px; padding: 2px 10px; border: 0; }
.pastilla::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pastilla.ok     { background: var(--verde-suave); color: var(--sobre-acento-suave); }
.pastilla.aviso  { background: var(--ambar-suave); color: var(--ambar); }
/* .aviso (el globito de avisos de estilo.css) no debe vestir a la pastilla. */
.pastilla.aviso { box-shadow: none; border: 0; border-radius: 999px; padding: 2px 10px; min-width: 0; max-width: none; margin: 0; }
.pastilla.malo   { background: var(--rojo-suave); color: var(--rojo); }
.pastilla.neutro { background: var(--gris-suave); color: var(--tenue); }
.pastilla.camino { background: var(--azul-suave); color: var(--azul); }
.pastilla.tachado { text-decoration: line-through; }

/* -------------------------------------------------------------- modal -- */
.modal { border-radius: var(--radio-grande); border-color: var(--borde); }
.modal > header {
  background: var(--papel);
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  font-family: var(--fuente-titulo);
  font-size: 16px;
}
.modal > header .cerrar { color: var(--tenue); }

/* ----------------------------------------------------- panel lateral -- */
/* Pieza común para «lista a la izquierda, detalle a la derecha». Las
   pantallas que la usen la arman con estas clases. */
.dn-dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 14px; align-items: start; }
/* Apilado (Mario, 18/9/2026, Ventas por cobrar): la lista a todo el ancho y el
   detalle debajo, sin pegarse arriba. */
.dn-dividido.apilado { grid-template-columns: minmax(0, 1fr); }
.dn-dividido.apilado > .dn-detalle { position: static; max-height: none; }
.dn-detalle {
  background: var(--papel);
  border: 1px solid var(--borde-tarjeta);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  max-height: calc(100vh - 140px);
  overflow: auto;
}
.dn-detalle > header { padding: 16px 18px; border-bottom: 1px solid var(--borde); display: grid; gap: 4px; }
.dn-detalle > header h3 { margin: 0; font-size: 17px; }
.dn-detalle > .dn-cuerpo { padding: 14px 18px; display: grid; gap: 12px; }
@media (max-width: 1000px) {
  .dn-dividido { grid-template-columns: 1fr; }
  .dn-detalle { position: static; max-height: none; }
}
/* EL PANEL, BAJO EL RENGLÓN TOCADO (Mario, 3/10/2026, desde el celular: «la
   info debería salir debajo de ella, no allá abajo abajo»). A 1000 px o menos
   `panelBajoElRenglon` (ui.js) muda el panel a un renglón propio de la lista.
   La tabla puede medir 760 px y correr de lado en su marco: el panel mide lo
   que se VE del marco (`cqw`) y se queda quieto mientras la tabla corre. La
   celda borra lo que una tabla le hereda a lo de adentro (centrado, relleno). */
.envoltorio-tabla:has(> table > tbody > .dn-fila-panel) { container-type: inline-size; }
tr.dn-fila-panel > td { padding: 0; text-align: start; white-space: normal; background: var(--azul-suave); }
.dn-panel-marco {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  width: min(100%, 100vw); /* sin `cqw`: que al menos no pase de la ventana */
  width: min(100%, 100cqw);
  padding: 8px 6px;
}
/* Ahí el panel mide lo que el teléfono: menos relleno a los lados, para que
   quepa lo de adentro también a 320 px. */
.dn-panel-marco > .dn-detalle { min-width: 0; }
.dn-panel-marco > .dn-detalle > header { padding-inline: 12px; }
.dn-panel-marco > .dn-detalle > .dn-cuerpo { padding-inline: 10px; }

/* Cabecera de pantalla: título grande a la izquierda, acciones a la derecha. */
.dn-cabecera { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dn-cabecera h1, .dn-cabecera h2 { margin: 0; font-size: 24px; font-weight: 650; }
.dn-cabecera p { margin: 2px 0 0; color: var(--tenue); }
.dn-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Número grande. Con el contorno de las tarjetas: en el Inicio es un botón. */
/* CENTRADO, COMO TODO LO DE ADENTRO (Mario, 19/9/2026, con la captura de
   Reportes: «estos cuadros no me salen centrada la información. Todo debe ir
   así ya te lo he dicho mil veces»). Estaba centrado solo en `button.dn-kpi`
   —los del Inicio, que son botones—, y los de Reportes y Mi cuenta son `div`:
   la regla va en la base, que es la que los alcanza a todos. */
.dn-kpi { background: var(--papel); border: 1px solid var(--borde-tarjeta); border-radius: var(--radio-grande); padding: 14px 16px; display: grid; gap: 2px; justify-items: center; text-align: center; box-shadow: var(--sombra-chica); }
.dn-kpi small { color: var(--tenue); font-size: 12.5px; }
.dn-kpi b { font: 650 24px/1.2 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.dn-kpi em { font-style: normal; font-size: 12px; color: var(--sobre-acento-suave); }
.dn-kpi em.baja { color: var(--rojo); }
.dn-kpi.destacado { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.dn-kpi.destacado small { color: var(--sobre-tinta-tenue); }
.dn-kpi.destacado em { color: var(--lima); }

/* Selector de pestañas. Cada opción es un `button.dn-segmento` (la clase
   que la guarda de interfaz.test.ts pide a todo botón hecho desde JS); el
   `button` a secas se queda para los que todavía no la llevan. */
.dn-segmentos { display: inline-flex; background: var(--papel-2); border: 1px solid var(--borde); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.dn-segmentos button, .dn-segmento { border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--tenue); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.dn-segmentos button[aria-pressed="true"], .dn-segmentos button.activo,
.dn-segmento[aria-pressed="true"], .dn-segmento.activo { background: var(--papel); color: var(--texto); font-weight: 600; box-shadow: var(--sombra-chica); }

/* -------------------------------------- cargando, error y vacío (v3) -- */
/* TRES PIEZAS, DISTINTAS A LA VISTA (sugerencia 4, aceptada por Mario el
   4/10/2026). Las arma ui.js: `cargando()`, `estadoError()` y
   `estadoVacio()`. Cargando es la FORMA de lo que viene, sin la palabra;
   el error dice qué pasó y deja volver a intentar; el vacío es una frase
   amable y la acción que sigue. Centradas, como todo lo de adentro. */
.dn-vacio, .dn-error {
  display: grid; gap: var(--e-2); justify-items: center; text-align: center;
  padding: var(--e-6) var(--e-4); color: var(--tenue);
}
.dn-vacio b, .dn-error b { color: var(--texto); font: 600 16px var(--fuente-titulo); }
.dn-vacio p, .dn-error p { margin: 0; max-width: 52ch; font-size: var(--t-nota); }
.dn-vacio .boton, .dn-error .boton { margin-top: var(--e-2); }
/* El error se distingue por su raya y su papel, no por un grito. */
.dn-error {
  border: 1px solid var(--rojo); border-radius: var(--radio-grande);
  background: var(--rojo-suave); color: var(--texto);
}
.dn-error b { color: var(--rojo); }
.dn-error .dn-a-salvo { font-weight: 600; }

/* Los huesos: un renglón que respira mientras carga. */
.dn-cargando { height: 14px; border-radius: var(--radio-chico); background: linear-gradient(90deg, var(--gris-suave) 25%, var(--papel-2) 45%, var(--gris-suave) 65%); background-size: 300% 100%; animation: dn-respira 1.6s linear infinite; }
@keyframes dn-respira { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* La caja de huesos: no es un texto, es el dibujo de la pantalla que viene. */
.dn-huesos { display: grid; gap: var(--e-4); color: inherit; font-size: inherit; }
.dn-huesos .dn-hueso-caja {
  display: grid; gap: var(--e-3); align-content: start;
  padding: var(--e-4); background: var(--papel);
  border: 1px solid var(--borde); border-radius: var(--radio-grande);
}
.dn-huesos .dn-hueso-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-3); }
.dn-huesos .dn-hueso-dos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--e-4); }
.dn-huesos .corto { width: 35%; }
.dn-huesos .medio { width: 60%; }
.dn-huesos .titulo { height: 22px; width: 180px; max-width: 60%; }
.dn-huesos .cifra { height: 26px; width: 70%; margin-inline: auto; }
.dn-huesos .centro { margin-inline: auto; }
.dn-huesos .alto { height: 180px; }
@media (max-width: 700px) {
  .dn-huesos .dn-hueso-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dn-huesos .dn-hueso-dos { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .dn-cargando { animation: none; } }

/* La barra de avance de la casa (Mario, 29/9/2026: «acuérdate de las
   animaciones en cualquier lugar del programa donde haya carga de archivos o
   proceso de datos»). UNA para todo: la arma `barraDeAvance` (ui.js). El
   relleno se mueve con una transición corta; sin total que contar, una franja
   corre de lado a lado. Con «reducir movimiento», ni una cosa ni la otra. */
.avance { display: grid; gap: 4px; width: 100%; max-width: 460px; margin-inline: auto; }
.avance-fila { display: flex; align-items: center; gap: 10px; }
.barra-avance { flex: 1; min-width: 120px; height: 10px; border-radius: 999px; background: var(--gris-suave); overflow: hidden; }
.barra-avance-relleno { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--verde); transition: width .25s ease-out; }
.barra-avance.trabajando .barra-avance-relleno { width: 30%; animation: barra-trabaja 1.3s ease-in-out infinite; }
@keyframes barra-trabaja { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.barra-avance-cifra { min-width: 3.2em; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); }
.barra-avance-leyenda { margin: 0; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .barra-avance-relleno { transition: none; }
  .barra-avance.trabajando .barra-avance-relleno { animation: none; width: 100%; opacity: .45; }
}

/* ------------------------------------------------ títulos de los campos -- */
/* Mario, 17/9/2026: los títulos de cada campo (Período, Moneda, Puerto…)
   centrados y en negrita, en TODO el sistema. Solo el rótulo que va encima
   de un control: un label que ENVUELVE su casilla o interruptor se queda
   como está. */
main label:not(:has(input, select, textarea)),
.modal label:not(:has(input, select, textarea)) {
  display: block;
  text-align: center;
  font-weight: 700;
  color: var(--texto);
}
main .rotulo-i,
.modal .rotulo-i { justify-content: center; }
main .rotulo-i > label,
.modal .rotulo-i > label { display: inline; }

/* ------------------------------ la misma tabla, tarjetas en el teléfono -- */
/* LA PIEZA `.dn-fichas` (v3, fase 7; la usan el inventario y el laboratorio).
   Es la sugerencia 1 que Mario aceptó el 4/10/2026: a 700 px o menos una tabla
   no corre de lado; cada renglón es una tarjeta, con el MISMO DOM. El
   envoltorio lleva `.dn-fichas` y cada celda dice el título de su columna
   (`data-rotulo`) y su papel (`data-papel`; las arma `celda`, de ui.js): el
   `titulo` arriba; los `dato` en un renglón corrido; cada `monto` y el
   `total` en su renglón, con el rótulo a la izquierda y la cifra a la
   derecha, alineadas entre sí; y la `accion` abajo, a lo ancho. Los títulos
   de columna quedan para el lector de pantalla. (Reportes, fase 5, trae la
   suya en diseno-listas.css, con su prefijo.) */
/* Ni un número ni un código se parten en dos renglones, tampoco en la compu. */
.dn-fichas td.numero,
.dn-fichas td.mono { white-space: nowrap; }
@media (max-width: 700px) {
  .envoltorio-tabla.dn-fichas { overflow-x: visible; position: relative; }
  .envoltorio-tabla.dn-fichas table { display: block; min-width: 0; width: 100%; }
  .envoltorio-tabla.dn-fichas thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .envoltorio-tabla.dn-fichas tbody { display: grid; gap: var(--e-2); }
  .envoltorio-tabla.dn-fichas tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 3px var(--e-3);
    padding: var(--e-3);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
  }
  .envoltorio-tabla.dn-fichas tbody tr:hover td { background: transparent; }
  .envoltorio-tabla.dn-fichas tbody td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 13px;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .envoltorio-tabla.dn-fichas tbody td:empty { display: none; }
  .envoltorio-tabla.dn-fichas td[data-papel="titulo"] {
    order: 0; flex: 1 1 100%;
    font: 650 var(--t-texto)/1.3 var(--fuente-titulo); color: var(--texto);
  }
  .envoltorio-tabla.dn-fichas td[data-papel="dato"] { order: 1; color: var(--tenue); }
  /* Lo que acompaña al título (de dónde salió un movimiento) no va en negrita. */
  .envoltorio-tabla.dn-fichas td[data-papel="titulo"] .celda-tenue { font: 450 var(--t-nota)/1.3 var(--fuente-texto); }
  /* Lo que acompaña a un dato (quién abrió el conteo) sigue en su renglón: «fecha · quién». */
  .envoltorio-tabla.dn-fichas td[data-papel="dato"] .celda-tenue { display: inline; font-size: inherit; }
  .envoltorio-tabla.dn-fichas td[data-papel="dato"] .celda-tenue:not(:empty)::before { content: " · "; }
  /* El rótulo va con la letra de leer, aunque el dato sea un código. */
  .envoltorio-tabla.dn-fichas td[data-papel="dato"]::before { content: attr(data-rotulo) ": "; font: 450 13px var(--fuente-texto); }
  .envoltorio-tabla.dn-fichas td[data-papel="monto"],
  .envoltorio-tabla.dn-fichas td[data-papel="total"] {
    order: 2; flex: 1 1 100%;
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3);
    text-align: right; font-variant-numeric: tabular-nums;
  }
  .envoltorio-tabla.dn-fichas td[data-papel="monto"]::before,
  .envoltorio-tabla.dn-fichas td[data-papel="total"]::before {
    content: attr(data-rotulo);
    font: 450 13px var(--fuente-texto); color: var(--tenue); text-align: left;
  }
  .envoltorio-tabla.dn-fichas td[data-papel="total"] { font-weight: 650; color: var(--texto); }
  .envoltorio-tabla.dn-fichas td[data-papel="accion"] { order: 4; flex: 1 1 100%; margin-top: var(--e-1); }
  .envoltorio-tabla.dn-fichas td[data-papel="accion"] .boton { width: 100%; min-height: 40px; }
  /* «Conteo #3», «Orden 12»: de título de tarjeta, el número solo no dice qué es. */
  .envoltorio-tabla.dn-fichas td[data-papel="titulo"].con-rotulo::before { content: attr(data-rotulo) " "; }
}

/* Las columnas que ordenan (Mario, 14/10/2026): la flechita dice hacia dónde. */
th.ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.ordenable::after { content: '\2195'; opacity: .35; margin-left: .35em; font-size: .85em; }
th.ordenable[data-orden="sube"]::after { content: '\25B2'; opacity: .9; }
th.ordenable[data-orden="baja"]::after { content: '\25BC'; opacity: .9; }
th.ordenable:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; }