/* sistema de diseño 1.10.0 (06-sistema-de-diseno.md §6) */

/* ------------------------------------------------------------------ fuentes (06 §2.2)
   Barlow 400 y 600, recortadas al latín que usa el panel (unos 15 KB cada una). La alternativa mide como Barlow:
   si la fuente tarda, el texto se ve con Arial ajustada y no salta al llegar. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/estaticos/fuentes/barlow-400.7866793d.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/estaticos/fuentes/barlow-600.b18aebf1.woff2") format("woff2"); }
@font-face {
  font-family: "Barlow alternativa"; src: local("Arial"), local("Helvetica");
  size-adjust: 93.25%; ascent-override: 107.24%; descent-override: 21.45%; line-gap-override: 0%;
}

/* ------------------------------------------------------------------ tokens (06 §2)
   Tres capas. La base neutra define todos los tokens; la marca (data-marca) cambia solo los suyos: el papel, la
   tinta, el acento y el marco (shell). Los componentes usan solo los nombres de los tokens, así que cambiar de
   marca no los toca. Los estados (ok, aviso, error, info, parada) y el foco son de la base: significan lo mismo
   con cualquier marca. */
:root {
  /* color: base, claro */
  --fondo: #f6f7f8; --superficie: #ffffff; --superficie-2: #eef0f2;
  --borde: #d8dce1; --borde-fuerte: #7b838c;
  --texto: #16191d; --texto-2: #474e56;
  --acento: #1d6072; --acento-texto: #ffffff; --acento-suave: #e0eef2; --acento-encima: #174e5d;
  --foco: #1d5fd0;
  --ok: #1e6a3f; --ok-suave: #e1f0e6;
  --aviso: #7d4b00; --aviso-suave: #f9ecd2;
  --error: #a3241b; --error-suave: #fae3e0;
  --info: #1f5584; --info-suave: #e1ecf6;
  --neutro: #48505a; --neutro-suave: #eceef1;
  --parada: #9b1c14; --parada-texto: #ffffff;
  --shell: #eef0f2; --shell-texto: #16191d; --shell-texto-2: #525a63; --shell-activo: #e0eef2;
  --shell-acento: #1d6072; --shell-borde: #d8dce1; --shell-foco: #1d5fd0;
  --sombra-1: 0 1px 2px rgb(22 19 15 / .06), 0 2px 6px rgb(22 19 15 / .04);
  --sombra-2: 0 10px 30px rgb(22 19 15 / .16), 0 2px 6px rgb(22 19 15 / .08);

  /* tipo: una familia, dos pesos, una escala cerrada por papeles */
  --familia: "Barlow", "Barlow alternativa", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --peso-normal: 400; --peso-fuerte: 600;
  --t-meta: 12px; --l-meta: 16px;
  --t-dato: 14px; --l-dato: 20px;
  --t-texto: 16px; --l-texto: 24px;
  --t-titulo-s: 18px; --l-titulo-s: 24px;
  --t-titulo-m: 22px; --l-titulo-m: 28px;
  --t-titulo-l: 28px; --l-titulo-l: 32px;
  --t-cifra: 36px; --l-cifra: 40px;

  /* espacio: múltiplos de 4, cerrados; e-0 es medio paso, solo para ajustes ópticos */
  --e-0: 2px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;
  --alto-control: 40px; --alto-abajo: 64px;
  --r-control: 8px; --r-tarjeta: 12px;
  --icono-s: 16px; --icono: 20px; --icono-l: 32px; --icono-xl: 40px;

  /* movimiento: corto, y nada con prefers-reduced-motion */
  --mov-rapido: 120ms; --mov-normal: 200ms; --mov-lento: 320ms;
  --curva: cubic-bezier(.16, 1, .3, 1);

  /* en retirada desde la 1.1.0, se quitan en la 2.0.0: los nombres de la 1.0.0 */
  --fuente: var(--familia); --sombra: var(--sombra-1);

  color-scheme: light;
}
/* La marca de Ramones: papel cálido, tinta, el cobre de la bodega y el marco negro con el logo en crema. */
:root[data-marca="ramones"] {
  --fondo: #f7f4ee; --superficie-2: #f0ebe2;
  --borde: #ddd5c6; --borde-fuerte: #8c8273;
  --texto: #1b1915; --texto-2: #544d43;
  --acento: #9e4220; --acento-texto: #ffffff; --acento-suave: #f6e6dc; --acento-encima: #86381b;
  --neutro: #4c463e; --neutro-suave: #ece7de;
  --shell: #16130f; --shell-texto: #f2ecd5; --shell-texto-2: #b9b09c; --shell-activo: #2a241d;
  --shell-acento: #e98a5f; --shell-borde: #2f2a23; --shell-foco: #7fb0ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #111315; --superficie: #1a1c1f; --superficie-2: #24272b;
    --borde: #363a40; --borde-fuerte: #767e88;
    --texto: #eef0f2; --texto-2: #b8bfc7;
    --acento: #6cc2d2; --acento-texto: #04212a; --acento-suave: #13313a; --acento-encima: #8dd2de;
    --foco: #7fb0ff;
    --ok: #7fd19e; --ok-suave: #16281d;
    --aviso: #efbd5c; --aviso-suave: #2f2410;
    --error: #ff9a8d; --error-suave: #361a17;
    --info: #94c0f2; --info-suave: #162334;
    --neutro: #c5cad1; --neutro-suave: #262a2f;
    --parada: #c2382d; --parada-texto: #ffffff;
    --shell: #0c0e10; --shell-texto: #eef0f2; --shell-texto-2: #aab2bb; --shell-activo: #13313a;
    --shell-acento: #6cc2d2; --shell-borde: #24272b; --shell-foco: #7fb0ff;
    --sombra-1: none; --sombra-2: 0 10px 30px rgb(0 0 0 / .5);
    color-scheme: dark;
  }
  :root[data-marca="ramones"]:not([data-tema="claro"]) {
    --fondo: #131210; --superficie: #1c1a17; --superficie-2: #25231f;
    --borde: #3a362f; --borde-fuerte: #7d756a;
    --texto: #f1ece4; --texto-2: #c2b9ab;
    --acento: #e98a5f; --acento-texto: #1d0f07; --acento-suave: #3a2418; --acento-encima: #f0a580;
    --neutro: #cbc3b7; --neutro-suave: #2a2722;
    --shell: #0d0c0a; --shell-texto: #f2ecd5; --shell-texto-2: #b9b09c; --shell-activo: #2a241d;
    --shell-acento: #e98a5f; --shell-borde: #26221c; --shell-foco: #7fb0ff;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #111315; --superficie: #1a1c1f; --superficie-2: #24272b;
  --borde: #363a40; --borde-fuerte: #767e88;
  --texto: #eef0f2; --texto-2: #b8bfc7;
  --acento: #6cc2d2; --acento-texto: #04212a; --acento-suave: #13313a; --acento-encima: #8dd2de;
  --foco: #7fb0ff;
  --ok: #7fd19e; --ok-suave: #16281d;
  --aviso: #efbd5c; --aviso-suave: #2f2410;
  --error: #ff9a8d; --error-suave: #361a17;
  --info: #94c0f2; --info-suave: #162334;
  --neutro: #c5cad1; --neutro-suave: #262a2f;
  --parada: #c2382d; --parada-texto: #ffffff;
  --shell: #0c0e10; --shell-texto: #eef0f2; --shell-texto-2: #aab2bb; --shell-activo: #13313a;
  --shell-acento: #6cc2d2; --shell-borde: #24272b; --shell-foco: #7fb0ff;
  --sombra-1: none; --sombra-2: 0 10px 30px rgb(0 0 0 / .5);
  color-scheme: dark;
}
:root[data-tema="oscuro"][data-marca="ramones"] {
  --fondo: #131210; --superficie: #1c1a17; --superficie-2: #25231f;
  --borde: #3a362f; --borde-fuerte: #7d756a;
  --texto: #f1ece4; --texto-2: #c2b9ab;
  --acento: #e98a5f; --acento-texto: #1d0f07; --acento-suave: #3a2418; --acento-encima: #f0a580;
  --neutro: #cbc3b7; --neutro-suave: #2a2722;
  --shell: #0d0c0a; --shell-texto: #f2ecd5; --shell-texto-2: #b9b09c; --shell-activo: #2a241d;
  --shell-acento: #e98a5f; --shell-borde: #26221c; --shell-foco: #7fb0ff;
}
@media (prefers-reduced-motion: reduce) {
  :root { --mov-rapido: 1ms; --mov-normal: 1ms; --mov-lento: 1ms; }
}

/* ------------------------------------------------------------------ base: lo que el navegador pinta solo también lleva la marca */
*, *::before, *::after { box-sizing: border-box; }
/* Lo que recibe el foco o se desplaza a la vista, nunca debajo de lo fijo (lo mide panel.js; sin él, lo de siempre). */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-franjas, 0px) + var(--alto-arriba, 64px) + var(--e-4)); scroll-padding-bottom: calc(var(--alto-pie, var(--alto-abajo)) + var(--e-4)); }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: var(--peso-normal) var(--t-texto)/var(--l-texto) var(--familia);
  font-variant-numeric: lining-nums; font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  caret-color: var(--acento); accent-color: var(--acento);
  scrollbar-color: var(--borde-fuerte) transparent;
}
::selection { background: var(--acento-suave); color: var(--texto); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; font-weight: var(--peso-fuerte); }
p { text-wrap: pretty; }
strong, b { font-weight: var(--peso-fuerte); }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-control); }
[hidden] { display: none !important; } /* que ninguna regla de componente lo enseñe */
/* Lo que recibe el foco por el script (el título al cambiar de página, la línea del resultado) no lleva anillo. */
[tabindex="-1"]:focus { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--e-2); top: -100px; z-index: 100; background: var(--superficie); color: var(--texto); padding: var(--e-2) var(--e-3); border-radius: var(--r-control); box-shadow: var(--sombra-2); }
.saltar:focus { top: var(--e-2); }
.num, td.d, .cifra .valor, .contador, .hora { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: 0; }
p code, li code, dd code, .historia code, .kv dd { overflow-wrap: anywhere; } /* una clave larga (pedido.cambiado_tras_grabar) parte antes que salirse */
.t2 { color: var(--texto-2); }
.pequeno { font-size: var(--t-dato); line-height: var(--l-dato); }
.espacio { margin-top: var(--e-3); }
.espacio-grande { margin-top: var(--e-5); }
.icono { width: var(--icono); height: var(--icono); flex: none; }
.icono--s { width: var(--icono-s); height: var(--icono-s); }

