/* ============================================================
   Quant Radar — "Modern Mediterranean / Alpujarra" design system
   Cal · Mar · Tierra · Olivo · Sol · Sierra · Luz
   Same class names as before; only the visual language changes.
   ============================================================ */

:root {
  /* Surfaces (cal cálida, airy — no pure white, never dark) */
  --bg: #F5F0E4;            /* app background — cal bajo el sol */
  --surface: #FCF9F1;       /* cards, elevated (warm, luminous) */
  --surface-2: #EEE7D8;     /* secondary panels / sidebar */
  --bg-elev: var(--surface);
  --bg-elev-2: #F0E9DB;     /* code / tag chips */

  /* Borders */
  --border: #D8D0C3;
  --border-soft: rgba(114, 88, 70, 0.12);

  /* Text (warm darks, never pure black) */
  --text: #3D3833;
  --text-dim: #6E655A;
  --text-mute: #978D7E;

  /* Brand palette */
  --primary: #287FA3;       /* azul mediterráneo — mar/cielo */
  --accent: #287FA3;
  --accent-soft: rgba(40, 127, 163, 0.12);
  --accent-dim: rgba(40, 127, 163, 0.12);
  --turquoise: #5FA9A8;
  --olive: #747A45;         /* success */
  --terracotta: #B86542;    /* attention */
  --ochre: #C89B58;         /* warning */
  --earth: #725846;
  --bougain: #B73C68;       /* critical accent */

  /* Semantic aliases (kept for existing templates) */
  --ok: #5f6a34;            /* olive, slightly darker for text contrast */
  --warn: #a9782f;          /* ochre, text-safe */
  --danger: #B73C68;

  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(114, 88, 70, 0.05), 0 8px 20px rgba(114, 88, 70, 0.05);
}

/* Dark ("noche mediterránea") is opt-in only — never auto by system, so the
   warm light theme is what everyone sees by default. */
:root[data-theme="dark"] {
    --bg: #252725;          /* noche mediterránea */
    --surface: #30322F;
    --surface-2: #2b2d2a;
    --bg-elev: #30322F;
    --bg-elev-2: #383A36;
    --border: #43463F;
    --border-soft: rgba(239, 234, 223, 0.09);
    --text: #EFEADF;
    --text-dim: #C3BCAE;
    --text-mute: #8B8578;
    --primary: #5FA9C2;
    --accent: #5FA9C2;
    --accent-soft: rgba(95, 169, 194, 0.16);
    --accent-dim: rgba(95, 169, 194, 0.16);
    --turquoise: #6FB6B4;
    --olive: #8A9360;
    --terracotta: #C97959;
    --ochre: #D3AC6E;
    --earth: #9a8069;
    --bougain: #C86C8E;
    --ok: #8A9360;
    --warn: #D3AC6E;
    --danger: #C86C8E;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--bg);
  /* Barely-there esparto weave (<3% opacity) for material warmth. */
  background-image:
    repeating-linear-gradient(135deg, rgba(114, 88, 70, 0.022) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(45deg, rgba(200, 155, 88, 0.016) 0 1px, transparent 1px 11px);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
code {
  font-family: var(--mono);
  background: var(--bg-elev-2);
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--earth);
}
.mono { font-family: var(--mono); }
.muted { color: var(--text-dim); }
.small { font-size: 12px; }
.ok { color: var(--ok); }

/* ---- Layout ---- */
.layout { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--border-soft);
}
.brand-mark {
  font-size: 20px; color: #fff; background: var(--primary);
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.12);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: .2px; color: var(--text); }
.brand-ver { font-size: 11px; color: var(--text-mute); font-family: var(--mono); }

.nav { display: flex; flex-direction: column; padding: 12px 12px; gap: 2px; overflow-y: auto; flex: 1; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; border-radius: var(--radius-sm); color: var(--text-dim);
  font-size: 13px; font-weight: 500; transition: background .16s, color .16s;
}
.nav-item:hover { background: rgba(114, 88, 70, 0.06); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
.nav-item.muted { color: var(--text-mute); font-weight: 500; }
.nav-phase {
  font-size: 10px; font-family: var(--mono); color: var(--earth);
  background: rgba(114, 88, 70, 0.08); padding: 1px 6px; border-radius: 999px;
}

.sidebar-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); }
.guard { font-size: 11px; font-family: var(--mono); }
.guard-ok { color: var(--olive); }
.guard-warn { color: var(--terracotta); }

/* ---- Content ---- */
.content { display: flex; flex-direction: column; min-width: 0; }
/* Discreet boho ribbon: sol → tierra → mar (warm-led, eclectic) */
.content::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--ochre), var(--terracotta) 34%, var(--turquoise) 78%, transparent);
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; border-bottom: 1px solid var(--border-soft);
}
.page-title { font-size: 22px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.topbar-meta { font-size: 12px; color: var(--text-dim); }
.page { padding: 28px 32px; max-width: 1520px; width: 100%; }

.banner {
  background: var(--surface);
  border: 1px solid var(--border-soft); border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 22px;
  font-size: 13px; color: var(--text-dim);
}
.banner strong { color: var(--text); }

/* ---- Grid / KPI tiles ---- */
.grid { display: grid; gap: 18px; margin-bottom: 22px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.tile {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-top: 2px solid rgba(200, 155, 88, 0.55); /* sol/esparto */
  border-radius: var(--radius); padding: 18px 18px 16px; box-shadow: var(--shadow);
}
.tile-label { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-mute); margin-bottom: 10px; }
.tile-value { font-size: 24px; font-weight: 700; font-family: var(--mono); color: var(--text); letter-spacing: -.02em; }

/* ---- Panels / tables ---- */
.panel {
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius); margin-bottom: 22px; overflow: hidden; box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.panel-head h2 { font-size: 15px; margin: 0; font-weight: 600; }

.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 11px 16px; color: var(--earth); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  background: var(--surface-2); border-bottom: 1px solid var(--border-soft);
}
.data-table td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover { background: rgba(40, 127, 163, 0.05); }
.data-table tbody tr:last-child td { border-bottom: none; }
.empty-row td { color: var(--text-dim); }
.empty-row td:hover, .empty-row:hover { background: transparent; }

.kv { list-style: none; margin: 0; padding: 10px 0; }
.kv li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 20px; font-size: 13px; }
.kv li span { color: var(--text-dim); }
.kv li b { font-weight: 600; font-family: var(--mono); color: var(--text); }

.tag {
  display: inline-block; font-size: 10px; font-family: var(--mono); letter-spacing: .5px;
  padding: 2px 8px; border-radius: 6px; background: var(--bg-elev-2);
  border: 1px solid var(--border-soft); color: var(--text-dim); vertical-align: middle;
}
.tag.ok { color: var(--olive); background: rgba(116, 122, 69, 0.12); border-color: rgba(116, 122, 69, 0.25); }

/* ---- Buttons ---- */
.btn {
  display: inline-block; margin-top: 16px; padding: 9px 18px; border-radius: var(--radius-sm);
  color: #fff; background: var(--primary); border: 1px solid var(--primary);
  font-weight: 600; font-size: 13px; transition: background .16s, transform .1s;
}
.btn:hover { background: #226b8a; text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: 84px 20px; }
.empty-badge {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--terracotta); background: rgba(184, 101, 66, 0.10);
  border: 1px solid rgba(184, 101, 66, 0.25); border-radius: 999px; padding: 4px 14px; margin-bottom: 16px;
}
.empty-state h2 { margin: 8px 0; font-weight: 600; }

/* ---- Documentation ---- */
.doc-layout { display: grid; grid-template-columns: 210px 1fr; gap: 36px; }
.doc-toc { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.doc-toc a { padding: 6px 11px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-dim); }
.doc-toc a:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.doc-body { max-width: 780px; }
.doc-body section { margin-bottom: 40px; scroll-margin-top: 20px; }
.doc-body h2 { font-size: 17px; border-bottom: 1px solid var(--border-soft); padding-bottom: 9px; color: var(--text); }
.doc-body p, .doc-body li { color: var(--text-dim); }
.doc-body b, .doc-body strong { color: var(--text); }
.ascii {
  background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  padding: 16px; font-family: var(--mono); font-size: 12px; color: var(--earth); overflow-x: auto;
}
.glossary dt { font-weight: 600; color: var(--text); font-family: var(--mono); margin-top: 10px; }
.glossary dd { margin: 2px 0 0; color: var(--text-dim); }
.roadmap { padding-left: 20px; } .roadmap li { margin: 6px 0; } .roadmap li.done b { color: var(--olive); }

/* ---- Alpujarra divider (subtle terrace geometry) ---- */
.divider {
  display: flex; align-items: center; gap: 10px; color: var(--border);
  margin: 28px 0; font-size: 8px;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.divider span { color: var(--terracotta); }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .grid-4, .grid-2 { grid-template-columns: 1fr 1fr; }
  .doc-layout { grid-template-columns: 1fr; }
  .doc-toc { position: static; flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .page, .topbar { padding-left: 18px; padding-right: 18px; }
}