/* ============================================================
   Diagnóstico de Preparación en IA — capa de componentes.

   Los tokens vienen del sistema de diseño de IA Humana y no se
   tocan: este archivo solo compone con ellos. Tres reglas de la
   marca que acá se hacen cumplir y conviene no deshacer:

   1. Toda visualización va sobre fondo blanco, sin excepciones.
      De ahí que .grafico fije #FFFFFF a mano en vez de usar un
      token de superficie.
   2. El acento es el grito, no el fondo. Se usa en bordes, en un
      botón primario y en una palabra resaltada. Nunca en rellenos
      grandes detrás de texto.
   3. Movimiento calmo. Nada rebota, nada se pasa de largo.
   ============================================================ */

/* --- Reset y base ---------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  text-wrap: pretty;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

p { margin: 0 0 var(--space-4); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- Estructura ------------------------------------------------------ */

.marco { max-width: var(--container-sm); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-20); }
.marco-ancho { max-width: var(--container-lg); margin: 0 auto; padding: var(--space-7, 1.75rem) var(--space-5) var(--space-24); }

.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.cabecera-interior {
  max-width: var(--container-lg); margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: var(--space-3); }
.marca svg { display: block; flex-shrink: 0; }
.marca-nombre { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; letter-spacing: var(--tracking-tight); }
.marca-linea { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-3); }

.cabecera-acciones { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-sm); }
.cabecera-acciones a { color: var(--text-2); }
.cabecera-acciones a:hover { color: var(--text-1); }

/* --- Tipografía de apoyo --------------------------------------------- */

.kicker {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: var(--tracking-caps); color: var(--text-3);
  text-transform: uppercase; display: block; margin-bottom: var(--space-3);
}
.kicker-acento { color: var(--accent); font-weight: var(--weight-bold); }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); color: var(--text-3); }

.titulo-portada { font-size: var(--text-2xl); line-height: 1.15; margin-bottom: var(--space-4); }
.titulo-seccion { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.entradilla { font-size: var(--text-sm); line-height: 1.55; color: var(--text-2); margin: 0 0 var(--space-6); }

.numeral { font-family: var(--font-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tighter); line-height: 1; }

/* --- Avance ----------------------------------------------------------- */

.avance { margin-bottom: var(--space-6); }
.avance-riel { height: 3px; background: var(--grey-100); border-radius: var(--radius-pill); overflow: hidden; }
.avance-barra { height: 3px; background: var(--accent); transition: width var(--dur-slow) var(--ease-out); }
.avance-nota { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-3); margin-top: var(--space-2); text-align: right; }

/* --- Superficies ------------------------------------------------------ */

.tarjeta {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.tarjeta-plana { box-shadow: none; border-radius: var(--radius-md); padding: var(--space-5); }
.tarjeta-vidrio {
  background: var(--surface-card);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-lg); padding: var(--space-6);
}
.tarjeta-hundida { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }

/* Toda visualización va sobre fondo blanco, sin excepciones. Por eso el
   color va literal y no por token: un tema oscuro futuro no debe arrastrar
   los gráficos con él. */
.grafico { background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-5); color: #0A0A0A; }
.grafico svg { display: block; }

.rejilla { display: grid; gap: var(--space-3); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.rejilla-tarjetas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- Distintivos ------------------------------------------------------ */

.distintivo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-label);
  padding: 6px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); color: var(--text-2);
}
.distintivo-acento { border-color: var(--accent-line); color: var(--accent); font-weight: var(--weight-bold); }
.distintivo-banda { background: var(--banda, var(--accent-soft)); border-color: transparent; color: var(--banda-tinta); font-weight: var(--weight-bold); text-transform: uppercase; }

/* --- Avisos ----------------------------------------------------------- */

