/* Compass Chile · ISF Chile
   Identidad: paleta oficial ISF. Los cuatro principios se distinguen por tono
   y por luminosidad, verificados en deuteranopía; nunca dependen solo del
   color, porque siempre llevan su rótulo y su rumbo. */

:root{
  color-scheme: light;

  /* ── Marca ISF ─────────────────────────────────────────── */
  --isf-azul:      #0920A6;
  --isf-cielo:     #64A7DB;
  --isf-lima:      #BEC625;
  --isf-naranja:   #FF961F;
  --isf-magenta:   #FF2CAC;

  /* Tintes: las mismas tintas de marca al 6-8 % sobre blanco, con su
     tinta de texto verificada. Antes vivían como hexadecimales sueltos
     repartidos por la hoja y no se sabía de dónde salían. */
  --azul-tinte:    #EDF1FD;
  --azul-tinta:    #101B4D;
  --lima-tinte:    #F4F7E4;
  --lima-tinta:    #33390A;
  --naranja-tinte: #FFF6E8;
  --naranja-tinta: #4A3208;

  /* ── Acciones ──────────────────────────────────────────
     Un token por rol, no un color por botón.

     Primaria en azul profundo. La guía pide cielo #64A7DB con texto
     blanco, pero ese par da 2,6:1 y reprueba AA; el azul oficial sobre
     blanco da 11,7:1. Pasar el primario a cielo es cambiar las dos
     líneas de abajo, y hay que llevarse el texto a tinta oscura, que
     con cielo da 6,5:1.

     Valor en lima con texto azul: 6,3:1. Marca los tres momentos en que
     la persona recibe algo —ver su brújula, escribir su plan,
     llevárselo— y no los trámites que llevan hasta ahí. */
  --accion:         var(--isf-azul);
  --accion-texto:   #FFFFFF;
  --accion-sombra:  9, 32, 166;
  --valor:          var(--isf-lima);
  --valor-texto:    var(--isf-azul);
  --valor-sombra:   140, 148, 20;

  /* ── Superficies y texto ──────────────────────────────── */
  --fondo:         #F8F9FA;
  --superficie:    #FFFFFF;
  --tinta:         #1B1D21;
  --tinta-suave:   #40484F;
  --linea:         #C0C7D0;
  --linea-tenue:   #E7E8E9;
  /* El gris del polígono de la aplicación anterior. Espeja COLOR_ANTERIOR de
     js/brujula.js, que es quien lo dibuja: acá solo lo repite la leyenda. */
  --brujula-anterior: #8C96A3;

  /* ── Principios: gráfico / texto ─────────────────────────
     No se tocan: están verificados en deuteranopía. */
  --p-responsable:        #0920A6;
  --p-responsable-texto:  #0920A6;
  --p-proposito:          #C97A05;
  --p-proposito-texto:    #8A5308;
  --p-inclusivo:          #C4197F;
  --p-inclusivo-texto:    #A31468;
  --p-regenerativo:       #4F5A08;
  --p-regenerativo-texto: #4F5A08;

  /* ── Tipografía ───────────────────────────────────────
     El mono queda para un solo uso en toda la aplicación: la llave de
     continuidad, donde el valor es literalmente un código. */
  --display: "Work Sans", "Poppins", system-ui, -apple-system, Arial, sans-serif;
  --cuerpo:  "Manrope", "Inter", system-ui, -apple-system, Arial, sans-serif;
  --mono:    ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

  --t-etiqueta:     .75rem;
  --track-etiqueta: .05em;

  /* ── Espacio: base 8 ────────────────────────────────────
     Gutter 24 y sección 64/80, como la guía. */
  --u:       8px;
  --gutter:  1.5rem;
  --seccion: 4rem;

  /* ── Radios: 4 / 8 / 12 ─────────────────────────────────
     Antes había 3, 4, 8, 9, 10, 12, 14 y 16 px conviviendo sin criterio.
     Ahora: 4 por defecto, 8 para lo que se toca, 12 para el objeto
     principal de la pantalla, y pill solo para etiquetas y barras. */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-full: 999px;

  /* Subió y bajó en la comparación. No son colores de marca a propósito:
     el lima ya significa logro en los botones y el olivo es el color del
     principio Regenerativo, así que reusarlos aquí haría que el mismo
     verde dijera tres cosas distintas en la misma pantalla. */
  --sube: #1C5B2E;
  --baja: #8A3010;

  /* Un principio terminado, en el stepper del cuestionario. Reusa el verde de
     «subió» de la comparación, que ya se eligió por no ser ni el lima de los
     botones ni el olivo de Regenerativo. La comparación y el cuestionario no
     están nunca a la vista a la vez, así que el mismo verde no dice dos cosas
     al mismo tiempo. Sobre blanco da 8,1:1, y el blanco encima también. */
  --hecho: var(--sube);

  --sombra: 0 10px 30px rgba(27,29,33,.06);
  --ancho: 62rem;
  --ancho-angosto: 40rem;

  /* 56 de contenido más 1 de borde inferior. El paso a pantalla completa
     descuenta esto del viewport, y con 56 pedía 1px más de lo que había. */
  --alto-barra: 57px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{ font-family: var(--display); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .45em; }
h1{ font-size: clamp(2.25rem, 7vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
h2{ font-size: clamp(1.75rem, 5.2vw, 2.5rem); font-weight: 800; line-height: 1.1; }
h3{ font-size: 1.2rem; font-weight: 700; }
h1 em{ font-style: normal; color: var(--isf-azul); }
p{ margin: 0 0 1em; }
a{ color: var(--isf-azul); }

/* El atributo `hidden` esconde de verdad, aunque la clase del elemento traiga
   su propio `display`. La aplicación apaga y prende bloques con él —los dos
   textos de la política de datos, la vuelta atrás de AQUA365, los avisos— y sin
   esta línea basta un `display: flex` en cualquier clase para que un bloque
   escondido siga visible. */
[hidden]{ display: none !important; }

/* ── Etiqueta ──────────────────────────────────────────────
   Un solo tratamiento para todo lo que rotula: mayúsculas, 12 px, peso
   700 y .05em de tracking, que es lo que pide la guía. Antes cada
   rótulo traía su propio tamaño, su propio tracking —.06, .08, .1, .13
   y .16em conviviendo— y la tipografía monoespaciada, que no es de la
   marca y aquí solo significaba «esto es pequeño». */
.etiqueta,
.rumbo, .barra-etiqueta, .visor-etiqueta, .etiqueta-principio,
.escala-guia-rotulo,
.objetivo-etiqueta, .filtro-rotulo, .leyenda-item .rumbo-corto,
.tabla-competencias th{
  font-family: var(--cuerpo);
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  line-height: 1.2;
}

/* Cifras que se leen en columna o se comparan entre sí. Las alinea el
   numeral tabular de Manrope, no el monoespaciado. */
.leyenda-item .valor, .delta .cifra, .celda-valor .cifra, .insignia,
.punto span, .tarjetas-que-obtienes .numero,
.tabla-competencias td:last-child, .tabla-competencias .celda-eje,
.recordatorio-elegidas .item .cual, .contador, .sello-fecha{
  font-family: var(--cuerpo);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.visualmente-oculto{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salto-contenido{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accion); color: var(--accion-texto); padding: .75rem 1.25rem;
}
.salto-contenido:focus{ left: 0; }

:where(button, input, select, textarea, summary, a):focus-visible{
  outline: 3px solid var(--isf-azul);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Al cambiar de pantalla el foco se mueve al título para que un lector de
   pantalla anuncie dónde quedó. El título recibe tabindex="-1", y el
   navegador le dibujaba encima su anillo negro por defecto: en la portada
   aparecía un rectángulo alrededor del titular, apenas se abría la página,
   sin que nadie hubiera tocado nada. El foco tiene que moverse; el anillo
   no tiene a quién avisarle, porque a ese título no se llega tabulando. */
:where(h1, h2, h3, .afirmacion)[tabindex="-1"]:focus{ outline: none; }

/* ── Barra superior ─────────────────────────────────────────────── */

/* Fuera durante el cuestionario: la cabecera del paso ya lleva el progreso, el
   contador y la salida, y la marca repetida arriba solo restaba alto. Apagar
   --alto-barra en vez de tocar cada regla hace que el alto de la pantalla y el
   sticky de la cabecera se recalculen sin saber nada de esto. */
body.sin-barra{ --alto-barra: 0px; }
body.sin-barra .barra{ display: none; }

.barra{
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--linea-tenue);
}
.barra-interior{
  max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem;
  height: 56px; display: flex; align-items: center; gap: .75rem;
}
.marca{ display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: .98rem; }
.marca span{ color: var(--tinta-suave); font-weight: 500; }
.marca-icono{ width: 22px; height: 22px; fill: none; stroke: var(--isf-azul); stroke-width: 1.6; }
.marca-icono .aguja{ fill: var(--isf-azul); stroke: none; }
.marca-icono .centro{ fill: #fff; stroke: var(--isf-azul); stroke-width: 1.4; }
.barra-etiqueta{
  margin-left: auto; color: var(--tinta-suave);
  border: 1px solid var(--linea); border-radius: var(--r-full); padding: .2rem .6rem;
}

/* Firma institucional al otro extremo de la barra. La marca de producto
   —la brújula— dice qué es esta página; la firma dice de quién es. No
   hay archivo del logotipo oficial en el repositorio, así que esto es el
   lockup tipográfico del viewer de la guía, no el logotipo. */
.firma-isf{
  margin-left: auto; display: flex; align-items: center; gap: .55rem;
  text-decoration: none; color: inherit;
}
.barra-etiqueta ~ .firma-isf{ margin-left: 1rem; }
.firma-sigla{
  font-family: var(--display); font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.04em; line-height: 1;
}
.firma-sigla i{ font-style: normal; }
.firma-sigla .s-i{ color: var(--tinta); }
.firma-sigla .s-s{ color: var(--isf-cielo); }
.firma-sigla .s-f{ color: var(--isf-lima); }
.firma-linea{ width: 1px; height: 22px; background: var(--linea); }
.firma-nombre{
  font-family: var(--display); font-weight: 600; font-size: .62rem;
  line-height: 1.15; letter-spacing: .01em; color: var(--tinta-suave);
  text-transform: uppercase;
}
/* En teléfono la barra ya lleva la marca de producto y, a veces, la
   etiqueta de cohorte. El nombre completo no cabe; la sigla sí. */
@media (max-width: 30rem){ .firma-nombre, .firma-linea{ display: none; } }

/* ── Pantallas ──────────────────────────────────────────────────── */
.pantalla{ display: none; }
.pantalla.activa{ display: block; animation: entrar .28s ease both; }
@keyframes entrar{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none; } }
/* El cuestionario entra solo con opacidad. Un ancestro con transform —aunque
   sea el transform: none del último fotograma— se vuelve el bloque contenedor
   de sus descendientes posicionados, y la cabecera del paso es sticky. */
.pantalla-plena.activa{ animation-name: aparecer; }
@keyframes aparecer{ from{ opacity: 0; } to{ opacity: 1; } }
@media (prefers-reduced-motion: reduce){
  .pantalla.activa{ animation: none; }
  *{ transition: none !important; }
}

.envoltorio{ max-width: var(--ancho); margin: 0 auto; padding: 2.5rem var(--gutter) var(--seccion); }
@media (min-width: 48rem){ .envoltorio{ padding: var(--seccion) var(--gutter) 5rem; } }
.envoltorio.angosto{ max-width: var(--ancho-angosto); }
.texto-centrado{ text-align: center; }
.pantalla.centrada.activa{ display: grid; place-items: center; min-height: 72vh; }

.rumbo{ color: var(--tinta-suave); margin-bottom: .8rem; }
.bajada{ font-size: 1.1rem; color: var(--tinta-suave); }
.bajada.corta{ font-size: 1rem; }
.nota{ font-size: .88rem; color: var(--tinta-suave); }
.pista{ font-size: .82rem; color: var(--tinta-suave); margin: .35rem 0 0; }
.titulo-seccion{ margin-top: 3rem; font-size: 1.35rem; }
.atribucion{
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea-tenue);
  font-size: .8rem; color: var(--tinta-suave); line-height: 1.55;
}

/* ── Botones ────────────────────────────────────────────────────── */
.boton{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--cuerpo); font-size: 1rem; font-weight: 700;
  min-height: 48px; padding: .8rem 1.6rem; border: 0; border-radius: var(--r-md);
  background: var(--accion); color: var(--accion-texto); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow: 0 4px 14px rgba(var(--accion-sombra), .22);
}
.boton:hover:not(:disabled){ transform: translateY(-1px); box-shadow: 0 7px 20px rgba(var(--accion-sombra), .28); }
.boton:active:not(:disabled){ transform: translateY(0); }
.boton:disabled{ opacity: .38; cursor: not-allowed; box-shadow: none; }
.boton.grande{ width: 100%; font-size: 1.05rem; padding: 1rem 1.6rem; }

/* Acción de valor. Tres en toda la aplicación —ver la brújula, escribir
   el plan, llevárselo— y nunca dos en la misma pantalla. Lima con texto
   azul da 6,3:1; con texto blanco daría 1,9:1 y sería ilegible. */
.boton.valor{
  background: var(--valor); color: var(--valor-texto);
  box-shadow: 0 4px 14px rgba(var(--valor-sombra), .30);
}
.boton.valor:hover:not(:disabled){ box-shadow: 0 7px 20px rgba(var(--valor-sombra), .38); }

.boton.fantasma{
  background: transparent; color: var(--accion);
  border: 1.5px solid var(--linea); box-shadow: none; font-weight: 600;
}
.boton.fantasma:hover:not(:disabled){ background: #fff; border-color: var(--accion); box-shadow: none; }
.boton.pequeno{ font-size: .85rem; min-height: 40px; padding: .5rem 1rem; color: var(--tinta-suave); }
.botonera{ display: flex; flex-direction: column; gap: .7rem; margin: 1.75rem 0 .5rem; }
@media (min-width: 40rem){
  .botonera{ flex-direction: row; flex-wrap: wrap; align-items: center; }
  .boton.grande{ width: auto; }
}

/* ── Portada ────────────────────────────────────────────────────── */
.datos-clave{
  list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  padding: 0; margin: 1.5rem 0; font-size: .92rem; color: var(--tinta-suave);
}
.datos-clave li{ display: flex; align-items: baseline; gap: .35rem; }
.datos-clave li::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--isf-lima); }
.datos-clave strong{ color: var(--tinta); font-weight: 700; }

.tarjetas-que-obtienes{ display: grid; gap: .8rem; margin: 2rem 0; }
@media (min-width: 46rem){ .tarjetas-que-obtienes{ grid-template-columns: repeat(3,1fr); } }
.tarjetas-que-obtienes article{
  background: none; border: 0; border-top: 2px solid var(--linea-tenue);
  border-radius: 0; padding: .9rem 0 0;
}
.tarjetas-que-obtienes .numero{
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--isf-azul); color: #fff;
  font-size: .8rem; font-weight: 700; margin-bottom: .6rem;
}
.tarjetas-que-obtienes h3{ font-size: 1.05rem; margin-bottom: .25rem; }
.tarjetas-que-obtienes p{ margin: 0; font-size: .9rem; color: var(--tinta-suave); line-height: 1.5; }