/* ------------------------------------------------------------------ el marco: franjas, marco negro, cabecera, navegación */
/* #caja es el contenedor de las consultas de tamaño (06 §2.4): los componentes miran su ancho, no el de la ventana. */
#caja { container: app / inline-size; }
#app {
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "franjas franjas" "lateral arriba" "lateral principal"; background: var(--fondo);
}
#app.sin-sesion { display: block; }
.franjas { grid-area: franjas; position: sticky; top: 0; z-index: 30; }
.franja { padding: var(--e-3) var(--e-4); font-weight: var(--peso-fuerte); display: flex; gap: var(--e-2) var(--e-3); align-items: center; flex-wrap: wrap; font-size: var(--t-dato); line-height: var(--l-dato); }
.franja a { color: inherit; }
.franja > span { flex: 1 1 16em; } /* el icono y el texto, juntos; el enlace, debajo si no cabe */
.franja--parada { background: var(--parada); color: var(--parada-texto); padding-block: var(--e-3); }
.franja--parada :focus-visible { outline-color: var(--parada-texto); } /* el azul no se ve sobre el rojo */
.franja--info { background: var(--info-suave); color: var(--info); }
.franja--neutra { background: var(--neutro-suave); color: var(--neutro); }
.franja[data-cerrable] > span { flex: 1 1 0; min-width: 0; } /* el botón de cerrar, en la misma línea */
.franja-cerrar { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) calc(-1 * var(--e-2)) 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background-color var(--mov-rapido); }
.franja-cerrar:hover { background: color-mix(in srgb, currentColor 12%, transparent); }

/* El marco de Ramones: negro, con el logo en crema. En el ordenador es la barra lateral; en el móvil, la cabecera. */
.lateral { grid-area: lateral; background: var(--shell); color: var(--shell-texto); position: sticky; top: var(--alto-franjas, 0px); align-self: start; height: calc(100vh - var(--alto-franjas, 0px)); display: flex; flex-direction: column; padding: var(--e-5) var(--e-3) var(--e-4); overflow: auto; }
.lateral :focus-visible, .cabecera :focus-visible { outline-color: var(--shell-foco); }
.logo { display: block; color: var(--shell-texto); text-decoration: none; line-height: 0; border-radius: var(--r-control); }
.logo svg { display: block; height: auto; }
.lateral .logo { padding: 0 var(--e-3); }
.lateral .logo svg { width: 132px; }
.lateral .subtitulo { color: var(--shell-texto-2); font-size: var(--t-dato); line-height: var(--l-dato); letter-spacing: .06em; font-variant-caps: all-small-caps; padding: var(--e-2) var(--e-3) 0; }
.lateral nav { margin-top: var(--e-6); }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-0); }
.lateral a.seccion-nav { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3); border-radius: var(--r-control); color: var(--shell-texto); text-decoration: none; transition: background-color var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva); }
.lateral a.seccion-nav .icono { color: var(--shell-texto-2); transition: color var(--mov-rapido) var(--curva); }
.lateral a.seccion-nav:hover { background: var(--shell-activo); }
.lateral a.seccion-nav[aria-current="page"] { background: var(--shell-activo); font-weight: var(--peso-fuerte); }
.lateral a.seccion-nav[aria-current="page"] .icono { color: var(--shell-acento); }
.lateral .pie { margin-top: auto; padding: var(--e-4) var(--e-3) 0; border-top: 1px solid var(--shell-borde); color: var(--shell-texto-2); font-size: var(--t-dato); line-height: var(--l-dato); }
.contador-pieza { display: contents; } /* la pieza que cambia HTMX, sin caja: el número sigue en su sitio */
.contador { margin-left: auto; min-width: 24px; height: 22px; display: inline-grid; place-items: center; padding: 0 var(--e-2); border-radius: 999px; background: var(--shell-acento); color: var(--shell); font-size: var(--t-meta); font-weight: var(--peso-fuerte); }

/* La cabecera del contenido, en el ordenador: buscar y quién eres. */
.arriba { grid-area: arriba; position: sticky; top: var(--alto-franjas, 0px); z-index: 20; display: flex; align-items: center; gap: var(--e-4); padding: var(--e-3) var(--e-6); background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--borde); min-height: 64px; }
.cabecera { display: none; }
.buscar { display: flex; align-items: center; gap: var(--e-2); flex: 1; max-width: 420px; position: relative; }
.buscar .icono { position: absolute; left: var(--e-3); color: var(--texto-2); pointer-events: none; }
.buscar input { width: 100%; min-height: var(--alto-control); padding: 0 var(--e-3) 0 calc(var(--e-3) + var(--icono) + var(--e-2)); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); background: var(--superficie); font-size: var(--t-texto); transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.buscar input::placeholder { color: var(--texto-2); opacity: 1; }
.buscar input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
.marca-pruebas { display: inline-flex; align-items: center; gap: var(--e-1); background: var(--aviso-suave); color: var(--aviso); border-radius: 999px; padding: var(--e-0) var(--e-2); font-size: var(--t-meta); line-height: var(--l-meta); font-weight: var(--peso-fuerte); white-space: nowrap; }
.arriba .marca-pruebas { margin-left: auto; }
.menu-quien { position: relative; }
.menu-quien > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-2) 0 var(--e-1); border-radius: 999px; color: var(--texto); transition: background-color var(--mov-rapido); }
.menu-quien > summary::-webkit-details-marker { display: none; }
.menu-quien > summary:hover, .menu-quien[open] > summary { background: var(--superficie-2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--acento-suave); color: var(--acento); font-weight: var(--peso-fuerte); font-size: var(--t-dato); flex: none; }
.menu-quien .quien-nombre { display: grid; line-height: 1.15; }
.menu-quien .quien-nombre small { color: var(--texto-2); font-size: var(--t-meta); }
.menu-quien ul { position: absolute; right: 0; top: calc(100% + var(--e-2)); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); list-style: none; margin: 0; padding: var(--e-2); min-width: 200px; box-shadow: var(--sombra-2); z-index: 40; animation: aparece var(--mov-normal) var(--curva); transform-origin: top right; }
.menu-quien li a, .menu-quien li button { display: flex; align-items: center; gap: var(--e-2); width: 100%; text-align: left; min-height: 44px; padding: 0 var(--e-3); border: 0; background: none; color: var(--texto); text-decoration: none; border-radius: var(--r-control); cursor: pointer; }
.menu-quien li a:hover, .menu-quien li button:hover { background: var(--superficie-2); }
.abajo { display: none; }
main { grid-area: principal; padding: var(--e-5) var(--e-6) var(--e-7); min-width: 0; max-width: 1200px; width: 100%; }
main:focus { outline: none; }

@container app (max-width: 1023px) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "franjas" "cabecera" "principal" "abajo"; }
  .lateral, .arriba { display: none; }
  /* En el móvil, el marco negro es la cabecera: el logo, buscar y tú. */
  .cabecera { grid-area: cabecera; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--e-1); position: sticky; top: var(--alto-franjas, 0px); z-index: 20; background: var(--shell); color: var(--shell-texto); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); min-height: 56px; }
  .cabecera .logo { display: flex; align-items: center; min-height: 44px; }
  .cabecera .logo svg { width: 104px; }
  .cabecera .marca-pruebas { justify-self: start; margin-left: var(--e-2); }
  .boton-icono { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: none; color: var(--shell-texto); cursor: pointer; transition: background-color var(--mov-rapido); }
  .boton-icono:hover, .boton-icono[aria-expanded="true"] { background: var(--shell-activo); }
  .cabecera .menu-quien > summary { color: var(--shell-texto); padding: 0 var(--e-1); min-width: 44px; justify-content: center; }
  .cabecera .menu-quien > summary:hover { background: var(--shell-activo); }
  /* abierto, un anillo en el avatar: el botón no cambia de tamaño */
  .cabecera .menu-quien[open] .avatar { box-shadow: 0 0 0 2px var(--shell-acento); }
  .cabecera .menu-quien .quien-nombre { display: none; }
  .cabecera .avatar { background: var(--shell-activo); color: var(--shell-texto); }
  .cabecera .buscar { grid-column: 1 / -1; max-width: none; padding: var(--e-1) 0 var(--e-2); }
  .cabecera .buscar input { background: var(--superficie); color: var(--texto); }
  /* La barra de abajo: la zona del pulgar. */
  .abajo { grid-area: abajo; display: grid; grid-template-columns: repeat(4, 1fr); position: sticky; bottom: 0; z-index: 10; background: var(--superficie); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); }
  .abajo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-0); min-height: var(--alto-abajo); color: var(--texto-2); text-decoration: none; font-size: var(--t-meta); line-height: var(--l-meta); position: relative; }
  .abajo a .burbuja { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; transition: background-color var(--mov-normal) var(--curva); }
  .abajo a[aria-current="page"] { color: var(--texto); font-weight: var(--peso-fuerte); }
  .abajo a[aria-current="page"] .burbuja { background: var(--acento-suave); color: var(--acento); }
  .abajo .contador { position: absolute; top: var(--e-2); left: calc(50% + var(--e-2)); margin: 0; background: var(--acento); color: var(--acento-texto); height: 20px; min-width: 20px; padding: 0 var(--e-1); box-shadow: 0 0 0 2px var(--superficie); }
  main { padding: var(--e-4) var(--e-4) var(--e-7); }
  /* lo que ocupa la barra de acciones en dos filas (padding, dos controles y su hueco), más el aire de siempre */
  main.con-barra { padding-bottom: calc(2 * var(--e-3) + 2 * var(--alto-control) + var(--e-2) + var(--e-7)); }
}
@container app (max-width: 639px) {
  #app { --alto-control: 44px; } /* #app está dentro del contenedor; :root no */
  .titulo h1 { font-size: var(--t-titulo-m); line-height: var(--l-titulo-m); }
}

