/* Panel (§11) y páginas públicas: una app del celular primero. Pestañas abajo (en el escritorio, un riel a la
   izquierda), tarjetas de papel con bordes de hilo, chips de estado, botones píldora y títulos en la fuente de los
   títulos. Cada botón se toca con el dedo (44 px o más), cada campo va en 16 px (iOS no acerca la página al tocarlo) y
   la página nunca hace scroll de lado.

   La identidad es del cliente: colores, fuentes y muestras de color son variables con valores neutros aquí, y
   `clientes/<cliente>/tema/tema.css` (servida en /panel/tema/tema.css, después de esta hoja) las cambia. Un estado
   lleva siempre su texto: el color solo lo acompaña. Contraste AA en todo texto (tests/test_panel_tema.py). */

:root {
  color-scheme: light;
  /* Superficies y tinta */
  --fondo: #f4f3f1;
  --grano: none;                 /* textura del fondo: una imagen (el tema pone la suya) */
  --papel: #ffffff;              /* tarjetas */
  --borde: #e2dfda;              /* el hilo de las tarjetas */
  --borde-fuerte: #8f8a84;       /* el borde de un campo: 3:1 o más sobre el papel */
  --tinta: #1f1d1b;
  --tinta-suave: #5d5852;        /* texto secundario: AA sobre el fondo, el papel y la burbuja */
  --enlace: #1f4f8a;
  --enlace-hover: #163a66;
  /* Acentos */
  --filete: #c8c3bc;             /* filetes y detalles decorativos: nunca texto */
  --primario: #2b2926;           /* el botón principal y lo activo */
  --primario-hover: #000000;
  --primario-tinta: #ffffff;
  --foco: #1f4f8a;
  --burbuja: #eceae6;            /* los mensajes de la agente */
  --realce: #e7e4df;             /* la pastilla de la pestaña activa y los avatares */
  --realce-tinta: #2b2926;
  --cabecera: #2b2926;           /* la cabecera de Hoy, la portada de Entrar y la banda de las páginas públicas */
  --cabecera-tinta: #f4f3f1;
  --celda: #f1efec;              /* una celda de la malla de existencias */
  --contorno: #c8c3bc;           /* el contorno de un botón secundario (su texto lo identifica) */
  --asa: #d6d2cc;                /* el asa de una hoja que sube */
  --punto: #d0605a;              /* el punto de la campana */
  --nota: #5f4f2c;               /* las notas internas del chat */
  --nota-fondo: #f3efe4;
  --nota-borde: #c8b98f;
  /* Estados: texto sobre su fondo, AA */
  --ok: #2e6338;
  --ok-fondo: #e3f0e5;
  --aviso: #7a5000;
  --aviso-fondo: #fbefd2;
  --alerta: #a1281f;
  --alerta-fondo: #fbe2df;
  --info: #2b5677;
  --info-fondo: #e2ecf4;
  --neutro: #4d4843;
  --neutro-fondo: #ebe8e3;
  /* Tipografía y forma */
  --fuente-titulos: Georgia, "Times New Roman", serif;
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Montos, conteos, códigos y fechas: una fuente cuyo «1» no se confunda con «l» ni con «I» (en una Bodoni o en
     Georgia se confunden). La de los títulos queda para los títulos de palabras (tests/test_panel_tema.py); las
     cifras grandes de un vistazo (las dos de Hoy y la de la hoja de una variante) pueden ir en otra. */
  --fuente-cifras: var(--fuente-texto);
  --fuente-cifras-grandes: var(--fuente-cifras);
  --estilo-marca: normal;
  --radio: 14px;                 /* campos */
  --radio-tarjeta: 22px;
  --radio-boton: 999px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.04);
  --sombra-cifra: 0 14px 30px -18px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(0 0 0 / 0.05);
  --sombra-hoja: 0 -20px 40px -20px rgb(0 0 0 / 0.35);
  --ancho: 46rem;
  --riel: 15.5rem;
  --pestanas: 4.25rem;           /* el alto de la barra de pestañas, sin la zona del gesto de inicio */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- Base ------------------------------------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background-color: var(--fondo);
  background-image: var(--grano);
  /* El control enfocado nunca queda debajo de la barra de pestañas fija (WCAG 2.4.11): al llegarle con Tab, la página
     se corre hasta que quede arriba de ella. En el chat, la cabecera y la caja de escribir (sticky) hacen lo mismo. */
  scroll-padding-bottom: calc(var(--pestanas) + env(safe-area-inset-bottom) + 0.75rem);
}
html:has(.pagina-chat) { scroll-padding-top: calc(env(safe-area-inset-top) + 5rem); scroll-padding-bottom: 8.5rem; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--tinta);
  background-color: var(--fondo);
  overflow-wrap: break-word;
  overflow-x: clip;              /* la página nunca hace scroll de lado (`clip` no rompe lo `sticky`) */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
b, strong { font-weight: 600; }
small { font-size: 0.8125rem; color: var(--tinta-suave); }
ul, ol { margin: 0; padding: 0; }
svg.icono { width: 1.375rem; height: 1.375rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6;
            stroke-linecap: round; stroke-linejoin: round; }

/* Títulos de página: la fuente de los títulos, grande. */
h1 {
  font-family: var(--fuente-titulos);
  font-size: 2.25rem;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: normal;         /* un título no se parte a mitad de palabra («Pedid/os») */
}

/* Rótulos de sección: mayúsculas con espaciado ancho, en gris. */
h2, h3, legend, .rotulo {
  font-family: var(--fuente-texto);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--enlace-hover); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Lo que se lee con el lector de pantalla y no se ve. */
.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Cifras: números tabulares donde se comparan o se suman. */
td, dd, .cantidad, .ventana, .sin-partir, .totales, .codigo, .total, .chip, .fecha-estimada, .celda, .n, .h {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Un código (de pedido) en la fuente de las cifras, espaciado como una etiqueta. */
.codigo {
  font-family: var(--fuente-cifras);
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
:is(h1, h2) .codigo { font-size: 0.55em; font-weight: 500; letter-spacing: 0.1em; vertical-align: 0.15em; }

/* El nombre de la marca: en la fuente de los títulos, en el estilo de la marca (`--estilo-marca`, que el tema pone). */
.logotipo {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-style: var(--estilo-marca);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
}

.lema {
  font-size: 0.59375rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-wrap: balance;            /* si no cabe en una línea, dos parejas y no una palabra sola abajo */
}

/* El filete de la marca: dos líneas finas y un rombo en el medio. */
.filete {
  position: relative;
  display: block;
  width: 7rem;
  height: 0.5625rem;
  background:
    linear-gradient(var(--filete), var(--filete)) left center / 42% 1px no-repeat,
    linear-gradient(var(--filete), var(--filete)) right center / 42% 1px no-repeat;
}
.filete::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--filete);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* --- Columna, tarjetas y estados vacíos ---------------------------------------------------------------------- */

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 max(1rem, env(safe-area-inset-right)) calc(var(--pestanas) + env(safe-area-inset-bottom) + 2rem)
           max(1rem, env(safe-area-inset-left));
}
:where(main > [id]) { display: flex; flex-direction: column; gap: 1rem; }

.tarjeta, :where(.ficha > section, .pedido-lote, .condicion, .fecha-estimada, fieldset, #llego, #no-cuadran,
                 .medicion > form.formulario) {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  min-width: 0;
  margin: 0;
  padding: 1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra);
}

/* Un aviso vacío (`role="status"` sin nada adentro) no ocupa lugar. */
[role="status"] { display: flex; flex-direction: column; gap: 0.5rem; }
[role="status"]:not(:has(*)) { display: none; }

.ayuda { font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); }

/* Un estado vacío: el ícono en su círculo y lo que pasa cuando llegue algo. */
.vacio {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1px dashed var(--borde);
  border-radius: 1.25rem;
}
.vacio .icono {
  box-sizing: content-box;
  padding: 0.625rem;
  color: var(--realce-tinta);
  background: var(--realce);
  border-radius: 50%;
}
.vacio.grande { flex-direction: column; justify-content: center; gap: 0.75rem; min-height: 14rem; padding: 2rem 1.5rem;
                text-align: center; font-size: 0.9375rem; }
.vacio.grande .icono { width: 1.75rem; height: 1.75rem; padding: 0.875rem; }

/* --- Cabeceras de página ------------------------------------------------------------------------------------------ */

