/* ============================================================================ AXIS BASE — hoja compartida del sistema. Fuente de verdad de los tokens y de los componentes que usan varias páginas (panel.html, admin.html, login.html, cadete.html). Nació en la Fase 1 del refactor de UI (ago-2026): antes cada página tenía su propia copia del CSS y cada fix de diseño había que hacerlo dos o tres veces. ⚠ SI TOCÁS ESTE ARCHIVO, subí el ?v= en TODAS las páginas que lo enlazan (panel.html, admin.html, login.html, cadete.html) EN EL MISMO COMMIT. Sin versión en la dirección, los navegadores de clientes que ya usan el panel se quedan con la copia vieja en caché y ven una pantalla rota que en tu máquina se ve bien. ========================================================================= */ /* --- a) TOKENS ------------------------------------------------------------- Todos los colores viven acá como variables: el modo oscuro solo cambia estas variables (data-tema="oscuro" en ) y el resto del CSS ni se entera. Ningún color se escribe suelto en las vistas. */ /* PALETA "OBSIDIAN VIOLET" (rediseño 15-ago-2026). Reemplaza a "Confianza Tech" (azul noche + azul eléctrico) por el esquema Material 3 violeta que quedó aprobado en las maquetas: seed #BB86FC, secundario #313131, terciario #03DAC6, neutro #121212. Referencia visual: src/ui/axis-kit.html del laboratorio. Lo que NO cambió: ni un nombre de token. Toda la app (panel.js, admin.html, crm.js, etc.) pinta con estas mismas variables, así que el rediseño entra por los valores y no toca ni una vista. Lo que sí cambió, además del color: · el tema OSCURO pasa a ser el predeterminado — las maquetas son oscuras y esa es ahora la cara del producto. El claro sigue existiendo, reconstruido sobre el mismo violeta para que la app no tenga dos identidades; · --r-l sube de 16 a 28px (curva de tarjeta M3, como en las maquetas); · la tipografía de títulos pasa de Space Grotesk a Hanken Grotesk. Todos los pares de contraste de los dos temas se verificaron por cálculo antes de escribirlos: el mínimo de la casa (4,5:1 para texto chico) se mantiene en los 26 pares medidos, y en varios casos sube. */ :root{ /* Sigue siendo "light": este bloque ES el tema claro. Que el oscuro sea el predeterminado se resuelve en el script anti-destello de cada página, que pone data-tema="oscuro" salvo que haya un "claro" guardado — no acá. */ color-scheme:light; /* Claro reconstruido sobre el violeta: mismo sistema, no un tema ajeno. El fondo lleva un toque de violeta (#F5F2F8 y no un gris neutro) para que al cambiar de tema se sienta la misma marca. */ --bg:#F5F2F8;--card:#FFFFFF;--soft:#F3EEF7;--soft2:#E9E2EF;--field:#FFFFFF; --line:#E4DDE9;--line-soft:#F0EAF4;--line-strong:#CDC4D6; --text:#2B2731;--tit:#1B1920;--text2:#4A454E; /* Los dos grises de texto siguen el criterio de la Fase 1 (ago-2026): entran al mínimo de 4,5:1 para texto chico y ahora llevan el matiz violeta del resto de la paleta. Medidos sobre --card blanco: --muted #5F5867 6,82:1 (antes #6B7280, 4,8:1) y --faint #655D6E 6,28:1 (antes #6E7684, 4,5:1); el par más apretado de --faint es sobre --soft2, 4,96:1. Los dos siguen habilitados para texto chico; un gris más claro que estos es SOLO para bordes e íconos decorativos, nunca para texto. */ --muted:#5F5867;--faint:#655D6E; /* --ac/--btn claro: #2563EB → #6B31AC (Obsidian Violet). Es el tono 40 de la rampa del seed #BB86FC — el mismo violeta del tema oscuro, bajado a un tono que rinde 7,89:1 con blanco encima sobre fondo claro. --nv ("azul noche") pasa a ser el negro violáceo de la barra lateral: sigue siendo "la superficie oscura de la marca" en los dos temas, que es el rol que cumplía. --pale es el contenedor tenue del acento. */ --nv:#1C1B1B;--btn:#6B31AC;--btn-tx:#FFFFFF;--ac:#6B31AC;--pale:#F0E3FF; /* Texto que va ENCIMA de --ac. Hace falta un token propio porque --ac cambia con el tema: en claro es un violeta oscuro (#6B31AC, blanco encima da 7,89:1) pero en oscuro se aclara a #DAB9FF y ahí el blanco caería a 1,4:1. Los seis lugares que pintan sobre el acento (chips de día, Ask the Agent, burbuja de pregunta, botones) dependen de este token. */ --ac-tx:#FFFFFF; /* --clay/--claysoft: la terracota del Auditor. Es color de la firma de Claude dentro del panel, no del sistema; queda igual en los dos temas. */ --clay:#C2603F;--claysoft:#E08D6B; /* --ok pasa al terciario turquesa de la paleta (#03DAC6 en su versión legible sobre claro): en las maquetas el turquesa es el color de "vivo / conectado / listo", y el verde de confirmación es el mismo rol. */ --ok:#00635A;--ok-bg:#D3F5EF; --warn:#845200;--warn-bg:#FBEFD6;--warn-line:#E9D5A6; --err:#B3261E;--err-bg:#FCEEEC;--err-line:#F0C7C2; /* --info deja de ser un azul (la paleta no tiene azul) y pasa al violeta un tono más profundo que --ac, para que un aviso informativo no se confunda con un botón. */ --info:#5E289B;--info-bg:#F0E3FF; --wa:#1FA463; /* El mismo verde, pero para pintar ENCIMA de la barra lateral, que es oscura en los dos temas. Nació porque sobre el navy viejo --wa daba 4,43:1 y no llegaba al mínimo; sobre el negro violáceo nuevo da 5,36:1 y ya pasaría, pero el token se queda: es el verde de marca de WhatsApp, ahí rinde 8,66:1 y deja la barra entera con un solo verde. Hallazgo de la auditoría de la Etapa 1: mudar #25D366 a var(--wa) parecía una sustitución idéntica y no lo era. */ --wa-sobre-oscuro:#25D366; /* --ig/--fb: colores de marca (Instagram/Facebook), no tokens del "sistema", pero panel.js (pestaña Conexiones) y crm.html los necesitan los dos — mismos valores que crm.html ya usaba, para no inventar un segundo azul de Facebook en el panel. */ --ig:#C13584;--fb:#4267B2; /* Texto que va ENCIMA de un botón pintado con el color de marca. Mismo problema que --ac-tx: los colores de marca se aclaran en tema oscuro y el blanco fijo se cae. Medido: en claro, blanco sobre --fb da 6,4:1 pero sobre --wa solo 3,06:1 (fallaba desde antes, nadie lo había medido); en oscuro, blanco sobre el --fb claro da 2,96:1 y sobre el verde 1,98:1. Con estos dos tokens los cuatro casos entran: 6,4 / 6,9 / 7,5 / 11. El botón de Instagram sigue con blanco fijo: va sobre el degradé de marca, cuyos tonos medios dan 4,9:1 y no cambian con el tema. */ --fb-tx:#FFFFFF;--wa-tx:#0B2A1A; /* --mp/--ig-gradiente: mismo criterio (Task 4, sistema visual, 10-ago-2026). --mp es el celeste de marca de Mercado Pago (el ícono de mpLogo() en panel.js, el chip de seña/pago); antes estaba escrito suelto como #00b1ea. --ig-gradiente es el degradé de 5 tonos de Instagram que ya vivía en panel.js como una constante JS (GRAD_IG): mismo valor exacto, ahora declarado una sola vez acá. Los dos quedan fijos en los dos temas — igual que --ig/--fb ya definidos arriba solo cambian de tono, estos son íconos/degradés de marca que no necesitaban una variante oscura y no se las inventa ahora. */ --mp:#00b1ea; --ig-gradiente:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); /* --nav-bg: #131F33 → #1C1B1B (Obsidian Violet): la barra deja de ser azul noche y pasa al negro violáceo de las maquetas, en los dos temas. --nav-dim sube fuerte (#5E739A daba 3,4:1 y solo se salvaba por ser etiqueta decorativa; #9E94A6 da 5,93:1 y ya es texto legible de verdad). */ --nav-bg:#1C1B1B;--nav-tx:#CDC3D4;--nav-dim:#9E94A6;--nav-line:#2A2A2A; /* Ítem activo de la barra. Antes se pintaba con --btn, que en el rediseño es violeta CLARO (#DAB9FF) — y en las maquetas la píldora activa es al revés: violeta profundo con letra clara. Al ser dos roles distintos necesitan dos tokens; con uno solo, o el botón principal queda oscuro o la píldora queda blanca. 7,20:1. */ --nav-on-bg:#5E289B;--nav-on-tx:#EEDBFF; /* Tonos repetidos de la barra lateral oscura y de lo que flota sobre ella (askbar, campana, buscador global, cartel de "activar sonido"): estaban escritos sueltos 2 a 4 veces cada uno con el mismo valor exacto, sin nombre. Task 4 (sistema visual) los agrupa acá porque es la misma zona "oscura en los dos temas" que --nav-* de arriba, no colores nuevos. */ --nav-icon:#CDC3D4;--nav-accent:#DAB9FF;--nav-tx-lt:#E5E2E1; --nav-hover-tx:#EEDBFF;--nav-hover-line:#4B4452; /* --- PALETA FIJA DEL AUDITOR (Task 4, sistema visual, 10-ago-2026) -------- El panel del Auditor (.audc, .claude, .audbtn, .audmeta, .al.* en panel.html, y bannerConectar()/badgeClaude()/tarjetaAuditor() en panel.js) es oscuro en los dos temas a propósito — no se rediseña acá. Antes esos colores estaban sueltos y repetidos; ahora tienen nombre, mismo valor exacto que tenían, sin ninguna variante para modo oscuro porque la tarjeta ya es oscura de por sí. */ --aud-tx:#fff;--aud-body:#D6E1F2;--aud-muted:#9db6da; --aud-badge-bg:rgba(194,96,63,.16);--aud-badge-line:rgba(224,141,107,.42);--aud-badge-tx:#F0C3AC; --aud-btn-bg:rgba(255,255,255,.1);--aud-btn-bg-hover:rgba(255,255,255,.18); --aud-btn-line:rgba(255,255,255,.22);--aud-btn-line-alt:rgba(255,255,255,.35);--aud-btn-tx:#dbe6f5; --aud-aviso-bg:#3A2A1A;--aud-aviso-tx:#F0B860; --aud-frio-bg:#2A3550;--aud-frio-tx:#9FB8DE; --aud-ok-bg:#1E3A2C;--aud-ok-tx:#8FDCAE; --aud-bg-exito:#0E3B24;--aud-nav-on:rgba(194,96,63,.22); /* Par sí/no para los chips del semáforo, que viven DENTRO de la tarjeta del Auditor (azul marino en los dos temas). Los tokens --ok/--err del sistema cambian con el tema y en modo claro dejaban pastillas casi blancas sobre el navy. Estos son los valores originales, calibrados para fondo oscuro: 6,60:1 el verde y 5,9:1 el rojo. Hallazgo de la auditoría de la Etapa 1. */ --aud-si-bg:rgba(52,199,89,.12);--aud-si-tx:#4ADE80; --aud-no-bg:rgba(255,69,58,.12);--aud-no-tx:#F87171; /* --- ESCALAS DEL SISTEMA VISUAL (10-ago-2026) ---------------------------- No son colores, pero viven en el mismo bloque de tokens por la misma razón: que toda medida del panel salga de un solo lugar. Los valores y el porqué de cada uno están en la spec aprobada por Benjamin: docs/superpowers/specs/2026-08-10-sistema-visual-design.md. Reemplazan a los ~20 tamaños de letra y ~30 espaciados sueltos que había antes de esta fecha (medido con scripts/medir-estilos.mjs). Nada de texto por debajo de --t-xs: los 11px de antes suben a 12 o 13. */ --t-xs:12px;--t-s:13px;--t-m:15px;--t-l:20px;--t-xl:28px; --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-6:24px;--e-8:32px; /* --r-l: 16px → 28px (Obsidian Violet). Es la curva de tarjeta de las maquetas, bien marcada. Solo la usan cinco selectores, todos tarjetas grandes (.box, .card, .mc, .cita, .cli-det .fi-caja); los campos y botones chicos se quedan en --r-s/--r-m y no se enteran. */ --r-s:8px;--r-m:12px;--r-l:28px;--r-full:999px; /* Sombras sutiles, con el mismo azul grisáceo del texto (--text #25304A) en vez de negro puro, para que combinen con la paleta. --sombra es para tarjetas en reposo (.box, .card); --sombra-alta para lo que flota encima de todo (buscador global, visor de avisos, panel del Auditor). */ --sombra:0 2px 10px rgba(43,39,49,.12); --sombra-alta:0 18px 50px rgba(43,39,49,.28); /* Para lo que entra DESDE UN COSTADO (el cajón de Ask the Agent): una sombra que cae hacia abajo no despega nada de lo que tiene al lado. */ --sombra-lateral:-8px 0 30px rgba(43,39,49,.26); } /* Paleta "Obsidian Violet" en oscuro — ESTE es el tema que muestran las maquetas y el que ve un usuario nuevo. Superficies casi negras que suben por escalones (#131313 fondo → #1C1B1B → #201F1F tarjeta → #2A2A2A hover), el violeta claro como único acento y el turquesa reservado para "vivo/OK". Jerarquía por superficie, no por borde: los bordes son casi invisibles a propósito, lo que separa una tarjeta del fondo es que es más clara. */ [data-tema="oscuro"]{ color-scheme:dark; --bg:#131313;--card:#201F1F;--soft:#1C1B1B;--soft2:#2A2A2A;--field:#1C1B1B; --line:#353534;--line-soft:#2A2A2A;--line-strong:#4B4452; --text:#E5E2E1;--tit:#F4F1F3;--text2:#CDC3D4;--muted:#B6ADBE; /* --faint oscuro: 5,67:1 sobre --card y 4,95:1 sobre --soft2, que es el par más apretado (mismo criterio ≥4,5 del claro). */ --faint:#9E94A6; /* Botón principal violeta CLARO con letra violeta oscura, como en las maquetas: 7,74:1. Es el mismo par que usa M3 para primary/on-primary en esquemas oscuros — el botón es lo más claro de la pantalla y por eso salta. --ac es el mismo violeta: acento y acción son el mismo color en este sistema, lo que los separa es la forma (píldora llena vs. texto). */ --btn:#DAB9FF;--btn-tx:#460283;--ac:#DAB9FF;--pale:#2B2136; --ac-tx:#460283; /* sobre el violeta claro: 7,74:1 */ --ok:#17DECA;--ok-bg:#0E2E2A; --warn:#E8C06A;--warn-bg:#2E2617;--warn-line:#4A3D21; --err:#FFB4AB;--err-bg:#3A1D1A;--err-line:#5C2E29; --info:#DAB9FF;--info-bg:#241C30; --wa:#25D366; --ig:#D06AA8;--fb:#7396D8; /* En oscuro los dos colores de marca son claros: el texto encima va oscuro. */ --fb-tx:#131313;--wa-tx:#131313; /* La barra ya es #1C1B1B en el bloque claro (es oscura en los dos temas); acá solo se repite para dejarlo explícito junto al resto del tema. */ --nav-bg:#1C1B1B;--nav-line:#2A2A2A; /* Sobre un fondo casi negro una sombra de color no se ve: acá las sombras son negro puro y más marcadas, que es lo único que despega una tarjeta. */ --sombra:0 2px 10px rgba(0,0,0,.5); --sombra-alta:0 18px 50px rgba(0,0,0,.65); --sombra-lateral:-8px 0 30px rgba(0,0,0,.6); } /* Alias de compatibilidad: login.html y cadete.html nacieron con otros nombres de variable. En vez de reescribir cada regla (y arriesgar un typo silencioso), se apuntan a los tokens del panel. Objetivo a futuro: migrar los usos y borrar este bloque. */ :root{ --ink: var(--tit); --ink2: var(--muted); --panel: var(--card); --accent: var(--ac); --accent-ink: var(--btn-tx); --rojo: var(--err); } /* --- b) BASE ---------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box;} html,body{height:100%;} body{background:var(--bg);font-family:"Inter",system-ui,sans-serif;color:var(--text);} /* Campos de formulario: el color base sale de las variables para que el modo oscuro los alcance; cada campo puede pisar el borde o el padding en línea. */ input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{ background:var(--field);color:var(--text);border:1px solid var(--line-strong);border-radius:var(--r-s);font-family:inherit;} /* Íconos (webfont Tabler): heredan color y tamaño del texto que los rodea. */ .ti{vertical-align:-2px;} /* Accesibilidad: foco visible al navegar con teclado (no cambia el diseño con mouse) sobre botones, enlaces, campos y los elementos con rol de botón. */ :is(button,a,input,select,textarea,[role="button"]):focus-visible{ outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--r-s);} /* --- c) ESTRUCTURA ---------------------------------------------------------- Los 60/70px de abajo (.main, .bgv) son colchón de scroll de página, no espaciado entre elementos: quedan fuera de la escala de --e-* a propósito, igual que los anchos (980px, 225px, etc.) que tampoco son parte de ella. */ .layout{display:flex;min-height:100vh;} .main{flex:1;padding:var(--e-6) var(--e-6) 70px;max-width:980px;margin:0 auto;width:100%;min-width:0;} .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--e-4);gap:var(--e-3);flex-wrap:wrap;} .head h1{font-family:"Hanken Grotesk";font-weight:600;font-size:var(--t-l);color:var(--tit);} .head .d{font-size:var(--t-xs);color:var(--muted);} /* --- d) BARRA LATERAL (queda azul marino en los dos temas) ------------------ Compartida por panel.html y admin.html. Piso tipográfico --t-xs (Fase 1): .by, .cli, .lbl y .ni .sub estaban en 8.5-10px y en un monitor de cocina o un celular con sol no se leían. Criterio de esta pasada para lo que antes eran 11px: si el texto acompaña a un título DENTRO DE UNA FILA que se repite (nombre + detalle, como en .ni .sub o .irow .tt span) pasa a --t-s (13); si es una etiqueta, chip o texto de marca aislado (.cli, .lbl, .by, .live, .badge) pasa a --t-xs (12). */ .nav{width:225px;background:var(--nav-bg);color:var(--nav-tx);display:flex;flex-direction:column;padding:var(--e-4) var(--e-3);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;} .brand{display:flex;align-items:baseline;gap:var(--e-1);padding:0 var(--e-2);} .brand .ax{font-family:"Hanken Grotesk";color:#fff;font-weight:700;font-size:var(--t-xl);letter-spacing:.02em;} .brand .by{color:var(--nav-accent);font-size:var(--t-xs);letter-spacing:.14em;font-family:"Hanken Grotesk";} /* Marca AXIS (16-ago-2026): el átomo como archivo y el wordmark como texto. El átomo NO trae las letras a propósito — así el wordmark hereda tipografía, color y tema del sistema, y los dos patrones que convivían en la app (unos puntos con imagen que decía "AXis", otros con texto que decía "AXIS") quedan en uno solo. Spec: docs/superpowers/specs/2026-08-16-logo-axis-design.md El átomo entra por mask y no por img. Diez de los doce puntos van sobre fondo oscuro fijo (--nav-bg en la barra, --nv en las barras superiores, los dos 1C1B1B en ambos temas) y ahí un color horneado alcanzaba. Pero los dos gate (.gatebox de admin y panel) usan --card, que es BLANCO en tema claro y 201F1F en oscuro: cualquier archivo de color fijo queda invisible en uno de los dos. Con mask el átomo toma currentColor y sirve en los doce. align-items:center y no baseline: el átomo no tiene línea de base, así que alinearlo por baseline lo cuelga por debajo del texto. */ .marca-ax{display:inline-flex;align-items:center;gap:.34em;} .ax-icono{display:block;flex-shrink:0;aspect-ratio:1;background:currentColor; -webkit-mask:url(/axis-marca.svg) no-repeat center;-webkit-mask-size:contain; mask:url(/axis-marca.svg) no-repeat center;mask-size:contain;} /* La marca se trae su propia tipografía: .ax suelto no está estilado (solo existían .brand .ax y .top .ax), así que en crm.html o politica.html habría caído a la fuente del contenedor. El color y el tamaño sí los sigue poniendo el contexto, que es lo que hace que sirva en los seis lugares. El render separa mucho las letras; .02em las deja apretadas contra el átomo. Va scopeado a la marca: .ax también titula la vidriera de componentes, y ahí una separación ancha quedaría mal. La pila de respaldo NO es decorativa: crm.html pedía solo Inter a Google Fonts, y "Hanken Grotesk" a secas caía al serif del navegador — el wordmark salía con serifas en la bandeja. Se le agregó la familia a crm.html, y esta pila queda igual para que el próximo que sume una pantalla no repita el error sin darse cuenta. */ .marca-ax .ax{font-family:"Hanken Grotesk","Inter",system-ui,sans-serif;font-weight:700;letter-spacing:.16em;} /* Marca animada de las pantallas de entrada (login). El recorte a 5,00 s es un giro completo del átomo, así que el loop no pega el salto, y deja afuera el destello que barría las letras al final. El render no tiene canal alfa: su fondo es negro EXACTO (medido: RGB 0,0,0). Por eso el video se funde con mix-blend-mode:screen en vez de recortarlo. screen no borra nada — el negro puro simplemente no aporta luz — así que no deja agujeros ni bordes sucios. Se probó el recorte por color y sí los deja: las partes del logo que llegan a negro (el centro del núcleo, el lado en sombra de las órbitas) son indistinguibles del fondo para cualquier umbral. El filtro compensa lo único que screen empeora: levanta los negros y con eso lava el color. saturate(2) devuelve el violeta del núcleo y de la X. */ .marca-video{display:block;margin:0;} .marca-video video{width:100%;height:auto;display:block; mix-blend-mode:screen;filter:saturate(2) contrast(1.15) brightness(1.05);} /* No lleva fondo propio: la tarjeta que lo contiene ya es negra en los dos temas, justamente para que screen funcione (ver login.html y esperando.html). Una placa acá volvería a dibujar un recuadro dentro de otro. */ .cli{color:var(--nav-dim);font-size:var(--t-xs);letter-spacing:.12em;padding:2px var(--e-2) var(--e-4);font-family:"Hanken Grotesk";} .lbl{color:var(--nav-dim);font-size:var(--t-xs);letter-spacing:.14em;padding:var(--e-4) var(--e-2) var(--e-1);font-family:"Hanken Grotesk";} /* Píldora de navegación (rediseño Stitch, etapa 3): radio completo y el ítem activo en el azul del botón principal, como el menú de Gmail. */ .ni{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-2) var(--e-3);border-radius:var(--r-full);font-size:var(--t-s);cursor:pointer;user-select:none;} .ni:hover{background:rgba(255,255,255,.06);} /* Píldora activa: --nav-on-* y no --btn/--btn-tx. La barra es oscura en los dos temas, así que su ítem activo necesita su propio par (violeta profundo + letra clara); --btn es el violeta claro del botón principal y acá dejaría una píldora casi blanca. */ .ni.on{background:var(--nav-on-bg);color:var(--nav-on-tx);} .ni.aud.on{background:var(--aud-nav-on);} .ni .em{font-size:var(--t-m);width:19px;text-align:center;color:var(--nav-icon);} .ni.on .em{color:var(--nav-on-tx);} /* La subetiqueta va un escalón POR DEBAJO del nombre del ítem (--t-s), si no los dos se leen igual de importantes y deja de ser subetiqueta. */ .ni .sub{font-size:var(--t-xs);color:#E5A987;display:block;line-height:1.1;} .dot{width:7px;height:7px;border-radius:var(--r-full);margin-left:auto;flex-shrink:0;} /* Van sobre la barra azul marino: el verde de fondo claro rinde 4,43:1 acá. Alcanza para un puntito (mínimo 3) pero --wa-sobre-oscuro existe justo para esto y deja la barra entera con un solo verde. */ .dot.g{background:var(--wa-sobre-oscuro);} .dot.gr{background:var(--nav-dim);} /* El globito rojo con el número de pendientes, como en el celular. Va al final de la fila (margin-left:auto) igual que el puntito, y lo reemplaza cuando hay algo sin ver: un número dice cuánto, un punto solo dice "hay". Se llama `globito` y NO `badge`: esa clase YA EXISTÍA para las etiquetas de las tarjetas ("Buen lead", "Info"), y pisarla con margin-left:auto les rompió la alineación — los nombres pasaron a verse centrados. */ /* El rojo estaba escrito suelto (#E5484D) y con letra blanca daba 3,91:1, por debajo del mínimo — el único par que la auditoría de contraste sobre el DOM encontró fallando en toda la vidriera. Pasa a los tokens: --err con --bg encima acompaña al tema (10,9:1 en oscuro, 5,9:1 en claro) y de paso el globito deja de ser el último color ajeno a la paleta. */ .globito{margin-left:auto;flex-shrink:0;background:var(--err);color:var(--bg);font-size:var(--t-xs); /* --r-full y no --r-s: el globito mide 18px de alto, así que 8px le achata las puntas en vez de dejarlo redondo. Es una píldora, no una tarjeta. */ font-weight:700;line-height:1;min-width:18px;height:18px;border-radius:var(--r-full); padding:0 var(--e-1);display:inline-flex;align-items:center;justify-content:center; font-variant-numeric:tabular-nums;} .navfoot{margin-top:auto;padding:var(--e-4) var(--e-2) var(--e-1);display:flex;flex-direction:column;gap:var(--e-3);} .live{display:flex;align-items:center;gap:var(--e-2);font-size:var(--t-xs);color:var(--nav-tx-lt);font-family:"JetBrains Mono";} .live .pd{width:8px;height:8px;border-radius:var(--r-full);background:var(--wa-sobre-oscuro);animation:pulse 1.6s infinite;} /* Candado del pie de la barra (rediseño Stitch, etapa 2): microseñal de confianza. --nav-icon y no --nav-dim: es texto que se lee (6,4:1 sobre la barra), no una etiqueta decorativa — --nav-dim da 3,4:1 y no llega. */ .candado{display:flex;align-items:center;gap:var(--e-1);font-size:var(--t-xs);color:var(--nav-icon);line-height:1.3;} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .salir{background:transparent;border:1px solid rgba(255,255,255,.24);color:var(--nav-tx-lt);font-size:var(--t-xs);padding:var(--e-2) var(--e-3);border-radius:var(--r-s);cursor:pointer;font-family:"Inter";} .salir:hover{background:rgba(255,255,255,.1);color:#fff;} /* --- e) BUSCADOR GLOBAL (overlay compartido: panel lo usa para buscar, admin para su diálogo y su buscador) ---------------------------------------- */ .buscag-btn{display:flex;align-items:center;gap:var(--e-2);width:100%;background:transparent; border:1px solid var(--nav-line);color:var(--nav-icon);border-radius:var(--r-s);padding:var(--e-2) var(--e-3);margin:var(--e-3) 0 0; cursor:pointer;font-family:"Inter";font-size:var(--t-xs);text-align:left;} .buscag-btn:hover{border-color:var(--nav-hover-line);color:var(--nav-hover-tx);} .buscag-btn .atajo{margin-left:auto;font-size:var(--t-xs);color:var(--nav-dim);font-family:"JetBrains Mono";} .bgv{position:fixed;inset:0;background:rgba(8,12,20,.45);z-index:90;display:none; align-items:flex-start;justify-content:center;padding:70px var(--e-4) var(--e-6);} .bgv.on{display:flex;} .bgbox{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);width:560px;max-width:100%; box-shadow:var(--sombra-alta);overflow:hidden;} .bgbox input{width:100%;border:0;border-bottom:1px solid var(--line-soft);border-radius:0; padding:var(--e-4) var(--e-4);font-size:var(--t-m);outline:none;} .bgres{max-height:52vh;overflow-y:auto;padding:var(--e-1) 0 var(--e-2);} .bgres .lab{padding:var(--e-3) var(--e-4) var(--e-1);} .bgrow{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-2) var(--e-4);cursor:pointer;font-size:var(--t-s);} .bgrow:hover,.bgrow:focus{background:var(--soft);} .bgrow .em{width:22px;text-align:center;color:var(--faint);flex-shrink:0;} .bgrow .tt{flex:1;min-width:0;} .bgrow .tt b{font-weight:500;font-family:"Hanken Grotesk";color:var(--tit);font-size:var(--t-s);display:block;} .bgrow .tt span{font-size:var(--t-s);color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bgvacio{padding:var(--e-4) var(--e-4);color:var(--muted);font-size:var(--t-s);text-align:center;line-height:1.6;} /* --- f) COMPONENTES DE LISTA Y TARJETA --------------------------------------- */ .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;margin-bottom:var(--e-4);box-shadow:var(--sombra);} .box .bh{display:flex;align-items:center;justify-content:space-between;padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--line-soft);gap:var(--e-3);flex-wrap:wrap;} .box .bh b{font-family:"Hanken Grotesk";font-size:var(--t-s);font-weight:500;color:var(--tit);} .box .bh small{font-size:var(--t-s);color:var(--muted);} /* .irow base, SIN cursor ni hover: admin la usa para filas que no se tocan. panel.html la extiende en su hoja local con cursor:pointer y :hover porque sus filas sí se abren (override declarado en la lista blanca del test de selectores repetidos). */ .irow{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--line-soft);} .irow:last-child{border-bottom:0;} .irow .em{font-size:var(--t-m);width:19px;text-align:center;flex-shrink:0;color:var(--faint);} .irow .tt{flex:1;min-width:0;} .irow .tt b{font-size:var(--t-s);font-weight:500;font-family:"Hanken Grotesk";color:var(--tit);} .irow .tt span{font-size:var(--t-s);color:var(--muted);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .irow .when{font-size:var(--t-s);color:var(--muted);font-family:"JetBrains Mono";white-space:nowrap;} .vacio{padding:var(--e-6) var(--e-4);text-align:center;color:var(--muted);font-size:var(--t-s);line-height:1.6;} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--e-4) var(--e-4);margin-bottom:var(--e-3);box-shadow:var(--sombra);} .row1{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;} .badge{font-size:var(--t-xs);font-weight:600;padding:3px var(--e-3);border-radius:var(--r-full);white-space:nowrap;font-family:"Hanken Grotesk";} /* Variantes comunes a las dos páginas. Las específicas (.b-pac/.b-deriv del panel, .b-mal del admin) viven en cada hoja local. */ .b-bueno{background:var(--ok-bg);color:var(--ok);} .b-medio{background:var(--warn-bg);color:var(--warn);} .b-frio{background:var(--info-bg);color:var(--info);} .b-info{background:var(--soft2);color:var(--text2);} /* --- g) BOTONES COMPARTIDOS --------------------------------------------------- Botones de filtro: bien marcados (pedido de Benjamin — los grises claros no se veían). Apagado = borde y letra oscuros; prendido = fondo oscuro entero. En modo oscuro se invierten solos vía --btn. */ .filters{display:flex;gap:var(--e-2);margin-bottom:var(--e-4);flex-wrap:wrap;} .fb{border:1.5px solid var(--btn);background:var(--card);color:var(--tit);font-size:var(--t-s);padding:var(--e-2) var(--e-4);border-radius:var(--r-full);cursor:pointer;font-family:"Inter";font-weight:600;} .fb:hover{background:var(--soft2);} .fb.on{background:var(--btn);color:var(--btn-tx);border-color:var(--btn);} .fb:disabled{opacity:.45;cursor:default;} .bacc{border:1px solid var(--line-strong);background:var(--card);color:var(--text);font-size:var(--t-xs);padding:var(--e-1) var(--e-2);border-radius:var(--r-s);cursor:pointer;font-family:inherit;font-weight:500;margin-left:var(--e-1);} .bacc:hover{border-color:var(--faint);} .bacc.on{background:var(--btn);color:var(--btn-tx);border-color:var(--btn);} /* Fila de botones chiquitos a la derecha de una .irow. */ .accrow{display:flex;flex-wrap:wrap;gap:0;justify-content:flex-end;margin-top:var(--e-1);} /* --- h) PANTALLA DE CLAVE (login del negocio y del superadmin) --------------- */ .gate{position:fixed;inset:0;background:var(--nav-bg);display:none;align-items:center;justify-content:center;z-index:100;} .gate.on{display:flex;} .gatebox{background:var(--card);border-radius:var(--r-m);padding:var(--e-8) var(--e-8);width:340px;max-width:92vw;text-align:center;} .gatebox .ax{font-family:"Hanken Grotesk";font-weight:700;font-size:var(--t-xl);color:var(--tit);} .gatebox p{font-size:var(--t-s);color:var(--text2);margin:var(--e-4) 0 var(--e-4);line-height:1.5;} .gatebox input{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-s);padding:var(--e-3) var(--e-3);font-size:var(--t-m);text-align:center;outline:none;font-family:"Inter";} .gatebox input:focus{border-color:var(--ac);} .gatebox button{margin-top:var(--e-3);width:100%;background:var(--btn);color:var(--btn-tx);border:0;border-radius:var(--r-s);padding:var(--e-3);font-size:var(--t-m);cursor:pointer;font-family:"Hanken Grotesk";font-weight:500;} .gatebox .mal{color:var(--err);font-size:var(--t-xs);margin-top:var(--e-3);display:none;} .gatebox .mal.on{display:block;} /* --- i) SIDEBAR EN CELULAR ---------------------------------------------------- Compartida por panel y admin. Las reglas de .ask-btn y .metrics que solo tiene el panel quedan en su hoja local. */ @media (max-width:760px){ .layout{flex-direction:column;} .nav{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px;padding:var(--e-3);} .brand{padding:0 var(--e-2);} .cli,.lbl,.navfoot .live,.navfoot .candado{display:none;} .ni{padding:var(--e-2) var(--e-2);font-size:var(--t-xs);} .ni .sub{display:none;} .navfoot{margin-top:0;padding:0 0 0 var(--e-2);flex-direction:row;} .main{padding:var(--e-4) var(--e-3) 60px;} } /* --- j) TABLET (761-1100px) --------------------------------------------------- Fase 2 (ago-2026). Antes había UN solo corte (760px) y una tablet recibía el diseño de escritorio comprimido. La pantalla más importante del negocio es probablemente el panel de pedidos en una tablet apoyada en la cocina. Decisión: la barra lateral se ANGOSTA a solo íconos en vez de colapsar, porque en cocina se navega con el dedo y perder la navegación cuesta un toque más. El texto de cada ítem se oculta solo con CSS (.em + span es el span de texto, que viene después del ícono en los dos renderNav); el JS no se toca. */ @media (min-width:761px) and (max-width:1100px){ .nav{width:70px;padding:var(--e-4) var(--e-2);align-items:center;} .brand .by{display:none;} .cli,.lbl{display:none;} /* width:100% en los ítems (remedición de Claude, ago-2026): la .nav es flex con align-items:center, y un hijo flex SIN ancho se encoge a su contenido — los .ni medían 44px de alto pero solo 15px de ancho, una franja intocable en el medio de la barra. Con width:100% ocupan los 54px útiles de la barra y el ícono sigue centrado por justify-content. */ .buscag-btn,.campana{width:100%;justify-content:center;padding:var(--e-2);margin:var(--e-3) 0 2px;} .buscag-btn span,.campana span{display:none;} .ni{width:100%;justify-content:center;padding:var(--e-3) 0;} .ni .em{width:auto;} .ni .em + span{display:none;} .ask-btn{justify-content:center;padding:var(--e-3) 0;margin-top:var(--e-3);} .ask-btn .t,.ask-btn .s{display:none;} .navfoot{align-items:center;} .navfoot .live,.navfoot .candado{display:none;} .salir{padding:var(--e-2) var(--e-2);text-align:center;} } /* --- k) OBJETIVOS TÁCTILES DE 44px (tablet y celular) -------------------------- 44px de alto mínimo es el estándar para acertar con el dedo (y con guante de cocina, más). Hoy los botones de filtro y acción andan por los 34px. Solo aplica hasta 1100px: en escritorio con mouse el tamaño chico alcanza. Segunda pasada (ago-2026, verificación de Claude en navegador): .salir medía 27px. Los botones propios del panel (.audbtn, .wa-btn, la ✕ del ask, los del cartel de sonido) se agrandan en la hoja local de panel.html. */ @media (max-width:1100px){ .ni{min-height:44px;} .fb{min-height:44px;padding:var(--e-3) var(--e-4);} .bacc{min-height:44px;padding:var(--e-3) var(--e-3);} .irow{min-height:44px;} .bgrow{min-height:44px;} .buscag-btn,.campana{min-height:44px;} .salir{min-height:44px;display:inline-flex;align-items:center;justify-content:center;} } /* --- l) ESCRITORIO ANCHO (1400px en adelante) --------------------------------- Ronda 08 (ago-2026), medido por Claude en navegador: con .main a 980px, una ventana de 1600px dejaba ~400px de vacío al costado (sidebar 225px + contenido 980px). El tope sube a 1400px — NO al 100%: una línea de texto que cruza un monitor de 27" se lee peor, no mejor. Lo fluido ensancha solo (grilla de pedidos auto-fill, agenda con columnas 1fr); los bloques de texto largo siguen acotados igual (.soon p/ul 520px, .ped-cuenta 320px, los formularios 520px en línea). No toca celular ni tablet: arranca en 1400px. */ @media (min-width:1400px){ .main{max-width:1400px;} /* Escalón tipográfico de lo COMPARTIDO (ronda 08, punto 2): el título de sección, los encabezados de caja y las filas suben un escalón manteniendo la jerarquía (título 26 > encabezado 14 > fila 13.5 > detalle 11.5). Con las escalas del sistema visual (10-ago-2026) el título y el encabezado de caja sí suben un escalón (--t-l→--t-xl, --t-s→--t-m); la fila y el detalle ya estaban fusionados en --t-s en la versión base, así que a este ancho quedan en el mismo token — no es una regresión, es la consecuencia de tener menos variantes. Lo que solo tiene el panel (.mc, .cita, .ped-items) va en su hoja local. */ .head h1{font-size:var(--t-xl);} .head .d{font-size:var(--t-s);} .box .bh b{font-size:var(--t-m);} .box .bh small{font-size:var(--t-s);} .irow .tt b{font-size:var(--t-s);} .irow .tt span{font-size:var(--t-s);} }