/* ===================================================================== BASE — Sistema de estilos del Monitor Logístico Fichas de diseño comunes a todas las pantallas. Cargar SIEMPRE antes del css propio de cada página. Criterios: · Esquinas cuadradas en todo. Sin excepción. · La jerarquía se marca con borde y contraste, no con sombras. · Paleta neutra de sala de control: gris grafito y un acento por área. · Números siempre tabulares, para que las columnas calcen. ===================================================================== */ /* --------------------------------------------------------------------- PALETA ÚNICA. Un solo valor por color para todo el sistema: el rojo es este rojo en las 14 vistas, y lo mismo con el resto. Ya vienen en su versión intensa (saturada y con el punto de oscuridad que Chart.js aplicaba solo al pasar el mouse). --------------------------------------------------------------------- */ :root { --rojo: #ff0101; /* Aclarado desde #0060fe: aquel quedaba en 3,54:1 contra el fondo oscuro, bajo el mínimo legible para texto chico. Mismo tono, más luz. */ --azul: #2879ff; --verde: #00b442; --naranjo: #ff7a00; --amarillo: #bf9100; --turquesa: #009988; /* Identidad de empresa: Marsella en rojo y Asland en celeste. Es un celeste claro para separarlo del azul del sistema, que significa "dato normal". */ --marsella: var(--rojo); --asland: #4bc3ff; /* Fondo de la columna. Muy bajo a propósito: agrupa el bloque de cada empresa sin competir con las cifras ni con el semáforo de la variación. */ --marsella-tint: rgba(255, 1, 1, .10); --asland-tint: rgba(75, 195, 255, .10); } /* --------------------------------------------------------------------- TEMA. El sistema tiene dos: noche (por defecto, para los televisores que viven prendidos) y día. Se cambia poniendo data-tema="dia" en . Todo lo demás en el sistema lee estas fichas, así que ninguna pantalla necesita reglas propias por tema. --------------------------------------------------------------------- */ :root, [data-tema="noche"] { /* Avisa al navegador para que los controles nativos (fechas, listas desplegables, barras de scroll) se pinten acordes al tema */ color-scheme: dark; /* --- Superficies --- */ --bg: #0b0e14; /* fondo de la aplicación */ --surface: #12161f; /* paneles */ --surface-2: #171c26; /* tarjetas dentro de un panel */ --surface-3: #1e2430; /* encabezados de tabla, pistas, controles */ /* --- Líneas --- */ --line: #252c39; /* separador normal */ --line-strong: #333c4d; /* borde de contenedor */ /* --- Texto --- Los secundarios son claros a propósito: esto se mira a varios metros de distancia en un televisor, y los grises apagados se perdían. Sigue habiendo jerarquía, pero los tres tonos se leen. */ --text: #ffffff; --text-dim: #d3d9e2; /* etiquetas y secundarios */ --text-faint: #aab3c0; /* pie, unidades, datos de apoyo */ /* --- Acento: lo pisa cada área con su color --- */ --accent: var(--azul); /* --- Semáforo, apagado a propósito: en pantalla grande los tonos saturados cansan la vista y le quitan seriedad al tablero --- */ --ok: var(--verde); --warn: var(--amarillo); --bad: var(--rojo); --ok-soft: var(--verde); --warn-soft: var(--amarillo); --bad-soft: var(--rojo); /* --- Apoyo para los gráficos --- */ --grafico-texto: #99a3b4; --grafico-reja: rgba(255,255,255,.07); --cebra: rgba(255,255,255,.018); /* Fondos teñidos para filas y avisos de estado */ --ok-tint: rgba(63,166,106,.12); --warn-tint: rgba(200,146,47,.12); --bad-tint: rgba(201,82,76,.14); } [data-tema="dia"] { color-scheme: light; /* La paleta de arriba está afinada para fondo oscuro: sobre blanco, cinco de los seis colores quedaban ilegibles (el verde en 2,76:1, el naranjo en 2,61:1). Acá va la misma paleta, mismo tono y saturación, bajada de luminosidad hasta cumplir 4,5:1. El objetivo NO es el blanco puro sino #eceef1, la superficie más oscura sobre la que se apoya texto de color: afinando contra blanco quedaban en 4,2-4,4 sobre las tarjetas y las filas con cebra. */ --rojo: #da0000; --azul: #005ef9; --verde: #007c2d; --naranjo: #ad5300; --amarillo: #876600; --turquesa: #007a6d; /* El celeste de Asland, bajado de luminosidad: el #4bc3ff del tema noche queda en 1,9:1 sobre blanco y es ilegible de día. */ --marsella: var(--rojo); --asland: #0079b0; /* Sobre blanco el tinte rinde más, así que va más suave que en modo noche */ --marsella-tint: rgba(218, 0, 0, .07); --asland-tint: rgba(0, 121, 176, .08); --bg: #f4f5f7; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #eceef1; --line: #e2e5ea; --line-strong: #cfd4dc; --text: #12172a; /* Los secundarios van casi en negro por la misma razón que en modo noche van casi en blanco: esto se mira a varios metros en un televisor y los grises intermedios se pierden. Se conserva la jerarquía, pero los tres tonos se leen sin esfuerzo. */ --text-dim: #1b2130; --text-faint: #333c4e; --accent: var(--azul); /* En claro los tonos se oscurecen para mantener el contraste sobre blanco */ --ok: var(--verde); --warn: var(--amarillo); --bad: var(--rojo); --ok-soft: var(--verde); --warn-soft: var(--amarillo); --bad-soft: var(--rojo); --grafico-texto: #333c4e; --grafico-reja: rgba(0,0,0,.08); --cebra: rgba(0,0,0,.022); --ok-tint: #e8f5e9; --warn-tint: #fff3e6; --bad-tint: #fff5f5; } :root { /* --- Espaciado --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; /* --- Tipografía --- */ --font: Arial, Helvetica, sans-serif; --font-mono: Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Nada redondeado en toda la aplicación */ *, *::before, *::after { border-radius: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; transition: background .25s ease, color .25s ease; } /* ---------- Tipografía de apoyo ---------- */ .etiqueta { color: var(--text-dim); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; } .cifra { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } /* ---------- Botones ---------- */ .btn { background: var(--surface-3); color: var(--text); border: 1px solid var(--line-strong); padding: 8px 16px; font-family: inherit; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-2); transition: background .15s, border-color .15s, color .15s; } .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn:disabled { opacity: .45; cursor: wait; } .btn-primario { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primario:hover { filter: brightness(1.15); } .btn-icono { padding: 8px 10px; } .btn-peligro:hover { background: var(--bad); border-color: var(--bad); color: #fff; } /* ---------- Distintivos ---------- */ .badge { padding: 4px 10px; border: 1px solid currentColor; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .badge-ok { color: var(--ok); } .badge-warn { color: var(--warn); } .badge-bad { color: var(--bad); } /* ---------- Panel ---------- */ .panel { background: var(--surface); border: 1px solid var(--line-strong); } /* ---------- Barras de scroll: discretas pero presentes ---------- */ .scroll-fino { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .scroll-fino::-webkit-scrollbar { width: 6px; height: 6px; } .scroll-fino::-webkit-scrollbar-track { background: transparent; } .scroll-fino::-webkit-scrollbar-thumb { background: var(--line-strong); } /* ---------- Animaciones compartidas ---------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .spin { animation: spin 1s linear infinite; }