.aviso { border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-sm); line-height: 1.55; margin-bottom: var(--space-4); }
.aviso-info { background: var(--info-soft); border: 1px solid var(--info); }
.aviso-exito { background: var(--success-soft); border: 1px solid var(--success); }
.aviso-atencion { background: var(--warning-soft); border: 1px solid var(--warning); }
.aviso-error { background: var(--danger-soft); border: 1px solid var(--danger); }
.aviso-titulo { font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.aviso ul { margin: 0; padding-left: var(--space-5); }

/* --- Formularios ------------------------------------------------------ */

.campo { margin-bottom: var(--space-5); }
fieldset.campo { margin-bottom: var(--space-6); }
.campo-etiqueta { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); line-height: 1.45; }
.campo-ayuda { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: var(--space-1); }
.campo-opcional { font-weight: var(--weight-regular); color: var(--text-3); }

input[type="text"], input[type="email"], input[type="date"], input[type="number"],
input[type="password"], input[type="file"], textarea, select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--pure); color: var(--text-1);
  font-family: inherit; font-size: var(--text-base); line-height: 1.5;
  outline: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
::placeholder { color: var(--text-3); }

.errores-campo { color: var(--danger); font-size: var(--text-xs); margin-top: var(--space-2); }
.errores-campo p { margin: 0; }

/* fieldset y legend son lo correcto para un grupo de radios: le dan al grupo
   un nombre accesible sin aria de por medio. Pero el navegador posiciona el
   legend DENTRO del área del borde, así que sobre una tarjeta con fondo el
   texto se sale por arriba en vez de quedar adentro. La salida estándar es
   flotarlo a todo el ancho, que lo devuelve al flujo normal, y limpiar el
   float en el bloque que sigue. Sin ese clear, el contenedor flex de abajo se
   monta encima del texto. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset > legend { float: left; width: 100%; padding: 0; }
fieldset::after { content: ""; display: table; clear: both; }

/* Opciones de selección única. El radio nativo sigue ahí, invisible pero
   enfocable: la fila entera es la etiqueta, así que funciona con teclado,
   con lector de pantalla y con el pulgar en un teléfono. */
.opciones { display: flex; flex-direction: column; gap: var(--space-2); clear: both; }
.opciones-fila { flex-direction: row; flex-wrap: wrap; }

.opcion {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-raised);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.opcion:hover { border-color: var(--border-strong); }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-marca {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border-strong); flex-shrink: 0; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.opcion-marca::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.opcion:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opcion:has(input:checked) .opcion-marca { border-color: var(--accent); }
.opcion:has(input:checked) .opcion-marca::after { background: var(--accent); }
.opcion:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.opcion-texto { font-size: var(--text-sm); line-height: 1.45; }
.opcion-nota { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: 2px; }

/* 44px de alto, que es el mínimo del sistema de diseño para algo que se toca.
   Las píldoras quedaban en 40. Va sin media query porque este componente solo
   aparece en el flujo del participante, que está optimizado primero para
   teléfono: no hay una pantalla densa que proteger. */
.opciones-fila .opcion { flex: 0 1 auto; min-height: 44px; padding: 9px 14px; align-items: center; border-radius: var(--radius-pill); }
.opciones-fila .opcion-marca { display: none; }

/* Casilla de escape del inventario. */
.casilla { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-raised); cursor: pointer; }
.casilla input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.casilla-marca { width: 18px; height: 18px; border-radius: var(--radius-xs); border: 1.5px solid var(--border-strong); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-on-accent); }
.casilla:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.casilla:has(input:checked) .casilla-marca { background: var(--accent); border-color: var(--accent); }
.casilla:has(input:checked) .casilla-marca::after { content: "\2713"; }

/* --- Escala de acuerdo de la Parte B ---------------------------------- */

.item {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-3);
  margin: 0 0 var(--space-3);
}
.item + .item { margin-top: var(--space-3); }
.item-texto { font-size: var(--text-sm); line-height: 1.5; margin-bottom: var(--space-3); }
.escala { display: flex; gap: var(--space-2); max-width: 320px; clear: both; }
.escala-punto {
  flex: 1; aspect-ratio: 1 / 1; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--pure); cursor: pointer;
  font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-base);
  transition: all var(--dur-fast) var(--ease-out);
}
.escala-punto input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.escala-punto:hover { border-color: var(--accent-line); }
.escala-punto:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.escala-punto:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.escala-extremos { display: flex; justify-content: space-between; max-width: 320px; margin-top: var(--space-2); font-size: 11px; color: var(--text-3); }

