/* =========================================================================
   Bitácora · componentes
   ========================================================================= */

/* --- Armazón ------------------------------------------------------------ */
.app {
  display: grid;
  grid-template-rows: var(--alto-cabecera) auto 1fr;
  height: 100dvh;
  overflow: hidden;
}

.cabecera {
  display: flex;
  align-items: center;
  gap: var(--e3);
  /* En apaisado, la muesca y las esquinas redondeadas se comen los bordes: el
     `max()` respeta el margen normal y solo crece cuando el recorte lo exige. */
  padding: 0 max(var(--e3), env(safe-area-inset-right)) 0 max(var(--e4), env(safe-area-inset-left));
  border-bottom: 1px solid var(--borde);
  background: var(--velo);
  backdrop-filter: blur(14px) saturate(150%);
  z-index: 40;
}
.desenfoca { backdrop-filter: blur(14px) saturate(150%); }

.cabecera__marca {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  min-width: 0;
}
.cabecera__logo {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.cabecera__contexto {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cabecera__acciones { margin-left: auto; display: flex; align-items: center; gap: var(--e1); }

.escenario {
  position: relative;
  display: grid;
  grid-template-columns: var(--ancho-panel) 1fr;
  min-height: 0;
  /* `min-width: auto` es el valor de fábrica de un elemento de rejilla, y hace
     que NO baje de su contenido mínimo. Con el panel ancho y en flujo, a 320 px
     empujaba la cabecera a 389 px y `.app`, que recorta, se comía el trozo de la
     derecha sin dejar ni barra de scroll. Medido antes de arreglarlo. */
  min-width: 0;
}

/* --- Botones ------------------------------------------------------------
   Todo lo pulsable responde al instante en pointer-down. La retroalimentación
   llega en el momento en que se presiona, no al soltar. */
.boton,
.icono-boton {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  border-radius: var(--r-m);
  color: var(--tinta);
  transition: transform var(--t-pulsar) var(--sal),
              background-color var(--t-rapido) ease,
              border-color var(--t-rapido) ease,
              color var(--t-rapido) ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.boton {
  padding: 9px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  border: 1px solid var(--borde);
  background: var(--superficie);
  min-height: 38px;
}

/* Sin esto el SVG no tiene tamaño propio —solo viewBox— y se estira a todo el
   hueco del botón. Salía un icono de 120 px dentro de un botón de 40. */
.boton svg { width: 15px; height: 15px; flex: 0 0 15px; }

.icono-boton {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  color: var(--tinta-media);
}
.icono-boton svg { width: 19px; height: 19px; }

.boton:active,
.icono-boton:active { transform: scale(0.96); }

.boton--principal {
  background: var(--acento);
  color: var(--acento-tinta);
  border-color: transparent;
}
.boton--fantasma { background: transparent; border-color: transparent; color: var(--tinta-media); }
.boton--peligro  { color: var(--error-t); }
.boton--bloque   { width: 100%; }
.boton[aria-pressed="true"] { background: var(--acento-velo); border-color: var(--acento); color: var(--acento); }
.boton:disabled, .icono-boton:disabled { opacity: 0.4; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .boton:hover        { background: var(--superficie-2); border-color: var(--borde-fuerte); }
  .boton--principal:hover { filter: brightness(1.06); background: var(--acento); }
  .icono-boton:hover  { background: var(--superficie-2); color: var(--tinta); }
}

/* Objetivo táctil mínimo real: el área crece sin que crezca el dibujo. */
@media (pointer: coarse) {
  .icono-boton { width: 44px; height: 44px; flex-basis: 44px; }
  .boton { min-height: 44px; }
  .dia-tab { min-height: 52px; }
}

/* --- Distintivos -------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--superficie-2);
  color: var(--tinta-media);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.chip svg { width: 12px; height: 12px; }

.chip--patrimonio  { background: var(--cat-patrimonio-f);  color: var(--cat-patrimonio-t); }
.chip--naturaleza  { background: var(--cat-naturaleza-f);  color: var(--cat-naturaleza-t); }
.chip--comida      { background: var(--cat-comida-f);      color: var(--cat-comida-t); }
.chip--pueblo      { background: var(--cat-pueblo-f);      color: var(--cat-pueblo-t); }
.chip--transporte  { background: var(--cat-transporte-f);  color: var(--cat-transporte-t); }
.chip--alojamiento { background: var(--cat-alojamiento-f); color: var(--cat-alojamiento-t); }
.chip--practico    { background: var(--cat-practico-f);    color: var(--cat-practico-t); }
.chip--actividad   { background: var(--cat-actividad-f);   color: var(--cat-actividad-t); }

.chip--ok     { background: var(--ok-f);     color: var(--ok-t); }
.chip--alerta { background: var(--alerta-f); color: var(--alerta-t); }
.chip--error  { background: var(--error-f);  color: var(--error-t); }

/* --- Barra de días ------------------------------------------------------ */
.barra-dias {
  display: flex;
  gap: var(--e1);
  padding: var(--e2) max(var(--e3), env(safe-area-inset-right)) var(--e2) max(var(--e3), env(safe-area-inset-left));
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  overflow-x: auto;
  scrollbar-width: none;
  z-index: 30;
}
.barra-dias::-webkit-scrollbar { display: none; }

.dia-tab {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 0 auto;
  min-width: 76px;
  padding: 7px 11px;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  text-align: left;
  color: var(--tinta-media);
  transition: background-color var(--t-rapido) ease,
              color var(--t-rapido) ease,
              border-color var(--t-rapido) ease,
              transform var(--t-pulsar) var(--sal);
  -webkit-tap-highlight-color: transparent;
}
.dia-tab:active { transform: scale(0.97); }
.dia-tab__dia { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dia-tab__num { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.dia-tab__pulso { display: flex; gap: 2px; margin-top: 2px; }
.dia-tab__pulso i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.3; }
.dia-tab__pulso i.on { opacity: 1; }

.dia-tab[aria-current="page"] {
  background: var(--acento-velo);
  border-color: var(--acento);
  color: var(--acento);
}
.dia-tab--hoy .dia-tab__dia::after {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--acento);
  vertical-align: middle;
}
@media (hover: hover) and (pointer: fine) {
  .dia-tab:hover { background: var(--superficie-2); color: var(--tinta); }
  .dia-tab[aria-current="page"]:hover { background: var(--acento-velo); color: var(--acento); }
}

/* --- Panel -------------------------------------------------------------- */
.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--lienzo);
  border-right: 1px solid var(--borde);
  z-index: 20;
}

.panel__cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel__seccion { padding: var(--e4); }
.panel__seccion + .panel__seccion { border-top: 1px solid var(--borde); }

/* --- Cronología --------------------------------------------------------- */
.dia-cabecera { padding: var(--e4) var(--e4) var(--e3); }
.dia-cabecera__meta { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e2); }
.dia-cabecera__resumen { margin-top: var(--e2); }

/* El hueco de abajo lo pone ahora `.dia-editar`, que va detras. */
.cronologia { padding: 0 var(--e4) var(--e5); }

/* Entrada escalonada: las filas del día llegan una detrás de otra, en el mismo
   orden en que se recorren. 22 ms entre ellas — por debajo no se percibe como
   secuencia y por encima se nota la espera. El índice lo pone `viaje.js`, que
   además lo topa: a partir de la novena fila entran todas juntas, porque un día
   de quince paradas tardaría medio segundo en acabar de aparecer.

   Solo se marca al llegar a un día desde otra vista; entre día y día manda el
   desplazamiento lateral. Con movimiento reducido la clase no se añade. */
.cronologia--entra > * {
  animation: entrar var(--t-medio) var(--sal) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}