/* Las pantallas claras: la marca chica y el título grande. */
.cab-pagina { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 0 0.25rem; }
.marca-pagina { font-size: 1.25rem; color: var(--primario); }
.cab-pagina h1 { margin-top: 0.625rem; }
.cab-pagina .sub, .cab-pagina .fecha { font-size: 0.8125rem; font-weight: 500; color: var(--tinta-suave); }
.cab-pagina .fecha::first-letter { text-transform: uppercase; }
.cab-pagina.con-accion { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 0.75rem; }
.cab-pagina.con-accion > * { grid-column: 1 / -1; }
.cab-pagina.con-accion h1 { grid-column: 1; }
.cab-pagina.con-accion > .boton { grid-column: 2; grid-row: 2; align-self: end; }
/* En un teléfono angosto (320 px: iPhone SE o con «Zoom de pantalla») el botón baja debajo del título. */
@media (max-width: 22.5rem) {
  .cab-pagina.con-accion > .boton { grid-column: 1 / -1; grid-row: auto; justify-self: start; margin-top: 0.5rem; }
}

.volver {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.125rem;
  min-height: 44px;
  margin: 0.5rem 0 -0.75rem -0.5rem;
  padding: 0 0.75rem 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--enlace);
  text-decoration: none;
}
.volver .icono { width: 1.25rem; height: 1.25rem; stroke-width: 2; }
.volver + .cab-pagina { padding-top: 0.5rem; }

/* --- Pestañas: abajo en el teléfono, riel a la izquierda en el escritorio -------------------------------------- */

.pestanas {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0.5rem max(0.375rem, env(safe-area-inset-right)) max(0.625rem, env(safe-area-inset-bottom))
           max(0.375rem, env(safe-area-inset-left));
  background: var(--papel);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--borde);
}
/* Translúcida donde el navegador sabe mezclar colores (iOS 16.2+). Va en @supports y no como segunda declaración:
   una declaración con var() que el navegador no entiende no cae a la anterior, queda sin valor (transparente). */
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .pestanas { background: color-mix(in srgb, var(--papel) 94%, transparent); }
}
.pestanas > a:not(.riel-marca), .pestana-mas {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 4.125rem;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1;
  color: var(--tinta-suave);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0.75rem;
  box-shadow: none;
  cursor: pointer;
}
.pestana-mas:hover { color: var(--primario); box-shadow: none; }
.pestanas i, .hoja-mas i {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 1.875rem;
  border-radius: 0.9375rem;
  transition: background-color 0.2s ease;
}
.pestanas > a[aria-current="page"], .pestanas:has(.riel-otras a[aria-current="page"]) .pestana-mas { color: var(--primario); font-weight: 600; }
.pestanas > a[aria-current="page"] i, .pestanas:has(.riel-otras a[aria-current="page"]) .pestana-mas i { background: var(--realce); }
.pestanas > a:focus-visible, .pestana-mas:focus-visible { outline-offset: 0; }
.riel-marca, .riel-otras { display: none; }

/* «Más»: una hoja que sube con el resto de las secciones y «Salir». */
.hoja-mas {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 32rem;
  max-height: 85vh;
  margin: 0 auto;
  padding: 0.625rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--tinta);
  background: var(--papel);
  border: 0;
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: var(--sombra-hoja);
}
.hoja-mas::backdrop { background: rgb(43 29 31 / 0.32); }
.hoja-mas:focus { outline: none; }
.asa { display: block; width: 2.375rem; height: 0.3125rem; margin: 0 auto 0.875rem; background: var(--asa); border-radius: 3px; }
.hoja-mas .rotulo { margin: 0 0.5rem 0.5rem; }
.hoja-mas ul { list-style: none; }
.hoja-mas a, .hoja-mas .salir button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.875rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tinta);
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 1rem;
  box-shadow: none;
  cursor: pointer;
}
.hoja-mas i { color: var(--primario); background: var(--realce); }
.hoja-mas a[aria-current="page"] { color: var(--primario); font-weight: 600; background: var(--realce); }
.hoja-mas a[aria-current="page"] i { background: var(--papel); }
.hoja-mas a::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.5rem 0 auto;
  border-top: 1.5px solid var(--tinta-suave);
  border-right: 1.5px solid var(--tinta-suave);
  transform: rotate(45deg);
}
.hoja-mas .salir { margin: 0.5rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--borde); }
.hoja-mas .salir button, .hoja-mas .salir button i { color: var(--alerta); }
.hoja-mas .salir button i { background: var(--alerta-fondo); }
.cerrar-mas { width: 100%; margin-top: 0.5rem; }

/* --- Formularios -------------------------------------------------------------------------------------------------- */

button, input, select, textarea { font: inherit; font-size: 16px; }

label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.625rem 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--tinta);
  background-color: var(--papel);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus { border-color: var(--foco); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 1px; }
/* Un ejemplo, no un valor: más claro que el texto escrito, y AA sobre el papel (4,8:1 o más). */
input::placeholder, textarea::placeholder { color: var(--tinta-suave); opacity: 0.92; }
textarea { min-height: 6.5rem; resize: vertical; }
select {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6862' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.9rem center;
  background-size: 0.75rem 0.5rem;
  background-repeat: no-repeat;
}
input[type="date"] { display: block; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; }
input[type="file"] { padding: 0.5rem; font-size: 16px; }
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  padding: 0.5rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--primario);
  background: var(--realce);
  border: 0;
  border-radius: var(--radio-boton);
  cursor: pointer;
}

input[type="checkbox"] {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--papel) center / 0.95rem no-repeat;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 0.4375rem;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background-color: var(--primario);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  border-color: var(--primario);
}
label.casilla {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--tinta);
  cursor: pointer;
}
/* Una casilla sin texto al lado (Pagos): el toque es de 44 px aunque se vea más chica. */
label.casilla-sola { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
label.casilla-sola input { width: 1.75rem; height: 1.75rem; }

fieldset { gap: 0.875rem; }
legend { float: left; width: 100%; padding: 0; margin-bottom: 0.25rem; }
legend + * { clear: both; }

form.entrar, .formulario { display: flex; flex-direction: column; gap: 0.875rem; margin: 0; }
.filtros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 0.625rem; margin: 0; }
.filtros button { grid-column: 1 / -1; }
/* Dos listas y el botón en un renglón (Pedidos). */
.filtros.en-linea { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.filtros.en-linea button { grid-column: auto; min-height: 48px; padding-inline: 1rem; }

/* --- Botones: píldoras, la principal en el color de la marca y las demás con contorno -------------------------- */

button, .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-radius: var(--radio-boton);
  box-shadow: inset 0 0 0 1.5px var(--contorno);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
button:hover, .boton:hover { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--borde-fuerte); }
button:active, .boton:active { transform: scale(0.97); }
a.boton { align-self: flex-start; }
.boton .icono, button .icono { width: 1.25rem; height: 1.25rem; }
.principal, a.principal {
  min-height: 48px;
  color: var(--primario-tinta);
  background: var(--primario);
  box-shadow: none;
}
.principal:hover, a.principal:hover { color: var(--primario-tinta); background: var(--primario-hover); box-shadow: none; }
.formulario > .principal, form.entrar > .principal { align-self: stretch; }
.peligro { color: var(--alerta); box-shadow: inset 0 0 0 1.5px currentColor; }
.peligro:hover { color: var(--alerta); background: var(--alerta-fondo); box-shadow: inset 0 0 0 1.5px currentColor; }
.chico { min-height: 44px; padding: 0.25rem 0.875rem; font-size: 0.8125rem; }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
/* Mientras htmx espera la respuesta, el botón se ve ocupado (el `hx-sync` ya descarta el segundo toque). */
.htmx-request button[type="submit"], button.htmx-request { opacity: 0.6; cursor: progress; }

/* --- Avisos, chips y muestras ------------------------------------------------------------------------------------ */

.mensaje, .error, .banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  border-radius: 1rem;
}
.mensaje { color: var(--ok); background: var(--ok-fondo); }
.error { color: var(--alerta); background: var(--alerta-fondo); }
.mensaje::before, .error::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-top: 0.45em;
  border-radius: 50%;
  background: currentColor;
}
.banner { flex-direction: column; color: var(--aviso); background: var(--aviso-fondo); border: 1px solid color-mix(in srgb, var(--aviso) 35%, transparent); }
.banner form { margin: 0; }

/* Un chip: el texto del estado con su color; `--chip` y `--chip-fondo` los pone el tono o el estado. */
.chip, .marca, .estados .estado, .variante .estado, .empate {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  width: max-content;
  max-width: 100%;
  padding: 0.3125rem 0.625rem;
  font-size: 0.71875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--chip, var(--neutro));
  background: var(--chip-fondo, var(--neutro-fondo));
  border-radius: 999px;
}
.chip[hidden] { display: none; }
.marca, .empate, [data-tono="aviso"] { --chip: var(--aviso); --chip-fondo: var(--aviso-fondo); }
[data-tono="ok"], [data-estado="hay"], [data-estado="entregado"], [data-etiqueta="compro"] {
  --chip: var(--ok);
  --chip-fondo: var(--ok-fondo);
}
[data-estado="pocas"], [data-estado="novedad"], [data-estado="revisar"] {
  --chip: var(--aviso);
  --chip-fondo: var(--aviso-fondo);
}
[data-tono="alerta"], [data-estado="agotado"], [data-estado="cancelado"], [data-estado="devuelto"],
[data-marca="pago_vencido"], [data-marca="sin_existencia"] {
  --chip: var(--alerta);
  --chip-fondo: var(--alerta-fondo);
}
[data-tono="info"], [data-estado="en_camino"], [data-estado="llega_hoy"], [data-estado="en_oficina"],
[data-etiqueta="pedido_abierto"] {
  --chip: var(--info);
  --chip-fondo: var(--info-fondo);
}
[data-tono="marca"], [data-estado="en_lote"], [data-estado="guia_lista"] {
  --chip: var(--realce-tinta);
  --chip-fondo: var(--realce);
}

