/* ═══════════════════════════════════════════════════════════════
   Planifica tu viaje · itinerario de la Ruta 7
   Sobre patagonia.css + tema.css: aquí sólo el formulario y el riel.
   ═══════════════════════════════════════════════════════════════ */

/* patagonia.css fija html,body{height:100%}: aquí el documento sí scrollea. */
html:has(body.plan-page), body.plan-page{ height:auto; min-height:100%; }

.skip-link{
  position:fixed; top:8px; left:8px; z-index:2000;
  padding:9px 13px; border-radius:var(--r-s);
  background:var(--panel-solido); color:var(--texto);
  transform:translateY(-150%); transition:transform 160ms ease;
}
.skip-link:focus{ transform:none; }

.plan-envoltura{
  max-width:1180px; margin:0 auto;
  padding:calc(var(--barra-h) + 22px) 20px 72px;
  display:grid; grid-template-columns:376px 1fr; gap:26px; align-items:start;
}

/* ── Formulario ── */
.plan-form{
  position:sticky; top:calc(var(--barra-h) + 22px);
  padding:20px; border-radius:var(--r-l);
  background:var(--panel); border:1px solid var(--borde);
  backdrop-filter:blur(22px) saturate(160%); box-shadow:var(--sombra);
}
.plan-form h2{
  margin:0 0 4px; font-size:1.12rem; font-weight:600; letter-spacing:-.015em;
}
.plan-form .sub{ margin:0 0 18px; font-size:.76rem; color:var(--texto-3); line-height:1.5; }

.od{ display:flex; align-items:center; gap:10px; }
.od-campos{ position:relative; flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
/* Riel decorativo que une los dos selectores, como en un plano de metro. */
.od-campos::before{
  content:''; position:absolute; left:17px; top:34px; bottom:34px; width:2px;
  background:linear-gradient(180deg, var(--hielo), var(--texto-3));
  opacity:.45; border-radius:99px;
}
.od-campo{ position:relative; display:flex; align-items:center; gap:12px; }
.od-punto{
  width:14px; height:14px; border-radius:50%; flex:none; margin-left:10px;
  border:3px solid var(--hielo); background:var(--panel-solido); z-index:1;
}
.od-campo.destino .od-punto{ border-color:var(--texto-2); border-radius:3px; }
.od-campo select{
  flex:1; min-width:0; padding:12px 13px; font-size:.86rem; font-family:inherit;
  background:rgba(255,255,255,.045); border:1px solid var(--borde-fuerte);
  border-radius:var(--r-m); color:var(--texto); outline:none;
  transition:border-color var(--tr), box-shadow var(--tr);
}
[data-tema="claro"] .od-campo select{ background:#fff; }
[data-tema="claro"] .plan-form{
  background:rgba(255,255,255,.94);
}
[data-tema="claro"] .resumen,
[data-tema="claro"] .tarjeta-tramo{
  background:#fff;
}
.od-campo select:focus{ border-color:var(--hielo); box-shadow:0 0 0 3px var(--hielo-f); }
.od-campo select option{ background:var(--panel-solido); color:var(--texto); }

.btn-invertir{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--panel-solido); border:1px solid var(--borde-fuerte); color:var(--texto-2);
  transition:var(--tr);
}
.btn-invertir:hover{ color:var(--hielo); border-color:var(--hielo-b); transform:rotate(180deg); }
.btn-invertir svg{ width:16px; height:16px; }

.plan-form .btn.primario{
  width:100%; margin-top:16px; justify-content:center; padding:12px;
  font-size:.84rem; font-weight:600; color:#041018;
  background:linear-gradient(135deg, var(--hielo), #3f92ea); border-color:transparent;
}
[data-tema="claro"] .plan-form .btn.primario{ color:#fff; }
.plan-form .btn.primario:hover{ filter:brightness(1.08); }

.atajos{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }

/* ── Resumen ── */
.resumen{
  padding:18px 20px; border-radius:var(--r-l); margin-bottom:20px;
  background:var(--panel); border:1px solid var(--borde); box-shadow:var(--sombra);
}
.resumen-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.resumen-cab h2{ margin:0; font-size:1.16rem; font-weight:600; letter-spacing:-.015em; }
.resumen-cab .sentido{ font-size:.74rem; color:var(--texto-3); }

/* ── Riel del itinerario ── */
.itinerario{ list-style:none; margin:0; padding:0; }
.paso{ display:grid; grid-template-columns:58px 1fr; gap:14px; }

.riel{ position:relative; }
.riel::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:7px;
  transform:translateX(-50%); background:var(--c, var(--hielo)); border-radius:99px;
}
.riel.inicio::before{ top:26px; }
.riel.fin::before{ bottom:calc(100% - 26px); }
.riel.barcaza::before{
  background:repeating-linear-gradient(180deg, var(--c) 0 4px, transparent 4px 12px);
}

.punto{
  position:absolute; left:50%; top:26px; transform:translate(-50%,-50%); z-index:2;
  width:22px; height:22px; border-radius:50%;
  background:var(--panel-solido); border:4px solid var(--c, var(--hielo));
}
.punto.hito::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--c);
}
.punto.cruce::after{
  content:''; position:absolute; left:50%; top:50%; width:9px; height:2.4px;
  transform:translate(-50%,-50%); background:var(--texto-2);
  box-shadow:0 0 0 0 transparent;
}
.punto.cruce::before{
  content:''; position:absolute; left:50%; top:50%; width:2.4px; height:9px;
  transform:translate(-50%,-50%); background:var(--texto-2);
}