.bloque {
  position: relative;
  display: grid;
  grid-template-columns: 46px 15px 1fr;
  gap: 0 var(--e2);
  align-items: start;
  padding: 0;
  text-align: left;
  width: 100%;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Una visita lleva dos cosas pulsables: el cuerpo, que abre la ficha, y el
   enlace a Google Maps. Un <a> dentro de un <button> no es HTML válido, así que
   el bloque pasa a ser contenedor y la retícula se muda al botón interior. */
.bloque--visita { display: block; }

.bloque__principal {
  display: grid;
  grid-template-columns: 46px 15px 1fr;
  gap: 0 var(--e2);
  align-items: start;
  width: 100%;
  text-align: left;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}

.bloque--visita .bloque__cuerpo { padding-right: 42px; }
/* Con foto hace falta hueco para ella; el enlace al mapa se apoya en su esquina. */
.bloque--con-foto .bloque__cuerpo { padding-right: 78px; }

.bloque__foto {
  position: absolute;
  top: 10px; right: 8px;
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: var(--r-m);
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  transition: transform var(--t-medio) var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  .bloque--visita:hover .bloque__foto { transform: scale(1.04); }
}
.bloque[data-visitado="true"] .bloque__foto { opacity: 0.62; }

.bloque__mapa {
  position: absolute;
  top: 8px;
  right: 4px;
  width: 32px; height: 32px;
  z-index: 1;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  color: var(--tinta-suave);
  transition: color var(--t-rapido) ease,
              background-color var(--t-rapido) ease,
              transform var(--t-pulsar) var(--sal);
}
.bloque__mapa svg { width: 16px; height: 16px; }
.bloque__mapa:active { transform: scale(0.92); }
@media (hover: hover) and (pointer: fine) {
  .bloque__mapa:hover { color: var(--acento); background: var(--acento-velo); }
}
@media (pointer: coarse) { .bloque__mapa { width: 40px; height: 40px; top: 4px; } }

/* Cuando hay foto, el enlace se monta sobre su esquina inferior derecha en vez
   de robarle sitio al texto. */
.bloque--con-foto .bloque__mapa {
  /* Posición explícita, no `auto`: con top/bottom en auto el elemento cae a su
     posición estática —debajo de todo el bloque— y aterrizaba sobre el bloque
     siguiente. La miniatura ocupa de 10 a 70 px, así que 54 lo deja montado en
     su esquina inferior. */
  top: 54px;
  right: 4px;
  width: 26px; height: 26px;
  background: var(--velo);
  backdrop-filter: blur(8px);
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-1);
  color: var(--tinta-media);
}
.bloque--con-foto .bloque__mapa svg { width: 13px; height: 13px; }
.bloque--con-foto .bloque__mapa:active { transform: scale(0.9); }

/* --- Foto de cabecera de la ficha --------------------------------------- */
.ficha__foto { margin: 0; }
.ficha__foto img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--superficie-2);
}
.ficha__foto figcaption {
  padding: 6px var(--e4) 0;
  color: var(--tinta-suave);
}
.ficha__foto figcaption a { color: var(--tinta-media); }

/* --- Créditos de las imágenes ------------------------------------------- */
.credito-foto {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--e3);
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--borde);
}
.credito-foto:last-child { border-bottom: 0; }
.credito-foto img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--borde); }

.dia-cabecera__ruta { margin-top: var(--e4); }

.bloque__tiempo { padding-top: 11px; }
.bloque__hora { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--tinta); font-weight: 600; }
.bloque__dur  { font-family: var(--mono); font-size: 0.6875rem; color: var(--tinta-suave); }

/* Raíl: la línea vertical continua que cose todo el día. */
.bloque__rail { position: relative; justify-self: center; width: 15px; align-self: stretch; }
.bloque__rail::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: var(--borde);
}
.bloque:first-child .bloque__rail::before { top: 14px; }
.bloque:last-child  .bloque__rail::before { bottom: calc(100% - 14px); }

.bloque__punto {
  position: absolute;
  left: 50%; top: 14px;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--tinta-suave);
  border: 2px solid var(--lienzo);
  box-sizing: content-box;
  transition: transform var(--t-medio) var(--sal), background-color var(--t-rapido) ease;
}

.bloque__cuerpo {
  padding: 9px var(--e3) 11px;
  margin-bottom: var(--e1);
  border-radius: var(--r-m);
  border: 1px solid transparent;
  transition: background-color var(--t-rapido) ease, border-color var(--t-rapido) ease;
}
.bloque__titulo { display: flex; align-items: baseline; gap: var(--e2); }
.bloque__orden {
  flex: 0 0 auto;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-s);
  background: var(--superficie-3);
  color: var(--tinta-media);
  font-size: 0.625rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: translateY(1px);
}
.bloque__resumen { margin-top: 3px; }
.bloque__chips { display: flex; flex-wrap: wrap; gap: var(--e1); margin-top: var(--e2); }
.bloque__nota {
  margin-top: var(--e2);
  padding-left: var(--e2);
  border-left: 2px solid var(--borde);
  color: var(--tinta-media);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.bloque:active .bloque__cuerpo { background: var(--superficie-2); }
@media (hover: hover) and (pointer: fine) {
  .bloque:hover .bloque__cuerpo { background: var(--superficie); border-color: var(--borde); }
  .bloque:hover .bloque__punto  { transform: scale(1.35); background: var(--acento); }
}

.bloque[data-activo="true"] .bloque__cuerpo { background: var(--superficie); border-color: var(--acento); }
.bloque[data-activo="true"] .bloque__punto  { background: var(--acento); transform: scale(1.35); }

.bloque[data-visitado="true"] .bloque__punto { background: var(--ok-t); }
.bloque[data-visitado="true"] .bloque__titulo .titulo-3 { color: var(--tinta-media); }

/* Traslado: mismo raíl, trazo discontinuo. Es tiempo que pasa, no un sitio. */
.bloque--traslado .bloque__rail::before {
  background: repeating-linear-gradient(to bottom, var(--borde) 0 3px, transparent 3px 7px);
}
.bloque--traslado .bloque__punto { display: none; }
.bloque--traslado .bloque__cuerpo { padding-top: 7px; padding-bottom: 7px; }
.bloque--traslado .bloque__linea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 7px;
  color: var(--tinta-media);
  font-size: 0.8125rem;
}
/* El modo no se parte nunca: «A pie» en dos líneas descuadra la fila entera.
   Lo que sí puede pasar a la línea siguiente es el destino. */
.bloque--traslado .bloque__linea b { white-space: nowrap; }
.bloque--traslado .bloque__linea svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--tinta-suave); }
.bloque--traslado .bloque__cuerpo { padding-right: 40px; }
.bloque__mapa--tramo { top: 4px; right: 4px; width: 28px; height: 28px; }
.bloque__mapa--tramo svg { width: 14px; height: 14px; }
@media (pointer: coarse) { .bloque__mapa--tramo { width: 40px; height: 40px; top: 0; } }

.bloque--hito .bloque__punto { width: 7px; height: 7px; margin-left: -3.5px; background: var(--acento); }

/* La línea de «ahora»: solo aparece si hoy cae dentro del viaje. */
.ahora {
  display: grid;
  grid-template-columns: 46px 15px 1fr;
  gap: 0 var(--e2);
  align-items: center;
  margin: var(--e1) 0;
  pointer-events: none;
}
.ahora__hora { font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; color: var(--acento); text-align: right; padding-right: 2px; }
.ahora__marca { position: relative; justify-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); }
.ahora__linea { height: 1px; background: linear-gradient(to right, var(--acento), transparent); }

/* «Ahora» es lo único de la pantalla que se mueve solo, y se lo ha ganado: en
   un día de doce paradas es la referencia que dice dónde estás. Un anillo que
   sale del punto cada 2,8 s — lento a propósito, porque esto se mira de reojo
   mientras andas y algo que parpadea deprisa pide atención que no tiene que
   pedir. Se anima `transform` y `opacity`, que van al compositor y no cuestan
   repintado. Solo existe cuando el día que miras es hoy. */
