/* ==========================================================================
   INGEFULLER — CHECKLIST DE 25 PUNTOS (mini aplicación)
   --------------------------------------------------------------------------
   Se carga DESPUÉS de components1.css (header/footer compartidos) y de
   blog.css, del que hereda todos los tokens --if-*. Aquí solo se añade lo
   propio de la herramienta, con prefijo --ck-* y clases .ck-*.

   La app tiene tres vistas y el cromo del sitio cambia en cada una
   (body[data-ck-view]): la portada es una página web normal; el recorrido es
   una herramienta de campo a pantalla completa; el resultado es un informe
   imprimible.

   POR QUÉ TODOS LOS SELECTORES LLEVAN `.ck-page` DELANTE
   blog.css normaliza a `margin: 0` todos los <p>, <h1..h4>, <ul> y <ol> de la
   página con selectores de tipo (`.blog-page p`, especificidad 0-1-1), que
   ganan a cualquier regla de una sola clase (0-1-0). Sin el prefijo, cada
   margen declarado en esta hoja se perdía en silencio. Prefijar todo —y no
   solo las reglas con margen— mantiene la especificidad uniforme, así que el
   orden entre reglas propias sigue siendo el del archivo.

   Índice:
     1. Tokens propios (semáforo, prioridades, medidas de la app)
     2. Cromo por vista
     3. Primitivas (botones, campos, paneles)
     4. Portada
     5. Recorrido
     6. Resultado
     7. Invitación (CTA) y cierre
     8. Responsive
     9. Modo oscuro
    10. Impresión y preferencias del usuario
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Semáforo. Los tres tonos pasan AA sobre fondo claro para poder usarse
     también en texto, no solo en superficies. */
  --ck-verde: #0f7a3d;
  --ck-verde-soft: #eaf7ef;
  --ck-amarillo: #a86500;
  --ck-amarillo-soft: #fff8e6;
  --ck-rojo: #d50011;
  --ck-rojo-soft: #fff1f2;
  --ck-na: #6b7482;
  --ck-na-soft: #f1f4f8;

  /* Alturas de las barras fijas de la herramienta. Se declaran como tokens
     porque el contenido del recorrido tiene que despejarlas por arriba y por
     abajo, y esas dos medidas deben moverse juntas. */
  --ck-appbar-h: 62px;
  --ck-runnav-h: 74px;

  --ck-card-max: 720px;
}

/* ==========================================================================
   2. CROMO POR VISTA
   ========================================================================== */

.ck-page { background: var(--if-bg); }

.ck-page .ck-main { padding-top: var(--if-header-clear); }

/* Recorrido y resultado son pantallas de aplicación: el header fijo de 100 px
   del sitio se lleva un tercio de la pantalla útil de un celular sostenido en
   una mano mientras se camina. Cada vista trae su propia barra con salida. */
body[data-ck-view='run'] .site-header,
body[data-ck-view='result'] .site-header { display: none; }

body[data-ck-view='run'] .site-footer { display: none; }

body[data-ck-view='run'] .ck-main,
body[data-ck-view='result'] .ck-main { padding-top: 0; }

body[data-ck-view='run'] { overscroll-behavior-y: contain; }

.ck-page .ck-view[hidden] { display: none !important; }

/* Sin JavaScript no hay recorrido ni secciones generadas (semáforo, errores,
   preguntas). El script del <head> añade .js-reveal al <html>, así que su
   ausencia identifica exactamente ese caso: se esconde lo que quedaría vacío
   y se muestra el aviso con la alternativa. */
.ck-page .ck-noscript {
  display: none;
  margin: var(--if-s-6) 0 0;
  padding: var(--if-s-5);
  border: 1px solid var(--if-power);
  border-radius: var(--if-r-lg);
  background: var(--if-power-soft);
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

html:not(.js-reveal) .ck-needs-js { display: none !important; }
html:not(.js-reveal) .ck-noscript { display: block; }

/* ==========================================================================
   3. PRIMITIVAS
   ========================================================================== */

.ck-page .ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--if-s-2);
  min-height: 46px;
  padding: 0 var(--if-s-5);
  border: 1px solid transparent;
  border-radius: var(--if-r-full);
  background: none;
  font: inherit;
  font-size: var(--if-t-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--if-dur-fast) var(--if-ease),
              border-color var(--if-dur-fast) var(--if-ease),
              transform var(--if-dur-fast) var(--if-ease),
              opacity var(--if-dur-fast) var(--if-ease);
}

.ck-page .ck-btn svg { width: 18px; height: 18px; flex: none; }

.ck-page .ck-btn:active { transform: translateY(1px); }
.ck-page .ck-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.ck-page .ck-btn--primary {
  background: var(--if-btn-brand-bg);
  color: #fff;
  box-shadow: var(--if-sh-sm);
}
.ck-page .ck-btn--primary:hover { background: var(--if-brand-hover); }

.ck-page .ck-btn--neutral {
  background: var(--if-btn-neutral-bg);
  color: var(--if-btn-neutral-fg);
}

.ck-page .ck-btn--ghost {
  background: var(--if-surface);
  border-color: var(--if-border-strong);
  color: var(--if-text);
}
.ck-page .ck-btn--ghost:hover { background: var(--if-surface-hover); }

.ck-page .ck-btn--xl { min-height: 54px; padding: 0 var(--if-s-8); font-size: var(--if-t-md); }
.ck-page .ck-btn--block { width: 100%; }

.ck-page .ck-btn[data-loading='true'] { opacity: 0.7; pointer-events: none; }

.ck-page .ck-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-full);
  background: var(--if-surface);
  color: var(--if-text);
  cursor: pointer;
  transition: background var(--if-dur-fast) var(--if-ease);
}
.ck-page .ck-iconbtn:hover { background: var(--if-surface-hover); }
.ck-page .ck-iconbtn svg { width: 20px; height: 20px; }