/* La muestra del color de una prenda: el tema le da su color a `[data-color="<código>"]`; el nombre va al lado. */
.muestra {
  display: inline-block;
  flex: none;
  width: 0.6875rem;
  height: 0.6875rem;
  vertical-align: -0.05em;
  background: var(--muestra, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

/* La foto de una prenda, en su marco: recortada a lo alto de la prenda (la cara queda arriba, fuera del cuadro). La
   imagen es un 11 % más alta que el marco, que corta su pie: ahí los recortes de las grillas pueden traer el resto de
   una etiqueta o de un borde. Sin foto (o con solo la grilla de la referencia), un bloque del color del fondo con la
   muestra del color en el medio, o las de todos sus colores en la ficha de la referencia. */
.foto, .miniatura { position: relative; display: block; flex: none; overflow: hidden; background: var(--celda); }
.foto > img, .miniatura > img, .foto-chat > img {
  display: block;
  width: 100%;
  max-width: none;
  height: 111%;
  object-fit: cover;
  object-position: center 16%;
}
.miniatura { width: 2.875rem; height: 3.5rem; border-radius: 0.75rem; }
.sin-foto { display: grid; place-items: center; }
.sin-foto.muestrario { grid-template-columns: repeat(3, auto); place-content: center; gap: 0.375rem; }
.sin-foto.muestrario::after { content: none; }
.sin-foto.muestrario .muestra { width: 0.875rem; height: 0.875rem; }
.sin-foto::after {
  content: "";
  width: 34%;
  max-width: 1.75rem;
  aspect-ratio: 1;
  background: var(--muestra, var(--borde));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--realce-tinta);
  background: var(--realce);
  border-radius: 50%;
}

/* --- Tablas: tablas en el escritorio, tarjetas en el celular ------------------------------------------------------ */

.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td {
  padding: 0.625rem 0.5rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  border-bottom: 1px solid var(--borde);
}
.tabla thead th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.tabla .sin-partir { white-space: nowrap; }
.tabla a { display: inline-flex; align-items: center; min-height: 44px; }
.tabla td:first-child, .tabla th:first-child { padding-left: 0; }
.tabla td:last-child, .tabla th:last-child { padding-right: 0; }

@media (max-width: 40rem) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; }
  .tabla tbody { display: flex; flex-direction: column; gap: 0.625rem; }
  .tabla tr {
    padding: 0.875rem 1rem;
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 1.25rem;
  }
  .tabla td, .tabla td:first-child, .tabla td:last-child { padding: 0.1875rem 0; border: 0; }
  .tabla td.vacio { display: none; }
  .tabla td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
  }
  /* Dentro de una tarjeta, las filas no son otra tarjeta: van separadas por un hilo. */
  :where(.ficha > section, .pedido-lote) .tabla tbody { gap: 0; }
  :where(.ficha > section, .pedido-lote) .tabla tr {
    padding: 0.625rem 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--borde);
    border-radius: 0;
  }
  :where(.ficha > section, .pedido-lote) .tabla tr:first-child { border-top: 0; padding-top: 0; }
}

/* `.tarjetas`: tarjetas en cualquier ancho, para una tabla cuyas columnas no caben en la columna (Pagos). */
.tabla.tarjetas thead { display: none; }
.tabla.tarjetas, .tabla.tarjetas tbody, .tabla.tarjetas tr, .tabla.tarjetas td { display: block; }
.tabla.tarjetas tbody { display: flex; flex-direction: column; gap: 0.75rem; }
.tabla.tarjetas tr {
  padding: 0.875rem 1rem 1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio-tarjeta);
}
.tabla.tarjetas td, .tabla.tarjetas td:first-child, .tabla.tarjetas td:last-child { padding: 0.1875rem 0; border: 0; }
.tabla.tarjetas td.vacio { display: none; }
.tabla.tarjetas td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.tabla.tarjetas td.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.625rem; }
.tabla.tarjetas td.acciones::before { content: none; }
.tabla.tarjetas td.acciones form { margin: 0; }

/* --- Hoy ------------------------------------------------------------------------------------------------------------ */

.pagina-hoy main { gap: 0; }
.hoy { gap: 0; }
.cab-vino {
  position: relative;
  margin: 0 -1rem;
  padding: calc(env(safe-area-inset-top) + 1.5rem) max(1.5rem, env(safe-area-inset-right)) 4rem
           max(1.5rem, env(safe-area-inset-left));
  color: var(--cabecera-tinta);
  background: var(--cabecera);
  border-radius: 0 0 1.875rem 1.875rem;
}
.fila-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.cab-vino .logotipo { font-size: 2.125rem; }
.cab-vino .lema { margin-top: 0.5rem; opacity: 0.72; }
@media (max-width: 22.5rem) { .cab-vino .lema { letter-spacing: 0.24em; } }
.cab-vino :focus-visible { outline-color: var(--cabecera-tinta); }
.campana {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--cabecera-tinta);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: 50%;
}
.campana .icono { width: 1.125rem; height: 1.125rem; }
.campana .punto {
  position: absolute;
  top: 0.625rem;
  right: 0.6875rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--punto);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--cabecera);
}
.saludo {
  margin-top: 1.375rem;
  font-family: var(--fuente-texto);
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: 0;
  opacity: 0.94;
}
.saludo b { font-weight: 600; }
.fecha-hoy { margin-top: 0.125rem; font-size: 0.8125rem; opacity: 0.72; }
.fecha-hoy::first-letter { text-transform: uppercase; }

/* Las dos cifras del día, montadas sobre el borde de la cabecera. */
.cifras {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: -2.875rem;
}
.cifra {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1rem 1rem 0.875rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-cifra);
  transition: transform 0.2s var(--curva);
}
.cifra:hover { color: var(--tinta); }
/* El anillo del foco, doble (papel y vino): se ve también donde la tarjeta se monta sobre la cabecera vino. */
.cifra:focus-visible { outline: 0; box-shadow: var(--sombra-cifra), 0 0 0 3px var(--papel), 0 0 0 5px var(--foco); }
/* La cifra cabe siempre en su tarjeta, también a 320 px (iPhone SE, o cualquiera con «Zoom de pantalla»): su tamaño
   es el menor entre el de la maqueta y el que deja el ancho de la tarjeta (la mitad de la columna menos el relleno,
   `--ancho-cifra`) partido por lo que mide la cifra en esa letra, en em, con un 5 % de margen: un conteo de hasta tres
   dígitos (1,53 em) y los montos por su largo, de l5 «9.000» (2,62 em) a l10 «12.450.000» (4,93 em). */
.cifras { --ancho-cifra: calc(50vw - 3.375rem); }
.cifra .n {
  font-family: var(--fuente-cifras-grandes);
  font-size: min(2.875rem, calc(var(--ancho-cifra) / 1.6));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--primario);
  white-space: nowrap;
}
.cifra .n.l5 { font-size: min(2.875rem, calc(var(--ancho-cifra) / 2.75)); }
.cifra .n.l6 { font-size: min(2.625rem, calc(var(--ancho-cifra) / 3.3)); }
.cifra .n.l7 { font-size: min(2.25rem, calc(var(--ancho-cifra) / 3.8)); }
.cifra .n.l8, .cifra .n.l9 { font-size: min(1.875rem, calc(var(--ancho-cifra) / 4.6)); }
.cifra .n.l10 { font-size: min(1.75rem, calc(var(--ancho-cifra) / 5.15)); }
.cifra .n small { font-size: 0.48em; color: inherit; }
.cifra .t { margin-top: 0.375rem; font-size: 0.78125rem; font-weight: 500; line-height: 1.3; color: var(--tinta-suave); }
.cifra .ir {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--enlace);
}

.hoy > .mensaje, .hoy > .banner, .nota-linea { margin-top: 1rem; }
.nota-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; font-size: 0.875rem; color: var(--tinta-suave); }

.sec { display: flex; flex-direction: column; margin-top: 1.375rem; }
.sec-cab { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0.25rem 0.375rem; }
.sec-sub { margin: -0.25rem 0.25rem 0.625rem; font-size: 0.78125rem; line-height: 1.4; color: var(--tinta-suave); }
.sec-cab a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--enlace);
  text-decoration: none;
}
.esperas, .renglones, .alertas, .lista-simple, .carrusel, .prendas-lote, .lista-chats, .lista-pedidos { list-style: none; }
.esperas { display: flex; flex-direction: column; gap: 0.625rem; }
.espera {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 1.25rem;
}
.espera .quien { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; flex: 1; }
.espera .nom { font-size: 0.9375rem; font-weight: 600; line-height: 1.2; }
.espera .msg { overflow: hidden; font-size: 0.8125rem; line-height: 1.35; color: var(--tinta-suave); white-space: nowrap; text-overflow: ellipsis; }
.espera .chip { margin-left: auto; }

/* Por agotarse: un carrusel de lado con la foto de cada prenda. */
.carrusel {
  display: flex;
  gap: 0.625rem;
  margin: -0.3125rem -1rem 0;
  padding: 0.3125rem 1rem 0.375rem;      /* arriba y abajo: el lugar del anillo del foco */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel::-webkit-scrollbar { display: none; }
.carrusel li { flex: none; scroll-snap-align: start; }
.prenda {
  position: relative;            /* lo `.oculto` de adentro no se sale del carrusel */
  display: block;
  width: 7.375rem;
  overflow: hidden;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 1.125rem;
}
.prenda .foto { width: 100%; height: 8.25rem; }
.prenda .p { display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: 0.5625rem 0.625rem 0.6875rem; }
.prenda .r { display: flex; align-items: center; gap: 0.375rem; font-size: 0.78125rem; font-weight: 600; line-height: 1.2; }

.renglones { display: flex; flex-direction: column; }
.renglones a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 0;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--borde);
}
.renglones li:first-child a { border-top: 0; }
.renglones .motivo { flex: 1; font-size: 0.875rem; color: var(--tinta-suave); }
.renglones .ir { margin-left: auto; color: var(--tinta-suave); }
.renglones .ir .icono { width: 1.125rem; height: 1.125rem; }
.renglones.tarjeta { padding-block: 0.375rem; gap: 0; }
.lista-simple li { padding: 0.375rem 0; border-top: 1px solid var(--borde); font-size: 0.875rem; }
.lista-simple li:first-child { border-top: 0; }
.dato { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.875rem; }
.dato b { font-family: var(--fuente-cifras); font-size: 1.125rem; }
.alertas { display: flex; flex-direction: column; gap: 0; }
.alertas li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  border-top: 1px solid var(--borde);
}
.alertas li:first-child { border-top: 0; padding-top: 0; }
.alertas li:last-child { padding-bottom: 0; }
.alertas li .texto-alerta { display: flex; flex: 1 1 12rem; flex-direction: column; gap: 0.125rem; }
.alertas li .texto-alerta small { font-size: 0.75rem; }
.alertas button { min-height: 44px; padding: 0.25rem 1rem; font-size: 0.8125rem; }
.cuales summary { min-height: 44px; font-size: 0.8125rem; }
.cuales .codigo { font-size: 0.6875rem; font-weight: 500; color: var(--tinta-suave); }
.sec > .tarjeta { gap: 0.625rem; }

/* --- Existencias: una referencia a la vez, la malla colores × tallas y la hoja de una variante ----------------- */

.refs {
  display: flex;
  gap: 0.5rem;
  margin: 0.4375rem -1rem -0.3125rem;
  padding: 0.3125rem 1rem 0.375rem;      /* arriba y abajo: el lugar del anillo del foco */
  overflow-x: auto;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}
.refs::-webkit-scrollbar { display: none; }
.refs a {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 999px;
}
.refs a[aria-current="true"] { color: var(--primario-tinta); background: var(--primario); border-color: var(--primario); }

.grilla { gap: 0; }
.ficha-ref {
  margin-top: 0.875rem;
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 1.5rem;
}
.ficha-ref[hidden] { display: none; }
.ficha-top { display: flex; gap: 0.875rem; padding: 0.75rem; }
.ficha-top .foto { width: 5.5rem; height: 7rem; border-radius: 1rem; }
.ficha-texto { display: flex; flex-direction: column; min-width: 0; padding-top: 0.375rem; }
.grilla h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
.grilla h2 small { font-family: var(--fuente-texto); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.grilla .silueta { margin-top: 0.25rem; font-family: var(--fuente-titulos); font-style: italic; font-size: 0.875rem; line-height: 1.3; color: var(--tinta-suave); }
.tot { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.75rem; }

.malla {
  width: calc(100% - 0.75rem);
  margin: 0 0.375rem 0.25rem;
  border-top: 1px solid var(--borde);
  border-collapse: separate;
  border-spacing: 0.375rem 0.375rem;
  table-layout: fixed;
}
.malla thead th {
  width: 3.5rem;
  padding: 0.5rem 0 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em;
  color: var(--tinta-suave);
}
.malla tbody th {
  position: relative;
  padding: 0 0 0 1.5625rem;
  font-size: 0.84375rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: normal;
}
.malla tbody th .muestra { position: absolute; left: 0.125rem; top: 50%; width: 1.125rem; height: 1.125rem; margin-top: -0.5625rem; }
.malla td { padding: 0; vertical-align: middle; }
.celda {
  display: grid;
  place-items: center;
  width: 100%;
  height: 44px;
  min-width: 0;
  padding: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tinta);
  background: var(--celda);
  border-radius: 0.875rem;
  box-shadow: none;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.celda:hover { color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--contorno); }
.celda b { font-weight: 600; }
/* Pocas: ámbar liso. Agotado: terracota rayada. El rayado distingue los dos sin el color (para quien no distingue el
   ámbar del terracota, y para la variante marcada a mano «Agotado» que todavía tiene unidades). */
.variante[data-estado="pocas"] .celda { color: var(--aviso); background: var(--aviso-fondo); }
.variante[data-estado="agotado"] .celda, .leyenda [data-estado="agotado"]::before {
  color: var(--alerta);
  background-color: var(--alerta-fondo);
  background-image: repeating-linear-gradient(-45deg, transparent 0 5px, rgb(0 0 0 / 0.07) 5px 6.5px);
}
.grilla td[data-abierta] .celda, .grilla td[data-abierta] .celda:hover {
  color: var(--primario-tinta);
  background: var(--primario);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--primario) 70%, transparent);
}
.no-existe {
  display: grid;
  place-items: center;
  height: 44px;
  color: var(--tinta-suave);
  border: 1px dashed var(--borde);
  border-radius: 0.875rem;
}
.leyenda { display: flex; flex-wrap: wrap; gap: 0.875rem; padding: 0.25rem 1rem 0.875rem; font-size: 0.75rem; color: var(--tinta-suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 0.375rem; }
.leyenda span::before { content: ""; width: 0.875rem; height: 0.875rem; background-color: var(--chip-fondo); border: 1px solid var(--chip); border-radius: 0.25rem; }

/* La hoja de la variante: cerrada no se ve; abierta sube desde abajo con la variante, su cifra y sus controles. */
.grilla td:not([data-abierta]) .hoja-variante { display: none; }
.hoja-variante {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 34rem;
  max-height: calc(100vh - 1rem);
  max-height: calc(100dvh - env(safe-area-inset-top) - 0.5rem);
  margin: 0 auto;
  padding: 0.625rem max(1.25rem, env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom))
           max(1.25rem, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  text-align: left;
  background: var(--papel);
  border-radius: 1.75rem 1.75rem 0 0;
  box-shadow: var(--sombra-hoja);
}
.hoja-variante:focus { outline: none; }
.hoja-variante .t1 { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; font-weight: 600; }
.hoja-variante .t1 .muestra { width: 1rem; height: 1rem; }
.hoja-variante .nombre { min-width: 0; }
.hoja-variante .n {
  margin-left: auto;
  font-family: var(--fuente-cifras-grandes);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--primario);
}
.hoja-variante .t2 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--tinta-suave); }
.hoja-variante .ctrl { display: flex; gap: 0.625rem; margin-top: 0.875rem; }
.hoja-variante .menos, .hoja-variante .mas { width: 48px; height: 48px; padding: 0; font-size: 1.375rem; font-weight: 400; }
.hoja-variante .fuera { flex: 1; min-height: 48px; color: var(--primario-tinta); background: var(--primario); box-shadow: none; }
.hoja-variante .fuera:hover { color: var(--primario-tinta); background: var(--primario-hover); box-shadow: none; }
.hoja-variante .deshacer { width: 100%; margin-top: 0.625rem; color: var(--aviso); box-shadow: inset 0 0 0 1.5px currentColor; }
.hoja-variante .error { margin-top: 0.625rem; }
.marca-manual { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.875rem;
                padding-top: 0.75rem; border-top: 1px solid var(--borde); }