/* ------------------------------------------------------------------ títulos y estructura */
.titulo { display: flex; align-items: baseline; gap: var(--e-2) var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-5); }
.titulo h1 { font-size: var(--t-titulo-l); line-height: var(--l-titulo-l); letter-spacing: -.01em; }
.titulo .ayuda { color: var(--texto-2); }
h2 { font-size: var(--t-titulo-m); line-height: var(--l-titulo-m); margin: var(--e-6) 0 var(--e-3); }
h3 { font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); }
.h-tarjeta { margin: 0 0 var(--e-3); font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.h-sin-margen { margin: 0; }
.rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.rejilla-cifras { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }
/* «¿Qué cuenta?» abierto alarga su tarjeta, no las de al lado; la rejilla no se mueve */
.rejilla-cifras:has(details[open]) { align-items: start; }
/* abierta, la cifra ocupa dos columnas: la definición se lee a un ancho cómodo y la fila no se estira */
@container app (min-width: 360px) { .rejilla-cifras > .cifra:has(details[open]) { grid-column: span 2; } }
.dos { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.dos > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); align-content: start; }
@container app (max-width: 900px) { .dos { grid-template-columns: minmax(0, 1fr); gap: var(--e-4); } }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); padding: var(--e-5); }
.tarjeta + .tarjeta { margin-top: var(--e-4); }
.dos > div > .tarjeta + .tarjeta, .dos > div > section + section { margin-top: 0; }
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-4); margin: 0; }
.kv dt { color: var(--texto-2); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
details > summary { cursor: pointer; color: var(--acento); }
details[open] > summary { margin-bottom: var(--e-2); }
/* Todo `summary` tiene su objetivo de toque en su propia caja (06 §4): 24 de alto en el ordenador y 44 × 44 en el
   móvil, con el texto en medio. axe mide la caja, no un `::after`. Centra con flex, que vale en todos los navegadores
   (`align-content` en un bloque pide Safari 17.4). Con `:where()`, lo que pida cada plegable (la sección, el menú
   de quién ha entrado) gana sin pelear */
:where(details > summary) { display: flex; align-items: center; gap: var(--e-2); min-height: 24px; }
:where(details > summary)::-webkit-details-marker { display: none; }
/* Con flex no sale el triángulo del navegador: la flecha de la sección y del desplegable (dos bordes de 2 px), del
   color del enlace; a la derecha cerrado, abajo abierto. El filtro tiene la suya (la del desplegable) */
details:not(.seccion):not(.menu-quien):not(.filtro) > summary::before { content: ""; flex: none; width: 6px; height: 6px; margin-inline: 1px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--mov-rapido); }
details:not(.seccion):not(.menu-quien):not(.filtro)[open] > summary::before { transform: rotate(45deg); }
@container app (max-width: 639px) {
  :where(details > summary) { min-height: 44px; min-width: 44px; }
  .migas a { position: relative; }
  .migas a::after { content: ""; position: absolute; inset: calc(-1 * var(--e-3)) calc(-1 * var(--e-2)); }
}
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.migas { margin-bottom: var(--e-2); font-size: var(--t-dato); }
.migas a { display: inline-flex; align-items: center; gap: var(--e-1); }
.bajo-titulo { margin: calc(-1 * var(--e-4)) 0 var(--e-5); font-size: var(--t-dato); }
.cifra-titulo { font-size: var(--t-titulo-m); font-weight: var(--peso-fuerte); }
.situacion { font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); margin-bottom: var(--e-4); }
/* sin acciones debajo (en el móvil van en la barra fija), la tarjeta no deja un hueco vacío */
.tarjeta > .situacion:last-child { margin-bottom: 0; }
@container app (max-width: 1023px) { .tarjeta > .situacion:has(+ .barra-acciones:last-child) { margin-bottom: 0; } } /* solo con la barra fija */
.solo-lectura { margin: 0; color: var(--texto-2); font-style: italic; }
.texto-error { color: var(--error); font-weight: var(--peso-fuerte); }
.texto-aviso { color: var(--aviso); font-weight: var(--peso-fuerte); }

/* ------------------------------------------------------------------ Hoy: lo urgente se ve en un segundo */
.espera { list-style: none; margin: 0; padding: 0; display: grid; }
.espera li + li { border-top: 1px solid var(--borde); }
.espera a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); min-height: 56px; padding: var(--e-2) var(--e-2); margin: 0 calc(-1 * var(--e-2)); border-radius: var(--r-control); color: var(--texto); text-decoration: none; transition: background-color var(--mov-rapido); }
.espera a:hover { background: var(--superficie-2); }
.espera .cuantos { font-size: var(--t-titulo-m); line-height: 1; font-weight: var(--peso-fuerte); text-align: right; font-variant-numeric: tabular-nums; }
.espera .que { font-weight: var(--peso-fuerte); }
.espera .desde { color: var(--texto-2); font-size: var(--t-dato); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--e-1); }
/* la columna del icono, reservada en todas las filas: el texto empieza siempre en el mismo sitio */
.espera .que { display: grid; grid-template-columns: var(--icono-s) minmax(0, 1fr); gap: var(--e-2); align-items: start; }
.espera .que .icono { margin-top: var(--e-1); }
.espera .que > span { grid-column: 2; }
/* Lo urgente, en un segundo (principio 7): lo parado va primero, con su número grande en `error` y el icono de
   alerta; lo de cada día, en el color del texto. `acento` es para actuar: aquí no codifica ningún estado. */
.espera .tono-error .cuantos { color: var(--error); font-size: var(--t-titulo-l); }
.espera .tono-error .que .icono { color: var(--error); }
.espera .tono-aviso .cuantos, .espera .tono-aviso .que .icono { color: var(--aviso); }
.espera .tono-rutina .cuantos { color: var(--texto); }
@container app (max-width: 639px) {
  .espera a { grid-template-columns: 40px minmax(0, 1fr); row-gap: 0; padding-block: var(--e-3); }
  .espera .desde { grid-column: 2; font-size: var(--t-meta); line-height: var(--l-meta); }
}
.estado-linea { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) 0; }
.estado-linea + .estado-linea { border-top: 1px solid var(--borde); }
.estado-linea .icono { margin-top: var(--e-0); }
.estado-linea--error .icono { color: var(--error); }
.estado-linea--aviso .icono { color: var(--aviso); }
.estado-linea--ok .icono { color: var(--ok); }
.estado-linea--info .icono { color: var(--info); }

/* ------------------------------------------------------------------ chips */
.chip { display: inline-flex; align-items: center; gap: var(--e-1); border-radius: 999px; padding: var(--e-0) var(--e-2); font-size: var(--t-meta); font-weight: var(--peso-fuerte); line-height: var(--l-meta); white-space: nowrap; letter-spacing: .01em; }
.chip--ok { background: var(--ok-suave); color: var(--ok); }
.chip--aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip--error { background: var(--error-suave); color: var(--error); }
.chip--info { background: var(--info-suave); color: var(--info); }
.chip--neutro { background: var(--neutro-suave); color: var(--neutro); }
.chip--acento { background: var(--acento-suave); color: var(--acento); }
.motivo { display: inline-flex; gap: var(--e-2); align-items: baseline; flex-wrap: wrap; }
.motivo code { font-family: var(--mono); font-size: var(--t-meta); line-height: var(--l-meta); color: var(--texto-2); }
.chips { display: flex; gap: var(--e-2); flex-wrap: wrap; }
/* un motivo puede ser largo («Preparación en la tienda: retenida…»): parte en líneas antes que salirse */
.motivo { max-width: 100%; }
.motivo .chip, .chips .chip { white-space: normal; max-width: 100%; }
td .chips .chip { border-radius: var(--r-control); } /* en una celda parten en varias líneas: con el radio de un control */
.motivo .chip { border-radius: var(--r-control); } /* en dos líneas, una píldora sería un óvalo */

