/* ================= Viajes (H3a): la lista como pases de abordar ================= */
.viajes__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 18px; }
.viajes__cabeza h1 { font-size: 40px; }
.viajes__botones { display: flex; gap: 10px; flex-wrap: wrap; }
.viajes__filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.viajes__filtros .segmentos > button[aria-pressed="true"] { background: var(--hoja); color: var(--tinta); box-shadow: 0 1px 2px rgba(27, 36, 51, .12); }
.viajes__buscar { flex: 1 1 220px; max-width: 360px; }
.viajes__pases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.viajes__pase { background: var(--hoja-2); border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(27, 36, 51, .08); animation: aparecer .4s var(--suave) both; }
.viajes__talon { display: grid; gap: 4px; padding: 14px 14px 12px; color: var(--tinta); text-decoration: none; }
.viajes__talon:hover .viajes__destino { color: var(--oxido); }
.viajes__quien { font: 600 12px var(--letra-texto); }
.viajes__destino { font: 500 25px/1.05 var(--letra-titulo); overflow-wrap: anywhere; transition: color var(--rapido); }
.viajes__ruta { font: 500 10.5px var(--letra-codigo); letter-spacing: .03em; color: var(--gris); }
.viajes__tira { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; border-top: 1.5px dashed rgba(27, 36, 51, .2); }
.viajes__tira::before, .viajes__tira::after { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); }
.viajes__tira::before { left: -7px; }
.viajes__tira::after { right: -7px; }
.viajes__cuenta { display: flex; align-items: center; gap: 3px; perspective: 300px; }
.viajes__cifra { width: 22px; height: 30px; border-radius: 4px; background: linear-gradient(#F3ECDF 0 49%, #DCD0BA 49% 51%, #EDE4D3 51%); font: 600 19px/30px var(--letra-titulo); text-align: center; box-shadow: 0 1px 0 rgba(27, 36, 51, .18); animation: voltear .32s var(--suave) both; }
.viajes__cifra[data-cifra="1"] { animation-delay: .08s; }
.viajes__cifra[data-cifra="2"] { animation-delay: .16s; }
.viajes__cuenta small { margin-left: 5px; font: 600 9px var(--letra-codigo); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.viajes__sello, .viaje__sello { display: inline-block; padding: 3px 7px; border: 1.5px solid currentColor; border-radius: 4px; font: 700 9px var(--letra-texto); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-6deg); }
.viajes__sello--por-salir, .viajes__sello--en-curso, .viaje__sello--por-salir, .viaje__sello--en-curso { color: var(--verde); }
.viajes__sello--cotizacion, .viaje__sello--cotizacion { color: #7A5F2E; }
.viajes__sello--terminado, .viaje__sello--terminado { color: var(--gris); }
.viajes__sello--cancelado, .viaje__sello--cancelado { color: var(--oxido); }
.viajes__vacio { max-width: 560px; display: grid; gap: 10px; justify-items: start; animation: aparecer .6s var(--suave) both; }
.viajes__vacio p { color: var(--gris); }
.viajes__trazo { width: 100%; height: 70px; }
.viajes__trazo path { fill: none; stroke: var(--oxido); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 6 8; vector-effect: non-scaling-stroke; }
@keyframes voltear { from { transform: rotateX(80deg); opacity: .4; } to { transform: none; opacity: 1; } }

/* ================= El viaje: días como páginas del cuaderno ================= */
.viaje__miga { font: 500 11px var(--letra-codigo); letter-spacing: .04em; color: var(--gris); }
.viaje__miga a { color: inherit; }
.viaje__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 6px; }
.viaje__titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viaje__titulo h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.05; overflow-wrap: anywhere; }
.viaje__sello { padding: 4px 9px; border-width: 2px; font-size: 10px; }
.viaje__sello--cae { animation: sellar .7s cubic-bezier(.2, .9, .25, 1.25) both; }
.viaje__meta { margin-top: 8px; font: 500 11px var(--letra-codigo); letter-spacing: .03em; color: var(--gris); overflow-wrap: anywhere; }
.viaje__pestanas { margin-top: 16px; }
.viaje > .aviso, .viaje > .formulario__error { margin-top: 12px; }
.viaje__zona { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.viaje__columnas { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(260px, 330px); gap: 18px; margin-top: 16px; align-items: start; }
.viaje__dias { list-style: none; margin: 0; padding: 7px; display: grid; gap: 2px; background: var(--hoja-2); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--borde); }
.viaje__dia { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border: 0; border-radius: 9px; background: none; color: var(--tinta); font: 600 12.5px var(--letra-texto); text-align: left; cursor: pointer; transition: background var(--rapido); }
.viaje__dia:hover { background: rgba(27, 36, 51, .05); }
.viaje__dia[aria-current="true"] { background: var(--tinta); color: #F6F0E4; }
.viaje__dia-numero { font: italic 400 19px var(--letra-titulo); color: #7A5F2E; text-align: center; }
.viaje__dia[aria-current="true"] .viaje__dia-numero { color: var(--laton-claro); }
.viaje__dia-nombre { min-width: 0; overflow-wrap: anywhere; }
.viaje__dia small { display: block; font-weight: 400; font-size: 10.5px; color: var(--gris); }
.viaje__dia[aria-current="true"] small, .viaje__dia[aria-current="true"] .viaje__dia-cuenta { color: #AEB4BF; }
.viaje__dia-cuenta { font: 600 10px var(--letra-codigo); color: var(--gris); }
.viaje__pagina { min-width: 0; }
.viaje__pagina-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.viaje__pagina-cabeza h2 { font-size: 26px; overflow-wrap: anywhere; }
.viaje__pagina-cabeza h2 span { font: italic 400 15px var(--letra-titulo); color: var(--gris); }
.viaje__duerme { margin-top: 4px; font: 500 11px var(--letra-codigo); color: var(--gris); }
.viaje__notas { margin-top: 6px; color: var(--gris); white-space: pre-line; }
.viaje__entradas { list-style: none; margin: 0; padding: 0; }
.viaje__entrada { display: grid; grid-template-columns: 12px 72px minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; margin-top: 9px; padding: 11px 12px; background: var(--hoja); border-radius: 12px; box-shadow: 0 10px 22px -18px rgba(40, 30, 20, .6), 0 0 0 1px var(--borde); animation: aparecer .3s var(--suave) both; transition: box-shadow var(--rapido), opacity var(--rapido); }
.viaje__entrada--enfocada { box-shadow: 0 0 0 2px var(--oxido); }
.viaje__entrada--arrastrando { opacity: .45; }
.viaje__encima { box-shadow: 0 0 0 2px var(--laton-claro) !important; background: rgba(200, 168, 108, .12); }
.viaje__asa { width: 10px; height: 18px; margin-top: 2px; background: radial-gradient(circle, #B8AC99 1.2px, transparent 1.4px) 0 0 / 5px 6px; cursor: grab; }
/* Tarjeta del itinerario centrada (pedido 6, 25/9): hora, título, etiquetas, «Mover a…», Editar y Borrar. */
.viaje__hora { padding-top: 1px; font: 500 12px var(--letra-codigo); color: var(--oxido); text-align: center; }
.viaje__cuerpo { min-width: 0; text-align: center; }
.viaje__entrada-titulo { display: block; width: 100%; padding: 0; border: 0; background: none; color: var(--tinta); font: 600 14px var(--letra-texto); text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.viaje__entrada-titulo:hover { color: var(--oxido); }
.viaje__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 6px; }
.viaje__chip { padding: 3px 8px; border-radius: 999px; background: #EFE6D6; color: #5E5245; font: 600 10px var(--letra-texto); }
.viaje__chip--aviso { background: transparent; box-shadow: inset 0 0 0 1.3px #A07D3F; color: #7A5F2E; }
.viaje__iconos { display: flex; justify-content: center; gap: 8px; color: var(--tinta); }
.viaje__iconos svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viaje__icono--no { opacity: .3; }
.viaje__botones-entrada { grid-column: 3 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; font-size: 12.5px; }
.viaje__mover select { min-height: 32px; padding: 4px 8px; border: 0; border-radius: 8px; background: var(--campo); box-shadow: inset 0 0 0 1px var(--borde-fuerte); color: var(--tinta); font: 400 12.5px var(--letra-texto); text-align: center; text-align-last: center; }
.viaje__agregar { width: 100%; margin-top: 10px; padding: 13px; border: 1.5px dashed rgba(27, 36, 51, .22); border-radius: 12px; background: none; color: var(--gris); font: 600 12.5px var(--letra-texto); cursor: pointer; transition: background var(--rapido), border-color var(--rapido); }
.viaje__agregar:hover { border-color: var(--laton-claro); background: rgba(200, 168, 108, .1); }
.viaje__vacio { margin-top: 10px; font-size: 13px; color: var(--gris); }
.viaje__lado { position: sticky; top: 16px; display: grid; gap: 14px; }
.viaje__mapa { height: 300px; border-radius: 14px; overflow: hidden; background: #EFE6D6; box-shadow: inset 0 0 0 1px var(--borde); }
.viaje__mapa > svg { display: block; width: 100%; height: 100%; }
.viaje__mapa .esquema [data-enfocado] circle { fill: var(--oxido); }
.viaje__mapa [data-ruta] { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: trazar .6s cubic-bezier(.6, 0, .2, 1) forwards; }
.viaje__por-visitar h2 { margin-bottom: 6px; font: 600 9.5px var(--letra-codigo); letter-spacing: .14em; text-transform: uppercase; color: var(--gris); }
.viaje__por-visitar .viaje__entrada { grid-template-columns: 12px 0 minmax(0, 1fr) auto; }

/* ================= El editor: un papel que se levanta ================= */
.viaje__editor { display: grid; gap: 14px; padding: 20px 22px; background: var(--hoja); border-radius: var(--radio); box-shadow: 0 30px 50px -30px rgba(40, 30, 20, .55), 0 0 0 1px var(--borde); animation: levantar .3s var(--suave) both; }
.viaje__editor h2 { font-size: 22px; }
.viaje__editor fieldset, .viaje__formulario fieldset:not(.segmentos) { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 14px; }
.viaje__editor legend, .viaje__formulario legend { margin-bottom: 8px; padding: 0; font: 600 10px var(--letra-codigo); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.viaje__dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.viaje__tres { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.viaje__lugar-actual { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.viaje__aproximada { color: #7A5F2E; }
.viaje__opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.viaje__opcion { width: 100%; display: grid; gap: 2px; padding: 9px 11px; border: 0; border-radius: 10px; background: var(--hoja-2); box-shadow: 0 0 0 1px var(--borde); color: var(--tinta); font: 600 13px var(--letra-texto); text-align: left; cursor: pointer; }
.viaje__opcion:hover { box-shadow: 0 0 0 1.5px var(--laton); }
.viaje__opcion small { font-weight: 400; color: var(--gris); }
.viaje__atribucion { font-size: 11px; color: var(--gris); }
.viaje__atribucion a { color: inherit; }
.viaje__ayuda { font-size: 12.5px; color: var(--gris); }
.viaje__casilla { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.viaje__casilla input { width: 18px; height: 18px; accent-color: var(--tinta); }
.viaje__botones { display: flex; flex-wrap: wrap; gap: 10px; }
@keyframes levantar { from { opacity: 0; transform: translateY(10px) rotate(-.4deg); } to { opacity: 1; transform: none; } }

/* ================= El formulario del viaje ================= */
.viaje__formulario { max-width: 720px; display: grid; gap: 16px; }
.viaje__formulario h1 { font-size: 34px; }
.viaje__viajeros { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.viaje__borrar { max-width: 720px; margin-top: 22px; display: grid; gap: 12px; box-shadow: inset 0 0 0 1px rgba(179, 67, 43, .35); }
.viaje__boton-peligro { background: var(--oxido); }
.viaje__boton-peligro:hover { background: #9A3824; }

/* ================= Destinos: escribir, elegir y la fila de etiquetas (tanda 25/9, Encargo B) ================= */
.viaje__destino-sugerencias, .viaje__zona-opciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.viaje__destino-sugerencias button, .viaje__zona-opciones button {
  width: 100%; text-align: left; padding: 8px 11px; border: 0; border-radius: 10px; background: var(--hoja-2);
  box-shadow: 0 0 0 1px var(--borde); font: 400 13.5px var(--letra-texto); color: var(--tinta); cursor: pointer;
}
.viaje__destino-sugerencias button:hover, .viaje__zona-opciones button:hover { box-shadow: 0 0 0 1.5px var(--laton); }
.viaje__zona-opciones { max-height: 220px; overflow-y: auto; }
.viaje__destino-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.viaje__chip-destino {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; border-radius: 999px;
  background: var(--hoja-2); box-shadow: inset 0 0 0 1px var(--borde); font-size: 13px;
}
.viaje__chip-zona {
  border: 0; padding: 5px 10px; border-radius: 999px; background: var(--campo); font: 600 11px var(--letra-codigo);
  color: var(--gris); cursor: pointer;
}
.viaje__chip-zona:hover { color: var(--tinta); }
.viaje__chip-quitar {
  width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--hoja); color: var(--gris); font-size: 15px; line-height: 1; cursor: pointer;
}
.viaje__chip-quitar:hover { background: var(--oxido); color: var(--hoja); }
.viaje__zona-popup {
  display: grid; gap: 8px; margin-top: 4px; padding: 12px; border-radius: 10px; background: var(--hoja-2);
  box-shadow: 0 0 0 1px var(--borde);
}
.viaje__zona-popup p { margin: 0; font-size: 12.5px; color: var(--gris); }
.viaje__zona-popup input {
  width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: var(--radio-chico);
  background: var(--campo); box-shadow: inset 0 0 0 1px var(--borde-fuerte); font: 400 14px var(--letra-texto);
}
.viaje__zona-popup-botones { display: flex; flex-wrap: wrap; gap: 14px; }
/* «Hora del destino» junto a Moneda: un resumen, no un campo editable (se cambia por destino, arriba). Mismo
   alto que el select de al lado (pedido 5): sin <small> debajo de ninguno de los dos. */
.campo output {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 12px;
  border-radius: var(--radio-chico); background: var(--campo); box-shadow: inset 0 0 0 1px var(--borde-fuerte);
  font: 400 15px var(--letra-texto); color: var(--tinta);
}

/* ================= Relojitos: la hora de ahora en casa y en cada destino (pedido 7) ================= */
.viaje__relojes {
  display: grid; align-content: start; gap: 10px; padding: 16px; border-radius: var(--radio);
  background: var(--hoja-2); box-shadow: inset 0 0 0 1px var(--borde);
}
.viaje__relojes h2 { margin: 0; font: 600 10px var(--letra-codigo); letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.viaje__reloj { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: 14px; }
.viaje__reloj span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

/* En pantalla ancha el formulario usa dos columnas: los campos y, al lado, los relojitos (pedido 7). */
@media (min-width: 900px) {
  .viaje__formulario { max-width: 980px; grid-template-columns: minmax(0, 1fr) 240px; align-items: start; }
  .viaje__formulario > *:not(.viaje__relojes) { grid-column: 1; }
  .viaje__formulario > .viaje__relojes { grid-column: 2; grid-row: 1 / -1; }
}

/* ================= Al ancho de una tableta y de un celular ================= */
@media (max-width: 1100px) {
  .viaje__columnas { grid-template-columns: 170px minmax(0, 1fr); }
  .viaje__lado { grid-column: 1 / -1; position: static; }
}
@media (max-width: 720px) {
  .viaje__columnas { grid-template-columns: 1fr; }
  .viaje__dias { display: flex; overflow-x: auto; gap: 4px; }
  .viaje__dias li { flex: 0 0 auto; }
  .viaje__dia { grid-template-columns: 24px auto; }
  .viaje__dia-cuenta { display: none; }
  .viaje__mapa { height: 220px; }
  .viaje__entrada { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .viaje__hora { grid-column: 2 / -1; }
  /* Sin esto el cuerpo caía en la columna de 12 px del asa y el título salía una letra por renglón (visto a 375 px).
     -3 es la columna ancha con 3 columnas y también en «Por visitar», que lleva una más. */
  .viaje__cuerpo { grid-column: -3; }
  .viaje__botones-entrada { grid-column: 1 / -1; }
  .viaje__dos, .viaje__tres { grid-template-columns: 1fr; }
  /* Relojitos compactos, en fila, arriba del botón de guardar (pedido 7: así los pide Mario a 375 px). */
  .viaje__relojes { grid-auto-flow: column; justify-content: start; overflow-x: auto; gap: 16px; padding: 12px 14px; }
  .viaje__reloj { flex-direction: column; align-items: flex-start; gap: 2px; font-size: 12px; white-space: nowrap; }
}
@media (forced-colors: active) {
  .viaje__dia[aria-current="true"], .viaje__entrada--enfocada, .viaje__encima { outline: 2px solid CanvasText; }
}