/* =================================================================== TEMA Tres estados: por defecto se sigue al sistema (`prefers-color-scheme`); si la persona elige a mano, `` lleva data-theme="light|dark" y esa elección manda sobre el sistema en ambas direcciones. Regla al tocar esto: NINGÚN color puede definirse SOLO dentro del bloque oscuro o de la media query. Todo se declara aquí, en :root, y allí solo se redefine. Si no, el tema claro se queda sin ese color. Los tonos de texto cumplen el contraste AA (4,5:1) al tamaño pequeño en que se usan: `muted` aparece a 11-12 px y `ok`/`warn` van además sobre los fondos tintados de los badges, que reducen el contraste respecto al fondo. =================================================================== */ :root { color-scheme: light; --bg: #f4f6f8; --panel: #ffffff; --surface: #ffffff; /* campos, tablas, desplegables */ --surface-2: #f0f4f8; /* cabeceras de tabla, encabezados suaves */ --surface-3: #f7fafd; /* fila al pasar el ratón, citas */ --surface-hover: #eef6fc; /* botón fantasma y opción de autocompletado */ --ink: #1c2733; --on-accent: #ffffff; /* texto sobre un fondo de color (botones) */ --muted: #5b6b7b; /* 5,5:1 sobre blanco */ --line: #dde3e9; --line-soft: #eef2f6; /* separadores internos de tabla */ --focus-ring: #bcd8f0; --accent: #0a6ebd; /* 5,3:1 */ --accent-dark: #075a99; --ok: #177a44; /* 5,4:1 sobre blanco · 4,7:1 sobre el verde del badge */ --warn: #96610a; /* 5,2:1 */ --danger: #c0392b; /* 5,4:1 sobre blanco · 4,6:1 sobre el rojo del badge */ --tint-ok: #e2f5ea; --tint-err: #fbe7e5; --tint-warn: #fdf9ef; --tint-na: #eef1f4; --tint-sel: #fbe1de; /* fila seleccionada (tabla ↔ mapa) */ --tint-pk: #dcecfa; --tint-fk: #f3e8fb; --ink-fk: #7a3fa0; --ink-sin: #7d6a2f; /* «sin descripción» del esquema */ --sombra: rgba(0,0,0,.12); --radius: 8px; } /* Paleta oscura. Se aplica por sistema salvo que se haya elegido «claro» a mano. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121a21; --panel: #1a242e; --surface: #1a242e; --surface-2: #22303c; --surface-3: #1f2b36; --surface-hover: #26323e; --ink: #e4ebf1; /* 14,6:1 sobre el fondo */ --on-accent: #0b1620; /* el acento claro pide texto OSCURO encima */ --muted: #9aacbd; /* 7,5:1 */ --line: #33434f; --line-soft: #2a3742; --focus-ring: #2b6ea8; --accent: #4da3e8; /* 6,5:1 · el azul oscuro no se lee sobre fondo oscuro */ --accent-dark: #7cc0f5; --ok: #4cc98a; --warn: #e0a63c; --danger: #ef7d70; --tint-ok: #14301f; --tint-err: #35201d; --tint-warn: #33290f; --tint-na: #232f3a; --tint-sel: #3d2422; --tint-pk: #16304a; --tint-fk: #2e2140; --ink-fk: #c9a4e8; --ink-sin: #c2ab63; --sombra: rgba(0,0,0,.5); } } /* Elección manual de «oscuro»: gana también si el sistema está en claro. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #121a21; --panel: #1a242e; --surface: #1a242e; --surface-2: #22303c; --surface-3: #1f2b36; --surface-hover: #26323e; --ink: #e4ebf1; --on-accent: #0b1620; --muted: #9aacbd; --line: #33434f; --line-soft: #2a3742; --focus-ring: #2b6ea8; --accent: #4da3e8; --accent-dark: #7cc0f5; --ok: #4cc98a; --warn: #e0a63c; --danger: #ef7d70; --tint-ok: #14301f; --tint-err: #35201d; --tint-warn: #33290f; --tint-na: #232f3a; --tint-sel: #3d2422; --tint-pk: #16304a; --tint-fk: #2e2140; --ink-fk: #c9a4e8; --ink-sin: #c2ab63; --sombra: rgba(0,0,0,.5); } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Topbar */ /* `min-height` y no `height`: el menú tiene 10 entradas y envuelve en ventanas estrechas; con altura fija la segunda línea se salía y pisaba el contenido. */ /* La barra superior es oscura en los dos temas a propósito: es el ancla visual de la aplicación y así el cambio de tema no la hace «saltar». Por eso sus colores NO son variables de tema. */ .topbar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: #0e2233; color: #fff; padding: 6px 20px; min-height: 54px; } .brand { font-weight: 700; color: #fff; } .brand:hover { text-decoration: none; } /* Primer tabulador de la página: permite saltarse el menú de 10 entradas. Fuera de pantalla hasta que recibe el foco. */ /* `fixed` y no `absolute`: con absolute, al tabular con la página desplazada el enlace aparecería en la parte superior del DOCUMENTO, es decir, fuera de la vista. */ /* Se esconde con translateY(-100%) en vez de un `top` negativo fijo: así no hay que acertar la altura del enlace (con `top:-60px` asomaban 5px en cada página, y cualquier cambio de tipografía volvería a descuadrarlo). */ .skip-link { position: fixed; left: 8px; top: 0; z-index: 100; transform: translateY(-110%); background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: 0 0 6px 6px; transition: transform .12s; } .skip-link:focus { transform: translateY(0); text-decoration: none; } .mainnav { display: flex; gap: 4px; flex-wrap: wrap; } .mainnav a { color: #cdd8e2; padding: 8px 12px; border-radius: 6px; font-size: 14px; } .mainnav a:hover { background: rgba(255,255,255,.1); text-decoration: none; } .mainnav a.active { background: var(--accent); color: var(--on-accent); } /* Botón «☰ Menú». Nunca se ve en pantalla ancha; en estrecha lo enciende la media query de más abajo, y solo si el JS ha marcado `js-nav`. Comparte aspecto con el botón de tema: van juntos sobre el fondo oscuro fijo de la barra, así que sus colores tampoco salen de las variables de tema. */ .nav-toggle { display: none; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; padding: 8px 12px; border-radius: 6px; } .nav-toggle:hover { background: rgba(255,255,255,.18); } /* ---- Menú plegable en pantallas estrechas ------------------------------- Todo cuelga de `.js-nav` (la pone initMenuMovil). Sin JS no se aplica nada de esto y el menú sigue envolviéndose en varias líneas: preferible a esconderlo sin dejar botón para abrirlo. El umbral es 760 px, el mismo que usan los formularios. Entre 760 y ~950 el menú de 10 entradas todavía envuelve en dos líneas, y eso se acepta: para una herramienta interna en una tablet es razonable, y bajar el umbral pondría una hamburguesa a quien solo tiene tres entradas visibles por permisos. */ @media (max-width: 760px) { .topbar { gap: 10px; } /* `min-height` y no más relleno: es el control principal en un móvil y debe llegar a los 44px de objetivo táctil sin engordar el texto. */ .js-nav .nav-toggle { display: inline-flex; min-height: 44px; } .js-nav .mainnav { display: none; } /* Al abrirse ocupa una fila entera y se apila: diez enlaces en horizontal en un móvil son inpulsables. No se reordena nada con `order` a propósito — el orden de tabulación sigue al DOM, no a la vista, y separarlos dejaría el foco saltando por la pantalla. */ .js-nav .mainnav.abierto { display: flex; flex-direction: column; width: 100%; gap: 2px; padding-bottom: 6px; } /* 12px arriba y abajo dejan el enlace en 45px de alto: con 10px se quedaba en 41 y el objetivo táctil recomendado son 44. Con el dedo se nota. */ .js-nav .mainnav.abierto a { padding: 12px; } } /* Botón de tema (barra superior). Va sobre el fondo oscuro fijo de la barra, así que sus colores tampoco son variables de tema. */ .btn-tema { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 9px; border-radius: 6px; } .btn-tema:hover { background: rgba(255,255,255,.2); } .btn-tema .tema-icono { display: inline-block; } /* Caja de usuario (derecha de la barra) */ .userbox { margin-left: auto; display: flex; align-items: center; gap: 10px; } .userbox .uname { color: #cdd8e2; font-size: 13px; white-space: nowrap; padding: 6px 8px; border-radius: 6px; } .userbox a.uname:hover { background: rgba(255,255,255,.1); text-decoration: none; } /* Login / arranque */ .login-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; } .login-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; width: 100%; max-width: 380px; box-shadow: 0 8px 30px var(--sombra); } .login-brand { font-weight: 700; color: var(--ink); margin-bottom: 14px; } .login-card h1 { font-size: 20px; margin: 0 0 6px; } .login-card .field { margin-bottom: 14px; } .login-card .field input { width: 100%; } .login-foot { font-size: 12px; } .container { max-width: 1200px; margin: 0 auto; padding: 22px 20px 60px; } .page-title { margin: 4px 0 18px; font-size: 22px; } .intro { margin: -10px 0 20px; color: var(--muted); font-size: 15px; max-width: 70ch; } .footer { text-align: center; color: var(--muted); padding: 20px; font-size: 13px; } /* Cards / panels */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; } /* Dashboard tiles */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; text-align: center; } .tile .num { font-size: 30px; font-weight: 700; color: var(--accent); } .tile .lbl { color: var(--muted); font-size: 13px; margin-top: 4px; } /* Los KPI usan grid y no arrastran margen inferior: hay que separarlos de lo que sigue. */ .panel-tras-tiles { margin-top: 22px; } /* Tablas resumen del panel de inicio */ .resumen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; } .resumen-grid .panel { margin-bottom: 0; } .resumen-grid h2 { font-size: 16px; margin: 0 0 2px; } table.mini { width: 100%; border-collapse: collapse; font-size: 13px; } table.mini td { padding: 6px 4px; border-bottom: 1px solid var(--line-soft); vertical-align: top; } table.mini tr:last-child td { border-bottom: 0; } .mini-k { white-space: nowrap; font-family: ui-monospace, "Consolas", monospace; width: 1%; } .mini-v { width: 100%; } .mini-n { text-align: right; white-space: nowrap; color: var(--accent-dark); } /* Toolbar / filters */ .toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-size: 12px; color: var(--muted); } /* Hueco que alinea los botones de la toolbar con los campos etiquetados. Antes era un