/* FrontAI Portal · xAI-inspired design system (design.md)
   Near-black canvas, white outline pills, Inter(400) display + Geist Mono eyebrows,
   hairline borders, no shadows. Dark-canvas only. */

:root{
  /* surface */
  --canvas:#0a0a0a; --canvas-soft:#1a1c20; --canvas-card:#191919;
  --canvas-mid:#363a3f; --hairline:#212327;
  /* text */
  --ink:#ffffff; --ink-hover:#fafaf7; --body:#dadbdf; --mute:#7d8187;
  /* primary + accents (accents rare, illustrative only) */
  --primary:#ffffff; --on-primary:#0a0a0a;
  --sunset:#ff7a17; --sunset-soft:#ffc285; --dusk:#7c3aed;
  --twilight:#c4b5fd; --breeze:#a0c3ec; --midnight:#0d1726;
  /* radius */
  --r-sm:8px; --r-pill:9999px;
  /* border for outline pills (translucent white) */
  --pill-border:rgba(255,255,255,.25);
  /* ---- configurables por /settings (theme.js los sobreescribe) ---- */
  --accent:var(--sunset);   /* color de acento activo */
  --r-card:8px;             /* esquinas de tarjetas: 0 / 8 / 16 */
  --density:1;              /* densidad: .85 compacta · 1 · 1.2 amplia */
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Geist+Mono:wght@400&display=swap');

*{box-sizing:border-box}
html,body{background:var(--canvas);color:var(--ink)}
body{margin:0;
  font:400 16px/24px Inter,system-ui,-apple-system,sans-serif;
  letter-spacing:-.01em}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--ink-hover)}

/* eyebrow — Geist Mono UPPERCASE tracked (signature label) */
.eyebrow{font:400 14px/20px 'Geist Mono',ui-monospace,monospace;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);
  display:block;margin-bottom:12px}
[data-eyebrows="off"] .eyebrow{display:none}

h2{font:400 32px/36px Inter,sans-serif;letter-spacing:-.6px;margin:0 0 16px}
h3{font:400 20px/28px Inter,sans-serif;letter-spacing:-.02em;margin:0 0 12px}

/* ---- top nav ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px;border-bottom:1px solid var(--hairline);background:var(--canvas)}
.brand{font:400 20px/24px Inter,sans-serif;letter-spacing:-.04em;color:var(--ink)}
.brand span{color:var(--ink)}
.topbar nav{display:flex;gap:16px;align-items:center}
.topbar nav a{font-size:14px;color:var(--body)}
.topbar .who{color:var(--mute);font-size:14px}
.wrap{max-width:1200px;margin:0 auto;padding:48px 24px}

/* ---- buttons: pills ---- */
button,.btn{font:400 14px/20px Inter,sans-serif;cursor:pointer;
  border-radius:var(--r-pill);padding:8px 16px}
.btn-primary,button[type=submit]{background:var(--primary);color:var(--on-primary);
  border:1px solid var(--primary)}
.btn-outline{background:transparent;color:var(--ink);border:1px solid var(--pill-border)}
button:hover,.btn:hover{filter:brightness(.96)}
/* toggle botones (settings): outline = pill translúcido (estilo xAI puro) */
[data-buttons="outline"] button[type=submit],
[data-buttons="outline"] .btn-primary{
  background:transparent;color:var(--ink);border:1px solid var(--pill-border)}

