:root{
  --concrete:#F2F5F8; --concrete-d:#E3E8EE; --concrete-l:#F2F5F8;
  --ink:#16212B; --ink-2:#0C447C; --ink-soft:#4E5A66; --ink-mute:#8593A2;
  --white:#FFFFFF; --plate:#0B3FA8;

  --blue:#1B6FC2; --blue-pressed:#15599D; --blue-light:#2E8EEA;
  --accent-text:#185FA5; --accent-tint:#E8F1FA; --hivis:#E3FB4F;

  --st-sub:#4E5A66; --st-sub-bg:#F2F5F8;
  --st-rev:#185FA5; --st-rev-bg:#E8F1FA;
  --st-inf:#8A5A16; --st-inf-bg:#FAF0DA;
  --st-app:#3B6D11; --st-app-bg:#E7F3E1;
  --st-rej:#A32D2D; --st-rej-bg:#FAE8E8;

  --f-display:"Archivo",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--concrete);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}
.mono{font-family:var(--f-mono)}
.hide{display:none}

/* ── app shell ──────────────────────────────────────── */
.shell{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.rail{background:var(--ink);color:#A9BED4;padding:1.15rem 0;display:flex;flex-direction:column}
.rail-brand{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--f-display);font-weight:800;font-size:1.02rem;
  letter-spacing:-.02em;color:var(--white);padding:0 1.15rem 1.1rem;
}
.rail-mark{height:26px;width:auto;display:block}
.rail-dot{width:10px;height:10px;background:var(--blue);border-radius:2px;transform:rotate(45deg)}
.rail-org{
  margin:0 1.15rem 1.3rem;padding:.6rem .7rem;
  border:1px solid rgba(255,255,255,.16);border-radius:3px;font-size:.76rem;line-height:1.35;
}
.rail-org b{display:block;color:var(--white);font-weight:600}
.rail-org small{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.rail-h{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-mute);padding:0 1.15rem;margin:0 0 .5rem}
.rail a{display:flex;align-items:center;gap:.6rem;padding:.5rem 1.15rem;text-decoration:none;font-size:.88rem;border-left:3px solid transparent}
.rail a:hover{background:rgba(255,255,255,.05);color:var(--white)}
.rail a.on{background:rgba(255,255,255,.08);color:var(--white);border-left-color:var(--blue-light);font-weight:500}
.rail a .ct{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;color:var(--ink-mute)}
.rail a.on .ct{color:var(--blue-light)}
.rail-foot{margin-top:auto;padding:1rem 1.15rem 0;border-top:1px solid rgba(255,255,255,.12);font-size:.78rem}
.rail-foot b{display:block;color:var(--white);font-weight:500}
.rail-foot .logout{margin-top:.6rem;color:#A9BED4;text-decoration:underline;cursor:pointer;font-size:.8rem;background:none;border:0;padding:0;display:block}
.rail-foot .logout:hover{color:var(--white)}
.rail-lang{display:flex;gap:.25rem;padding:0 1.15rem;margin:0 0 1.25rem}
.rail-lang button{font-family:var(--f-mono);font-size:.68rem;background:transparent;border:1px solid rgba(255,255,255,.2);color:#A9BED4;padding:.2rem .48rem;border-radius:3px;cursor:pointer}
.rail-lang button.on{background:var(--blue);border-color:var(--blue);color:var(--white);font-weight:600}
@media(max-width:900px){.rail-lang{order:99;padding:0;margin:0 0 0 auto}}
.back-home{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink-soft);text-decoration:none;font-size:.85rem;font-weight:500;margin-bottom:1rem}
.back-home:hover{color:var(--blue)}
.lang-switch{display:flex;gap:.25rem;margin-bottom:1.2rem}
.lang-switch button{font-family:var(--f-mono);font-size:.72rem;background:var(--white);border:1px solid var(--concrete-d);color:var(--ink-soft);padding:.3rem .55rem;border-radius:3px;cursor:pointer}
.lang-switch button.on{background:var(--blue);color:var(--white);border-color:var(--blue);font-weight:600}

.main{min-width:0;display:flex;flex-direction:column}
.top{background:var(--white);border-bottom:1px solid var(--concrete-d);padding:.85rem 1.6rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.top h1{font-family:var(--f-display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;margin:0}
.top .sub{font-size:.82rem;color:var(--ink-soft)}
.top .sub a{color:var(--st-rev)}
.top .spacer{margin-left:auto}
.top-account{display:none;align-items:center;gap:.55rem;margin-left:auto}
.top-name{font-size:.82rem;color:var(--ink-soft);font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.top-account{display:flex}}
.body{padding:1.4rem 1.6rem 3rem;flex:1}
@media(max-width:900px){
  .shell{grid-template-columns:1fr}
  .rail{flex-direction:row;overflow-x:auto;align-items:center;padding:.6rem .8rem;gap:.3rem}
  .rail-brand,.rail-org,.rail-h{display:none}
  .rail-foot{display:none}
  .rail a{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:.4rem .7rem}
  .rail a.on{border-left:0;border-bottom-color:var(--blue-light)}
  .body{padding:1.1rem}
  .top{padding:.8rem 1.1rem}
}

/* ── cards / bits ───────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--concrete-d);border-radius:4px}
.card + .card{margin-top:1.2rem}
.card-h{padding:.75rem 1rem;border-bottom:1px solid var(--concrete-d);display:flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.card-h .r{margin-left:auto;text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:.8rem}
.card-h .r a{color:var(--st-rev);cursor:pointer}
.card-b{padding:1rem}

.pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:.24rem .5rem;border-radius:2px;white-space:nowrap}
.p-sub{background:var(--st-sub-bg);color:var(--st-sub)}
.p-rev{background:var(--st-rev-bg);color:var(--st-rev)}
.p-inf{background:var(--st-inf-bg);color:var(--st-inf)}
.p-app{background:var(--st-app-bg);color:var(--st-app)}
.p-rej{background:var(--st-rej-bg);color:var(--st-rej)}
.p-out{background:transparent;color:var(--ink-soft);border:1px solid var(--concrete-d)}

.plate{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--white);font-family:var(--f-mono);font-weight:600;line-height:1;letter-spacing:.05em;font-size:.78rem;vertical-align:middle}
.plate-eu{background:var(--plate);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.26rem .3rem;font-size:.46rem;gap:.1rem}
.plate-eu i{font-style:normal;font-size:.4rem}
.plate-no{padding:.36rem .45rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;font-weight:600;font-size:.85rem;padding:.55rem 1rem;border-radius:3px;border:1.5px solid transparent;text-decoration:none;transition:background .15s}
.btn-primary{background:var(--blue);border-color:var(--blue);color:var(--white)}
.btn-primary:hover{background:var(--blue-pressed)}
.btn-ghost{background:var(--white);border-color:var(--concrete-d);color:var(--ink)}
.btn-ghost:hover{background:var(--concrete-l)}
.btn-dark{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn-dark:hover{background:var(--ink-2)}
.btn-danger{background:var(--white);color:var(--st-rej);border-color:#F0CFCD}
.btn-danger:hover{background:var(--st-rej-bg)}
.btn-block{width:100%}
.btn-sm{padding:.4rem .7rem;font-size:.8rem}
.btn:disabled{opacity:.6;cursor:default}

.dl{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;font-size:.87rem;margin:0}
.dl dt{color:var(--ink-soft);font-size:.8rem}
.dl dd{margin:0;font-weight:500}

/* ── list rows ──────────────────────────────────────── */
.veh{display:flex;align-items:center;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--concrete-l)}
.veh:last-child{border-bottom:0}
.veh.click{cursor:pointer}
.veh.click:hover{background:#FAFBF9}
.veh-n{font-weight:600;font-size:.9rem}
.veh-m{font-size:.8rem;color:var(--ink-soft)}
.veh .right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.warn-chip{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;background:var(--st-inf-bg);color:var(--st-inf);padding:.2rem .42rem;border-radius:2px}

.cards3{display:grid;grid-template-columns:2fr 1fr;gap:1.2rem;align-items:start}
.cards3 .card + .card{margin-top:0}
@media(max-width:860px){.cards3{grid-template-columns:1fr}}

.empty{text-align:center;color:var(--ink-soft);padding:26px 10px;font-size:.9rem}

/* ── alert (action needed) ──────────────────────────── */
.alert{background:var(--st-inf-bg);border:1px solid #E8D3A6;border-left:4px solid var(--st-inf);border-radius:4px;padding:1rem 1.2rem;margin-bottom:1.2rem;display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}
.alert h2{font-family:var(--f-display);font-weight:700;font-size:1.02rem;margin:0 0 .3rem}
.alert p{margin:0;font-size:.88rem;color:var(--ink-soft);max-width:62ch}
.alert .btn{margin-left:auto;flex:none}

/* ── progress timeline ──────────────────────────────── */
.claim-head{background:var(--white);border:1px solid var(--concrete-d);border-radius:4px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.prog{display:flex;gap:0;margin:0;list-style:none;padding:0;flex-wrap:wrap}
.prog li{flex:1;min-width:110px;padding-top:1.4rem;position:relative;font-size:.8rem;color:var(--ink-mute)}
.prog li::before{content:"";position:absolute;top:5px;left:0;right:0;height:3px;background:var(--concrete-d)}
.prog li::after{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:50%;background:var(--concrete-d);border:3px solid var(--white);box-shadow:0 0 0 1px var(--concrete-d)}
.prog li.done{color:var(--ink)}
.prog li.done::before{background:var(--st-app)}
.prog li.done::after{background:var(--st-app);box-shadow:0 0 0 1px var(--st-app)}
.prog li.now{color:var(--st-inf);font-weight:600}
.prog li.now::before{background:linear-gradient(90deg,var(--st-app) 0 50%,var(--concrete-d) 50% 100%)}
.prog li.now::after{background:var(--st-inf);box-shadow:0 0 0 1px var(--st-inf)}
.prog li.rej.now::after{background:var(--st-rej);box-shadow:0 0 0 1px var(--st-rej)}
.prog li b{display:block;font-family:var(--f-mono);font-size:.65rem;font-weight:500;letter-spacing:.06em;color:inherit;opacity:.75;margin-top:.15rem}

/* ── detail split ───────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 320px;gap:1.2rem;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:1.2rem}
.stack .card + .card{margin-top:0}

.quote{margin:0;font-size:.88rem;line-height:1.6;padding:.75rem .85rem;background:var(--concrete-l);border-radius:3px;border:1px solid var(--concrete-d)}
.fine{margin:.55rem 0 0;font-size:.76rem;color:var(--ink-soft)}

/* triage */
.triage{border-left:4px solid var(--st-rej)}
.triage.calm{border-left-color:var(--st-app)}
.triage-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
@media(max-width:620px){.triage-grid{grid-template-columns:1fr}}
.tri{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--concrete-d);border-radius:3px;font-size:.85rem}
.tri.yes{background:var(--st-rej-bg);border-color:#F0CFCD;color:var(--st-rej);font-weight:600}
.tri.no{color:var(--ink-mute)}
.tri .mark{width:18px;height:18px;border-radius:3px;flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:.7rem;font-weight:600;background:var(--concrete-l);color:var(--ink-mute)}
.tri.yes .mark{background:var(--st-rej);color:var(--white)}

/* evidence */
.ev{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media(max-width:760px){.ev{grid-template-columns:repeat(2,1fr)}}
.ev-cat{border:1px solid var(--concrete-d);border-radius:3px;overflow:hidden;background:var(--concrete-l)}
.ev-cat-h{padding:.45rem .6rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);display:flex;gap:.4rem;align-items:center;border-bottom:1px solid var(--concrete-d);background:var(--white)}
.ev-cat-h b{margin-left:auto;color:var(--ink)}
.ev-thumbs{display:flex;gap:3px;padding:.45rem}
.ev-th{flex:1;aspect-ratio:4/3;border-radius:2px;background:linear-gradient(135deg,#2E4A66,#16304A);position:relative;overflow:hidden;cursor:pointer}
.ev-th:hover{outline:2px solid var(--blue);outline-offset:1px}
.ev-th img,.ev-th video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ev-th::after{content:"";position:absolute;inset:auto 4px 4px auto;width:5px;height:5px;border-radius:50%;background:var(--st-inf);opacity:.85}
.ev-th-more{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(15,34,54,.6);color:#fff;font-family:var(--f-mono);font-weight:600;font-size:.9rem}
.ev-cat.missing{border-style:dashed;border-color:#E8D3A6;background:var(--st-inf-bg)}
.ev-cat.missing .ev-cat-h{background:var(--st-inf-bg);color:var(--st-inf);border-bottom-color:#E8D3A6}
.ev-empty{padding:.9rem .6rem;text-align:center;font-size:.78rem;color:var(--st-inf)}

/* parties */
.party{border:1px solid var(--concrete-d);border-radius:3px;padding:.85rem;background:var(--concrete-l)}
.party + .party{margin-top:.7rem}
.party-h{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.party-h b{font-weight:600}
.party-src{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--st-app);background:var(--st-app-bg);padding:.15rem .38rem;border-radius:2px}

/* timeline */
.tl{list-style:none;margin:0;padding:0;font-size:.84rem}
.tl li{display:flex;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--concrete-l)}
.tl li:last-child{border-bottom:0}
.tl .t{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-soft);white-space:nowrap;padding-top:.1rem;min-width:92px}
.tl .w b{font-weight:600}
.tl .w em{font-style:normal;color:var(--ink-soft)}

/* ── auth screens ───────────────────────────────────── */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:400px}
.brand-b{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin-bottom:.4rem}
.brand-b .rail-mark{height:28px}
.brand-b .rail-dot{width:14px;height:14px}
.auth-lead{color:var(--ink-soft);margin:0 0 1.6rem;font-size:.95rem}
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.input{width:100%;padding:.7rem .8rem;font-size:16px;border:1px solid var(--concrete-d);border-radius:3px;background:var(--white);color:var(--ink);font-family:var(--f-body)}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,111,194,.15)}
.phone-row{display:flex}
.cc-fixed{display:flex;align-items:center;padding:0 .75rem;font-size:16px;font-family:var(--f-mono);color:var(--ink-soft);background:var(--concrete-l);border:1px solid var(--concrete-d);border-right:0;border-radius:3px 0 0 3px}
.phone-row .input{border-radius:0 3px 3px 0}
.err{color:var(--st-rej);font-size:.84rem;margin:.2rem 0 .9rem}
.info{color:var(--ink-soft);font-size:.84rem;margin:.2rem 0 .9rem}
.link{color:var(--st-rev);cursor:pointer;font-weight:600}
.center{text-align:center}
.spinner{width:32px;height:32px;border:3px solid var(--concrete-d);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── modal ──────────────────────────────────────────── */
.modal-scrim{position:fixed;inset:0;background:rgba(15,34,54,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal{background:var(--white);border:1px solid var(--concrete-d);border-radius:4px;width:100%;max-width:440px;padding:1.3rem 1.3rem 1.4rem}
.modal h3{font-family:var(--f-display);font-weight:700;margin:0 0 .5rem}
.modal p{margin:0 0 .4rem;color:var(--ink-soft);font-size:.88rem}
.btn-row{display:flex;gap:.6rem;margin-top:1rem}
.btn-row .btn{flex:1}

/* ── lightbox (evidence photo/video viewer) ────────────── */
.lightbox-scrim{position:fixed;inset:0;background:rgba(10,20,30,.92);display:flex;align-items:center;justify-content:center;z-index:80;padding:2.5rem 1rem}
.lightbox{position:relative;max-width:min(92vw,1100px);max-height:92vh;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.lightbox-body{display:flex;align-items:center;justify-content:center;min-width:120px;min-height:120px}
.lightbox-body img,.lightbox-body video{max-width:92vw;max-height:78vh;object-fit:contain;border-radius:3px;background:#000}
.lightbox-body .spinner{margin:40px auto;border-color:rgba(255,255,255,.25);border-top-color:#fff}
.lightbox-body .err{color:#fff;padding:2rem}
.lightbox-close{position:absolute;top:-2.6rem;right:0;background:transparent;border:none;color:#fff;font-size:2rem;line-height:1;cursor:pointer;padding:.2rem .5rem}
.lightbox-close:hover{opacity:.75}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:none;color:#fff;font-size:2rem;line-height:1;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lightbox-nav:hover{background:rgba(255,255,255,.24)}
.lightbox-nav.prev{left:-3.4rem}
.lightbox-nav.next{right:-3.4rem}
@media(max-width:900px){.lightbox-nav.prev{left:.2rem}.lightbox-nav.next{right:.2rem}}
.lightbox-caption{color:#fff;font-size:.8rem;opacity:.85;text-align:center}
