/* Cleared Go · el panel de la mudanza (/mundo), 2026-10-01.
   La composición aprobada (produccion/03-composiciones.html, «Panel · escritorio» y «Panel ·
   teléfono»): tres columnas —la consulta, el globo, la respuesta— y en el teléfono una, en el
   orden de la pregunta. Usa los tokens de estilo.css (papel, tinta, acento, bien, aviso, mal), así
   que el tema oscuro sale solo. El panel es un tablero, no un artículo: en escritorio ocupa la
   pantalla y cada columna rueda por su cuenta, como la comparación (instrumento.css). */

.cuerpo-panel .cab-in { max-width: none; }
.pn [hidden], .pn-inst[hidden], [data-vistas][hidden] { display: none !important; }

.pn {
  max-width: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(330px, 400px);
  grid-template-areas: "pestanas pestanas pestanas" "consulta centro respuesta";
  grid-template-rows: auto 1fr;
  min-height: calc(100vh - 58px);
  min-height: calc(100svh - 58px);
}
.pn-pestanas { grid-area: pestanas; }
.pn-consulta { grid-area: consulta; }
.pn-centro { grid-area: centro; }
.pn-respuesta { grid-area: respuesta; }

/* ── Las pestañas: las cuatro palabras de la promesa, cada una con su pregunta ── */
.pn-pestanas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: var(--regla) solid var(--tinta);
  position: sticky; top: 0; z-index: 5; background: var(--papel);
}
.pn-pestanas [role="tab"] {
  font: inherit; cursor: pointer; background: transparent; color: var(--tinta-3);
  border: 0; border-right: 1px solid var(--pelo); padding: 12px 10px 11px; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
}
.pn-pestanas [role="tab"]:last-child { border-right: 0; }
.pn-pestanas [role="tab"] small { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--tenue); }
.pn-pestanas [role="tab"]:hover { color: var(--tinta); }
.pn-pestanas [role="tab"][aria-selected="true"] { background: var(--tinta); color: var(--papel); }
.pn-pestanas [role="tab"][aria-selected="true"] small { color: var(--papel); opacity: 0.8; }
.pn-pestanas [role="tab"]:focus-visible { outline: 3px solid var(--acento); outline-offset: -3px; }

/* ── Las columnas ── */
.pn-col { min-width: 0; padding: 18px clamp(14px, 1.6vw, 22px) 26px; }
.pn-consulta { border-right: var(--regla) solid var(--tinta); }
.pn-respuesta { border-left: var(--regla) solid var(--tinta); }
.pn-centro { display: flex; flex-direction: column; }

.pn-titulo { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 8px; text-wrap: balance; }
.pn-titulo span { color: var(--tinta-3); }
.pn-bajada { margin: 0 0 18px; font-size: 15px; color: var(--tinta-2); }
.pn-consulta .campos { grid-template-columns: 1fr; }
.pn-atajos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 0; font-size: 12px; color: var(--tenue); }
.pn-atajos span { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-right: 2px; }
.pn-atajos button {
  font: inherit; font-size: 13px; cursor: pointer; background: transparent; color: var(--tinta-2);
  border: 1.5px solid var(--pelo); padding: 6px 10px; min-height: 36px;
}
.pn-atajos button:hover { color: var(--tinta); border-color: var(--tinta); }

/* El globo, en el centro: grande en escritorio, una franja en el teléfono. */
.pn-globo { flex: 1; display: flex; align-items: center; justify-content: center; }
.pn-globo .globo { width: 100%; }
.pn-globo .globo canvas { display: block; width: 100%; height: clamp(320px, calc(100vh - 210px), 760px); height: clamp(320px, calc(100svh - 210px), 760px); }

/* La respuesta */
.pn-respuesta .res { margin-top: 0; }
.pn-respuesta .pm-bloque { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--pelo); }
.pn-respuesta .pm-bloque h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.pm-nota { font-size: 14px; color: var(--tinta-2); margin: 6px 0; }
.pm-fuente { font-size: 12px; color: var(--tenue); margin: 8px 0 0; }
.pn-cargando { color: var(--tenue); }
.pn-fallo { color: var(--mal); }
.pn-ojo { border-left: 3px solid var(--aviso); padding-left: 12px; }