.ahora__marca::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--acento);
  animation: ahora-anillo 2800ms var(--sal) infinite;
}
@keyframes ahora-anillo {
  0%       { transform: scale(0.62); opacity: 0.55; }
  70%, 100% { transform: scale(1.4);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .ahora__marca::after { display: none; } }

/* --- Ficha de lugar ----------------------------------------------------- */
.ficha__cabecera {
  position: sticky; top: 0;
  z-index: 5;
  display: flex; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--e3);
  background: var(--velo);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--borde);
}
.ficha__nombre { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ficha__cuerpo { padding: var(--e4); }
.ficha__meta { display: flex; flex-wrap: wrap; gap: var(--e1); margin: var(--e3) 0; }
.ficha__resumen { color: var(--tinta-media); font-size: 0.9375rem; line-height: 1.55; }

.prosa { margin-top: var(--e4); font-size: 0.9375rem; line-height: 1.65; }
.prosa p + p { margin-top: var(--e3); }
.prosa strong { font-weight: 650; }
.prosa ul { margin: var(--e3) 0; display: grid; gap: 7px; }
.prosa li { position: relative; padding-left: var(--e4); }
.prosa li::before {
  content: "";
  position: absolute; left: 3px; top: 0.65em;
  width: 5px; height: 1px;
  background: var(--tinta-suave);
}

.datos { margin-top: var(--e5); display: grid; gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--r-m); overflow: hidden; }
.datos__fila { display: grid; grid-template-columns: 92px 1fr; gap: var(--e3); padding: 10px var(--e3); background: var(--superficie); }
.datos__clave { color: var(--tinta-suave); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; padding-top: 1px; }
.datos__valor { font-size: 0.8125rem; line-height: 1.5; }

.consejos { margin-top: var(--e5); display: grid; gap: var(--e2); }
.consejo { display: grid; grid-template-columns: 16px 1fr; gap: var(--e2); font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-media); }
.consejo svg { width: 15px; height: 15px; margin-top: 3px; color: var(--tinta-suave); }

.acciones-lugar { margin-top: var(--e5); display: flex; flex-wrap: wrap; gap: var(--e2); }

.nota-campo {
  width: 100%;
  margin-top: var(--e2);
  padding: 10px var(--e3);
  min-height: 84px;
  resize: vertical;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
  font-size: 0.875rem;
  line-height: 1.55;
  transition: border-color var(--t-rapido) ease;
}
.nota-campo:focus { outline: none; border-color: var(--acento); }
.nota-campo::placeholder { color: var(--tinta-suave); }

/* --- Galería de fotos --------------------------------------------------- */
.galeria { margin-top: var(--e3); display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--e2); }
.galeria__hueco { position: relative; aspect-ratio: 1; border-radius: var(--r-m); overflow: hidden; background: var(--superficie-2); border: 1px solid var(--borde); }
.galeria__hueco img { width: 100%; height: 100%; object-fit: cover; }
.galeria__quitar {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.66);
  color: #fff;
  opacity: 0;
  transition: opacity var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.galeria__quitar svg { width: 13px; height: 13px; }
.galeria__quitar:active { transform: scale(0.9); }
.galeria__hueco:hover .galeria__quitar, .galeria__quitar:focus-visible { opacity: 1; }
@media (pointer: coarse) { .galeria__quitar { opacity: 1; } }

.anadir-foto {
  display: grid; place-items: center;
  aspect-ratio: 1;
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-m);
  color: var(--tinta-suave);
  transition: border-color var(--t-rapido) ease, color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.anadir-foto:active { transform: scale(0.96); }
.anadir-foto svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .anadir-foto:hover { border-color: var(--acento); color: var(--acento); } }

/* --- Avisos ------------------------------------------------------------- */
.aviso {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--e3);
  padding: var(--e3);
  border-radius: var(--r-m);
  border: 1px solid var(--borde);
  background: var(--superficie);
}
.aviso + .aviso { margin-top: var(--e2); }
.aviso svg { width: 17px; height: 17px; margin-top: 2px; }
.aviso--alto  { background: var(--error-f);  border-color: transparent; }
.aviso--alto  svg, .aviso--alto  .aviso__titulo { color: var(--error-t); }
.aviso--medio { background: var(--alerta-f); border-color: transparent; }
.aviso--medio svg, .aviso--medio .aviso__titulo { color: var(--alerta-t); }
.aviso--info  svg { color: var(--tinta-suave); }
.aviso__titulo { font-size: 0.8125rem; font-weight: 700; margin-bottom: 3px; }
.aviso__texto  { font-size: 0.8125rem; line-height: 1.55; color: var(--tinta-media); }
.aviso--alto .aviso__texto, .aviso--medio .aviso__texto { color: inherit; opacity: 0.86; }

/* --- Tabla de transporte ------------------------------------------------ */
.tramo {
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--borde);
}
.tramo:last-child { border-bottom: 0; }
.tramo__cabecera { display: flex; align-items: center; gap: var(--e2); }
.tramo__cabecera svg { width: 16px; height: 16px; color: var(--tinta-suave); flex: 0 0 16px; }
.tramo__datos { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); margin-top: 7px; }
.tramo__dato { font-size: 0.75rem; color: var(--tinta-media); }
.tramo__dato b { color: var(--tinta); font-weight: 600; }
.tramo__nota { margin-top: 7px; font-size: 0.75rem; line-height: 1.5; color: var(--tinta-suave); }

/* --- Listas ------------------------------------------------------------- */
.tarea {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--e3);
  width: 100%;
  padding: 11px var(--e2);
  border-radius: var(--r-m);
  text-align: left;
  transition: background-color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
  -webkit-tap-highlight-color: transparent;
}
.tarea + .tarea { border-top: 1px solid var(--borde); border-radius: 0; }
.tarea:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .tarea:hover { background: var(--superficie-2); } }

.marca {
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: var(--r-s);
  border: 1.5px solid var(--borde-fuerte);
  display: grid; place-items: center;
  color: transparent;
  transition: background-color var(--t-rapido) var(--sal),
              border-color var(--t-rapido) var(--sal),
              color var(--t-rapido) var(--sal);
}
.marca svg { width: 12px; height: 12px; }
[aria-checked="true"] .marca { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }

/* Confirmación del **acto**, no del estado, y esa distinción es toda la regla:
   si esto colgara de `[aria-checked="true"]` se dispararía también al pintar el
   día, y todo lo ya marcado daría un salto al abrirlo. La clase la enciende
   quien atiende el toque (`pulso()` en `dom.js`) y se apaga sola.

   Esto se toca de pie, delante del sitio, mirando otra cosa: el dedo tapa la
   casilla justo cuando cambia, así que el acuse tiene que durar lo suficiente
   para verse al levantarlo. La casilla se hunde y la marca entra rebasando. */
.pulso .marca { animation: marca-hunde 300ms var(--sal); }
@keyframes marca-hunde {
  0%   { transform: scale(1); }
  36%  { transform: scale(0.84); }
  100% { transform: scale(1); }
}

.pulso[aria-checked="true"] .marca svg { animation: marca-entra 320ms var(--sal) both; }
@keyframes marca-entra {
  0%   { opacity: 0; transform: scale(0.4); }
  58%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: none; }
}
[aria-checked="true"] .tarea__texto { color: var(--tinta-suave); text-decoration: line-through; text-decoration-color: var(--borde-fuerte); }
.tarea__texto { font-size: 0.875rem; line-height: 1.45; font-weight: 500; }
.tarea__detalle { margin-top: 3px; font-size: 0.75rem; line-height: 1.45; color: var(--tinta-suave); }

