/* ==========================================================================
   MELU PELUCHES — Sistema de diseño
   --------------------------------------------------------------------------
   Mobile first de verdad: todo lo que está fuera de una media query es el
   diseño de celular. Las media queries sólo AGREGAN a partir de tablet.
   El cap. 9 lo pide explícito: "el diseño se define y se aprueba primero en
   pantalla de celular, y recién después en escritorio".

   Accesibilidad (cap. 9): contraste AA en todos los pares texto/fondo,
   foco visible siempre, área táctil mínima de 44px, y ningún estado
   comunicado sólo por color.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Se definen completos en :root (tema claro) y sólo se redefinen los que
   cambian en oscuro. Ningún color tiene su única definición dentro de una
   media query.
   -------------------------------------------------------------------------- */

:root {
  /* --- Marca ---
     Identidad real de Melu (Martín, 2026/09/14): rosa, negro y blanco —
     "¡Recreo!", historieta pop en vez del violeta corporativo anterior.
     El rosa es la marca; el negro hace de segundo acento (ver --acento-*
     más abajo), no un gris cualquiera. */
  --marca-50:  #fef1f7;
  --marca-100: #fde3ef;
  --marca-200: #fbc2dd;
  --marca-300: #f894c0;
  --marca-400: #f2599b;
  --marca-500: #e42877;
  --marca-600: #cb1d6d;
  --marca-700: #a01656;
  --marca-800: #7a1142;
  --marca-900: #560c2e;

  /* Acento negro: el tercer color de la marca (rosa/negro/blanco), para
     insignias y destacados que antes usaban el coral. */
  --acento-100: #ececec;
  --acento-300: #8a8a8a;
  --acento-500: #1a1a1a;
  --acento-600: #111111;
  --acento-700: #000000;

  /* --- Semánticos --- */
  --exito-100: #dcfce7;
  --exito-500: #16a34a;
  --exito-700: #15803d;
  --aviso-100: #fef3c7;
  --aviso-500: #d97706;
  --aviso-700: #b45309;
  --error-100: #fee2e2;
  --error-500: #dc2626;
  --error-700: #b91c1c;
  --info-100:  #dbeafe;
  --info-500:  #2563eb;
  --info-700:  #1d4ed8;

  /* --- Superficies y texto (tema claro) --- */
  --fondo:            #fff8fb;
  --fondo-alterno:    #f8eef4;
  --superficie:       #ffffff;
  --superficie-2:     #fffbfd;
  --superficie-hover: #f8eef4;
  --borde:            #ecdce4;
  --borde-fuerte:     #d9b8ca;

  --texto:        #1a1214;
  --texto-suave:  #6b5a62;
  --texto-tenue:  #9c8790;
  --texto-invertido: #ffffff;

  --marca-texto:  var(--marca-700);
  --marca-fondo-suave: var(--marca-50);

  /* --- Formas ---
     Más rectas que redondeadas: recorte de historieta, no burbuja. */
  --radio-xs: 3px;
  --radio-sm: 5px;
  --radio:    8px;
  --radio-lg: 12px;
  --radio-xl: 16px;
  --radio-full: 999px;

  /* --- Sombras: más planas que difusas, tinte de marca en vez de gris --- */
  --sombra-sm: 0 1px 2px rgba(26, 18, 20, .10);
  --sombra:    0 2px 4px rgba(26, 18, 20, .10), 0 6px 16px -6px rgba(26, 18, 20, .12);
  --sombra-lg: 0 6px 20px -6px rgba(26, 18, 20, .22), 0 2px 6px rgba(26, 18, 20, .08);
  --sombra-marca: 0 6px 18px -6px rgba(203, 29, 109, .5);

  /* --- Espaciado (escala de 4) --- */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e5: 20px;  --e6: 24px;  --e8: 32px;  --e10: 40px;
  --e12: 48px; --e16: 64px; --e20: 80px;

  /* --- Tipografía ---
     Fredoka para todo el texto (redondeada, amigable) y Bangers para los
     títulos grandes (letra de historieta, la que le da nombre a "¡Recreo!")
     — pedido de Walter, 2026/09/14. Las dos se cargan con display:swap
     (ver el <link> en cada layout) para no bloquear el primer pintado; el
     stack de sistema queda de reserva si la fuente todavía no llegó o la
     carga falló, así que el objetivo de <2,5s del cap. 9 no se rompe. */
  --fuente: 'Fredoka', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
            Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  --fuente-titulo: 'Bangers', Impact, ui-sans-serif, system-ui, sans-serif;
  --fuente-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;

  --txt-xs:  0.75rem;    /* 12 */
  --txt-sm:  0.875rem;   /* 14 */
  --txt-md:  1rem;       /* 16 — nunca menos en inputs: iOS hace zoom solo */
  --txt-lg:  1.125rem;   /* 18 */
  --txt-xl:  1.375rem;   /* 22 */
  --txt-2xl: 1.75rem;    /* 28 */
  --txt-3xl: 2.25rem;    /* 36 */

  /* --- Movimiento --- */
  --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
  --transicion-lenta: 280ms cubic-bezier(.4, 0, .2, 1);

  /* --- Capas --- */
  --z-barra: 100;
  --z-panel: 200;
  --z-modal: 300;
  --z-aviso: 400;

  /* --- Medidas --- */
  --ancho-max: 1280px;
  --ancho-texto: 68ch;
  --alto-barra: 60px;
  --alto-barra-inferior: 62px;   /* navegación con el pulgar, sólo en móvil */
  --toque-min: 44px;             /* área táctil mínima accesible */

  color-scheme: light dark;
}