/* ── Tres niveles de jerarquía ───────────────────────────────────
   1. Objeto principal: superficie blanca con borde y sombra. Uno por pantalla,
      y solo tres en toda la aplicación: el lienzo de la brújula, la tarjeta de
      la llave y el campo del plan de acción.
   2. Bloque informativo: fondo teñido y una regla de color a la izquierda. Sin
      borde alrededor ni esquinas redondeadas.
   3. Fila de lista: sin caja. La separa una línea de un pelo, y el color vive
      en un punto, una regla corta o la insignia que la fila ya lleva.

   Los controles que se tocan —las opciones de la escala, los campos, la casilla
   de consentimiento— conservan su caja: si no parecen tocables, no se tocan.

   Antes había diecisiete tratamientos distintos de caja blanca redondeada sobre
   gris. Cuando todo es una tarjeta ninguna pesa más que otra, y la pantalla no
   dice por dónde empezar. */

/* ── Avisos · nivel 2 ───────────────────────────────────────────── */
.aviso{ padding: .9rem 1.1rem; margin: 1.75rem 0; border: 0; border-left: 3px solid; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.aviso p{ margin: 0; font-size: .93rem; line-height: 1.6; }
.aviso-clave{ background: var(--azul-tinte); border-color: var(--isf-azul); color: var(--azul-tinta); }
.aviso-suave{ background: var(--naranja-tinte); border-color: var(--isf-naranja); color: var(--naranja-tinta); }
.aviso-privado{ background: var(--lima-tinte); border-color: var(--isf-lima); color: var(--lima-tinta); }
/* Un aviso puede ofrecer una salida —ver la brújula ya respondida, por
   ejemplo—, y ahí el segundo párrafo necesita el aire que `.aviso p` quita. */
.aviso p + p{ margin-top: .6rem; }

.bloque-explicativo{
  background: none; border: 0; border-left: 3px solid var(--linea-tenue);
  border-radius: 0; padding: .1rem 0 .1rem 1.1rem; margin: 1.5rem 0;
}
.bloque-explicativo p:last-child{ margin-bottom: 0; }
.bloque-explicativo p{ font-size: .96rem; }

/* Las tres formas de desarrollar las competencias, en el resultado. Lista con
   punto y no párrafo corrido: son tres cosas independientes y quien vuelve a
   la página busca una, no las lee de corrido. */
.rotulo-lista{
  font-size: .82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--tinta-suave); margin: 1.1rem 0 .5rem;
}
.lista-estrategias{
  margin: 0; padding-left: 1.1rem;
  font-size: .96rem; color: var(--tinta-suave); line-height: 1.55;
}
.lista-estrategias li{ margin-bottom: .3rem; }
.lista-estrategias li:last-child{ margin-bottom: 0; }

