/* ============================================================ FOV · Sistema de diseño (tokens + estilos base) Aplica data-theme="light" | "dark" en o . ============================================================ */ :root { /* Superficies y texto (tema claro) */ --bg: oklch(0.985 0.004 250); --bg-2: oklch(0.965 0.006 255); --surface: #ffffff; --surface-2: oklch(0.975 0.005 255); --border: oklch(0.905 0.007 255); --border-2: oklch(0.86 0.008 255); --text: oklch(0.24 0.015 265); --text-muted: oklch(0.53 0.013 262); /* Acento (violeta) */ --accent: oklch(0.55 0.20 274); --accent-strong: oklch(0.47 0.21 274); --accent-soft: oklch(0.955 0.03 274); --on-accent: #ffffff; /* Estados de salud */ --ok: oklch(0.66 0.15 155); --warn: oklch(0.74 0.15 78); --bad: oklch(0.60 0.21 25); --ok-soft: oklch(0.95 0.05 155); --warn-soft: oklch(0.96 0.06 82); --bad-soft: oklch(0.95 0.05 25); /* Sombras */ --shadow: 0 1px 2px rgba(16,18,28,.05), 0 10px 30px -12px rgba(16,18,28,.14); --shadow-sm: 0 1px 2px rgba(16,18,28,.06); /* Radios */ --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; } [data-theme="dark"] { --bg: oklch(0.165 0.013 265); --bg-2: oklch(0.195 0.015 265); --surface: oklch(0.212 0.016 265); --surface-2: oklch(0.25 0.017 265); --border: oklch(0.31 0.017 265); --border-2: oklch(0.37 0.018 265); --text: oklch(0.96 0.005 255); --text-muted: oklch(0.70 0.012 260); --accent: oklch(0.70 0.16 274); --accent-strong: oklch(0.78 0.15 274); --accent-soft: oklch(0.30 0.06 274); --on-accent: oklch(0.16 0.02 274); --ok: oklch(0.72 0.15 155); --warn: oklch(0.80 0.14 82); --bad: oklch(0.68 0.20 25); --ok-soft: oklch(0.30 0.05 155); --warn-soft: oklch(0.32 0.05 82); --bad-soft: oklch(0.32 0.06 25); --shadow: 0 1px 2px rgba(0,0,0,.3), 0 18px 40px -14px rgba(0,0,0,.55); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); } /* ---- Reset y base ---- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Lekton', ui-monospace, monospace; -webkit-font-smoothing: antialiased; background: var(--bg); color: var(--text); transition: background .25s, color .25s; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-strong); } input, button, select { font-family: inherit; } input::placeholder { color: var(--text-muted); opacity: .7; } /* Tipografía de apoyo */ .font-display { font-family: 'Lekton', monospace; font-weight: 700; } .font-mono { font-family: 'Lekton', monospace; } /* ---- Componentes reutilizables ---- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); transition: background .15s; } .btn:hover { background: var(--accent-strong); } .btn:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; box-shadow: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 500; cursor: pointer; } .btn-ghost:hover { border-color: var(--bad); color: var(--bad); } .field { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 15px; outline: none; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); } /* Chip de estado de salud (verde/ámbar/rojo) */ .health-dot { width: 9px; height: 9px; border-radius: 50%; } .health-dot.ok { background: var(--ok); } .health-dot.warn { background: var(--warn); } .health-dot.bad { background: var(--bad); } @keyframes fovspin { to { transform: rotate(360deg); } } .spin { animation: fovspin 1s linear infinite; }