/* ------------------------------------------------------------------ botones */
.boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: var(--e-2); min-height: var(--alto-control); padding: 0 var(--e-4); border-radius: var(--r-control); border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--texto); font-weight: var(--peso-fuerte); cursor: pointer; text-decoration: none; transition: background-color var(--mov-rapido) var(--curva), border-color var(--mov-rapido), transform var(--mov-rapido) var(--curva); }
.boton:not([disabled]):hover { background: var(--superficie-2); }
.boton:active:not([disabled]) { transform: scale(.98); }
.boton--primario { background: var(--acento); border-color: var(--acento); color: var(--acento-texto); }
.boton--primario:not([disabled]):hover { background: var(--acento-encima); border-color: var(--acento-encima); }
.boton--peligro { color: var(--error); border-color: var(--error); }
.boton--peligro:not([disabled]):hover { background: var(--error-suave); }
.boton[disabled], .boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
/* El primario desactivado no puede parecer el cobre lavado: neutro, y siempre con su porqué al lado. Ocupado sí sigue en cobre. */
.boton--primario[disabled]:not([aria-busy="true"]), .boton--primario[aria-disabled="true"] { background: var(--superficie-2); border-color: var(--borde); color: var(--texto-2); opacity: 1; }
/* La acción destructiva de una pieza, aparte al final de la fila (y, si baja, a la derecha) */
.acciones > .boton--peligro[data-hacer="abrir"] { margin-inline-start: auto; }
.boton[aria-busy="true"] { opacity: 1; cursor: progress; }
.boton[aria-busy="true"]::after { content: ""; width: 14px; height: 2px; background: currentColor; border-radius: 999px; animation: ocupado 900ms ease-in-out infinite; }
.boton--texto { border-color: transparent; background: none; color: var(--acento); padding: 0 var(--e-2); }
.boton--texto:hover { background: var(--acento-suave); }
.boton--grande { min-height: 48px; font-size: var(--t-titulo-s); width: 100%; }
.acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
@container app (max-width: 639px) {
  .boton { min-height: 44px; }
  .item .acciones .boton, .paso .acciones .boton { flex: 1 1 auto; white-space: nowrap; padding-inline: var(--e-3); }
  /* el primario, primero y a lo ancho; si va en su <form> (manda sin paso, como «Aprobar el envío»), quien está
     en la fila es el form */
  .item .acciones > .boton--primario, .item .acciones > form:has(> .boton--primario) { flex-basis: 100%; order: -1; }
  .item .acciones > form:has(> .boton--primario) { display: flex; }
  /* un botón con nombre largo («Aprobar el alta de Ana Ejemplo») parte en dos líneas antes que salirse */
  .lista-simple > .item .acciones .boton { white-space: normal; }
  .paso .acciones .boton--texto { flex: 0 0 auto; }
}

/* ------------------------------------------------------------------ Pendientes: aire en las tarjetas */
.grupo { margin-top: var(--e-6); }
.grupo > h2 { margin: 0 0 var(--e-3); display: flex; gap: var(--e-2); align-items: center; font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); }
.grupo > h2 .cuantos-grupo { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 var(--e-2); border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-dato); font-variant-numeric: tabular-nums; }
.grupo--urgente > h2 .cuantos-grupo { background: var(--error-suave); color: var(--error); }
.item { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: var(--e-4) var(--e-5) var(--e-5); display: grid; gap: var(--e-3); box-shadow: var(--sombra-1); }
.item + .item { margin-top: var(--e-3); }
.item-cab { display: flex; gap: var(--e-2) var(--e-3); align-items: center; flex-wrap: wrap; }
.item-cab a { font-weight: var(--peso-fuerte); font-size: var(--t-titulo-s); color: var(--texto); text-decoration: none; }
.item-cab a:hover { text-decoration: underline; }
.item-cab .total { margin-left: auto; font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums; }
@container app (max-width: 639px) {
  /* el número y el importe en una fila, que se lee de un vistazo; la etiqueta, debajo */
  .item-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: baseline; }
  .item-cab > a { grid-column: 1; grid-row: 1; }
  .item-cab > .total { grid-column: 2; grid-row: 1; margin-left: 0; white-space: nowrap; }
  .item-cab > .chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
.item-meta { color: var(--texto-2); display: flex; gap: var(--e-1) var(--e-4); flex-wrap: wrap; font-size: var(--t-dato); line-height: var(--l-dato); }
.item-meta span { display: inline-flex; align-items: center; gap: var(--e-1); }
.numero-pedido::first-letter { color: var(--acento); }
.resultado { display: flex; gap: var(--e-2); align-items: flex-start; background: var(--ok-suave); color: var(--texto); padding: var(--e-3) var(--e-3); border-radius: var(--r-control); font-size: var(--t-dato); line-height: var(--l-dato); }
.resultado > .icono { color: var(--ok); margin-top: 0; }
.resultado--error { background: var(--error-suave); }
.resultado--error > .icono { color: var(--error); }
.resultado--aviso { background: var(--aviso-suave); }
.resultado--aviso > .icono { color: var(--aviso); }
.resultado--info { background: var(--info-suave); }
.resultado--info > .icono { color: var(--info); }
.resultado ul { margin: var(--e-2) 0; padding-left: var(--e-5); }
.resultado > .resultado-cuerpo { min-width: 0; }
.resultado-cuerpo p { margin: 0; }
.errores-tabla li + li { margin-top: var(--e-1); }
.paso { border: 1px solid var(--borde); background: var(--superficie-2); border-radius: var(--r-control); padding: var(--e-4); display: grid; gap: var(--e-3); animation: despliega var(--mov-normal) var(--curva); }
.paso fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--e-1); }
.paso legend { font-weight: var(--peso-fuerte); margin-bottom: var(--e-2); padding: 0; }
.opcion { display: flex; gap: var(--e-3); align-items: center; min-height: 44px; padding: 0 var(--e-3); border-radius: var(--r-control); background: var(--superficie); border: 1px solid var(--borde); cursor: pointer; transition: border-color var(--mov-rapido), background-color var(--mov-rapido); }
.opcion:hover { border-color: var(--borde-fuerte); }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion input { width: 18px; height: 18px; margin: 0; flex: none; }
.segmentos { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 999px; padding: var(--e-0); background: var(--superficie); }
.segmentos button { border: 0; background: none; padding: 0 var(--e-4); cursor: pointer; min-height: 36px; border-radius: 999px; color: var(--texto-2); font-weight: var(--peso-fuerte); transition: background-color var(--mov-normal) var(--curva), color var(--mov-normal); }
.segmentos button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
@container app (max-width: 639px) { .segmentos button { min-height: 44px; } }

/* La cuenta atrás de «Deshacer la aprobación»: una barra que se vacía. Es un <progress> que pone al día el
   JavaScript del panel, sin estilos en línea (CSP). */
.espera-grabar { display: grid; gap: var(--e-2); font-size: var(--t-dato); line-height: var(--l-dato); color: var(--texto-2); }
.espera-grabar strong { color: var(--texto); }
.tarjeta > .espera-grabar { margin-bottom: var(--e-4); } /* en la ficha no hay gap: el aire, aquí */
.tarjeta > * + .resultado { margin-top: var(--e-3); }
progress.cuenta { appearance: none; width: 100%; height: 4px; border: 0; border-radius: 999px; background: var(--superficie-2); overflow: hidden; }
progress.cuenta::-webkit-progress-bar { background: var(--superficie-2); border-radius: 999px; }
progress.cuenta::-webkit-progress-value { background: var(--acento); border-radius: 999px; transition: width 1s linear; }
progress.cuenta::-moz-progress-bar { background: var(--acento); border-radius: 999px; }

/* En el móvil, las acciones de la ficha bajan a la zona del pulgar, encima de la barra de abajo. */
@container app (max-width: 1023px) {
  .barra-acciones { position: fixed; left: 0; right: 0; bottom: calc(var(--alto-abajo) + env(safe-area-inset-bottom)); z-index: 15; background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -6px 20px rgb(22 19 15 / .08); padding: var(--e-3) var(--e-4); max-height: 70vh; overflow: auto; }
  .barra-acciones .paso { background: none; border: 0; padding: 0; }
  .barra-acciones .acciones .boton { flex: 1 1 auto; white-space: nowrap; padding-inline: var(--e-3); }
  .barra-acciones .acciones > .boton--primario, .barra-acciones .acciones > form:has(> .boton--primario) { flex-basis: 100%; order: -1; }
  .barra-acciones .acciones > form:has(> .boton--primario) { display: flex; }
}

/* ------------------------------------------------------------------ tablas: densas (y tarjetas en el móvil) */
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--r-tarjeta); background: var(--superficie); box-shadow: var(--sombra-1); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-dato); line-height: var(--l-dato); }
th, td { text-align: left; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--superficie-2); font-size: var(--t-dato); font-weight: var(--peso-fuerte); color: var(--texto-2); font-variant-caps: all-small-caps; letter-spacing: .04em; position: sticky; top: 0; white-space: nowrap; }
tbody tr { transition: background-color var(--mov-rapido); }
tbody tr:hover td { background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
td.d, th.d { text-align: right; }
td.d, td.num { white-space: nowrap; } /* un importe o una hora no se parten: «57,40 €», «hoy, 17:27:07» */
tr:last-child td { border-bottom: 0; }
td a { font-weight: var(--peso-fuerte); }
/* El enlace de la fila, en su primera celda: 44 px en el ordenador; en el móvil, la tarjeta entera (`::after`). */
/* En el ordenador, la fila mide 44 (8 px más que una de texto) y el número se pulsa en toda esa altura con un
   `::after`: sin salirse a la fila de al lado y en la línea de las demás celdas */
@container app (min-width: 640px) {
  table.tarjetas td { padding-block: calc((44px - var(--l-dato)) / 2); }
  table.tarjetas td:first-child a { position: relative; }
  table.tarjetas td:first-child a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
}
@container app (max-width: 639px) {
  table.tarjetas tr { position: relative; }
  table.tarjetas td:first-child a::after { content: ""; position: absolute; inset: 0; }
  table.tarjetas thead { display: none; }
  table.tarjetas, table.tarjetas tbody, table.tarjetas tr, table.tarjetas td { display: block; width: 100%; }
  table.tarjetas tr { border-bottom: 1px solid var(--borde); padding: var(--e-3) var(--e-4); }
  table.tarjetas td { border: 0; padding: var(--e-0) 0; text-align: left; display: flex; gap: var(--e-2); }
  table.tarjetas td::before { content: attr(data-etiqueta); color: var(--texto-2); min-width: 96px; flex: none; font-size: var(--t-meta); font-variant-caps: all-small-caps; letter-spacing: .04em; padding-top: var(--e-0); }
  table.tarjetas td.d { text-align: left; }
  table.tarjetas td > span { min-width: 0; overflow-wrap: anywhere; }
}
/* un enlace suelto, ni en una frase ni el de la fila (la persona, el pedido, quitar los filtros): 44 px de alto */
a.toque { display: inline-flex; align-items: center; min-height: 44px; }
td a.toque { align-items: flex-start; white-space: nowrap; } /* en una celda, en una línea y la de las demás */
td details > summary { align-items: baseline; } /* «Ver», igual: arriba de su caja, en la línea de su etiqueta */
/* en el ordenador, en una celda, como el número de la fila: la fila sigue a 44 y se pulsa en toda esa altura */
@container app (min-width: 640px) {
  td a.toque { display: inline; min-height: 0; position: relative; }
  td a.toque::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
}
.tabla-caja { min-width: 0; } /* una tabla no empuja la página, aunque una celda traiga algo sin espacios */
.filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-4); align-items: center; }
.filtros > select, .filtros > .desplegable, .filtros > input { max-width: 100%; min-width: 0; }
@container app (max-width: 639px) { .filtros > select, .filtros > .desplegable, .filtros > input { flex: 1 1 100%; } }
.filtros select, .filtros input, .campo input, .campo select { padding: 0 var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); background: var(--superficie); font-size: var(--t-texto); min-height: var(--alto-control); transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
/* el desplegable (`desplegable()`): sin la flecha nativa, que va pegada al borde. La propia, como la de las secciones,
   a un margen y en `texto-2`, sin imágenes; el texto se corta antes de llegar a ella. Pulsarla es pulsar el select */