.marca-manual select { width: auto; min-width: 9.5rem; min-height: 44px; }
.hoja-variante .ayuda { margin-top: 0.75rem; text-align: center; }
.hoja-variante .cerrar { width: 100%; margin-top: 0.375rem; color: var(--enlace); box-shadow: none; }
.velo { display: none; position: fixed; z-index: 55; inset: 0; background: rgb(43 29 31 / 0.28); }
body:has(#grilla td[data-abierta]) .velo { display: block; }

.planilla { display: block; margin-top: 1.25rem; padding-block: 0.375rem; }
.planilla > :not(summary) { margin-top: 0.75rem; }
.planilla > :last-child { margin-bottom: 0.625rem; }
.planilla summary { gap: 0.625rem; justify-content: flex-start; color: var(--tinta); }
.planilla[open] > summary { margin-bottom: 0; }
.planilla summary .icono { color: var(--primario); }
.planilla summary span { flex: 1; }
.planilla > p { font-size: 0.8125rem; color: var(--tinta-suave); }
.planilla form { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.planilla form button { align-self: flex-start; }
.planilla > .boton { display: inline-flex; }

/* --- Chats: la lista y la conversación ----------------------------------------------------------------------------- */

.lista-chats, .lista-pedidos { display: flex; flex-direction: column; gap: 0.625rem; }
.chat-fila, .pedido-fila {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 1.25rem;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.chat-fila:hover, .pedido-fila:hover { color: var(--tinta); border-color: var(--contorno); }
.chat-fila:active, .pedido-fila:active, .espera:active, .prenda:active, .cifra:active { transform: scale(0.985); }
.cuerpo { display: flex; flex: 1; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.fila1 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.nom { min-width: 0; overflow: hidden; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }
.cuando { flex: none; font-size: 0.75rem; font-weight: 500; color: var(--tinta-suave); }
.ventana-fila { font-size: 0.75rem; color: var(--tinta-suave); white-space: nowrap; }
.ventana-fila.cerrada { font-weight: 600; color: var(--alerta); }
.chat-fila .msg {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.84375rem;
  line-height: 1.35;
  color: var(--tinta-suave);
}
.fila3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; margin-top: 0.375rem; }
.quien-atiende { font-size: 0.75rem; color: var(--tinta-suave); }
.chat-fila.humano .quien-atiende { font-weight: 600; color: var(--ok); }
.chat-fila.humano .avatar { color: var(--primario-tinta); background: var(--primario); }

.pagina-chat main { padding-bottom: 0; }
.chat-vista { gap: 0; min-height: 100vh; min-height: 100dvh; }
.chat-cab {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 -1rem;
  padding: calc(env(safe-area-inset-top) + 0.5rem) max(1rem, env(safe-area-inset-right)) 0.75rem
           max(0.375rem, env(safe-area-inset-left));
  background: var(--papel);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .chat-cab { background: color-mix(in srgb, var(--papel) 94%, transparent); }
}
.atras { display: grid; flex: none; place-items: center; width: 44px; height: 44px; color: var(--primario); }
.atras .icono { width: 1.375rem; height: 1.375rem; stroke-width: 2; }
.chat-cab .avatar { width: 2.5rem; height: 2.5rem; }
.chat-cab .quien { flex: 1; min-width: 0; }
.chat-cab h1 { overflow: hidden; font-family: var(--fuente-texto); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; text-overflow: ellipsis; }
/* Quién atiende, en una línea: si no cabe, termina en «…» (un bloque, no un flex: en un flex no hay puntos
   suspensivos). */
.chat-cab .s { display: block; overflow: hidden; font-size: 0.75rem; font-weight: 500; color: var(--tinta-suave); white-space: nowrap; text-overflow: ellipsis; }
.chat-cab .s.humano { color: var(--ok); }
.chat-cab .s .punto { display: inline-block; width: 0.4375rem; height: 0.4375rem; margin-right: 0.3125rem; vertical-align: 0.06em; background: currentColor; border-radius: 50%; }
.etiqueta-chat { display: flex; justify-content: center; margin-top: 0.875rem; }
.chat-cab form { flex: none; margin: 0; }
.chat-cab button { padding: 0.25rem 0.875rem; font-size: 0.8125rem; }
/* A 320 px el avatar cede su lugar al nombre y a quién atiende (las iniciales ya no dicen nada que el nombre no diga). */
@media (max-width: 22.5rem) { .chat-cab .avatar { display: none; } }
.chat-vista > [role="status"] { margin-top: 0.75rem; }

.pedido-fijo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  color: var(--tinta);
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: 1.125rem;
}
.pedido-fijo .foto { width: 2.5rem; height: 3.125rem; border-radius: 0.625rem; }
.pedido-fijo .texto { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pedido-fijo .c { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; }
.pedido-fijo .m { font-size: 0.78125rem; line-height: 1.3; color: var(--tinta-suave); }
.pedido-fijo .chip { margin-left: auto; }

#conversacion { padding: 0.375rem 0 0.75rem; }
.hilo { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; }
.hilo .dia {
  align-self: center;
  margin: 0.625rem 0 0.125rem;
  font-size: 0.65625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.hilo .dia::first-letter { text-transform: uppercase; }
.bur {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 78%;
  padding: 0.625rem 0.875rem;
  font-size: 0.90625rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  border-radius: 1.25rem;
}
.bur .texto { white-space: pre-line; }
.bur .h { display: block; margin-top: 0.3125rem; font-size: 0.65625rem; font-weight: 500; line-height: 1; text-align: right; color: var(--tinta-suave); }
.bur .quien { display: block; margin-bottom: 0.3125rem; font-size: 0.65625rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--enlace); }
/* Las fotos del chat. La de una prenda que mandó la agente: un marco de 4:5 con la prenda (la imagen corta su pie,
   como en las miniaturas); su lugar está reservado desde antes de que llegue. Una grilla: entera, con su tamaño. La de
   la clienta (un comprobante, una foto): entera, sin pasar de 20 rem de alto. */
.bur .foto-chat { display: block; width: 13.5rem; max-width: 100%; height: 16.875rem; margin-bottom: 0.375rem; overflow: hidden;
                  background: var(--celda); border-radius: 0.875rem; }
.bur .foto-chat.sin-foto { height: 6rem; }
.bur .foto-grilla { display: block; width: 15rem; max-width: 100%; height: auto; margin-bottom: 0.375rem; border-radius: 0.875rem; }
.bur .foto-ella { display: block; width: auto; max-width: 100%; height: auto; max-height: 20rem; margin-bottom: 0.375rem;
                  border-radius: 0.875rem; }
.bur .marca { margin-bottom: 0.375rem; }
.bur.ella { background: var(--papel); border: 1px solid var(--borde); border-bottom-left-radius: 0.375rem; }
.bur.lia { align-self: flex-end; background: var(--burbuja); border-bottom-right-radius: 0.375rem; }
.bur.yo, .bur.equipo { align-self: flex-end; color: var(--primario-tinta); background: var(--primario); border-bottom-right-radius: 0.375rem; }
.bur.yo .h, .bur.equipo .h, .bur.equipo .quien { color: color-mix(in srgb, var(--primario-tinta) 70%, var(--primario)); }
.bur.sistema { align-self: flex-end; background: var(--neutro-fondo); border-bottom-right-radius: 0.375rem; }
.bur.sistema .quien { color: var(--neutro); }
.bur.no-enviado { border: 1.5px dashed var(--alerta); }
.bur.no-enviado .marca { --chip: var(--alerta); --chip-fondo: var(--alerta-fondo); }
.hilo .nota {
  align-self: center;
  max-width: 88%;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: var(--nota);
  background: none;
  border: 1px dashed var(--nota-borde);
  border-radius: 0.875rem;
}
.hilo .nota .det { display: block; margin-top: 0.125rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; }
.hilo .nota .h { display: block; margin-top: 0.25rem; font-size: 0.65625rem; }
.adjunto { font-weight: 600; }
.bur.yo .adjunto, .bur.equipo .adjunto { color: inherit; }

/* La caja de escribir: abajo, pegada al final de la página (con el teclado del iPhone abierto queda arriba de él). */
.escribir {
  position: sticky;
  z-index: 15;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: auto -1rem 0;
  padding: 0.625rem max(0.75rem, env(safe-area-inset-right)) calc(0.625rem + env(safe-area-inset-bottom))
           max(0.75rem, env(safe-area-inset-left));
  background: var(--fondo);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
}
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .escribir { background: color-mix(in srgb, var(--fondo) 94%, transparent); }
}
.ventana-aviso { font-size: 0.71875rem; font-weight: 500; text-align: center; color: var(--tinta-suave); }
.fila-escribir { display: flex; align-items: flex-end; gap: 0.5rem; }
.caja { flex: 1; min-width: 0; }
.escribir textarea {
  display: block;
  min-height: 44px;
  max-height: 10.5rem;
  padding: 0.6875rem 1rem;
  line-height: 1.3;
  border-radius: 1.375rem;
  resize: none;
}
/* A 320 px, el texto de ejemplo cabe en su renglón. */
@media (max-width: 22.5rem) {
  .fila-escribir { gap: 0.375rem; }
  .escribir textarea { padding-inline: 0.75rem; }
}
.adjuntar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--primario);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--contorno);
  cursor: pointer;
}
.adjuntar input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.adjuntar:focus-within { outline: 2px solid var(--foco); outline-offset: 2px; }
.adjuntar.con-foto { color: var(--primario-tinta); background: var(--primario); box-shadow: none; }
.enviar { flex: none; width: 44px; height: 44px; padding: 0; color: var(--primario-tinta); background: var(--primario); box-shadow: none; }
.enviar:hover { color: var(--primario-tinta); background: var(--primario-hover); box-shadow: none; }
.enviar .icono { stroke-width: 2; }
.escribir.cerrada .caja { color: var(--tinta-suave); }
.escribir.cerrada .principal { min-height: 48px; }
.escribir .ayuda { text-align: center; }