/* ── Consentimiento ─────────────────────────────────────────────── */
.campo{ margin-bottom: 1.15rem; }
.campo > label{ display: block; font-size: .93rem; font-weight: 700; margin-bottom: .45rem; }

select, input[type="text"], textarea{
  width: 100%; font-family: var(--cuerpo); font-size: 1rem; color: var(--tinta);
  background: var(--fondo); border: 1.5px solid var(--linea);
  border-radius: var(--r-md); padding: .7rem .75rem; min-height: 48px;
}
select:focus, input[type="text"]:focus, textarea:focus{ background: #fff; border-color: var(--isf-azul); }

/* El código de la invitación. Azul y no lima: el lima es el color del logro y
   del progreso, y acá no se logró nada. El código ya venía en el enlace, no lo
   completó la persona, y darle color de premio invita a mirarlo más de lo que
   merece. Es un dato, y se ve como un dato. */
.visor-codigo{
  margin-top: 1.25rem; padding: .9rem 1rem; border-radius: var(--r-sm);
  background: var(--azul-tinte); border: 0; text-align: center;
}
.visor-etiqueta{ display: block; color: var(--isf-azul); margin-bottom: .4rem; }
#token-valor{
  display: block; font-family: var(--mono); font-size: 1.25rem; font-weight: 700;
  letter-spacing: .16em; color: var(--isf-azul); word-break: break-all;
}
.visor-nota{ margin: .6rem 0 0; font-size: .82rem; color: var(--tinta-suave); line-height: 1.5; }

.detalle-datos{
  background: none; border: 0; border-top: 1px solid var(--linea-tenue);
  border-radius: 0; padding: 0; margin: 1.25rem 0;
}
.detalle-datos summary{
  cursor: pointer; font-weight: 700; font-size: .93rem; padding: .85rem 0;
  list-style: none;
}
.detalle-datos summary::-webkit-details-marker{ display: none; }
.detalle-datos summary::before{ content: "▸ "; color: var(--isf-azul); }
.detalle-datos[open] summary::before{ content: "▾ "; }
.detalle-datos ul{ margin: 0 0 1rem; padding-left: 1.1rem; font-size: .9rem; color: var(--tinta-suave); }
.detalle-datos li{ margin-bottom: .4rem; }
.detalle-datos strong{ color: var(--tinta); }

.consentimiento{
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--superficie); border: 1.5px solid var(--linea);
  border-radius: var(--r-md); padding: 1rem 1.1rem; margin: 1.25rem 0;
  cursor: pointer; font-size: .93rem; line-height: 1.55; color: var(--tinta-suave);
}
.consentimiento:has(input:checked){ border-color: var(--isf-azul); background: var(--azul-tinte); }
.consentimiento input{ margin-top: .2rem; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--isf-azul); }
.consentimiento strong{ color: var(--tinta); }

/* ── Pantalla de origen ──────────────────────────────────────────
   Tres opciones apiladas, cada una una fila de lista y no una tarjeta: la caja
   con sombra está reservada al objeto principal de la pantalla, y acá lo
   principal es la pregunta. Son botones y no radios porque elegir es avanzar:
   no hay un «Continuar» que confirmar después.

   Las tres se ven iguales a propósito, incluida AQUA365. Destacarla invitaría a
   marcarla a quien reconoce el nombre del programa sin tener enlace, y ese es
   justo el camino que le cuesta la comparación de noviembre. */
.opciones-origen{ display: flex; flex-direction: column; gap: 0; margin: 1.75rem 0 .5rem; }
.opcion-origen{
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--linea-tenue);
  padding: 1.1rem .25rem 1.15rem;
  font-family: var(--cuerpo); font-size: 1rem; color: var(--tinta);
  transition: background .12s ease;
}
.opcion-origen:last-child{ border-bottom: 1px solid var(--linea-tenue); }
.opcion-origen:hover{ background: var(--azul-tinte); }
.opcion-origen strong{ display: block; font-weight: 700; margin-bottom: .15rem; }
.opcion-origen span{
  display: block; font-size: .9rem; color: var(--tinta-suave); line-height: 1.5;
}