.progreso-lista { display: flex; align-items: center; gap: var(--e2); margin-top: var(--e2); }
.progreso-lista__pista { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--superficie-3); overflow: hidden; }
.progreso-lista__valor { height: 100%; background: var(--acento); border-radius: var(--r-pill); transition: width var(--t-panel) var(--sal); }

/* --- Presupuesto -------------------------------------------------------- */
.partida { display: flex; justify-content: space-between; gap: var(--e3); padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 0.8125rem; }
.partida:last-child { border-bottom: 0; }
.partida__importe { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta-media); }
.partida--destacado { font-weight: 700; border-top: 1px solid var(--borde-fuerte); margin-top: var(--e1); }
.partida--destacado .partida__importe { color: var(--tinta); font-weight: 700; }

/* --- Portada: registro de viajes ---------------------------------------- */
.registro { height: 100dvh; overflow-y: auto; }
.registro__interior {
  max-width: 940px;
  margin: 0 auto;
  padding: var(--e8) max(var(--e5), env(safe-area-inset-right)) calc(var(--e8) + env(safe-area-inset-bottom)) max(var(--e5), env(safe-area-inset-left));
}
.registro__intro { margin-bottom: var(--e7); max-width: 46ch; }
.registro__rejilla { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.tarjeta-viaje {
  display: block;
  text-align: left;
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  background: var(--superficie);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: transform var(--t-medio) var(--sal),
              box-shadow var(--t-medio) var(--sal),
              border-color var(--t-rapido) ease;
  opacity: 0;
  animation: entrar var(--t-panel) var(--sal) forwards;
}
.tarjeta-viaje:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-viaje:hover { box-shadow: var(--sombra-3); border-color: var(--borde-fuerte); transform: translateY(-2px); }
}
.tarjeta-viaje__estado { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); }
.tarjeta-viaje__titulo { font-family: var(--serif); font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.022em; }
.tarjeta-viaje__sub { margin-top: 5px; }
.tarjeta-viaje__pie { display: flex; gap: var(--e4); margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--borde); }
.tarjeta-viaje__cifra b { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 500; line-height: 1.1; }

.pulso-dias { display: flex; gap: 3px; margin-top: var(--e4); }
.pulso-dias i { flex: 1; height: 22px; border-radius: 3px; background: var(--superficie-3); }
.pulso-dias i[data-i="llegada"], .pulso-dias i[data-i="salida"] { background: var(--superficie-3); height: 10px; align-self: flex-end; }
.pulso-dias i[data-i="suave"]  { background: var(--cat-naturaleza-f); height: 14px; align-self: flex-end; }
.pulso-dias i[data-i="media"]  { background: var(--cat-comida-f);     height: 18px; align-self: flex-end; }
.pulso-dias i[data-i="fuerte"] { background: var(--cat-pueblo-f);     height: 22px; align-self: flex-end; }

@keyframes entrar {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* --- Transiciones entre estados del panel --------------------------------
   El panel se repinta con `innerHTML`, así que el DOM viejo se destruye: cuando
   el estado nuevo existe, el anterior ya no está y no hay nada entre lo que
   animar. La View Transition API saca una foto del antes y sí lo permite.

   **Solo transiciona el cuerpo del panel.** La cabecera, la barra de días y el
   mapa se quedan quietos: son el marco, y un marco que se mueve con su
   contenido convierte una navegación en un sobresalto. */
@supports (view-transition-name: none) {
  .panel__cuerpo { view-transition-name: panel; }

  /* El resto de la página no participa. Su «antes» y su «después» son iguales,
     así que animarlos solo cuesta trabajo y arriesga un parpadeo del mapa. */
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }

  ::view-transition-old(panel),
  ::view-transition-new(panel) {
    /* Sin esto, cuando las dos fotos no miden igual —el panel se ensancha en
       portada, transporte y listas— el navegador las estira para que encajen y
       el texto se deforma mientras cruza. Recortar es preferible a deformar. */
    height: 100%;
    object-fit: none;
    object-position: top left;
    animation-duration: var(--t-panel);
    animation-timing-function: var(--sal);
    animation-fill-mode: both;
  }

  /* Día a día: una hoja que se va por un lado y otra que entra por el otro.
     14 px y no el ancho entero: es una pista de dirección, no un carrusel. */
  [data-vt="dia-der"]::view-transition-old(panel) { animation-name: vt-sale-izq; }
  [data-vt="dia-der"]::view-transition-new(panel) { animation-name: vt-entra-der; }
  [data-vt="dia-izq"]::view-transition-old(panel) { animation-name: vt-sale-der; }
  [data-vt="dia-izq"]::view-transition-new(panel) { animation-name: vt-entra-izq; }

  /* Abrir una ficha es bajar un nivel; volver es subir. Lo dice la profundidad,
     no el lado: si usara el mismo eje que los días, entrar en un sitio y pasar
     al día siguiente se sentirían igual siendo cosas distintas. */
  [data-vt="entra"]::view-transition-old(panel) { animation-name: vt-hunde; }
  [data-vt="entra"]::view-transition-new(panel) { animation-name: vt-emerge; }
  [data-vt="sale"]::view-transition-old(panel)  { animation-name: vt-emerge-inv; }
  [data-vt="sale"]::view-transition-new(panel)  { animation-name: vt-hunde-inv; }

  [data-vt="fundido"]::view-transition-old(panel) { animation-name: vt-fundido-sale; }
  [data-vt="fundido"]::view-transition-new(panel) { animation-name: vt-fundido-entra; }
}

@keyframes vt-sale-izq  { to   { opacity: 0; transform: translateX(-14px); } }
@keyframes vt-entra-der { from { opacity: 0; transform: translateX(14px); } }
@keyframes vt-sale-der  { to   { opacity: 0; transform: translateX(14px); } }
@keyframes vt-entra-izq { from { opacity: 0; transform: translateX(-14px); } }

@keyframes vt-hunde      { to   { opacity: 0; transform: scale(0.985); } }
@keyframes vt-emerge     { from { opacity: 0; transform: translateY(8px); } }
@keyframes vt-emerge-inv { to   { opacity: 0; transform: translateY(8px); } }
@keyframes vt-hunde-inv  { from { opacity: 0; transform: scale(0.985); } }

@keyframes vt-fundido-sale  { to   { opacity: 0; } }
@keyframes vt-fundido-entra { from { opacity: 0; } }

/* Movimiento reducido: se conserva el fundido, que ayuda a entender que algo ha
   cambiado, y se quita el desplazamiento, que es lo que marea. Misma regla que
   el resto de la aplicación. Va explícito porque el `*` de `base.css` no
   alcanza a los pseudoelementos de transición. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(panel) { animation: vt-fundido-sale var(--t-rapido) linear both !important; }
  ::view-transition-new(panel) { animation: vt-fundido-entra var(--t-rapido) linear both !important; }
}

/* --- Buscador ----------------------------------------------------------- */
.buscador-fondo {
  position: fixed; inset: 0;
  z-index: 90;
  display: grid;
  place-items: start center;
  padding: 10vh var(--e4) var(--e4);
  background: rgba(20, 18, 16, 0.32);
  backdrop-filter: blur(3px);
}
.buscador {
  width: min(560px, 100%);
  max-height: 66dvh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
/* Se abre con teclado y se usa muchas veces al día: sin animación, a propósito. */
.buscador__campo { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); border-bottom: 1px solid var(--borde); }
.buscador__campo svg { width: 17px; height: 17px; color: var(--tinta-suave); flex: 0 0 17px; }
.buscador__campo input { flex: 1; border: 0; background: none; outline: none; font-size: 0.9375rem; }
.buscador__campo input::placeholder { color: var(--tinta-suave); }
.buscador__lista { overflow-y: auto; padding: var(--e2); }
.buscador__item {
  display: grid; grid-template-columns: 26px 1fr; gap: var(--e2);
  width: 100%; padding: 9px var(--e2);
  border-radius: var(--r-m);
  text-align: left;
}
.buscador__item[data-sel="true"] { background: var(--superficie-2); }
.buscador__item svg { width: 15px; height: 15px; margin-top: 3px; color: var(--tinta-suave); }
.buscador__vacio { padding: var(--e5); text-align: center; color: var(--tinta-suave); font-size: 0.8125rem; }
kbd {
  font-family: var(--mono); font-size: 0.6875rem;
  padding: 2px 5px;
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  color: var(--tinta-media);
}