/* --- Pedidos: la lista, la ficha y el pedido manual ----------------------------------------------------------------- */

.filtros label { font-size: 0.75rem; }
.filtros select { min-height: 44px; padding-left: 0.75rem; padding-right: 2rem; background-position: right 0.75rem center; }
/* A 320 px las dos listas no caben al lado del botón: el botón baja a su renglón. */
@media (max-width: 22.5rem) {
  .filtros.en-linea { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filtros.en-linea button { grid-column: 1 / -1; }
}
.pedido-fila .miniatura { width: 3.25rem; height: 4rem; }
.pedido-fila .codigo { font-size: 0.8125rem; }
.pedido-fila .total { font-size: 0.9375rem; font-weight: 600; white-space: nowrap; }
.pedido-fila .detalle { font-size: 0.78125rem; color: var(--tinta-suave); }

.ficha { gap: 1rem; }
.cab-ficha { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0.25rem 0; }
.cab-ficha h1 { font-size: 2.125rem; }
.cab-ficha h1 .codigo { color: var(--primario); }
.estados { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.quien-pide { font-size: 0.875rem; color: var(--tinta-suave); }
.quien-pide .total { font-weight: 600; color: var(--tinta); }
.ficha > section > p { overflow-wrap: anywhere; }

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  font-weight: 600;
  color: var(--enlace);
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.25rem; font-weight: 400; line-height: 1; }
details[open] > summary::after { content: "−"; }
details[open] > summary { margin-bottom: 0.5rem; }
.ficha details, .pedido-lote details { border-top: 1px solid var(--borde); padding-top: 0.25rem; }

pre.resumen {
  margin: 0;
  padding: 0.125rem 0 0.125rem 0.875rem;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-left: 2px solid var(--filete);
}
.si { font-size: 0.8125rem; color: var(--tinta-suave); }
.totales { padding-top: 0.75rem; font-size: 0.875rem; color: var(--tinta-suave); border-top: 1px solid var(--borde); }
.totales b { font-family: var(--fuente-cifras); font-size: 1.0625rem; font-weight: 600; color: var(--tinta); white-space: nowrap; }
.forma-pago { font-size: 0.875rem; }

/* Prendas: la foto, la muestra y el código, la cantidad y el precio en un renglón; «No lo tengo», debajo. */
.lista-prendas thead { display: none; }
.lista-prendas, .lista-prendas tbody, .lista-prendas td { display: block; }
.lista-prendas tbody { display: flex; flex-direction: column; }
.lista-prendas tr {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.25rem 0.875rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--borde);
}
.lista-prendas tr:first-child { border-top: 0; padding-top: 0; }
.lista-prendas td, .lista-prendas td:first-child, .lista-prendas td:last-child { padding: 0; border: 0; }
.lista-prendas td[data-label]::before { content: none; }
.lista-prendas td[data-label="Variante"] { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.4375rem; }
.lista-prendas .sku { font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em; }
.lista-prendas .color-talla { grid-column: 2; font-size: 0.71875rem; font-weight: 500; letter-spacing: 0.06em; color: var(--tinta-suave); }
.lista-prendas td[data-label="Cantidad"] { font-weight: 600; }
.lista-prendas td[data-label="Cantidad"]::before { content: "× "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: var(--tinta-suave); }
.lista-prendas td[data-label="Precio"] { text-align: right; }
.lista-prendas td:last-child { grid-column: 2 / -1; }
.lista-prendas td:last-child:not(:has(*)) { display: none; }
.lista-prendas td:last-child form { margin: 0; }
.lista-prendas td:last-child button { min-height: 44px; padding: 0.25rem 1rem; font-size: 0.8125rem; }