.ck-page .ck-linkbtn {
  padding: var(--if-s-2) 0;
  border: 0;
  background: none;
  color: var(--if-brand-ink);
  font: inherit;
  font-size: var(--if-t-base);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ck-page .ck-field { display: block; }

.ck-page .ck-field__label {
  display: block;
  margin-bottom: var(--if-s-2);
  color: var(--if-text-muted);
  font-size: var(--if-t-sm);
  font-weight: 600;
}

.ck-page .ck-field__control {
  width: 100%;
  min-height: 46px;
  padding: var(--if-s-3) var(--if-s-4);
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-r-md);
  background: var(--if-surface);
  color: var(--if-text);
  font: inherit;
  font-size: var(--if-t-md); /* 16px: evita el zoom automático de iOS */
}

.ck-page .ck-field__control:focus-visible {
  outline: 2px solid var(--if-brand-ring);
  outline-offset: 1px;
  border-color: var(--if-brand-ink);
}

textarea.ck-field__control { min-height: 92px; resize: vertical; }

.ck-page .ck-req { color: var(--if-brand-ink); }

.ck-page .ck-form--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--if-s-4);
}

.ck-page .ck-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--if-s-4);
}

.ck-page .ck-form__status { margin: var(--if-s-3) 0 0; font-size: var(--if-t-base); font-weight: 600; }
.ck-page .ck-form__status[data-state='ok'] { color: var(--ck-verde); }
.ck-page .ck-form__status[data-state='error'] { color: var(--if-brand-ink); }
.ck-page .ck-form__status[data-state='load'] { color: var(--if-text-muted); }

.ck-page .ck-form__hint {
  margin: var(--if-s-3) 0 0;
  color: var(--if-text-muted);
  font-size: var(--if-t-sm);
}

.ck-page .ck-check--consent {
  display: flex;
  gap: var(--if-s-3);
  align-items: flex-start;
  margin-top: var(--if-s-2);
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
  cursor: pointer;
}
.ck-page .ck-check--consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--if-brand-ink); }

.ck-page .ck-panel {
  padding: var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-xl);
  background: var(--if-surface);
  box-shadow: var(--if-sh-sm);
}