/* Tema oscuro por preferencia del sistema, salvo que se haya elegido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo:            #17121a;
    --fondo-alterno:    #1e1620;
    --superficie:       #221a26;
    --superficie-2:     #2a1f2e;
    --superficie-hover: #322636;
    --borde:            #3d2e3a;
    --borde-fuerte:     #55404f;

    --texto:        #fdf2f8;
    --texto-suave:  #d9b8ca;
    --texto-tenue:  #a98a9a;
    --texto-invertido: #17121a;

    --marca-texto:  #ff7fb8;
    --marca-fondo-suave: #3a1a2c;

    --exito-100: #14331f;  --exito-500: #4ade80;  --exito-700: #86efac;
    --aviso-100: #3a2a10;  --aviso-500: #fbbf24;  --aviso-700: #fcd34d;
    --error-100: #3d1a1a;  --error-500: #f87171;  --error-700: #fca5a5;
    --info-100:  #172554;  --info-500:  #60a5fa;  --info-700:  #93c5fd;

    --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sombra:    0 2px 8px rgba(0, 0, 0, .45), 0 8px 24px -8px rgba(0, 0, 0, .5);
    --sombra-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
  }
}

/* Tema oscuro elegido a mano: gana sobre la preferencia del sistema. */
:root[data-tema="oscuro"] {
  --fondo:            #17121a;
  --fondo-alterno:    #1e1620;
  --superficie:       #221a26;
  --superficie-2:     #2a1f2e;
  --superficie-hover: #322636;
  --borde:            #3d2e3a;
  --borde-fuerte:     #55404f;

  --texto:        #fdf2f8;
  --texto-suave:  #d9b8ca;
  --texto-tenue:  #a98a9a;
  --texto-invertido: #17121a;

  --marca-texto:  #ff7fb8;
  --marca-fondo-suave: #3a1a2c;

  --exito-100: #14331f;  --exito-500: #4ade80;  --exito-700: #86efac;
  --aviso-100: #3a2a10;  --aviso-500: #fbbf24;  --aviso-700: #fcd34d;
  --error-100: #3d1a1a;  --error-500: #f87171;  --error-700: #fca5a5;
  --info-100:  #172554;  --info-500:  #60a5fa;  --info-700:  #93c5fd;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra:    0 2px 8px rgba(0, 0, 0, .45), 0 8px 24px -8px rgba(0, 0, 0, .5);
  --sombra-lg: 0 12px 32px -8px rgba(0, 0, 0, .6);
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Deja lugar para las barras fijas al saltar a un ancla. */
  scroll-padding-top: calc(var(--alto-barra) + var(--e4));
}

body {
  font-family: var(--fuente);
  font-size: var(--txt-md);
  line-height: 1.55;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Sin scroll horizontal nunca: es el defecto más común en móvil.
     Va "clip" y no "hidden" a propósito: `overflow-x: hidden` obliga al
     navegador a tratar el body como contenedor de scroll (le pone
     overflow-y: auto por su cuenta), y eso rompe `position: sticky` — las
     barras de acciones fijas al pie dejaban de anclarse al viewport y
     quedaban flotando encima del formulario. `clip` recorta igual pero no
     crea contexto de scroll. */
  overflow-x: clip;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  line-height: 1.2;
  font-weight: 400;   /* Bangers es de un solo peso; 700 fuerza negrita falsa */
  letter-spacing: 0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--txt-2xl); }