.desplegable { position: relative; display: inline-grid; min-width: 0; max-width: 100%; }
.desplegable > select { appearance: none; width: 100%; padding-right: calc(2 * var(--e-3) + 12px); }
.desplegable::after { content: ""; position: absolute; top: 50%; right: calc(var(--e-3) + 2px); width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); pointer-events: none; }
.filtros select:focus, .filtros input:focus, .campo input:focus, .campo select:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
.campo { display: grid; gap: var(--e-1); }
.campo label { font-weight: var(--peso-fuerte); }
.campo .ayuda { color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); }
.campo input[type="file"] { max-width: 100%; min-width: 0; padding: var(--e-1); min-height: 0; font-size: var(--t-dato); color: var(--texto-2); cursor: pointer; }
.campo input[type="file"]::file-selector-button { font: inherit; font-weight: var(--peso-fuerte); color: var(--texto); background: var(--superficie-2); border: 1px solid var(--borde-fuerte); border-radius: calc(var(--r-control) - 2px); min-height: 36px; padding: 0 var(--e-4); margin-right: var(--e-3); cursor: pointer; transition: background-color var(--mov-rapido); }
.campo input[type="file"]::file-selector-button:hover { background: var(--acento-suave); }
.campo .error-campo, .error-campo { color: var(--error); font-size: var(--t-dato); font-weight: var(--peso-fuerte); display: flex; gap: var(--e-1); align-items: flex-start; }
.campo input[aria-invalid="true"] { border-color: var(--error); }
.paginas { display: flex; gap: var(--e-2); align-items: center; justify-content: flex-end; margin-top: var(--e-3); }
.paginas .t2 { margin-right: auto; font-size: var(--t-dato); }

/* ------------------------------------------------------------------ cifras */
/* en columna, para que «¿Qué cuenta?» vaya al fondo: en una fila de cifras, todos a la misma altura */
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); padding: var(--e-4) var(--e-5) var(--e-4); box-shadow: var(--sombra-1); display: flex; flex-direction: column; gap: var(--e-0); }
.cifra .valor { font-size: var(--t-cifra); line-height: var(--l-cifra); font-weight: var(--peso-fuerte); letter-spacing: -.02em; }
/* el número que lleva a su lista: 44 × 44 para el dedo, aunque sea un «1», sin mover nada de sitio */
.cifra .valor a { color: inherit; text-decoration: none; display: inline-block; min-width: 44px; position: relative; }
.cifra .valor a::after { content: ""; position: absolute; inset: calc(50% - 22px) 0; }
.cifra .valor a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.cifra .valor--ok { color: var(--ok); }
.cifra .valor--error { color: var(--error); }
.cifra .valor--vacio { color: var(--texto-2); }
.cifra .nombre { font-weight: var(--peso-fuerte); display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: var(--e-1); }
.cifra .periodo { color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); }
.cifra .salvedad { color: var(--aviso); font-weight: var(--peso-fuerte); font-size: var(--t-dato); line-height: var(--l-dato); margin-top: var(--e-1); }
.cifra .razon { color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); margin-top: var(--e-1); }
/* «¿Qué cuenta?» abierto: la cifra ocupa la fila, y la definición se lee en columna */
.cifra .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
.cifra .kv dd + dt { margin-top: var(--e-2); }
.cifra details { font-size: var(--t-dato); line-height: var(--l-dato); margin-top: auto; padding-top: var(--e-2); }
.cifra details .kv { margin-top: var(--e-3); }
.cifra details summary { width: fit-content; }
@container app (max-width: 639px) {
  .rejilla-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .cifra { padding: var(--e-3) var(--e-4); }
  .cifra .valor { font-size: var(--t-titulo-l); line-height: var(--l-titulo-l); }
}
@container app (max-width: 359px) { .rejilla-cifras { grid-template-columns: minmax(0, 1fr); } } /* a 320 px, dos columnas parten las cifras */

/* ------------------------------------------------------------------ auditoría (T14) */
.motivo-apunte { overflow-wrap: anywhere; } /* «hecha_sin_anotar:albaran_de_otra_orden:pedido_2» parte */
/* el antes y el después, campo a campo; lo que cambió, con el después en negrita */
table.cambios { width: auto; margin-top: var(--e-1); }
table.cambios th, table.cambios td { padding: var(--e-1) var(--e-3) var(--e-1) 0; overflow-wrap: break-word; }
table.cambios th { position: static; background: none; }
table.cambios tbody th { font-weight: normal; color: var(--texto-2); font-variant-caps: normal; letter-spacing: 0; }
table.cambios tr.cambia td:last-child { font-weight: var(--peso-fuerte); }
table.cambios tbody td, table.cambios tbody th { background: none; border-bottom: 1px solid var(--borde); } /* ni lo de la fila de fuera */
table.cambios tbody tr:last-child td, table.cambios tbody tr:last-child th { border-bottom: 0; }
@container app (max-width: 639px) {
  table.tarjetas table.cambios tr { padding: var(--e-1) 0; }
  table.tarjetas table.cambios tbody th { display: block; padding: 0; }
  table.tarjetas table.cambios td::before { min-width: 64px; }
}

/* ------------------------------------------------------------------ gráficos (06 §4, Gráfico; 04 §7)
   Los pinta el servidor en SVG, sin JavaScript. De izquierda a derecha, en %; de arriba abajo, en px: se estiran con
   su tarjeta sin deformar el texto, los puntos ni las puntas. El color va en clases: la serie, en tinta (texto-2);
   los estados, en sus chips, nunca en las marcas. Sin animación: llega dibujado. */
.rejilla-graficos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; }
@container app (min-width: 1024px) { .rejilla-graficos > .grafico--ancho { grid-column: 1 / -1; } }
.grafico { margin: 0; min-width: 0; display: grid; gap: var(--e-2); align-content: start; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); padding: var(--e-4) var(--e-5); }
.grafico-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); }
.grafico-cab h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.grafico-cab .tramo { color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); }
.grafico-cifra { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--e-3); }
.grafico-cifra .valor { font-size: var(--t-titulo-l); line-height: var(--l-titulo-l); font-weight: var(--peso-fuerte); letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; }
.grafico-cifra .valor--vacio { color: var(--texto-2); }
.grafico-compara, .grafico .razon { color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); }
.grafico .salvedad { color: var(--aviso); font-weight: var(--peso-fuerte); font-size: var(--t-dato); line-height: var(--l-dato); }
/* El lienzo de las columnas y la línea. A su izquierda, fuera del SVG, el sitio de las marcas del eje. */
.grafico-lienzo { display: block; width: calc(100% - var(--e-6) - var(--e-3)); margin: var(--e-2) 0 0 calc(var(--e-6) + var(--e-3)); overflow: visible; }
.grafico-lienzo svg { overflow: visible; }
.grafico-lienzo text { font-family: var(--familia); font-size: var(--t-meta); fill: var(--texto-2); font-variant-numeric: tabular-nums lining-nums; }
/* «sin datos», sobre el rayado de su banda: con un halo liso de superficie-2 detrás, para que su par sea texto-2 sobre
   superficie-2, ya medido (revisión de diseño del #141). */
