:root{
  --b:#080807; --b2:#0f0f0e; --b3:#181816; --b4:#222220;
  --gold:#C9A84C; --gold2:#E2C97E; --gold3:#8B6914;
  --w:#fff; --t1:rgba(255,255,255,.85); --t2:rgba(255,255,255,.42); --t3:rgba(255,255,255,.14);
  --g:rgba(201,168,76,.12);
  --sans:'Space Grotesk',system-ui,sans-serif;
  --cond:'Barlow Condensed',var(--sans);
  --mono:'Space Mono',ui-monospace,monospace;
  --ok:#5db07a; --warn:#d98b3a; --danger:#c9524a;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); background:var(--b); color:var(--t1);
  line-height:1.55; font-size:16px; -webkit-font-smoothing:antialiased;
  min-height:100dvh; display:flex; flex-direction:column;
}
a{color:var(--gold2); text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- layout ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1.1rem; border-bottom:1px solid var(--t3); background:var(--b2);
  position:sticky; top:0; z-index:20;
}
.brand{display:flex; flex-direction:column; line-height:1.15}
.brand:hover{text-decoration:none}
.brand-mark{font-family:var(--cond); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--w); font-size:1.15rem}
.brand-sub{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold)}
.wrap{width:100%; max-width:760px; margin:0 auto; padding:1.25rem 1.1rem 3rem; flex:1}
.sitefoot{
  border-top:1px solid var(--t3); background:var(--b2); color:var(--t2);
  font-size:.8rem; text-align:center; padding:1.1rem; display:grid; gap:.2rem;
}

/* ---------- hero / lookup ---------- */
.hero h1{font-family:var(--cond); font-size:1.9rem; text-transform:uppercase; letter-spacing:.03em; color:var(--w); line-height:1.1}
.lead{color:var(--t2); margin:.6rem 0 1.4rem; max-width:46ch}
.lookup{margin:0 0 1.2rem}
.lookup label{display:block; font-family:var(--cond); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:var(--gold); margin-bottom:.4rem}
.lookup-row{display:flex; gap:.55rem}
.lookup-row input{flex:1}
.hint{font-size:.8rem; color:var(--t2); margin-top:.5rem}
.mech-access{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem; padding-top:1rem; border-top:1px solid var(--t3)}
.mech-access span{font-size:.85rem; color:var(--t2)}

/* ---------- forms ---------- */
input,textarea,select,button{font:inherit; color:inherit}
input,textarea,select{
  width:100%; min-width:0; max-width:100%; background:var(--b3); border:1px solid var(--t3);
  border-radius:10px; padding:.7rem .8rem; min-height:48px; color:var(--w); outline:none;
}
input[type="date"]{-webkit-appearance:none; appearance:none}
textarea{min-height:80px; resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--gold); box-shadow:0 0 0 3px var(--g)}
label{display:block; font-size:.95rem}
.grid2 label,.card form label{margin-bottom:.7rem}
.grid2 label>*{margin-top:.3rem}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 .8rem}
.grid2 .col2{grid-column:1 / -1}
@media(max-width:520px){ .grid2{grid-template-columns:1fr} }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  background:var(--b4); color:var(--w); border:1px solid var(--t3); border-radius:10px;
  padding:.7rem 1.1rem; min-height:48px; font-family:var(--cond); font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; cursor:pointer; transition:.15s;
}
.btn:hover{border-color:var(--gold); text-decoration:none}
.btn-gold{background:var(--gold); color:#1a1400; border-color:var(--gold)}
.btn-gold:hover{background:var(--gold2)}
.btn-ghost{background:transparent}
.btn-danger{background:transparent; border-color:var(--danger); color:#e88}
.btn-danger:hover{background:var(--danger); color:var(--w)}
.btn-block{width:100%}
.btn-sm{min-height:38px; padding:.4rem .8rem; font-size:.82rem}

/* ---------- cards / notices ---------- */
.card{background:var(--b2); border:1px solid var(--t3); border-radius:14px; padding:1.15rem 1.15rem 1.25rem; margin-bottom:1.1rem}
.card-narrow{max-width:420px; margin-inline:auto}
.card h1{font-family:var(--cond); text-transform:uppercase; letter-spacing:.03em; color:var(--w); font-size:1.5rem}
.card h2{font-family:var(--cond); text-transform:uppercase; letter-spacing:.05em; color:var(--gold2); font-size:1.15rem; margin-bottom:.7rem}
.card form{margin-top:.6rem}
.muted{color:var(--t2)}
.mono{font-family:var(--mono); font-size:.9em}
.crumbs{margin-bottom:.8rem; font-size:.9rem}
.eyebrow,.tl-label{font-family:var(--cond); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:var(--gold)}

.notice{background:var(--b3); border:1px solid var(--t3); border-left:3px solid var(--gold); border-radius:8px; padding:.8rem .95rem; margin:0 0 1rem; font-size:.95rem}
.notice-ok{border-left-color:var(--ok)}
.notice-warn{border-left-color:var(--warn)}

/* ---------- booklet (public result) ---------- */
.print-only{display:none}
.booklet{background:var(--b2); border:1px solid var(--t3); border-radius:14px; padding:1.5rem; margin-top:1.4rem}
.booklet-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--t3); padding-bottom:1.1rem; margin-bottom:1.3rem}
.booklet-head h2{font-family:var(--cond); text-transform:uppercase; color:var(--w); font-size:1.6rem; line-height:1.1; margin-top:.15rem}
.specs{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.25rem; margin-bottom:1.75rem}
.specs dt{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--t2); margin-bottom:.15rem}
.specs dd{color:var(--w); font-size:1.05rem; font-weight:500}
.booklet-foot{margin-top:1.75rem; padding-top:1.1rem; border-top:1px solid var(--t3); font-size:.85rem; color:var(--t2); line-height:1.6}

.timeline{list-style:none; display:grid; gap:1.1rem}
.tl-item,.srow{background:var(--b3); border:1px solid var(--t3); border-radius:12px; padding:1.1rem 1.15rem}
.srow{margin-top:.7rem}
.srow p{margin:.25rem 0; font-size:.95rem}
.tl-top{display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding-bottom:.8rem; margin-bottom:.9rem; border-bottom:1px solid var(--t3)}
.tl-date{font-family:var(--cond); font-weight:700; font-size:1.2rem; color:var(--w); text-transform:uppercase; letter-spacing:.03em}
.tl-km{font-family:var(--mono); font-size:.8rem; color:var(--gold2); background:var(--g); padding:.18rem .6rem; border-radius:999px}
.tl-price{font-family:var(--mono); font-size:.9rem; color:var(--w); margin-left:auto}
.tl-block,.tl-next{margin-top:.9rem}
.tl-block:first-of-type{margin-top:0}
.tl-block .tl-label,.tl-next .tl-label{display:block; margin-bottom:.25rem}
.tl-block p,.tl-next p{font-size:1rem; line-height:1.55; color:var(--t1)}
.tl-next{background:var(--g); border:1px solid rgba(201,168,76,.25); border-radius:9px; padding:.7rem .8rem}
.tl-next p{color:var(--gold2)}

/* ---------- admin vehicle list ---------- */
.vlist{list-style:none; display:grid; gap:.55rem; margin-top:1rem}
.vlist a{display:grid; gap:.15rem; background:var(--b3); border:1px solid var(--t3); border-radius:10px; padding:.75rem .85rem}
.vlist a:hover{border-color:var(--gold); text-decoration:none}
.vlist-title{font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--w); font-size:1.05rem}
.vlist-meta{font-size:.8rem; color:var(--t2)}

.share{background:var(--b3); border:1px solid var(--t3); border-radius:10px; padding:.8rem; margin:.9rem 0}
.share-row{display:flex; gap:.5rem; margin:.35rem 0 .5rem}
.share-row input{font-family:var(--mono); font-size:.82rem}
details.edit,details summary{cursor:pointer}
details summary{padding:.5rem 0; color:var(--gold2); font-family:var(--cond); text-transform:uppercase; letter-spacing:.06em; font-size:.9rem}
details[open] summary{margin-bottom:.5rem}

