/* Mi viaje · Tissera Viajes
   Pensado primero para el celular: una columna, la cuenta regresiva arriba,
   azul Tissera y celeste del logo como únicos colores. */
:root{
  --bg:#eef3fa; --card:#fff; --tx:#13203a; --mu:#5b6987; --ln:#dbe3ef;
  --azul:#0b3a9e; --celeste:#1ea7ff; --cielo:#e3f2ff;
  --ok:#137a50; --okbg:#e6f5ee; --wn:#a04b06; --wnbg:#fff3e2; --wa:#128c4a;
  --f:Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --r:14px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--tx);font:16px/1.5 var(--f);padding-bottom:env(safe-area-inset-bottom,0)}
body.con-modal{overflow:hidden}
a{color:var(--azul)}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{margin:0;text-wrap:balance}
.mu{color:var(--mu)}
.chico{font-size:13px}

.barra{display:flex;justify-content:center;padding:calc(10px + env(safe-area-inset-top,0)) 16px 6px;background:var(--card)}
.barra img{height:64px;width:auto}

main{max-width:640px;margin:0 auto;padding:0 16px 24px}
.cargando{padding:48px 0;text-align:center;color:var(--mu)}

/* portada con la cuenta regresiva */
.portada{margin:0 -16px;padding:22px 20px 26px;color:#fff;text-align:center;
  background:linear-gradient(160deg,var(--azul) 0%,#0f4fc4 55%,var(--celeste) 130%);border-radius:0 0 28px 28px}
.portada .hola{margin:0 0 2px;font-size:15px;opacity:.9}
.portada h1{font-size:clamp(26px,7vw,34px);line-height:1.15;font-weight:700}
.portada .fechas{margin:6px 0 16px;font-size:15px;opacity:.92}
.cuenta{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);border-radius:18px;padding:12px 22px;min-width:220px}
.cuenta .num{font-size:28px;font-weight:700;line-height:1.1}
.cuenta .num b{font-size:44px;font-variant-numeric:tabular-nums}
.cuenta .sub{font-size:14px;opacity:.95}
.portada .reserva{margin:14px 0 0;font-size:13px;opacity:.8;letter-spacing:.02em}

.mensaje{margin:16px 0 0;background:var(--card);border-left:4px solid var(--celeste);border-radius:var(--r);padding:14px 16px}
.mensaje p{margin:0 0 6px}
.mensaje span{color:var(--mu);font-size:14px}

.indice{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;margin:14px -16px 0;padding:10px 16px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(6px);scrollbar-width:none}
.indice::-webkit-scrollbar{display:none}
.indice button{flex:none;border:1px solid var(--ln);background:var(--card);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--azul)}

.caja{background:var(--card);border-radius:var(--r);padding:18px 16px;margin-top:14px;box-shadow:0 1px 2px rgba(19,32,58,.06);scroll-margin-top:64px}
.caja h2{font-size:20px;margin-bottom:12px;color:var(--azul)}
.caja h3{font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--mu);margin:18px 0 8px}

/* servicios */
.servicios{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sv{border:1px solid var(--ln);border-radius:12px;overflow:hidden}
.sv-enc{display:flex;justify-content:space-between;gap:8px;align-items:baseline;padding:8px 12px;background:var(--cielo)}
.sv .tipo{font-weight:700;font-size:14px;color:var(--azul)}
.sv .cuando{font-size:14px;color:var(--mu);white-space:nowrap}
.sv.hotel .sv-enc{background:#eef0ff}
.sv.traslado .sv-enc,.sv.auto .sv-enc{background:#eaf7f2}
.sv.asistencia .sv-enc{background:#fff4e8}
.tramo{padding:10px 12px}
.tramo + .tramo{border-top:1px dashed var(--ln)}
.tramo p{margin:4px 0 0}
.tramo dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0;font-size:15px}
.tramo dt{color:var(--mu)}
.tramo dd{margin:0}
.vuelos{margin:8px 0 0;padding:8px 10px;background:#f6f8fc;border-radius:8px;font:14px/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-x:auto}
.equipaje{font-size:14px}

/* pagos */
.totales{display:grid;gap:6px}
.totales div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:#f6f8fc;border-radius:10px;padding:10px 12px}
.totales span{font-size:15px;color:var(--mu)}
.totales b{font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.totales .debe{background:var(--wnbg)} .totales .debe b{color:var(--wn)}
.totales .ok{background:var(--okbg)} .totales .ok b{color:var(--ok)}
.barra-pago{height:8px;border-radius:99px;background:var(--ln);margin:12px 0 4px;overflow:hidden}
.barra-pago span{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--celeste));border-radius:99px}
.limite{margin:10px 0 0;font-size:15px}
.limite.pronto{background:var(--wnbg);color:var(--wn);border-radius:10px;padding:8px 10px}
.pagos{list-style:none;margin:0;padding:0}
.pagos li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--ln)}
.pagos li:first-child{border-top:0}
.pagos li div{display:flex;flex-direction:column}
.pagos b{font-variant-numeric:tabular-nums}
.pagos .btn{flex:none;white-space:nowrap}
.pagos .mu{font-size:14px}
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th,.tabla td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--ln)}
.tabla th{color:var(--mu);font-weight:400}

/* documentos */
.docs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.docs a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ln);border-radius:10px;text-decoration:none;color:var(--tx)}
.docs a:active{background:var(--cielo)}
.docs .ext{flex:none;font-size:11px;font-weight:700;color:#fff;background:var(--azul);border-radius:6px;padding:4px 6px}
.docs .nom{flex:1;min-width:0;overflow-wrap:anywhere}
.docs .abrir{flex:none;color:var(--azul);font-size:14px}

/* pasajeros */
.pax{list-style:none;margin:0;padding:0}
.pax li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding:8px 0;border-top:1px solid var(--ln)}
.pax li:first-child{border-top:0}
.pax .mu{font-size:14px;margin-left:auto}
.pill{font-size:12px;background:var(--cielo);color:var(--azul);border-radius:99px;padding:1px 8px}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:12px;border:0;
  background:var(--azul);color:#fff;font-weight:700;text-decoration:none}