.grafico-lienzo text.sin-datos { paint-order: stroke; stroke: var(--superficie-2); stroke-width: 6px; stroke-linejoin: round; }
.grafico-lienzo .etiqueta--hoy { fill: var(--texto); font-weight: var(--peso-fuerte); }
.grafico-lienzo .rejilla-linea { stroke: var(--borde); stroke-width: 1; }
.grafico-lienzo .eje { stroke: var(--borde-fuerte); stroke-width: 1; }
.grafico-lienzo .serie { fill: var(--texto-2); transition: fill var(--mov-rapido); }
.grafico-lienzo .en-curso { stroke: var(--texto-2); stroke-width: 1; }
.grafico-lienzo .trama { stroke: var(--texto-2); stroke-width: 2; }
.grafico-lienzo .trama-fondo { fill: var(--superficie); }
.grafico-lienzo .trama-vacia { stroke: var(--borde); stroke-width: 1; }
.grafico-lienzo .trama-vacia-fondo { fill: var(--superficie-2); }
.grafico-lienzo .marca-salvedad { fill: var(--aviso); }
.grafico-lienzo .linea { stroke: var(--texto-2); stroke-width: 2; stroke-linecap: round; }
.grafico-lienzo .linea--en-curso { stroke: var(--borde-fuerte); }
.grafico-lienzo .punto { fill: var(--texto-2); stroke: var(--superficie); stroke-width: 2; }
.grafico-lienzo .punto--en-curso { fill: var(--superficie); stroke: var(--texto-2); }
/* Al pasar por encima, el tramo entero responde, y su <title> dice el valor; la tabla lo dice siempre. */
.grafico-lienzo .hit { fill: transparent; }
.grafico-lienzo .tramo:hover .hit { fill: var(--superficie-2); }
.grafico-lienzo .tramo:hover .serie { fill: var(--texto); }
@container app (max-width: 479px) { .grafico-lienzo .etiqueta--opcional { display: none; } }
/* Un reparto: la etiqueta y su número encima, la barra debajo. La lista es sus datos. */
.grafico-barras { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.grafico-barras li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-3); align-items: center; font-size: var(--t-dato); line-height: var(--l-dato); }
.grafico-barras .cuanto { font-weight: var(--peso-fuerte); font-variant-numeric: tabular-nums lining-nums; }
.grafico-barras svg { grid-column: 1 / -1; display: block; width: 100%; height: 8px; }
.grafico-barras .pista { fill: var(--superficie-2); }
.grafico-barras .serie { fill: var(--texto-2); }
/* Las partes de un todo: una barra con 2 o 3 partes, separadas por 2 px de papel, y su leyenda con los números. Se
   distinguen por la forma: llena oscura, llena media y hueca. Cada parte va en su <svg>, que recorta lo que se sale:
   la hueca dibuja un trazo de 3 px y se ve la mitad de dentro (1,5 px, a 3:1 o más). */
.grafico-partes { display: block; width: 100%; height: 16px; margin-top: var(--e-2); overflow: hidden; }
.grafico-partes .parte-1 { fill: var(--texto-2); }
.grafico-partes .parte-2 { fill: var(--borde-fuerte); }
.grafico-partes .parte-3 { fill: var(--superficie); stroke: var(--borde-fuerte); stroke-width: 3; }
/* El anillo: una parte de un total fijo, con el número en el centro. */
.grafico-anillo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-4); align-items: center; margin-top: var(--e-2); }
.grafico-anillo svg { display: block; width: 96px; height: 96px; }
.grafico-anillo .pista { fill: none; stroke: var(--superficie-2); stroke-width: 12; }
.grafico-anillo .serie { fill: none; stroke: var(--texto-2); stroke-width: 12; stroke-linecap: round; }
.grafico-anillo text { font-family: var(--familia); font-size: var(--t-titulo-s); font-weight: var(--peso-fuerte); fill: var(--texto); font-variant-numeric: tabular-nums lining-nums; }
.grafico-anillo p { font-size: var(--t-dato); line-height: var(--l-dato); }
/* La leyenda, solo con lo que sale: la muestra al lado del texto, nunca el texto en color. */
.grafico-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); }
.grafico-leyenda li { display: inline-flex; align-items: center; gap: var(--e-1); }
.grafico-leyenda b { color: var(--texto); font-variant-numeric: tabular-nums lining-nums; }
.grafico-leyenda .muestra { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.grafico-leyenda .muestra--1 { background: var(--texto-2); }
.grafico-leyenda .muestra--2 { background: var(--borde-fuerte); }
.grafico-leyenda .muestra--3 { background: var(--superficie); border: 1.5px solid var(--borde-fuerte); }
.grafico-leyenda .muestra--en-curso { border: 1px solid var(--texto-2); background: repeating-linear-gradient(45deg, var(--texto-2) 0 2px, var(--superficie) 2px 5px); }
.grafico-leyenda .muestra--sin-datos { background: repeating-linear-gradient(45deg, var(--borde) 0 1px, var(--superficie-2) 1px 6px); }
.grafico-leyenda .muestra--salvedad { width: 0; height: 0; border-radius: 0; border: solid transparent; border-width: 0 6px 10px; border-bottom-color: var(--aviso); }
.grafico-leyenda .muestra--punto { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--texto-2); background: var(--superficie); }
/* Abajo, «¿Qué cuenta?» y «Ver los datos»; el que se abre ocupa la fila. */
.grafico-pie { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font-size: var(--t-dato); line-height: var(--l-dato); margin-top: var(--e-1); }
.grafico-pie details[open] { flex-basis: 100%; order: 1; }
.grafico-pie .kv { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--e-3); }
.grafico-pie .kv dd + dt { margin-top: var(--e-2); }
.grafico-pie .tabla-caja { margin-top: var(--e-2); box-shadow: none; }
@container app (max-width: 639px) {
  .grafico { padding: var(--e-3) var(--e-4); }
  .grafico-cifra .valor { font-size: var(--t-titulo-m); line-height: var(--l-titulo-m); }
  /* «¿Qué cuenta?» y «Ver los datos», uno debajo del otro y con aire entre los dos: cada uno se pulsa en sus 44
     de alto (los de todo `summary`), abierto o cerrado, sin que el del otro lo tape (revisión de diseño del #141). */
  .grafico-pie { flex-direction: column; gap: var(--e-3); }
  .grafico-pie details[open] { flex-basis: auto; }
}
/* Alto contraste: las marcas, del color del texto; las tramas y la pista, del gris del sistema. */
@media (forced-colors: active) {
  .grafico-lienzo .serie, .grafico-lienzo .punto, .grafico-barras .serie, .grafico-partes .parte-1 { fill: CanvasText; }
  .grafico-lienzo .linea, .grafico-lienzo .trama, .grafico-lienzo .en-curso, .grafico-anillo .serie { stroke: CanvasText; }
  .grafico-lienzo .trama-vacia, .grafico-anillo .pista { stroke: GrayText; }
  .grafico-barras .pista, .grafico-partes .parte-2 { fill: GrayText; }
  .grafico-partes .parte-3 { fill: Canvas; stroke: CanvasText; }
}

/* ------------------------------------------------------------------ historia, secciones plegables */
.historia { list-style: none; margin: 0; padding: 0; }
.historia li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); font-size: var(--t-dato); line-height: var(--l-dato); }
.historia li:last-child { border-bottom: 0; }
.historia .hora { color: var(--texto-2); }
.historia code { display: block; } /* su propia línea en la columna: al partir, sin sangría */
details.seccion > summary { list-style: none; display: flex; align-items: center; gap: var(--e-2); color: var(--texto); min-height: 28px; }
details.seccion > summary::-webkit-details-marker { display: none; }
details.seccion > summary h2 { margin: 0; font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); display: flex; align-items: center; gap: var(--e-2); }
details.seccion[open] > summary { margin-bottom: var(--e-3); }
@container app (max-width: 1023px) {
  details.seccion > summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); transition: transform var(--mov-normal) var(--curva); }
  details.seccion[open] > summary::after { transform: rotate(-135deg); }
  details.seccion > summary { min-height: 44px; }
  .tarjeta.seccion { padding: var(--e-3) var(--e-4); }
}

/* ------------------------------------------------------------------ los estados de una vista: cargando, vacío, error, sin conexión */
.esqueleto { display: grid; gap: var(--e-4); }
.esqueleto .hueso { background: var(--superficie-2); border-radius: var(--r-control); animation: late 1.4s ease-in-out infinite; }
.esqueleto .hueso--titulo { height: 32px; width: 40%; }
.esqueleto .hueso--linea { height: 16px; width: 70%; }
.esqueleto .hueso--tarjeta { height: 128px; border-radius: var(--r-tarjeta); }
.vacio { display: grid; justify-items: start; gap: var(--e-2); padding: var(--e-5); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--r-tarjeta); }
.vacio + .vacio, .vacio + .esqueleto, .esqueleto + .vacio, .dos + .vacio { margin-top: var(--e-4); } /* sin depender de la página */
.vacio > .icono { width: var(--icono-l); height: var(--icono-l); color: var(--ok); }
.vacio--neutro > .icono { color: var(--texto-2); }
.vacio h2, .vacio h3 { margin: 0; font-size: var(--t-titulo-s); line-height: var(--l-titulo-s); }
.vacio p { color: var(--texto-2); }
.estado-pagina { max-width: 560px; display: grid; gap: var(--e-3); justify-items: start; padding: var(--e-6) 0; }
.estado-pagina > .icono { width: var(--icono-xl); height: var(--icono-xl); color: var(--error); }
.estado-pagina--sin-red > .icono { color: var(--neutro); }
.estado-pagina h1 { font-size: var(--t-titulo-l); line-height: var(--l-titulo-l); }
.estado-pagina p { color: var(--texto-2); }