h2 { font-size: var(--txt-xl); }
h3 { font-size: var(--txt-lg); }

p { text-wrap: pretty; }

a { color: var(--marca-texto); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

ul, ol { padding-left: 1.25em; }

hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e6) 0; }

/* Foco visible SIEMPRE: navegación por teclado es requisito del cap. 9. */
:focus-visible {
  outline: 3px solid var(--marca-500);
  outline-offset: 2px;
  border-radius: var(--radio-xs);
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   3. UTILIDADES
   -------------------------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--e4);
}

@media (min-width: 768px) {
  .contenedor { padding-inline: var(--e6); }
}

/* Sólo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: primer elemento enfocable de la página. */
.saltar-al-contenido {
  position: absolute;
  left: var(--e4);
  top: -100px;
  z-index: var(--z-aviso);
  background: var(--marca-600);
  color: #fff;
  padding: var(--e3) var(--e5);
  border-radius: var(--radio-sm);
  font-weight: 600;
  transition: top var(--transicion);
}
.saltar-al-contenido:focus { top: var(--e3); }

.pila      { display: flex; flex-direction: column; }
.pila-2    { display: flex; flex-direction: column; gap: var(--e2); }
.pila-3    { display: flex; flex-direction: column; gap: var(--e3); }
.pila-4    { display: flex; flex-direction: column; gap: var(--e4); }
.pila-5    { display: flex; flex-direction: column; gap: var(--e5); }
.pila-6    { display: flex; flex-direction: column; gap: var(--e6); }
.fila      { display: flex; align-items: center; gap: var(--e3); }
.fila-2    { display: flex; align-items: center; gap: var(--e2); }
.fila-4    { display: flex; align-items: center; gap: var(--e4); }
.fila-envolver { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.entre     { justify-content: space-between; }
.centrado  { justify-content: center; }
.al-final  { justify-content: flex-end; }
.crece     { flex: 1 1 auto; min-width: 0; }
.arriba    { align-items: flex-start; }

.texto-centro  { text-align: center; }
.texto-derecha { text-align: right; }
.texto-suave   { color: var(--texto-suave); }
.texto-tenue   { color: var(--texto-tenue); }
.texto-xs      { font-size: var(--txt-xs); }
.texto-sm      { font-size: var(--txt-sm); }
.texto-lg      { font-size: var(--txt-lg); }
.texto-xl      { font-size: var(--txt-xl); }
.negrita       { font-weight: 600; }
.muy-negrita   { font-weight: 700; }
.mono          { font-family: var(--fuente-mono); font-size: .9em; }
.numero-tabular { font-variant-numeric: tabular-nums; }

.oculto { display: none !important; }

/* El atributo `hidden` del HTML sólo aplica `display: none` con la
   especificidad más baja que existe, así que cualquier clase que defina un
   display —`.campo`, `.aviso`, `.fila`— se lo pisa y el elemento se sigue
   viendo. Pasaba con el campo de cotización, que aparecía en partidas en
   pesos. Esta regla hace que `hidden` signifique lo que dice. */
[hidden] { display: none !important; }

@media (max-width: 767px)  { .solo-escritorio { display: none !important; } }
@media (min-width: 768px)  { .solo-movil      { display: none !important; } }

.sin-margen { margin: 0 !important; }
.mt-2 { margin-top: var(--e2); }  .mt-4 { margin-top: var(--e4); }
.mt-6 { margin-top: var(--e6); }  .mt-8 { margin-top: var(--e8); }
.mb-2 { margin-bottom: var(--e2); } .mb-4 { margin-bottom: var(--e4); }
.mb-6 { margin-bottom: var(--e6); } .mb-8 { margin-bottom: var(--e8); }

/* --------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: var(--toque-min);
  padding: var(--e3) var(--e5);
  border: 1px solid transparent;
  border-radius: var(--radio-sm);
  font-size: var(--txt-md);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
              transform var(--transicion), box-shadow var(--transicion);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.boton:active:not(:disabled) { transform: translateY(1px); }

.boton:disabled,
.boton[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.boton--primario {
  background: var(--marca-600);
  color: #fff;
  box-shadow: var(--sombra-marca);
}
.boton--primario:hover:not(:disabled) { background: var(--marca-700); }

.boton--acento {
  background: var(--acento-600);
  color: #fff;
  box-shadow: var(--sombra-sm);
}
.boton--acento:hover:not(:disabled) { background: var(--acento-700); }

.boton--secundario {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde-fuerte);
}
.boton--secundario:hover:not(:disabled) {
  background: var(--superficie-hover);
  border-color: var(--marca-400);
}

.boton--fantasma {
  background: transparent;
  color: var(--marca-texto);
}
.boton--fantasma:hover:not(:disabled) { background: var(--marca-fondo-suave); }

.boton--peligro {
  background: var(--error-500);
  color: #fff;
}
.boton--peligro:hover:not(:disabled) { background: var(--error-700); }

.boton--sm { min-height: 36px; padding: var(--e2) var(--e3); font-size: var(--txt-sm); }
.boton--lg { min-height: 52px; padding: var(--e4) var(--e8); font-size: var(--txt-lg); }
.boton--bloque { width: 100%; }
.boton--icono { padding: var(--e3); min-width: var(--toque-min); }

/* --------------------------------------------------------------------------
   5. FORMULARIOS
   -------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: var(--e2); margin-bottom: var(--e4); }

.campo__etiqueta {
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto);
}

.campo__requerido { color: var(--error-500); margin-left: 2px; }

.campo__ayuda { font-size: var(--txt-sm); color: var(--texto-tenue); }

.campo__error {
  font-size: var(--txt-sm);
  color: var(--error-500);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--e1);
}
/* El error no se comunica sólo por color: lleva su símbolo. */
.campo__error::before { content: "⚠"; }

.entrada, .selector, .area-texto {
  width: 100%;
  min-height: var(--toque-min);
  padding: var(--e3) var(--e4);
  /* 16px exactos: con menos, iOS hace zoom automático al enfocar el campo
     y descoloca toda la pantalla. */
  font-size: var(--txt-md);
  color: var(--texto);
  background: var(--superficie);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  appearance: none;
}

.entrada:hover, .selector:hover, .area-texto:hover { border-color: var(--marca-400); }

.entrada:focus, .selector:focus, .area-texto:focus {
  outline: none;
  border-color: var(--marca-500);
  box-shadow: 0 0 0 3px var(--marca-fondo-suave);
}

.entrada::placeholder, .area-texto::placeholder { color: var(--texto-tenue); }

/* Campo deshabilitado: gris y sin poder tocarse (ej. "Cuenta corriente" sin
   cliente elegido o sin crédito disponible, 2026/09/15). No había regla para
   este estado; sin ella, el navegador lo dejaba casi igual a uno editable. */
.entrada:disabled, .selector:disabled, .area-texto:disabled {
  background: var(--fondo-alterno);
  color: var(--texto-tenue);
  cursor: not-allowed;
}

/* Campo de sólo lectura: mismo gris que uno deshabilitado (ej. el buscador
   de cliente de venta en salón, ocupado con el cliente ya elegido,
   2026/09/15), pero el texto queda con color normal -- a diferencia de
   disabled, acá el dato mostrado es justo lo importante de leer. */
.entrada:read-only, .area-texto:read-only {
  background: var(--fondo-alterno);
  cursor: default;
}

.entrada[aria-invalid="true"], .selector[aria-invalid="true"], .area-texto[aria-invalid="true"] {
  border-color: var(--error-500);
}

/* Campo de contraseña acompañado de acciones (ver / generar / copiar).
   La entrada conserva el alto de toque y los botones no la estiran. */
.campo-clave { display: flex; gap: var(--e2); }
.campo-clave .entrada { flex: 1; min-width: 0; }
.campo-clave .boton { flex: none; }

.area-texto { min-height: 110px; resize: vertical; line-height: 1.55; }

.selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235a5370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--e4) center;
  padding-right: var(--e10);
}

