:root{
  --ink:#1B2B2E;
  --azulejo:#1E4E5F;
  --azulejo-dark:#12333F;
  --ochre:#C68A2E;
  --ochre-light:#E8B968;
  --paprika:#B5482E;
  --cream:#F6F1E6;
  --cream-2:#EFE7D6;
  --line:#D8CDB2;
  --white:#FFFDF8;
  --good:#3E6B4F;
  --warn:#B5482E;
  --muted:#6B6459;
  --radius:10px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans',sans-serif;
  font-size:15.5px;
  line-height:1.55;
  width:100%;
}
h1,h2,h3,h4{
  font-family:'Fraunces',serif;
  font-weight:700;
  color:var(--azulejo-dark);
  margin:0 0 .4em 0;
}
h1{font-size:2.1rem;}
h2{font-size:1.5rem; border-bottom:2px solid var(--line); padding-bottom:.35em; margin-bottom:.7em;}
h3{font-size:1.15rem; color:var(--paprika); margin-top:1.3em;}
h4{font-size:1rem; color:var(--azulejo);}
p{margin:.5em 0;}
a{color:var(--azulejo); text-decoration:underline; text-decoration-color:var(--ochre-light);}
a:hover{color:var(--paprika);}
.mono{font-family:'JetBrains Mono',monospace;}
.tag{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.18em .55em; border-radius:99px;
  border:1px solid currentColor; margin:0 .3em .3em 0;
}
.tag.verified{color:var(--good); background:#3E6B4F14;}
.tag.estimate{color:var(--ochre); background:#C68A2E14;}
.tag.rec{color:var(--white); background:var(--paprika); border-color:var(--paprika);}
.tag.alt{color:var(--azulejo); background:#1E4E5F10;}
.tag.avoid{color:var(--warn); background:#B5482E10;}

/* header / hero */
#stickyHeader{position:sticky; top:0; z-index:60;}
header{
  background:var(--azulejo-dark);
  color:var(--cream);
  padding:1.4rem 1.2rem;
}
header .head-inner{max-width:1180px; margin:0 auto;}
.hero-row{display:flex; gap:1.4rem; align-items:flex-start; flex-wrap:wrap;}
.hero-title{flex:0 0 auto;}
.hero-title h1{color:var(--white); font-size:1.85rem; margin:0;}
.hero-title .sub{color:#CFE0DE; margin:.25em 0 0;}
.route-strip-wrap{flex:1 1 320px; min-width:0;}

/* nav bar de secciones */
.top-bar{
  background:var(--azulejo);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  padding:.6rem 1.2rem;
}
.top-bar-inner{max-width:1180px; margin:0 auto; display:flex; align-items:center; gap:.6rem;}
.route-strip{
  display:flex; flex-wrap:nowrap; overflow-x:auto; gap:0; align-items:center;
  padding:6px 0 2px;
}
@media(min-width:901px){
  .hero-row{align-items:center;}
  .route-strip{justify-content:space-between;}
  .stub{margin-right:0;}
}
.stub{
  flex:0 0 auto; min-width:88px; background:var(--white); color:var(--ink);
  border-radius:8px; padding:.42rem .55rem .38rem; margin-right:20px;
  position:relative; box-shadow:0 3px 0 rgba(0,0,0,.18);
  border:1px dashed var(--line);
}
.stub .code{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.92rem; color:var(--azulejo-dark);}
.stub .date{font-family:'JetBrains Mono',monospace; font-size:.62rem; color:var(--muted); margin-top:.1em; white-space:nowrap;}
.stub .mode{font-size:.6rem; color:var(--paprika); text-transform:uppercase; letter-spacing:.03em; margin-top:.22em; font-weight:600;}
.stub .arrow{
  position:absolute; right:-18px; top:50%; transform:translateY(-50%);
  background:var(--white); border-radius:50%; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; font-size:.8rem;
  box-shadow:0 2px 5px rgba(0,0,0,.3); z-index:2; border:1px solid var(--line);
}

/* nav: columnas auto-adaptables — nunca deja un botón huérfano solo en una fila */
nav{flex:1; min-width:0;}
nav .nav-inner{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:.3rem;
}
nav button{
  background:var(--azulejo-dark); border:1px solid #2C5C6C; color:#D9E7E4; font-family:'Work Sans',sans-serif;
  font-size:.72rem; font-weight:600; padding:.4rem .5rem; cursor:pointer;
  white-space:nowrap; border-radius:6px; letter-spacing:.01em; text-align:center;
}
nav button:hover{color:var(--white); border-color:var(--ochre-light);}
nav button.active{color:var(--azulejo-dark); background:var(--ochre-light); border-color:var(--ochre-light);}

#quickActions{flex:0 0 auto; display:flex; gap:.4rem;}
#quickActions button{
  background:var(--ochre); border:none; color:var(--azulejo-dark); font-family:'Work Sans',sans-serif;
  font-size:.72rem; font-weight:700; padding:.4rem .65rem; cursor:pointer; border-radius:6px; white-space:nowrap;
}

/* ---- Ruta condensada (solo móvil) ----
   En pantalla ancha se ven los tiles; en móvil ocupaban ~90px de alto y aun así
   solo se alcanzaba a ver la mitad de la ruta. Esta línea cabe completa. */
.route-mini{display:none;}
.route-mini .rm-code{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.72rem; color:var(--white);}
.route-mini .rm-ic{font-size:.6rem; opacity:.75; margin:0 .12rem;}

/* ---- MÓVIL: el encabezado ocupaba el 44% de la pantalla en TODAS las pestañas ----
   Antes: título + subtítulo + cinta de tiles + 6 botones de nav + 4 de acción, todo
   pegado arriba (position:sticky), o sea ~290px de 664 antes de ver contenido.
   Ahora: el héroe se desplaza con la página y solo la barra de navegación queda fija. */
@media(max-width:640px){
  #stickyHeader{position:static;}
  .top-bar{position:sticky; top:0; z-index:60; padding:.4rem .6rem;}

  header{padding:.55rem .8rem .5rem;}
  .hero-row{gap:.5rem; align-items:center;}
  .hero-title h1{font-size:1.05rem;}
  .hero-title .sub-long{display:none;}       /* las fechas ya están en la ruta */
  .hero-title .sub{font-size:.72rem; margin:.15em 0 0;}
  .route-strip{display:none;}                /* reemplazada por .route-mini */
  .route-mini{display:flex; align-items:center; flex-wrap:wrap; gap:.05rem; margin-top:.15rem;}

  nav .nav-inner{grid-template-columns:repeat(3,1fr); gap:.25rem;}
  nav button{font-size:.68rem; padding:.3rem .2rem;}
  .top-bar-inner{flex-wrap:wrap; gap:.35rem;}
  #quickActions{width:100%; order:3; justify-content:space-between; gap:.25rem;}
  #quickActions button{flex:1; font-size:.66rem; padding:.32rem .1rem;}

  main{padding:.9rem .8rem 1.4rem;}
  .small{font-size:.8rem;}
  /* selector de plan: la tarjeta ocupaba ~110px solo para dos botones */
  .plan-toggle{width:100%;}
  .plan-toggle button{flex:1 1 0; font-size:.74rem; padding:.35rem .3rem;}
  #p-itinerario > .card, #p-presupuesto > .card, #p-tracker > .card{padding:.5rem .6rem !important; margin-bottom:.6rem !important;}
  #p-itinerario > .card .small, #p-presupuesto > .card .small, #p-tracker > .card .small{font-size:.72rem;}
  h2{margin-bottom:.5em; padding-bottom:.25em;}
  .card{margin-bottom:.7rem;}
  .daytabs{gap:.25rem; margin-bottom:.6rem;}
  .daytabs button{padding:.4rem .3rem; font-size:.72rem;}
  .subview-switch button{padding:.45rem; font-size:.78rem;}
}

/* ---- PIN gate ---- */
#pinGate{
  position:fixed; inset:0; z-index:999; background:var(--azulejo-dark);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
#pinGate .pin-box{
  background:var(--white); border-radius:var(--radius); padding:2rem 1.8rem; max-width:320px; width:100%;
  text-align:center; box-shadow:0 10px 40px rgba(0,0,0,.35);
}
#pinGate h2{border:none; margin-bottom:.3rem;}
#pinGate p{color:var(--muted); font-size:.85rem;}
#pinGate input{
  width:100%; font-family:'JetBrains Mono',monospace; font-size:1.3rem; text-align:center;
  letter-spacing:.3em; padding:.6rem; border:1px solid var(--line); border-radius:8px; margin:1rem 0 .6rem;
  background:var(--cream);
}
#pinGate button{
  width:100%; background:var(--azulejo); color:var(--white); border:none; border-radius:8px;
  padding:.65rem; font-weight:600; cursor:pointer; font-family:'Work Sans',sans-serif;
}
#pinGate .pin-error{color:var(--paprika); font-size:.8rem; min-height:1.2em; margin-top:.5rem;}
#appBody{display:none;}

main{max-width:1180px; margin:0 auto; padding:1.6rem 1.2rem 1.8rem;}
.panel{display:none; animation:fade .25s ease;}
.panel.active{display:block;}
@keyframes fade{from{opacity:0;} to{opacity:1;}}

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.3rem; margin-bottom:1rem;
}
.grid{display:grid; gap:1rem;}
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr;} .grid-4{grid-template-columns:1fr 1fr; gap:.6rem;}}