/* --- Brindis (mensajes efímeros) ---------------------------------------- */
.brindis-zona {
  position: fixed;
  left: 50%; bottom: calc(var(--e5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 95;
  display: grid;
  gap: var(--e2);
  width: min(420px, calc(100vw - var(--e7)));
  pointer-events: none;
}
.brindis {
  display: flex; align-items: center; gap: var(--e2);
  padding: 11px var(--e4);
  border-radius: var(--r-pill);
  background: var(--tinta);
  color: var(--lienzo);
  font-size: 0.8125rem;
  font-weight: 500;
  box-shadow: var(--sombra-3);
  opacity: 1;
  transform: translateY(0) scale(1);
  /* Transición, no keyframes: se pueden apilar rápido y hay que poder retomarlas. */
  transition: opacity var(--t-medio) var(--sal), transform var(--t-medio) var(--sal);
}
.brindis svg { width: 15px; height: 15px; flex: 0 0 15px; }
.brindis[data-estado="entrando"], .brindis[data-estado="saliendo"] {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}

/* --- Estados vacíos y carga --------------------------------------------- */
.vacio { padding: var(--e7) var(--e4); text-align: center; color: var(--tinta-suave); }
.vacio svg { width: 26px; height: 26px; margin: 0 auto var(--e3); color: var(--borde-fuerte); }

.cargando { display: grid; place-items: center; height: 100%; color: var(--tinta-suave); }
.girador {
  width: 20px; height: 20px;
  border: 2px solid var(--borde);
  border-top-color: var(--acento);
  border-radius: 50%;
  /* Rápido a propósito: un girador veloz hace que la carga se perciba más corta. */
  animation: girar 620ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Móvil: el panel pasa a ser una hoja arrastrable -------------------- */
.tirador { display: none; }

/* La hoja inferior pide **alto**, no estrechez. Un móvil apaisado mide 844x390:
   ancho de sobra para dos columnas y casi nada de alto para una hoja. Medido
   antes del cambio: 118 px de los 390 se iban en cabecera y barra de días.
   `hoja.js` comparte esta misma consulta —la exporta él— para que el CSS y el
   JS no puedan discrepar sobre si hay hoja o no. */
@media (max-width: 899px) and (min-height: 500px) {
  .escenario { grid-template-columns: 1fr; }

  .panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(100dvh - var(--alto-cabecera) - 8px);
    border-right: 0;
    border-top: 1px solid var(--borde);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--velo);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--sombra-3);
    z-index: 50;
    /* JS escribe transform directamente en el elemento durante el arrastre. */
    will-change: transform;
  }
  /* `touch-action` va solo en el tirador. Ponerlo en el panel entero dejaría el
     itinerario sin scroll táctil, que es justo lo que más se usa. */
  .panel__cuerpo { padding-bottom: env(safe-area-inset-bottom); touch-action: pan-y; }
  .panel[data-arrastrando="true"] { user-select: none; -webkit-user-select: none; }

  .tirador {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    /* Alto generoso: es el único sitio por el que se agarra la hoja. */
    padding: 13px 0 11px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .panel[data-arrastrando="true"] .tirador { cursor: grabbing; }
  .tirador::before {
    content: "";
    width: 36px; height: 4px;
    border-radius: var(--r-pill);
    background: var(--borde-fuerte);
    transition: width var(--t-medio) var(--sal), background-color var(--t-rapido) ease;
  }
  .panel[data-arrastrando="true"] .tirador::before { width: 52px; background: var(--acento); }
  .panel[data-arrastrando="true"] .panel__cuerpo { overflow: hidden; }

  .barra-dias { background: var(--velo); backdrop-filter: blur(14px) saturate(150%); }
}

/* Esto depende del ancho y no del alto: en una pantalla estrecha no cabe el
   subtítulo del viaje al lado del título, haya hoja o no. */
@media (max-width: 899px) {
  .registro__interior {
    padding: var(--e6) max(var(--e4), env(safe-area-inset-right)) calc(var(--e8) + env(safe-area-inset-bottom)) max(var(--e4), env(safe-area-inset-left));
  }
  .cabecera__contexto { display: none; }
}

/* Pantalla baja: sin hoja, el panel es una columna de verdad y se estrecha para
   dejarle sitio al mapa. La barra de días también se aprieta — 66 px de alto
   sobre 390 de pantalla eran demasiados. */
@media (max-height: 499px) {
  :root { --ancho-panel: 320px; }
  /* Cada píxel de cromo cuesta el doble aquí: en apaisado hay 390 px de alto en
     total, y la cabecera ya se lleva 52. La barra de días pasa a una sola línea
     con el día y el número al lado, sin los puntos de intensidad. */
  .barra-dias { padding: 4px var(--e3); }
  .dia-tab {
    min-height: 0;
    flex-direction: row;
    align-items: baseline;
    gap: var(--e2);
    min-width: 0;
    padding: 5px 10px;
  }
  .dia-tab__pulso { display: none; }
  .dia-tab--atencion::after { top: 3px; right: 3px; }
  .dia-tab--pseudo .dia-tab__num { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tarjeta-viaje { opacity: 1; animation: none; }
}

/* Marca de visitado dentro del título de un bloque. */
.bloque__hecho { width: 13px; height: 13px; flex: 0 0 13px; color: var(--ok-t); align-self: center; }

/* --- Estado de nube de una parada ---------------------------------------
   Solo lo llevan las paradas que tú has tocado. Lo que viene del archivo no
   está «subido» ni «sin subir»: está en el archivo. Poner un icono en las 25
   para decir «bien» 25 veces es ruido, y entonces el que sí importa no se ve.  */
.bloque__nube { width: 14px; height: 14px; flex: 0 0 14px; align-self: center; }
.bloque__nube--pendiente { color: var(--alerta-t); }
.bloque__nube--en-nube   { color: var(--tinta-suave); opacity: .55; }

/* Al terminar una subida, cada parada que acaba de llegar a la nube lo dice una
   vez, en el orden en que están en el día. Sin esto el icono aparece ya en gris,
   igual que si siempre hubiera estado subido, y la única señal de que algo pasó
   es que la barra de arriba desaparece. Lo enciende `viaje.js` después de que la
   escritura haya ido bien — nunca antes, porque un fallo de red celebrando una
   subida que no ocurrió es la peor mentira posible aquí. */
.bloque__nube.nube-llega { animation: nube-llega 420ms var(--sal) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes nube-llega {
  0%   { opacity: 0; transform: translateY(-5px) scale(0.8); color: var(--alerta-t); }
  55%  { opacity: 1; transform: none; }
  100% { opacity: .55; transform: none; }
}

/* --- Barra de cambios sin guardar ---------------------------------------
   Pegada arriba porque su trabajo es no perderse de vista: mientras haya algo
   sin subir tiene que seguir ahí, se navegue a donde se navegue dentro del día. */
.pendientes {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--e3);
  flex-wrap: wrap;
  margin-bottom: var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--alerta-t);
  border-radius: var(--radio-2, 10px);
  background: var(--alerta-f);
  color: var(--alerta-t);
}
.pendientes__texto { flex: 1 1 auto; font-size: .86rem; line-height: 1.3; }
.pendientes svg { width: 16px; height: 16px; flex: 0 0 16px; }
.pendientes .boton { flex: 0 0 auto; }

/* --- Qué mirar: lista que se va tachando estando delante del sitio ------- */
.mirar { margin-top: var(--e6); }
.mirar__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e3); }
.mirar__cabecera .etiqueta { color: var(--tinta-suave); }
.mirar__lista { margin-top: var(--e3); display: grid; gap: 2px; }

