/* Tema «Expediente noir» — Detective CodeX, Caso 01.
   Colores y tipografías tomados de los PDF del caso:
   azul marino #1b2a4a, dorado #c9a84c, rojo sello #8b1a1a, papel crema,
   Playfair Display (títulos), Special Elite (máquina de escribir), Caveat (notas a mano). */
:root {
  --desk: #0f1829;
  --desk-2: #1b2a4a;
  --lamp: rgba(233, 196, 106, .16);
  --paper: #ece6d6;
  --paper-2: #f4efe2;
  --paper-edge: #d8cfb8;
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --muted: #6b6b6b;
  --navy: #1b2a4a;
  --gold: #c9a84c;
  --gold-soft: #e4d3a0;
  --red: #8b1a1a;
  --on-desk: #e9e2cf;
  --on-desk-muted: #9aa3b5;

  --font-title: "Playfair Display", Georgia, serif;
  --font-body: "Special Elite", "Courier New", monospace;
  --font-hand: "Caveat", "Segoe Print", cursive;

  --radius: 3px;
  --shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 30px -12px rgba(0,0,0,.65), 0 2px 6px rgba(0,0,0,.35);
}

body.desk {
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, var(--lamp), transparent 70%),
    radial-gradient(ellipse at 50% 120%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(180deg, var(--desk-2) 0%, var(--desk) 55%);
  background-attachment: fixed;
  color: var(--on-desk);
}

.paper {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.35), transparent 60%),
    var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.paper--framed { position: relative; }
.paper--framed::before {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid var(--gold); outline: 1px solid rgba(201,168,76,.35); outline-offset: 3px;
}

.seal {
  background: var(--navy); color: var(--gold);
  border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--navy), 0 0 0 4px var(--gold);
  font-family: var(--font-title);
}

.kicker { color: var(--navy); letter-spacing: .18em; }
.kicker--red, .stamp-msg { color: var(--red); }
.handnote { font-family: var(--font-hand); color: var(--gold-soft); }
.paper .handnote { color: var(--navy); }

.stamp {
  color: var(--red); border: 2px solid var(--red);
  font-family: var(--font-body); transform: rotate(-6deg);
  opacity: .85;
}

.btn--primary { background: var(--navy); color: var(--paper); border-color: var(--gold); }
.btn--primary:hover { background: #24375f; }
.btn--ghost { color: inherit; border-color: currentColor; }
.btn--danger { background: var(--red); color: #fff; border-color: #5e1010; }

.chip { background: rgba(236,230,214,.1); border: 1px solid rgba(201,168,76,.55); color: var(--on-desk); }
.chip:hover, .chip--on { background: var(--gold); color: var(--navy); }

.folder__tab { background: var(--paper-edge); color: var(--navy); }
.folder[open] > .folder__tab, .folder--locked .folder__tab { background: var(--paper); }
.folder__num { color: var(--gold); background: var(--navy); }
.folder__body { background: var(--paper); color: var(--ink); }
.folder--sealed .folder__tab { background: #b9ae93; color: #5b5444; }

.doccard { background: var(--paper-2); border: 1px solid var(--paper-edge); color: var(--ink); }
.doccard:hover { border-color: var(--gold); }
.doccard--first { border: 1px solid var(--red); box-shadow: inset 4px 0 0 var(--red); }
.doccard__ref { color: var(--red); }
.doccard__hint { color: var(--red); font-family: var(--font-hand); }
.tag--gold { color: var(--gold); }
.is-read .tag--read { color: #2f6b3a; }

.group-title { color: var(--navy); border-bottom: 1px solid var(--gold); font-family: var(--font-title); }

.topbar { background: rgba(10,16,30,.82); border-bottom: 1px solid rgba(201,168,76,.35); }
.topbar__kicker { color: var(--gold); }
.topbar__act { color: var(--gold); font-family: var(--font-title); }
.essentials { background: rgba(15,24,41,.92); border-bottom: 1px solid rgba(201,168,76,.25); }
.essentials__label { color: var(--gold); }

.casehead__title { font-family: var(--font-title); color: var(--on-desk); }
.casehead .kicker { color: var(--gold); }
.casehead__sub { color: var(--on-desk-muted); }

.page img { box-shadow: var(--shadow); }
.page figcaption { color: var(--on-desk-muted); }
.viewer__title { font-family: var(--font-title); }

.code-input { border-bottom: 2px solid var(--navy); color: var(--navy); }
.flash { background: var(--gold); color: var(--navy); }
.table th { color: var(--navy); border-bottom: 2px solid var(--gold); }
.table td { border-bottom: 1px solid var(--paper-edge); }
.folder__body .handnote { color: var(--navy); }