table{width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.92rem;}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.6rem 0; border-radius:6px;}
.tbl-wrap table{margin:0;}
@media(min-width:641px){ .tbl-wrap table{min-width:540px;} }
th,td{text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-family:'JetBrains Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600;}
tr.highlight{background:#C68A2E12;}
tr.avoid-row{opacity:.6;}
td.num{font-family:'JetBrains Mono',monospace;}

.rec-box{
  border:2px solid var(--paprika); border-radius:var(--radius); padding:1rem 1.2rem;
  background:#B5482E08; margin:1rem 0;
}
.rec-box h4{color:var(--paprika); margin-top:0;}
.alt-box{
  border:1.5px dashed var(--azulejo); border-radius:var(--radius); padding:1rem 1.2rem;
  background:#1E4E5F06; margin:1rem 0;
}
.alt-box h4{color:var(--azulejo); margin-top:0;}

.stat{background:var(--cream-2); border-radius:var(--radius); padding:.85rem 1rem;}
.stat .big{font-family:'Fraunces',serif; font-size:1.6rem; font-weight:700; color:var(--azulejo-dark);}
.stat .lbl{font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; color:var(--muted); letter-spacing:.03em;}

.daytabs{display:grid; grid-template-columns:repeat(auto-fit,minmax(84px,1fr)); gap:.3rem; margin-bottom:.8rem;}
.daytabs button{
  font-family:'JetBrains Mono',monospace; font-size:.76rem; padding:.5rem .4rem;
  border-radius:6px; border:1px solid var(--line); background:var(--white); cursor:pointer;
  text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.daytabs button.active{background:var(--azulejo); color:var(--white); border-color:var(--azulejo);}
.daytabs.two-col{grid-template-columns:1fr 1fr;}

/* filas de formulario: etiqueta al lado del campo, siempre */
.field-row{display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem;}
.field-row label{flex:0 0 108px; font-size:.85rem; color:var(--muted);}
.field-row input, .field-row select{flex:1; min-width:0;}
/* variante: etiqueta arriba, campo/botones a todo el ancho — para grupos de botones que necesitan espacio */
.field-row.stack{flex-direction:column; align-items:stretch; gap:.35rem;}
.field-row.stack label{flex:0 0 auto;}
@media(max-width:640px){
  .field-row label{flex-basis:74px; font-size:.78rem;}
}
/* K, 29-sept: pase de densidad de escritorio — el formulario de "+ Gasto" (Registros y el
   modal) apilaba Fecha/Ciudad/Categoría cada una en su propia fila completa incluso a
   1280px, donde sobra ancho de sobra. Mismo criterio que .rm-grid ya usa en el modal de
   Reservas (2 columnas desde tablet en adelante): empareja Fecha y Ciudad, que son cortas;
   Categoría (7 chips) se queda sola, necesita el ancho completo para no envolver mal. */
@media(min-width:641px){
  .field-pair{display:grid; grid-template-columns:1fr 1fr; gap:0 .9rem; margin-bottom:.6rem;}
  /* .field-row a secas, no solo .stack: la fila de Fecha (ronda 2, 29-sept) pasó de
     apilada a una sola fila (fecha + Hoy/Ayer), y sigue necesitando el mismo reseteo de
     margen que ya tenían las filas apiladas — el grupo, no cada fila suelta, lleva el
     margen inferior. */
  .field-pair .field-row{margin-bottom:0;}
}

/* modales de formulario (actividad, gasto) */
.form-modal-box{background:var(--white); border-radius:var(--radius); padding:1.5rem; max-width:480px; width:100%; max-height:85vh; overflow-y:auto;}
@media(min-width:641px){
  .form-modal-box{max-width:600px;}
  .form-modal-box.wide{max-width:700px;}
}
/* K, 29-sept (ronda 2): Guardar/Cancelar suben junto al título, como iconos compactos, en
   vez de una fila completa al fondo — la fila de abajo era, junto con Eliminar, lo que
   empujaba la tarjeta fuera de la pantalla sin hacer scroll. Mismos colores que los botones
   de siempre (--azulejo para guardar, --cream-2 para cancelar), ningún color nuevo. */
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.9rem;}
.modal-head h3{margin:0;}
.modal-head-actions{display:flex; gap:.4rem; flex:0 0 auto;}
.icon-btn{
  width:2.1rem; height:2.1rem; border:none; border-radius:8px; cursor:pointer;
  font-size:1rem; font-weight:700; line-height:1; display:flex; align-items:center; justify-content:center;
}
.icon-btn-save{background:var(--azulejo); color:var(--white);}
.icon-btn-cancel{background:var(--cream-2); color:var(--ink);}
/* reserva: campos en 2 columnas en desktop para eliminar scroll del modal */
.rm-grid{display:grid; gap:.65rem;}
@media(min-width:641px){
  .rm-grid{grid-template-columns:1fr 1fr; gap:.6rem .9rem;}
  .rm-grid .rm-full{grid-column:1/-1;}
}

/* grupos de botones — reemplazan <select> para opciones cortas */
.btn-group{display:flex; flex-wrap:wrap; gap:.35rem; flex:1;}
.btn-group button{
  font-family:'Work Sans',sans-serif; font-size:.8rem; padding:.35rem .6rem;
  border-radius:6px; border:1px solid var(--line); background:var(--cream); cursor:pointer; color:var(--ink);
}
.btn-group button.active{background:var(--azulejo); color:var(--white); border-color:var(--azulejo);}
.btn-group.nowrap{flex-wrap:nowrap;}
.btn-group.nowrap button{flex:1; padding:.35rem .3rem; text-align:center;}
.btn-group.nowrap.plan-toggle{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.btn-group.nowrap.plan-toggle button{flex:0 0 auto; white-space:nowrap; padding:.35rem .6rem;}

/* tarjeta de decisión — lo primero que se ve en cada Detalle */
.decision-card{
  border:2px solid var(--azulejo-dark); border-radius:var(--radius); padding:1.2rem 1.3rem;
  background:var(--white); margin-bottom:1rem;
}
.decision-card .dc-label{font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; color:var(--ochre); letter-spacing:.04em; margin-bottom:.3rem;}
.decision-card h3{margin:0 0 .3rem; color:var(--azulejo-dark); font-size:1.3rem;}
.decision-card .dc-meta{font-size:.88rem; color:var(--muted); margin-bottom:.7rem;}
.decision-card .dc-why{font-size:.92rem; margin-bottom:.9rem;}
.decision-card a.dc-book{
  display:inline-block; background:var(--azulejo); color:var(--white); text-decoration:none;
  font-weight:600; padding:.55rem 1.1rem; border-radius:8px; font-size:.88rem;
}
.decision-card a.dc-book:hover{background:var(--azulejo-dark);}
/* layout de 2 columnas en Detalle (desktop/tablet): decisiones a la izquierda, itinerario a la derecha */
.detail-split{display:block;}
@media(min-width:901px){
  .detail-split{display:grid; grid-template-columns:320px 1fr; gap:1.5rem; align-items:start;}
  .detail-left .decision-card{padding:.9rem 1rem;}
  .detail-left .decision-card h3{font-size:1.05rem;}
}
.alt-toggle{margin-top:.9rem;}
.alt-toggle summary{cursor:pointer; font-size:.85rem; color:var(--azulejo); font-weight:600; list-style:none;}
.alt-toggle summary::-webkit-details-marker{display:none;}
.alt-toggle summary::before{content:"▸ "; }
.alt-toggle[open] summary::before{content:"▾ "; }
.alt-toggle .alt-body{margin-top:.8rem;}

/* ---- Agenda de Inicio: calendario de bloques por día ----
   minmax(0,1fr), no 1fr: con 1fr una columna no puede encogerse por debajo del ancho
   mínimo de su contenido, así que un evento con una palabra larga ensanchaba su columna
   y sacaba el sábado de la pantalla. Con minmax(0,·) las columnas son siempre iguales.
   La rejilla de 7 columnas es la de escritorio/tablet; el móvil la reduce a 3 (ver el
   bloque @media más abajo), porque a 7 columnas la celda mide ~47px y ahí no cabe ni el
   nombre de la ciudad ni el título de una actividad. */
.mini-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-bottom:1.2rem;}
.mini-cal .mc-dow{font-family:'JetBrains Mono',monospace; font-size:.68rem; text-transform:uppercase; color:var(--muted); text-align:center; padding-bottom:3px; min-width:0; overflow:hidden;}
.mini-cal .mc-day{
  background:var(--cream-2); border-radius:7px; padding:.4rem .32rem; cursor:pointer;
  min-height:48px; display:flex; flex-direction:column; gap:3px;
  min-width:0; overflow:hidden;   /* la celda se recorta antes que ensanchar su columna */
  border:1px solid transparent;
}
.mini-cal .mc-day.empty{background:none; cursor:default;}
.mini-cal .mc-day.selected{background:var(--azulejo); color:var(--white);}
.mini-cal .mc-top{display:flex; align-items:center; justify-content:space-between; gap:.2rem;}
.mini-cal .mc-num{font-weight:700; font-size:.86rem;}
/* El día de la semana ya lo dice la cabecera de columna; solo hace falta en móvil. */
.mini-cal .mc-dow-in{display:none;}
.mini-cal .mc-icon{font-size:.9rem;}
.mini-cal .mc-city{font-size:.6rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mini-cal .mc-day.selected .mc-city{color:rgba(255,255,255,.85);}
.mini-cal .mc-chip{
  font-size:.66rem; line-height:1.25; background:rgba(255,255,255,.65); border-radius:4px;
  padding:2px 4px; color:var(--ink); white-space:normal; overflow-wrap:break-word; word-break:break-word;
}
.mini-cal .mc-day.selected .mc-chip{background:rgba(255,255,255,.3); color:var(--white);}
.mini-cal .mc-more{font-size:.6rem; color:var(--muted); padding-left:2px;}
.mini-cal .mc-day.selected .mc-more{color:rgba(255,255,255,.85);}
/* Día en curso — solo aparece una vez empezado el viaje. */
.mini-cal .mc-day.today{border-color:var(--ochre); background:#C68A2E1F;}
.mini-cal .mc-day.today .mc-num{color:var(--paprika);}
.mini-cal .mc-day.today.selected .mc-num{color:var(--white);}
@media(max-width:640px){
  /* Tres columnas: la celda pasa de ~47px a ~114px, que es lo que hace falta para que
     "Barcelona" y el título de la actividad quepan. Sigue siendo la misma rejilla de
     bloques por día, solo que más ancha y con menos días por fila. */
  .mini-cal{grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; margin-bottom:.8rem;}
  .mini-cal .mc-dow{display:none;}          /* la cabecera D-L-M… solo significa algo a 7 columnas */
  .mini-cal .mc-day.empty{display:none;}    /* y los huecos de alineación semanal, tampoco */
  .mini-cal .mc-dow-in{display:inline; font-family:'JetBrains Mono',monospace; font-size:.58rem; color:var(--muted);}
  .mini-cal .mc-day.selected .mc-dow-in{color:rgba(255,255,255,.85);}
  .mini-cal .mc-day{min-height:56px; padding:.3rem .35rem; gap:2px;}
  .mini-cal .mc-num{font-size:.8rem;}
  .mini-cal .mc-icon{font-size:.78rem;}
  .mini-cal .mc-city{font-size:.62rem;}
  /* Dos líneas como máximo: un título largo ("Excursión Sintra/Cascais") estiraba toda
     la fila de la rejilla. */
  .mini-cal .mc-chip{
    font-size:.58rem; padding:1px 3px; line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:normal;
  }
}

/* dashboard/detalle switch dentro de un destino */
.subview-switch{display:flex; gap:.3rem; margin-bottom:1rem;}
.subview-switch button{
  flex:1; font-family:'Work Sans',sans-serif; font-weight:600; font-size:.82rem; padding:.55rem;
  border-radius:8px; border:1px solid var(--line); background:var(--white); cursor:pointer; color:var(--muted);
}
.subview-switch button.active{background:var(--azulejo-dark); color:var(--white); border-color:var(--azulejo-dark);}
.subview{display:none;}
.subview.active{display:block;}

/* agenda del dashboard / listado de días de destino */
.agenda-day, .daylist-item{display:flex; gap:.8rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line);}
.agenda-day:last-child, .daylist-item:last-child{border-bottom:none;}
.agenda-date, .daylist-date{flex:0 0 62px; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted); padding-top:.1rem;}
.agenda-icon{flex:0 0 28px; font-size:1.2rem; text-align:center;}
.agenda-body, .daylist-body{flex:1; min-width:0;}
.agenda-city, .daylist-body strong{font-weight:600; color:var(--azulejo-dark); font-size:.9rem;}
.agenda-items{font-size:.82rem; color:var(--muted); margin-top:.15rem;}
.agenda-items .ev{display:inline-block; background:var(--cream-2); border-radius:6px; padding:.12rem .5rem; margin:.15rem .3rem .15rem 0;}
.daylist-body p{margin:.25rem 0 0; font-size:.88rem;}

/* ---- Inicio ----
   Ya no hay orden por viewport que resolver: la pestaña es la agenda y nada más. Los
   cuatro tiles de totales se fueron (duplicaban Gastos) y el clima dejó de ser un bloque
   propio — ahora es una cifra en la misma línea del título. */
.inicio-stack{display:flex; flex-direction:column;}
.inicio-agenda{order:1;}

/* Título + clima en una sola línea. El clima nunca baja de renglón: es una cifra al lado
   de "Agenda", no una franja. */
.agenda-head{display:flex; align-items:baseline; gap:.6rem; flex-wrap:nowrap; margin-bottom:.6rem;}
.wnow{
  flex:0 1 auto; min-width:0; background:var(--cream-2); border:1px solid transparent;
  border-radius:7px; padding:.25rem .55rem; cursor:pointer; font:inherit; font-size:.8rem;
  color:var(--muted); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wnow strong{color:var(--ink); font-weight:600;}
.wnow:hover, .wnow.open{border-color:var(--azulejo); color:var(--ink);}

/* clima — franja discreta, no protagonista; oculta hasta que se toca la cifra */
.weather-row{display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 .8rem;}
.wchip{font-size:.85rem; color:var(--muted); background:var(--cream-2); border-radius:7px; padding:.4rem .7rem;}
.wchip strong{color:var(--ink); font-weight:600;}
/* La escala en curso (o la próxima, antes de salir). Es la información que salió del botón
   cuando este pasó a decir solo "Clima", así que se marca dentro del desplegable. */
.wchip.is-now{background:var(--white); border:1px solid var(--azulejo); padding:calc(.4rem - 1px) calc(.7rem - 1px);}
.wchip.is-now strong{color:var(--azulejo-dark);}

.budget-drill{display:none; margin-top:.6rem;}
.budget-drill.open{display:block;}
.clickable{cursor:pointer;}
.dayplan{display:none;}
.dayplan.active{display:block;}

/* ---- Itinerario → Final: línea de tiempo (CCP §10.2, elegida por K) ----
   Riel vertical continuo. Nudo lleno = estadía en una ciudad; nudo hueco = traslado.
   La ciudad y el hotel se escriben una vez por tramo. */
.tl-rail{position:relative; padding-left:1.65rem; margin-top:.4rem;}
.tl-rail::before{
  content:""; position:absolute; left:.44rem; top:.5rem; bottom:.5rem;
  width:2px; background:var(--line);
}
.tl-node{position:relative; margin-bottom:1rem;}
.tl-node:last-child{margin-bottom:.2rem;}
.tl-node::before{
  content:""; position:absolute; left:-1.4rem; top:.4rem; width:.75rem; height:.75rem;
  border-radius:50%; background:var(--azulejo); border:2px solid var(--cream); box-sizing:content-box;
}
.tl-hop::before{background:var(--cream); border:2px solid var(--ochre);}
.tl-city{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.06rem;
  color:var(--azulejo-dark); line-height:1.25;
}
.tl-hotel-line, .tl-hop-line{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:.6rem; flex-wrap:wrap; font-size:.92rem;
}
.tl-hotel{font-weight:600; color:var(--ink); text-decoration-color:var(--line);}
.tl-hop-txt{color:var(--muted); font-size:.88rem;}
.tl-when{
  font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--muted);
  margin-top:.12rem; font-variant-numeric:tabular-nums;
}
.tl-days{margin-top:.4rem; display:flex; flex-direction:column; gap:.24rem;}
.tl-ev{display:flex; gap:.6rem; align-items:baseline; font-size:.87rem;}
.tl-ev-day{
  font-family:'JetBrains Mono',monospace; font-size:.74rem; color:var(--muted);
  flex:0 0 1.9rem; font-variant-numeric:tabular-nums;
}
.tl-ev-txt{flex:1; min-width:0; color:var(--ink); text-decoration-color:var(--line);}
@media(max-width:640px){
  .tl-rail{padding-left:1.4rem;}
  .tl-city{font-size:1rem;}
  .tl-hotel-line, .tl-hop-line{font-size:.88rem;}
}
@media(min-width:641px){
  /* El vacío entre la descripción y el importe lo produce `justify-content:space-between`,
     que reparte hasta los BORDES DEL CONTENEDOR. Por eso acotar el riel (el intento
     anterior) no lo arreglaba: el hueco pasaba a ser el ancho del riel menos el contenido,
     ~500px en vez de ~900px, pero seguía ahí. Lo que hay que acotar es la propia línea.
     Con 22rem el importe queda a menos de ~170px del texto y los importes siguen
     alineados en columna, que es para lo que servía el space-between. */
  .tl-hotel-line, .tl-hop-line{max-width:22rem;}
}
/* ---- Itinerario ----
   Una vista a la vez, con pestañas, en todos los anchos. Lo que sobraba en pantalla ancha
   no era la pestaña sino que el panel quedaba pegado al borde izquierdo con el resto
   vacío: a partir de 901px se acota y se centra. Cada panel tiene su propio ancho porque
   su contenido no mide lo mismo — el riel es estrecho, la tabla no. */
@media(min-width:901px){
  #itin-real{max-width:27rem; margin-left:auto; margin-right:auto;}
  #itin-dia{max-width:58rem; margin-left:auto; margin-right:auto;}
  #itin-dia .tbl-wrap table{min-width:0;}
  /* Al centrar los paneles, las dos pestañas quedaron como dos barras de ~570px sobre un
     contenido mucho más estrecho. Se acotan al ancho del panel por defecto. */
  #itinTabs{max-width:27rem; margin-left:auto; margin-right:auto;}
}
/* "Día a día": diecisiete rayas horizontales pesaban más que los datos. Se sustituyen por
   bandas suaves, con más aire entre filas. Aplica a todos los anchos. */
#itin-dia table{font-size:.9rem;}
#itin-dia table td{border-bottom:none; padding:.5rem .7rem;}
#itin-dia table tr:nth-child(even) td{background:rgba(239,231,214,.55);}
#itin-dia table th{border-bottom:1px solid var(--line); padding-bottom:.45rem;}

/* Leyenda del riel, con los mismos puntos que dibuja la línea de tiempo. */
.tl-key{
  display:inline-block; width:.62rem; height:.62rem; border-radius:50%;
  background:var(--azulejo); position:relative; top:1px;
}
.tl-key.hop{background:var(--cream); border:2px solid var(--ochre);}

/* Itinerario → Final: bloques de estadía (agrupa noches consecutivas en el mismo hotel) */
.stay-block{border:1px solid var(--line); border-radius:var(--radius); padding:.9rem 1.1rem; margin-bottom:.8rem; background:var(--white);}
.stay-block.transit{background:var(--cream-2); border-style:dashed;}
.stay-header{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.4rem; margin-bottom:.3rem;}
.stay-dates{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--muted);}
.stay-city{font-weight:700; color:var(--azulejo-dark); font-size:1.02rem;}
.stay-hotel{font-size:.92rem; margin:.15rem 0;}
.stay-price{font-family:'JetBrains Mono',monospace; font-size:.85rem; color:var(--muted);}
.stay-sub{font-size:.84rem; color:var(--ink); margin:.35rem 0 0 0; padding-top:.35rem; border-top:1px dashed var(--line);}
.stay-sub-row{display:flex; gap:.5rem; margin-top:.2rem;}
.stay-sub-date{font-family:'JetBrains Mono',monospace; color:var(--muted); flex:0 0 56px;}

/* ideas dentro del calendario/agenda: línea punteada, color neutro, van al final */
.idea-item .ev, .mc-chip.idea-chip{
  border:1px dashed var(--muted); background:transparent; color:var(--muted); font-style:italic;
}
.mc-chip.idea-chip{padding:1px 4px;}

/* ---- Inicio: detalle del día e Ideas ----
   Las dos cajas eran <div class="card">: fondo blanco puro y 1.1rem de relleno, así que
   pesaban más que el resto de la pantalla y no encajaban con la paleta. Pasan a la crema
   de fondo, con tipografía y relleno a escala del resto de Inicio. */
#dayDetail{
  background:var(--cream-2); border:1px solid var(--line); border-radius:8px;
  padding:.7rem .85rem; margin-bottom:.9rem; font-size:.88rem;
}
#dayDetail .agenda-items{margin-top:.1rem;}
/* Sitio y dirección de la actividad: en el detalle del día sí caben (en el bloque del
   calendario no, por eso van aparte de la etiqueta del evento). */