/* Aureola de obras sobre el riel del tramo */
.riel .aureola{
  position:absolute; left:50%; top:0; bottom:0; width:26px;
  transform:translateX(-50%); border-radius:99px;
  background:var(--obra); opacity:.18; animation:respirar-riel 2.6s ease-in-out infinite;
}
@keyframes respirar-riel{ 0%,100%{ opacity:.12; } 50%{ opacity:.36; } }

.riel .banderero{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:38px; height:38px; border-radius:50%;
  background:var(--panel-solido); border:2.5px solid var(--obra);
  display:grid; place-items:center; color:var(--obra);
}
.riel .banderero svg{ width:22px; height:22px; stroke:var(--texto); stroke-width:1.6; }
.riel .banderero .caja{ fill:var(--panel-solido); stroke:var(--texto); }
.riel .banderero .luz{ fill:#2c3338; stroke:none; }
.riel .banderero .luz.roja.on{ fill:#ff3d5a; }
.riel .banderero .luz.ambar.on{ fill:#ffb300; }
.riel .banderero .luz.verde{ fill:#1c3328; }
@media (prefers-reduced-motion: reduce){
  .riel .aureola{ animation:none; }
}

/* ── Contenido de cada paso ── */
.paso-hito .cuerpo{ padding:12px 0 14px; }
.paso-hito h3{ margin:0; font-size:1rem; font-weight:600; line-height:1.25; }
.paso-hito .meta{ margin:4px 0 0; font-size:.72rem; color:var(--texto-3); }
.paso-hito .ramales{ display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.ramal-chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:999px; font-size:.68rem; color:var(--texto-3);
  border:1px dashed var(--borde-fuerte);
}
.ramal-chip svg{ width:11px; height:11px; }

.paso-tramo .cuerpo{ padding:6px 0 10px; }
.tarjeta-tramo{
  padding:14px 16px; border-radius:var(--r-m);
  border:1px solid var(--borde); background:rgba(255,255,255,.028);
  transition:var(--tr);
}
[data-tema="claro"] .tarjeta-tramo{ background:rgba(20,40,70,.035); }
.tarjeta-tramo:hover{ border-color:var(--borde-fuerte); }
.tarjeta-tramo.con-obra{ border-color:color-mix(in srgb, var(--obra) 45%, transparent); }

.tt-cab{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.tt-km{ font-family:var(--mono); font-size:1rem; font-weight:600; }
.tt-dur{ font-size:.82rem; color:var(--texto-2); }
.tt-extra{ font-size:.74rem; font-weight:600; color:var(--aviso); margin-left:auto; }
.tt-extra.corte{ color:#ff6b7f; }
.tt-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.tag{
  display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:999px; font-size:.68rem; color:var(--texto-2);
  background:rgba(255,255,255,.05); border:1px solid var(--borde);
}
[data-tema="claro"] .tag{ background:rgba(20,40,70,.05); }
.tag svg{ width:11px; height:11px; }
.tag.carpeta{ color:var(--texto); border-color:var(--borde-fuerte); }
.tag.sin{ color:var(--aviso); border-color:rgba(240,178,63,.4); background:rgba(240,178,63,.1); }
.tag .tec{ font-family:var(--mono); font-size:.63rem; color:var(--hielo); }
.atractivo-link{
  text-decoration:none; cursor:pointer;
  transition:color var(--tr), border-color var(--tr), background var(--tr), transform var(--tr-fis);
}
.atractivo-link:hover{
  color:var(--texto); border-color:var(--hielo);
  background:var(--hielo-f); transform:translateY(-1px);
}
.atractivo-link:focus-visible,
.btn-invertir:focus-visible,
.plan-form .btn:focus-visible,
.chip:focus-visible,
.icono-btn:focus-visible{
  outline:3px solid var(--hielo-b); outline-offset:2px;
}

.plegable > summary{
  width:fit-content; cursor:pointer; color:var(--texto-3);
  font-size:.7rem; line-height:1.4; list-style:none;
}
.plegable > summary::-webkit-details-marker{ display:none; }
.plegable > summary::after{
  content:''; display:inline-block; width:6px; height:6px; margin-left:7px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); transition:transform var(--tr);
}
.plegable[open] > summary::after{ transform:rotate(-135deg) translate(-2px,-2px); }
.plegable > summary:hover{ color:var(--texto); }
.plegable > summary:focus-visible{ outline:3px solid var(--hielo-b); outline-offset:3px; border-radius:3px; }

.tt-obra{
  display:flex; gap:9px; margin-top:11px; padding:9px 12px; border-radius:var(--r-s);
  font-size:.73rem; line-height:1.5;
  background:color-mix(in srgb, var(--obra) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--obra) 36%, transparent);
  color:var(--texto-2);
}
.tt-obra b{ color:var(--texto); font-weight:600; }
.tt-obra svg{ width:14px; height:14px; flex:none; margin-top:2px; color:var(--obra); }

/* ── Estado vacío / avisos ── */
.plan-vacio{
  padding:56px 26px; text-align:center; color:var(--texto-3);
  font-size:.84rem; line-height:1.7;
  border:1px dashed var(--borde-fuerte); border-radius:var(--r-l);
}
.plan-vacio svg{ width:38px; height:38px; color:var(--texto-3); opacity:.55; margin-bottom:12px; }

.aviso-vivo{
  display:flex; gap:11px; padding:12px 15px; border-radius:var(--r-m); margin-bottom:18px;
  background:rgba(232,93,93,.1); border:1px solid rgba(232,93,93,.34);
  font-size:.76rem; color:var(--texto-2); line-height:1.55;
}
.aviso-vivo svg{ width:16px; height:16px; flex:none; margin-top:2px; color:#ff6b7f; }
.aviso-vivo b{ color:var(--texto); font-weight:600; }

/* El host controla el contexto visual; el planificador conserva sus controles. */
html[data-embed="true"]{ --barra-h:54px; }
html[data-embed="true"] .barra{ padding:0 12px; }
html[data-embed="true"] .marca-logo,
html[data-embed="true"] .marca-org,
html[data-embed="true"] .marca-txt p{ display:none; }
html[data-embed="true"] .marca-txt{ padding-left:0; border-left:0; }
html[data-embed="true"] .marca-txt h1{ margin:0; font-size:.9rem; }

/* ── Adaptable ── */
@media (max-width:980px){
  .plan-envoltura{ grid-template-columns:1fr; gap:20px; padding-top:calc(var(--barra-h) + 16px); }
  .plan-form{ position:static; }
}
@media (max-width:560px){
  .plan-envoltura{ padding-left:12px; padding-right:12px; }
  .paso{ grid-template-columns:44px 1fr; gap:11px; }
  .plan-form{ padding:16px; }
  .resumen{ padding:15px 16px; }
  /* Cuatro cifras no caben en 390 px: se parten en dos filas. */
  .resumen .cifras{ grid-template-columns:repeat(2, 1fr); }
}