/* ========================================================================== RUMBO - Identidad visual ========================================================================== TODOS los colores, tamaños y espacios salen de las variables de acá abajo. Para el tema claro sólo se redefinen las mismas variables. Si hace falta cambiar algo, se cambia UNA vez y cambia toda la app: no hay colores escritos a mano en el resto del archivo. ========================================================================== */ /* ---------------------------- TEMA OSCURO ---------------------------- */ :root, :root[data-theme="dark"] { /* Superficies. Gris oscuro, NO negro: antes el fondo era #0b0b0d y quedaba un agujero negro. */ --negro: #1a1a1e; /* fondo general */ --panel: #232327; /* tarjeta */ --panel-alt: #2b2b31; /* tarjeta interna, campos */ --borde: #3a3a41; /* Texto */ --texto: #f0f0f2; --muted: #9a9aa2; /* 6,2:1 sobre el fondo: pasa AA */ /* Acento: el naranja de la marca. Es el ÚNICO color de acento. */ --naranja: #ff6b00; --naranja-cl: #ff9040; /* el naranja como TEXTO */ --naranja-db: rgba(255,107,0,.14); /* Estado */ --ok: #3ecf8e; --alerta: #ffb020; --peligro: #ff5252; --ok-db: rgba(62,207,142,.15); --alerta-db: rgba(255,176,32,.15); --peligro-db: rgba(255,82,82,.15); /* La "chapa" de arriba: barra del logo, acciones y solapas. En OSCURO va igual que el resto; en CLARO queda gris oscuro a propósito. */ --chapa-bg: #232327; --chapa-bg2: #1a1a1e; --chapa-borde: #3a3a41; --chapa-txt: #f0f0f2; --chapa-muted: #9a9aa2; --chapa-activa: #ff9040; /* Fondo de las casillas del formulario. Va MÁS OSCURO que la tarjeta que las rodea: una casilla se tiene que ver hundida, no sobresalir. Antes usaban --panel-alt, que es más CLARO que la tarjeta, y parecían botones. */ --campo-bg: #15151a; /* Colores que SIGNIFICAN algo y no se tocan: el celeste de los alternativos y los de cada tipo de espacio aéreo. */ --alt-color: #35b7d6; --sombra: rgba(0,0,0,.5); --mapa-bg: #0f1116; /* ------------------------- TIPOGRAFÍA ------------------------- UNA sola fuente en toda la app. Antes los códigos, las frecuencias y las horas iban en monoespaciada; se sacó a propósito. ⚠️ Helvetica no viene instalada en Windows: ahí cae en Arial, que tiene exactamente las mismas medidas. No se descarga ninguna fuente: la app tiene que andar sin internet. */ --fuente: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", sans-serif; /* El CUERPO se queda como está. Lo que sube un punto y engorda es todo lo que ROTULA: etiquetas de campo, solapas, encabezados de tabla, píldoras. Eran demasiado tenues al lado del dato que describen. */ --t-base: 13px; --t-etq: 12.5px; /* etiqueta de campo y de dato */ --t-valor: 15px; --t-titulo: 14.5px; /* título de tarjeta */ --t-chico: 12px; --t-mini: 11px; --peso-etq: 600; /* semi-negrita de los rótulos */ --radio: 8px; --radio-btn: 6px; --pad-card: 14px; /* Separación general. Las TARJETAS llevan más aire que el resto: apretadas se leen como una lista continua y cuesta ver dónde termina una y empieza la siguiente. */ --gap: 12px; --gap-cards: 18px; } /* ---------------------------- TEMA CLARO ---------------------------- */ :root[data-theme="light"] { --negro: #eef0f3; --panel: #ffffff; --panel-alt: #f5f6f8; --borde: #dfe3e8; --texto: #1a1d23; --muted: #5f6570; /* 5,9:1 sobre blanco */ --naranja: #ff6b00; /* El naranja como TEXTO sobre claro tiene que ser más oscuro para leerse: el #c85400 que se usaba antes daba 4,45 y se quedaba a 0,05 de pasar. */ --naranja-cl: #b84c00; /* 5,2 sobre blanco */ --naranja-db: rgba(255,107,0,.12); --ok: #177349; /* el #1f8a5b daba 4,33: no pasaba */ --alerta: #9a6100; --peligro: #c62828; --ok-db: rgba(23,115,73,.12); --alerta-db: rgba(154,97,0,.12); --peligro-db: rgba(198,40,40,.10); /* La chapa NO se pone blanca: queda gris oscuro y ancla la pantalla. */ --chapa-bg: #2b3038; --chapa-bg2: #22262d; --chapa-borde: #3d434c; --chapa-txt: #eef0f3; /* 11,6:1 */ --chapa-muted: #b9bec7; /* 7,1:1 */ --chapa-activa: #ff9040; /* 5,9:1 */ --campo-bg: #eef1f5; /* más oscuro que la tarjeta blanca */ --alt-color: #0e7fa0; --sombra: rgba(20,30,50,.18); --mapa-bg: #e8ebf0; } * { box-sizing: border-box; } /* ⚠️ NO HABÍA NINGUNA REGLA GLOBAL PARA LOS ENLACES. Cualquier sin clase salía con el AZUL DE FÁBRICA del navegador (#0000EE), que sobre el tema oscuro es casi ilegible y en los dos temas no tiene nada que ver con la paleta. Pasaba, por ejemplo, con el enlace al AIP del panel de espacios aéreos. Se arregla en la base para que no vuelva a colarse ninguno. */ a { color: var(--naranja-cl); text-decoration-color: rgba(255,144,64,.45); } a:hover { text-decoration-color: currentColor; } a:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: 3px; } /* En la hoja impresa los enlaces van en negro: el naranja sale gris claro. */ .hoja-papel a { color: #000 !important; } html, body { height: 100%; } body { margin: 0; font-family: var(--fuente); background: var(--negro); color: var(--texto); font-size: var(--t-base); line-height: 1.45; /* Cifras del mismo ancho donde la fuente lo soporte. No está garantizado en todos los sistemas, pero acá no molesta: los valores van cada uno en su celda y la alineación entre filas la da la grilla, no la fuente. */ font-variant-numeric: tabular-nums; } /* UNA sola fuente, de verdad. Hay tres cosas que NO la heredan solas: · los