.mirar__item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--e3);
  width: 100%;
  padding: 10px var(--e2);
  border-radius: var(--r-m);
  text-align: left;
  transition: background-color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
  -webkit-tap-highlight-color: transparent;
}
.mirar__item:active { transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .mirar__item:hover { background: var(--superficie-2); } }

.mirar__que { display: block; font-size: 0.875rem; font-weight: 600; line-height: 1.4; }
.mirar__porque { display: block; margin-top: 3px; font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-media); }

.mirar__item[aria-checked="true"] .mirar__que {
  color: var(--tinta-suave);
  text-decoration: line-through;
  text-decoration-color: var(--borde-fuerte);
}
.mirar__item[aria-checked="true"] .mirar__porque { color: var(--tinta-suave); }

/* --- Datos curiosos: tarjetas, no párrafos enterrados -------------------- */
.curiosidades { margin-top: var(--e6); display: grid; gap: var(--e2); }
.curiosidades .etiqueta { color: var(--tinta-suave); margin-bottom: var(--e1); }

.curiosidad {
  position: relative;
  padding: var(--e3) var(--e4) var(--e3) var(--e5);
  border-radius: var(--r-m);
  background: var(--superficie-2);
}
/* Una barra de acento en el canto: distingue la tarjeta sin encerrarla en una caja. */
.curiosidad::before {
  content: "";
  position: absolute;
  left: var(--e3); top: var(--e3); bottom: var(--e3);
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--acento);
  opacity: 0.5;
}
.curiosidad__titulo { font-size: 0.875rem; font-weight: 700; line-height: 1.35; letter-spacing: -0.005em; }
.curiosidad__texto { margin-top: 4px; font-size: 0.8125rem; line-height: 1.55; color: var(--tinta-media); }

/* Un bloque opcional se puede saltar sin romper el día. Se atenúa, no se
   esconde: la decisión se toma sobre la marcha, cansado y con el reloj encima. */
.chip--saltable { background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--tinta-suave); }
.bloque--opcional .bloque__punto { background: var(--lienzo); border-color: var(--borde-fuerte); box-shadow: inset 0 0 0 1.5px var(--borde-fuerte); }
.bloque--opcional .bloque__cuerpo { opacity: 0.88; }

/* --- Nivel: cuánto duele saltárselo -------------------------------------
   Sale de las reseñas, no de un criterio propio, así que se pinta con peso
   descendente: lo obligatorio pesa, lo opcional apenas se ve. */
.nivel--obligatorio {
  background: var(--acento);
  color: var(--acento-tinta);
  letter-spacing: 0.03em;
}
.nivel--recomendable { background: var(--superficie-3); color: var(--tinta-media); }
.nivel--opcional     { background: transparent; border: 1px solid var(--borde); color: var(--tinta-suave); }

/* --- Editar el itinerario sobre la marcha -------------------------------- */
/* Las acciones de autoría van **después** de la cronología, no entre la cabecera
   y ella. Bosquejar el viaje se hace en casa y una vez; leer el día se hace en la
   calle y veinte veces, así que «Añadir una parada» no puede estar en mitad del
   camino de lectura. Por el mismo motivo el enlace de ruta subió junto al
   encabezado: es lo que se busca al salir del alojamiento, y estaba enterrado
   detrás de las bandas plegables. */
.dia-editar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: 0 var(--e4) calc(var(--e8) + env(safe-area-inset-bottom));
}
.chip--propio { background: var(--acento-velo); color: var(--acento); }

.anadir {
  width: min(560px, 100%);
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.anadir__cabecera { display: flex; align-items: center; gap: var(--e3); padding: var(--e4) var(--e4) var(--e3); }
.anadir__cabecera .titulo-2 { flex: 1; }
.anadir__resultados { flex: 1 1 auto; min-height: 90px; padding: var(--e2); }
.anadir__pista { padding: var(--e4); text-align: center; }

.anadir__resultado {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--e3);
  width: 100%; padding: 10px var(--e2);
  border-radius: var(--r-m); text-align: left;
  transition: background-color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.anadir__resultado svg { width: 16px; height: 16px; margin-top: 3px; color: var(--tinta-suave); }
.anadir__resultado:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .anadir__resultado:hover { background: var(--superficie-2); } }

.anadir__forma { border-top: 1px solid var(--borde); padding: var(--e3) var(--e4); background: var(--superficie-2); }
.anadir__elegido { margin-bottom: var(--e3); }
.anadir__elegido .menudo { display: block; }
.anadir__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2) var(--e3); }
.campo--ancho { grid-column: 1 / -1; }
.campo { display: grid; gap: 4px; }
.campo .etiqueta { color: var(--tinta-suave); }
.campo input, .campo select {
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
  font-size: 0.875rem;
  min-height: 38px;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--acento); }

.anadir__pie { display: flex; gap: var(--e2); padding: var(--e3) var(--e4) var(--e4); border-top: 1px solid var(--borde); }
.anadir__pie .boton--principal { margin-left: auto; }

/* Mientras se elige un punto, el mapa lo dice con el cursor y un borde. */
.mapa--eligiendo { cursor: crosshair; box-shadow: inset 0 0 0 3px var(--acento); }

/* =========================================================================
   Jerarquía: portada del viaje, bandas del día y vistas sin mapa
   ========================================================================= */

/* --- La cabecera sube a la portada -------------------------------------- */
/* El título dejó de ser texto y pasó a ser el botón de subir un nivel. Se nota
   al pulsar y con el foco, pero no se disfraza de botón: en una cabecera, el
   nombre de lo que estás mirando es el sitio donde todo el mundo toca. */
a.cabecera__marca { color: inherit; text-decoration: none; border-radius: var(--r-s); transition: opacity var(--t-rapido) ease; }
a.cabecera__marca:active { opacity: 0.6; }
@media (hover: hover) and (pointer: fine) { a.cabecera__marca:hover .cabecera__logo { color: var(--acento); } }

/* --- Vistas sin mapa ----------------------------------------------------- */
/* La portada, Transporte y Listas no usan el mapa. No se desmonta —costaría
   reconstruirlo al volver— sino que se esconde y el panel toma todo el ancho.
   El contenido se acota a una medida de lectura en vez de estirarse a 1600 px. */