/* Historial: una línea de tiempo; el último estado, relleno. */
.linea-tiempo, .linea-tiempo tbody, .linea-tiempo tr, .linea-tiempo td { display: block; }
.linea-tiempo thead { display: none; }
.linea-tiempo tbody { gap: 0; }
.linea-tiempo tr { position: relative; padding: 0 0 0.875rem 1.5rem; background: none; border: 0; border-radius: 0; }
.linea-tiempo tr::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.35rem;
  width: 0.625rem;
  height: 0.625rem;
  background: var(--papel);
  border: 1.5px solid var(--filete);
  border-radius: 50%;
}
.linea-tiempo tr::after {
  content: "";
  position: absolute;
  left: calc(0.4375rem - 0.5px);
  top: 1.1rem;
  bottom: 0.1rem;
  width: 1px;
  background: var(--borde);
}
.linea-tiempo tr:last-child { padding-bottom: 0; }
.linea-tiempo tr:last-child::after { content: none; }
.linea-tiempo tr:last-child::before { background: var(--primario); border-color: var(--primario); }
.linea-tiempo td, .linea-tiempo td:first-child, .linea-tiempo td:last-child { display: inline; padding: 0; border: 0; }
.linea-tiempo td[data-label]::before { content: none; }
.linea-tiempo td[data-label="Estado"] { display: block; font-weight: 600; }
.linea-tiempo td[data-label="Estado"]::first-letter { text-transform: uppercase; }
.linea-tiempo td[data-label="Cuándo"], .linea-tiempo td[data-label="Quién"] { font-size: 0.8125rem; color: var(--tinta-suave); }
.linea-tiempo td[data-label="Quién"]::before { content: " · "; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.linea-tiempo td.vacio { display: none; }

.hilo.compacto .bur { max-width: 88%; font-size: 0.84375rem; }
.hilo.compacto .dia { margin-top: 0.25rem; }
.comprobante summary { justify-content: flex-start; gap: 0.5rem; font-size: 0.8125rem; }
.comprobante .codigo-largo { font-size: 0.75rem; color: var(--tinta-suave); overflow-wrap: anywhere; }
.acciones .formulario + .formulario { padding-top: 1rem; border-top: 1px solid var(--borde); }

#nuevo > [role="status"] { margin: 0; }
#prendas { display: flex; flex-direction: column; gap: 0.5rem; }
/* La lista se lleva el ancho: un sku con su existencia («ABC-NEG-L (hay 11)») cabe entero a 375 px; la cantidad
   (hasta «100») cabe en 3,75 rem. */
.fila-prenda { display: grid; grid-template-columns: auto minmax(0, 1fr) 3.75rem; align-items: center; gap: 0.5rem; }
.fila-prenda[hidden] { display: none; }
.cab-prendas { margin: -0.25rem 0 -0.375rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.cab-prendas span:first-child { width: 1.125rem; }
.cab-prendas span:last-child { text-align: center; letter-spacing: 0.04em; }
.fila-prenda .muestra { width: 1.125rem; height: 1.125rem; }
.fila-prenda select { padding-left: 0.75rem; padding-right: 2.125rem; background-position: right 0.75rem center; }
.fila-prenda input { width: 100%; padding-inline: 0.5rem; text-align: center; }
#prendas + button { align-self: flex-start; }
#prendas + button::before { content: "+"; content: "+" / ""; font-size: 1.125rem; line-height: 1; }
#nuevo > .principal { margin-top: 0.25rem; }

/* --- Lote ---------------------------------------------------------------------------------------------------------- */

.lote { gap: 0.875rem; }
.acciones-lote { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.acciones-lote > .boton, .acciones-lote button { min-height: 48px; }
.acciones-lote form { margin: 0; }
.cab-lote { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.pedido-lote h2 { font-size: 1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: none; color: var(--tinta); }
.pedido-lote h2 a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; color: inherit; text-decoration: none; }
.pedido-lote h2 a::after { content: "→"; content: "→" / ""; font-weight: 400; color: var(--enlace); }
.destino { margin-top: -0.625rem; font-size: 0.875rem; color: var(--tinta-suave); }
.prendas-lote { display: flex; flex-direction: column; gap: 0.5rem; }
.prendas-lote li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 500; }
.prendas-lote .miniatura { width: 2.5rem; height: 3.125rem; border-radius: 0.625rem; }
.guia { font-size: 0.875rem; }
.datos-guia { display: flex; flex-direction: column; gap: 0.625rem; padding: 0.875rem 1rem; background: var(--fondo); border-radius: 1rem; }
.cab-datos { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.datos { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0; font-size: 0.875rem; }
.datos dt { padding-top: 0.15rem; font-size: 0.65625rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--tinta-suave); }
.datos .sin-dato { color: var(--tinta-suave); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.pedido-lote > form { margin: 0; }
.pedido-lote > .formulario { padding-top: 0.875rem; border-top: 1px solid var(--borde); }
.acciones-pedido { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acciones-pedido form { margin: 0; }
.sin-guia summary { color: var(--alerta); }

/* --- Pagos --------------------------------------------------------------------------------------------------------- */

.pagos { gap: 0.875rem; }
.tabla.lista-pagos tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 0.75rem; }
.lista-pagos td { grid-column: 1 / -1; min-width: 0; font-size: 0.875rem; }
.lista-pagos td[data-label="Llegó"]:empty { display: none; }
#pagos > .lista-pagos td[data-label="Llegó"] { grid-row: 1; grid-column: 1; }
.lista-pagos td[data-label="Pedido"] { grid-row: 1; grid-column: 2; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; }
.lista-pagos td[data-label="Monto"] {
  grid-row: 1;
  grid-column: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-family: var(--fuente-cifras);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.1;
}
.lista-pagos td[data-label="Monto"] strong { font-family: var(--fuente-texto); font-weight: 600; }
#pagos > .tabla.lista-pagos td[data-label="Llegó"]::before,
.tabla.lista-pagos td[data-label="Pedido"]::before, .tabla.lista-pagos td[data-label="Monto"]::before { content: none; }
.empate { letter-spacing: 0.08em; }
#llego .rotulo { margin-bottom: -0.25rem; }
#no-cuadran h2 { margin-bottom: -0.25rem; }

/* --- Arranque y Medición -------------------------------------------------------------------------------------------- */

.arranque { gap: 0.875rem; }
.condicion h2 { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--tinta); text-wrap: balance; }
.condicion .numero {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--fuente-cifras);
  font-size: 0.8125rem;
  color: var(--realce-tinta);
  background: var(--realce);
  border-radius: 50%;
}
.condicion.cumplida .numero { color: var(--ok); background: var(--ok-fondo); }
.condicion p { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; }
.condicion p.marcada { font-size: 0.8125rem; color: var(--tinta-suave); }
.condicion .formulario { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 0.75rem; }
.condicion .formulario > label:not(.casilla) { grid-column: 2; }
.condicion .formulario > .casilla { grid-column: 1; grid-row: 1; min-height: 48px; }
.condicion .formulario > button { grid-column: 1 / -1; justify-self: end; }
.ok, .falta { display: inline-grid; flex: none; place-items: center; width: 1.5rem; height: 1.5rem; font-size: 0.8125rem; font-weight: 600; border-radius: 50%; }
.ok { color: var(--ok); background: var(--ok-fondo); }
.falta { color: var(--alerta); background: var(--alerta-fondo); }
.fecha-estimada { font-family: var(--fuente-cifras); font-size: 1rem; font-weight: 600; border-left: 3px solid var(--filete); }

.medicion { gap: 0.875rem; }
.medicion > h2 { margin-top: 0.75rem; }
.costo-ia { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); }
.cifra-grande { font-family: var(--fuente-cifras); font-size: 1.75rem; font-weight: 600; line-height: 1.1; color: var(--primario); }
@media (max-width: 40rem) {
  .medicion > .tabla tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem 0.75rem; }
  .medicion > .tabla td[data-label="Día"] { grid-column: 1 / 3; font-size: 1rem; font-weight: 600; }
  .medicion > .tabla td[data-label="Día"]::before { content: none; }
  .medicion > .tabla td[data-label="Día"]::first-letter { text-transform: uppercase; }
  .medicion > .tabla td[data-label="Origen"] { grid-column: 3; justify-self: end; align-self: start; }
  .medicion > .tabla td[data-label="Origen"]::before { content: none; }
  .medicion > .tabla td[data-label="Origen"] { padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
                                                color: var(--realce-tinta); background: var(--realce); border-radius: 999px; }
  .medicion > .tabla td:is([data-label="Chats"], [data-label="Pedidos"], [data-label="Gasto"], [data-label="Costo por pedido"]) { font-size: 1.0625rem; font-weight: 600; }
  .medicion > .tabla td[data-label="Costo por pedido"] { grid-column: 1 / -1; padding-top: 0.5rem; border-top: 1px solid var(--borde); }
  .medicion > .tabla.a-medias tr { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .medicion > .tabla.a-medias td[data-label="Día"] { grid-column: 1; }
  .medicion > .tabla.a-medias td[data-label="A medias"]::before { display: inline; margin-right: 0.5rem; }
}
@media (min-width: 40.0625rem) {
  .medicion > .tabla { padding: 0 1rem; background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-tarjeta); border-collapse: separate; border-spacing: 0; }
  .medicion > .tabla td, .medicion > .tabla th { padding-left: 0.5rem; padding-right: 0.5rem; }
  .medicion > .tabla tr:last-child td { border-bottom: 0; }
}

/* --- Entrar: la portada en el color de la marca ---------------------------------------------------------------------- */

.pagina-entrar {
  color: var(--cabecera-tinta);
  background: var(--cabecera);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--cabecera) 86%, #ffffff), var(--cabecera) 70%);
}
html:has(.pagina-entrar) { background: var(--cabecera); }
.pagina-entrar main {
  justify-content: center;
  gap: 2.25rem;
  max-width: 25rem;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top) + 3rem) 1.25rem calc(env(safe-area-inset-bottom) + 3rem);
}
.portada { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.portada .logotipo { font-size: clamp(3.75rem, 17vw, 4.75rem); }
.portada .lema { opacity: 0.75; }
.pagina-entrar :focus-visible { outline-color: var(--cabecera-tinta); }
form.entrar {
  gap: 1rem;
  padding: 1.5rem 1.375rem 1.375rem;
  color: var(--tinta);
  background: var(--papel);
  border-radius: 1.5rem;
  box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
}
form.entrar :focus-visible { outline-color: var(--foco); }
form.entrar .principal { margin-top: 0.25rem; min-height: 52px; font-size: 1rem; }

/* --- Páginas públicas: la banda de la marca y la hoja, sin pestañas ----------------------------------------------- */

.publica main { gap: 1rem; max-width: 38rem; margin-top: -3rem; padding-bottom: calc(env(safe-area-inset-bottom) + 2.5rem); }
.banda {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  padding: calc(env(safe-area-inset-top) + 2.25rem) 1.5rem 4.75rem;
  text-align: center;
  color: var(--cabecera-tinta);
  background: var(--cabecera);
  border-radius: 0 0 1.875rem 1.875rem;
}
.banda .logotipo { font-size: 2.75rem; }
.banda .lema { opacity: 0.75; }
.hoja {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  padding: 1.5rem 1.25rem;
  background: var(--papel);
  border-radius: 1.5rem;
  box-shadow: var(--sombra-cifra);
}
.hoja h1 { font-size: 2rem; }
.hoja h1 .codigo { color: var(--primario); }
.hoja > .rotulo { margin-bottom: -0.75rem; }
.publica h2 {
  font-family: var(--fuente-titulos);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tinta);
}
.hoja > section { display: flex; flex-direction: column; gap: 0.5rem; }
.hoja > section + section, .hoja > section + p, .hoja > p + section { padding-top: 1.125rem; border-top: 1px solid var(--borde); }
.politica { white-space: pre-line; font-size: 0.9375rem; line-height: 1.55; }
.pendiente { font-weight: 600; color: var(--alerta); }
.publica dl { display: grid; gap: 0.125rem; margin: 0; }
.publica dt { margin-top: 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-suave); }
.publica dt:first-child { margin-top: 0; }
.publica dd { margin: 0; }
.publica .prendas { margin: 0; padding-left: 1.125rem; }
.publica .prendas li::marker { color: var(--tinta-suave); }
.va-con { font-size: 1rem; }
.guia-grande { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.125rem 1.25rem;
               background: var(--fondo); border-radius: 1.25rem; }
.guia-grande .numero { font-family: var(--fuente-cifras); font-size: 1.75rem; font-weight: 600; line-height: 1.15;
                       letter-spacing: 0.06em; font-variant-numeric: tabular-nums lining-nums; color: var(--primario);
                       overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.aceptado { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--ok); background: var(--ok-fondo); border-radius: 1rem; }