/* ---- launcher (cards) ---- */
.launcher .eyebrow{margin-bottom:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.card{background:var(--canvas-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:calc(24px*var(--density));display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card:hover{border-color:var(--pill-border)}
.card .icon{position:relative;width:44px;height:44px;border-radius:var(--r-pill);background:var(--canvas-soft);
  display:grid;place-items:center;font:400 18px Inter,sans-serif;color:var(--ink)}
.card .badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-pill);background:#ef4444;color:#fff;font:400 11px/18px Inter,sans-serif;text-align:center}
.card .name{font-size:16px;color:var(--ink);display:inline-flex;align-items:center}
/* estado salud del modulo */
.dot{width:8px;height:8px;border-radius:var(--r-pill);display:inline-block;margin-right:8px;flex-shrink:0}
.dot.ok{background:#22c55e}
.dot.down{background:#ef4444}
.dot.unknown{background:var(--mute)}
.card.submenu .icon{border:1px dashed var(--pill-border);background:transparent}
.card .tag{font:400 12px/16px 'Geist Mono',monospace;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mute);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:2px 10px}
.empty{color:var(--mute)}

/* ---- dashboard ---- */
.dash{margin-top:48px;border-top:1px solid var(--hairline);padding-top:48px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.kpi{background:var(--canvas-card);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:calc(24px*var(--density));display:flex;flex-direction:column;gap:6px}
.kpi .label{font:400 12px/16px 'Geist Mono',monospace;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mute)}
.kpi .val{font:400 32px/36px Inter,sans-serif;letter-spacing:-.6px;color:var(--ink)}
.kpi .sub{font-size:12px;color:var(--mute)}
.bar{height:4px;background:var(--canvas-mid);border-radius:var(--r-pill);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--accent)}

/* resumen por modulo (/summary) */
.modsum{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.modsum-card{border:1px solid var(--hairline);border-radius:var(--r-card);padding:16px;background:var(--canvas-soft)}
.modsum-name{font-size:14px;color:var(--ink);display:block;margin-bottom:12px}
.modsum-metrics{display:flex;flex-wrap:wrap;gap:16px}
.metric{display:flex;flex-direction:column}
.metric .m-val{font:400 24px/28px Inter,sans-serif;letter-spacing:-.4px;color:var(--ink)}
.metric .m-lbl{font:400 11px/16px 'Geist Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--mute)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:768px){.grid2{grid-template-columns:1fr}.wrap{padding:32px 16px}}
.panel{background:var(--canvas-card);border:1px solid var(--hairline);border-radius:var(--r-card);padding:calc(24px*var(--density))}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--hairline)}
th{font:400 12px/16px 'Geist Mono',monospace;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mute)}
td{color:var(--body)}
.feed{list-style:none;margin:0;padding:0;font-size:14px}
.feed li{padding:12px 0;border-bottom:1px solid var(--hairline);color:var(--body)}
.feed .src{font:400 12px 'Geist Mono',monospace;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--mute);margin-right:8px}

/* ---- login / config ---- */
.login,.config,.settings{margin:64px auto;background:var(--canvas-card);
  border:1px solid var(--hairline);border-radius:var(--r-card);padding:32px}
.login{max-width:440px}
.config{max-width:760px}
.settings{max-width:560px}

/* ---- tabs (config hub) ---- */
.tabs{display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid var(--hairline);
  padding-bottom:16px;margin-bottom:24px}
.tab-btn{background:var(--canvas-soft);color:var(--body);border:1px solid var(--hairline);
  border-radius:var(--r-pill);padding:8px 18px}
.tab-btn.active{border-color:var(--accent);color:var(--ink)}
.tab-panel{display:none}
.tab-panel.active{display:block}
/* selector + lista de accesos */
.select{background:var(--canvas-soft);color:var(--ink);border:1px solid var(--hairline);
  border-radius:var(--r-sm);padding:10px 14px;font:400 14px Inter,sans-serif;min-width:260px}
