/* ═══ TU MUNDO dentro de la app (29 sept 2026) — tu-mundo.js ═══
   Tokens de styles.css: un solo acento naranja, radio 0, Barlow Condensed para cifras y títulos. */

/* Franja arriba de Mis Viajes */
.tm-strip {
  display:flex; align-items:center; gap:12px;
  margin:0 16px 14px; padding:12px 14px;
  background:var(--bg-row); border:1px solid var(--border); border-left:3px solid var(--accent);
  color:var(--text-primary); cursor:pointer; min-height:56px;
}
.tm-strip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-strip-ic { color:var(--accent); display:flex; flex:none; }
.tm-strip-txt { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.tm-strip-txt b { font:700 18px/1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; }
.tm-strip-txt span { font-size:12px; color:var(--text-muted); }
.tm-strip-nums { display:flex; gap:16px; flex:none; }
.tm-strip-nums > span { display:flex; flex-direction:column; line-height:1; }
.tm-strip-nums b { font:800 24px/1 var(--font-cond); color:var(--accent); font-variant-numeric:tabular-nums; }
.tm-strip-nums i { font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-top:3px; }
.tm-strip-flags { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:clip; font-size:16px; text-align:right; }
.tm-strip-go { color:var(--accent); font:700 20px/1 var(--font-cond); flex:none; }
@media (max-width:380px) { .tm-strip-flags { display:none; } .tm-strip-nums { gap:12px; flex:1; } }

/* Pantalla completa */
.tm-screen { padding:16px 16px 24px; display:flex; flex-direction:column; gap:26px; max-width:980px; margin:0 auto; }
.tm-screen section { display:flex; flex-direction:column; gap:10px; }
.tm-back {
  align-self:flex-start; appearance:none; background:none; border:0; padding:4px 0; cursor:pointer;
  color:var(--text-muted); font:700 14px/1 var(--font-cond); letter-spacing:.06em; text-transform:uppercase;
}
.tm-head { display:flex; flex-direction:column; gap:6px; margin-top:-10px; }
.tm-title { font:800 clamp(44px,12vw,80px)/.9 var(--font-cond); text-transform:uppercase; margin:0; color:var(--text-primary); }
.tm-title span { color:var(--accent); }
.tm-lede { color:var(--text-secondary); margin:0; font-size:15px; line-height:1.45; max-width:62ch; }
.tm-h { font:700 22px/1.05 var(--font-cond); text-transform:uppercase; letter-spacing:.04em; margin:0; color:var(--text-primary); }
#tm-body { display:flex; flex-direction:column; gap:26px; }
#tm-body[hidden] { display:none; }

.tm-big { display:grid !important; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px !important; background:var(--border); border:1px solid var(--border); }
.tm-big div { background:var(--bg-row); padding:14px 16px; display:flex; flex-direction:column; gap:2px; font-variant-numeric:tabular-nums; }
.tm-big b { font:800 42px/1 var(--font-cond); color:var(--accent); }
.tm-big span { font:600 11px/1.2 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }

.tm-mapw { border:1px solid var(--border); background:#0b1216; gap:0 !important; }
.tm-mapw canvas { display:block; width:100%; height:auto; }
.tm-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--text-muted); padding:8px 10px; border-top:1px solid var(--border); }
.tm-legend i { display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px; }

.tm-flags { display:flex; flex-wrap:wrap; gap:6px; }
.tm-flags span { background:var(--bg-row); border:1px solid var(--border); padding:6px 10px; font-size:14px; display:inline-flex; gap:6px; align-items:center; color:var(--text-primary); }
.tm-flags span b { font-size:20px; line-height:1; }

.tm-recs { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.tm-rec { background:var(--bg-row); border:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.tm-k { font:600 11px/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.tm-v { font:800 26px/1.05 var(--font-cond); text-transform:uppercase; overflow-wrap:anywhere; color:var(--text-primary); }
.tm-s { font-size:13px; color:var(--text-muted); }

.tm-btn {
  appearance:none; border:0; padding:13px 18px; min-height:44px; cursor:pointer; align-self:flex-start;
  background:var(--accent); color:var(--text-on-accent);
  font:700 16px/1 var(--font-cond); letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.tm-btn--ghost { background:transparent; color:var(--text-primary); border:1px solid var(--border); margin-top:6px; }
.tm-btn:disabled { opacity:.6; }
.tm-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-note { font-size:13px; color:var(--text-muted); margin:0; }
.tm-note:empty { display:none; }
.tm-card { max-width:260px; border:1px solid var(--border); }
.tm-card img { display:block; width:100%; }

.tm-timeline { display:flex; flex-direction:column; gap:22px; }
.tm-year { display:flex; flex-direction:column; gap:10px; }
.tm-year h3 { font:800 32px/1 var(--font-cond); margin:0; color:var(--accent); }
.tm-trips { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.tm-trip { appearance:none; text-align:left; cursor:pointer; padding:0; font:inherit; color:inherit; background:var(--bg-row); border:1px solid var(--border); display:flex; flex-direction:column; min-width:0; }
.tm-trip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-ph { aspect-ratio:16/10; background:#222 center/cover no-repeat; }
.tm-tx { padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.tm-tx b { font:700 17px/1.1 var(--font-cond); text-transform:uppercase; overflow-wrap:anywhere; color:var(--text-primary); }
.tm-tx span { font-size:12px; color:var(--text-muted); }
/* Guías sin fotos: "Ya lo hice" */
.tm-pend-sec { margin-top:18px; border:1px solid var(--border); }
.tm-pend-sec summary { cursor:pointer; padding:12px 14px; min-height:44px; box-sizing:border-box; font:700 16px/1.2 var(--font-cond); letter-spacing:.04em; text-transform:uppercase; color:var(--text-primary); }
.tm-pend-sec summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-pend { display:flex; flex-direction:column; }
.tm-pend-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--border); }
.tm-pend-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tm-pend-t b { font:700 15px/1.15 var(--font-cond); text-transform:uppercase; overflow-wrap:anywhere; color:var(--text-primary); }
.tm-pend-t span { font-size:12px; color:var(--text-muted); }
.tm-chk {
  appearance:none; flex:none; min-height:40px; padding:0 14px; cursor:pointer;
  background:transparent; color:var(--text-primary); border:1px solid var(--border);
  font:700 14px/1 var(--font-cond); letter-spacing:.04em; text-transform:uppercase;
}
.tm-chk[aria-pressed="true"] { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); }
.tm-chk:disabled { opacity:.6; }
.tm-chk:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.tm-next { display:flex; flex-wrap:wrap; gap:6px; }
.tm-next span { border:1px dashed var(--border); padding:6px 10px; font-size:14px; color:var(--text-muted); }

/* Casa (récord "el punto más lejano de casa") */
.tm-home { display:flex; gap:8px; margin-top:8px; }
.tm-home-in {
  flex:1; min-width:0; min-height:44px; padding:0 12px; font:500 15px var(--font-body);
  background:var(--bg-base); color:var(--text-primary); border:1px solid var(--border);
}
.tm-home-in:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.tm-home .tm-btn { align-self:auto; padding:0 16px; }
.tm-link {
  appearance:none; background:none; border:0; padding:8px 0 0; cursor:pointer; align-self:flex-start;
  color:var(--accent); font:600 13px/1.2 var(--font-body); display:inline-flex; align-items:center; gap:5px;
}
.tm-home-msg:empty { display:none; }

/* Estado en las tarjetas de Mis Viajes (1 oct 2026) */
.viaje-card-st { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.vcs { display:inline-flex; align-items:center; min-height:28px; padding:0 9px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font:700 13px/1 var(--font-cond); letter-spacing:.04em; text-transform:uppercase; }
.vcs-on { color:var(--text-primary); }
.vcs-ok { color:var(--accent); border-color:var(--accent); }
button.vcs-add { cursor:pointer; color:var(--text-on-accent); background:var(--accent); border-color:var(--accent); }
button.vcs-add:disabled { opacity:.6; }