.escenario--ancho { grid-template-columns: 1fr; }
.escenario--ancho .mapa-zona { display: none; }
.panel--ancho { border-right: 0; }
.panel--ancho .panel__cuerpo > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.panel--ancho .panel__cuerpo {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* --- Bandas del día ------------------------------------------------------ */
/* Lo que aplica a ESTE día: sus avisos, sus traslados y su lista. Cerradas por
   defecto, todas: en el móvil la hoja asoma 132 px y una banda que se abre sola
   se los come enteros. El resumen ya dice cuántas hay y de qué color. */
.bandas {
  margin-top: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  overflow: hidden;
  background: var(--superficie);
}
.banda + .banda { border-top: 1px solid var(--borde); }

.banda__resumen {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: 10px var(--e3);
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  transition: background-color var(--t-rapido) ease,
              transform var(--t-pulsar) var(--sal);
}
/* El triángulo de serie no se puede alinear ni teñir: se sustituye por la
   flecha del juego de iconos, que gira al abrir. */
.banda__resumen::-webkit-details-marker { display: none; }
.banda__resumen::marker { content: ""; }
.banda__resumen:active { background: var(--superficie-2); transform: scale(0.995); }
@media (hover: hover) and (pointer: fine) { .banda__resumen:hover { background: var(--superficie-2); } }
@media (pointer: coarse) { .banda__resumen { padding: 13px var(--e3); } }

.banda__icono { width: 16px; height: 16px; flex: 0 0 16px; color: var(--tinta-suave); }
.banda__titulo { font-weight: 600; color: var(--tinta); min-width: 0; }
.banda__pista {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.banda__flecha {
  width: 14px; height: 14px; flex: 0 0 14px;
  margin-left: auto;
  color: var(--tinta-suave);
  transform: rotate(90deg);
  transition: transform var(--t-rapido) var(--sal);
}
.banda__pista + .banda__flecha { margin-left: 0; }
.banda[open] .banda__flecha { transform: rotate(-90deg); }

.banda__cuerpo { padding: 0 var(--e3) var(--e3); }

/* Abrir una banda desplazaba de golpe toda la cronología de debajo. Con la
   transición, el contenido de abajo se aparta en vez de teletransportarse.
   `::details-content` es reciente a propósito: donde no exista, la banda se abre
   como se abría antes, que ya funcionaba. */
@supports selector(::details-content) {
  .banda::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--t-medio) var(--sal),
                content-visibility var(--t-medio) allow-discrete;
  }
  .banda[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: reduce) {
    .banda::details-content { transition: none; }
  }
}
.banda__cuerpo .tramo:first-child { padding-top: 0; }
.banda__cuerpo .tramo:last-child { border-bottom: 0; padding-bottom: 0; }

/* Un aviso de nivel alto tiñe el resumen: la diferencia entre «hay dos avisos»
   y «hay dos avisos y uno te rompe el día» tiene que verse sin desplegar. */
.banda--grave .banda__icono { color: var(--error-t); }
.banda--grave .banda__titulo { color: var(--error-t); }

@media (prefers-reduced-motion: reduce) { .banda__flecha { transition: none; } }

/* --- Filas de la portada -------------------------------------------------- */
.fila-dia {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 10px var(--e2);
  border-radius: var(--r-m);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.fila-dia + .fila-dia { border-top: 1px solid var(--borde); border-radius: 0; }
.fila-dia:active { transform: scale(0.995); background: var(--superficie-2); }
@media (hover: hover) and (pointer: fine) { .fila-dia:hover { background: var(--superficie-2); } }

.fila-dia__fecha {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  padding: 4px 0;
  border-radius: var(--r-s);
  background: var(--superficie-2);
  color: var(--tinta-media);
}
.fila-dia__fecha svg { width: 18px; height: 18px; }
.fila-dia__dia { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fila-dia__num { font-family: var(--serif); font-size: 1.125rem; font-weight: 500; line-height: 1.1; }

.fila-dia__cuerpo { flex: 1; min-width: 0; }
.fila-dia__titulo { display: flex; align-items: center; gap: var(--e2); }
.fila-dia__titulo .titulo-3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-dia__meta { display: block; margin-top: 2px; }
.fila-dia__flecha { width: 14px; height: 14px; flex: 0 0 14px; color: var(--tinta-suave); }

.fila-dia--hoy .fila-dia__fecha { background: var(--acento-velo); color: var(--acento); }
.fila-dia--seccion .fila-dia__fecha { background: transparent; border: 1px dashed var(--borde-fuerte); color: var(--tinta-suave); }

/* El punto de «esto pide algo». No lleva color de categoría: no es una
   categoría, es una alerta, y aquí el color solo significa estado. */
.fila-dia__punto {
  width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%;
  background: var(--alerta-t);
}

/* --- Transporte agrupado por día ---------------------------------------- */
.tramos-dia { margin-top: var(--e4); }
.tramos-dia__cabecera {
  display: flex;
  align-items: baseline;
  gap: var(--e2);
  padding-bottom: var(--e2);
  border-bottom: 1px solid var(--borde-fuerte);
  color: inherit;
  text-decoration: none;
}
.tramos-dia__cabecera .etiqueta { color: var(--tinta-suave); flex: 0 0 auto; }
.tramos-dia__cabecera .titulo-3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-media); }
.tramos-dia__cabecera svg { width: 13px; height: 13px; margin-left: auto; flex: 0 0 13px; color: var(--tinta-suave); align-self: center; }
@media (hover: hover) and (pointer: fine) { .tramos-dia__cabecera:hover .etiqueta { color: var(--acento); } }

/* --- Preparativos y vuelta en la barra de días -------------------------- */
.dia-tab--pseudo { color: var(--tinta-suave); }
.dia-tab--pseudo .dia-tab__num { display: grid; place-items: center; }
.dia-tab--pseudo svg { width: 17px; height: 17px; }

/* Un día con aviso propio o lista sin terminar. Va arriba a la derecha del
   número, donde no compite con los puntitos de intensidad de abajo. */
.dia-tab { position: relative; }
.dia-tab--atencion::after {
  content: "";
  position: absolute;
  top: 6px; right: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--alerta-t);
}

/* --- Móvil: las vistas sin mapa no son una hoja ------------------------- */
@media (max-width: 899px) and (min-height: 500px) {
  /* La hoja escribe `transform` en el elemento durante el arrastre, así que
     ganarle exige `!important`. Sin esto, en Transporte se podía arrastrar la
     hoja hacia abajo y descubrir un hueco vacío donde estaba el mapa. */
  .panel--ancho {
    position: static;
    height: auto;
    min-height: 0;
    transform: none !important;
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
    background: var(--lienzo);
    backdrop-filter: none;
  }
  .panel--ancho .tirador { display: none; }
  .escenario--ancho { min-height: 0; }
  .panel--ancho .panel__cuerpo > * { max-width: none; }
}

/* =========================================================================
   Tus datos, y una cabecera que se puede tocar
   ========================================================================= */

/* --- Cabecera: el viaje deja de ser un enlace de 37 px ------------------- */
/* Medido antes: el título del viaje era el único acceso a su portada y ocupaba
   37 × 26 px en móvil, la mitad del mínimo táctil. Ahora tiene su propio icono
   en las acciones, y el título además es un objetivo de 44 px de alto. */
/* El relleno vertical y no `align-items`: los dos hijos se alinean por línea
   base —es lo que hace que un título de 17 px y un subtítulo de 12 se lean como
   una sola frase— y **un grupo alineado por línea base se coloca al principio de
   la caja flex, no en su centro**. Con `min-height: 44px` para el objetivo
   táctil, eso dejaba el texto 8,8 px por encima del centro y 15 px muertos
   debajo. `align-items: center` estaba ahí y no hacía nada, porque cada hijo lo
   anula con `align-self: baseline`. El relleno sí centra, y sin tocar la línea
   base. Medido antes y después. */
a.cabecera__marca {
  display: flex;
  min-height: 44px;
  padding: 9px var(--e2);
  margin-left: calc(var(--e2) * -1);
}
.cabecera__marca .cabecera__logo,
.cabecera__marca .cabecera__contexto { align-self: baseline; }

/* El icono de la sección en la que ya estás no invita a ir a ninguna parte. */
.icono-boton[aria-current="page"] {
  background: var(--acento-velo);
  color: var(--acento);
}

/* --- Tus datos ----------------------------------------------------------- */
.perfil__cabecera {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  margin-bottom: var(--e6);
}
.perfil__cabecera .icono-boton { margin-top: 2px; flex: 0 0 auto; }