/* ── Cuestionario ───────────────────────────────────────────────── */
/* dvh en lugar de vh: en el navegador del teléfono la barra de direcciones
   entra y sale, y vh se queda con el viewport grande. */
.pantalla-plena.activa{
  display: flex; flex-direction: column;
  min-height: calc(100dvh - var(--alto-barra));
}
@supports not (height: 100dvh){
  .pantalla-plena.activa{ min-height: calc(100vh - var(--alto-barra)); }
}
/* Vive en el flujo de la página, no como una capa encima: mismo fondo que el
   cuerpo, sin borde y con aire alrededor. Lo único que la separaba del resto
   era el cromo, y el cromo hacía leer el avance como la barra de una aplicación
   y no como parte de la página que se está respondiendo.

   Sticky y de un solo alto. Hubo una versión que se compactaba al scrollear, y
   para eso tuvo que ser `fixed` con un hueco medido: al encoger 62px dentro del
   flujo, el anclaje de scroll de Chrome compensaba el encogimiento, el ajuste
   cruzaba el umbral hacia atrás y la cabecera parpadeaba en bucle. Con un solo
   alto no hay nada que encoja, así que no hay nada que el anclaje compense y
   sticky vuelve a bastar: sin hueco en el flujo, sin medir desde JS y sin un
   número de reserva que se pueda desfasar del alto real.

   El alto es el que piden los cuatro rótulos y nada más: en el teléfono cada
   píxel de cabecera es un píxel que no tienen las afirmaciones. */
.cabecera-cuestionario{
  position: sticky; top: var(--alto-barra); z-index: 10;
  /* Ítem flex de una columna: sin esto puede encogerse cuando el contenido
     aprieta, y el alto de la cabecera dejaría de ser uno solo. */
  flex: 0 0 auto;
  background: var(--fondo);
  padding: .85rem 1.25rem .9rem;
}
/* La línea es permanente y no aparece al scrollear. La cabecera es opaca y el
   contenido pasa por debajo: sin línea, el texto se corta contra un borde que
   no está dibujado. Va como ::after y no como border porque no ocupa lugar en
   la caja, así que el alto de la cabecera sigue siendo el de su contenido. */
.cabecera-cuestionario::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--linea-tenue);
}

.cabecera-fila{ max-width: var(--ancho-angosto); margin: 0 auto; display: flex; align-items: center; gap: 1rem; }

/* Salida y contador en voz baja. Son referencia, no acción: quien está
   respondiendo no viene a salir del cuestionario ni a leer en qué número va, y
   el stepper de abajo ya dice dónde está con más precisión que el texto. */
.salir{
  border: 0; background: none; font: inherit; font-size: .82rem;
  color: var(--tinta-suave); cursor: pointer; padding: .25rem 0;
}
.salir:hover{ color: var(--tinta); }
.contador{ margin-left: auto; font-size: .82rem; color: var(--tinta-suave); }

/* ── Stepper de los cuatro principios ────────────────────────────────
   Cuatro segmentos, uno por principio: un disco con su número y una barra que
   mide las nueve afirmaciones de ESE principio.

   Antes era una barra continua contra las 36 respuestas. Se movía en cada
   respuesta, que era el punto, pero solo sabía decir cuánto queda. Repartida en
   cuatro sigue moviéndose en cada respuesta —la barra del principio en curso
   avanza un noveno— y además dice dónde estás y a qué se puede volver, que es
   la pregunta que aparece cuando el recorrido tiene cuatro paradas.

   Tres estados y ninguno depende solo del color: completado lleva su check,
   actual lleva su número sobre relleno pleno, pendiente lleva su número sobre
   gris y a media opacidad. */
.etapas{ max-width: var(--ancho-angosto); margin: .7rem auto 0; }
.etapas-lista{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem;
}

.etapa-boton{
  display: grid; gap: .45rem; width: 100%;
  background: none; border: 0; margin: 0; padding: .2rem 0;
  font: inherit; text-align: left; cursor: pointer;
  border-radius: var(--r-sm);
}
.etapa-cabeza{ display: flex; align-items: center; gap: .4rem; }
.etapa-disco{
  flex: 0 0 auto; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--linea); background: var(--superficie);
  color: var(--tinta-suave); font-size: .72rem; font-weight: 700; line-height: 1;
  transition: background .18s ease, border-color .18s ease, color .18s ease,
              transform .12s ease;
}
.etapa-disco svg{ width: 12px; height: 12px; }
.etapa-barra{
  flex: 1; height: 4px; border-radius: var(--r-full);
  background: var(--linea-tenue); overflow: hidden;
}
.etapa-barra i{
  display: block; width: 0; height: 100%; border-radius: var(--r-full);
  background: var(--linea);
  transition: width .2s ease, background .18s ease;
}
/* El tope de dos líneas es lo que mantiene constante el alto de la cabecera:
   sin él, un rótulo que se parta en tres la haría crecer y el contenido saltaría
   al cambiar de principio. */
.etapa-rotulo{
  overflow: hidden; max-height: 2.6rem;
  font-size: .68rem; line-height: 1.25; color: var(--tinta-suave);
  /* En 375px cada columna mide 78px y «Regenerativo» pide 68: cabe, pero por
     poco, y bajo 340px ya no. Con hyphens la palabra se parte en dos líneas
     —el max-height da para dos— en vez de recortarse contra el overflow. */
  hyphens: auto; overflow-wrap: break-word;
}

/* Completado: verde y check. Clickeable, porque volver a revisar lo que ya se
   respondió no rompe nada. */