/* Casillas y radios con área táctil cómoda. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e2) 0;
  cursor: pointer;
  min-height: var(--toque-min);
}

.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--marca-600);
  flex-shrink: 0;
  cursor: pointer;
}

.casilla__texto { font-size: var(--txt-sm); line-height: 1.5; }

/* Grupo de campos en línea a partir de tablet. */
.campos-fila { display: grid; gap: 0 var(--e4); }
@media (min-width: 640px) {
  .campos-fila { grid-template-columns: repeat(var(--columnas, 2), 1fr); }
}

.grupo-campos {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: var(--e5);
  margin-bottom: var(--e6);
  background: var(--superficie);
}
.grupo-campos > legend {
  font-weight: 700;
  font-size: var(--txt-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-suave);
  padding-inline: var(--e2);
}

/* --------------------------------------------------------------------------
   6. TARJETAS Y SUPERFICIES
   -------------------------------------------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-sm);
}

.tarjeta--suave { box-shadow: none; }
.tarjeta--elevada { box-shadow: var(--sombra); }

.tarjeta__cuerpo { padding: var(--e5); }
.tarjeta__encabezado {
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}
.tarjeta__titulo { font-size: var(--txt-lg); font-weight: 700; }
.tarjeta__pie {
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  border-radius: 0 0 var(--radio) var(--radio);
}

/* --------------------------------------------------------------------------
   7. INSIGNIAS Y AVISOS
   -------------------------------------------------------------------------- */