#dayDetail .ev-sub{font-size:.82rem; color:var(--ink); margin:.2rem 0 0 .15rem;}
#dayDetail .ev-nota{font-size:.78rem; color:var(--muted); margin:.1rem 0 .3rem .15rem; line-height:1.35;}
#dayDetail .agenda-items .ev{background:var(--white);}

/* Ideas, ahora una pestaña propia dentro de Destinos. La barra de filtros ya no se acota:
   aquella regla existía para que dos desplegables no se estiraran a lo ancho de la página,
   y con chips el ancho lo fija el contenido. */
#ideasTable .done-check{margin-right:.5rem; vertical-align:middle;}
#ideasTable .idea-title{cursor:pointer;}
#ideasTable tr.is-done .idea-title{opacity:.5; text-decoration:line-through;}
#ideasTable tr.is-done td[data-label]{opacity:.55;}

/* ---- Marcar como hecho / visitado ----
   Un solo mecanismo, dos usos: las ideas de Inicio y las sugerencias de cada destino.
   Lo marcado no se borra — baja al final de su lista, se atenúa, y en el caso de las
   ideas también deja de aparecer en la agenda. */
.done-check{
  flex:0 0 auto; width:1.15rem; height:1.15rem; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; line-height:1; color:var(--good); margin-top:.15rem;
}
.done-check:hover{border-color:var(--good);}
.is-done .done-check{background:var(--good); border-color:var(--good); color:var(--white);}
.is-done .daylist-body, .is-done .sug-body{opacity:.5; text-decoration:line-through;}
.is-done .sug-body p{text-decoration:none;}
.daylist-item{align-items:flex-start; gap:.6rem;}