.etapa.completado .etapa-disco{ background: var(--hecho); border-color: var(--hecho); color: #fff; }
.etapa.completado .etapa-barra i{ background: var(--hecho); }

/* Actual: el color del principio que se está respondiendo, no un azul fijo.
   Toda la pantalla —la insignia, el objetivo, los seis círculos de cada fila—
   ya está teñida con --paso-color; un segmento azul sobre un paso ocre serían
   dos identidades en la misma vista. En el primer principio, Responsable, ese
   color ES el azul institucional, así que el arranque se ve igual. */
.etapa.actual .etapa-disco{ background: var(--paso-color); border-color: var(--paso-color); color: #fff; }
.etapa.actual .etapa-barra i{ background: var(--paso-color); }
.etapa.actual .etapa-rotulo{ color: var(--paso-color-texto); font-weight: 700; }

/* Pendiente: gris y a media opacidad. No es clickeable a propósito —saltar
   adelante deja afirmaciones sin responder atrás— y el cursor lo dice antes de
   que se intente. */
.etapa.pendiente{ opacity: .55; }
.etapa.pendiente .etapa-boton{ cursor: not-allowed; }
/* Un principio a medias que quedó atrás: pasa con una sesión retomada. Se ve
   pendiente porque lo está, pero se puede volver a él. Dejar a alguien fuera de
   lo que ya vio es peor que el salto que la regla anterior evita. */
.etapa.pendiente.navegable{ opacity: .8; }
.etapa.pendiente.navegable .etapa-boton{ cursor: pointer; }

.etapa:not(.pendiente) .etapa-boton:hover .etapa-disco,
.etapa.navegable .etapa-boton:hover .etapa-disco{ transform: scale(1.1); }

.cuerpo-cuestionario{ flex: 1; display: flex; align-items: flex-start; }
/* Sin relleno inferior: el espacio hasta los botones lo pone el pie, que ahora
   vive en el mismo flujo. Sumar los dos dejaba 4rem de vacío. */
.cuerpo-cuestionario .envoltorio{ padding-top: 1.75rem; padding-bottom: 0; width: 100%; }

.marca-principio{ display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.insignia{
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: color-mix(in srgb, var(--paso-color) 12%, #fff);
  border: 1.5px solid color-mix(in srgb, var(--paso-color) 40%, #fff);
  color: var(--paso-color-texto); font-weight: 700; font-size: .95rem;
}
.etiqueta-principio{ color: var(--paso-color-texto); }
.objetivo-principio{
  background: color-mix(in srgb, var(--paso-color) 7%, #fff);
  border: 0; border-left: 3px solid var(--paso-color);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: .9rem 1.1rem; margin-top: 1.25rem;
}
.objetivo-etiqueta{ display: block; color: var(--paso-color-texto); margin-bottom: .4rem; }
.objetivo-principio p{ margin: 0; font-size: 1rem; }
.bajada{ color: var(--tinta-suave); margin: 1.1rem 0 0; }

/* ── La escala, una vez por pantalla ─────────────────────────────────
   Los seis tramos escritos completos, justo antes de la primera afirmación:
   entre la instrucción de cómo responder y el primer control que la aplica, que
   es el único lugar donde se leen sin haber tenido que buscarlos.

   Sin caja ni fondo teñido: el objetivo de reflexión, dos bloques más arriba, ya
   ocupa el nivel del bloque informativo, y dos superficies teñidas seguidas
   dejan de decir cuál importa. Lo que marca este bloque es el color del número,
   que es el del principio.

   Las nueve filas de abajo siguen mostrando solo números. Cada radio lleva su
   etiqueta completa en aria-label y ahora también en title, así que el nombre
   del tramo se recupera con el puntero encima sin repetir el texto en pantalla
   cincuenta y cuatro veces. */
/* Los extremos bajo cada afirmación son el reemplazo del `title`, que en un
   teléfono no existe: sin puntero no hay forma de recuperar qué significa el 1
   cuando la guía de arriba ya salió de pantalla. Aparecen solo bajo 34rem; con
   ancho suficiente la guía completa sigue visible y repetir los extremos nueve
   veces sería ruido. Los cuatro tramos del medio se leen por interpolación
   entre los dos anclajes, que es como se lee cualquier escala. */
.afirmacion .extremos{ display: none; }
@media (max-width: 34rem){
  .afirmacion .extremos{ display: flex; font-size: .72rem; margin-top: .5rem; }
}

.escala-guia{ margin: 1.6rem 0; }
.escala-guia-rotulo{ display: block; color: var(--paso-color-texto); margin-bottom: .55rem; }
.escala-tramos{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: .3rem 1.25rem;
  font-size: .85rem; color: var(--tinta-suave); line-height: 1.45;
}
.escala-tramos b{
  display: inline-block; min-width: .85rem; margin-right: .2rem;
  color: var(--paso-color-texto); font-variant-numeric: tabular-nums;
}

/* ── Las nueve afirmaciones ──────────────────────────────────────────
   Texto sobre un separador de un pelo, sin caja ni sombra: la caja está
   reservada al objeto principal de la pantalla, y acá el objeto principal es el
   principio, no cada afirmación suelta. El número lo pone el contador de la
   lista, que es lo que una lista ordenada ya sabe hacer. */
.afirmaciones{ list-style: none; counter-reset: afirmacion; margin: 0; padding: 0; }
.afirmacion{
  counter-increment: afirmacion;
  border-top: 1px solid var(--linea-tenue);
  padding: 1.15rem 0 1.25rem;
  /* La cabecera sticky mide 119px —133 cuando los rótulos se parten en dos
     líneas, bajo 340px—. Sin este margen, la fila a la que se llega tabulando o
     desde Continuar queda debajo de ella. */
  scroll-margin-top: 8.75rem;
}
.afirmacion:last-child{ border-bottom: 1px solid var(--linea-tenue); }
.afirmacion fieldset{ border: 0; padding: 0; margin: 0; }

.afirmacion .enunciado{
  display: block; padding: 0; margin-bottom: .8rem;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  line-height: 1.45;
}
.afirmacion .enunciado::before{
  content: counter(afirmacion) ". ";
  color: var(--tinta-suave); font-variant-numeric: tabular-nums;
}

/* Continuar marca lo que falta cuando se pulsa con respuestas pendientes. El
   color es el del principio y no un rojo: no haber respondido todavía no es un
   error, es una tarea sin hacer. */
.afirmacion.pendiente{
  background: color-mix(in srgb, var(--paso-color) 5%, #fff);
  box-shadow: inset 3px 0 0 var(--paso-color);
  padding-left: .9rem; padding-right: .9rem;
  margin: 0 -.9rem;
}

/* Sin fondo, sin sombra y sin fijar. El paso son nueve afirmaciones: para
   responder la novena hay que llegar al fondo de todos modos, y ahí el pie ya
   está a la vista solo. Fijarlo restaba alto de pantalla en el teléfono —donde
   el alto es lo escaso— y dibujaba una segunda capa sobre el contenido para
   resolver un problema que el largo del paso ya resolvía.

   Lo que separa los botones de la última afirmación es aire, no una barra: la
   lista ya cierra con su línea de un pelo. */
.pie-cuestionario{
  background: none; border: 0; box-shadow: none;
  padding: 0 1.25rem calc(2.75rem + env(safe-area-inset-bottom));
}

/* `margin: 0` anulaba el `margin: 0 auto` de .envoltorio, así que la botonera
   medía bien sus 40rem pero quedaba pegada al borde izquierdo mientras la
   pregunta iba centrada: 362 px de desfase en una pantalla de 1440. El relleno
   lateral la alinea con el borde del texto. */
.botonera-pie{ display: flex; gap: .7rem; margin: 0 auto; padding: 2.25rem 0 0; }
.botonera-pie .boton{ flex: 1; }
.botonera-pie .boton.fantasma{ flex: 0 0 auto; }

/* En el pie, Atrás es el mecanismo de corrección de nueve respuestas y el
   fantasma gris no alcanzaba. Acotado al pie: .boton.fantasma se usa en otros
   seis lugares donde sí corresponde que pese poco. */
.botonera-pie .boton.fantasma{
  border-width: 1.5px; border-color: var(--accion);
  color: var(--accion); font-weight: 700;
}

/* ── Escala de la afirmación ─────────────────────────────────────────
   Seis círculos del mismo tamaño con su número. Reusa .punto de la
   meta-evaluación, que ya resolvía este control, y lo especializa acá: redondo
   en vez de cuadrado y del color del principio en vez del azul institucional.

   Redondos e iguales a propósito. La versión anterior usaba barras de altura
   creciente, y esa rampa decía que el 6 vale más que el 1. Esto mide
   autopercepción: el 1 es una respuesta tan válida como el 6.

   Las palabras de la escala viven en la leyenda de arriba, así que en pantalla
   solo se ve el número. Cada radio lleva su etiqueta completa en aria-label, y
   el lector de pantalla oye «4. Algo de acuerdo». */
#p-cuestionario .puntos{ gap: .45rem; max-width: 27rem; }

/* El tamaño lo fija el ancho disponible y no el alto: `min-height: 44px` con
   `aspect-ratio: 1` obligaba a 44px de ancho, y bajo 320px de pantalla los seis
   círculos más sus separaciones ya no caben, así que la fila desbordaba y
   aparecía scroll horizontal. Con el alto derivado del ancho los círculos se
   encogen antes que desbordar: 44px es el tope, no el piso. */
#p-cuestionario .punto span{
  min-height: 0; height: auto; aspect-ratio: 1;
  width: 100%; max-width: 44px; margin: 0 auto;
  border-radius: 50%; font-size: .92rem;
}
#p-cuestionario .punto:hover span{ border-color: var(--paso-color); }
#p-cuestionario .punto:has(input:checked) span{
  background: var(--paso-color); border-color: var(--paso-color); color: #fff;
}
#p-cuestionario .punto:has(input:focus-visible) span{
  outline: 3px solid var(--isf-azul); outline-offset: 2px;
}

/* ── Ancho del paso ─────────────────────────────────────────────────
   Cabecera, cuerpo y pie comparten un ancho para que nada quede desalineado.
   El paso ya no cabe en una pantalla: nueve afirmaciones piden scroll por
   diseño, igual que el formulario original. Lo que se cuida es el ancho de
   línea del texto, no que todo entre a la vez. */
#p-cuestionario{ --ancho-paso: var(--ancho-angosto); }
#p-cuestionario .cabecera-fila,
#p-cuestionario .etapas,
#p-cuestionario .cuerpo-cuestionario .envoltorio{ max-width: var(--ancho-paso); }

/* La cabecera y el pie ya llevan relleno lateral propio, así que su contenido
   arranca 1.25rem adentro. El cuerpo, en cambio, lleva el relleno dentro de su
   propia caja de ancho. Descontarlo aquí es lo que hace que los tres bordes
   coincidan en cualquier ancho. */
#p-cuestionario .botonera-pie{ max-width: calc(var(--ancho-paso) - 2.5rem); }

/* El cuerpo deja de centrarse en vertical: con una pantalla más alta que el
   viewport, centrar el contenido lo empuja hacia abajo y deja aire arriba. */
.cuerpo-cuestionario{ align-items: flex-start; }

@media (min-width: 48rem){
  #p-cuestionario{ --ancho-paso: 46rem; }
  .afirmacion .enunciado{ font-size: 1.06rem; }
}

/* ── Pie con estado ──────────────────────────────────────────────── */
/* Sin mayúsculas ni tracking: dentro de una barra propia funcionaban como
   rótulo de sistema, pero en el flujo de la página doce píxeles en versalitas
   entre dos botones pesan más que los botones. Es el mismo texto y el mismo
   aria-live. */
.estado-pie{
  flex: 1; margin: 0; align-self: center; text-align: center;
  color: var(--tinta-suave);
  font-family: var(--cuerpo); font-size: .8rem; font-weight: 600; line-height: 1.3;
}
.botonera-pie{ align-items: center; }
.botonera-pie .boton{ flex: 0 0 auto; }

/* Bajo 30rem el estado no cabe entre los dos botones sin partirse en tres
   líneas, así que sube a su propia fila y los botones recuperan el ancho. */
@media (max-width: 30rem){
  .botonera-pie{ flex-wrap: wrap; }
  .estado-pie{ order: -1; flex: 1 0 100%; text-align: left; margin-bottom: .5rem; }
  .botonera-pie .boton{ flex: 1; }
}

/* ── Cierre ─────────────────────────────────────────────────────── */
.brujula-latido{
  width: 88px; height: 88px; margin: 0 auto 1.5rem; border-radius: 50%;
  border: 2px solid var(--isf-cielo); position: relative;
  animation: latir 2.2s ease-in-out infinite;
}
.brujula-latido::after{
  content:""; position: absolute; inset: 0; margin: auto;
  width: 3px; height: 34px; background: var(--isf-azul);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: bottom center;
  animation: girar 3.4s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ box-shadow: 0 0 0 0 rgba(100,167,219,.4);} 50%{ box-shadow: 0 0 0 12px rgba(100,167,219,0);} }
@keyframes girar{ 0%,100%{ transform: rotate(-18deg);} 50%{ transform: rotate(18deg);} }

/* ── Resultado ──────────────────────────────────────────────────── */
/* El sello no va en mayúsculas: es una frase con una fecha larga dentro,
   no un rótulo de dos palabras. */
.sello-fecha{ font-size: var(--t-etiqueta); font-weight: 500; color: var(--tinta-suave); }
/* Nivel 1: el objeto principal de la pantalla del resultado. */
.lienzo-brujula{
  background: var(--superficie); border: 1px solid var(--linea-tenue);
  border-radius: var(--r-lg); padding: 1rem .5rem 1.25rem; margin: 1.5rem 0 2rem;
  box-shadow: var(--sombra);
}
/* Los nombres de las doce competencias se salen del viewBox a propósito: así
   el disco crece hasta el ancho disponible y los rótulos usan el aire del
   lienzo. De ahí el overflow visible y el relleno generoso en pantalla ancha.
   Bajo 34rem los nombres no caben a un tamaño legible, así que se cambian por
   los números que encabezan la tabla de competencias. */
.brujula-caja svg{
  display: block; width: 100%; height: auto; margin: 0 auto;
  max-width: 380px; overflow: visible;
}
.brujula-nombres{ display: none; }

/* En pantalla ancha los rótulos se salen del svg unos 60 px por lado y otros
   tantos por arriba y abajo, así que ese aire lo pone el relleno del lienzo y
   la separación de la leyenda. Abajo el relleno es corto porque la leyenda ya
   dejó el espacio. */
@media (min-width: 34rem){
  .lienzo-brujula{ padding: 4.75rem 5rem 1.75rem; }
  .brujula-caja svg{ max-width: 460px; }
  .brujula-nombres{ display: block; }
  .brujula-numeros{ display: none; }
}

.leyenda-principios{ display: grid; margin-top: 1.25rem; }
.leyenda-item{
  display: flex; align-items: center; gap: .6rem; padding: .6rem .1rem;
  border: 0; border-bottom: 1px solid var(--linea-tenue);
  border-radius: 0; background: none;
}
.leyenda-item:last-child{ border-bottom: 0; }
@media (min-width: 34rem){
  .leyenda-principios{
    grid-template-columns: 1fr 1fr; column-gap: 1.75rem; margin-top: 4.5rem;
  }
  .leyenda-item:nth-last-child(-n+2){ border-bottom: 0; }
}
.leyenda-item .punto{ width: 12px; height: 12px; border-radius: var(--r-sm); flex: 0 0 auto; }
.leyenda-item .nombre{ font-weight: 700; font-size: .92rem; }
.leyenda-item .rumbo-corto{ color: var(--tinta-suave); }
.leyenda-item .valor{ margin-left: auto; font-weight: 700; font-size: 1rem; }

/* ── Comparación entre dos momentos ─────────────────────────────
   La leyenda de la comparación cumple la misma función estructural que
   .leyenda-principios en el resultado: además de decir qué es cada polígono,
   es la que deja el aire que necesitan los rótulos, que se salen del svg unos
   60 px por abajo. De ahí el margen grande en pantalla ancha; sin él las
   competencias de la mitad inferior caen encima de las fechas. */
.leyenda-comparacion{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 1.5rem; margin-top: 1.25rem;
}
.clave{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--t-etiqueta); color: var(--tinta-suave);
}
/* Cada indicador espeja cómo se dibuja su polígono en js/brujula.js: el
   anterior es una línea punteada gris, el de hoy una sólida en tinta. Es una
   muestra de la línea y no un cuadrado de color, porque lo que distingue a
   los dos polígonos en el gráfico es el trazo. */
.clave i{ width: 22px; height: 0; flex: 0 0 auto; }
.clave-antes i{ border-top: 2px dashed var(--brujula-anterior); }
.clave-ahora i{ border-top: 3px solid var(--tinta); }

/* Una fila por principio, con el mismo tratamiento que la leyenda del
   resultado: punto de color y nombre, y al otro extremo de dónde a dónde se
   movió.

   No se muestra la magnitud del cambio, solo su dirección. Los dos
   porcentajes ya la contienen, y una cifra aparte invita a comparar cuánto se
   movió cada principio y a leer el que más subió como el mejor logro, que es
   justo lo que el aviso de esta pantalla pide no hacer. */
.deltas{ display: grid; margin: 1.5rem 0 0; }
.delta{
  display: flex; align-items: center; gap: .6rem; padding: .6rem .1rem;
  border-bottom: 1px solid var(--linea-tenue);
}
.delta .tramo{
  margin-left: auto; color: var(--tinta-suave); font-size: .88rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La flecha es contenido generado porque es decoración: el verbo que oye un
   lector de pantalla lo pone el JS en un span oculto. Los mismos caracteres
   que usa la flecha de orden de la tabla. Sin cambio no lleva flecha, y la
   columna se queda vacía: el tramo ya dice que los dos números son iguales. */
.delta .cifra{ min-width: 1.1rem; text-align: right; font-weight: 700; }
.delta .cifra.sube::before{ content: "\2191"; }
.delta .cifra.baja::before{ content: "\2193"; }
.delta:last-child{ border-bottom: 0; }
.delta::before{
  content: ""; width: 12px; height: 12px; border-radius: var(--r-sm);
  background: var(--delta-color); flex: 0 0 auto;
}
.delta .nombre{ font-weight: 700; font-size: .92rem; }
/* La cifra no lleva color de bueno ni de malo. La propia pantalla explica que
   evaluarse más bajo puede venir de entender mejor el tema y no es un
   retroceso; pintar la baja de rojo diría lo contrario. El signo ya distingue
   la dirección, y el numeral tabular alinea las cuatro cifras. */

@media (min-width: 34rem){
  .leyenda-comparacion{ margin-top: 4.5rem; }
  .deltas{ grid-template-columns: 1fr 1fr; column-gap: 1.75rem; }
  .delta:nth-last-child(-n+2){ border-bottom: 0; }
}

/* ── Volver ─────────────────────────────────────────────────────
   Un solo tratamiento para todas las pantallas: bajo la botonera, discreto y
   con la flecha. Discreto porque volver casi nunca es lo que la persona
   quiere hacer —compite con el botón principal— pero tiene que estar, porque
   cuando se necesita y no está, el único camino es recargar y perderlo todo.

   La flecha es contenido generado: es decoración, y el texto del botón ya
   dice a dónde lleva. */
.volver-atras{ margin: 1.1rem 0 0; text-align: center; }
.enlace-atras{
  font-family: var(--cuerpo); font-size: .88rem; font-weight: 700;
  color: var(--tinta-suave); background: none; border: 0;
  padding: .5rem .35rem; min-height: 44px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.enlace-atras::before{ content: "\2190\00a0"; text-decoration: none; }
.enlace-atras:hover{ color: var(--isf-azul); }

/* ── El plan, dentro del resultado ──────────────────────────────
   Ya no es una pantalla: es la última sección de la brújula. La línea
   superior lo separa sin encerrarlo en una caja, porque encerrarlo lo haría
   leerse como un anexo y es la parte que más importa. */
.bloque-plan{
  margin-top: 2.75rem; padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.bloque-plan .aviso-privado{ margin-top: 1rem; }

/* ── Ayudas contextuales ────────────────────────────────────────
   Un boton con un globo. Boton y no un span con :hover porque en un telefono
   no existe pasar el cursor: asi la explicacion se abre al tocar, al enfocar
   con teclado y al pasar el mouse, con las mismas reglas. */
.con-ayuda{ position: relative; display: inline-flex; }
.ayuda-disparador{
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  display: inline-flex; align-items: center; gap: .3em; cursor: help;
  text-align: left;
}
.ayuda-marca{
  flex: none; width: 1em; height: 1em; border-radius: 50%;
  border: 1px solid currentColor; opacity: .45;
  font-family: var(--cuerpo); font-size: .72em; font-style: normal;
  font-weight: 700; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center;
}
.ayuda-disparador:hover .ayuda-marca,
.ayuda-disparador:focus-visible .ayuda-marca{ opacity: 1; }

.ayuda-globo{
  position: absolute; bottom: calc(100% + .5rem); left: 0; z-index: 40;
  width: max-content; max-width: min(19rem, 70vw);
  padding: .6rem .7rem; border-radius: var(--r-md);
  background: var(--tinta); color: #fff;
  font-family: var(--cuerpo); font-size: .82rem; font-weight: 500;
  line-height: 1.45; letter-spacing: 0; text-transform: none; white-space: normal;
  box-shadow: 0 6px 20px rgb(0 0 0 / .18);
  opacity: 0; visibility: hidden; transform: translateY(.25rem);
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.con-ayuda:hover .ayuda-globo,
.con-ayuda:focus-within .ayuda-globo{ opacity: 1; visibility: visible; transform: none; }

/* Cerca del borde derecho el globo se ancla por la derecha para no salirse. */
.tabla-competencias td:last-child .ayuda-globo,
.tabla-competencias td:nth-last-child(2) .ayuda-globo{ left: auto; right: 0; }

@media (prefers-reduced-motion: reduce){
  .ayuda-globo{ transition: none; }
}

/* ── Filtros de la tabla ──────────────────────────────────────── */
.controles-tabla{
  display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem;
  margin: 1.25rem 0 .9rem;
}
.grupo-filtro{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.filtro-rotulo{ margin-right: .2rem; color: var(--tinta-suave); }
.filtro{
  font-family: var(--cuerpo); font-size: .82rem; font-weight: 700;
  color: var(--tinta-suave); background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 999px;
  padding: .32rem .7rem; cursor: pointer; min-height: 32px;
}
.filtro:hover{ border-color: var(--filtro-color, var(--isf-azul)); color: var(--tinta); }
.filtro.activo{
  color: #fff; background: var(--filtro-color, var(--isf-azul));
  border-color: var(--filtro-color, var(--isf-azul));
}

.tabla-envoltorio{ overflow-x: auto; margin-bottom: .6rem; }
.tabla-competencias{ width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla-competencias th, .tabla-competencias td{ text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linea-tenue); white-space: nowrap; }
.tabla-competencias th{ color: var(--tinta-suave); vertical-align: bottom; }
.tabla-competencias .celda-principio{ font-weight: 700; }
.tabla-competencias .celda-eje{ color: var(--tinta-suave); }
.tabla-competencias tr.elegida{ background: var(--azul-tinte); }

/* Encabezados que ordenan. */
.col-orden{ padding: 0; }
.boton-orden{
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; cursor: pointer;
  padding: .55rem .6rem; width: 100%; text-align: left;
  display: inline-flex; align-items: center; gap: .3em; min-height: 40px;
}
.boton-orden:hover{ color: var(--tinta); }
.col-orden.ordenando .boton-orden{ color: var(--isf-azul); }
/* La flecha es contenido generado y no un caracter en el HTML: es decoracion,
   y aria-sort ya le dice al lector de pantalla como esta ordenada la tabla. */
.col-orden.ordenando .boton-orden::after{ content: "\2191"; font-size: .9em; }
.col-orden.ordenando[aria-sort="descending"] .boton-orden::after{ content: "\2193"; }

/* La cifra y su etiqueta. El porcentaje nunca va solo: "70%" se lee como nota,
   "70% / de acuerdo" se lee como lo que es, una posicion en una escala. Y sin
   colores de semaforo, que convertirian la columna en un ranking. */
.celda-valor{ text-align: right; }
.celda-valor .cifra{ display: block; font-weight: 700; color: var(--tinta); }
.celda-valor .etiqueta-valor{
  display: block; font-size: .74rem; font-weight: 500;
  color: var(--tinta-suave); white-space: nowrap;
}

.col-elegir{ text-align: center; }
.elegir{ display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: .3rem; }
.elegir input{ width: 20px; height: 20px; accent-color: var(--isf-azul); cursor: pointer; }

.rotulo-elegidas{ font-family: var(--cuerpo); font-size: var(--t-etiqueta); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin: 0 0 .5rem; }
.recordatorio-elegidas[hidden]{ display: none; }
.recordatorio-elegidas{ display: grid; row-gap: .15rem; margin: 1.5rem 0; }
.recordatorio-elegidas .item{
  display: flex; align-items: center; gap: .6rem; font-size: .9rem;
  padding: .45rem .1rem .45rem .75rem; border-radius: 0; background: none;
  border: 0; border-left: 3px solid var(--elegida-color);
}
.recordatorio-elegidas .item strong{ font-weight: 700; }
.recordatorio-elegidas .item .cual{ margin-left: auto; font-size: .75rem; color: var(--tinta-suave); }

.campo-principal{
  background: var(--superficie); border: 1.5px solid var(--isf-azul);
  border-radius: var(--r-lg); padding: 1.2rem 1.15rem; margin: 1.5rem 0;
  box-shadow: var(--sombra);
}
.etiqueta-grande{ display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; line-height: 1.25; margin-bottom: .35rem; }
.etiqueta-apoyo{ display: block; font-size: .88rem; color: var(--tinta-suave); margin-bottom: .8rem; line-height: 1.5; }
.campo-principal textarea{ background: var(--fondo); }
.separador-plan{ margin-top: 2rem; }
.preguntas-plegadas{ display: grid; }
.pregunta-plegada{ background: none; border: 0; border-top: 1px solid var(--linea-tenue); border-radius: 0; padding: 0; }
.pregunta-plegada summary{ cursor: pointer; font-weight: 700; font-size: .93rem; padding: .8rem 0; list-style: none; }
.pregunta-plegada summary::-webkit-details-marker{ display: none; }
.pregunta-plegada summary::before{ content: "＋ "; color: var(--isf-azul); font-weight: 700; }
.pregunta-plegada[open] summary::before{ content: "− "; }
.pregunta-plegada .ayuda{ font-size: .87rem; color: var(--tinta-suave); margin: 0 0 .6rem; }
.pregunta-plegada textarea{ margin-bottom: 1rem; }

/* ── Meta-evaluación ────────────────────────────────────────────── */
.grupo-meta{ margin-bottom: 2rem; }
.grupo-meta > h3{ font-size: 1.05rem; padding-bottom: .5rem; border-bottom: 1px solid var(--linea-tenue); margin-bottom: 1rem; }
.item-meta{ margin-bottom: 1.35rem; }
.item-meta .enunciado{ display: block; font-size: .96rem; font-weight: 500; margin-bottom: .6rem; }
.puntos{ display: flex; gap: .4rem; }
.punto{ flex: 1; }
.punto input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.punto span{
  display: grid; place-items: center; min-height: 46px; border-radius: var(--r-md);
  background: var(--superficie); border: 1.5px solid var(--linea);
  font-weight: 700; font-size: .95rem;
  color: var(--tinta-suave); cursor: pointer;
}
.punto:has(input:checked) span{ background: var(--isf-azul); border-color: var(--isf-azul); color: #fff; }
.punto:has(input:focus-visible) span{ outline: 3px solid var(--isf-azul); outline-offset: 2px; }
.extremos{ display: flex; justify-content: space-between; font-size: .76rem; color: var(--tinta-suave); margin-top: .35rem; }

/* ── Diálogo ────────────────────────────────────────────────────────
   Reemplaza al window.confirm de la salida del cuestionario: un cartel del
   sistema, fuera del tono de la página. <dialog> trae trampa de foco y cierre
   con Esc sin código propio. */
.dialogo{
  border: 0; border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.25rem;
  max-width: 26rem; width: calc(100% - 2.5rem);
  background: var(--superficie); color: var(--tinta);
  box-shadow: 0 10px 40px rgba(27,29,33,.22);
}
.dialogo::backdrop{ background: rgba(27,29,33,.45); }
.dialogo h2{ font-size: 1.25rem; margin-bottom: .4rem; }
.dialogo p{ margin: 0; font-size: .95rem; color: var(--tinta-suave); }
.dialogo .botonera{ margin: 1.25rem 0 0; }

/* ── Impresión ──────────────────────────────────────────────────── */
.solo-imprimir{ display: none; }

@media print{
  @page{ margin: 14mm; }
  body{ background: #fff; font-size: 11pt; }
  .no-imprimir, .barra, .pantalla{ display: none !important; }
  .solo-imprimir{ display: block !important; }

  #hoja-impresion h1{ font-size: 20pt; margin-bottom: .2em; }
  #hoja-impresion h2{ font-size: 13pt; margin: 1.2em 0 .4em; page-break-after: avoid; }
  #hoja-impresion .sello{ font-size: 9pt; color: #444; margin-bottom: 1.2em; }
  #hoja-impresion svg{ width: 96mm; height: auto; display: block; margin: 0 auto 1em; overflow: visible; }
  #hoja-impresion .brujula-nombres{ display: block; }
  #hoja-impresion .brujula-numeros{ display: none; }
  #hoja-impresion .elegida-print{ border-left: 3px solid #999; padding-left: .6em; margin-bottom: .7em; page-break-inside: avoid; }
  #hoja-impresion .elegida-print .meta{ font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; color: #555; }
  #hoja-impresion .elegida-print h3{ font-size: 11.5pt; margin: .1em 0; }
  /* En papel no hay cursor ni foco: el globo no se imprime y la marca de la
     (i) sobra, pero el texto del boton tiene que quedar como texto normal. */
  .ayuda-globo, .ayuda-marca, .controles-tabla, .col-elegir{ display: none !important; }
  .ayuda-disparador{ display: inline; padding: 0; }
  #hoja-impresion .plan-print{ page-break-inside: avoid; margin-bottom: .9em; }
  #hoja-impresion .plan-print .p{ font-weight: 700; font-size: 10.5pt; margin-bottom: .15em; }
  #hoja-impresion .plan-print .r{ white-space: pre-wrap; border-left: 2px solid #ccc; padding-left: .6em; }
  #hoja-impresion table{ width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  #hoja-impresion th, #hoja-impresion td{ text-align: left; padding: .25em .4em; border-bottom: .5pt solid #ccc; }
  #hoja-impresion td:last-child, #hoja-impresion th:last-child{ text-align: right; }
  #hoja-impresion .pie{ margin-top: 1.5em; padding-top: .6em; border-top: .5pt solid #999; font-size: 8.5pt; color: #444; }
}