/* ============================================================
   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(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); 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; }
.mapa-celda-oculta { background: #F4F4EF; color: #8A8A8A; }
.mapa-celda-vacia { background: #FAFAF7; }

.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; }
.nivel-tarjeta { background: var(--bg-raised); border: 1px solid var(--border); 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-puntaje { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: 20px; }
.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(--accent); }
.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 --------------------------------- */

.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); }