.ck-page .ck-panel__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-panel__desc { margin: 0 0 var(--if-s-5); color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-opt {
  margin-left: var(--if-s-2);
  padding: 2px 8px;
  border-radius: var(--if-r-full);
  background: var(--if-bg-sunken);
  color: var(--if-text-subtle);
  font-family: var(--if-font-sans);
  font-size: var(--if-t-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
  vertical-align: middle;
}

/* Chip de prioridad, reutilizado en la tarjeta y en los hallazgos. */
.ck-page .ck-prio {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--if-r-full);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ck-page .ck-prio[data-prio='alta']  { background: var(--ck-rojo-soft); color: var(--ck-rojo); }
.ck-page .ck-prio[data-prio='media'] { background: var(--ck-amarillo-soft); color: var(--ck-amarillo); }
.ck-page .ck-prio[data-prio='baja']  { background: var(--ck-na-soft); color: var(--ck-na); }

/* ==========================================================================
   4. PORTADA
   ========================================================================== */

.ck-page .ck-section { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.ck-page .ck-h2 {
  margin: 0 0 var(--if-s-4);
  font-family: var(--if-font-display);
  font-size: var(--if-t-2xl);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
  color: var(--if-text);
}

.ck-page .ck-lead {
  max-width: 62ch;
  margin: 0 0 var(--if-s-6);
  color: var(--if-text-muted);
  font-size: var(--if-t-lg);
  line-height: var(--if-lh-normal);
}

.ck-page .ck-section p { max-width: 68ch; line-height: var(--if-lh-relaxed); }

/* --- Hero --- */
.ck-page .ck-hero {
  padding-block: clamp(2rem, 1rem + 4vw, 4rem) clamp(2rem, 1rem + 3vw, 3rem);
  border-bottom: 1px solid var(--if-border);
  background:
    radial-gradient(80% 120% at 12% 0%, var(--if-brand-soft) 0%, transparent 60%),
    var(--if-bg);
}

.ck-page .ck-hero__inner { max-width: 880px; margin-inline: auto; }

.ck-page .ck-hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--if-s-3);
  margin: 0 0 var(--if-s-5);
}

.ck-page .ck-tag {
  padding: 5px 12px;
  border-radius: var(--if-r-full);
  background: var(--if-btn-brand-bg);
  color: #fff;
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-hero__eyebrow-txt {
  color: var(--if-text-subtle);
  font-size: var(--if-t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-hero__title {
  margin: 0 0 var(--if-s-5);
  font-family: var(--if-font-display);
  font-size: var(--if-t-4xl);
  line-height: var(--if-lh-tight);
  letter-spacing: var(--if-track-tight);
  color: var(--if-text);
}

.ck-page .ck-hero__deck {
  max-width: 60ch;
  margin: 0 0 var(--if-s-6);
  color: var(--if-text-muted);
  font-size: var(--if-t-lg);
  line-height: var(--if-lh-normal);
}

.ck-page .ck-hero__facts {
  display: grid;
  gap: var(--if-s-3);
  margin: 0 0 var(--if-s-8);
  padding: 0;
  list-style: none;
}

.ck-page .ck-hero__facts li {
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

.ck-page .ck-hero__facts svg { width: 20px; height: 20px; flex: none; color: var(--if-brand-ink); }
.ck-page .ck-hero__facts strong { color: var(--if-text); }

.ck-page .ck-hero__actions { display: flex; flex-wrap: wrap; gap: var(--if-s-3); }

.ck-page .ck-hero__resume {
  margin: var(--if-s-4) 0 0;
  padding: var(--if-s-3) var(--if-s-4);
  border-left: 3px solid var(--if-brand-ink);
  background: var(--if-bg-subtle);
  border-radius: 0 var(--if-r-md) var(--if-r-md) 0;
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

.ck-page .ck-hero__legal {
  margin: var(--if-s-6) 0 0;
  color: var(--if-text-subtle);
  font-size: var(--if-t-sm);
  max-width: 62ch;
}

/* --- Pasos --- */
.ck-page .ck-steps {
  display: grid;
  gap: var(--if-s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.ck-page .ck-step {
  position: relative;
  padding: var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-xl);
  background: var(--if-surface);
}

.ck-page .ck-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: var(--if-s-3);
  border-radius: var(--if-r-full);
  background: var(--if-btn-brand-bg);
  color: #fff;
  font-family: var(--if-font-display);
  font-size: var(--if-t-base);
  font-weight: 800;
}

.ck-page .ck-step__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-step p { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

/* --- Nota metodológica --- */
.ck-page .ck-note {
  margin-top: var(--if-s-6);
  padding: var(--if-s-5) var(--if-s-6);
  border: 1px dashed var(--if-border-strong);
  border-radius: var(--if-r-lg);
  background: var(--if-bg-subtle);
}

.ck-page .ck-note__title {
  margin: 0 0 var(--if-s-2);
  font-size: var(--if-t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
  color: var(--if-text-subtle);
}

.ck-page .ck-note p { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

/* --- Carta --- */
.ck-page .ck-letter {
  max-width: 70ch;
  padding: var(--if-s-8) var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-2xl);
  background: var(--if-surface);
  box-shadow: var(--if-sh-sm);
}

.ck-page .ck-letter__eyebrow {
  margin: 0 0 var(--if-s-2);
  color: var(--if-brand-ink);
  font-size: var(--if-t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-letter p { color: var(--if-text-muted); }

.ck-page .ck-letter__quote {
  margin-top: var(--if-s-6);
  padding-left: var(--if-s-5);
  border-left: 3px solid var(--if-brand-ink);
  color: var(--if-text) !important;
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  line-height: var(--if-lh-snug);
}

.ck-page .ck-letter__sign {
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  margin: var(--if-s-6) 0 0;
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

.ck-page .ck-letter__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--if-r-full);
  background: var(--if-bg-sunken);
  color: var(--if-brand-ink);
  font-family: var(--if-font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* --- Consecuencias --- */
.ck-page .ck-consequences {
  display: grid;
  gap: var(--if-s-4);
  margin-top: var(--if-s-6);
}

.ck-page .ck-consequence {
  padding: var(--if-s-5);
  border: 1px solid var(--if-border);
  border-left: 3px solid var(--if-brand-ink);
  border-radius: 0 var(--if-r-lg) var(--if-r-lg) 0;
  background: var(--if-surface);
}

.ck-page .ck-consequence h3 {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-consequence p { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

/* --- Semáforo --- */
.ck-page .ck-semaforo { display: grid; gap: var(--if-s-4); }

.ck-page .ck-sem {
  padding: var(--if-s-5);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-lg);
  background: var(--if-surface);
}

.ck-page .ck-sem__dot {
  display: block;
  width: 14px;
  height: 14px;
  margin-bottom: var(--if-s-3);
  border-radius: var(--if-r-full);
}

.ck-page .ck-sem__label {
  margin: 0 0 var(--if-s-1);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-sem__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-sem__text { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-sem[data-nivel='verde']    { border-left: 4px solid var(--ck-verde); }
.ck-page .ck-sem[data-nivel='amarillo'] { border-left: 4px solid var(--ck-amarillo); }
.ck-page .ck-sem[data-nivel='rojo']     { border-left: 4px solid var(--ck-rojo); }

.ck-page .ck-sem[data-nivel='verde'] .ck-sem__dot    { background: var(--ck-verde); }
.ck-page .ck-sem[data-nivel='amarillo'] .ck-sem__dot { background: var(--ck-amarillo); }
.ck-page .ck-sem[data-nivel='rojo'] .ck-sem__dot     { background: var(--ck-rojo); }

.ck-page .ck-sem[data-nivel='verde'] .ck-sem__label { color: var(--ck-verde); }
.ck-page .ck-sem[data-nivel='amarillo'] .ck-sem__label { color: var(--ck-amarillo); }
.ck-page .ck-sem[data-nivel='rojo'] .ck-sem__label { color: var(--ck-rojo); }

/* --- Errores frecuentes --- */
.ck-page .ck-errors { display: grid; gap: var(--if-s-3); margin: 0; padding: 0; list-style: none; }

.ck-page .ck-error {
  display: flex;
  gap: var(--if-s-4);
  padding: var(--if-s-5);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-lg);
  background: var(--if-surface);
}

.ck-page .ck-error__num {
  flex: none;
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  font-weight: 800;
  color: var(--if-brand-ink);
  opacity: 0.75;
}

.ck-page .ck-error__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-error__detail { margin: 0 0 var(--if-s-2); color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-error__consequence {
  margin: 0;
  padding-top: var(--if-s-2);
  border-top: 1px solid var(--if-border);
  color: var(--if-text-muted);
  font-size: var(--if-t-sm);
}

.ck-page .ck-error__consequence strong { color: var(--ck-rojo); }

/* --- FAQ --- */
.ck-page .ck-faq { border-top: 1px solid var(--if-border); }

.ck-page .ck-faq__item { border-bottom: 1px solid var(--if-border); }
.ck-page .ck-faq__item h3 { margin: 0; }

.ck-page .ck-faq__q {
  display: flex;
  gap: var(--if-s-4);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--if-s-5) 0;
  border: 0;
  background: none;
  color: var(--if-text);
  font: inherit;
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  font-weight: 700;
  letter-spacing: var(--if-track-tight);
  text-align: left;
  cursor: pointer;
}

.ck-page .ck-faq__q svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--if-text-subtle);
  transition: transform var(--if-dur) var(--if-ease);
}

.ck-page .ck-faq__q[aria-expanded='true'] svg { transform: rotate(180deg); }

.ck-page .ck-faq__a p {
  margin: 0;
  padding: 0 0 var(--if-s-5);
  max-width: 68ch;
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

/* --- Franja CTA de portada --- */
.ck-page .ck-cta-strip {
  display: grid;
  gap: var(--if-s-5);
  padding: var(--if-s-8) var(--if-s-6);
  border-radius: var(--if-r-2xl);
  background: var(--if-n-900);
  color: var(--if-n-0);
}

.ck-page .ck-cta-strip__eyebrow {
  margin: 0 0 var(--if-s-2);
  color: rgba(255, 255, 255, 0.66);
  font-size: var(--if-t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-cta-strip__title {
  margin: 0;
  font-family: var(--if-font-display);
  font-size: var(--if-t-xl);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
  color: #fff;
}

/* ==========================================================================
   5. RECORRIDO
   ========================================================================== */

.ck-page .ck-appbar {
  position: sticky;
  top: 0;
  z-index: var(--if-z-sticky);
  background: var(--if-bg);
  border-bottom: 1px solid var(--if-border);
  padding-top: env(safe-area-inset-top, 0);
}

.ck-page .ck-appbar__inner {
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  min-height: var(--ck-appbar-h);
  max-width: var(--if-max);
  margin-inline: auto;
  padding-inline: var(--if-gutter);
}

.ck-page .ck-appbar__meter { flex: 1; min-width: 0; }

/* Una sola línea siempre: en un ancho de 390 px el medidor dispone de unos
   250 px entre los dos botones, y una etiqueta que salta de línea empuja la
   tarjeta del punto fuera de la pantalla. */
.ck-page .ck-appbar__labels {
  display: flex;
  justify-content: space-between;
  gap: var(--if-s-3);
  margin-bottom: 5px;
  color: var(--if-text-muted);
  font-size: var(--if-t-xs);
  font-weight: 600;
  white-space: nowrap;
}

.ck-page .ck-appbar__labels span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-page .ck-appbar__title {
  flex: 1;
  font-family: var(--if-font-display);
  font-size: var(--if-t-base);
  font-weight: 700;
  letter-spacing: var(--if-track-tight);
  text-align: center;
}

.ck-page .ck-progress {
  height: 6px;
  border-radius: var(--if-r-full);
  background: var(--if-bg-sunken);
  overflow: hidden;
}

.ck-page .ck-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--if-btn-brand-bg);
  transition: width var(--if-dur) var(--if-ease);
}

.ck-page .ck-stage {
  max-width: var(--ck-card-max);
  margin-inline: auto;
  padding: var(--if-s-5) var(--if-gutter) calc(var(--ck-runnav-h) + var(--if-s-8));
}

.ck-page .ck-card { outline: none; }

.ck-page .ck-card__cat {
  display: flex;
  align-items: center;
  gap: var(--if-s-2);
  margin: 0 0 var(--if-s-4);
  color: var(--if-text-muted);
  font-size: var(--if-t-sm);
  font-weight: 600;
}

.ck-page .ck-card__catletter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 7px;
  background: var(--if-bg-sunken);
  color: var(--if-text);
  font-family: var(--if-font-display);
  font-size: var(--if-t-xs);
  font-weight: 800;
}

.ck-page .ck-card[data-tono='fire']  .ck-card__catletter { background: var(--if-fire-soft);  color: var(--if-fire); }
.ck-page .ck-card[data-tono='power'] .ck-card__catletter { background: var(--if-power-soft); color: var(--if-power); }
.ck-page .ck-card[data-tono='water'] .ck-card__catletter { background: var(--if-water-soft); color: var(--if-water); }
.ck-page .ck-card[data-tono='exit']  .ck-card__catletter { background: var(--ck-verde-soft); color: var(--ck-verde); }
.ck-page .ck-card[data-tono='norm']  .ck-card__catletter { background: var(--if-norm-soft);  color: var(--if-norm); }

.ck-page .ck-card__idline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--if-s-3);
  margin-bottom: var(--if-s-3);
}

.ck-page .ck-card__num {
  font-family: var(--if-font-display);
  font-size: var(--if-t-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--if-track-tight);
  color: var(--if-text);
}

.ck-page .ck-card__num-total { color: var(--if-text-subtle); font-size: var(--if-t-md); font-weight: 700; }

.ck-page .ck-card__title {
  margin: 0 0 var(--if-s-8);
  padding-bottom: var(--if-s-5);
  border-bottom: 1px solid var(--if-border);
  font-family: var(--if-font-display);
  font-size: var(--if-t-2xl);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
  color: var(--if-text);
}

.ck-page .ck-card__block { margin-bottom: var(--if-s-6); }

.ck-page .ck-card__blocktitle {
  margin: 0 0 var(--if-s-3);
  color: var(--if-text-subtle);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

/* --- Ítems de "qué revisar" --- */
.ck-page .ck-checks { display: grid; gap: var(--if-s-2); margin: 0 0 var(--if-s-3); padding: 0; list-style: none; }

.ck-page .ck-check {
  display: flex;
  gap: var(--if-s-3);
  align-items: flex-start;
  width: 100%;
  padding: var(--if-s-3) var(--if-s-4);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-md);
  background: var(--if-surface);
  color: var(--if-text);
  font: inherit;
  font-size: var(--if-t-base);
  text-align: left;
  line-height: var(--if-lh-normal);
  cursor: pointer;
  transition: background var(--if-dur-fast) var(--if-ease),
              border-color var(--if-dur-fast) var(--if-ease);
}

.ck-page .ck-check:hover { background: var(--if-surface-hover); }

.ck-page .ck-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--if-border-strong);
  border-radius: 6px;
  color: transparent;
  transition: all var(--if-dur-fast) var(--if-ease);
}

.ck-page .ck-check__box svg { width: 13px; height: 13px; }

.ck-page .ck-check[aria-pressed='true'] { border-color: var(--ck-verde); background: var(--ck-verde-soft); }
.ck-page .ck-check[aria-pressed='true'] .ck-check__box {
  border-color: var(--ck-verde);
  background: var(--ck-verde);
  color: #fff;
}

.ck-page .ck-checks__hint { margin: 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

/* --- Detalle técnico --- */
.ck-page .ck-details {
  margin-bottom: var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-lg);
  background: var(--if-bg-subtle);
  overflow: hidden;
}

.ck-page .ck-details > summary {
  padding: var(--if-s-4) var(--if-s-5);
  color: var(--if-text);
  font-size: var(--if-t-base);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ck-page .ck-details > summary::-webkit-details-marker { display: none; }

.ck-page .ck-details > summary::after {
  content: '+';
  float: right;
  color: var(--if-text-subtle);
  font-weight: 700;
}
.ck-page .ck-details[open] > summary::after { content: '–'; }

.ck-page .ck-details__body { padding: 0 var(--if-s-5) var(--if-s-5); }

.ck-page .ck-details__body p { margin: 0 0 var(--if-s-3); color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-details__label {
  margin-top: var(--if-s-4) !important;
  margin-bottom: var(--if-s-1) !important;
  color: var(--if-text-subtle) !important;
  font-size: var(--if-t-xs) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-norma { font-family: var(--if-font-mono); font-size: var(--if-t-sm) !important; }

.ck-page .ck-validacion {
  margin-top: var(--if-s-4);
  padding: var(--if-s-4);
  border-left: 3px solid var(--if-power);
  border-radius: 0 var(--if-r-md) var(--if-r-md) 0;
  background: var(--if-power-soft);
}

.ck-page .ck-validacion__title {
  margin: 0 0 var(--if-s-1) !important;
  color: var(--if-power) !important;
  font-size: var(--if-t-xs) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-validacion p:last-child { margin-bottom: 0 !important; }

/* --- Las tres respuestas --- */
.ck-page .ck-answer { margin-bottom: var(--if-s-6); }

.ck-page .ck-options { display: grid; gap: var(--if-s-3); }

.ck-page .ck-option {
  display: flex;
  align-items: center;
  gap: var(--if-s-4);
  width: 100%;
  min-height: 62px;   /* objetivo de toque cómodo con guantes o de pie */
  padding: var(--if-s-3) var(--if-s-5);
  border: 1.5px solid var(--if-border-strong);
  border-radius: var(--if-r-lg);
  background: var(--if-surface);
  color: var(--if-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--if-dur-fast) var(--if-ease),
              background var(--if-dur-fast) var(--if-ease),
              transform var(--if-dur-fast) var(--if-ease);
}

.ck-page .ck-option:active { transform: scale(0.99); }

.ck-page .ck-option__mark {
  width: 22px;
  height: 22px;
  flex: none;
  border: 2px solid var(--if-border-strong);
  border-radius: var(--if-r-full);
  transition: all var(--if-dur-fast) var(--if-ease);
}

.ck-page .ck-option__body { display: grid; gap: 2px; }
.ck-page .ck-option__title { font-size: var(--if-t-md); font-weight: 600; }
.ck-page .ck-option__sub { color: var(--if-text-subtle); font-size: var(--if-t-sm); }

.ck-page .ck-option[data-nivel='verde']:hover    { border-color: var(--ck-verde); }
.ck-page .ck-option[data-nivel='amarillo']:hover { border-color: var(--ck-amarillo); }
.ck-page .ck-option[data-nivel='rojo']:hover     { border-color: var(--ck-rojo); }
.ck-page .ck-option[data-nivel='na']:hover       { border-color: var(--ck-na); }

.ck-page .ck-option[aria-pressed='true'][data-nivel='verde'] {
  border-color: var(--ck-verde); background: var(--ck-verde-soft);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='verde'] .ck-option__mark {
  border-color: var(--ck-verde); background: var(--ck-verde); box-shadow: inset 0 0 0 3px var(--if-surface);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='amarillo'] {
  border-color: var(--ck-amarillo); background: var(--ck-amarillo-soft);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='amarillo'] .ck-option__mark {
  border-color: var(--ck-amarillo); background: var(--ck-amarillo); box-shadow: inset 0 0 0 3px var(--if-surface);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='rojo'] {
  border-color: var(--ck-rojo); background: var(--ck-rojo-soft);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='rojo'] .ck-option__mark {
  border-color: var(--ck-rojo); background: var(--ck-rojo); box-shadow: inset 0 0 0 3px var(--if-surface);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='na'] {
  border-color: var(--ck-na); background: var(--ck-na-soft);
}
.ck-page .ck-option[aria-pressed='true'][data-nivel='na'] .ck-option__mark {
  border-color: var(--ck-na); background: var(--ck-na); box-shadow: inset 0 0 0 3px var(--if-surface);
}

/* Señal de que el avance automático está en curso: la tarjeta se atenúa un
   instante para que el cambio de punto no parezca un salto sin causa. */
.ck-page .ck-stage[data-avanzando='true'] .ck-card {
  opacity: 0.55;
  transition: opacity var(--if-dur-fast) var(--if-ease);
}

/* --- Nota de campo --- */
.ck-page .ck-noteblock { padding-top: var(--if-s-2); }
.ck-page .ck-note-wrap { margin-top: var(--if-s-2); }
.ck-page .ck-note-wrap__hint { margin: var(--if-s-2) 0 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

/* --- Barra inferior de navegación --- */
.ck-page .ck-runnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--if-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  min-height: var(--ck-runnav-h);
  padding: var(--if-s-3) var(--if-gutter);
  padding-bottom: calc(var(--if-s-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--if-border);
  background: var(--if-bg);
  box-shadow: 0 -6px 18px -12px rgba(0, 0, 0, 0.5);
}

.ck-page .ck-runnav .ck-btn { flex: 1; }
.ck-page .ck-runnav .ck-btn--ghost { flex: 0 1 auto; }

body[data-ck-view='run'] .ck-runnav { display: flex; }
body:not([data-ck-view='run']) .ck-runnav { display: none; }

/* --- Hoja del índice --- */
.ck-page .ck-sheet { position: fixed; inset: 0; z-index: var(--if-z-top); }
.ck-page .ck-sheet[hidden] { display: none; }

.ck-page .ck-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 11, 16, 0.55);
  backdrop-filter: blur(2px);
}

.ck-page .ck-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--if-r-2xl) var(--if-r-2xl) 0 0;
  background: var(--if-bg);
  box-shadow: var(--if-sh-xl);
}

.ck-page .ck-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--if-s-4);
  padding: var(--if-s-5) var(--if-gutter);
  border-bottom: 1px solid var(--if-border);
}

.ck-page .ck-sheet__title {
  margin: 0;
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-sheet__body {
  overflow-y: auto;
  padding: var(--if-s-5) var(--if-gutter) calc(var(--if-s-8) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

.ck-page .ck-idxgroup { margin-bottom: var(--if-s-6); }

.ck-page .ck-idxgroup__title {
  display: flex;
  align-items: center;
  gap: var(--if-s-2);
  margin: 0 0 var(--if-s-3);
  color: var(--if-text-muted);
  font-family: var(--if-font-sans);
  font-size: var(--if-t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-idxlist { display: grid; gap: var(--if-s-2); margin: 0; padding: 0; list-style: none; }

.ck-page .ck-idxitem {
  display: flex;
  align-items: center;
  gap: var(--if-s-3);
  width: 100%;
  min-height: 48px;
  padding: var(--if-s-2) var(--if-s-4);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-md);
  background: var(--if-surface);
  color: var(--if-text);
  font: inherit;
  font-size: var(--if-t-base);
  text-align: left;
  cursor: pointer;
}

.ck-page .ck-idxitem[data-current='true'] { border-color: var(--if-text); box-shadow: var(--if-sh-sm); }

.ck-page .ck-idxitem__num {
  flex: none;
  font-family: var(--if-font-display);
  font-weight: 800;
  color: var(--if-text-subtle);
}

.ck-page .ck-idxitem__title { flex: 1; }

.ck-page .ck-idxitem__dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: var(--if-r-full);
  border: 1.5px solid var(--if-border-strong);
}

.ck-page .ck-idxitem[data-nivel='verde'] .ck-idxitem__dot    { background: var(--ck-verde); border-color: var(--ck-verde); }
.ck-page .ck-idxitem[data-nivel='amarillo'] .ck-idxitem__dot { background: var(--ck-amarillo); border-color: var(--ck-amarillo); }
.ck-page .ck-idxitem[data-nivel='rojo'] .ck-idxitem__dot     { background: var(--ck-rojo); border-color: var(--ck-rojo); }
.ck-page .ck-idxitem[data-nivel='na'] .ck-idxitem__dot       { background: var(--ck-na); border-color: var(--ck-na); }

/* ==========================================================================
   6. RESULTADO
   ========================================================================== */

.ck-page .ck-result { padding-block: var(--if-s-8) var(--if-s-10); }

.ck-page .ck-report__head { margin-bottom: var(--if-s-6); }

.ck-page .ck-report__eyebrow {
  margin: 0 0 var(--if-s-2);
  color: var(--if-brand-ink);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-report__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-3xl);
  line-height: var(--if-lh-tight);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-report__meta { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-alert {
  display: grid;
  gap: var(--if-s-4);
  margin-bottom: var(--if-s-6);
  padding: var(--if-s-5);
  border: 1px solid var(--if-power);
  border-radius: var(--if-r-lg);
  background: var(--if-power-soft);
}

.ck-page .ck-alert__title { margin: 0 0 var(--if-s-1); font-weight: 700; color: var(--if-power); }
.ck-page .ck-alert p { margin: 0; color: var(--if-text-muted); font-size: var(--if-t-base); }

/* --- Puntaje --- */
.ck-page .ck-score {
  display: grid;
  gap: var(--if-s-6);
  align-items: center;
  padding: var(--if-s-8) var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-2xl);
  background: var(--if-surface);
  box-shadow: var(--if-sh-md);
}

.ck-page .ck-score[data-banda='bajo']     { --ck-banda: var(--ck-verde); }
.ck-page .ck-score[data-banda='moderado'] { --ck-banda: var(--ck-amarillo); }
.ck-page .ck-score[data-banda='alto']     { --ck-banda: var(--ck-rojo); }

.ck-page .ck-score__gauge {
  position: relative;
  width: 180px;
  height: 180px;
  justify-self: center;
  flex: none;
}

.ck-page .ck-score__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* El arco se dibuja con un gradiente cónico: sin SVG, sin librería. */
  background: conic-gradient(
    var(--ck-banda) calc(var(--ck-pct) * 1%),
    var(--if-bg-sunken) 0
  );
  -webkit-mask: radial-gradient(circle at center, transparent 60%, #000 61%);
          mask: radial-gradient(circle at center, transparent 60%, #000 61%);
}

.ck-page .ck-score__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.ck-page .ck-score__value strong {
  font-family: var(--if-font-display);
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: var(--if-track-tight);
  color: var(--ck-banda);
}

.ck-page .ck-score__value span { color: var(--if-text-subtle); font-size: var(--if-t-sm); font-weight: 600; }

.ck-page .ck-score__band {
  margin: 0 0 var(--if-s-1);
  color: var(--ck-banda);
  font-size: var(--if-t-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-score__subtitle {
  margin: 0 0 var(--if-s-3);
  font-family: var(--if-font-display);
  font-size: var(--if-t-xl);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-score__text { margin: 0 0 var(--if-s-5); color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-score__tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ck-page .ck-score__tally li {
  padding: 6px 12px;
  border-radius: var(--if-r-full);
  font-size: var(--if-t-sm);
  font-weight: 600;
}
.ck-page .ck-score__tally li[data-nivel='verde']    { background: var(--ck-verde-soft); color: var(--ck-verde); }
.ck-page .ck-score__tally li[data-nivel='amarillo'] { background: var(--ck-amarillo-soft); color: var(--ck-amarillo); }
.ck-page .ck-score__tally li[data-nivel='rojo']     { background: var(--ck-rojo-soft); color: var(--ck-rojo); }
.ck-page .ck-score__tally li[data-nivel='na']       { background: var(--ck-na-soft); color: var(--ck-na); }

.ck-page .ck-score__note { margin: var(--if-s-4) 0 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

/* --- Acciones --- */
.ck-page .ck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s-3);
  margin: var(--if-s-6) 0 var(--if-s-10);
}

/* --- Bloques del informe --- */
.ck-page .ck-block { margin-bottom: var(--if-s-12); }

.ck-page .ck-block__title {
  margin: 0 0 var(--if-s-2);
  font-family: var(--if-font-display);
  font-size: var(--if-t-xl);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-block__lead { margin: 0 0 var(--if-s-6); max-width: 68ch; color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-empty {
  padding: var(--if-s-5);
  border: 1px dashed var(--ck-verde);
  border-radius: var(--if-r-lg);
  background: var(--ck-verde-soft);
  color: var(--if-text-muted);
}

/* --- Barras por categoría --- */
.ck-page .ck-bars { display: grid; gap: var(--if-s-4); margin-top: var(--if-s-5); }

.ck-page .ck-bar {
  padding: var(--if-s-4) var(--if-s-5);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-lg);
  background: var(--if-surface);
}

.ck-page .ck-bar[data-nivel='verde']    { --ck-bar-color: var(--ck-verde); }
.ck-page .ck-bar[data-nivel='amarillo'] { --ck-bar-color: var(--ck-amarillo); }
.ck-page .ck-bar[data-nivel='rojo']     { --ck-bar-color: var(--ck-rojo); }
.ck-page .ck-bar[data-nivel='na']       { --ck-bar-color: var(--ck-na); }

.ck-page .ck-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--if-s-4);
  margin-bottom: var(--if-s-3);
}

.ck-page .ck-bar__head h3 {
  display: flex;
  align-items: center;
  gap: var(--if-s-2);
  margin: 0;
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-bar__score {
  flex: none;
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  font-weight: 800;
  color: var(--ck-bar-color);
}

.ck-page .ck-bar__track { height: 8px; border-radius: var(--if-r-full); background: var(--if-bg-sunken); overflow: hidden; }

.ck-page .ck-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ck-bar-color);
}

.ck-page .ck-bar__legend { margin: var(--if-s-2) 0 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

/* --- Hallazgos --- */
.ck-page .ck-findings { display: grid; gap: var(--if-s-4); margin-top: var(--if-s-5); }

.ck-page .ck-finding {
  padding: var(--if-s-5);
  border: 1px solid var(--if-border);
  border-left-width: 4px;
  border-radius: 0 var(--if-r-lg) var(--if-r-lg) 0;
  background: var(--if-surface);
}

.ck-page .ck-finding[data-nivel='rojo']     { border-left-color: var(--ck-rojo); }
.ck-page .ck-finding[data-nivel='amarillo'] { border-left-color: var(--ck-amarillo); }

.ck-page .ck-finding__head {
  display: flex;
  align-items: flex-start;
  gap: var(--if-s-3);
  margin-bottom: var(--if-s-3);
}

.ck-page .ck-finding__num {
  flex: none;
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  font-weight: 800;
  color: var(--if-text-subtle);
}

.ck-page .ck-finding__head > div { flex: 1; min-width: 0; }

.ck-page .ck-finding__title {
  margin: 0 0 2px;
  font-family: var(--if-font-display);
  font-size: var(--if-t-md);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-finding__cat { margin: 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

.ck-page .ck-finding__risk { margin: 0 0 var(--if-s-3); color: var(--if-text-muted); font-size: var(--if-t-base); }

.ck-page .ck-finding__norma {
  margin: 0;
  color: var(--if-text-subtle);
  font-family: var(--if-font-mono);
  font-size: var(--if-t-sm);
}

.ck-page .ck-finding__note {
  margin: var(--if-s-3) 0 0;
  padding: var(--if-s-3) var(--if-s-4);
  border-radius: var(--if-r-md);
  background: var(--if-bg-subtle);
  font-size: var(--if-t-base);
}

/* --- Plan de acción --- */
.ck-page .ck-plan { display: grid; gap: var(--if-s-5); }

.ck-page .ck-horizon {
  padding: var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-xl);
  background: var(--if-surface);
}

.ck-page .ck-horizon__head { margin-bottom: var(--if-s-4); padding-bottom: var(--if-s-3); border-bottom: 1px solid var(--if-border); }

.ck-page .ck-horizon__title {
  margin: 0 0 2px;
  font-family: var(--if-font-display);
  font-size: var(--if-t-lg);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-horizon__foco { margin: 0; color: var(--if-text-subtle); font-size: var(--if-t-sm); }

.ck-page .ck-horizon__own {
  margin-bottom: var(--if-s-5);
  padding: var(--if-s-4);
  border-radius: var(--if-r-md);
  background: var(--if-bg-subtle);
}

.ck-page .ck-horizon__ownlabel,
.ck-page .ck-horizon__baselabel {
  margin: 0 0 var(--if-s-3);
  color: var(--if-text-subtle);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-ownlist { display: grid; gap: var(--if-s-2); margin: 0; padding: 0; list-style: none; }

.ck-page .ck-ownlist li {
  display: flex;
  gap: var(--if-s-3);
  align-items: baseline;
  padding-left: var(--if-s-3);
  border-left: 3px solid var(--if-border-strong);
  font-size: var(--if-t-base);
  font-weight: 600;
}

.ck-page .ck-ownlist li[data-nivel='rojo']     { border-left-color: var(--ck-rojo); }
.ck-page .ck-ownlist li[data-nivel='amarillo'] { border-left-color: var(--ck-amarillo); }

.ck-page .ck-ownlist__num { flex: none; font-family: var(--if-font-display); font-weight: 800; color: var(--if-text-subtle); }

.ck-page .ck-baselist { display: grid; gap: var(--if-s-2); margin: 0; padding-left: 1.2em; }
.ck-page .ck-baselist li { color: var(--if-text-muted); font-size: var(--if-t-base); }

/* --- No aplica --- */
.ck-page .ck-nalist { display: grid; gap: var(--if-s-3); margin: var(--if-s-4) 0 0; padding: 0; list-style: none; }

.ck-page .ck-nalist li {
  padding: var(--if-s-4);
  border: 1px dashed var(--if-border-strong);
  border-radius: var(--if-r-md);
  color: var(--if-text-muted);
  font-size: var(--if-t-base);
}

.ck-page .ck-nalist__val { display: block; margin-top: var(--if-s-2); color: var(--if-text-subtle); font-size: var(--if-t-sm); }

.ck-page .ck-disclaimer {
  max-width: 76ch;
  padding: var(--if-s-5);
  border-radius: var(--if-r-lg);
  background: var(--if-bg-subtle);
  color: var(--if-text-subtle);
  font-size: var(--if-t-sm);
  line-height: var(--if-lh-normal);
}

/* ==========================================================================
   7. INVITACIÓN (CTA) Y CIERRE
   ========================================================================== */

.ck-page .ck-invite {
  padding-block: clamp(3rem, 2rem + 4vw, 5rem);
  border-top: 1px solid var(--if-border);
  background: var(--if-bg-subtle);
}

.ck-page .ck-invite__inner { max-width: 780px; margin-inline: auto; }

.ck-page .ck-invite__eyebrow {
  margin: 0 0 var(--if-s-2);
  color: var(--if-brand-ink);
  font-size: var(--if-t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--if-track-wide);
}

.ck-page .ck-invite__title {
  margin: 0 0 var(--if-s-5);
  font-family: var(--if-font-display);
  font-size: var(--if-t-2xl);
  line-height: var(--if-lh-snug);
  letter-spacing: var(--if-track-tight);
}

.ck-page .ck-invite__text { margin: 0 0 var(--if-s-4); color: var(--if-text-muted); font-size: var(--if-t-md); line-height: var(--if-lh-relaxed); }

.ck-page .ck-invite__form {
  display: grid;
  gap: var(--if-s-4);
  margin-top: var(--if-s-8);
  padding: var(--if-s-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-r-xl);
  background: var(--if-surface);
  box-shadow: var(--if-sh-sm);
}

.ck-page .ck-invite__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--if-s-2);
  justify-content: center;
  margin: var(--if-s-6) 0 0;
  color: var(--if-text-subtle);
  font-size: var(--if-t-base);
}

.ck-page .ck-invite__contact a { color: var(--if-text-muted); }

.ck-page .ck-closing { border-top: 1px solid var(--if-border); }
.ck-page .ck-closing p { color: var(--if-text-muted); }

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */

@media (min-width: 640px) {
  .ck-page .ck-form--grid,
  .ck-page .ck-form__row { grid-template-columns: 1fr 1fr; }

  .ck-page .ck-semaforo { grid-template-columns: repeat(3, 1fr); }
  .ck-page .ck-consequences { grid-template-columns: repeat(3, 1fr); }

  .ck-page .ck-alert { grid-template-columns: 1fr auto; align-items: center; }

  .ck-page .ck-cta-strip { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 900px) {
  .ck-page .ck-steps { grid-template-columns: repeat(3, 1fr); }

  .ck-page .ck-score { grid-template-columns: 200px 1fr; gap: var(--if-s-10); }
  .ck-page .ck-score__gauge { justify-self: start; }

  .ck-page .ck-plan { grid-template-columns: 1fr 1fr; }

  .ck-page .ck-bars { grid-template-columns: 1fr 1fr; }
}

/* En pantallas grandes la barra inferior del recorrido deja de ser una barra
   de pulgar y se convierte en una fila centrada bajo la tarjeta. */
@media (min-width: 1024px) {
  .ck-page .ck-runnav {
    justify-content: center;
    padding-inline: var(--if-gutter);
  }
  .ck-page .ck-runnav .ck-btn { flex: 0 1 auto; min-width: 180px; }

  /* La hoja del índice deja de ser una hoja de pulgar y se centra como
     diálogo, para no estirar 25 títulos a lo ancho de un monitor. */
  .ck-page .ck-sheet__panel {
    left: 50%;
    right: auto;
    bottom: 5vh;
    width: min(720px, 92vw);
    max-height: 82vh;
    transform: translateX(-50%);
    border-radius: var(--if-r-2xl);
  }
}

/* ==========================================================================
   9. MODO OSCURO
   Mismo patrón de tres bloques que blog.css: elección explícita oscura,
   preferencia del sistema, y nunca una definición única dentro del media.
   ========================================================================== */

:root[data-theme='dark'] {
  --ck-verde: #43c97f;
  --ck-verde-soft: rgba(67, 201, 127, 0.14);
  --ck-amarillo: #f5c451;
  --ck-amarillo-soft: rgba(245, 196, 81, 0.14);
  --ck-rojo: #ff6b76;
  --ck-rojo-soft: rgba(255, 107, 118, 0.14);
  --ck-na: #a9b4c4;
  --ck-na-soft: rgba(169, 180, 196, 0.13);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ck-verde: #43c97f;
    --ck-verde-soft: rgba(67, 201, 127, 0.14);
    --ck-amarillo: #f5c451;
    --ck-amarillo-soft: rgba(245, 196, 81, 0.14);
    --ck-rojo: #ff6b76;
    --ck-rojo-soft: rgba(255, 107, 118, 0.14);
    --ck-na: #a9b4c4;
    --ck-na-soft: rgba(169, 180, 196, 0.13);
  }
}

:root[data-theme='dark'] .ck-cta-strip { border: 1px solid var(--if-border); background: var(--if-bg-sunken); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .ck-cta-strip { border: 1px solid var(--if-border); background: var(--if-bg-sunken); }
}

/* ==========================================================================
   10. IMPRESIÓN Y PREFERENCIAS DEL USUARIO
   El informe se imprime tal como se ve, pero sin cromo de aplicación: es el
   documento que el administrador lleva al Consejo o a la Asamblea.
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .ck-page .ck-appbar,
  .ck-page .ck-runnav,
  .ck-page .ck-sheet,
  .ck-page .ck-actions,
  .ck-page .ck-noprint,
  .ck-page .ck-alert .ck-btn,
  .ck-page .ck-invite__form,
  .skip-link,
  .to-top { display: none !important; }

  .ck-page .ck-main { padding-top: 0 !important; }

  .ck-page .ck-page,
  .ck-page .ck-result,
  .ck-page .ck-score,
  .ck-page .ck-bar,
  .ck-page .ck-finding,
  .ck-page .ck-horizon { background: #fff !important; color: #000 !important; box-shadow: none !important; }

  .ck-page .ck-result { padding: 0; max-width: none; }

  .ck-page .ck-block,
  .ck-page .ck-horizon,
  .ck-page .ck-finding,
  .ck-page .ck-score { break-inside: avoid; page-break-inside: avoid; }

  .ck-page .ck-block__title,
  .ck-page .ck-report__title { break-after: avoid; }

  .ck-page .ck-plan,
  .ck-page .ck-bars { grid-template-columns: 1fr 1fr; }

  .ck-page .ck-invite { border: 1px solid #ccc; padding: 12pt; }

  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-page .ck-btn,
  .ck-page .ck-option,
  .ck-page .ck-check,
  .ck-page .ck-progress__bar,
  .ck-page .ck-faq__q svg,
  .ck-page .ck-stage[data-avanzando='true'] .ck-card {
    transition: none !important;
    animation: none !important;
  }
}

/* Foco visible coherente con el resto del sitio. */
.ck-page .ck-btn:focus-visible,
.ck-page .ck-iconbtn:focus-visible,
.ck-page .ck-option:focus-visible,
.ck-page .ck-check:focus-visible,
.ck-page .ck-idxitem:focus-visible,
.ck-page .ck-faq__q:focus-visible,
.ck-page .ck-linkbtn:focus-visible {
  outline: 2px solid var(--if-brand-ink);
  outline-offset: 2px;
}