/* Lo que acaba de cambiar se ilumina un momento; con movimiento reducido, se marca sin animar y se quita solo. */
.recien { animation: recien 2.4s var(--curva); }
@media (prefers-reduced-motion: reduce) {
  .recien { animation: none; box-shadow: 0 0 0 2px var(--acento); }
  .esqueleto .hueso, .boton[aria-busy="true"]::after { animation: none; }
}
@keyframes recien { 0%, 25% { box-shadow: 0 0 0 3px var(--acento); background-color: var(--acento-suave); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes late { 50% { opacity: .55; } }
@keyframes ocupado { 0%, 100% { transform: scaleX(.4); opacity: .5; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes sube { from { opacity: 0; transform: translateY(24px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes despliega { from { opacity: 0; transform: translateY(-4px); } }

/* ------------------------------------------------------------------ diálogos */
dialog { border: 1px solid var(--borde); border-radius: var(--r-tarjeta); background: var(--superficie); color: var(--texto); padding: var(--e-5); max-width: min(480px, calc(100vw - var(--e-6))); box-shadow: var(--sombra-2); }
dialog[open] { animation: aparece var(--mov-normal) var(--curva); }
dialog::backdrop { background: rgb(13 12 10 / .55); }
dialog h2 { margin: 0 0 var(--e-2); font-size: var(--t-titulo-m); line-height: var(--l-titulo-m); }
dialog p { margin-bottom: var(--e-5); color: var(--texto-2); }
dialog .acciones { justify-content: flex-end; }
dialog .campo { margin-bottom: var(--e-4); }
@media (max-width: 639px) {
  dialog { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 85vh; border-width: 1px 0 0; border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
    padding-inline: var(--e-4); }
  dialog > form { padding-bottom: env(safe-area-inset-bottom); } /* sobre la barra del sistema del teléfono */
  dialog[open] { animation: sube var(--mov-normal) var(--curva); }
  dialog .acciones { flex-direction: column; align-items: stretch; }
  dialog .acciones .boton { width: 100%; }
}

/* ------------------------------------------------------------------ piezas sueltas */
pre.resumen { white-space: pre-wrap; font-family: var(--mono); font-size: var(--t-dato); line-height: var(--l-dato); background: var(--superficie-2); border-radius: var(--r-control); padding: var(--e-4); margin: var(--e-3) 0 0; }
.lista-mas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.lista-mas a, .lista-mas button { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); min-height: 56px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); color: var(--texto); text-decoration: none; width: 100%; text-align: left; cursor: pointer; font-weight: var(--peso-fuerte); }
.lista-mas .icono { color: var(--texto-2); }
.lista-mas a::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(-45deg); }
.confirmar-bajas { border: 0; margin: 0; display: grid; gap: var(--e-2); background: var(--aviso-suave); color: var(--aviso); padding: var(--e-3); border-radius: var(--r-control); font-weight: var(--peso-fuerte); }
.confirmar-bajas legend { padding: 0; float: left; width: 100%; margin-bottom: var(--e-1); }
.confirmar-bajas .opcion { align-items: flex-start; padding-block: var(--e-2); color: var(--texto); }
.confirmar-bajas input { margin-top: var(--e-0); }
.codigos { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--e-1) var(--e-5); list-style: none; padding: 0; margin: var(--e-3) 0; font-size: var(--t-dato); }

/* ------------------------------------------------------------------ entrar */
.entrar-fondo { min-height: 100vh; display: grid; place-items: start center; background: var(--shell); padding: var(--e-7) var(--e-4); }
.entrar { width: min(420px, 100%); display: grid; gap: var(--e-5); grid-area: auto; } /* no el «principal» de main: centrada */
.entrar .logo svg { width: 168px; margin-inline: auto; }
.entrar .tarjeta { padding: var(--e-5); display: grid; gap: var(--e-4); }
.entrar h1 { font-size: var(--t-titulo-m); line-height: var(--l-titulo-m); }
.entrar .marca-pruebas { justify-self: center; }
.separador { display: flex; align-items: center; gap: var(--e-3); color: var(--texto-2); font-size: var(--t-meta); }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--borde); }

/* ------------------------------------------------------------------ los filtros de una lista (06 §4, 1.8.0; T12b)
   Lo que va encima de la tabla de una lista: las vistas, la fila de los filtros con cuántos hay, los filtros puestos
   y, en el móvil, la hoja. Sin imágenes: la flecha, con dos bordes, como la de desplegable() y la de las secciones.
   «Sin JavaScript» es @media (scripting: none): sin hoja, con «Aplicar». */
.lista-cab { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin-bottom: var(--e-4); }
.lista-cab .fila { display: flex; align-items: center; gap: var(--e-2) var(--e-4); flex-wrap: wrap; }
.lista-cab .sitio { display: contents; }
.lista-cab .cuantos { margin-left: auto; color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); font-variant-numeric: tabular-nums lining-nums; }
.lista-cab .cuantos:focus { outline: none; }
.lista-filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; margin: 0; }

/* Las vistas: una ficha por vista, con su número; la de ahora, en tinta, como un segmento pulsado. */
.vistas ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--e-2); flex-wrap: wrap; }
.vistas a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); color: var(--texto); font-size: var(--t-dato); line-height: var(--l-dato); font-weight: var(--peso-fuerte); text-decoration: none; white-space: nowrap; transition: background-color var(--mov-rapido) var(--curva), border-color var(--mov-rapido), color var(--mov-rapido); }
.vistas a:has(> .numero) { padding-right: var(--e-1); }
.vistas a:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.vistas a:active { transform: scale(.98); }
.vistas a[aria-current="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.vistas .numero { min-width: 26px; height: 26px; padding: 0 var(--e-2); border-radius: 999px; display: inline-grid; place-items: center; background: var(--superficie-2); color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); font-variant-numeric: tabular-nums lining-nums; }
.vistas .numero--error { background: var(--error-suave); color: var(--error); }
.vistas .numero--aviso { background: var(--aviso-suave); color: var(--aviso); }
.vistas a[aria-current="true"] .numero:not(.numero--error, .numero--aviso) { background: var(--fondo); color: var(--texto); }

/* Un filtro: un <details> con su título (lo que tiene puesto) y su panel, en tres partes (el buscador, las opciones,
   que son lo único que se desplaza, y el pie). Con `name`, abrir uno cierra el otro. */
.filtro { position: relative; }
.filtro > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--e-2); min-height: var(--alto-control); padding: 0 var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); background: var(--superficie); color: var(--texto); font-weight: var(--peso-fuerte); cursor: pointer; user-select: none; white-space: nowrap; transition: background-color var(--mov-rapido) var(--curva), border-color var(--mov-rapido); }
.filtro > summary::-webkit-details-marker { display: none; }
.filtro[open] > summary { margin-bottom: 0; }
.filtro > summary:hover { background: var(--superficie-2); }
.filtro > summary:active { transform: scale(.98); }
.filtro > summary::after { content: ""; width: 8px; height: 8px; flex: none; margin: -4px var(--e-0) 0 var(--e-1); border-right: 2px solid var(--texto-2); border-bottom: 2px solid var(--texto-2); transform: rotate(45deg); transition: transform var(--mov-normal) var(--curva); pointer-events: none; }
.filtro[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.filtro:has(.panel :checked:not([value=""])) > summary { background: var(--acento-suave); border-color: var(--acento); }
.filtro .n, .boton--filtros .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--acento); color: var(--acento-texto); font-size: var(--t-meta); line-height: 1; font-variant-numeric: tabular-nums; }
.filtro .n:empty, .boton--filtros .n:empty, .filtro .valor:empty { display: none; }
.filtro .valor { font-weight: var(--peso-normal); }
.filtro .valor::before { content: "· "; color: var(--texto-2); }
.filtro .resumen { display: none; }
.filtro > .panel { position: absolute; top: calc(100% + var(--e-2)); left: 0; z-index: 40; width: 320px; max-width: calc(100cqi - 2 * var(--e-4)); max-height: min(460px, 70vh); display: flex; flex-direction: column; overflow: hidden; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-2); animation: aparece var(--mov-normal) var(--curva); transform-origin: top left; }
.filtro--ancho > .panel { width: 380px; }
.filtro .opciones { overflow: auto; overscroll-behavior: contain; padding: var(--e-2); min-height: 0; }
.filtro fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.filtro fieldset + fieldset { margin-top: var(--e-1); padding-top: var(--e-1); border-top: 1px solid var(--borde); }
.filtro legend { float: left; width: 100%; padding: var(--e-2) var(--e-2) var(--e-1); color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); font-weight: var(--peso-fuerte); font-variant-caps: all-small-caps; letter-spacing: .04em; }
.filtro legend + * { clear: both; }
.filtro .nota { padding: 0 var(--e-2) var(--e-1); color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); }
.filtro .casilla { display: flex; align-items: center; gap: var(--e-3); min-height: 36px; padding: var(--e-1) var(--e-2); border-radius: var(--r-control); cursor: pointer; font-size: var(--t-dato); line-height: var(--l-dato); transition: background-color var(--mov-rapido); }
.filtro .casilla:hover { background: var(--superficie-2); }
.filtro .casilla input { width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }
.filtro .casilla .texto { min-width: 0; }
.filtro .casilla:has(:checked) .texto { font-weight: var(--peso-fuerte); }
.filtro .casilla .cuenta, .filtro .casilla .pista { margin-left: auto; padding-left: var(--e-2); color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.filtro .casilla--cero .texto { color: var(--texto-2); }
.filtro .casilla[hidden], .filtro fieldset[hidden] { display: none; }
.filtro .buscar-opciones { padding: var(--e-2) var(--e-2) 0; }
.filtro .buscar-opciones input, .filtro .entre input { width: 100%; min-width: 0; min-height: 36px; padding: 0 var(--e-3); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); background: var(--superficie); font-size: var(--t-texto); color: var(--texto); }
.filtro .buscar-opciones input::placeholder { color: var(--texto-2); opacity: 1; }
.filtro .buscar-opciones input:focus, .filtro .entre input:focus { outline: none; border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
.filtro .sin-opciones { padding: var(--e-2); color: var(--texto-2); font-size: var(--t-dato); }
.filtro .entre { display: none; grid-template-columns: 1fr 1fr; gap: var(--e-2) var(--e-3); padding: var(--e-1) var(--e-2) var(--e-2); }
.filtro .panel:has(input[value="entre"]:checked) .entre { display: grid; }
.filtro .entre label { display: grid; gap: var(--e-1); font-size: var(--t-dato); font-weight: var(--peso-fuerte); }
.filtro .entre input { padding: 0 var(--e-2); }
.filtro .entre .ayuda { grid-column: 1 / -1; color: var(--texto-2); font-size: var(--t-meta); line-height: var(--l-meta); }
.filtro .pie { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2); border-top: 1px solid var(--borde); }
.filtro .pie .boton { min-height: 36px; }
.filtro .pie .boton--texto + .boton--texto, .filtro .pie .boton--primario { margin-left: auto; }
.filtro .pie:empty { display: none; }