.grupo-nivel { margin-top: var(--space-6); }
.grupo-encabezado { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }

/* --- Botones ---------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--bg-raised); color: var(--text-1);
  font-family: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  cursor: pointer; text-decoration: none;
  transition: all var(--dur-fast) var(--ease-out);
}
.boton:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.boton:active { transform: translateY(1px); }
.boton-primario { background: var(--accent); border-color: transparent; color: var(--text-on-accent); }
.boton-primario:hover { background: var(--accent-deep); color: var(--text-on-accent); }
.boton-grande { min-height: 52px; font-size: var(--text-md); padding: 0 28px; }
.boton-ancho { width: 100%; }
.boton-chico { min-height: 36px; padding: 0 14px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.boton-texto { background: none; border: none; color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-decoration: underline; cursor: pointer; padding: var(--space-2); }
.boton-agregar { width: 100%; padding: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: none; color: var(--accent); font-family: inherit; font-weight: var(--weight-semibold); font-size: var(--text-sm); cursor: pointer; }
.boton-agregar:hover { border-color: var(--accent); background: var(--accent-soft); }

.navegacion { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.navegacion .boton-primario { flex: 1; }

.acciones { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --- Barras y tablas del tablero -------------------------------------- */

.fila-barra { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 74px; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); font-size: var(--text-sm); }
.barra-riel { height: 8px; background: var(--grey-100); border-radius: var(--radius-pill); overflow: hidden; }
.barra-relleno { height: 8px; background: var(--accent); border-radius: var(--radius-pill); }
.barra-relleno-neutra { background: var(--grey-400); }
.barra-cifra { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-2); text-align: right; }

.seccion-tablero { margin-top: var(--space-10); }
.seccion-encabezado { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }

.desplazable { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tabla th {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-3); text-transform: uppercase; text-align: left;
  padding: 0 var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.tabla td { padding: var(--space-3); border-bottom: 1px solid var(--border-faint); vertical-align: top; }
.tabla tr:last-child td { border-bottom: none; }
.tabla .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }

/* Mapa de calor. La intensidad se codifica con opacidad del acento sobre
   blanco, no con una escala de colores: una escala de rojo a verde le pone
   juicio de valor a un punto de partida que el documento pide no calificar. */
