/* ═══ Pestañas RUTA · FOTOS dentro de la guía (29 sept 2026) — fotos-viaje.js ═══
   Tokens de styles.css: un solo acento naranja, radio 0, Barlow Condensed en títulos y botones. */

.fv-tabs {
  display:flex; position:sticky; top:0; z-index:5; flex-shrink:0;
  background:var(--bg-base); border-bottom:1px solid var(--border);
}
.fv-tabs[hidden] { display:none; }
.fv-tab {
  flex:1; appearance:none; background:none; border:0; cursor:pointer;
  min-height:46px; padding:0 12px;
  font:700 16px/1 var(--font-cond); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted); border-bottom:3px solid transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.fv-tab[aria-selected="true"] { color:var(--text-primary); border-bottom-color:var(--accent); }
.fv-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.fv-count { font:700 13px/1 var(--font-cond); color:var(--accent); }
.fv-count:empty { display:none; }

.fv-pane { min-width:0; max-width:100%; }
.fv-pane[hidden] { display:none !important; }
.fv-pane-fotos { padding-bottom:24px; }
.fv-pad { padding-left:16px; padding-right:16px; }
.fv-note { font-size:13px; color:var(--text-muted); margin:0; }
.fv-pane-fotos > .fv-note { padding-top:16px; }

.fv-head { padding-top:14px; padding-bottom:4px; display:flex; flex-direction:column; gap:10px; }
.fv-add {
  appearance:none; border:0; cursor:pointer; align-self:stretch; min-height:46px;
  background:var(--accent); color:var(--text-on-accent);
  font:700 17px/1 var(--font-cond); letter-spacing:.06em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.fv-add:disabled { opacity:.5; cursor:default; }
.fv-add:focus-visible { outline:2px solid var(--text-primary); outline-offset:2px; }
.fv-progress { display:flex; flex-direction:column; gap:6px; }
.fv-progress[hidden] { display:none; }
.fv-progress-t { font-size:13px; color:var(--text-secondary); }
.fv-bar { height:4px; background:var(--border); }
.fv-bar i { display:block; height:100%; width:0; background:var(--accent); transition:width .3s; }

.fv-empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding-top:26px; padding-bottom:10px; }
.fv-empty-ic { color:var(--accent); display:flex; }
.fv-empty b { font:700 22px/1.1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; color:var(--text-primary); }
.fv-empty p { margin:0; font-size:14px; line-height:1.45; color:var(--text-secondary); max-width:34ch; }
.fv-empty .fv-note { color:var(--text-muted); font-size:13px; }

.fv-days { display:flex; flex-direction:column; gap:18px; padding-top:12px; }
.fv-day-h {
  margin:0 0 8px; display:flex; align-items:baseline; gap:6px;
  font:800 20px/1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; color:var(--text-primary);
}
.fv-day-h span { font-weight:600; font-size:15px; color:var(--text-muted); }
.fv-day-h em { font-style:normal; margin-left:auto; font:700 14px/1 var(--font-cond); color:var(--accent); }
.fv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
@media (min-width:769px) { .fv-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.fv-th { appearance:none; border:0; padding:0; margin:0; cursor:pointer; aspect-ratio:1; background:var(--bg-row); overflow:hidden; display:block; }
.fv-th img { width:100%; height:100%; object-fit:cover; display:block; }
.fv-th:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }

/* Visor a pantalla completa */
.fv-viewer {
  position:fixed; inset:0; z-index:3000; background:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fv-v-img { max-width:100%; max-height:calc(100% - 84px); object-fit:contain; flex:1; min-height:0; }
.fv-v-close {
  position:absolute; top:calc(12px + env(safe-area-inset-top, 0px)); right:12px; width:44px; height:44px;
  background:var(--bg-base); border:1px solid var(--border); color:var(--text-primary); font-size:18px; cursor:pointer;
}
.fv-v-bar {
  width:100%; display:flex; align-items:center; gap:8px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background:var(--bg-base); border-top:1px solid var(--border);
}
.fv-v-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.fv-v-info b { font:700 16px/1.1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; color:var(--text-primary); }
.fv-v-info span { font-size:13px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fv-v-info a { color:var(--accent); text-decoration:none; display:inline-flex; align-items:center; gap:3px; vertical-align:-2px; }
.fv-v-info em { font-style:normal; font-size:12px; color:var(--text-muted); }
.fv-v-nav, .fv-v-del {
  width:44px; height:44px; flex:none; cursor:pointer;
  background:none; border:1px solid var(--border); color:var(--text-primary);
  font:700 26px/1 var(--font-cond); display:inline-flex; align-items:center; justify-content:center;
}
.fv-v-nav:disabled { opacity:.3; cursor:default; }
.fv-v-del { color:var(--text-muted); }

/* Con la pestaña FOTOS, en el móvil el mapa se encoge (las fotos necesitan sitio) */
@media (max-width:768px) {
  .itin-view .itin-map-col { transition:flex-basis .25s, height .25s; }
  .itin-view.fv-map-small .itin-map-col { flex:0 0 24vh; height:24vh; }
  .itin-view.fv-map-small ~ .itin-action-bar, body:has(.itin-view.fv-map-small) .itin-action-bar { display:none; }
}

/* ── VÍDEO y ÁLBUM (caso 14 paso 3): el motor va en un iframe fijo colocado encima del hueco ── */
.fv-media-on { display:flex !important; flex-direction:column; overflow:hidden !important; }
.fv-media-on .fv-tabs { flex:none; }
.fv-pane-media { flex:1; min-height:0; }
.fv-media-holder { position:fixed; z-index:950; visibility:hidden; pointer-events:none; background:var(--bg-base); }
.fv-media-holder.on { visibility:visible; pointer-events:auto; }
.fv-media-frame { width:100%; height:100%; border:0; display:block; background:var(--bg-base); }
@media (max-width:768px) {
  .itin-view.fv-map-none .itin-map-col { flex:0 0 0; height:0; overflow:hidden; }
  body:has(.itin-view.fv-map-none) .itin-action-bar { display:none; }
  /* Sin mapa, la ✕ de cerrar va sobre las pestañas: dejarle sitio */
  .itin-view.fv-map-none .fv-tabs { padding-left:64px; }
}
@media (max-width:380px) { .fv-tab { font-size:14px; padding:0 6px; letter-spacing:.05em; } }

/* Aviso flotante: cómo va el vídeo mientras usas la app */
.fv-gen-pill {
  position:fixed; left:50%; transform:translateX(-50%); z-index:1300;
  bottom:calc(56px + 16px + env(safe-area-inset-bottom, 0px));
  appearance:none; border:1px solid var(--accent); cursor:pointer; min-height:44px; padding:0 18px;
  background:var(--bg-base); color:var(--text-primary);
  font:700 15px/1 var(--font-cond); letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 4px 16px rgba(0,0,0,.45); white-space:nowrap;
}
.fv-gen-pill.done { background:var(--accent); color:var(--text-on-accent); }
.fv-gen-pill[hidden] { display:none; }
.fv-gen-badge {
  position:absolute; top:-2px; left:calc(50% + 13px); z-index:2; font-style:normal; cursor:pointer;
  min-width:34px; height:20px; padding:0 5px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-base); color:var(--accent); border:1.5px solid var(--accent);
  font:700 12px/1 var(--font-cond); letter-spacing:.02em; pointer-events:auto;
}
.fv-gen-badge::before { content:''; position:absolute; inset:-10px -8px; } /* más fácil de tocar */
.fv-gen-badge.done { background:var(--accent); color:var(--text-on-accent); min-width:22px; animation:fvBadge 1.4s ease-in-out infinite; }
@keyframes fvBadge { 50% { transform:scale(1.18); } }

/* "Tu vídeo ya está montado" tras subir fotos */
.fv-ready {
  appearance:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
  display:flex; align-items:center; gap:12px; width:calc(100% - 32px); margin:10px 16px 0;
  background:var(--bg-row); border:1px solid var(--border); border-left:3px solid var(--accent); padding:12px 14px;
}
.fv-ready > span:nth-child(2) { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.fv-ready b { font:700 17px/1.1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; color:var(--text-primary); }
.fv-ready span span { font-size:13px; color:var(--text-muted); }
.fv-ready-play { width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--text-on-accent); }
.fv-ready-go { color:var(--accent); font:700 20px/1 var(--font-cond); }

/* ── FOTOS SIN VIAJE (caso 14 paso 4): sustituye a la Galería ── */
.fv-stray-strip {
  display:flex; align-items:center; gap:12px; margin:0 16px 14px; padding:12px 14px; min-height:56px; cursor:pointer;
  background:var(--bg-row); border:1px solid var(--border); color:var(--text-primary);
}
.fv-stray-strip[hidden] { display:none; }
/* Vídeo sin ruta (1 oct 2026): la fila destaca en naranja y dentro hay dos botones grandes */
.fv-stray-strip-vid { border-color:var(--accent); border-left-width:4px; }
.fv-stray-strip-vid .fv-stray-ic { color:var(--accent); }
.fv-stray-acts { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.fv-stray-go-vid, .fv-stray-up { min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 10px; cursor:pointer; font:700 16px/1.1 var(--font-cond); letter-spacing:.04em; text-transform:uppercase; text-align:center; }
.fv-stray-go-vid { border:0; background:var(--accent); color:var(--text-on-accent); }
.fv-stray-go-vid:disabled { opacity:.5; }
.fv-stray-acts:has(.fv-stray-up[hidden]) { grid-template-columns:1fr; }
.fv-stray-up[hidden] { display:none; }
.fv-stray-up { border:1px solid var(--border); background:var(--bg-row); color:var(--text-primary); }
.fv-stray-up svg { width:22px; height:22px; }
.fv-stray-strip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.fv-stray-ic { color:var(--text-muted); display:flex; flex:none; }
.fv-stray-ic svg { width:22px; height:22px; }
.fv-stray-txt { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.fv-stray-txt b { font:700 18px/1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; }
.fv-stray-txt span { font-size:12px; color:var(--text-muted); }
.fv-stray-go { color:var(--accent); font:700 20px/1 var(--font-cond); flex:none; }

.fv-stray { padding:16px 16px 90px; max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.fv-stray-title { font:800 clamp(40px,11vw,72px)/.9 var(--font-cond); text-transform:uppercase; margin:0; color:var(--text-primary); }
.fv-stray-title span { color:var(--accent); }
.fv-stray-lede { margin:0; color:var(--text-secondary); font-size:15px; line-height:1.45; }
.fv-day-pick { appearance:none; background:none; border:0; padding:0; cursor:pointer; width:100%; text-align:left; }
.fv-pick { position:relative; }
.fv-pick i { position:absolute; top:6px; right:6px; width:22px; height:22px; border:2px solid #fff; background:rgba(0,0,0,.35); }
.fv-pick.on img { opacity:.55; }
.fv-pick.on i { background:var(--accent); border-color:var(--accent); }
.fv-pick.on i::after { content:''; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--text-on-accent); border-width:0 2px 2px 0; transform:rotate(45deg); }
.fv-stray-bar {
  position:fixed; left:0; right:0; z-index:1000; bottom:calc(56px + env(safe-area-inset-bottom, 0px)); /* debajo del botón SALMA (1101) */
  display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--bg-base); border-top:1px solid var(--border);
}
.fv-stray-bar[hidden] { display:none; }
.fv-stray-bar > span { flex:1; font:700 16px/1 var(--font-cond); text-transform:uppercase; letter-spacing:.04em; color:var(--text-primary); }
.fv-stray-del { width:44px; height:44px; background:none; border:1px solid var(--border); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.fv-stray-vid { min-height:44px; padding:0 12px; background:none; border:1px solid var(--accent); color:var(--accent); cursor:pointer; font:700 16px/1 var(--font-cond); letter-spacing:.05em; text-transform:uppercase; }
.fv-stray-move { min-height:44px; padding:0 16px; border:0; cursor:pointer; background:var(--accent); color:var(--text-on-accent); font:700 16px/1 var(--font-cond); letter-spacing:.05em; text-transform:uppercase; }

/* Vídeo sin guía: el editor de vídeo a pantalla completa con las fotos elegidas */
.fv-vidsg { position:fixed; inset:0; z-index:1200; background:var(--bg-base); display:flex; flex-direction:column; }
.fv-vidsg-h { padding:8px 12px; border-bottom:1px solid var(--border); }
.fv-vidsg iframe { flex:1; width:100%; border:0; }

/* Hoja "¿A qué viaje?" */
.fv-sheet { position:fixed; inset:0; z-index:3000; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; }
.fv-sheet-box { width:100%; max-width:560px; max-height:75vh; display:flex; flex-direction:column; background:var(--bg-base); border-top:3px solid var(--accent); padding-bottom:env(safe-area-inset-bottom, 0px); }
.fv-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); }
.fv-sheet-head b { font:800 22px/1 var(--font-cond); text-transform:uppercase; color:var(--text-primary); }
.fv-sheet-x { width:44px; height:44px; background:none; border:1px solid var(--border); color:var(--text-primary); font-size:18px; cursor:pointer; }
.fv-sheet-list { overflow-y:auto; padding:6px 0 12px; }
.fv-sheet-list .fv-note { padding-top:12px; }
.fv-sheet-item { appearance:none; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border-subtle); padding:14px 16px; cursor:pointer; display:flex; flex-direction:column; gap:2px; color:inherit; font:inherit; }
.fv-sheet-item:disabled { opacity:.5; }
.fv-sheet-item b { font:700 18px/1.1 var(--font-cond); text-transform:uppercase; color:var(--text-primary); }
.fv-sheet-item span { font-size:13px; color:var(--text-muted); }

/* ── Fotos intrusas: "no parecen de este viaje" ── */
.fv-intrusas {
  appearance:none; cursor:pointer; font:inherit; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:calc(100% - 32px); margin:10px 16px 0; padding:12px 14px !important; min-height:48px;
  background:var(--bg-row); border:1px solid var(--accent); color:var(--text-primary);
}
.fv-intrusas b { font:700 16px/1.1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; }
.fv-intrusas span { color:var(--accent); font:700 14px/1 var(--font-cond); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.fv-review { margin-top:12px; padding-top:14px; padding-bottom:14px; background:var(--bg-row); border-top:3px solid var(--accent); border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.fv-review-t { font:800 20px/1.1 var(--font-cond); text-transform:uppercase; letter-spacing:.03em; color:var(--text-primary); }
.fv-review p { margin:0; font-size:14px; line-height:1.45; color:var(--text-secondary); }
.fv-review-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; }
.fv-review-why {
  position:absolute; left:0; right:0; bottom:0; padding:4px 5px; background:rgba(13,15,16,.82);
  font:600 11px/1.2 var(--font-body); color:var(--text-primary); text-align:left;
}
.fv-review-btns { display:flex; flex-direction:column; gap:8px; }
.fv-review-alt {
  appearance:none; cursor:pointer; min-height:44px; background:none; border:1px solid var(--border); color:var(--text-primary);
  font:700 15px/1 var(--font-cond); letter-spacing:.05em; text-transform:uppercase;
}
.fv-review-btns .fv-add { align-self:stretch; }

/* Miniaturas de fotos en el mapa de la guía (solo si el mapa cae a Leaflet; en Google van como icono) */
.fv-map-thumb img { width:40px; height:40px; object-fit:cover; border:3px solid var(--accent); display:block; box-sizing:border-box; }