/* Un campo de texto en la fila (en la auditoría, «Cuál»): la etiqueta, visible, dentro de la caja. */
.campo-linea { display: inline-flex; align-items: stretch; min-height: var(--alto-control); border: 1px solid var(--borde-fuerte); border-radius: var(--r-control); background: var(--superficie); transition: border-color var(--mov-rapido), box-shadow var(--mov-rapido); }
.campo-linea > span { display: inline-flex; align-items: center; padding: 0 var(--e-3); font-weight: var(--peso-fuerte); border-right: 1px solid var(--borde); white-space: nowrap; }
/* el campo, tan alto como su caja (sobre su borde, que sigue a la vista): en el móvil, 44 como los demás de la hoja
   (revisión de diseño del #146) */
.campo-linea input { border: 0; background: none; padding: 0 var(--e-3); margin: -1px 0; width: 20ch; min-width: 0; font-size: var(--t-texto); color: var(--texto); border-radius: 0 var(--r-control) var(--r-control) 0; }
.campo-linea input::placeholder { color: var(--texto-2); opacity: 1; }
.campo-linea input:focus { outline: none; }
.campo-linea:focus-within { border-color: var(--foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--foco) 30%, transparent); }
.campo-linea:has(input:not(:placeholder-shown)) { border-color: var(--acento); background: var(--acento-suave); }

/* Los filtros puestos: una ficha por valor, que se quita con un toque, y «Quitar los filtros». */
.puestos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.puestos:empty { display: none; }
.puestos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puestos .puesto { display: inline-flex; align-items: center; gap: var(--e-1); min-height: 32px; max-width: 100%; padding: 0 var(--e-1) 0 var(--e-3); border: 1px solid transparent; border-radius: 999px; background: var(--acento-suave); color: var(--texto); text-decoration: none; font-size: var(--t-dato); line-height: var(--l-dato); font-weight: var(--peso-fuerte); transition: border-color var(--mov-rapido); }
.puestos .puesto > span:first-child { min-width: 0; overflow-wrap: anywhere; padding-block: var(--e-0); }
.puestos .quitar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--texto-2); flex: none; }
.puestos .quitar .icono { width: var(--icono-s); height: var(--icono-s); }
.puestos .puesto:hover { border-color: var(--acento); }
.puestos .puesto:hover .quitar { color: var(--acento); }
.puestos .puesto:active { transform: scale(.98); }
.puestos .puesto:focus-visible { border-radius: 999px; }
.puestos .boton--texto { min-height: 32px; font-size: var(--t-dato); }

/* El botón «Filtros» del móvil y los resultados, que se atenúan mientras llegan (pasados 150 ms). */
.boton--filtros { display: none; }
.resultados { transition: opacity var(--mov-normal) var(--curva); }
.resultados.htmx-request { opacity: .5; transition-delay: 150ms; }
.resultados > .resultado { margin-bottom: var(--e-3); }
/* La fila con el foco del teclado: superficie-2 con una raya de 3 px en el color del foco (no acento-suave, que se
   come el chip «Espera el OK»: revisión de diseño del #127). */
table.tarjetas tbody tr:has(a:focus-visible) > td { background: var(--superficie-2); }
table.tarjetas tbody tr:has(a:focus-visible) > td:first-child { box-shadow: inset 3px 0 0 var(--foco); }

@media (scripting: enabled) {
  .lista-filtros .solo-sin-js, .filtro .solo-sin-js { display: none; }
  .filtro .pie:not(:has(> a)) { display: none; } /* sin nada que quitar, el pie solo traería «Aplicar»: sin raya vacía */
}
@media (scripting: none) {
  .filtro .solo-con-js { display: none; }
}
@container app (max-width: 639px) {
  .vistas { margin-inline: calc(-1 * var(--e-4)); }
  .vistas ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: var(--e-0) var(--e-4); scroll-padding-inline: var(--e-4); scroll-snap-type: x proximity; }
  .vistas ul::-webkit-scrollbar { display: none; }
  .vistas li { scroll-snap-align: start; }
  .vistas a { min-height: 44px; }
  .puestos .puesto { min-height: 44px; padding-left: var(--e-4); gap: var(--e-2); }
  .puestos .boton--texto { min-height: 44px; }
  /* Sin JavaScript, los filtros en la página: cada uno se abre debajo, a lo ancho. */
  .lista-filtros { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .lista-filtros .filtro > summary { width: 100%; min-height: 44px; }
  .lista-filtros .filtro > summary::after { margin-left: auto; }
  .lista-filtros .filtro > .panel { position: static; width: auto; max-width: none; max-height: none; margin-top: var(--e-2); box-shadow: none; }
  .lista-filtros .filtro .opciones { overflow: visible; }
  .filtro .casilla { min-height: 44px; }
  .filtro .entre input, .filtro .buscar-opciones input { min-height: 44px; }
  .campo-linea { width: 100%; }
  .campo-linea input { flex: 1; width: auto; }
  table.tarjetas tbody tr:has(a:focus-visible) { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--foco); }
}
@media (scripting: enabled) {
  @container app (max-width: 639px) {
    .lista-cab .sitio { display: none; }
    .boton--filtros { display: inline-flex; }
  }
}

/* La hoja del móvil: un <dialog> abajo, con el formulario dentro, cada filtro una fila que se abre debajo. */
dialog.hoja { padding: 0; width: min(560px, calc(100vw - var(--e-6))); max-height: 85vh; overflow: hidden; }
dialog.hoja[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.hoja .cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4); border-bottom: 1px solid var(--borde); }
.hoja .cab h2 { margin: 0; }
.hoja .cerrar { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--texto-2); cursor: pointer; }
.hoja .cerrar:hover { background: var(--superficie-2); color: var(--texto); }
.hoja .cuerpo { overflow: auto; overscroll-behavior: contain; padding: 0 var(--e-4); }
.hoja > .pie { display: grid; gap: var(--e-2); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom)); border-top: 1px solid var(--borde); background: var(--superficie); }
.hoja > .pie .boton { width: 100%; min-height: 44px; }
.hoja .lista-filtros { display: grid; gap: 0; }
.hoja .filtro { border-bottom: 1px solid var(--borde); }
.hoja .filtro > summary { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; width: 100%; min-height: 56px; padding: var(--e-2) 0; border: 0; border-radius: 0; background: none; font-size: var(--t-texto); white-space: normal; }
.hoja .filtro > summary:hover, .hoja .filtro:has(.panel :checked:not([value=""])) > summary { background: none; }
.hoja details.filtro > summary::after { grid-column: 4; margin-right: var(--e-2); }
.hoja .filtro .resumen { display: block; grid-column: 3; min-width: 0; color: var(--texto-2); font-weight: var(--peso-normal); font-size: var(--t-dato); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: var(--e-2); }
.hoja .filtro .valor { display: none; }
.hoja .filtro > .panel { position: static; width: auto; max-width: none; max-height: none; overflow: visible; border: 0; border-radius: 0; box-shadow: none; padding: 0 0 var(--e-3); animation: despliega var(--mov-normal) var(--curva); }
.hoja .filtro .opciones { overflow: visible; padding: 0; }
.hoja .filtro .buscar-opciones { padding: 0 0 var(--e-2); }
.hoja .filtro .pie { display: none; } /* en la hoja, «Quitar los filtros» va abajo, una vez */
.hoja .filtro .casilla { min-height: 44px; font-size: var(--t-texto); line-height: var(--l-texto); }
.hoja .campo-linea { width: 100%; margin: var(--e-3) 0; }
.hoja .campo-linea input { flex: 1; width: auto; }
@media (max-width: 639px) {
  dialog.hoja { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88vh; border-width: 1px 0 0; border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0; padding: 0; }
  dialog.hoja[open] { animation: sube var(--mov-normal) var(--curva); }
}

/* ------------------------------------------------------------------ los atajos de teclado (06 §4, 1.8.0; T12b) */
.tecla { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: calc(var(--r-control) - 2px); background: var(--superficie); color: var(--texto); font: var(--peso-fuerte) var(--t-meta)/1 var(--familia); font-variant-numeric: tabular-nums; }
/* La tecla del buscador (el de arriba): dentro de la caja, a la derecha y en medio, absoluta (no ocupa sitio en la
   fila); no con el foco ni con algo escrito. La ayuda, en el menú de quién eres; sin teclado (táctil) o sin
   JavaScript, ni la una ni la otra. */
.buscar .tecla { position: absolute; top: 50%; right: var(--e-2); transform: translateY(-50%); pointer-events: none; color: var(--texto-2); }
.buscar:has(.tecla) input { padding-right: calc(var(--e-2) + 22px + var(--e-2)); }
.buscar:focus-within .tecla, .buscar:has(input:not(:placeholder-shown)) .tecla, :root[data-atajos="no"] .buscar .tecla { display: none; }
@media (hover: none), (scripting: none) { .buscar .tecla, .menu-quien .solo-teclado { display: none; } }
dialog.atajos { width: min(520px, calc(100vw - var(--e-6))); }
.atajos dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-4); margin: var(--e-4) 0 var(--e-5); align-items: center; }
.atajos dd { margin: 0; color: var(--texto); }
.atajos .opcion { margin-bottom: var(--e-2); }
.atajos .ayuda { color: var(--texto-2); font-size: var(--t-dato); line-height: var(--l-dato); margin-bottom: var(--e-5); }