/* ================================================================ JOFER — Sistema de temas: HUD (oscuro) · Blueprint (claro) ---------------------------------------------------------------- 100% basado en custom properties: punto único de control de color, glow, biseles y tipografía. Mismo lenguaje visual en ambos modos; solo cambian los VALORES de las variables. · :root = HUD (oscuro, por defecto). En oscuro "brilla". · prefers-color-scheme: light = Blueprint (respeta el SO). · [data-theme] = fuerza el modo manualmente, con prioridad: [data-theme="light"] → Blueprint (en claro "se traza") [data-theme="dark"] → HUD (mantiene oscuro aunque el SO esté en claro) Contrato de conmutación: poner/quitar el atributo data-theme en . Sin atributo = sigue al SO (oscuro si el SO es oscuro). ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&family=Orbitron:wght@500;600;700;800&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* =============================================================== TOKENS — :root = HUD (oscuro, por defecto) =============================================================== */ :root { /* ── Surfaces ──────────────────────────────────────────── */ --bg: #080c16; --bg-grad: radial-gradient(1100px 620px at 50% -12%, #0d1626 0%, #080c16 62%); --bg-surface: #0b1120; --bg-card: #0d1422; --surface: var(--bg-card); /* alias semántico */ --bg-input: #0e1728; --bg-hover: #13203a; --bg-nav: #090e1a; /* ── Borders ───────────────────────────────────────────── */ --border: rgba(45,212,238,.42); --border-subtle: rgba(45,212,238,.16); --border-strong: rgba(45,212,238,.70); /* ── Text ──────────────────────────────────────────────── */ --text: #dceef4; --text-2: #6d8b9b; --text-muted: var(--text-2); /* alias */ --text-3: #45606e; --on-accent: #04121a; /* texto sobre el acento */ /* ── Accent — cian HUD ─────────────────────────────────── */ --accent: #2dd4ee; --accent-strong: #5fe6fb; --accent-dim: rgba(45,212,238,.12); /* ── Glow (en oscuro, brilla de verdad) ────────────────── */ --glow-accent: 0 0 14px rgba(45,212,238,.55); /* box-shadow: iconos, anillos */ --glow-text: 0 0 16px rgba(45,212,238,.50); /* text-shadow: números grandes */ --glow-card: drop-shadow(0 0 7px rgba(45,212,238,.30)); /* filter: respeta el bisel */ --glow-btn: drop-shadow(0 0 11px rgba(45,212,238,.55)); /* ── Semántico (tinte frío) ────────────────────────────── */ --success: #22d39a; --success-dim: rgba(34,211,154,.14); --warning: #f5b942; --warning-dim: rgba(245,185,66,.14); --danger: #ff5b6e; --danger-dim: rgba(255,91,110,.13); /* ── Biseles (comunes a ambos temas) ───────────────────── */ --bevel: 12px; --bevel-sm: 7px; --clip-card: polygon(0 0, calc(100% - var(--bevel)) 0, 100% var(--bevel), 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel))); --clip-btn: polygon(0 0, calc(100% - var(--bevel-sm)) 0, 100% var(--bevel-sm), 100% 100%, var(--bevel-sm) 100%, 0 calc(100% - var(--bevel-sm))); /* ── Radii & transitions ───────────────────────────────── */ --radius-sm: 8px; --radius-md: 12px; --trans: .15s ease; /* ── Menú lateral ──────────────────────────────────────── */ --sb-w: 214px; /* ancho desplegado */ --sb-w-min: 62px; /* ancho colapsado (solo iconos) */ /* ── Tipografía ────────────────────────────────────────── */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Orbitron', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --tracking-wide: .12em; } /* =============================================================== Blueprint (claro) — el cian pasa a azul técnico sólido, los glows se apagan (sobre blanco no se ilumina) y se trazan líneas finas. Se define en dos sitios: media query (sigue al SO) y data-theme (fuerza manual, con prioridad). Mismos valores en ambos. =============================================================== */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #eef3f9; --bg-grad: none; --bg-surface: #e4ecf5; --bg-card: #ffffff; --bg-input: #f7fafd; --bg-hover: #e9f0f8; --bg-nav: #e4ecf5; --border: rgba(11,109,181,.40); --border-subtle: rgba(11,109,181,.18); --border-strong: rgba(11,109,181,.65); --text: #13202d; --text-2: #5a6b78; --text-3: #8595a1; --on-accent: #ffffff; --accent: #0b6db5; --accent-strong: #095a96; --accent-dim: rgba(11,109,181,.10); --glow-accent: 0 1px 3px rgba(16,32,46,.08); --glow-text: none; --glow-card: drop-shadow(0 1px 2px rgba(16,32,46,.06)); --glow-btn: none; --success: #0e8247; --success-dim: rgba(14,130,71,.10); --warning: #b9770a; --warning-dim: rgba(185,119,10,.12); --danger: #c92a3b; --danger-dim: rgba(201,42,59,.09); } } [data-theme="light"] { --bg: #eef3f9; --bg-grad: none; --bg-surface: #e4ecf5; --bg-card: #ffffff; --bg-input: #f7fafd; --bg-hover: #e9f0f8; --bg-nav: #e4ecf5; --border: rgba(11,109,181,.40); --border-subtle: rgba(11,109,181,.18); --border-strong: rgba(11,109,181,.65); --text: #13202d; --text-2: #5a6b78; --text-3: #8595a1; --on-accent: #ffffff; --accent: #0b6db5; --accent-strong: #095a96; --accent-dim: rgba(11,109,181,.10); --glow-accent: 0 1px 3px rgba(16,32,46,.08); --glow-text: none; --glow-card: drop-shadow(0 1px 2px rgba(16,32,46,.06)); --glow-btn: none; --success: #0e8247; --success-dim: rgba(14,130,71,.10); --warning: #b9770a; --warning-dim: rgba(185,119,10,.12); --danger: #c92a3b; --danger-dim: rgba(201,42,59,.09); } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); background: var(--bg); background-image: var(--bg-grad); background-attachment: fixed; color: var(--text); line-height: 1.5; min-height: 100vh; } a { color: var(--accent); text-decoration: none; transition: color var(--trans); } a:hover { color: var(--accent-strong); } /* ── Navbar ───────────────────────────────────────────────────── */ .navbar { display: flex; align-items: center; gap: .75rem; padding: 0 1.25rem; height: 48px; background: var(--bg-nav); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .navbar-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .875rem; color: var(--text); letter-spacing: .02em; white-space: nowrap; } .navbar-brand:hover { color: var(--accent); } .navbar-logo { width: 28px; height: 28px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .6875rem; font-weight: 800; color: var(--on-accent); letter-spacing: .04em; box-shadow: var(--glow-accent); } .navbar-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } .navbar-title { font-size: .8125rem; font-weight: 500; color: var(--text-2); white-space: nowrap; } .navbar-actions { margin-left: auto; display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; } .navbar-actions .btn.is-active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); font-weight: 600; } .navbar-actions .btn.nav-icon { padding: .375rem .5rem; display: inline-flex; align-items: center; justify-content: center; } @media (max-width:720px) { .navbar-title { display: none; } .navbar-sep { display: none; } .navbar-actions .btn { padding: .375rem .5rem; font-size: .8125rem; } } /* ── Container ────────────────────────────────────────────────── */ .container { width: 100%; max-width: 100%; margin: 0 auto; padding: 1.5rem 2rem; } @media (max-width:600px) { .container { padding: 1rem .75rem; } } main { min-height: 100vh; } /* Solo las páginas con sidebar desplazan el contenido (login y similares no). */ .sidebar ~ main { margin-left: var(--sb-w); transition: margin-left var(--trans); } html.sb-collapsed .sidebar ~ main { margin-left: var(--sb-w-min); } /* =============================================================== MENÚ LATERAL (sidebar) — montado en includes/navbar.php =============================================================== */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--sb-w); display: flex; flex-direction: column; background: var(--bg-nav); border-right: 1px solid var(--border); z-index: 200; transition: width var(--trans), transform .2s ease; } html.sb-collapsed .sidebar { width: var(--sb-w-min); } .sb-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; height: 48px; padding: 0 .7rem; border-bottom: 1px solid var(--border); flex-shrink: 0; } .sb-brand { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; color: var(--text); white-space: nowrap; overflow: hidden; font-size: .82rem; } .sb-brand:hover { color: var(--accent); } .sb-collapse { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text-2); cursor: pointer; width: 26px; height: 26px; line-height: 1; flex-shrink: 0; transition: color var(--trans), border-color var(--trans); } .sb-collapse:hover { color: var(--accent); border-color: var(--border-strong); } html.sb-collapsed .sb-collapse { transform: rotate(180deg); } .sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: .12rem; padding: .6rem .5rem; } .sb-link { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text-2); white-space: nowrap; overflow: hidden; font-size: .86rem; text-decoration: none; transition: background var(--trans), color var(--trans); } .sb-link:hover { background: var(--bg-hover); color: var(--text); } .sb-link.is-active { background: var(--accent-dim); color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); } .sb-ico { width: 1.4rem; flex-shrink: 0; text-align: center; font-size: 1.05rem; } .sb-foot { border-top: 1px solid var(--border); padding: .55rem .5rem; display: flex; flex-direction: column; gap: .35rem; flex-shrink: 0; } .sb-extra { display: flex; flex-wrap: wrap; gap: .35rem; } .sb-foot-row { display: flex; align-items: center; gap: .55rem; padding: 0 .15rem; } .sb-user { color: var(--text-2); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Colapsado: ocultar textos, centrar iconos */ html.sb-collapsed .sb-txt, html.sb-collapsed .sb-brand-txt { display: none; } html.sb-collapsed .sb-link { justify-content: center; gap: 0; padding: .5rem 0; } html.sb-collapsed .sb-ico { width: auto; } html.sb-collapsed .sb-head { justify-content: center; padding: 0 .4rem; } html.sb-collapsed .sb-foot-row { justify-content: center; } /* Barra superior (Agenda / Tareas) — alineada con el contenido a la derecha del sidebar */ .topbar { display: flex; align-items: center; gap: .5rem; height: 48px; padding: 0 1rem; background: var(--bg-nav); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 150; margin-left: var(--sb-w); transition: margin-left var(--trans); } html.sb-collapsed .topbar { margin-left: var(--sb-w-min); } .topbar-spacer { flex: 1; } .topbar-title { font-size: .82rem; color: var(--text-2); font-family: var(--font-display); letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sb-burger { display: none; } /* solo móvil */ .sb-overlay { display: none; } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); width: var(--sb-w) !important; box-shadow: 0 0 30px rgba(0,0,0,.5); } .sidebar.open { transform: none; } /* En el cajón móvil siempre se ve el texto, aunque esté "colapsado" */ html.sb-collapsed .sb-txt, html.sb-collapsed .sb-brand-txt { display: inline; } html.sb-collapsed .sb-link { justify-content: flex-start; gap: .7rem; padding: .5rem .6rem; } html.sb-collapsed .sb-ico { width: 1.4rem; } .sb-collapse { display: none; } .sidebar ~ main, html.sb-collapsed .sidebar ~ main { margin-left: 0; } .topbar, html.sb-collapsed .topbar { margin-left: 0; padding: 0 .8rem; } .sb-burger { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; width: 34px; height: 30px; flex-shrink: 0; } .sb-overlay.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 190; } } /* ── Buttons ──────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); /* fallback sin clip-path */ clip-path: var(--clip-btn); /* bisel de esquina recortada */ font-family: var(--font); font-size: .8125rem; font-weight: 600; cursor: pointer; transition: all var(--trans); white-space: nowrap; line-height: 1.4; } .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); filter: var(--glow-btn); /* glow respeta el bisel (drop-shadow) */ } .btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); } .btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); } .btn-sm { padding: .3125rem .75rem; font-size: .75rem; } .btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; } /* ── Section cards ────────────────────────────────────────────── */ .section-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); /* fallback sin clip-path */ clip-path: var(--clip-card); /* bisel de esquina recortada */ filter: var(--glow-card); overflow: hidden; } .section-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.125rem; border-bottom: 1px solid var(--border); background: var(--bg-surface); } .section-header-title { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-2); } .section-body { padding: 1rem 1.125rem; } /* ── Forms ────────────────────────────────────────────────────── */ /* Los inputs conservan radio (no bisel) para no recortar el anillo de foco (box-shadow), que el clip-path eliminaría. */ .form-input, .form-select { width: 100%; padding: .625rem .875rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: .875rem; transition: border-color var(--trans), box-shadow var(--trans); outline: none; } .form-input:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim), var(--glow-accent); } .form-input::placeholder { color: var(--text-3); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236d8b9b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2rem; } .form-group { margin-bottom: 1.125rem; } .form-label { display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-2); margin-bottom: .375rem; } textarea.form-input { resize: vertical; min-height: 2.75rem; } /* ── Drag & drop de archivos (lo monta app.js) ────────────────── */ .dz { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 64px; padding: .85rem 1rem; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-input); cursor: pointer; transition: border-color var(--trans), background var(--trans); } .dz:hover { border-color: var(--accent); } .dz.is-over { border-color: var(--accent); background: var(--accent-dim); } .dz.has-file { border-style: solid; border-color: var(--accent); } .dz input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dz-label { pointer-events: none; display: flex; align-items: center; gap: .6rem; color: var(--text-2); font-size: .82rem; } .dz-ico { font-size: 1.3rem; } .dz-sub { color: var(--text-3); font-size: .72rem; } /* ── Badges ───────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: .1875rem .625rem; border-radius: 9999px; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; line-height: 1.4; } .badge-baja { background: var(--success-dim); color: var(--success); } .badge-media { background: var(--warning-dim); color: var(--warning); } .badge-alta { background: var(--danger-dim); color: var(--danger); } .badge-abierta { background: var(--danger-dim); color: var(--danger); } .badge-analisis { background: var(--accent-dim); color: var(--accent); } .badge-cerrada { background: var(--success-dim); color: var(--success); } .badge-descartada { background: rgba(102,102,102,.15); color: var(--text-3); } /* ── Utilities ────────────────────────────────────────────────── */ ::selection { background: var(--accent); color: var(--on-accent); } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* ── Theme toggle ─────────────────────────────────────────────── */ .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-2); font-size: 1rem; line-height: 1; transition: all var(--trans); padding: 0; flex-shrink: 0; } .theme-toggle:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--border-strong); } /* ── Responsive ───────────────────────────────────────────────── */ @media (max-width: 640px) { .navbar { padding: 0 .875rem; gap: .5rem; } .navbar-title { display: none; } .container { padding: 1rem .875rem; } } /* =============================================================== HUD — refuerzo visual (fuente display + marco/decoración) Todo vía tokens: en Blueprint los glows son none/sutiles, así que los corchetes y cabeceras pasan de "brillar" a "trazarse" solos. =============================================================== */ /* Tipografía display (Orbitron) en cabeceras, marca y etiquetas de sección */ h1, h2, h3, .navbar-brand, .section-header-title, .section-label { font-family: var(--font-display); letter-spacing: .04em; } /* Cabeceras de sección: línea de acento + título cian con glow */ .section-header { border-bottom-color: var(--border-strong); } .section-header-title { color: var(--accent); text-shadow: var(--glow-text); } /* Marco tipo visor: corchetes en las dos esquinas rectas de la tarjeta */ .section-card, .dash-card, .rsm-card { position: relative; } .section-card::before, .section-card::after, .dash-card::before, .dash-card::after, .rsm-card::before, .rsm-card::after { content: ""; position: absolute; width: 13px; height: 13px; border: 2px solid var(--accent); pointer-events: none; z-index: 2; filter: var(--glow-btn); } .section-card::before, .dash-card::before, .rsm-card::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; } .section-card::after, .dash-card::after, .rsm-card::after { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }