/* portal.css — Portal público Envíos Hispanos Peñafiel (estética verde/oro). */
:root{
  --bg:#0B0D0C;
  --bg-alt:#12160F;
  --bg-2:#171c14;
  --green:#0F3D2E;
  --green-2:#14503c;
  --gold:#D4AF37;
  --gold-bright:#F0C75E;
  --red:#B01E28;
  --text:#F5F1E8;
  --muted:#B8B3A4;
  --line:rgba(212,175,55,.20);
  --line-soft:rgba(212,175,55,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:radial-gradient(900px 460px at 50% -40px,rgba(212,175,55,.13),transparent 60%),var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
.hide{display:none!important}

/* ---- Header ---- */
.ph{border-bottom:1px solid var(--line-soft);background:rgba(11,13,12,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.ph-inner{max-width:760px;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
.brand em{font-style:normal;color:var(--gold)}
.brand small{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ph-back{font-size:13.5px;color:var(--muted);border:1px solid var(--line-soft);border-radius:8px;padding:7px 13px}
.ph-back:hover{color:var(--gold-bright);border-color:var(--gold)}

/* ---- Contenedor ---- */
.wrap{max-width:760px;margin:0 auto;padding:36px 20px 70px}
.card{background:var(--bg-alt);border:1px solid var(--line);border-radius:18px;padding:34px 30px}
@media(max-width:520px){.card{padding:26px 20px}}
.card h1{font-size:24px;font-weight:800;color:var(--gold-bright);line-height:1.25;margin-bottom:8px}
.card .lede{color:var(--muted);font-size:14.5px;margin-bottom:24px}
.lede .mono{font-family:ui-monospace,Menlo,monospace;color:var(--text)}

/* ---- Formularios ---- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--gold-bright);margin-bottom:6px;letter-spacing:.02em}
.field input,.field select,.field textarea{width:100%}
.field textarea{min-height:84px;resize:vertical}
input,select,textarea{
  background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:12px 14px;font-size:15px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold-bright)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.row2{grid-template-columns:1fr}}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---- Botones ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:11px;font-size:15px;font-weight:700;
  border:1px solid var(--line);background:var(--bg-2);color:var(--text);width:100%;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.btn:hover{border-color:var(--gold);transform:translateY(-1px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-bright));color:#1a1400;border:none}
.btn-gold:hover{box-shadow:0 0 22px rgba(212,175,55,.45)}
.btn-wa{background:#1f7a4d;border:none;color:#fff}
.btn-wa:hover{border-color:#2f9e63;box-shadow:0 0 20px rgba(31,122,77,.4)}

/* ---- Búsqueda de guía ---- */
.search-row{display:flex;gap:10px}
.search-row input{flex:1;text-transform:uppercase;font-family:ui-monospace,Menlo,monospace;letter-spacing:.05em}
.search-row .btn{width:auto}
@media(max-width:520px){.search-row{flex-direction:column}.search-row .btn{width:100%}}

/* ---- Stepper de rastreo ---- */
.stepper{position:relative;display:flex;justify-content:space-between;margin:26px 0 6px}
.stepper-line{position:absolute;top:21px;left:8%;right:8%;height:3px;background:var(--line-soft);z-index:0;border-radius:3px}
.stepper-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:3px;transition:width .4s ease}
.step{flex:1;text-align:center;position:relative;z-index:1}
.step .dot{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;background:var(--bg-2);border:2px solid var(--line-soft);color:var(--muted)}
.step.done .dot{background:var(--green-2);border-color:var(--gold);color:var(--gold-bright)}
.step.current .dot{border-color:var(--gold-bright);color:var(--gold-bright);box-shadow:0 0 0 5px rgba(212,175,55,.14);background:var(--green)}
.step .lbl{display:block;margin-top:9px;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.step.done .lbl,.step.current .lbl{color:var(--text);font-weight:600}

/* ---- Resultado de rastreo ---- */
.result-head{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.result-head .guia{font-family:ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.08em;color:var(--gold)}
.result-head .destino{font-size:15px;margin-top:2px}
.badge{display:inline-block;padding:4px 13px;border-radius:20px;font-size:12.5px;font-weight:700;margin-top:8px}
.badge.recogido{background:rgba(53,176,112,.16);color:#4bd98a;border:1px solid rgba(53,176,112,.4)}
.badge.transito{background:rgba(212,175,55,.16);color:var(--gold-bright);border:1px solid rgba(212,175,55,.4)}
.badge.aduana{background:rgba(230,150,60,.16);color:#f0b070;border:1px solid rgba(230,150,60,.4)}
.badge.entregado{background:rgba(70,150,220,.16);color:#7fb8f0;border:1px solid rgba(70,150,220,.4)}

.timeline{margin-top:24px}
.timeline h2{font-size:14px;color:var(--gold-bright);letter-spacing:.04em;margin-bottom:12px;text-transform:uppercase}
.tl-item{position:relative;padding:0 0 18px 26px;border-left:2px solid var(--line-soft);margin-left:8px}
.tl-item:last-child{border-left-color:transparent;padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-alt)}
.tl-item .when{font-size:12px;color:var(--muted)}
.tl-item .what{font-size:14px}

/* ---- Mensajes de error/éxito ---- */
.msg{border-radius:12px;padding:16px 18px;font-size:14.5px;margin-top:18px}
.msg.err{background:rgba(176,30,40,.14);border:1px solid rgba(176,30,40,.4);color:#f2a0a6}
.msg.ok{background:rgba(53,176,112,.13);border:1px solid rgba(53,176,112,.4);color:#7ce0a8}
.msg .wa{margin-top:16px}

/* ---- Footer ---- */
.foot{max-width:760px;margin:0 auto;padding:0 20px 50px;text-align:center;color:var(--muted);font-size:12.5px}
.foot a{color:var(--gold)}