.insignia {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 3px var(--e3);
  border-radius: var(--radio-full);
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.insignia--neutro { background: var(--fondo-alterno); color: var(--texto-suave); }
.insignia--exito  { background: var(--exito-100);  color: var(--exito-700); }
.insignia--aviso  { background: var(--aviso-100);  color: var(--aviso-700); }
.insignia--error  { background: var(--error-100);  color: var(--error-700); }
.insignia--info   { background: var(--info-100);   color: var(--info-700); }
.insignia--marca  { background: var(--marca-fondo-suave); color: var(--marca-texto); }

.aviso {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e4);
  border-radius: var(--radio-sm);
  border-left: 4px solid;
  font-size: var(--txt-sm);
  line-height: 1.5;
}

.aviso__icono { flex-shrink: 0; font-size: 1.1em; line-height: 1.4; }
.aviso__cuerpo { flex: 1; min-width: 0; }
.aviso__titulo { font-weight: 700; margin-bottom: 2px; }

.aviso--exito { background: var(--exito-100); border-color: var(--exito-500); color: var(--exito-700); }
.aviso--error { background: var(--error-100); border-color: var(--error-500); color: var(--error-700); }
.aviso--aviso { background: var(--aviso-100); border-color: var(--aviso-500); color: var(--aviso-700); }
.aviso--info  { background: var(--info-100);  border-color: var(--info-500);  color: var(--info-700); }

/* --------------------------------------------------------------------------
   8. TABLAS
   En móvil no se hacen scroll horizontal a ciegas: cada tabla vive dentro de
   un contenedor con su propio overflow, y el body nunca se desplaza en x.
   -------------------------------------------------------------------------- */

.tabla-envoltorio {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--txt-sm);
  min-width: 560px;
}

.tabla th, .tabla td {
  padding: var(--e3) var(--e4);
  text-align: left;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}

.tabla th {
  font-weight: 700;
  font-size: var(--txt-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  background: var(--superficie-2);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--superficie-hover); }

.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Encabezado de columna ordenable (Etapa 2.4). */
.enlace-orden { color: inherit; text-decoration: none; }
.enlace-orden:hover { color: var(--texto); text-decoration: underline; }
.enlace-orden.es-actual { color: var(--texto); }

/* --------------------------------------------------------------------------
   9. ESTADO VACÍO
   -------------------------------------------------------------------------- */

.vacio {
  text-align: center;
  padding: var(--e12) var(--e5);
  color: var(--texto-suave);
}
.vacio__icono { font-size: 3rem; margin-bottom: var(--e4); opacity: .55; }
.vacio__titulo { font-size: var(--txt-lg); font-weight: 700; color: var(--texto); margin-bottom: var(--e2); }
.vacio__texto { max-width: 46ch; margin-inline: auto; margin-bottom: var(--e5); }

/* --------------------------------------------------------------------------
   10. PAGINADOR
   -------------------------------------------------------------------------- */

.paginador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  justify-content: center;
  align-items: center;
  margin: var(--e8) 0;
}

.paginador__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--toque-min);
  min-height: var(--toque-min);
  padding: 0 var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--txt-sm);
  transition: background var(--transicion), border-color var(--transicion);
}
.paginador__enlace:hover { background: var(--superficie-hover); border-color: var(--marca-400); }
.paginador__enlace.es-actual {
  background: var(--marca-600);
  border-color: var(--marca-600);
  color: #fff;
}
.paginador__puntos { color: var(--texto-tenue); padding: 0 var(--e1); }

/* --------------------------------------------------------------------------
   11. NOTIFICACIONES FLOTANTES
   -------------------------------------------------------------------------- */

