/* Detective · estilos */
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Layout: archivo nocturno — catálogo de casos y, dentro, mesa de trabajo de tres columnas (expediente · documento · libreta) */
:root{
  --night:#151a21;        /* fondo: tinta azul nocturna */
  --night-2:#1d242d;      /* superficies */
  --night-3:#283240;      /* bordes, hover */
  --fog:#c9cfd6;          /* texto principal */
  --fog-dim:#8c97a3;      /* texto secundario */
  --brass:#c9a35a;        /* acento: latón */
  --paper:#ece3cf;        /* papel de expediente */
  --paper-2:#e2d6bb;
  --ink:#2a2620;          /* tinta sobre papel */
  --ink-dim:#6b6253;
  --stamp:#a8322a;        /* sello rojo */
  --ok:#6fa678;
  --bad:#d0675c;
  --f-display:"Bodoni Moda", "Didot", Georgia, serif;
  --f-ui:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-type:"Courier Prime", "Courier New", monospace;
  --f-hand:"Caveat", "Segoe Print", cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--night);color:var(--fog)}
body{font:15px/1.55 var(--f-ui);padding-inline:16px;padding-block:0 48px}
.wrap{max-width:1320px;margin:0 auto}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible,input:focus-visible+label,a:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
h1,h2,h3{text-wrap:balance;margin:0}
.eyebrow{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}

/* ---------- Cabecera ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;border-bottom:1px solid var(--night-3);flex-wrap:wrap}
.brand{font:italic 500 26px/1 var(--f-display);letter-spacing:.01em;background:none;border:0;padding:0}
.brand b{font-style:normal;font-weight:700;color:var(--brass)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--night-3);background:var(--night-2);border-radius:6px;padding:8px 14px;font-weight:500;font-size:14px}
.btn:hover{border-color:var(--fog-dim)}
.btn.primary{background:var(--brass);color:#1a1408;border-color:var(--brass);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- Portada / catálogo ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;padding-block:40px 28px;align-items:end}
.hero h1{font:500 clamp(40px,7vw,84px)/.95 var(--f-display);letter-spacing:-.02em}
.hero h1 i{color:var(--brass)}
.hero p{color:var(--fog-dim);max-width:46ch;margin:14px 0 0;font-size:16px}
.how{display:grid;gap:10px;font-size:14px;color:var(--fog-dim);border-left:1px solid var(--night-3);padding-left:20px}
.how strong{color:var(--fog);font-weight:600}
.row-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:24px 0 14px}
.row-title h2{font:500 24px/1.1 var(--f-display)}
.row-title span{color:var(--fog-dim);font-size:13px}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.case-card{position:relative;text-align:left;border:1px solid var(--night-3);border-radius:8px;overflow:hidden;background:var(--night-2);padding:0;display:flex;flex-direction:column;transition:transform .2s,border-color .2s}
.case-card:hover:not([disabled]){transform:translateY(-3px);border-color:var(--brass)}
.case-card[disabled]{cursor:default}
.cover{aspect-ratio:3/4;max-width:100%;position:relative;padding:16px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.cover .num{font:700 13px/1 var(--f-type);letter-spacing:.1em;opacity:.85}
.cover h3{font:500 28px/1.02 var(--f-display);position:relative;z-index:1}
.cover .genre{font:600 10px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;position:relative;z-index:1}
.cover .art{position:absolute;inset:0;z-index:0}
.case-meta{display:flex;justify-content:space-between;gap:8px;padding:10px 14px;font-size:12px;color:var(--fog-dim);border-top:1px solid var(--night-3)}
.badge{display:inline-block;font:600 10px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;padding:5px 7px;border-radius:3px;background:var(--brass);color:#1a1408}
.badge.soon{background:var(--night-3);color:var(--fog)}
.c1{background:linear-gradient(170deg,#2b3a46 0%,#151a21 75%);color:var(--paper)}
.c2{background:linear-gradient(170deg,#4a2f2a 0%,#191414 80%);color:#f0d9c9}
.c3{background:linear-gradient(170deg,#2f3c33 0%,#141a16 80%);color:#d8e6d6}
.c4{background:linear-gradient(170deg,#4a4130 0%,#1a1711 80%);color:#efe2c2}
.c5{background:repeating-linear-gradient(135deg,var(--night-2) 0 10px,var(--night) 10px 20px);color:var(--fog)}
.c5 h3{font-size:24px}
.team{margin-top:28px;border:1px dashed var(--night-3);border-radius:8px;padding:18px 20px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.team h3{font:500 20px/1.2 var(--f-display)}
.team p{margin:4px 0 0;color:var(--fog-dim);font-size:14px;max-width:62ch}

/* ---------- Mesa de investigación ---------- */
.desk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-block:22px 16px}
.desk-head h1{font:500 clamp(26px,4vw,40px)/1.05 var(--f-display)}
.desk-head .sub{color:var(--fog-dim);font-size:14px;margin-top:6px}
.desk{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:20px;align-items:start}
.files{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:18px}
.files h4{margin:0 0 6px;font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim)}
.files ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.file-btn{width:100%;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:7px 10px;border-radius:0 4px 4px 0;font-size:14px;display:flex;justify-content:space-between;gap:8px;color:var(--fog-dim)}
.file-btn:hover{background:var(--night-2);color:var(--fog)}
.file-btn.active{border-left-color:var(--brass);background:var(--night-2);color:var(--fog)}
.file-btn .dot{color:var(--brass);font-size:12px}
.file-btn.unread::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);align-self:center;flex:none}
.file-btn.unread .dot{display:none}
.accuse-btn{width:100%}
.viewer{min-width:0}
.doc-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.doc-tools .kind{font-size:13px;color:var(--fog-dim)}
.star{background:none;border:1px solid var(--night-3);border-radius:20px;padding:5px 12px;font-size:13px;color:var(--fog-dim)}
.star[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}