.mapa { display: grid; gap: 6px; min-width: 720px; }
.mapa-fila { display: grid; grid-template-columns: minmax(170px, 1.6fr) repeat(4, 1fr); gap: 6px; align-items: stretch; }
.mapa-columna { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-3); text-align: center; padding: var(--space-1) 0; }
.mapa-etiqueta { font-size: var(--text-sm); display: flex; align-items: center; }
.mapa-celda {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-2); text-align: center;
  display: flex; flex-direction: column; gap: 2px; background: #FFFFFF; color: #0A0A0A;
}
.mapa-celda-valor { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; }
.mapa-celda-nota { font-family: var(--font-mono); font-size: 9px; color: #5C5C5C; }
/* La banda de cada celda, con la rampa ordinal. Antes eran 24 rectángulos
   blancos con un número adentro: la forma de la tabla no decía nada y había
   que leer los 24 números para ver dónde estaba el problema. Con la rampa, la
   fila floja se ve antes de leer.

   Los dos estados sin dato se quedan en gris, fuera de la rampa: "no hay
   datos" y "no se puede mostrar" no son puntajes bajos, y pintarlos con el
   color del puntaje más bajo sería decir algo que no se sabe. */
.mapa-celda-inicial       { background: var(--banda-inicial); color: var(--banda-tinta); }
.mapa-celda-en_desarrollo { background: var(--banda-en_desarrollo); color: var(--banda-tinta); }
.mapa-celda-preparado     { background: var(--banda-preparado); color: var(--banda-tinta); }
.mapa-celda-avanzado      { background: var(--banda-avanzado); color: var(--banda-tinta); }
/* La nota va opaca. Con 72% de alfa quedaba entre 3.5:1 y 4.5:1 según el paso
   de la rampa, y son 9px: el tamaño donde menos se puede aflojar el contraste.
   La jerarquía ya la da el cuerpo de letra, no hace falta bajarle el tono. */
.mapa-celda-inicial .mapa-celda-nota,
.mapa-celda-en_desarrollo .mapa-celda-nota,
.mapa-celda-preparado .mapa-celda-nota,
.mapa-celda-avanzado .mapa-celda-nota { color: var(--banda-tinta); }
.mapa-celda-oculta { background: #F4F4EF; color: #8A8A8A; }
.mapa-celda-vacia { background: #FAFAF7; }

/* La leyenda de la rampa. Sin ella el color es decorativo. */
.mapa-leyenda { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }
.mapa-leyenda-paso { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.mapa-leyenda-muestra { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }

.fila-item { display: grid; grid-template-columns: 44px minmax(180px, 2fr) minmax(120px, 1fr) 44px; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.codigo-item { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); color: #3A3A3A; border: 1px solid #E7E7E1; border-radius: var(--radius-sm); padding: 4px 0; text-align: center; }
.texto-item { font-size: 13px; line-height: 1.45; }
.constructo-item { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: #5C5C5C; margin-top: 2px; }

.hallazgo { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--bg-raised); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.hallazgo-numero { font-family: var(--font-mono); font-size: 11px; font-weight: var(--weight-bold); color: var(--accent); padding-top: 2px; }
.hallazgo-titulo { font-size: var(--text-sm); font-weight: var(--weight-bold); margin-bottom: 3px; }
.hallazgo-texto { font-size: var(--text-sm); line-height: 1.55; color: var(--text-2); }

.dato { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.dato-valor { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 30px; letter-spacing: var(--tracking-tight); }
.dato-etiqueta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--text-3); margin-top: var(--space-1); }

/* --- Resultado individual --------------------------------------------- */

.indice { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.indice-numero { font-size: 56px; }
/* Las cuatro tarjetas llevan el color de su dimensión, el mismo que su eje en
   el radar de arriba. Eran cuatro tarjetas idénticas con la barra en oliva:
   para saber cuál era cuál en el radar había que emparejar por el nombre. El
   color hace ese trabajo. `--dim` lo pone la plantilla por tarjeta. */
.nivel-tarjeta { background: var(--bg-raised); border: 1px solid var(--border); border-top: 3px solid var(--dim, var(--accent)); border-radius: var(--radius-md); padding: var(--space-5); }
.nivel-encabezado { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.nivel-encabezado .mono { color: var(--dim, var(--text-3)); }
.nivel-puntaje { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 20px; color: var(--dim, var(--text-1)); }
.nivel-riel { height: 4px; border-radius: var(--radius-pill); background: var(--grey-100); overflow: hidden; margin-bottom: var(--space-3); }
.nivel-relleno { height: 4px; background: var(--dim, var(--accent)); }
.nivel-banda { font-size: var(--text-xs); font-weight: 700; margin-bottom: var(--space-2); }
.nivel-texto { font-size: var(--text-sm); line-height: 1.55; color: var(--text-2); }

.radar-etiquetas { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-4); border-top: 1px solid #EFEFEA; padding-top: var(--space-4); text-align: center; }
.radar-eje { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; color: #5C5C5C; text-transform: uppercase; }
.radar-valor { font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-semibold); color: #0A0A0A; }

.recomendacion { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); }
.recomendacion-numero { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--radius-pill); width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.promesa { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); font-size: var(--text-sm); line-height: 1.55; }
.promesa-marca { color: var(--accent); font-weight: var(--weight-bold); }

.revision-fila { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-faint); }
.revision-fila:last-child { border-bottom: none; }
.revision-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-300); flex-shrink: 0; }
.revision-punto-lista { background: var(--accent); }
.revision-nombre { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.revision-estado { font-size: var(--text-xs); color: var(--text-3); }

/* --- Selector de segmentos y métricas --------------------------------- */

/* --- Configuración ------------------------------------------------------
   Doce campos en una columna no se leen como una configuración. Se agrupan en
   secciones -las define el formulario, no esta hoja- y cada sección dice para
   qué sirve antes de pedir nada. */

.tiras-estado { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.tira {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line);
}
.tira-tenue { background: transparent; color: var(--text-3); border-color: var(--border); }
.tira-ia { background: var(--banda-preparado); color: var(--banda-tinta); border-color: transparent; }
.tira-activa { background: var(--success-soft); color: var(--success); border-color: transparent; }
.tira-cerrada, .tira-comparada { background: var(--info-soft); color: var(--info); border-color: transparent; }
.tira-borrador { background: var(--warning-soft); color: var(--warning); border-color: transparent; }

.bloque-config { margin-bottom: var(--space-4); }
.bloque-config-encabezado { margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-faint); }
.bloque-config-entradilla { margin: var(--space-2) 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--text-2); }
.campo-casilla { margin-bottom: var(--space-5); }
.campo-casilla .campo-ayuda { margin-top: var(--space-2); }

/* La barra de guardar se queda a la vista. El formulario es largo y el botón
   vivía después del último campo: quien cambiaba el nombre -el primer campo-
   tenía que recorrerlo entero para guardarlo. */
.barra-guardar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin: var(--space-5) 0 var(--space-8);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-overlay); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.barra-guardar-nota { font-size: var(--text-xs); color: var(--text-3); }

.lista-segmentos { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.segmento-nombre { display: inline-block; font-size: var(--text-sm); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--bg-sunken); border: 1px solid var(--border-faint); }
.segmento-vacio { font-size: var(--text-sm); color: var(--text-3); }
.fila-agregar { display: flex; gap: var(--space-2); align-items: flex-end; }

/* Lo que no se puede deshacer se ve distinto de lo que sí. Cerrar estaba con
   el mismo peso visual que agregar un segmento al catálogo. */
.bloque-peligro {
  border: 1px solid var(--danger); border-left: 4px solid var(--danger);
  border-radius: var(--radius-md); padding: var(--space-5);
  background: var(--danger-soft); margin-bottom: var(--space-6);
}
.bloque-peligro .boton { border-color: var(--danger); color: var(--danger); }

.clave-nueva { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.clave-nueva-valor { display: block; margin-top: var(--space-3); font-family: var(--font-mono); font-size: 17px; letter-spacing: 0.02em; color: var(--accent-deep); word-break: break-word; user-select: all; }
.boton-peligro { border-color: var(--danger); color: var(--danger); }

/* Dos por fila. Con la rejilla de tarjetas genérica entraban tres y la cuarta
   quedaba sola: cuatro dimensiones son dos pares, no tres y una. */
.rejilla-dimensiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .rejilla-dimensiones { grid-template-columns: 1fr; } }

.bloque-dimension { border: 1px solid var(--border); border-top: 3px solid var(--dim); border-radius: var(--radius-md); background: #FFFFFF; padding: var(--space-4) var(--space-5) var(--space-5); }
.bloque-dimension-encabezado { display: flex; justify-content: space-between; align-items: baseline; }
.bloque-dimension-encabezado .mono { color: var(--dim); }
.bloque-dimension-puntaje { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 22px; color: var(--dim); }
.bloque-dimension-pregunta { font-size: var(--text-sm); color: var(--text-2); margin-bottom: var(--space-3); }
.bloque-dimension-tira { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-3); }
.bloque-dimension-texto { font-size: var(--text-sm); line-height: 1.55; color: var(--text-2); margin: var(--space-3) 0 0; }
.distintivo-alerta { background: var(--warning-soft); border-color: transparent; color: var(--warning); font-weight: var(--weight-bold); }
.tabla-compacta td { padding: 5px 8px; font-size: 13px; }
.tabla-compacta td:first-child { width: 42px; }

.pedir-lectura { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.pedir-lectura-nota { font-size: var(--text-xs); color: var(--text-2); }

.conmutador { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-card); }
.conmutador a { padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-2); text-decoration: none; }
.conmutador a:hover { color: var(--text-1); text-decoration: none; }
.conmutador a[aria-current="true"] { background: var(--bg-raised); color: var(--text-1); box-shadow: var(--shadow-xs); }