.aceptado::before { content: "✓"; content: "✓" / ""; font-weight: 600; }
.pie { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.pie a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }

/* --- Escritorio: el riel a la izquierda con la marca arriba; el contenido centrado ------------------------------ */

@media (max-width: 56.1875rem) {
  /* La conversación ocupa la pantalla: se vuelve atrás con la flecha de su cabecera. */
  .pagina-chat .pestanas { display: none; }
}

@media (min-width: 56.25rem) {
  main { padding: 0 2rem 4rem; }
  body:has(.pestanas) { padding-left: calc(var(--riel) + env(safe-area-inset-left)); }
  .pestanas {
    top: 0;
    right: auto;
    width: calc(var(--riel) + env(safe-area-inset-left));
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1.75rem 1rem 1.25rem calc(1rem + env(safe-area-inset-left));
    overflow-y: auto;
    background: var(--papel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 0;
    border-right: 1px solid var(--borde);
  }
  .riel-marca {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0.5rem 1.5rem;
    color: var(--primario);
    text-decoration: none;
  }
  .riel-marca .logotipo { font-size: 1.875rem; }
  .riel-marca .lema { font-size: 0.65625rem; letter-spacing: 0.22em; color: var(--tinta-suave); }
  .pestanas > a:not(.riel-marca), .riel-otras a, .riel-otras .salir button {
    flex-direction: row;
    gap: 0.75rem;
    width: auto;
    min-height: 44px;
    padding: 0.3125rem 0.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    border-radius: 0.875rem;
  }
  .pestanas i { width: 2rem; height: 2rem; border-radius: 0.625rem; background: none; }
  .pestanas > a:not(.riel-marca):hover, .riel-otras a:hover { color: var(--primario); background: var(--fondo); }
  .pestanas > a[aria-current="page"], .riel-otras a[aria-current="page"] { color: var(--primario); font-weight: 600; background: var(--realce); }
  .pestanas > a[aria-current="page"] i, .riel-otras a[aria-current="page"] i { background: none; }
  /* En el escritorio no hay «Más»: el resto de las secciones va en el riel (`riel-otras`) y la hoja no se usa. */
  .pestana-mas, .hoja-mas { display: none; }
  .riel-otras { display: flex; flex-direction: column; flex: 1; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--borde); }
  .riel-otras .rotulo { margin: 0.25rem 0.5rem 0.5rem; }
  .riel-otras ul { list-style: none; display: flex; flex-direction: column; gap: 0.25rem; }
  .riel-otras a, .riel-otras .salir button {
    display: flex; align-items: center; justify-content: flex-start; width: 100%; color: var(--tinta);
    text-align: left; text-decoration: none; background: none; border: 0; box-shadow: none; cursor: pointer;
  }
  .riel-otras i { display: grid; place-items: center; color: var(--primario); }
  .riel-otras .salir { margin-top: auto; }
  .riel-otras .salir button, .riel-otras .salir button i { color: var(--alerta); }

  h1 { font-size: 2.75rem; }
  .marca-pagina { display: none; }
  .cab-pagina.con-accion > .boton { grid-row: 1; }
  .cab-pagina { padding-top: 2.25rem; }
  .volver { margin-top: 1.5rem; }

  .pagina-hoy main { max-width: 56rem; }
  .cab-vino { margin: 0; padding: 2.25rem 2.5rem 5rem; border-radius: 0 0 2.25rem 2.25rem; }
  /* La marca y su lema ya están arriba del riel: en la cabecera de Hoy queda el saludo, grande. */
  .cab-vino .firma { display: none; }
  .cab-vino .fila-cab { position: absolute; top: 2.25rem; right: 2.5rem; }
  .saludo { margin-top: 0; padding-right: 4rem; font-size: 1.75rem; line-height: 1.2; }
  .fecha-hoy { margin-top: 0.5rem; font-size: 0.9375rem; }
  .cifras { margin: -3.25rem 1.5rem 0; gap: 1rem; }
  .cifra { padding: 1.25rem 1.375rem 1.125rem; }
  .cifra .n, .cifra .n.l5, .cifra .n.l6, .cifra .n.l7 { font-size: 3.5rem; }
  .cifra .n.l8, .cifra .n.l9 { font-size: 2.75rem; }
  .cifra .n.l10 { font-size: 2.5rem; }
  .carrusel { margin: -0.3125rem 0 0; padding: 0.3125rem 0.3125rem 0.75rem; scroll-padding-inline: 0; scrollbar-width: thin; scrollbar-color: var(--contorno) transparent;
              -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent);
              mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); }
  .carrusel li:last-child { padding-right: 3rem; }
  .carrusel::-webkit-scrollbar { display: block; height: 6px; }
  .carrusel::-webkit-scrollbar-thumb { background: var(--contorno); border-radius: 3px; }
  .prenda { width: 8.5rem; }
  .prenda .foto { height: 9.5rem; }

  .refs { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; }
  .ficha-top { padding: 1rem; gap: 1.25rem; }
  .ficha-top .foto { width: 7rem; height: 8.75rem; }
  /* La malla no se estira: la columna de los colores mide lo que su nombre y las tallas, lo de una celda cómoda. */
  .malla { width: auto; margin-inline: 0.625rem; border-top: 0; }
  .ficha-ref > .ficha-top { margin: 0 0.625rem; padding: 1rem 0.375rem; border-bottom: 1px solid var(--borde); }
  .malla thead td { width: 11rem; }
  .malla thead th { width: 5.5rem; }
  /* La hoja de la variante, centrada en la columna (no en la ventana, que incluye el riel). */
  .hoja-variante { left: calc(var(--riel) + env(safe-area-inset-left)); }
  .grilla h2 { font-size: 2.25rem; }

  .pagina-chat main { max-width: 52rem; }
  .bur { max-width: min(78%, 34rem); }
  .pagina-existencias main { max-width: 42rem; }
  .chat-cab { margin: 0; padding: 1rem 1rem 0.875rem; border-radius: 0 0 1.25rem 1.25rem; }
  .escribir { margin: auto 0 0; padding-bottom: 1rem; border-radius: 1.25rem 1.25rem 0 0; }

  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .filtros button { grid-column: auto; }
  .tarjeta, :where(.ficha > section, .pedido-lote, .condicion, fieldset, #llego, #no-cuadran) { padding: 1.25rem 1.5rem; }

  .publica main { margin-top: -3.5rem; }
  .banda { padding-top: 3rem; }
  .banda .logotipo { font-size: 3.5rem; }
  .hoja { padding: 2rem 2.25rem; }
}

/* --- Movimiento: una entrada escalonada al cargar una página del panel, nunca en lo que htmx cambia después
   (panel.js marca la página «quieta» al segundo); las hojas suben con una transición corta. Las páginas públicas no
   se mueven. Sin movimiento si el aparato lo pide. --------------------------------------------------------------- */

@keyframes aparecer { from { opacity: 0; transform: translateY(0.625rem); } }
@keyframes subir { from { transform: translateY(100%); } }
@keyframes velo { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *, .cifras > *, .esperas > li, .carrusel > li) {
    animation: aparecer 0.55s var(--curva) backwards;
  }
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *):nth-child(2) { animation-delay: 0.05s; }
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *):nth-child(3) { animation-delay: 0.1s; }
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *):nth-child(4) { animation-delay: 0.15s; }
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *):nth-child(5) { animation-delay: 0.2s; }
  html:not(.quieta) body:not(.publica) :is(main > :not([id]), main > [id] > *):nth-child(n + 6) { animation-delay: 0.25s; }
  html:not(.quieta) body:not(.publica) .cifras > :nth-child(2) { animation-delay: 0.12s; }
  html:not(.quieta) body:not(.publica) .carrusel > li:nth-child(2) { animation-delay: 0.3s; }
  html:not(.quieta) body:not(.publica) .carrusel > li:nth-child(3) { animation-delay: 0.36s; }
  html:not(.quieta) body:not(.publica) .carrusel > li:nth-child(n + 4) { animation-delay: 0.42s; }
  /* La cabecera de Hoy entra quieta: lleva la sombra de las cifras encima. */
  html:not(.quieta) .hoy > .cab-vino { animation: none; }
  .hoja-mas[open] { animation: subir 0.3s var(--curva); }
  .hoja-mas[open]::backdrop { animation: velo 0.3s ease; }
  td[data-recien] .hoja-variante { animation: subir 0.3s var(--curva); }
  body:has(#grilla td[data-recien]) .velo { animation: velo 0.25s ease; }
  .cifra:hover, .prenda:hover { transform: translateY(-2px); }
}

@media print {
  html, body { background: #ffffff; }
  .pestanas, .velo, .escribir, .chat-cab .atras { display: none; }
  body:has(.pestanas) { padding-left: 0; }
  main { padding-bottom: 0; }
}