.select:focus{outline:none;border-color:var(--accent)}
.access-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.access-list li{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--canvas-soft)}
.switch{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.switch input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.switch input:disabled{opacity:.4;cursor:not-allowed}
.switch .sw-name{flex:1;font-size:14px;color:var(--ink)}
.login form{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.login label{display:flex;flex-direction:column;gap:8px;font:400 12px/16px 'Geist Mono',monospace;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--mute)}
.login input{background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:12px 16px;color:var(--ink);font:400 16px Inter,sans-serif}
.login input:focus{outline:none;border-color:var(--accent)}

/* ---- settings (theme switcher) ---- */
.opt-group{border-bottom:1px solid var(--hairline);padding:20px 0}
.opt-group:last-of-type{border-bottom:none}
.opt-group > .eyebrow{margin-bottom:14px}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opts label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--canvas-soft);border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:8px 16px;font-size:14px;color:var(--body)}
.opts input{accent-color:var(--accent);margin:0}
.opts label:has(input:checked){border-color:var(--accent);color:var(--ink)}
.swatch-dot{width:14px;height:14px;border-radius:var(--r-pill);display:inline-block}
.settings .actions{margin-top:24px;display:flex;gap:12px}
.error{color:var(--sunset);font-size:14px}
.note{color:var(--mute);font-size:14px;margin-top:16px}
code{font:400 13px 'Geist Mono',monospace;background:var(--canvas-soft);
  padding:2px 6px;border-radius:var(--r-sm);color:var(--body)}

/* ---- nav: badge entorno DEV/PROD ---- */
.env-badge{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:4px 12px;font:400 11px 'Geist Mono',monospace;letter-spacing:1px;
  color:var(--mute);background:var(--canvas);user-select:none}
.env-badge.dev{border-color:rgba(255,255,255,.15);color:var(--body)}
.env-badge.prod{border-color:rgba(255,255,255,.25);color:var(--ink)}
.env-dot{width:6px;height:6px;border-radius:50%;background:var(--canvas-mid);flex-shrink:0}
.env-badge.dev .env-dot{background:#22c55e}
.env-badge.prod .env-dot{background:#22c55e}

/* ---- dashboard: wrapper módulo + píldoras DEV/PROD ---- */
.mod-wrap{display:flex;flex-direction:column;gap:6px}
.mode-pills{display:flex;gap:6px}
.mode-pill{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--canvas);color:var(--mute);
  border:1px solid var(--hairline);border-radius:var(--r-pill);
  padding:5px 10px;font:400 11px 'Geist Mono',monospace;letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:border-color .15s,color .15s}
.mode-pill:hover{color:var(--body);border-color:rgba(255,255,255,.15)}
.mode-pill.active{border-color:rgba(255,255,255,.25);color:var(--ink)}
.mpill-dot{width:6px;height:6px;border-radius:50%;background:var(--canvas-mid);flex-shrink:0;transition:background .15s}
.mode-pill.active .mpill-dot{background:#22c55e}
.mode-pill:disabled,.mode-pill.disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.card.disabled{opacity:.35;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}
.mod-wrap.inactive .mode-pills{opacity:.4}

/* ---- config: tab módulos ---- */
.mod-cfg-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.mod-cfg-card{background:var(--canvas-card);border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden}
.mod-cfg-title{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--hairline)}
.mod-cfg-icon{font-size:16px;width:24px;text-align:center;flex-shrink:0}
.mod-cfg-name{flex:1;font-size:15px;color:var(--ink)}
.mod-cfg-status-msg{font:400 12px 'Geist Mono',monospace;color:#22c55e;min-width:80px;text-align:right}
.mod-cfg-row{display:flex;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--hairline)}
.mod-cfg-row:last-child{border-bottom:none}
.mod-cfg-radio-label{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
.mod-cfg-radio-label input{accent-color:var(--accent);margin:0;cursor:pointer}
.mod-cfg-tag{font:400 11px 'Geist Mono',monospace;letter-spacing:1px;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  color:var(--mute);background:var(--canvas);transition:border-color .15s,color .15s;white-space:nowrap}
.mod-cfg-tag.active{border-color:rgba(255,255,255,.25);color:var(--ink)}
.mod-cfg-row .input{flex:1;font-size:13px;padding:8px 12px}
.mod-cfg-active-label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;flex-shrink:0;
  font:400 11px 'Geist Mono',monospace;letter-spacing:.8px;text-transform:uppercase;color:var(--mute)}
.mod-cfg-active-label input{accent-color:#22c55e;width:14px;height:14px;margin:0;cursor:pointer}
.mod-cfg-active-label:has(input:checked){color:var(--body)}