/* ============================================================================
   Sistema de componentes — Ajos & Cebollas
   ----------------------------------------------------------------------------
   Extraído de las 370 líneas de <style> que viajaban dentro de cada respuesta
   HTML del layout. Ahora se cachea, igual que ya se hacía con el inbox.
   Depende de tokens.css: aquí no debería aparecer ni un color literal.
   ============================================================================ */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}
/*
 * Desplazamiento suave, pero no al volver atras.
 *
 * `scroll-behavior: smooth` en <html> se aplica tambien cuando el navegador
 * restaura la posicion al pulsar "atras", y ahi pelea con ella: la pagina
 * volvia arriba del todo en vez de al sitio donde estabas. Aqui queda para los
 * saltos dentro de la pagina; lo que necesita animarse desde JavaScript lo pide
 * con scrollIntoView({ behavior: 'smooth' }).
 */
@media (prefers-reduced-motion: no-preference) {
    :target { scroll-behavior: smooth; }
}

body {
    min-height: 100%;
    font-family: var(--fuente);
    font-size: var(--txt-base);
    line-height: var(--alto-normal);
    color: var(--texto);
    background: var(--fondo);
    display: flex;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

/* Las cifras se comparan en columna: deben ocupar todas lo mismo. */
table, .tabular, .num-cell, time, .cifra { font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 {
    color: var(--texto-titulo);
    letter-spacing: var(--track-titular);
    line-height: var(--alto-apretado);
    text-wrap: balance;
    font-weight: var(--peso-bold);
}
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(--a-600); }

img, svg { max-width: 100%; }
.ico { flex-shrink: 0; display: block; }

/* ── Foco ─────────────────────────────────────────────────────────────────────
   Antes no había ni un solo estilo de foco en toda la aplicación: quien navega
   con teclado se guiaba por el contorno por defecto del navegador, y en los
   <div onclick> ni siquiera eso. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--a-600);
    outline-offset: var(--anillo-offset);
    border-radius: var(--r-sm);
}

/* Salto al contenido: obligatorio para teclado, no estaba. */
.saltar {
    position: absolute;
    left: var(--e-3);
    top: calc(var(--e-3) * -4);
    z-index: var(--z-aviso);
    padding: var(--e-2) var(--e-4);
    background: var(--n-900);
    color: var(--n-0);
    border-radius: var(--r-md);
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    text-decoration: none;
    transition: top var(--t-normal) var(--curva);
}
.saltar:focus { top: var(--e-3); }

.solo-lectores {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

/*
 * El atributo hidden, defendido.
 *
 * El navegador lo aplica con `[hidden] { display: none }` desde SU hoja, que
 * pierde contra cualquier regla de autor sin importar la especificidad. Basta
 * un `.caja { display: flex }` para que el elemento siga viendose con hidden
 * puesto.
 *
 * Paso con el boton de detener el envio: se pintaba desde que cargaba la
 * pagina y seguia ahi con el envio ya terminado, invitando a frenar algo que
 * ya habia salido. El JavaScript hacia su trabajo -ponia y quitaba hidden-,
 * pero no se veia nada.
 */
[hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BARRA LATERAL
   ══════════════════════════════════════════════════════════════════════════ */
.lateral {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ancho-lateral);
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    display: flex;
    flex-direction: column;
    z-index: var(--z-lateral);
    transition: transform var(--t-lento) var(--curva);
}

.lateral-marca {
    display: block;
    padding: var(--e-5) var(--e-4);
    border-bottom: 1px solid var(--borde);
    text-decoration: none;
}
/* El logo manda el ancho, no la altura: es una imagen apaisada y lo que no
   puede es desbordar el lateral. La altura sale sola de su proporcion. */
.lateral-marca-logo {
    display: block;
    width: 100%;
    max-width: 11.5rem;
    height: auto;
}

.lateral-nav {
    flex: 1;
    padding: var(--e-3) var(--e-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.nav-grupo {
    font-size: var(--txt-2xs);
    font-weight: var(--peso-semi);
    color: var(--n-400);
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    padding: var(--e-4) var(--e-3) var(--e-2);
}
.nav-grupo:first-child { padding-top: var(--e-2); }

.nav-enlace {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    min-height: var(--alto-toque);
    border-radius: var(--r-md);
    font-size: var(--txt-base);
    font-weight: var(--peso-medio);
    color: var(--n-600);
    text-decoration: none;
    position: relative;
    transition: background var(--t-rapido) var(--curva),
                color var(--t-rapido) var(--curva);
}
.nav-enlace .ico { color: var(--n-400); transition: color var(--t-rapido) var(--curva); }
.nav-enlace:hover { background: var(--n-100); color: var(--texto-titulo); }
.nav-enlace:hover .ico { color: var(--a-500); }

.nav-enlace.activo {
    background: var(--a-50);
    color: var(--a-700);
    font-weight: var(--peso-semi);
}
.nav-enlace.activo .ico { color: var(--a-600); }
/* Marcador de página actual: una barra, no un bloque oscuro entero. */
.nav-enlace.activo::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 1.25rem;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    background: var(--a-600);
}

.nav-sello {
    margin-left: auto;
    min-width: 1.25rem;
    padding: 1px var(--e-2);
    border-radius: var(--r-full);
    background: var(--a-600);
    color: var(--n-0);
    font-size: var(--txt-2xs);
    font-weight: var(--peso-bold);
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.nav-sello--aviso { background: var(--av-600); }

.lateral-pie {
    padding: var(--e-3) var(--e-2) var(--e-4);
    border-top: 1px solid var(--borde);
}

/* Interruptor de notificaciones */
.notif-fila {
    display: flex; align-items: center; gap: var(--e-2);
    width: 100%;
    padding: var(--e-2) var(--e-3);
    min-height: var(--alto-toque);
    background: none; border: none;
    border-radius: var(--r-md);
    font-family: inherit; font-size: var(--txt-sm);
    color: var(--n-600); text-align: left;
    cursor: pointer;
    transition: background var(--t-rapido) var(--curva);
}
.notif-fila:hover { background: var(--n-100); }
.notif-fila .ico { color: var(--n-400); }
.notif-etiqueta { flex: 1; min-width: 0; }
.notif-switch {
    width: 2rem; height: 1.125rem;
    border-radius: var(--r-full);
    background: var(--n-300);
    position: relative; flex-shrink: 0;
    transition: background var(--t-normal) var(--curva);
}
.notif-switch::after {
    content: '';
    position: absolute; top: 2px; left: 2px;
    width: 0.875rem; height: 0.875rem;
    border-radius: 50%; background: var(--n-0);
    box-shadow: var(--s-xs);
    transition: transform var(--t-normal) var(--curva-muelle);
}
.notif-switch.activo { background: var(--ok-600); }
.notif-switch.activo::after { transform: translateX(0.875rem); }
.notif-bloqueado {
    display: flex; align-items: flex-start; gap: var(--e-2);
    font-size: var(--txt-2xs);
    color: var(--av-800);
    background: var(--av-50);
    border-radius: var(--r-md);
    padding: var(--e-2) var(--e-3);
    margin-bottom: var(--e-2);
    line-height: var(--alto-normal);
}

.lateral-usuario {
    display: flex; align-items: center; gap: var(--e-3);
    padding: var(--e-2) var(--e-3);
    margin-bottom: var(--e-2);
}
.avatar {
    width: 2rem; height: 2rem;
    border-radius: var(--r-md);         /* squircle, no círculo */
    background: var(--a-600);
    color: var(--n-0);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--txt-sm);
    font-weight: var(--peso-bold);
    flex-shrink: 0; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 2.75rem; height: 2.75rem; font-size: var(--txt-md); border-radius: var(--r-lg); }
.avatar--sm { width: 1.75rem; height: 1.75rem; font-size: var(--txt-2xs); border-radius: var(--r-sm); }

.lateral-usuario-info { min-width: 0; }
.lateral-usuario-nombre {
    font-size: var(--txt-sm);
    font-weight: var(--peso-semi);
    color: var(--texto-titulo);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lateral-usuario-correo {
    font-size: var(--txt-2xs);
    color: var(--texto-tenue);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lateral-salir {
    display: flex; align-items: center; gap: var(--e-2);
    width: 100%;
    padding: var(--e-2) var(--e-3);
    min-height: var(--alto-toque);
    background: none;
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: var(--n-600);
    cursor: pointer; text-decoration: none;
    transition: background var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                color var(--t-rapido) var(--curva);
}
.lateral-salir:hover {
    background: var(--n-100);
    border-color: var(--borde-fuerte);
    color: var(--texto-titulo);
}
.lateral-salir:active { transform: translateY(1px); }

/* ══════════════════════════════════════════════════════════════════════════
   CUERPO
   ══════════════════════════════════════════════════════════════════════════ */
.cuerpo {
    margin-left: var(--ancho-lateral);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-width: 0;
}
.principal {
    flex: 1;
    padding: var(--e-8);
    min-width: 0;
}

.btn-menu {
    display: none;
    position: fixed; top: var(--e-3); left: var(--e-3);
    z-index: calc(var(--z-lateral) + 1);
    width: var(--alto-toque); height: var(--alto-toque);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    box-shadow: var(--s-sm);
    color: var(--n-700);
    align-items: center; justify-content: center;
    cursor: pointer;
}
.velo {
    position: fixed; inset: 0;
    z-index: var(--z-velo);
    background: rgba(27, 22, 34, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-lento) var(--curva);
}
.velo.abierto { opacity: 1; pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   AVISOS
   ══════════════════════════════════════════════════════════════════════════ */
.aviso {
    display: flex; align-items: flex-start; gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-lg);
    margin-bottom: var(--e-5);
    font-size: var(--txt-base);
    line-height: var(--alto-normal);
    border: 1px solid transparent;
}
.aviso .ico { margin-top: 1px; }
.aviso-titulo { font-weight: var(--peso-semi); }
.aviso-detalle { font-size: var(--txt-sm); opacity: 0.88; margin-top: 2px; }
.aviso--ok  { background: var(--ok-50); color: var(--ok-800); border-color: var(--ok-200); }
.aviso--av  { background: var(--av-50); color: var(--av-800); border-color: var(--av-200); }
.aviso--er  { background: var(--er-50); color: var(--er-800); border-color: var(--er-200); }

/* ══════════════════════════════════════════════════════════════════════════
   CABECERA DE PÁGINA
   ══════════════════════════════════════════════════════════════════════════ */
.cabecera {
    display: flex; align-items: flex-end;
    gap: var(--e-4);
    flex-wrap: wrap;
    margin-bottom: var(--e-6);
    padding-bottom: var(--e-5);
    border-bottom: 1px solid var(--borde);
}
.cabecera-cuerpo { flex: 1; min-width: 0; }
.cabecera-titulo {
    font-size: var(--txt-2xl);
    font-weight: var(--peso-negro);
    color: var(--texto-titulo);
    letter-spacing: var(--track-titular);
    line-height: var(--alto-apretado);
}
.cabecera-sub {
    font-size: var(--txt-sm);
    color: var(--texto-tenue);
    margin-top: var(--e-1);
    max-width: var(--ancho-lectura);
}
.cabecera-acciones { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; }
.miga { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.miga-archivo {
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    font-family: var(--fuente-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 22ch;
}

.seccion-titulo {
    font-size: var(--txt-lg);
    font-weight: var(--peso-bold);
    color: var(--texto-titulo);
    letter-spacing: var(--track-titular);
    display: flex; align-items: center; gap: var(--e-3);
    margin-bottom: var(--e-4);
}
.seccion-sub {
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    font-weight: var(--peso-normal);
    letter-spacing: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TARJETAS
   ══════════════════════════════════════════════════════════════════════════ */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: var(--s-sm);
    padding: var(--e-6);
    margin-bottom: var(--e-5);
}
.tarjeta--plana { padding: 0; overflow: hidden; }
.tarjeta-cabecera {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4);
    margin-bottom: var(--e-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   BOTONES
   ══════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    min-height: var(--alto-toque);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5; cursor: not-allowed; transform: none;
}

.btn--principal { background: var(--a-600); color: var(--n-0); }
.btn--principal:hover:not(:disabled) { background: var(--a-700); box-shadow: var(--s-acento); }

.btn--ok { background: var(--ok-600); color: var(--n-0); }
.btn--ok:hover:not(:disabled) { background: var(--ok-800); }

.btn--peligro { background: var(--er-600); color: var(--n-0); }
.btn--peligro:hover:not(:disabled) { background: var(--er-800); }

/* Blanco sobre blanco no se ve: dentro de una tarjeta o de una fila de tabla
   este boton desaparecia y parecia texto suelto. Lleva fondo gris y borde
   marcado para que se lea como un boton sin competir con el principal. */
/* n-200 y no n-100: el fondo de la pagina ya es n-100, asi que un boton de ese
   tono se confunde con el. */
.btn--suave {
    background: var(--n-200);
    color: var(--n-800);
    border-color: var(--borde-fuerte);
}
.btn--suave:hover:not(:disabled) {
    background: var(--n-300, #d6d2da);
    border-color: var(--n-400);
    color: var(--texto-titulo);
}

/* Tercer nivel: ni relleno ni fantasma. Reduce el ruido cuando hay tres
   acciones juntas en una fila de tabla. */
.btn--texto {
    background: none; color: var(--a-600);
    padding-inline: var(--e-2);
    min-height: auto;
}
.btn--texto:hover:not(:disabled) { color: var(--a-700); text-decoration: underline; }

.btn--sm {
    padding: var(--e-1) var(--e-3);
    min-height: 2rem;
    font-size: var(--txt-sm);
    border-radius: var(--r-sm);
}
.btn--icono { padding: var(--e-2); min-width: var(--alto-toque); }

/* La "P" de plantilla, delante del nombre del proveedor.
   Mismo azul y misma letra que la marca del chat: si en una pantalla significa
   "salio como plantilla", en la otra tiene que significar lo mismo. No usa el
   acento del sistema —que es morado— a proposito, para no confundirse con los
   elementos pulsables. */
.marca-plantilla {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.125rem; height: 1.125rem; border-radius: 50%;
    margin-right: var(--e-2);
    background: #2563eb; color: #fff;
    font-size: var(--txt-2xs); font-weight: 800; line-height: 1;
    letter-spacing: 0;
    vertical-align: middle;
    flex: none;
}

/* Botones de accion dentro de una fila de tabla.
   Sin un ancho comun la columna queda en zigzag: "Eliminar" al lado de
   "Cambiar contrasena", "Enviar" debajo de "Reintentar". Se les da el mismo
   ancho —el del texto mas largo— y el contenido centrado, para que la columna
   se lea como una columna. En movil se suelta: ahi manda que quepan. */
.btn--fila {
    min-width: 10.5rem;
    justify-content: center;
}
@media (max-width: 40rem) {
    .btn--fila { min-width: 0; flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLAS
   ══════════════════════════════════════════════════════════════════════════ */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left;
    padding: var(--e-3) var(--e-4);
    font-size: var(--txt-base);
    border-bottom: 1px solid var(--borde);
}
th {
    background: var(--n-50);
    font-weight: var(--peso-semi);
    color: var(--texto-tenue);
    font-size: var(--txt-2xs);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    white-space: nowrap;
}
tbody tr { transition: background var(--t-rapido) var(--curva); }
tbody tr:hover td { background: var(--n-50); }
tbody tr:last-child td { border-bottom: none; }
.num-cell { text-align: center; font-weight: var(--peso-semi); }

/* ══════════════════════════════════════════════════════════════════════════
   SELLOS DE ESTADO
   --------------------------------------------------------------------------
   Un único juego para toda la aplicación. Antes el historial usaba una paleta
   y la pantalla de resultados otra distinta para el mismo estado "Enviado".
   ══════════════════════════════════════════════════════════════════════════ */
.sello {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: 3px var(--e-2);
    border-radius: var(--r-sm);
    font-size: var(--txt-2xs);
    font-weight: var(--peso-semi);
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/*
 * Los seis fondos eran del paso -50: entre 1,05 y 1,11 de contraste contra el
 * blanco de la tarjeta, o sea practicamente invisibles. El texto se leia bien
 * -entre 6 y 9- pero de un vistazo los seis sellos parecian el mismo, y
 * distinguir "Enviado" de "Pendiente" obligaba a leer cada uno.
 *
 * Con el paso -200 y un borde del tono fuerte, el color hace su trabajo: se
 * ve cual es cual sin leer. El texto sigue por encima de 4,5 en los seis.
 */
.sello { border: 1px solid transparent; }
.sello--ok      { background: var(--ok-200); color: var(--ok-800); border-color: var(--ok-600); }
.sello--aviso   { background: var(--av-200); color: var(--av-800); border-color: var(--av-600); }
.sello--error   { background: var(--er-200); color: var(--er-800); border-color: var(--er-600); }
.sello--neutro  { background: var(--n-200);  color: var(--n-700); border-color: var(--n-400); }
.sello--acento  { background: var(--a-200);  color: var(--a-700); border-color: var(--a-600); }
.sello--calido  { background: var(--c-200);  color: var(--c-700); border-color: var(--c-500); }

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIOS
   ══════════════════════════════════════════════════════════════════════════ */
.campo { margin-bottom: var(--e-5); }
.campo label,
.etiqueta {
    display: block;
    margin-bottom: var(--e-2);
    font-weight: var(--peso-semi);
    color: var(--n-700);
    font-size: var(--txt-sm);
}
input[type="text"], input[type="tel"], input[type="url"], input[type="date"],
input[type="email"], input[type="number"], input[type="search"],
input[type="password"],
select, textarea {
    width: 100%;
    padding: var(--e-3) var(--e-3);
    min-height: var(--alto-toque);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--r-md);
    /* 16px: por debajo de eso, iOS hace zoom al enfocar y descuadra la página */
    font-size: 1rem;
    font-family: inherit;
    color: var(--texto);
    background: var(--superficie);
    outline: none;
    transition: border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
@media (min-width: 48rem) {
    input[type="text"], input[type="tel"], input[type="url"], input[type="date"],
    input[type="email"], input[type="number"], input[type="search"],
input[type="password"],
    select, textarea { font-size: var(--txt-md); }
}
input:focus, select:focus, textarea:focus {
    border-color: var(--a-500);
    box-shadow: var(--anillo);
}
input::placeholder, textarea::placeholder { color: var(--n-400); }
input[aria-invalid="true"], .campo-invalido { border-color: var(--er-600); }
textarea { resize: vertical; min-height: 6rem; line-height: var(--alto-normal); }
.pista { font-size: var(--txt-xs); color: var(--texto-tenue); margin-top: var(--e-1); }
.pista--error { color: var(--er-600); font-weight: var(--peso-medio); }

/*
 * 24 px de lado: el minimo para acertarle con el dedo.
 *
 * Estaban en 17. Esta aplicacion se usa de pie en el mercado, con una mano y
 * a menudo con prisa; fallar una casilla ahi significa mandarle el pedido a
 * quien no era, o no mandarselo a quien si.
 */
input[type="checkbox"] {
    width: 1.5rem; height: 1.5rem;
    accent-color: var(--a-600);
    cursor: pointer;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODALES
   ══════════════════════════════════════════════════════════════════════════ */
.modal-velo {
    position: fixed; inset: 0;
    z-index: var(--z-modal);
    background: rgba(27, 22, 34, 0.45);
    display: none;
    align-items: center; justify-content: center;
    padding: var(--e-4);
}
.modal-velo.abierto { display: flex; animation: aparecer var(--t-normal) var(--curva); }
.modal {
    background: var(--superficie);
    border-radius: var(--r-xl);
    padding: var(--e-6);
    width: 100%;
    max-width: 30rem;
    box-shadow: var(--s-xl);
    animation: subir var(--t-lento) var(--curva-salida);
    max-height: calc(100dvh - var(--e-8));
    overflow-y: auto;
}
.modal h3 { margin-bottom: var(--e-2); }
.modal > p { color: var(--texto-tenue); font-size: var(--txt-sm); margin-bottom: var(--e-5); }
.modal-acciones {
    display: flex; gap: var(--e-2); justify-content: flex-end;
    margin-top: var(--e-6); flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   ESTADO VACÍO
   ══════════════════════════════════════════════════════════════════════════ */
.vacio {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding: var(--e-12) var(--e-5);
    color: var(--texto-tenue);
}
.vacio-icono {
    width: 3.5rem; height: 3.5rem;
    border-radius: var(--r-lg);
    background: var(--n-100);
    color: var(--n-400);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--e-4);
}
.vacio-titulo {
    font-size: var(--txt-md);
    font-weight: var(--peso-semi);
    color: var(--n-700);
    margin-bottom: var(--e-1);
}
.vacio p { font-size: var(--txt-sm); max-width: 38ch; }

/* ══════════════════════════════════════════════════════════════════════════
   NOTIFICACIONES FLOTANTES
   ══════════════════════════════════════════════════════════════════════════ */
/*
 * Arriba y centrados, como los avisos del propio sistema.
 *
 * Estaban abajo a la derecha, que es donde se mira menos, y crecian hacia
 * arriba: el mas nuevo empujaba a los demas y el ojo tenia que perseguirlos.
 */
#contenedorAvisos {
    position: fixed;
    top: var(--e-4); left: 50%; transform: translateX(-50%);
    z-index: var(--z-aviso);
    display: flex; flex-direction: column; gap: var(--e-2);
    pointer-events: none;
    width: max-content;
    max-width: calc(100vw - var(--e-6));
}
.flotante {
    position: relative;
    overflow: hidden;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    box-shadow: var(--s-lg);
    padding: var(--e-3) var(--e-4);
    min-width: 17rem; max-width: 22rem;
    display: flex; gap: var(--e-3); align-items: center;
    pointer-events: all; cursor: pointer;
    text-align: left;
    /*
     * Sin animacion de entrada.
     *
     * Con varios mensajes seguidos, cada aviso tardaba en aparecer y en irse;
     * el tiempo se lo comia el movimiento y no daba tiempo a leerlos todos.
     * Aparecen y ya.
     */
    transition: box-shadow var(--t-normal) var(--curva),
                transform var(--t-normal) var(--curva),
                opacity var(--t-lento) var(--curva);
}
.flotante:hover { box-shadow: var(--s-xl); transform: translateY(-2px); }
.flotante.saliendo { opacity: 0; }
.flotante-avatar-caja { position: relative; flex-shrink: 0; }
.flotante-wa {
    position: absolute; bottom: -3px; right: -3px;
    width: 1.125rem; height: 1.125rem;
    border-radius: 50%;
    background: var(--wa-500);
    border: 2px solid var(--superficie);
    display: flex; align-items: center; justify-content: center;
    color: var(--n-0);
}
.flotante-cuerpo { flex: 1; min-width: 0; }
.flotante-origen {
    font-size: var(--txt-2xs);
    color: var(--ok-600);
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
}
.flotante-nombre {
    font-size: var(--txt-base);
    font-weight: var(--peso-semi);
    color: var(--texto-titulo);
    line-height: var(--alto-apretado);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flotante-msg {
    font-size: var(--txt-xs);
    color: var(--texto-tenue);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.flotante-cerrar {
    background: none; border: none; cursor: pointer;
    color: var(--n-400);
    width: 1.75rem; height: 1.75rem;
    border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; align-self: flex-start;
    transition: background var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.flotante-cerrar:hover { background: var(--n-100); color: var(--n-700); }
.flotante-barra {
    position: absolute; bottom: 0; left: 0;
    height: 2px; background: var(--a-500);
    animation: vaciarBarra 5s linear forwards;
}

/* ══════════════════════════════════════════════════════════════════════════
   ANIMACIONES
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes aparecer      { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir         { from { opacity: 0; transform: translateY(12px) scale(0.98); }
                           to   { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes entrarDerecha { from { opacity: 0; transform: translateX(1.5rem) scale(0.96); }
                           to   { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes vaciarBarra   { from { width: 100%; } to { width: 0; } }
@keyframes latir {
    0%, 100% { box-shadow: 0 0 0 0 rgba(153, 99, 26, 0.45); }
    70%      { box-shadow: 0 0 0 6px rgba(153, 99, 26, 0); }
}

/* Entrada escalonada: las cosas no aparecen todas de golpe. */
.escalonar > * {
    animation: subir var(--t-normal) var(--curva-salida) both;
}
.escalonar > *:nth-child(2) { animation-delay: 30ms; }
.escalonar > *:nth-child(3) { animation-delay: 60ms; }
.escalonar > *:nth-child(4) { animation-delay: 90ms; }
.escalonar > *:nth-child(n+5) { animation-delay: 120ms; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGINACIÓN
   ══════════════════════════════════════════════════════════════════════════ */
.paginacion {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--e-4); flex-wrap: wrap;
    font-size: var(--txt-sm);
}
.paginacion-info { color: var(--texto-tenue); }
.paginacion-paginas { display: flex; gap: var(--e-1); flex-wrap: wrap; }
.paginacion-paginas a,
.paginacion-paginas span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; min-height: 2rem;
    padding: 0 var(--e-2);
    border-radius: var(--r-sm);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background var(--t-rapido) var(--curva);
}
.paginacion-paginas a { color: var(--n-700); background: var(--n-100); }
.paginacion-paginas a:hover { background: var(--n-200); }
.paginacion-actual { background: var(--a-600) !important; color: var(--n-0); font-weight: var(--peso-semi); }
.paginacion-inerte { color: var(--n-400); }

/* ══════════════════════════════════════════════════════════════════════════
   MÓVIL
   --------------------------------------------------------------------------
   Un único punto de ruptura estructural (48rem / 768px) en vez de los cinco
   sueltos que había (480, 600, 640, 768, 900).
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 47.9375rem) {
    .btn-menu { display: flex; }
    .lateral {
        transform: translateX(-100%);
        width: 17rem;
        height: 100dvh;
        overflow-y: auto;
        box-shadow: none;
    }
    .lateral.abierto { transform: translateX(0); box-shadow: var(--s-xl); }
    .lateral-marca { padding-top: var(--e-12); }
    .cuerpo { margin-left: 0; }
    .principal { padding: calc(var(--alto-toque) + var(--e-5)) var(--e-4) var(--e-6); }

    .cabecera { align-items: flex-start; }
    .cabecera-acciones { width: 100%; }
    .cabecera-titulo { font-size: var(--txt-xl); }

    .tarjeta { padding: var(--e-4); border-radius: var(--r-md); }
    /* En movil, de lado a lado y tambien arriba */
    #contenedorAvisos {
        left: var(--e-3); right: var(--e-3); top: var(--e-3);
        transform: none; width: auto;
    }
    .flotante { min-width: 0; max-width: none; }
    .modal { border-radius: var(--r-lg); }
    .paginacion { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPATIBILIDAD
   --------------------------------------------------------------------------
   Los nombres de clase que ya usan las 15 vistas, redefinidos sobre los tokens
   nuevos. Sirve para que la migración sea gradual: en cuanto entra este
   archivo, toda la aplicación cambia de tipografía, color y espaciado sin
   tocar ni una vista. Según vaya migrando cada pantalla a los nombres nuevos,
   este bloque se va quedando sin trabajo y acaba borrándose.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabecera de página */
.ph {
    display: flex; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap;
    margin-bottom: var(--e-6); padding-bottom: var(--e-5);
    border-bottom: 1px solid var(--borde);
}
.ph-icon {
    width: 3rem; height: 3rem; border-radius: var(--r-lg);
    display: flex; align-items: center; justify-content: center;
    background: var(--a-50); color: var(--a-600); flex-shrink: 0;
}
.ph-body { flex: 1; min-width: 0; }
.ph-title {
    font-size: var(--txt-2xl); font-weight: var(--peso-negro);
    color: var(--texto-titulo); letter-spacing: var(--track-titular);
    line-height: var(--alto-apretado);
}
.ph-sub { font-size: var(--txt-sm); color: var(--texto-tenue); margin-top: var(--e-1); max-width: var(--ancho-lectura); }
.ph-actions { display: flex; align-items: center; gap: var(--e-2); flex-shrink: 0; }
.ph-breadcrumb { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.ph-breadcrumb-file {
    font-size: var(--txt-xs); color: var(--texto-tenue); font-family: var(--fuente-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch;
}

/* Secciones */
.section-title {
    font-size: var(--txt-lg); font-weight: var(--peso-bold);
    color: var(--texto-titulo); letter-spacing: var(--track-titular);
    padding-left: 0; border-left: none; line-height: var(--alto-apretado);
}
.section-subtitle { font-size: var(--txt-xs); color: var(--texto-tenue); margin-top: var(--e-1); padding-left: 0; }
.section-head { margin-bottom: var(--e-4); }

/* Tarjetas */
.card {
    background: var(--superficie); border: 1px solid var(--borde);
    border-radius: var(--r-lg); box-shadow: var(--s-sm);
    padding: var(--e-6); margin-bottom: var(--e-5);
}
.card-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--e-4); margin-bottom: var(--e-5);
}
.card-header h2 { color: var(--texto-titulo); font-size: var(--txt-lg); }

/* Botones */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    padding: var(--e-2) var(--e-4); min-height: var(--alto-toque);
    border: 1px solid transparent; border-radius: var(--r-md);
    font-family: inherit; font-size: var(--txt-base); font-weight: var(--peso-semi);
    line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--a-600); color: var(--n-0); }
.btn-primary:hover:not(:disabled) { background: var(--a-700); box-shadow: var(--s-acento); }
.btn-success { background: var(--ok-600); color: var(--n-0); }
.btn-success:hover:not(:disabled) { background: var(--ok-800); }
.btn-danger { background: var(--er-600); color: var(--n-0); }
.btn-danger:hover:not(:disabled) { background: var(--er-800); }
.btn-secondary { background: var(--superficie); color: var(--n-700); border-color: var(--borde); }
.btn-secondary:hover:not(:disabled) { background: var(--n-100); border-color: var(--borde-fuerte); color: var(--texto-titulo); }
.btn-sm { padding: var(--e-1) var(--e-3); min-height: 2rem; font-size: var(--txt-sm); border-radius: var(--r-sm); }

/* Tablas */
.table-wrap { overflow-x: auto; }

/* Sellos heredados */
.badge {
    display: inline-flex; align-items: center; gap: var(--e-1);
    padding: 3px var(--e-2); border-radius: var(--r-sm);
    font-size: var(--txt-2xs); font-weight: var(--peso-semi); white-space: nowrap;
}
.badge-approved { background: var(--ok-50); color: var(--ok-800); }
.badge-pending  { background: var(--av-50); color: var(--av-800); }
.badge-rejected { background: var(--er-50); color: var(--er-800); }
.badge-paused   { background: var(--n-100); color: var(--n-700); }

/* Avisos heredados */
.alert {
    display: flex; align-items: flex-start; gap: var(--e-3);
    padding: var(--e-3) var(--e-4); border-radius: var(--r-lg);
    margin-bottom: var(--e-5); font-size: var(--txt-base);
    line-height: var(--alto-normal); border: 1px solid transparent;
}
.alert-success { background: var(--ok-50); color: var(--ok-800); border-color: var(--ok-200); }
.alert-error   { background: var(--er-50); color: var(--er-800); border-color: var(--er-200); }

/* Formularios heredados */
.form-group { margin-bottom: var(--e-5); }
.form-group label {
    display: block; margin-bottom: var(--e-2);
    font-weight: var(--peso-semi); color: var(--n-700); font-size: var(--txt-sm);
}
.form-hint { font-size: var(--txt-xs); color: var(--texto-tenue); margin-top: var(--e-1); }

/* Modales heredados */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: var(--z-modal);
    background: rgba(27,22,34,.45); align-items: center; justify-content: center;
    padding: var(--e-4);
}
.modal-overlay.active { display: flex; animation: aparecer var(--t-normal) var(--curva); }
.modal {
    background: var(--superficie); border-radius: var(--r-xl);
    padding: var(--e-6); width: 100%; max-width: 30rem;
    box-shadow: var(--s-xl); animation: subir var(--t-lento) var(--curva-salida);
    max-height: calc(100dvh - var(--e-8)); overflow-y: auto;
}
.modal h3 { margin-bottom: var(--e-3); color: var(--texto-titulo); font-size: var(--txt-lg); }
.modal-actions {
    display: flex; gap: var(--e-2); justify-content: flex-end;
    margin-top: var(--e-6); flex-wrap: wrap;
}

/* Probar notificaciones: solo aparece cuando estan activas */

/* Precio todavía sin contrastar con la tabla oficial de Meta */
.pie-provisional { opacity: .65; font-style: italic; }