.tarjeta-datos {
  padding: var(--e5);
  border: 1px solid var(--borde);
  border-radius: var(--r-l);
  background: var(--superficie);
}
.tarjeta-datos + .tarjeta-datos { margin-top: var(--e4); }
.tarjeta-datos__cabecera { display: flex; align-items: start; gap: var(--e3); }
.tarjeta-datos__cabecera a.titulo-3 { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-datos__cabecera a.titulo-3:hover { color: var(--acento); }
}

.dato-privado {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--e2);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--lienzo);
}
.dato-privado + .dato-privado { margin-top: 6px; }
.dato-privado__clave { grid-column: 1; font-size: 0.75rem; font-weight: 600; color: var(--tinta-suave); }
.dato-privado__valor { grid-column: 1; font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; }
.dato-privado .icono-boton { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* --- Elegir entre opciones con nombre ------------------------------------ */
/* Tres botones con su nombre escrito en vez de un icono que cicla: con el icono
   había que **deducir** en cuál de los tres estados estabas. */
.opciones { display: grid; gap: 6px; margin-top: var(--e4); }
.opcion {
  display: flex;
  align-items: center;
  gap: var(--e3);
  width: 100%;
  min-height: 48px;
  padding: var(--e2) var(--e3);
  text-align: left;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  color: var(--tinta-media);
  transition: background-color var(--t-rapido) ease, border-color var(--t-rapido) ease,
              color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.opcion svg { width: 17px; height: 17px; flex: 0 0 17px; }
.opcion__nombre { display: block; font-size: 0.875rem; font-weight: 600; }
.opcion__pista { display: block; margin-top: 1px; }
.opcion:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { background: var(--superficie-2); } }
.opcion[aria-checked="true"] {
  border-color: var(--acento);
  background: var(--acento-velo);
  color: var(--acento);
}
/* Sin opacidad: el acento al 80 % sobre su velo bajaba a 3,3:1 (medido con axe). */
.opcion[aria-checked="true"] .opcion__pista { color: inherit; }

/* En cuanto hay sitio, las opciones se reparten en fila. */
@media (min-width: 560px) {
  .opciones { grid-template-columns: repeat(3, 1fr); }
}

/* --- Deslizar entre días ------------------------------------------------- */
/* Mientras el dedo arrastra en horizontal, el panel acompaña. Sin ese
   acompañamiento el gesto no se siente como un gesto: se siente como que la
   pantalla cambia sola un rato después de soltar. */
/* Sin transición: el `transform` lo lleva un muelle en rAF, y una transición de
   CSS encima pelearía con él en cada fotograma. La razón de que sea un muelle y
   no una transición es que una transición no se puede agarrar a mitad — lo mismo
   que ya pasaba con la hoja arrastrable. */
.panel__cuerpo[data-deslizando="true"] {
  user-select: none;
  -webkit-user-select: none;
}

/* El nombre del viaje en Tus datos lleva su flecha: sin ella, en táctil no hay
   nada que diga que se puede entrar ahí. */
.tarjeta-datos__nombre { display: inline-flex; align-items: center; gap: 6px; }
.tarjeta-datos__nombre svg { width: 13px; height: 13px; color: var(--tinta-suave); }

/* --- El tiempo ------------------------------------------------------------
   El color sigue significando solo dos cosas, y aquí no hay ninguna categoría:
   la probabilidad de lluvia alta se tiñe de alerta —que es un estado— y todo lo
   demás va en tinta. Un cielo de colorines sería decoración, que es justo lo
   que este sistema no hace. */

/* La tira de la cabecera del día. Va arriba y no dentro de una banda porque en
   el móvil el panel asoma 132 px sobre el mapa: si llueve, hay que saberlo sin
   abrir nada. Los datos secundarios bajan a su propia línea siempre, y no
   cuando no caben, para que la tira mida lo mismo en los seis días. */
.tiempo-tira {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
  margin-top: var(--e3);
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-m);
  background: var(--superficie);
  font-size: 0.8125rem;
}
.tiempo-tira__icono { width: 20px; height: 20px; flex: 0 0 20px; color: var(--tinta-media); }
.tiempo-tira__cielo { font-weight: 600; min-width: 0; }
.tiempo-tira__temp {
  margin-left: auto;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tiempo-tira__min { margin-left: 6px; color: var(--tinta-suave); }
.tiempo-tira__datos {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  color: var(--tinta-media);
}
.tiempo-tira__dato { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tiempo-tira__dato svg { width: 13px; height: 13px; color: var(--tinta-suave); }
.tiempo-tira__dato--alta { color: var(--alerta-t); }
.tiempo-tira__dato--alta svg { color: currentColor; }

/* Hora a hora. La barra dibuja la forma del día: dónde está el calor y cuándo
   empieza a caer se lee antes que cualquier cifra. Se escala entre la mínima y
   la máxima de las horas que se enseñan, no del día entero. */
.tiempo-horas { display: flex; gap: 2px; padding-bottom: 4px; }
.tiempo-hora {
  display: grid;
  justify-items: center;
  gap: 3px;
  flex: 0 0 42px;
  padding: 4px 0;
  border-radius: var(--r-s);
}
.tiempo-hora__h { font-variant-numeric: tabular-nums; }
.tiempo-hora__icono { width: 15px; height: 15px; color: var(--tinta-suave); }
.tiempo-hora__barra { display: flex; align-items: flex-end; height: 34px; }
.tiempo-hora__barra i {
  display: block;
  width: 6px;
  border-radius: var(--r-pill);
  background: var(--acento);
  opacity: 0.38;
}
.tiempo-hora__t { font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* La fila existe o no existe para el día entero —lo decide `pintarHoras`—, así
   que aquí solo hay que reservar su alto para las horas secas de un día que sí
   la tiene. Si no, las columnas con cifra serían más altas y la fila bailaría. */
.tiempo-hora__p { min-height: 1.1em; font-variant-numeric: tabular-nums; }
.tiempo-hora__p--alta { color: var(--alerta-t); }

/* La lista del viaje entero, en la portada. Cada fila es su día: se toca y se
   entra, igual que en la lista del itinerario de arriba. */
.tiempo-lista { margin-top: var(--e3); }
.tiempo-fila {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: 9px var(--e2);
  border-radius: var(--r-m);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-rapido) ease, transform var(--t-pulsar) var(--sal);
}
.tiempo-fila + .tiempo-fila { border-top: 1px solid var(--borde); border-radius: 0; }
.tiempo-fila:active { transform: scale(0.995); background: var(--superficie-2); }
@media (hover: hover) and (pointer: fine) { .tiempo-fila:hover { background: var(--superficie-2); } }

.tiempo-fila__fecha { display: flex; align-items: baseline; gap: 5px; flex: 0 0 50px; color: var(--tinta-media); }
.tiempo-fila__dia { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tiempo-fila__num { font-family: var(--serif); font-size: 1.0625rem; line-height: 1; }
.tiempo-fila__icono { width: 22px; height: 22px; flex: 0 0 22px; color: var(--tinta-media); }
.tiempo-fila__cuerpo { flex: 1; min-width: 0; }
.tiempo-fila__cielo {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tiempo-fila__zona { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiempo-fila__lluvia { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.tiempo-fila__lluvia svg { width: 12px; height: 12px; }
.tiempo-fila__lluvia--alta { color: var(--alerta-t); }
.tiempo-fila__temp {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--serif);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.tiempo-fila--hoy .tiempo-fila__fecha { color: var(--acento); }
.tiempo-fila--hoy .tiempo-fila__dia { font-weight: 800; }
/* Un día sin predicción se enseña igual y apagado: que falte el dato es una
   respuesta, y esconder la fila haría dudar de si el día existe. */
.tiempo-fila--vacia .tiempo-fila__icono { color: var(--tinta-suave); opacity: 0.5; }
.tiempo-fila--vacia .tiempo-fila__cielo { font-weight: 400; }