.avisos-flotantes {
  position: fixed;
  left: var(--e4);
  right: var(--e4);
  bottom: calc(var(--alto-barra-inferior) + var(--e4));
  z-index: var(--z-aviso);
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  pointer-events: none;
}

@media (min-width: 768px) {
  .avisos-flotantes {
    left: auto;
    /* Un poco más que --e6: la sombra del aviso (--sombra-lg) desenfoca hasta
       28px, y con 24px de margen la sombra quedaba "pisando" el borde de la
       ventana — se veía como si el cuadro se saliera de cuadro. */
    right: var(--e8);
    bottom: var(--e8);
    max-width: min(400px, calc(100vw - 2 * var(--e8)));
  }
}

.avisos-flotantes .aviso {
  pointer-events: auto;
  box-shadow: var(--sombra-lg);
  border-left-width: 4px;
  animation: entrar-aviso 240ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes entrar-aviso {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Aviso de versión nueva (2026/09/22, ver public/assets/js/app.js): fijo
   arriba de todo -- incluso de la barra superior sticky, con z-index más
   alto -- y a propósito SIN botón de cerrar: la única forma de sacarlo es
   actualizar. Nunca se recarga sola (podría tirar un formulario a medio
   llenar) ni pisa la sesión. */
.banner-version-nueva {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: calc(var(--z-aviso) + 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  flex-wrap: wrap;
  padding: var(--e3) var(--e5);
  background: var(--info-500);
  color: #fff;
  text-align: center;
  font-size: var(--txt-sm);
  box-shadow: var(--sombra-lg);
}
.banner-version-nueva button {
  flex-shrink: 0;
  background: #fff;
  color: var(--info-700);
  border: 0;
  border-radius: var(--radio-sm);
  padding: var(--e1) var(--e4);
  font-weight: 600;
  font-size: var(--txt-sm);
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   12. CARGANDO
   -------------------------------------------------------------------------- */

.cargando {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.esqueleto {
  background: linear-gradient(90deg,
    var(--fondo-alterno) 25%, var(--superficie-hover) 50%, var(--fondo-alterno) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
  border-radius: var(--radio-sm);
}

@keyframes brillo {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   13. IMPRESIÓN
   Órdenes de preparación, etiquetas y comprobantes se imprimen de verdad.
   -------------------------------------------------------------------------- */

@media print {
  .sin-imprimir, .barra-superior, .barra-inferior, .panel-lateral,
  .avisos-flotantes, .boton-whatsapp { display: none !important; }

  body { background: #fff; color: #000; }
  .tarjeta { box-shadow: none; border: 1px solid #999; }
  a[href]::after { content: ""; }   /* no imprimir la URL detrás de cada enlace */
  .tabla-envoltorio { overflow: visible; border: 0; }
  .tabla { min-width: 0; font-size: 11pt; }
  .linea-con-foto img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Comprobantes y tickets: la fotito de cada artículo al lado de su descripción. */
.linea-con-foto { display: flex; align-items: center; gap: .6rem; }
.linea-con-foto img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid #ccc; }

/* --------------------------------------------------------------------------
   SELECTOR DE ACCESO
   Tres puertas de entrada (tienda, panel, inversor) contra tablas distintas.
   Va arriba del formulario: quien se equivoca de puerta ve un error que
   parece de contraseña, así que el desvío tiene que estar antes de que lo
   intente, no al pie donde el navegador lo tapa con el autocompletado.
   -------------------------------------------------------------------------- */

.selector-acceso {
  display: flex;
  gap: var(--e1);
  padding: var(--e1);
  margin-bottom: var(--e6);
  background: var(--fondo-alterno);
  border-radius: var(--radio-sm);
}

.selector-acceso__opcion {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  min-height: 40px;
  padding: var(--e2) var(--e3);
  border-radius: var(--radio-xs);
  font-size: var(--txt-sm);
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  text-align: center;
  transition: background var(--transicion), color var(--transicion);
}

.selector-acceso__opcion:hover { color: var(--texto); background: var(--superficie-hover); }

.selector-acceso__opcion.es-actual {
  background: var(--superficie);
  color: var(--marca-texto);
  font-weight: 700;
  box-shadow: var(--sombra-sm);
}

/* En pantallas muy angostas el texto se apila bajo el icono antes que
   desbordar. */
@media (max-width: 380px) {
  .selector-acceso__opcion { flex-direction: column; gap: 2px; font-size: var(--txt-xs); }
}