/* --- Impresión --------------------------------------------------------- */

@media print {
  /* El diálogo de impresión del navegador trae "Gráficos de fondo" apagado por
     defecto, y con eso salen en blanco los rieles de las barras, los rellenos,
     las celdas del mapa de calor y la línea de acento de cada hallazgo. El
     radar se salva porque un `fill` de SVG no es un fondo de CSS, así que el
     informe quedaría con el gráfico y sin ninguna barra.

     `print-color-adjust: exact` le pide al navegador que respete los colores
     sin depender de esa casilla. Comprobado que el PDF sale con las barras;
     no se pudo reproducir el caso contrario en modo headless, porque
     `--print-to-pdf` imprime los fondos igual. La regla es la que cubre a
     quien imprime desde el diálogo, que es como lo dice el runbook. */
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cabecera, .no-imprimir { display: none !important; }
  body { background: #FFFFFF; }
  .marco-ancho { max-width: none; padding: 0; }
  .seccion-tablero { break-inside: avoid; page-break-inside: avoid; margin-top: var(--space-8); }
  .tarjeta, .grafico, .dato, .hallazgo { box-shadow: none; break-inside: avoid; }
  .desplazable { overflow: visible; }
  .mapa { min-width: 0; }
  a { color: #0A0A0A; text-decoration: none; }
}

@media (max-width: 640px) {
  .fila-barra { grid-template-columns: 1fr; gap: var(--space-1); }
  .fila-item { grid-template-columns: 44px 1fr; }
  .fila-item .barra-riel, .fila-item .num { grid-column: 2; }
  .navegacion { flex-direction: column-reverse; }
  .titulo-portada { font-size: var(--text-xl); }
}

/* Objetivos táctiles de 44px donde se toca con el dedo.
   Las píldoras de selección única quedaban en 40px y los botones chicos en 36,
   por debajo del mínimo del sistema de diseño. Se corrige solo para punteros
   gruesos: en el tablero, que se mira en pantalla grande, las tablas densas
   conservan su altura. */
/* El botón chico sí vive en las dos partes: en la revisión del participante y
   en las tablas densas del tablero. Solo crece donde se toca con el dedo. */
@media (pointer: coarse) {
  .boton-chico { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Pantallas de cuenta (allauth) ------------------------------------
   allauth dibuja su propio HTML con las plantillas de elementos. Acá solo se
   le da forma: no se sobrescribe ninguna de sus plantillas de formulario,
   así que una actualización de allauth no rompe nada de esto. */

.marco-cuenta { max-width: 26rem; }
.marco-cuenta h1 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.marco-cuenta > p { font-size: var(--text-sm); color: var(--text-2); }
.marco-cuenta form { margin-top: var(--space-5); }
.marco-cuenta label:not(.casilla):not(.opcion) { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
.marco-cuenta input:not([type="checkbox"]):not([type="submit"]) { margin-bottom: var(--space-4); }
.marco-cuenta button[type="submit"], .marco-cuenta input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; width: 100%; padding: 0 24px;
  background: var(--accent); border: 1px solid transparent; border-radius: var(--radius-md);
  color: var(--text-on-accent); font-family: inherit; font-size: var(--text-base);
  font-weight: var(--weight-semibold); cursor: pointer;
}
.marco-cuenta button[type="submit"]:hover, .marco-cuenta input[type="submit"]:hover { background: var(--accent-deep); }
.marco-cuenta ul { list-style: none; padding: 0; margin: var(--space-5) 0 0; font-size: var(--text-sm); }
.marco-cuenta li { margin-bottom: var(--space-2); }
.marco-cuenta .errorlist, .marco-cuenta [class*="error"] { color: var(--danger); font-size: var(--text-xs); list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.marco-cuenta .helptext { display: block; font-size: var(--text-xs); color: var(--text-3); margin: calc(var(--space-4) * -1) 0 var(--space-4); }

/* --- Estados de un participante --------------------------------------
   Cuatro estados con una progresión de color, usando la paleta de feedback que
   ya está en los tokens. El acento oliva no se usa acá: es el grito de la
   marca y se reserva para el botón primario y para los datos del resultado.

   El orden de lectura es el del embudo, y cada color dice qué hacer:
     no invitado  gris   · falta mandarle el correo, y depende de nosotros
     invitado     teal   · la pelota está de su lado, hay que esperar
     iniciado     ámbar  · empezó y no terminó, es a quien conviene recordarle
     terminado    verde  · listo

   El color nunca va solo: cada distintivo lleva su texto. Un tablero que se
   entiende por el color deja afuera a quien no distingue estos cuatro. */

.estado {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  white-space: nowrap; border: 1px solid transparent;
}
.estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

.estado-no_invitado { background: var(--bg-sunken); border-color: var(--border); color: var(--text-3); }
.estado-invitado    { background: var(--info-soft);    border-color: var(--info);    color: var(--info); }
.estado-iniciado    { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
.estado-terminado   { background: var(--success-soft); border-color: var(--success); color: var(--success); }

.estado-cuando { display: block; font-size: var(--text-xs); color: var(--text-3); margin-top: 3px; }
.estado-alerta { color: var(--warning); }

/* Los mismos cuatro colores en la fila de datos de participación, para que el
   tablero y la lista se lean con el mismo código. */
.dato-no_invitado .dato-valor { color: var(--text-3); }
.dato-invitado .dato-valor    { color: var(--info); }
.dato-iniciado .dato-valor    { color: var(--warning); }
.dato-terminado .dato-valor   { color: var(--success); }

/* --- Informe ejecutivo ------------------------------------------------
   Las dos paletas -las cuatro dimensiones y la rampa de bandas- viven en
   tokens/colors.css. Ver docs/decisions/0011-el-informe-ejecutivo.md y
   docs/decisions/0012-la-lectura-con-modelo-y-el-color.md. */


.informe { max-width: 54rem; margin: 0 auto; padding: var(--space-12) var(--space-5) var(--space-24); }
.informe-seccion { margin-bottom: var(--space-16); }
.informe-numero { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 15px; color: var(--accent); }
.informe-titulo { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-2); }
.informe-titulo h2 { font-size: var(--text-xl); }
.informe-entrada { font-size: var(--text-sm); line-height: 1.6; color: var(--text-2); margin: 0 0 var(--space-5); max-width: 41rem; }

.informe-portada h1 { font-size: var(--text-3xl); line-height: 1.1; margin-bottom: var(--space-4); }
.informe-portada .resalte { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); }
.informe-lead { font-size: var(--text-md); line-height: 1.6; color: var(--text-2); max-width: 41rem; }

.cifra { background: #FFFFFF; border: 1px solid var(--border); border-top: 4px solid var(--text-3); border-radius: var(--radius-md); padding: var(--space-5); }
.cifra-valor { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 32px; letter-spacing: var(--tracking-tight); line-height: 1; }
.cifra-titulo { font-size: var(--text-xs); font-weight: var(--weight-bold); margin-top: var(--space-2); }
.cifra-detalle { font-size: var(--text-xs); line-height: 1.5; color: var(--text-3); margin-top: 3px; }

/* El gráfico de puntos: los doce ítems sobre un eje de 1 a 5. */
.franja { display: grid; grid-template-columns: minmax(86px, 120px) 1fr; gap: 0 var(--space-4); align-items: center; border-top: 1px solid var(--border-faint); }
.franja-nombre { padding: var(--space-2) 0; }
.franja-nombre b { display: block; font-size: 13px; }
.franja-nombre span { display: block; font-size: 11px; color: var(--text-3); line-height: 1.35; }
.franja-pista { position: relative; height: 78px; }
.franja-linea { position: absolute; top: 8px; bottom: 8px; width: 0; border-left: 1px solid var(--grey-100); }
.franja-indice { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--grey-500); }

/* Cada punto es un objeto enfocable: el detalle aparece al pasar el cursor y
   también al llegar con el tabulador, o quien navega con teclado se queda sin
   la mitad del gráfico. */
.punto { position: absolute; top: 50%; width: 30px; height: 30px; transform: translate(-50%, -50%);
         display: flex; align-items: center; justify-content: center; cursor: help; border: none; background: none; padding: 0; }
.punto-marca { width: 15px; height: 15px; border-radius: 999px; border: 2.5px solid currentColor;
               box-shadow: 0 0 0 2px #FFFFFF; transition: width var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out); }
.punto:hover .punto-marca, .punto:focus .punto-marca { width: 19px; height: 19px; }
.punto-codigo { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-bold); pointer-events: none; }

.punto-detalle {
  position: absolute; bottom: 68px; width: 250px; background: #FFFFFF;
  border: 1px solid var(--border-strong); border-top: 3px solid currentColor;
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-lg); z-index: 30; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out);
}
/* `:focus` y no `:focus-visible`: el detalle es la mitad de la información
   del gráfico y tiene que aparecer siempre que el punto tenga el foco, no solo
   cuando el navegador decide que el foco se ve. Con `:focus-visible`, quien
   llega con el tabulador a veces lo tiene y a veces no, según cómo llegó. */
.punto:hover + .punto-detalle, .punto:focus + .punto-detalle { opacity: 1; visibility: visible; }
.punto-detalle-kicker { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; font-weight: var(--weight-bold); margin-bottom: 5px; }
.punto-detalle-texto { font-size: 13px; line-height: 1.5; color: var(--text-1); }
.histograma { display: flex; align-items: flex-end; gap: 5px; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-faint); }
.histograma-barra { flex: 1; text-align: center; }
.histograma-barra .n { font-family: var(--font-mono); font-size: 9px; color: var(--text-2); }
.histograma-barra .caja { height: 28px; display: flex; align-items: flex-end; }
.histograma-barra .relleno { width: 100%; border-radius: 3px 3px 0 0; background: var(--grey-400); }
.histograma-barra .v { font-family: var(--font-mono); font-size: 9px; color: var(--text-3); border-top: 1px solid var(--border); padding-top: 2px; }

/* Las brechas: dos puntos sobre un mismo riel. */
.brecha-riel { position: relative; height: 76px; }
.brecha-base { position: absolute; left: 0; right: 0; top: 26px; height: 3px; border-radius: 999px; background: var(--grey-100); }
.brecha-tramo { position: absolute; top: 26px; height: 3px; background: linear-gradient(90deg, var(--dim-capacidad), var(--dim-valor)); }
.brecha-punto { position: absolute; top: 19px; width: 17px; height: 17px; border-radius: 999px; border: 3px solid #FFFFFF; box-shadow: var(--shadow-sm); }
.brecha-cifra { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 14px; }
.brecha-etiqueta { position: absolute; transform: translateX(-50%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; font-weight: var(--weight-bold); white-space: nowrap; }

/* La cobertura: una casilla por persona. */
.casillas { display: flex; gap: 4px; flex-wrap: wrap; }
.casilla-persona { width: 16px; height: 22px; border-radius: 5px; display: inline-block; }
.casilla-llena { background: var(--dim-valor); }
.casilla-vacia { background: transparent; border: 1.5px dashed var(--grey-300); box-sizing: border-box; }

.nota-informe { border: 1px solid var(--border); border-left: 4px solid var(--dim-capacidad); background: #FFFFFF; border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.55; }
.nota-informe .kicker-nota { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: var(--weight-bold); }

@media print {
  .informe-seccion { break-inside: avoid; }
  .punto-detalle { display: none !important; }
}