/* ==========================================================================
   CHASQUI — itinerario.css
   Dueño: módulo «giras» (§11). Las vistas itinerario y gira-nueva.
   --------------------------------------------------------------------------
   1  La fila de fechas (la misma ficha del carrusel de la landing)
   2  La lista completa
   3  El formulario de una jornada
   4  Nueva gira
   5  Estadías y rooming list (§4.14)

   Todo lo demás se reutiliza de app.css (.lista, .tarjeta, .nota,
   .seccion-app, .vista__cab…). Sin colores nuevos: el tinte de «hoy», los
   bordes y las sombras salen de los tokens de base.css. Desde v2.3, la
   franja de una gira archivada o terminada (§4.12). Desde v2.5, el día
   libre y las estadías con su rooming list (§4.14).
   ========================================================================== */

:root{
  --itinerario-ficha-ancho:178px;
}

/* ── 1 · LA FILA DE FECHAS ──────────────────────────────────────────────── */
.itinerario{display:flex;flex-direction:column;gap:1.25rem;min-width:0}
.itinerario__carrusel{display:flex;flex-direction:column;gap:.35rem;min-width:0}

.itinerario__pista{
  position:relative;               /* las fichas miden su offsetLeft desde acá */
  display:flex;
  gap:.8rem;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-padding-inline:.25rem;
  /* Aire arriba para que la ficha suba al pasar el mouse sin cortarse. */
  padding:.5rem .25rem 1.1rem;
  margin-inline:-.25rem;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
.itinerario__pista:focus-visible{outline:2px solid var(--sodio);outline-offset:2px;border-radius:var(--radio)}

/* En el teléfono la fila llega a los bordes de la pantalla, como en la landing. */
@media (max-width:899px){
  .itinerario__pista{
    margin-inline:calc(-1 * var(--gutter));
    padding-inline:var(--gutter);
    scroll-padding-inline:var(--gutter);
  }
}

.ficha-jornada{
  scroll-snap-align:start;
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:var(--itinerario-ficha-ancho);
  padding:1rem 1rem 1.05rem;
  border:1px solid var(--brd);
  border-radius:var(--radio);
  background:linear-gradient(180deg,var(--sup-2),var(--sup-1));
  color:var(--tx);
  transition:transform var(--t-medio) var(--ease),
             border-color var(--t-medio) var(--ease),
             box-shadow var(--t-medio) var(--ease);
}
.ficha-jornada:hover{transform:translateY(-4px);border-color:var(--brd-3);box-shadow:var(--sombra-2)}
.ficha-jornada__fecha{display:inline-flex;align-items:baseline;gap:.3rem;margin-bottom:.6rem}
.ficha-jornada__numero{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:114%;
  font-size:1.85rem;
  line-height:.9;
  letter-spacing:-.04em;
}
.ficha-jornada__mes{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.06em;color:var(--tx-3)}
.ficha-jornada__semana{
  margin-bottom:.45rem;
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.ficha-jornada__ciudad{
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:106%;
  font-size:1.04rem;
  letter-spacing:-.02em;
  line-height:1.15;
  overflow-wrap:anywhere;
}
.ficha-jornada__lugar{
  min-height:2.3em;
  margin:.25rem 0 .85rem;
  color:var(--tx-2);
  font-size:.83rem;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.ficha-jornada .pastilla{margin-top:auto}

/* Traslado: borde punteado y fondo más hondo, porque es camino y no escenario. */
.ficha-jornada--ruta{background:linear-gradient(180deg,var(--sup-1),var(--fondo));border-style:dashed}
.ficha-jornada--ruta .ficha-jornada__ciudad{color:var(--tx-2);font-size:.96rem}

/* Día libre (§4.14): ni escenario ni camino. Borde de puntos y el sol junto
   a «Día libre», para que en la fila se lea como descanso de un vistazo. */
.ficha-jornada--libre{background:linear-gradient(180deg,var(--sup-1),var(--sup-2));border-style:dotted;border-color:var(--brd-3)}
.ficha-jornada--libre .ficha-jornada__lugar{display:inline-flex;align-items:flex-start;gap:.3rem;color:var(--tx-3)}
.ficha-jornada--libre .ficha-jornada__lugar .icono{flex:none;margin-top:.05rem;color:var(--sodio-texto)}

/* Hoy: la ficha encendida en sodio, igual que la de la landing. */
.ficha-jornada.is-hoy{
  border-color:var(--sodio-texto);
  background:linear-gradient(180deg,var(--sodio-tinte),var(--sup-1));
  box-shadow:0 0 0 1px var(--sodio),0 18px 40px -18px var(--sodio-brillo);
}
.ficha-jornada.is-hoy .ficha-jornada__numero{color:var(--sodio-texto)}

/* Lo que ya pasó se aparta sin perder contraste: cambia el color, no la opacidad. */
.ficha-jornada.is-pasada{background:var(--sup-1)}
.ficha-jornada.is-pasada .ficha-jornada__numero,
.ficha-jornada.is-pasada .ficha-jornada__ciudad{color:var(--tx-2)}
.ficha-jornada.is-cancelada .ficha-jornada__ciudad{color:var(--tx-3);text-decoration:line-through}

.itinerario__alpie{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.35rem 1rem;
}
.itinerario__resumen{font-family:var(--f-mono);font-size:.86rem;letter-spacing:.03em;color:var(--tx-3)}
.itinerario__resumen b{font-weight:600;color:var(--tx-2)}
.itinerario__ayuda{
  font-family:var(--f-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
/* En el escritorio la fila se recorre con la rueda o el teclado: la pista sobra. */
@media (min-width:900px) and (pointer:fine){.itinerario__ayuda{display:none}}

/* ── 2 · LA LISTA COMPLETA ──────────────────────────────────────────────── */
.itinerario__codigo{display:flex;flex-direction:column;gap:.1rem;min-width:4.8rem}
.itinerario__semana{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.itinerario__enlace{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:stretch;
  min-height:var(--tactil);
}
.itinerario__enlace:hover .lista__titulo{text-decoration:underline;text-underline-offset:3px}
/* En el teléfono la fila se parte en dos (app.css), pero solo si algo no
   cabe. El título tiene min-width:0 y corta en cualquier letra, así que con
   una pastilla corta («Traslado») el lado cabía entero y el título quedaba de
   7 px, una letra por línea («Santiago → Angol» en vertical). Con un ancho
   mínimo propio, es el lado el que baja a la segunda línea. */
@media (max-width:560px){.itinerario__enlace{min-width:9rem}}

.itinerario__fila.is-hoy{
  background:linear-gradient(90deg,var(--sodio-tinte),transparent 70%);
  box-shadow:inset 3px 0 0 var(--sodio);
}
.itinerario__fila.is-hoy .itinerario__codigo{color:var(--sodio-texto);font-weight:700}
.itinerario__fila.is-pasada .lista__titulo{color:var(--tx-2);font-weight:500}
.itinerario__fila.is-cancelada .lista__titulo{color:var(--tx-3);text-decoration:line-through}

.itinerario__nota:empty,.itinerario__zona-gira:empty,.itinerario__cabecera:empty{display:none}

/* La franja de una gira pasada (§4.12): «Gira archivada · Desarchivar» o
   «Esta gira ya terminó · Archivar». Punteada, como la de la gira de
   ejemplo: es un estado de la gira, no un error. En el teléfono el botón
   baja a su propia línea. */
.itinerario__nota{display:flex;flex-direction:column;gap:.6rem}
.itinerario__franja{border-style:dashed;border-color:var(--brd-3);background:var(--sup-1)}
.itinerario__franja b{color:var(--tx)}
.itinerario__franja > .icono{color:var(--tx-3)}
.itinerario__franja > .boton{flex:none}

/* ── 3 · EL FORMULARIO DE UNA JORNADA ───────────────────────────────────── */
.formulario-jornada__grupo{
  margin-top:.35rem;
  padding-top:.9rem;
  border-top:1px dashed var(--brd-2);
  font-family:var(--f-mono);
  font-size:.76rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sodio-texto);
}
/* «Esta jornada tiene N vehículos…» (§4.12): en lugar de la salida, el
   vehículo y el chofer, del tamaño de la nota del editor de la hoja. */
.formulario-jornada__nota{font-size:.88rem}
/* La ayuda de «Por confirmar» (§4.14), pegada a su subtítulo. */
.formulario-jornada__ayuda{margin-top:-.35rem}
/* «Ir a la estadía →»: un botón que se lee como el enlace de al lado. */
.formulario-jornada__enlace{
  display:inline;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  cursor:pointer;
}

/* ── 4 · NUEVA GIRA ─────────────────────────────────────────────────────── */
.gira-nueva{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:900px){
  .gira-nueva{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}

/* Los dos caminos como tarjetas grandes: se eligen tocando cualquier parte. */
.gira-nueva__formulario .campo__radios{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:.75rem;
}
.gira-nueva__formulario .campo__radio{
  align-items:flex-start;
  gap:.7rem;
  padding:1rem 1.05rem;
  border-radius:var(--radio);
}
.gira-nueva__formulario .campo__radio input{flex:none;margin-top:.2rem}
.gira-nueva__camino{display:flex;flex-direction:column;gap:.3rem}
.gira-nueva__camino-titulo{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--f-display);
  font-weight:700;
  font-stretch:104%;
  font-size:1.02rem;
  color:var(--tx);
}
.gira-nueva__camino-texto{font-size:.88rem;line-height:1.45;color:var(--tx-2)}

.gira-nueva__puntos{display:flex;flex-direction:column;gap:.55rem;padding-left:1.1rem;list-style:disc;color:var(--tx-2);font-size:.92rem;line-height:1.5}
.gira-nueva__puntos li::marker{color:var(--sodio)}

/* ── 5 · ESTADÍAS Y ROOMING LIST (§4.14) ────────────────────────────────── */
/*  Una tarjeta por estadía, en rejilla desde el escritorio y una debajo de
    otra en el teléfono. La de hoy lleva el borde en sodio, como la ficha de
    hoy. Adentro, los datos (app.css) y la rooming list: la habitación en
    mono, como un número de pieza, y quiénes duermen ahí.                   */
.itinerario__estadias{scroll-margin-top:5rem}
.itinerario__estadias-bajada{margin-top:-.35rem;color:var(--tx-3);font-size:.9rem;line-height:1.5}
.estadias{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));
  gap:.9rem;
  margin:0;
  padding:0;
  list-style:none;
}
.estadias__vacia{color:var(--tx-3);font-size:.92rem}
.estadia{min-width:0;border-radius:var(--radio);scroll-margin-top:5rem}
.estadia:focus-visible{outline:2px solid var(--sodio);outline-offset:3px}
.estadia__tarjeta{height:100%}
.estadia.is-actual .estadia__tarjeta{border-color:var(--sodio-borde);box-shadow:0 0 0 1px var(--sodio-borde),var(--sombra-1)}
.estadia.is-pasada .tarjeta__titulo{color:var(--tx-2)}
.estadia__cabeza{min-width:0}
.estadia__cabeza .tarjeta__titulo{margin-top:.2rem;overflow-wrap:anywhere}
.estadia__hotel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.25rem .45rem;
  margin-top:.35rem;
  color:var(--tx-2);
  font-size:.92rem;
  overflow-wrap:anywhere;
}
.estadia__hotel .icono{flex:none;color:var(--tx-3)}
.estadia__lado{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;flex:none}
.estadia__acciones{display:flex;margin:-.45rem -.55rem 0 0}
.estadia__datos .pastilla{font-size:.72rem;vertical-align:.08em}
.estadia__notas{white-space:pre-line}
.estadia__aviso{font-size:.88rem}

.rooming{display:flex;flex-direction:column;gap:.5rem;padding-top:.85rem;border-top:1px dashed var(--brd-2)}
.rooming__cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem}
.rooming__titulo{
  font-family:var(--f-mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx-2);
}
.rooming__cuenta{font-weight:400;color:var(--tx-3)}
.rooming__lista{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.rooming__habitacion{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem 0;border-top:1px solid var(--brd)}
.rooming__habitacion:first-child{border-top:0}
.rooming__principal{flex:1;min-width:0}
.rooming__nombre{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .55rem}
.rooming__nombre b{font-family:var(--f-mono);font-weight:700;overflow-wrap:anywhere}
.rooming__tipo{
  font-family:var(--f-mono);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx-3);
}
.rooming__quienes{margin-top:.1rem;color:var(--tx);overflow-wrap:anywhere}
.rooming__quienes.is-vacia{color:var(--tx-3)}
.rooming__notas{margin-top:.1rem;font-size:.84rem;color:var(--tx-3);white-space:pre-line;overflow-wrap:anywhere}
.rooming__acciones{display:flex;flex:none;margin:-.45rem -.55rem 0 0}
.rooming__vacia{color:var(--tx-3);font-size:.9rem}

/* El formulario de una habitación: quiénes duermen ahí, por grupo, con el
   mismo dibujo que los pasajeros de un vehículo en la hoja del día. */
.rooming-form__integrantes{gap:.6rem}
.rooming-form__grupo{margin:0;padding:.65rem 0 0;border:0;border-top:1px dashed var(--brd-2)}
.rooming-form__titulo{
  padding:0;
  margin-bottom:.45rem;
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--tx-2);
}
.rooming-form__personas{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));
  gap:.4rem;
}
.rooming-form__persona{
  display:flex;
  align-items:center;
  gap:.6rem;
  min-height:var(--tactil);
  padding:.35rem .6rem;
  border:1px solid var(--brd);
  border-radius:var(--radio-sm);
  background:var(--sup-1);
  cursor:pointer;
}
.rooming-form__persona:has(input:checked){border-color:var(--sodio-texto);background:var(--sodio-tinte)}
.rooming-form__persona:has(input:focus-visible){outline:2px solid var(--sodio);outline-offset:2px}
.rooming-form__nombre{display:flex;flex-direction:column;min-width:0;line-height:1.3;overflow-wrap:anywhere}
.rooming-form__nombre small{font-size:.76rem;color:var(--tx-3)}
/* El 409 de una persona repetida marca su casilla, no todas. */
/* Con :has() para ganarle a la marca de «elegida», que tiene más peso. */
.rooming-form__persona.is-choque,
.rooming-form__persona.is-choque:has(input:checked){border-color:var(--alto);background:var(--alto-tinte)}

/* En el teléfono, los botones de la estadía van arriba a la derecha y el
   título usa todo el ancho que queda. */
@media (max-width:420px){
  .estadia__tarjeta{padding-inline:1rem}
  .rooming__cab .boton{flex:1 1 auto;justify-content:center}
}

/* Impresión: el itinerario sale con sus estadías y la rooming list para
   llevar en la carpeta; sin botones ni sombras, cada tarjeta entera. */
@media print{
  .itinerario__estadias .boton-icono,.itinerario__estadias .no-imprimir{display:none!important}
  .estadias{grid-template-columns:repeat(2,minmax(0,1fr))}
  .estadia{break-inside:avoid}
  .estadia__tarjeta{background:none;box-shadow:none}
  .estadia__datos .pastilla{background:none;border-color:var(--tx-3);color:var(--tx)}
}

@media (prefers-reduced-motion:reduce){
  .ficha-jornada{transition:none}
  .ficha-jornada:hover{transform:none}
}