/* Sugerencias por destino */
.sug{display:flex; gap:.6rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line);}
.sug:last-child{border-bottom:none;}
.sug-body{flex:1; min-width:0;}
.sug-body strong{color:var(--azulejo-dark);}
.sug-meta{
  display:block; font-family:'JetBrains Mono',monospace; font-size:.66rem;
  text-transform:uppercase; letter-spacing:.03em; color:var(--muted); margin-top:.1rem;
}
.sug-body p{margin:.3rem 0 0; font-size:.9rem;}
.sug-note{color:var(--muted); font-size:.82rem !important;}

input[type=number]{
  width:88px; font-family:'JetBrains Mono',monospace; font-size:.85rem;
  border:1px solid var(--line); border-radius:5px; padding:.25rem .4rem; background:var(--cream);
}
textarea{
  font-family:'Work Sans',sans-serif; font-size:.9rem; border:1px solid var(--line);
  border-radius:5px; padding:.45rem .55rem; background:var(--cream); width:100%;
  color:var(--ink); line-height:1.45; resize:vertical; min-height:4.5em; box-sizing:border-box;
}
/* iOS no hace zoom al enfocar con 16px. Y en móvil el campo arranca más alto: la nota de
   la boda (ceremonia + recepción, ~205 caracteres) es el caso que K reportó y a 4,5em se
   quedaba cortada. */