/* Papel */
.paper{background:var(--paper);color:var(--ink);font:15px/1.6 var(--f-type);padding:clamp(20px,4vw,40px);border-radius:2px;box-shadow:0 1px 0 #0004,0 18px 40px -18px #000c;position:relative;overflow:hidden}
.paper::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,#fff5 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#a8905c22 0,transparent 60%)}
.paper > *{position:relative}
.paper h2{font:700 17px/1.3 var(--f-type);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.paper .letterhead{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--ink-dim);padding-bottom:10px;margin-bottom:18px;font-size:13px;color:var(--ink-dim)}
.paper p{margin:0 0 12px}
.paper ul{margin:0 0 12px;padding-left:20px}
.paper li{margin-bottom:6px}
.paper .time{font-weight:700;white-space:nowrap}
.paper .sig{margin-top:22px;text-align:right;font-size:13px;color:var(--ink-dim)}
.stamp{position:absolute;top:22px;right:22px;border:3px double var(--stamp);color:var(--stamp);font:700 13px/1 var(--f-type);letter-spacing:.14em;padding:6px 10px;transform:rotate(8deg);opacity:.75;text-transform:uppercase}
.qa p.q{color:var(--ink-dim);font-style:italic;margin-bottom:4px}
.table-wrap{overflow-x:auto}
.inv{width:100%;border-collapse:collapse;font-size:14px;min-width:460px}
.inv th,.inv td{text-align:left;padding:8px 6px;border-bottom:1px dashed var(--ink-dim);vertical-align:top}
.inv th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim)}
.inv .miss{color:var(--stamp);font-weight:700}
.hand{font:500 24px/1.35 var(--f-hand);background:repeating-linear-gradient(var(--paper) 0 31px,#9fb0c255 31px 32px);padding-top:28px}
.hand .day{font-weight:500;color:#2c4a7a}
.hand p{margin:0 0 12px}
.hand .margin{color:#7a2c2c;transform:rotate(-2deg);display:block;margin-top:14px}
.ticket{max-width:300px;margin:0 auto;font:14px/1.5 var(--f-type);background:#f4efe3;color:var(--ink);padding:22px 20px;box-shadow:0 18px 40px -18px #000c;clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px))}
.ticket .c{text-align:center}
.ticket hr{border:0;border-top:1px dashed var(--ink-dim);margin:10px 0}
.photo{background:#f3efe6;padding:14px 14px 18px;box-shadow:0 18px 40px -18px #000c;max-width:620px;margin:0 auto}
.photo svg{display:block;width:100%;height:auto;filter:sepia(.35) contrast(1.05)}
.photo figcaption{font:500 21px/1.3 var(--f-hand);color:var(--ink);margin-top:10px}
.plan svg{display:block;width:100%;height:auto}
.note-attached{margin-top:18px;background:#f7f1a8;color:var(--ink);font:500 21px/1.3 var(--f-hand);padding:14px 16px;transform:rotate(-1deg);max-width:360px;box-shadow:0 8px 20px -10px #000a}

/* Libreta */
.notebook{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);display:grid;gap:16px}
.panel{background:var(--night-2);border:1px solid var(--night-3);border-radius:8px;padding:14px}
.panel h4{margin:0 0 10px;font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim);display:flex;justify-content:space-between}
.panel textarea{width:100%;min-height:180px;resize:vertical;background:var(--night);border:1px solid var(--night-3);border-radius:6px;color:var(--fog);font:14px/1.5 var(--f-ui);padding:10px}
.key-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}
.key-list button{background:none;border:0;padding:0;text-align:left;color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.empty{color:var(--fog-dim);font-size:13px;margin:0}
.hint{font-size:14px;margin:0 0 8px;padding:8px 10px;border-left:2px solid var(--brass);background:var(--night)}
.saved{font-size:11px;color:var(--fog-dim);letter-spacing:0;text-transform:none;font-weight:400}

/* Acusación y resultado */
.accuse{background:var(--night-2);border:1px solid var(--night-3);border-radius:8px;padding:clamp(18px,3vw,30px)}
.accuse h2{font:500 30px/1.1 var(--f-display);margin-bottom:6px}
.accuse > p{color:var(--fog-dim);margin:0 0 20px}
fieldset{border:0;padding:0;margin:0 0 22px}
legend{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:10px}
.options{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt label{display:block;border:1px solid var(--night-3);border-radius:6px;padding:10px 12px;cursor:pointer;font-size:14px;height:100%}
.opt label small{display:block;color:var(--fog-dim);font-size:12px;margin-top:2px}
.opt input:checked+label{border-color:var(--brass);background:#c9a35a1a}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.confirm p{margin:0;color:var(--fog-dim);font-size:14px}
.result-score{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap;margin:6px 0 18px}
.result-score .big{font:500 64px/1 var(--f-display);color:var(--brass);font-variant-numeric:tabular-nums}
.checks{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:6px}
.checks li{display:flex;gap:10px;font-size:15px}
.checks .y{color:var(--ok);font-weight:700}
.checks .n{color:var(--bad);font-weight:700}
.solution{max-width:68ch}
.solution ol{padding-left:20px}
.solution li{margin-bottom:10px}
.solution h3{font:500 22px/1.2 var(--f-display);margin:22px 0 10px}

.photo.narrow{max-width:440px}
.tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rail{background:#d9e2d3;color:var(--ink);font:14px/1.5 var(--f-type);padding:16px 18px;border-radius:3px;box-shadow:0 18px 40px -18px #000c;display:grid;gap:2px}
.rail b{letter-spacing:.1em}
.rail span{font-size:12px;color:var(--ink-dim)}
.rail .route{font-weight:700;font-size:17px;margin-block:6px}
.rail .punch{margin-top:8px;color:var(--stamp);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.telegram{background:#efe6c4;color:var(--ink);font:700 15px/1.7 var(--f-type);letter-spacing:.04em;padding:clamp(20px,4vw,34px);max-width:560px;box-shadow:0 18px 40px -18px #000c;border-top:10px solid #b9a56a}
.telegram p{margin:0 0 10px}
.tg-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:400;font-size:12px;color:var(--ink-dim);border-bottom:1px solid var(--ink-dim);padding-bottom:8px;margin-bottom:14px}
.tg-head b{font-weight:700;color:var(--ink);letter-spacing:.14em}
.book .plate{max-width:200px;margin:8px auto 14px;border:1px solid var(--ink-dim);padding:6px;background:#f6f0e0}
.book .plate svg{display:block;width:100%;height:auto}
.book .caption{text-align:center;font-size:13px;color:var(--ink-dim);margin-bottom:6px}
.eq{display:block;font:500 1.3em/1.1 var(--f-hand);color:#1f4fa3;white-space:nowrap;transform:rotate(-1.5deg);transform-origin:left center;margin-top:2px}
.amt{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:top}
.amt .eq{margin-top:0}
@media (max-width:1080px){
  .desk{grid-template-columns:210px minmax(0,1fr)}
  .notebook{grid-column:1/-1;position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:28px 12px}
  .how{border-left:0;padding-left:0}
  .desk{grid-template-columns:minmax(0,1fr)}
  .files{position:static;overflow-x:auto;grid-auto-flow:column;grid-auto-columns:max-content;gap:16px;padding-bottom:6px}
  .files ul{grid-auto-flow:column;gap:4px}
  .file-btn{border-left:0;border-bottom:2px solid transparent;border-radius:4px 4px 0 0;white-space:nowrap}
  .file-btn.active{border-bottom-color:var(--brass)}
  .stamp{position:static;display:inline-block;margin-bottom:12px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Web pública: cuentas, avisos y pie ---------- */
.notice{margin-top:18px;padding:12px 16px;border:1px solid var(--night-3);border-left:3px solid var(--brass);border-radius:6px;background:var(--night-2);font-size:14px;color:var(--fog)}
.linklike{background:none;border:0;padding:0;color:var(--brass);text-decoration:underline;text-underline-offset:3px;font:inherit}
.form-card{max-width:480px;margin:48px auto;background:var(--night-2);border:1px solid var(--night-3);border-radius:10px;padding:clamp(20px,4vw,32px)}
.form-card.wide{max-width:640px}
.form-card h2{font:500 30px/1.1 var(--f-display);margin:6px 0 8px}
.form-card > p{color:var(--fog-dim);margin:0 0 18px}
.stack{display:grid;gap:10px}
.stack label{font:600 11px/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim)}
.stack input{background:var(--night);border:1px solid var(--night-3);border-radius:6px;color:var(--fog);font:16px/1.4 var(--f-ui);padding:11px 12px;width:100%}
.stack input:focus-visible{outline:2px solid var(--brass);outline-offset:1px}
.out{min-height:1.4em;margin:4px 0 0;font-size:14px;color:var(--fog)}
.small{font-size:13px;color:var(--fog-dim)}
.small a,.foot a{color:var(--brass)}
.stats{display:flex;gap:32px;flex-wrap:wrap;margin:18px 0}
.stats div{display:grid}
.stats .big{font:500 44px/1 var(--f-display);color:var(--brass);font-variant-numeric:tabular-nums}
.stats span:last-child{font-size:13px;color:var(--fog-dim)}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.loading{padding-block:60px;text-align:center;color:var(--fog-dim)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:48px;padding-top:16px;border-top:1px solid var(--night-3);font-size:12px;color:var(--fog-dim)}