/* El visado según el pasaporte */
.pn-visa-res { display: flex; align-items: baseline; gap: 10px; border: 3px solid var(--aviso); padding: 10px 12px; }
.pn-visa-res[data-tono="bien"] { border-color: var(--bien); }
.pn-visa-res[data-tono="mal"] { border-color: var(--mal); }
.pn-visa-res b { font-size: 19px; font-weight: 900; letter-spacing: -0.02em; }
.pn-visa-res span { font-size: 14px; color: var(--tinta-2); }
.pn-etq { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3); margin: 8px 0 6px; }
.pn-select { font: inherit; font-size: 15px; width: 100%; min-height: 44px; padding: 8px 10px; color: var(--tinta); background: var(--papel); border: 0; border-bottom: 2px solid var(--tinta); }
.pn-boton, .pn-enlace {
  font: inherit; cursor: pointer; font-size: 14px; font-weight: 700; min-height: 44px; padding: 0 14px;
  background: var(--tinta); color: var(--papel); border: 2px solid var(--tinta); text-decoration: none;
  display: inline-flex; align-items: center;
}
.pn-enlace { background: transparent; color: var(--tinta); }

/* Los proveedores: siempre con su etiqueta de comisión, nunca como respuesta oficial. */
.prov { border: 1.5px solid var(--pelo); padding: 12px 12px 10px; margin: 10px 0 0; }
.prov-que { margin: 0 0 8px; font-size: 14px; color: var(--tinta-2); }
.prov-ir {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  background: var(--acento); color: #fff; font-weight: 800; font-size: 14px; text-decoration: none;
}
.prov-ir:hover { background: var(--acento-osc); }
.prov-etq { margin: 8px 0 0; font-size: 11.5px; color: var(--tenue); letter-spacing: 0.02em; }

/* Schengen dentro de Quedarte */
.pn-schengen .tramos { border: 0; padding: 0; margin: 12px 0 0; }
.pn-schengen legend { font-weight: 800; font-size: 14px; padding: 0; }
.pn-schengen .campos-refina { grid-template-columns: 1fr 1fr; }

/* En Comparar manda la retícula de la comparación (instrumento.css): sus columnas ya traen su
   margen y sus filetes, y los del panel los duplicaban. */
.pn[data-vista="comparar"] .pn-col { padding: 0; border-left: 0; border-right: 0; }
.pn[data-vista="comparar"] .pn-inst > .inst-col { height: 100%; }

/* Debajo del panel: las preguntas y lo que esto es */
.pn-abajo { max-width: 860px; margin: 40px auto 0; padding-inline: clamp(16px, 5vw, 32px); }
.pn-faq details summary { cursor: pointer; list-style: none; }
.pn-faq details summary::-webkit-details-marker { display: none; }
.pn-faq details summary h2 { display: inline; }
.pn-faq details summary::after { content: " +"; font-weight: 800; color: var(--tenue); }
.pn-faq details[open] summary::after { content: " −"; }

/* ── Escritorio: el tablero ocupa la pantalla y cada columna rueda sola ── */
@media (min-width: 1100px) {
  .pn { height: calc(100vh - 58px); height: calc(100svh - 58px); overflow: hidden; }
  .pn-col { overflow-y: auto; overscroll-behavior: contain; }
}

/* ── Teléfono y tableta: una columna, en el orden de la pregunta ── */
@media (max-width: 1099px) {
  .pn {
    grid-template-columns: 1fr;
    grid-template-areas: "consulta" "pestanas" "respuesta" "centro";
    grid-template-rows: none; min-height: 0;
  }
  .pn-consulta { border-right: 0; border-bottom: 1px solid var(--pelo); }
  .pn-respuesta { border-left: 0; }
  .pn-pestanas [role="tab"] { font-size: 14px; padding: 10px 4px; }
  .pn-pestanas [role="tab"] small { display: none; }
  .pn-globo .globo canvas { height: clamp(200px, 34vh, 320px); height: clamp(200px, 34svh, 320px); }
  .pn-centro { border-top: 1px solid var(--pelo); }
}

@media (prefers-reduced-motion: reduce) {
  .pn * { transition: none !important; }
}

/* Sin anclaje de scroll en el panel (2026-10-01). Al cambiar de pestaña la respuesta cambia entera
   (una zona se esconde, la otra se carga), y Chrome «seguía» a un elemento de la anterior: tocar Vivir
   en el teléfono dejaba la vista 1.500 px más abajo del comienzo de la respuesta, aunque el código la
   llevaba ahí (QA del recorrido, H8). Medido en Chrome: con anclaje terminaba a −1.479 px; sin él, en 0. */
body.cuerpo-panel { overflow-anchor: none; }