.btn.s{background:var(--card);color:var(--azul);border:1px solid var(--ln);font-weight:400}
.btn.chico{min-height:36px;padding:6px 12px;font-size:14px}
.btn.wa{background:var(--wa);width:100%;margin-top:6px}
.asesora p{margin:0 0 8px}

.aviso-err{background:var(--card);border-radius:var(--r);padding:24px 18px;margin-top:24px;text-align:center}
.aviso-err h1{font-size:22px;color:var(--azul);margin-bottom:8px}
.aviso-err .acc{display:flex;flex-direction:column;gap:10px;margin-top:16px}

.pie{text-align:center;color:var(--mu);font-size:14px;padding:22px 0 8px;line-height:1.6}

/* recibo */
.modal{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center}
.modal[hidden]{display:none}
.velo{position:absolute;inset:0;background:rgba(10,20,40,.5)}
.hoja{position:relative;background:var(--card);width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom,0))}
.hoja .acc{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}
.recibo{font-size:14px;color:#13203a}
.recibo .membrete{width:100%;height:auto;display:block;margin-bottom:10px}
.rec-num{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.rec-tot{width:100%;border-collapse:collapse;margin-top:8px}
.rec-tot td{border-bottom:1px solid var(--ln);padding:6px 4px;vertical-align:top}
.rec-tot td:first-child{color:var(--mu);width:42%}
.rec-pie{margin-top:14px;font-size:12px;color:var(--mu);text-align:center}
@media (min-width:700px){.modal{align-items:center}.hoja{border-radius:18px}}

@media print{
  body *{visibility:hidden}
  .recibo,.recibo *{visibility:visible}
  .recibo{position:absolute;left:0;top:0;width:100%}
  .velo{display:none}
  @page{margin:14mm}
}

/* servicios pendientes de confirmar */
.nota-pend{margin:0 0 12px;font-size:14px;color:var(--mu)}
.sv.pend{border-style:dashed}
.sv.pend .sv-enc{background:var(--wnbg)}
.en-conf{display:inline-block;margin-left:6px;font-size:12px;font-weight:700;color:var(--wn);background:#fff;border:1px solid #f1c48f;border-radius:99px;padding:0 8px}
.docs.embarque a{border-color:var(--celeste);background:var(--cielo)}
.docs.embarque .ext{background:var(--celeste)}

/* etapa 2: antes de viajar, info del destino, recomendaciones */
.check{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.check li{border:1px solid var(--ln);border-radius:10px;padding:10px 12px}
.check label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin:1px 0 0;accent-color:var(--azul)}
.check li.ok{border-left:4px solid var(--ok)}
.check li.wn{border-left:4px solid #e0912f}
.check li.mal{border-left:4px solid #c0392b;background:#fdf0ee}
.check li.listo span{color:var(--mu);text-decoration:line-through}
.ficha{border:1px solid var(--ln);border-radius:10px;margin-top:8px}
.ficha summary{cursor:pointer;padding:12px;font-weight:700;list-style:none}
.ficha summary::-webkit-details-marker{display:none}
.ficha summary::after{content:"＋";float:right;color:var(--azul)}
.ficha[open] summary::after{content:"－"}
.ficha .cat{display:block;font-size:12px;font-weight:400;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
.ficha-txt{padding:0 12px 4px;font-size:15px}
.ficha-links{margin:6px 0 0;padding:0 12px 0 30px;font-size:14px}
.ficha .mu.chico{padding:0 12px 10px;margin:6px 0 0}
.recos{margin:0 0 8px;padding-left:20px}
.recos li{margin:4px 0}

/* check in */
.checkin-caja{border:1px solid var(--celeste);background:var(--cielo);border-radius:12px;padding:12px 14px;margin:0 0 12px}
.checkin-caja h3{margin:0 0 6px;color:var(--azul);text-transform:none;letter-spacing:0;font-size:16px}
.checkin-caja p{margin:0 0 8px}
.ck-form{display:grid;gap:8px}
.ck-form label{display:grid;gap:4px;font-size:14px;color:var(--mu)}
.ck-form select,.ck-form input{font:inherit;color:var(--tx);padding:10px;border:1px solid var(--ln);border-radius:10px;background:#fff}
.ck-form .acc{display:flex;gap:8px;flex-wrap:wrap}
.ck-form .acc .btn{flex:1}
.lnk{background:none;border:0;padding:0;color:var(--azul);text-decoration:underline;cursor:pointer;font:inherit}
.aviso-oficial{margin:10px 0 12px;padding:10px 12px;border-left:4px solid #f0a020;background:#fff8e6;border-radius:6px;font-size:13px;line-height:1.45;color:#5a4300}
.aviso-oficial a{color:inherit;text-decoration:underline}
@media (prefers-color-scheme: dark){.aviso-oficial{background:#3a2e10;color:#f3dfa8}}
.cuentas{margin:12px 0;border:1px solid var(--ln,#d9e1ee);border-radius:10px;padding:10px 12px;background:var(--soft,#f6f8fc)}
.cuentas summary{cursor:pointer;font-weight:600}
.cuentas-txt{margin:10px 0;font-size:14px;line-height:1.55}
.cuentas .acc{display:flex;gap:8px;flex-wrap:wrap}
.cuentas .acc .btn{text-decoration:none}