/* Modulo 1 -- Diagnostico de madurez digital + radar. Solo tokens de tokens.css / base.css. */

.m1-consigna { max-width: 70ch; }

/* Cuestionario y resultado: lado a lado cuando el area alcanza (resultado fijo al hacer scroll),
   si no, uno debajo del otro. */
.dg { container-type: inline-size; }
.dg { display: grid; gap: var(--spacing-xl); grid-template-columns: 1fr; align-items: start; }
.dg > * { min-width: 0; }   /* sin desplazamiento horizontal desde 320px: el hijo de grilla puede encoger */
@media (min-width: 1200px) {
  .dg { grid-template-columns: minmax(0, 1fr) 420px; }
  .dg__resultado { position: sticky; top: var(--spacing-md); }
}

.dg-dimension { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--rounded-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-md); }
/* Franja superior de 8px por paso, misma secuencia que las cabeceras de zona de la pizarra (decorativa). */
.dg-dimension { border-top-width: 8px; }
.dg-dimension--navy { border-top-color: var(--color-ja-navy); }
.dg-dimension--yellow { border-top-color: var(--color-ja-yellow); }
.dg-dimension--pale-blue { border-top-color: var(--color-ja-pale-blue); }
.dg-dimension--ice { border-top-color: var(--color-ja-ice); }
.dg-dimension--cerulean { border-top-color: var(--color-ja-cerulean); }
.dg-dimension__titulo { display: flex; align-items: center; gap: var(--spacing-sm); font-size: 18px; margin-bottom: var(--spacing-md); }
.dg-dimension__num { display: inline-grid; place-items: center; width: 32px; height: 32px; background: var(--color-ja-navy); color: var(--color-surface); border-radius: var(--rounded-sm); font-size: 16px; font-variant-numeric: tabular-nums; }

.dg-pregunta { border: 0; margin: 0 0 var(--spacing-md); padding: 0; min-width: 0; }
.dg-pregunta:last-child { margin-bottom: 0; }
.dg-pregunta__texto { font: 600 16px/1.4 var(--font-body); padding: 0; margin-bottom: var(--spacing-sm); }
.dg-escala { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--spacing-xs); }
.dg-opcion { position: relative; display: block; cursor: pointer; }
.dg-opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dg-opcion__caja { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: var(--spacing-xs); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); background: var(--color-surface); color: var(--color-ink); text-align: center; }
.dg-opcion__num { font: 700 16px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.dg-opcion__txt { font: 400 14px/1.2 var(--font-body); overflow-wrap: anywhere; }   /* 320px: la palabra se corta antes que salir de su caja */
.dg-opcion input:checked + .dg-opcion__caja { background: var(--color-ja-navy); border-color: var(--color-ja-navy); color: var(--color-surface); }
.dg-opcion input:focus-visible + .dg-opcion__caja { outline: 3px solid var(--color-ink); outline-offset: 2px; }

.dg__envio { display: grid; gap: var(--spacing-sm); justify-items: start; margin-top: var(--spacing-lg); }
.dg__envio p { margin: 0; }
.dg__faltan { font-weight: 600; }

.dg__resultado { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--rounded-md); padding: var(--spacing-lg); }
.dg__resultado:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }
.dg__subtitulo { font-size: 22px; }
.radar__figura { margin: 0 0 var(--spacing-md); }
.radar__figura svg { display: block; width: 100%; height: auto; max-width: 440px; margin: 0 auto; overflow: visible; }
.radar__lectura { max-width: 70ch; }
.radar__lectura strong { color: var(--color-ink); }

.radar__tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.radar__tabla caption { text-align: left; font: 600 14px/1.3 var(--font-body); margin-bottom: var(--spacing-xs); }
.radar__tabla th, .radar__tabla td { border: 1px solid var(--color-line); padding: var(--spacing-sm); text-align: left; vertical-align: top; }
.radar__tabla thead th { background: var(--color-ja-ice); color: var(--color-ja-navy); }
.radar__tabla td { font-variant-numeric: tabular-nums; }

/* Radar (radar-area, radar-linea). 17px en el viewBox de 440: a 372 px renderizados queda en 14 px. */
.radar-rejilla { fill: none; stroke: var(--color-line); stroke-width: 1; }
.radar-area { fill: var(--color-ja-ice); stroke: var(--color-ja-blue); stroke-width: 2; stroke-linejoin: round; }
.radar-vertice { fill: var(--color-ja-navy); }
.radar-txt { fill: var(--color-ink); font: 400 17px var(--font-body); font-variant-numeric: tabular-nums; }
.radar-txt--eje { font-weight: 700; }
.m1-cierre-enlace { margin-top: var(--spacing-xl); }