.vhead-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin:.9rem 0 .2rem}

.pw-wrap{position:relative; margin-bottom:.9rem}
.pw-wrap input{padding-right:5.5rem}
.pw-toggle{position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
  background:var(--b4); border:1px solid var(--t3); color:var(--t1); border-radius:8px;
  padding:.35rem .6rem; font-size:.78rem; font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.06em; cursor:pointer; min-height:36px}

/* ---------- unos servisa (mobile-first) ---------- */
.sform{display:flex; flex-direction:column; gap:1.05rem; margin-top:.5rem}
.sform label{display:flex; flex-direction:column; gap:.4rem; font-size:.9rem; color:var(--gold2); font-weight:500}
.sform label input,.sform label textarea{
  color:var(--w); font-size:16px; font-weight:400; padding:.8rem .85rem; min-height:52px;
}
.sform label textarea{min-height:92px; line-height:1.5}
.frow2{display:grid; grid-template-columns:1fr; gap:1.05rem}
.frow2 > label{min-width:0}
@media(min-width:560px){ .frow2{grid-template-columns:1fr 1fr; gap:.85rem} }
.fblock{width:100%}
.fnext{border:1px solid var(--t3); border-radius:12px; background:var(--b3); padding:0 .9rem}
.fnext > summary{color:var(--gold2); font-family:var(--cond); text-transform:uppercase;
  letter-spacing:.06em; font-size:.85rem; padding:.85rem 0; margin:0}
.fnext[open]{padding-bottom:1rem}
.fnext[open] > summary{border-bottom:1px solid var(--t3); margin-bottom:.9rem}
.fnext .frow2{margin-bottom:.9rem}
.form-actions{display:flex; flex-direction:column; gap:.55rem; margin-top:.4rem}
.form-actions .btn{min-height:54px; font-size:1rem}

.srow-actions{display:flex; gap:.5rem; align-items:center; margin-top:.95rem}
.srow-actions form{margin:0}

/* ---------- print ---------- */
@media print{
  @page{ margin:14mm; }
  html,body{background:#fff !important; color:#111 !important}
  body{display:block; font-size:11.5pt; line-height:1.5;
       -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .topbar,.sitefoot,.no-print,.hero,.notice,.mech-access,.crumbs{display:none !important}
  .wrap{max-width:none; margin:0; padding:0}

  .print-only{display:block !important}
  .print-header{font-family:var(--cond); text-transform:uppercase; letter-spacing:.05em;
    font-size:13pt; color:#000 !important; border-bottom:2px solid #000;
    padding-bottom:6pt; margin-bottom:14pt}
  .print-header strong{font-weight:700}

  .booklet{background:#fff !important; border:none !important; padding:0 !important; margin:0 !important}
  .booklet *{color:#111 !important}
  .booklet-head{border-bottom:2px solid #111; padding-bottom:8pt; margin-bottom:14pt}
  .booklet-head h2{color:#000 !important; font-size:19pt}
  .booklet .eyebrow,.booklet .tl-label,.booklet .specs dt{color:#555 !important; font-weight:700}

  .specs{grid-template-columns:1fr 1fr; gap:8pt 20pt; margin-bottom:16pt}
  .specs dd{color:#000 !important; font-weight:600; font-size:11.5pt}

  .timeline{display:block}
  .tl-item{border:1px solid #999 !important; border-radius:0; background:#fff !important;
    padding:10pt 12pt !important; margin-bottom:10pt; break-inside:avoid}
  .tl-top{border-color:#bbb !important; padding-bottom:6pt; margin-bottom:8pt}
  .tl-date{color:#000 !important; font-size:12.5pt}
  .tl-km{background:#eee !important; color:#000 !important; border:1px solid #bbb}
  .tl-price{color:#000 !important; font-weight:700}
  .tl-block p,.tl-next p{font-size:11pt}
  .tl-next{background:#f4f4f4 !important; border:1px solid #ccc !important; padding:6pt 8pt !important}

  a{color:#111 !important; text-decoration:none}
  .booklet-foot{border-top:1px solid #999; color:#333 !important; margin-top:16pt; padding-top:8pt}
}