/* * Consola de flota — sistema visual. * * Este bloque :root ES el fichero de tokens de esta aplicación: la FleetApp no comparte hoja con * la AdminApp y está declarada FUERA DEL ALCANCE del design system (§11 de * docs/06-design-system.md), así que "ningún hexadecimal suelto ni ningún font-size numérico * fuera de tokens" se cumple aquí declarándolos todos una vez, arriba. Las hojas de pantalla * (auth.css, signups.css) solo usan estas variables. * * Por qué una sola hoja y no cuatro (tokens/base/componentes/pantalla) como en la AdminApp: la * consola tiene seis pantallas y un único chasis, así que partirla añadiría tres y un * orden de cascada que vigilar a cambio de nada. Lo que sí está partido es lo que de verdad * tiene vocabulario propio y no se carga siempre: auth.css (única superficie sin sesión) y * signups.css (bandeja y conversión). * * MODO DE USO: esto es una herramienta de operación, no una landing. Manda la densidad —fila de * 32-34px, dato a 13px— y la escaneabilidad: el mismo estado se pinta igual en las seis * pantallas, y el color nunca es el único portador del significado. */ :root { /* ---- Planos neutros --------------------------------------------------------------------- * Cuatro capas y en este orden: carril (la más profunda) < lienzo < banda de cabecera de * tabla < tarjeta. El carril es lo que separa panel de contenido POR TONO y no con una línea: * un borde vertical de 240px de alto es lo que hacía que la consola pareciese dos páginas * pegadas en vez de una aplicación. */ --rail: #e9edf3; --surface: #f6f8fa; --surface-low: #eef1f5; --card: #ffffff; /* ---- Tinta ------------------------------------------------------------------------------- * Tres niveles. --tertiary bajó de #64748b a #5a6473 por contraste medido: el valor anterior * daba 4,14:1 sobre el carril y esta consola escribe ahí sus etiquetas de 11px. El nuevo da * 5,10:1 sobre el carril y 5,99:1 sobre blanco. Es el mismo slate, cuatro puntos más denso. */ --on-surface: #191c1e; --on-surface-variant: #45464d; --tertiary: #5a6473; --on-primary: #ffffff; /* Hairlines. --outline-faint subió de #eceef0 a #e6e9ee: a fila de 33px el separador anterior desaparecía y la tabla se leía como un bloque. */ --outline: #c6c6cd; --outline-faint: #e6e9ee; /* ---- Identidad --------------------------------------------------------------------------- * --primary y --accent no se tocan: son la marca de la consola. * * --accent-strong existe porque --accent NO SIRVE PARA TEXTO: #3b82f6 sobre blanco da 3,68:1, * por debajo del 4,5:1 que exige el texto normal, y hoy se usaba como color de enlace, de * summary de
y de pastilla informativa. #1d4ed8 da 6,66:1 sobre blanco y 5,8:1 * sobre el tinte azul. Regla: --accent pinta bordes, rellenos y anillos de foco (3:1 basta * para un componente); --accent-strong pinta cualquier cosa que se lea. */ --primary: #0f172a; --accent: #3b82f6; --accent-strong: #1d4ed8; /* ---- Semáforo ---------------------------------------------------------------------------- * --warn bajó de #b45309 a #a14a08: el anterior daba 4,47:1 sobre su propio tinte y las * pastillas escriben justo ahí, a 11px. Falla por tres centésimas, pero falla. */ --ok: #047857; --warn: #a14a08; --err: #ba1a1a; /* * Tintes de estado: el mismo tono del semáforo al 5-10 % sobre fondo claro. Estaban escritos * a mano como rgba() en dieciocho reglas distintas, así que un cambio de paleta exigía * acordarse de las dieciocho. */ --accent-tint: rgba(59, 130, 246, .1); --ok-tint: rgba(4, 120, 87, .1); --warn-tint: rgba(161, 74, 8, .1); --err-tint: rgba(186, 26, 26, .1); --err-tint-soft: rgba(186, 26, 26, .08); --err-tint-row: rgba(186, 26, 26, .05); /* Selección de texto: también es superficie de diseño. Azul de marca al 20 %, que deja el texto en su propio color en vez de invertirlo al azul del sistema. */ --selection: rgba(59, 130, 246, .2); /* ---- Tipografía -------------------------------------------------------------------------- * Seis niveles, no ocho. Se retiraron --text-body (16px) y --text-display (32px): el cuerpo * de una consola de operación es 13px y un titular de 32px en una pantalla que existe para * barrer tablas es espacio gastado. --text-lg absorbe el 16px que usaba --text-body. * * xs 11 cabecera de columna, etiqueta de dato, pastilla * sm 12 meta secundaria, código en tabla * md 13 DATO Y CUERPO POR DEFECTO * base 14 controles de formulario y prosa de aviso * lg 16 título de sección (h2) * title 20 titular de pantalla (h1) y cifra de KPI */ --text-xs: 11px; --text-sm: 12px; --text-md: 13px; --text-base: 14px; --text-lg: 16px; --text-title: 20px; /* Las dos familias, declaradas una vez. La monoespaciada estaba repetida literal en seis reglas y además había un var(--font-mono) sin declarar en .error-detail, que caía al monospace del navegador. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace; /* * Alturas de control -- mismo criterio que tokens.css de la AdminApp, aunque esta aplicación * esté fuera del alcance del design system (§11 de docs/06-design-system.md): * todo lo que sea "pastilla" (pill, badge, botón pequeño) fija su altura con `height`, nunca * con padding, y todo contenedor flex que las agrupe lleva `align-items: center`. Sin las dos * cosas un chip estrecho se estira a la altura de la fila y sale cuadrado entre píldoras. */ --control-sm: 22px; --control-md: 30px; --control-lg: 36px; /* Radios. Estaban escritos como .5rem/.375rem en veintitantas reglas; el valor no cambia. */ --radius-sm: 6px; --radius-md: 8px; --radius-pill: 9999px; /* Altura de la barra superior del móvil. Es token y no un 52px suelto porque lo usan seis reglas del cajón —el desplazamiento del lienzo, el techo de la barra, el arranque del cajón y el del velo— y descuadrar una de ellas deja una franja o un solape. */ --bar-h: 52px; /* * Sombras: todas con desplazamiento vertical y desenfoque, ninguna a offset cero. Una sombra * sin desplazamiento no es luz, es un halo de color, y es lo que hace que una interfaz parezca * una maqueta. El tono es el azul de --primary y no negro puro, para que case con el lienzo. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .09), 0 1px 2px rgba(15, 23, 42, .05); --scrim: rgba(15, 23, 42, .45); --shadow-modal: 0 16px 40px rgba(15, 23, 42, .2), 0 2px 8px rgba(15, 23, 42, .08); /* Una sola duración para todo. Las transiciones comunican un cambio de estado (hover, foco, activo); nada se anima al cargar. */ --t-fast: 150ms ease; /* * Marca de producto (OmmiFX). Los SVG traen proporción fija, así que solo se fija la altura * y el ancho sale solo. El isotipo del carril baja a 28px: la cabecera del carril pasó de * 64px a 52px y un isotipo de 32px la llenaba entera. */ --brand-lockup-height: 32px; --brand-mark-size: 28px; /* Controles nativos del navegador teñidos con la paleta: checkbox y radio del formulario de conversión dejan de salir en el azul del sistema operativo. */ accent-color: var(--accent); color-scheme: light; } /* ============================================================================================ BASE ============================================================================================ */ body { margin: 0; background: var(--surface); color: var(--on-surface); font-family: var(--font-sans); font-size: var(--text-md); line-height: 20px; -webkit-font-smoothing: antialiased; /* Barras de scroll teñidas con la paleta: son superficie del navegador, pero se ven dentro de la aplicación. El 
 oscuro de las excepciones las redeclara, que si no salen claras
     sobre fondo negro. */
  scrollbar-width: thin;
  scrollbar-color: var(--outline) transparent;
}