@media(max-width:640px){ textarea{ font-size:16px; min-height:10em; } }
/* K, 29-sept (ronda 2): la nota de Gastos es casi siempre una línea corta ("Bus aeropuerto",
   "Five guys") — los 10em de arriba son para la nota de la boda (ceremonia+recepción,
   ~205 caracteres, el caso real que motivó esa regla) y le sobran por mucho aquí, empujando
   el resto de la tarjeta fuera de la pantalla. Selector propio, no se toca la regla general
   ni la nota que la motivó. */
@media(max-width:640px){ #qexp-notas, #exp-notas{ min-height:3.5em; } }
/* K, 29-sept (ronda 2): el modal de gasto en particular (más campos que Idea/Actividad —
   suma "USD" y, en edición, Conciliado) seguía sin caber sin scroll en los teléfonos más
   chicos (320-360px de alto de viewport corto, con la barra del navegador puesta). Recorte
   propio de #expModal, no del modal genérico — Idea/Actividad no lo necesitan y se quedan
   con el espaciado de siempre. */
@media(max-width:640px){
  #expModal .form-modal-box{padding:1.1rem;}
  #expModal .field-row, #expModal .field-pair{margin-bottom:.45rem;}
}

/* Tasa de referencia + exportar, encima de la tabla de gastos */
.fx-bar{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.6rem 0 .2rem;}
.fx-label{font-family:'JetBrains Mono',monospace; font-size:.64rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted);}
.fx-eq{font-size:.82rem; color:var(--muted);}
.fx-bar input[type=number]{width:5.5rem;}
.xls-btn{
  margin-left:auto; background:var(--azulejo); color:var(--white); border:none; border-radius:6px;
  padding:.4rem .8rem; font-family:'Work Sans',sans-serif; font-size:.8rem; font-weight:600; cursor:pointer;
}
.xls-btn:hover{background:var(--azulejo-dark);}
@media(max-width:640px){ .xls-btn{margin-left:0; width:100%; padding:.55rem;} }

input[type=text], input[type=date], input[type=time]{
  font-family:'Work Sans',sans-serif; font-size:.85rem; border:1px solid var(--line);
  border-radius:5px; padding:.25rem .5rem; background:var(--cream); width:100%; color:var(--ink);
}
input[type=date]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator{
  filter:opacity(.6);
}
select{font-family:'Work Sans',sans-serif; font-size:.85rem; border:1px solid var(--line); border-radius:5px; padding:.25rem .4rem; background:var(--cream);}
.reset-link{font-size:.78rem; color:var(--muted); cursor:pointer; text-decoration:underline;}

/* Barra de filtros (Gastos → Plan y → Registros).
   Antes eran dos grupos de catorce chips apilados en dos filas; en Registros quedaban
   idénticos a los botones del formulario de arriba y parecía el mismo control repetido. */
.filter-bar{display:flex; gap:.45rem .8rem; flex-wrap:wrap; align-items:center; margin:.6rem 0 .8rem;}
.filter-bar input[type=text]{flex:1 1 200px; min-width:0;}
/* Cada filtro es una fila: etiqueta + chips. La etiqueta no es decorativa — es lo que
   impide que en Registros estos chips se confundan con los del formulario de arriba, que
   fue el motivo por el que en su día se pasó a <select>. */
