/* ==========================================================================
   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 ---
     Violeta cálido: el rubro es peluches y regalería. Un azul corporativo
     comunica sistema de gestión; esto tiene que comunicar producto. */
  --marca-50:  #f6f2ff;
  --marca-100: #ece3ff;
  --marca-200: #dbcaff;
  --marca-300: #c1a4ff;
  --marca-400: #a374fb;
  --marca-500: #8b4df2;
  --marca-600: #7a2fe0;
  --marca-700: #6820c0;
  --marca-800: #571d9c;
  --marca-900: #481b7d;

  /* Acento coral, para llamadas a la acción secundarias y destacados. */
  --acento-100: #ffe8e3;
  --acento-300: #ffab97;
  --acento-500: #ff6b47;
  --acento-600: #ed4f28;
  --acento-700: #c53a17;

  /* --- 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:            #fbfafd;
  --fondo-alterno:    #f4f2f8;
  --superficie:       #ffffff;
  --superficie-2:     #faf9fc;
  --superficie-hover: #f4f2f8;
  --borde:            #e4e1ec;
  --borde-fuerte:     #cbc6d9;

  --texto:        #1c1728;
  --texto-suave:  #5a5370;
  --texto-tenue:  #837c99;
  --texto-invertido: #ffffff;

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

  /* --- Formas --- */
  --radio-xs: 6px;
  --radio-sm: 10px;
  --radio:    14px;
  --radio-lg: 20px;
  --radio-xl: 28px;
  --radio-full: 999px;

  /* --- Sombras: suaves y con tinte de marca, no grises puros --- */
  --sombra-sm: 0 1px 2px rgba(28, 23, 40, .06), 0 1px 3px rgba(28, 23, 40, .04);
  --sombra:    0 2px 6px rgba(28, 23, 40, .07), 0 8px 20px -8px rgba(28, 23, 40, .10);
  --sombra-lg: 0 8px 28px -6px rgba(28, 23, 40, .16), 0 2px 8px rgba(28, 23, 40, .06);
  --sombra-marca: 0 6px 20px -6px rgba(122, 47, 224, .45);

  /* --- 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 ---
     Stack del sistema: carga instantánea y se ve nativa en cada plataforma.
     El objetivo del cap. 9 es contenido visible en menos de 2,5 s en móvil;
     una webfont bloqueante es lo primero que lo rompe. */
  --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", "Noto Sans", 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:            #14111c;
    --fondo-alterno:    #1a1626;
    --superficie:       #1e1a2b;
    --superficie-2:     #252036;
    --superficie-hover: #2c2640;
    --borde:            #332c48;
    --borde-fuerte:     #463d63;

    --texto:        #f2f0f7;
    --texto-suave:  #b8b1cc;
    --texto-tenue:  #8d85a5;
    --texto-invertido: #14111c;

    --marca-texto:  #c1a4ff;
    --marca-fondo-suave: #251d3d;

    --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:            #14111c;
  --fondo-alterno:    #1a1626;
  --superficie:       #1e1a2b;
  --superficie-2:     #252036;
  --superficie-hover: #2c2640;
  --borde:            #332c48;
  --borde-fuerte:     #463d63;

  --texto:        #f2f0f7;
  --texto-suave:  #b8b1cc;
  --texto-tenue:  #8d85a5;
  --texto-invertido: #14111c;

  --marca-texto:  #c1a4ff;
  --marca-fondo-suave: #251d3d;

  --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 {
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
  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: 0 6px 20px -6px rgba(237, 79, 40, .45);
}
.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); }

.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; }

/* --------------------------------------------------------------------------
   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); }
}

/* --------------------------------------------------------------------------
   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; }
}

/* --------------------------------------------------------------------------
   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); }
}