::selection { background: var(--selection); }

/*
 * Foco de teclado, una sola vez y para todo lo interactivo. Anillo de marca y no el azul del
 * navegador, con offset para que no se coma el borde del propio control. :focus-visible y no
 * :focus: el ratón no tiene por qué dejar anillo.
 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

h1 {
  margin: 0;
  font-size: var(--text-title);
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--primary);
}

/* Título de sección dentro de una pantalla (/Esquema tiene dos). Va con una hairline debajo:
   es lo que convierte una lista de tablas seguidas en secciones. */
h2 {
  margin: 28px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--outline-faint);
  font-size: var(--text-lg);
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--primary);
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -.01em;
}
code.small { font-size: var(--text-xs); color: var(--on-surface-variant); }

.muted { color: var(--tertiary); font-size: var(--text-sm); }

/*
 * `.eyebrow` SE RETIRÓ ENTERO el 2026-09-19 y no se repone. Las ocho vistas abrían con un rótulo
 * "iThub Digital" sobre el 
 que repetía lo que ya dice el carril, y el titular carga su propio
 * peso sin él. El último consumidor que quedó vivo —la cabecera del visor de logs— decía "Últimas
 * 24 horas" justo encima de una frase que empieza por "…en las últimas 24 horas": la misma
 * información dos veces.
 *
 * Si vuelve a hacer falta un rótulo sobre un titular, el problema es el titular.
 */

/* Iconos: SVG propios de esta aplicación (Views/Icons.cs). 18px sobre rejilla de 24 con trazo
   de 1,5 -- el mismo peso óptico que el texto de 13px al que acompañan. */
.icon { width: 18px; height: 18px; flex: none; }

/* ============================================================================================
   CHASIS — carril, lienzo y cabecera de página
   ============================================================================================ */

.fleet-shell { display: flex; min-height: 100vh; align-items: stretch; }

/*
 * Carril persistente. Sin borde derecho a propósito: lo que lo separa del lienzo es el tono
 * (--rail es un punto más frío y profundo que --surface), que es la forma de separar dos planos
 * sin dibujar una línea que recorra la pantalla entera.
 */
.fleet-sidebar {
  flex: 0 0 232px;
  display: flex; flex-direction: column;
  background: var(--rail);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

/* ---- El carril como 
 ---------------------------------------------------------------
 * El contenido del carril vive dentro de un 
 para poder plegarse en móvil sin una línea
 * de JavaScript (ver el bloque @media del final). Aquí, en escritorio, el 
 NO se
 * comporta como tal: su contenido se revela siempre, esté el elemento abierto o cerrado, así que
 * el carril es la misma columna fija de siempre y el atributo [open] no cambia nada.
 *
 * Se revela por dos vías a propósito, y las dos hacen falta:
 *   - ::details-content es como los motores actuales ocultan lo plegado (content-visibility);
 *     un display en el hijo NO lo contrarresta, porque el salto de renderizado es del ancestro.
 *   - display en el hijo cubre a los motores anteriores, que ocultaban los hijos directos.
 * Donde el pseudo no existe, esa regla se descarta sola y queda la otra. Quitar cualquiera de las
 * dos deja el carril de escritorio vacío en la mitad del parque de navegadores.
 */
.fleet-rail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.fleet-rail::details-content {
  content-visibility: visible;
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
.fleet-rail > .fleet-rail__panel { display: flex; }

/* El panel reparte los dos bloques del carril (destinos arriba, sesión abajo). Lo hacía el
   propio