.filter-group{flex:1 1 100%; display:flex; align-items:center; gap:.5rem; min-width:0;}
.fg-label{
  flex:0 0 auto; font-family:'JetBrains Mono',monospace; font-size:.64rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
/* Chip de filtro: pastilla plana y pequeña. El del formulario es rectangular, relleno y
   más grande — a simple vista no son el mismo control. */
.filter-chips{flex:1 1 auto; flex-wrap:wrap; gap:.25rem; min-width:0;}
.filter-chips button{
  font-size:.72rem; padding:.16rem .5rem; border-radius:99px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
}
.filter-chips button:hover{border-color:var(--azulejo); color:var(--ink);}
.filter-chips button.active{background:var(--azulejo); color:var(--white); border-color:var(--azulejo);}
@media(max-width:640px){
  .filter-bar{gap:.35rem .5rem;}
  .filter-bar input[type=text]{flex:1 1 100%;}
  .filter-group{align-items:flex-start;}
  .fg-label{font-size:.58rem; padding-top:.22rem;}
  /* Auditoría sesión 16: a .14rem el chip medía 18,5px de alto — es el control que más se
     toca en Gastos e Ideas y es difícil de acertar con el pulgar. Sube a ~27px. */
  .filter-chips button{font-size:.68rem; padding:.3rem .55rem;}
  /* K, 29-sept (ronda 3): los chips de Categoría del formulario de gasto (exp-cat/qexp-cat)
     usan el .btn-group grande de siempre — nunca recibieron el mismo achique que ya tienen
     los chips de filtro arriba, y a 360px "Comida/bebidas" (ahora "Comida", ver catShortLabel
     en app.js) igual los dejaba en 3 líneas. Mismo tamaño que .filter-chips, mismo motivo. */
  #exp-cat button, #qexp-cat button{font-size:.68rem; padding:.3rem .55rem;}
}

/* Balance (Gastos → Balance): las cuatro cifras van en 2×2, no una debajo de otra.
   `.grid-2` colapsa a una sola columna por debajo de 760px, así que quedaban cuatro filas
   a lo alto y "Presupuesto vs. real por categoría" caía fuera de pantalla. La doble clase
   gana por especificidad, sin depender del orden.
   K, 30-sept: Plan (.pres-tiles) ahora usa el mismo patrón .stat-group que Balance — ver
   más abajo, reutiliza estas mismas clases tal cual, sin duplicarlas.
   K, 1-oct: cinco tiles (contra los tres de Balance) en el mismo esquema de 2 columnas
   dejaban el bloque demasiado alto — 625px en móvil, cinco tarjetas una debajo de otra.
   Mismo truco de especificidad que .bal-tiles.grid-2 (la clase doble gana sin depender del
   orden), con SU PROPIO ancho de columnas: 2 en móvil (3 filas: 2+2+1) y 3 desde 760px
   (2 filas: 3+2).
   K, 1-oct (ronda siguiente): K pidió 2 filas en vez de 3 EN MÓVIL TAMBIÉN, no solo
   escritorio (que ya estaba en 2 filas desde 760px, sin cambios aquí). Mismas 3 columnas a
   partir de ahora en todos los anchos -- 3+2 en vez de 2+2+1 -- con la densidad mobile de
   abajo (@media max-width:640px) apretada un poco más para que las 5 cifras de cada tile
   sigan legibles a 100px de ancho aproximados por columna en 360-390px (verificado con
   Playwright contra datos reales: sin texto cortado, sin superposición). */
.pres-tiles.grid-3{grid-template-columns:repeat(3,1fr); gap:.5rem;}
/* mismos .stat-group que Balance, un poco más compactos porque Plan tiene cinco tiles en
   vez de tres — vale para todos los anchos; el bloque @media(max-width:640px) de más abajo
   lo aprieta un poco más todavía para teléfono. */
.pres-tiles .stat-group{padding:.6rem .7rem;}
.pres-tiles .stat-group-title{margin-bottom:.2rem;}
.pres-tiles .stat-group-row{padding:.1rem 0;}
.pres-tiles .stat-group-total{margin-top:.2rem; padding-top:.3rem;}
.bal-tiles.grid-2{grid-template-columns:1fr 1fr;}
.stat-accent{background:#C68A2E14;}
#expBalance{font-size:1.1rem;}
/* K, 29-sept (ronda 2): "un tile por persona con sus tres cifras juntas (sin Compras,
   Compras, total), no un tile por número" — mismo fondo/radio que .stat, tres líneas
   dentro en vez de una. Reutiliza los tokens ya existentes (JetBrains Mono para la
   etiqueta y las líneas normales, Fraunces/azulejo-dark para el total, igual que .stat ya
   hacía) — ningún color ni fuente nueva. */
.stat-group{background:var(--cream-2); border-radius:var(--radius); padding:.75rem .9rem;}
.stat-group-title{font-family:'JetBrains Mono',monospace; font-size:.7rem; text-transform:uppercase; color:var(--muted); letter-spacing:.03em; margin-bottom:.3rem;}
.stat-group-row{display:flex; justify-content:space-between; align-items:baseline; font-size:.82rem; padding:.15rem 0; color:var(--ink);}
.stat-group-row .mono{font-family:'JetBrains Mono',monospace;}
.stat-group-total{border-top:1px solid var(--line); margin-top:.25rem; padding-top:.4rem; font-weight:700;}
.stat-group-total .mono{font-family:'Fraunces',serif; font-size:1.15rem; color:var(--azulejo-dark); font-weight:700;}
@media(max-width:640px){
  .bal-tiles.grid-2{gap:.4rem;}
  .bal-tiles .stat{padding:.5rem .45rem; border-radius:8px;}
  .bal-tiles .stat .big{font-size:1rem; line-height:1.2;}
  .bal-tiles .stat .lbl{font-size:.6rem; letter-spacing:0; line-height:1.2;}
  #expBalance{font-size:.8rem;}   /* "Sin saldo pendiente" es texto, no una cifra corta */
  .stat-group{padding:.55rem .6rem; border-radius:8px;}
  .stat-group-title{font-size:.6rem;}
  .stat-group-row{font-size:.72rem;}
  .stat-group-total .mono{font-size:.95rem;}
}

/* Gastos → Por día: selector de 16 días. Con .filter-chips normal (envuelve) ocupaba
   4 filas enteras en el móvil de K — foto real: "quedaron muy feos esos filtros así y
   mira todo el espacio que ocupan". Una sola fila con scroll horizontal, el mismo
   patrón que ya usa el toggle de Plan (.btn-group.nowrap.plan-toggle) más arriba. */
#diaSelector .filter-chips{
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity; padding-bottom:.2rem;
}
#diaSelector .filter-chips button{flex:0 0 auto; white-space:nowrap; scroll-snap-align:start;}

/* Filtros del pivot (Gastos → Plan → Categoría × Ciudad). */
.pivot-filters{display:flex; gap:.9rem; flex-wrap:wrap; align-items:center; margin-bottom:.6rem;}
.pivot-sep{border-left:1px solid var(--line); height:26px;}
/* K, 1-oct (ronda siguiente): Total(2p)/Kathe/Der y Gasto/Pago comparten fila propia —
   ver el media query de abajo para por qué existe este envoltorio. En escritorio tiene que
   verse EXACTAMENTE como antes: antes pivotView y pivotLens eran dos hijos directos de
   .pivot-filters, cada uno con flex:1 (la regla base de .btn-group) -- dos "acciones" de
   crecimiento repartiéndose el espacio junto con pivotBasis (otra). Envueltos en un solo
   .pivot-row2 quedarían con flex:0 1 auto por defecto (una sola acción, ninguna), así que
   pivotBasis (todavía flex:1) se comía TODO el espacio sobrante y .pivot-row2 se encogía
   hasta desbordar -- reproducido y visto con Playwright antes de este fix. flex:2 replica
   las dos acciones de crecimiento que representa (pivotView + pivotLens), dejando la
   proporción entre los tres grupos igual que antes de envolver nada. */
.pivot-row2{display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; flex:2 1 0%;}
@media(max-width:640px){
  /* K, 1-oct: la lente "Gasto de"/"Pagado por" sumó un tercer grupo -- Mixto/Estimado/Real,
     Total(2p)/Kathe/Der, Gasto de/Pagado por -- que la ronda anterior resolvió apilando cada
     grupo en su propia fila (3 filas). K reporta que 3 filas es demasiado alto en el
     teléfono ("no se ve bien"). Dos cambios juntos para bajar a 2 filas sin reintroducir el
     bug original (solapado/cortado):
     1) las etiquetas del tercer grupo se acortan ("Gasto de"→"Gasto", "Pagado por"→"Pago")
        -- solo el texto visible (labelFn en initButtonGroup), el valor interno que el resto
        del código compara (getButtonGroupValue==='Pagado por') no cambia, cero cambio de
        comportamiento.
     2) Total(2p)/Kathe/Der y Gasto/Pago se agrupan en un solo envoltorio (.pivot-row2) que
        es un hijo directo más de .pivot-filters -- así la columna de abajo apila SOLO dos
        cosas (Mixto/Estimado/Real, y el envoltorio), no tres, y dentro del envoltorio los
        dos grupos comparten una fila con su propio separador vertical, igual que en
        escritorio. Mixto/Estimado/Real se queda en su propia fila porque agregarlo al mismo
        envoltorio no cabía en 360-390px sin comprimir U obligarlo a su propia línea de
        todos modos (verificado con Playwright contra datos reales) -- shortening labels
        alone got two of the three groups onto one row, not all three; forcing it would
        have reintroduced the original overlap bug this was meant to fix. */
  .pivot-filters{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:.5rem;}
  .pivot-filters > .pivot-sep{display:block; border-left:none; border-top:1px solid var(--line); height:0; width:100%; margin:0;}
  .pivot-filters .btn-group{flex-wrap:wrap; gap:.25rem; min-width:0;}
  .pivot-filters .btn-group button{font-size:.7rem; padding:.32rem .4rem; min-width:0;}
  .pivot-row2{gap:.4rem; flex-wrap:wrap;}
  /* .btn-group's base rule (flex:1) is meant for siblings sharing one full-width row; nested
     two deep inside .pivot-row2 it was splitting the 288px-ish mobile width 50/50 between
     Total(2p)/Kathe/Der (3 buttons) and Gasto/Pago (2 buttons) regardless of how much each
     actually needs, wrapping Der onto its own line even though the two groups' real content
     fit the row together. Sized to actual content instead. */
  .pivot-row2 .btn-group{flex:0 1 auto;}
}

/* Traslados → Tramos: la nota de cada tramo es una fila propia que va de "Opción" a
   "Fuente". Como columna era una cadena larguísima que descuadraba la tabla en móvil. */
#tras-tramos tr.highlight td{border-bottom:none;}
.tramo-note td{color:var(--muted); font-size:.84rem; padding-top:.1rem;}
.tramo-note td:first-child{border-bottom:none;}
@media(max-width:640px){
  /* Seis columnas no caben en 352px de ninguna manera legible, así que el tramo pasa al
     mismo patrón de tarjetas que Reservas y Gastos: cada campo con su etiqueta y nada
     fuera de pantalla. La nota se pega debajo de su tarjeta en vez de quedar suelta. */
  #tras-tramos table.rwd tr.highlight{margin-bottom:0; border-radius:8px 8px 0 0; border-bottom:none;}
  #tras-tramos table.rwd tr.tramo-note{
    border-radius:0 0 8px 8px; border-top:none; padding-top:0; grid-template-columns:1fr;
  }
  #tras-tramos table.rwd tr.tramo-note td{color:var(--muted); font-size:.8rem;}
}
/* iOS hace zoom automático al enfocar un input con font-size menor a 16px — lo evitamos en móvil */
@media(max-width:640px){
  input[type=number], input[type=text], select{ font-size:16px; }
  .stub{ min-width:80px; }
  .card{ padding:.85rem 1rem; }
  .decision-card{ padding:.9rem 1rem; }
  .decision-card h3{ font-size:1.1rem; }
  .stat{ padding:.7rem .8rem; }
  .stat .big{ font-size:1.35rem; }
  /* K, 30-sept (items 3-4): Plan pasó de 4 .stat planos a 5 .stat-group (mismo patrón que
     Balance ya usa).
     K, 1-oct: cinco tiles piden más densidad que los tres de Balance — un poco más apretado
     que .stat-group/.bal-tiles por defecto, nunca al punto de perder una cifra. */
  .pres-tiles.grid-3{ gap:.35rem; margin-bottom:.7rem; }
  .pres-tiles .stat-group{ padding:.45rem .4rem; border-radius:8px; }
  /* K, 1-oct: 3 columnas a 360px dejan cada tile en ~110px -- "FALTA POR PAGAR" y "TOTAL
     ESTIMADO" alcanzaban a envolver a 2 líneas con el letter-spacing normal de .stat-group-title
     (.03em, pensado para tiles más anchos). Sin letter-spacing y un pelo más chico, entran en
     una sola línea sin perder legibilidad. */
  .pres-tiles .stat-group-title{ font-size:.55rem; margin-bottom:.15rem; letter-spacing:0; }
  .pres-tiles .stat-group-row{ font-size:.66rem; padding:.06rem 0; }
  .pres-tiles .stat-group-total{ margin-top:.15rem; padding-top:.25rem; }
  .pres-tiles .stat-group-total .mono{ font-size:.88rem; }
  .agenda-head{ gap:.4rem; margin-bottom:.4rem; }
  .wnow{ font-size:.68rem; padding:.2rem .4rem; border-radius:6px; }
  h2{ font-size:1.25rem; }
  h3{ font-size:1rem; }
  th,td{ padding:.4rem .45rem; font-size:.86rem; }
  table{ font-size:.84rem; }
  /* clima: la fila con scroll horizontal dejaba ver solo la primera ciudad y un trozo
     de la segunda — K lo reportó como "solo se ve 1/4 del clima". Rejilla de 2 columnas:
     las 4 ciudades (5 con Oporto en Plan B) caben completas sin scroll. */
  .weather-row{ display:grid; grid-template-columns:1fr 1fr; gap:.35rem; overflow:visible; }
  .wchip{ font-size:.72rem; padding:.3rem .45rem; line-height:1.3; }
  .wchip strong{ display:block; }
  .inicio-agenda{ order:1; }
  /* Destinos: seis pestañas (cinco ciudades + Ideas) en una sola línea. Columnas iguales
     ya no sirven: repartidas a partes iguales, todas miden lo que quepa y "Barcelona" —
     nueve caracteres de ancho fijo en JetBrains Mono, la más larga — se cortaba mientras
     "Ideas" desperdiciaba la mitad de su celda. En flex cada pestaña ocupa lo que mide su
     texto y el sobrante se reparte, así que las seis caben con margen. */
  #destTabs{ display:flex; gap:.1rem; }
  #destTabs button{ flex:1 1 auto; padding:.4rem .12rem; font-size:.6rem; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}

/* Por debajo de 360px (iPhone SE de 1ª generación y similares) un escalón más de cuerpo. */
@media(max-width:359px){
  #destTabs{ gap:.08rem; }
  #destTabs button{ padding:.4rem .08rem; font-size:.54rem; letter-spacing:-.01em; }
}

footer{text-align:center; font-size:.78rem; color:var(--muted); padding:1rem 1rem 1.4rem;}
.src-list{font-size:.85rem;}
/* Los enlaces 🔗 de las tablas de referencia medían 15px de alto en móvil. Se les da un
   área de toque razonable sin cambiar cómo se ven. */
@media(max-width:640px){
  td a{display:inline-block; padding:.3rem .2rem; min-height:22px;}
  /* Enlaces dentro de texto: el relleno vertical en un elemento inline agranda el área de
     toque sin mover el renglón, así que no cambia la maqueta. */
  .sug a, .sug-note a, p.small a, .dc-why a, a.small, .card li a{padding:.3rem .1rem;}
  .wnow{padding:.32rem .5rem;}
}
.src-list li{margin-bottom:.35rem;}
.small{font-size:.85rem; color:var(--muted);}
ul.clean{padding-left:1.1rem;}
ul.clean li{margin-bottom:.3rem;}
.badge-total{font-family:'JetBrains Mono',monospace; font-weight:700;}


/* subtítulo de tarjeta: solo existe en móvil (ver media query abajo) */
.rwd-sub{display:none;}

/* ================= MÓVIL: tablas de datos como tarjetas =================
   #trackerTable, #budgetTable y #expenseTable tienen 6–10 columnas. Dentro de un
   contenedor de 352px eso dejaba fuera de pantalla justo lo importante: en Reservas
   el precio y el enlace "Detalle" quedaban invisibles y había que arrastrar la tabla
   de lado para editarlos. En móvil cada fila pasa a ser una tarjeta y cada celda lleva
   su etiqueta (data-label), así no se pierde ninguna columna.
   Las tablas de referencia (Traslados, hoteles alternativos) y el pivot siguen con
   scroll horizontal: son matrices y ahí comparar de lado sí tiene sentido. */
@media(max-width:640px){
  table.rwd{border-collapse:separate; border-spacing:0; font-size:.86rem;}
  table.rwd tr:first-child{display:none;}          /* fila de encabezados */
  table.rwd tr{
    display:grid; grid-template-columns:auto 1fr; gap:.15rem .6rem;
    background:var(--white); border:1px solid var(--line); border-radius:8px;
    padding:.55rem .7rem; margin-bottom:.5rem;
  }
  table.rwd td{
    display:contents; border:none; padding:0;
  }
  table.rwd td::before{
    content:attr(data-label); grid-column:1;
    font-family:'JetBrains Mono',monospace; font-size:.62rem; text-transform:uppercase;
    letter-spacing:.03em; color:var(--muted); align-self:center; white-space:nowrap;
  }
  table.rwd td[data-label=""]::before{content:none;}
  /* la primera celda (el nombre) va a todo lo ancho, como título de la tarjeta */
  table.rwd td:first-child{display:block; grid-column:1/-1; font-weight:600; color:var(--azulejo-dark); margin-bottom:.2rem;}
  table.rwd td:first-child::before{content:none;}
  table.rwd input[type=number]{width:100%; max-width:130px;}
  /* celdas que se pliegan en el subtítulo del título, o que ocupan el ancho completo */
  table.rwd td.rwd-hide{display:none;}
  table.rwd td.rwd-bare{display:block; grid-column:1/-1; text-align:right; margin-top:.1rem;}
  table.rwd td.rwd-bare::before{content:none;}
  table.rwd td.rwd-full{display:block; grid-column:1/-1; color:var(--muted); font-size:.8rem; margin-bottom:.25rem;}
  table.rwd td.rwd-full::before{content:none;}
  /* K, 29-sept (ronda 6, item 4): "Debe"/"Notas" sin nada que decir ("—") solo ocupaban una
     fila entera de alto para no decir nada — se omiten del todo en la tarjeta, no en la tabla
     de escritorio (donde sí importa la columna vacía para que la fila no se desalinee). */
  table.rwd td[data-empty="1"]{display:none;}
  .rwd-sub{
    display:block; font-family:'JetBrains Mono',monospace; font-weight:400;
    font-size:.66rem; color:var(--muted); margin-top:.12rem; text-transform:uppercase; letter-spacing:.02em;
  }
  .tbl-wrap:has(> table.rwd){overflow-x:visible;}
  /* K, 29-sept (ronda 6, item 4): K reportó que en Registros solo cabían ~3 tarjetas por
     pantalla con mucho blanco desperdiciado. #expenseTable es la única de las tablas-tarjeta
     con 6+ filas de datos por registro, así que lleva su propio ajuste de densidad — el mismo
     criterio ya aplicado en la ronda de densidad de Gastos (tarea #69), sin tocar
     trackerTable/budgetTable que tienen menos filas y no lo necesitan. */
  #expenseTable.rwd{font-size:.8rem;}
  #expenseTable.rwd tr{gap:.08rem .6rem; padding:.4rem .6rem; margin-bottom:.35rem;}
  #expenseTable.rwd td::before{font-size:.58rem;}
  #expenseTable.rwd td:first-child{margin-bottom:.15rem;}
  /* el título de la pestaña ya lo indica el botón activo del menú */
  .panel > h2{display:none;}
}
/* precio por noche bajo el total — hoteles (K, sesión 9) */
.per-night{
  display:block; font-family:'JetBrains Mono',monospace; font-size:.68rem;
  color:var(--muted); margin-top:.1rem; white-space:nowrap;
}
.tl-pernight{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--muted);}