/* Capa de dinamismo (marca-jac R1, aprobada por JAC 2026-10-01): superficies en nivel 1; opcion de escala con
   fondo ice + borde navy interior + nivel 1 en hover (puntero fino), sin subir; reducido = solo color. */
.dg-dimension, .dg__resultado { box-shadow: var(--shadow-1); }
.dg-opcion__caja { transition: background-color 120ms ease-out, box-shadow 160ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .dg-opcion:hover input:not(:checked):not(:disabled) + .dg-opcion__caja { background: var(--color-ja-ice); box-shadow: inset 0 0 0 1px var(--color-ja-navy), var(--shadow-1); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .dg-opcion:hover input:not(:checked):not(:disabled) + .dg-opcion__caja { box-shadow: inset 0 0 0 1px var(--color-ja-navy); }
}

/* ---- Estilo pizarra en formato guiado (direccion, 2026-10-02): una zona por dimension con cabecera de color a sangre y la
   escala en numeros, en una sola columna; radar pegado a la derecha y tabla de puntaje al final de la pagina. Sin pizarra.
   El estilo anterior (.dg-dimension--*) se conserva: m1.js lo usa con ESTILO = 'tarjetas'. ---- */
.dg--zonas [data-dg-preguntas] { display: grid; gap: var(--spacing-md); }
.dg-zona { display: flex; flex-direction: column; gap: var(--spacing-sm); min-width: 0; padding: 17px; background: var(--color-surface); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-none); }
.dg-zona__cab { margin: -17px -17px 0; padding: var(--spacing-md); }
.dg-zona__titulo { font: 700 18px/1.35 var(--font-display); text-transform: uppercase; color: var(--color-ink); margin: 0; }
.dg-zona--navy .dg-zona__cab { background: var(--color-ja-navy); }
.dg-zona--navy .dg-zona__titulo, .dg-zona--cerulean .dg-zona__titulo { color: var(--color-surface); }
.dg-zona--yellow .dg-zona__cab { background: var(--color-ja-yellow); }
.dg-zona--ice .dg-zona__cab { background: var(--color-ja-ice); }
.dg-zona--pale-blue .dg-zona__cab { background: var(--color-ja-pale-blue); }
.dg-zona--cerulean .dg-zona__cab { background: var(--color-ja-cerulean); }
.dg-zona__puntaje { font: 600 16px/1.25 var(--font-body); font-variant-numeric: tabular-nums; margin: 0; }
.dg-zona__escala { font-size: 14px; margin: 0; }
/* La escala ya esta en la leyenda de la zona: la caja muestra el numero y el texto queda para lectores. */
.dg-zona .dg-opcion__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dg-zona .dg-opcion__caja { min-height: 44px; }
.dg-zona .dg-dimension { background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }

/* Resultado como hoja: titulo en barra propia, radar y lectura (post-it amarillo) debajo. */
.dg--zonas .dg__resultado { padding: 0; border: 1px solid var(--color-ink-soft); box-shadow: none; }
.dg--zonas .dg__subtitulo { display: flex; align-items: center; min-height: 52px; margin: 0; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-line); font: 700 18px/1.35 var(--font-display); }
.dg--zonas [data-dg-radar] { padding: var(--spacing-md); }
.dg--zonas .radar__lectura { background: var(--color-ja-yellow); color: var(--color-ja-navy); border: 1px solid var(--color-ink-soft); border-radius: var(--rounded-sm); padding: 12px; margin: 0; }
.dg--zonas .radar__lectura strong { color: var(--color-ja-navy); }
@media (min-width: 1200px) {
  .dg--zonas .dg__resultado { max-height: calc(100vh - 2 * var(--spacing-md)); overflow-y: auto; }
}

/* Tabla de puntaje: al final de la pagina, a todo el ancho. */
.dg__tabla { margin-top: var(--spacing-xl); }
@media (min-width: 700px) { .dg__tabla .radar__tabla { font-size: 16px; } }   /* a 320 px el 16 desborda la tabla */
.dg__tabla .radar__tabla caption { font: 700 18px/1.35 var(--font-display); margin-bottom: var(--spacing-sm); }

/* Zonas de a una por fila (direccion, 2026-10-02: se probaron dos por fila y se volvio a una). Para reponer dos por fila: en
   .dg--zonas [data-dg-preguntas] usar grid-template-columns: repeat(2, minmax(0, 1fr)) cuando el area de la actividad (.dg, contenedor)
   mida 1040 px o mas con el radar al costado, o 640 px o mas con el radar debajo. */