/* Importe diario editable junto al total, en el Plan (hoteles por noche, comida por día).
   En Real la misma cifra existe pero es de solo lectura: sale del total pagado. */
/* En reposo se lee como en el Itinerario — "1600 · $400/noche" — con el diario en el mismo
   renglón, pequeño y gris (hereda .tl-pernight), sin caja propia. Solo al tocarlo aparece
   el input, y entonces sí puede medir 16px sin que iOS haga zoom. */
.est-cell{display:inline-flex; align-items:baseline; flex-wrap:wrap; min-width:0;}
.est-cell .per-night{display:inline; margin-left:.45rem;}
.per-edit{display:inline-flex; align-items:baseline; gap:.15rem; margin-left:.45rem;}
.per-edit .daily-val{cursor:pointer; border-bottom:1px dotted var(--line);}
.per-edit .daily-val:hover{color:var(--ink); border-bottom-color:var(--muted);}
.per-edit input.est-daily{
  width:4.4rem; font-size:16px; padding:.05rem .25rem;
  font-family:'JetBrains Mono',monospace;
}

/* Mensaje de rechazo de un formulario. Mismo lenguaje visual que #pinGate .pin-error: no es
   un elemento nuevo de diseño, es el que ya existía, aplicado donde faltaba. */
.form-error{color:var(--paprika); font-size:.85rem; min-height:1.2em; margin-top:.7rem;}