/* /var/www/asbc.es/modules/questionnaires/assets/css/questionnaires.css */

/* ══════════════════════════════════════════════════════════════════════════
   MOTOR DE CUESTIONARIOS · las pantallas de informes (Fase 11, entrega 11c-2)
   ══════════════════════════════════════════════════════════════════════════

   Nació en el app.css del NÚCLEO como el perfil del CHEE-49 (2026-08-03, con
   el prefijo .sh-*) y se mudó al motor con sus pantallas: eran reglas de un
   instrumento en el fichero que carga toda la aplicación (el mismo problema
   que el Z-08 del sociograma). Las publica bin/modules-publish-assets y las
   cargan las plantillas del motor en su bloque head_extra, con
   module_asset('questionnaires', 'css/questionnaires.css'). head_extra va
   DETRÁS de app.css, así que la cascada queda en el mismo orden que cuando
   estas reglas vivían al final de aquel fichero.

   Barras horizontales del perfil por dimensión (0-100), en los informes
   individual y de grupo. Sin SVG y sin JS: unas <div> y unas anchuras.

   POR QUÉ LAS ANCHURAS VAN EN CLASES Y NO EN UN `style` INLINE
   -------------------------------------------------------------
   La Content-Security-Policy del sitio es `style-src 'self'`, sin
   'unsafe-inline': un `style="width:73%"` en la plantilla sería bloqueado por
   el navegador y TODAS las barras saldrían a cero. Por eso la anchura se elige
   entre 21 clases predefinidas, en pasos de 5 puntos, y la plantilla redondea
   el índice al múltiplo de 5 más cercano. La etiqueta numérica sigue mostrando
   el valor EXACTO: el redondeo es solo del dibujo, no del dato.

   LOS COLORES, POR LA CLASE DEL NIVEL
   -----------------------------------
   Por lo mismo, el color de un nivel no puede salir del `color` de la
   definición: un nivel se pinta por su CLASE contextual (danger, warning,
   info, success; Level::CSS_CLASSES, y el validador rechaza cualquier otra).
   Los cuatro colores son los del CHEE-49, que declara una clase distinta por
   nivel: el informe se ve exactamente como antes del motor.

   LAS BANDAS DEL FONDO, CON LOS CORTES DE CADA CUESTIONARIO
   ---------------------------------------------------------
   El carril lleva las bandas de los niveles muy desaturadas, para que se vea
   DÓNDE cae la puntuación aunque el relleno sea corto. En el CHEE-49 eran un
   degradado con sus cortes escritos aquí (40, 60 y 80); en el motor cada
   cuestionario tiene los suyos, así que la plantilla las pinta como un tramo
   por nivel, con su anchura (LevelBands) y su clase.

   ACCESIBILIDAD: cada barra lleva role="img" y un aria-label con la dimensión,
   su puntuación y su nivel, de modo que un lector de pantalla no dependa del
   color ni de la longitud del relleno. */

.asbc-qn-profile { margin: 0 0 18px; }

.asbc-qn-profile__row {
    display: table;
    width: 100%;
    margin-bottom: 6px;
}
.asbc-qn-profile__label,
.asbc-qn-profile__value,
.asbc-qn-profile__track-cell {
    display: table-cell;
    vertical-align: middle;
}
.asbc-qn-profile__label {
    width: 210px;
    padding-right: 10px;
    font-size: 13px;
    line-height: 1.25;
}
.asbc-qn-profile__value {
    width: 58px;
    padding-left: 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* Carril de la barra. `overflow: hidden` recorta las bandas con las esquinas
   redondeadas, como hacía el degradado por sí solo. */
.asbc-qn-profile__track {
    position: relative;
    height: 18px;
    border-radius: 3px;
    overflow: hidden;
}

/* Las bandas: una fila de tramos, uno por nivel, que ocupa el carril entero
   por debajo del relleno. */
.asbc-qn-profile__bands {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
}
.asbc-qn-band { height: 100%; }
.asbc-qn-band--danger  { background-color: #f6e3e3; }
.asbc-qn-band--warning { background-color: #fbf0dc; }
.asbc-qn-band--info    { background-color: #eaf3e2; }
.asbc-qn-band--success { background-color: #dfeeda; }

/* El relleno, POSICIONADO para pintarse encima de las bandas. */
.asbc-qn-profile__fill {
    position: relative;
    height: 100%;
    border-radius: 3px;
}

/* Color del relleno según la clase del nivel alcanzado. Son los del CHEE-49,
   los mismos del `color` de sus niveles, que usan sus gráficos: el informe web
   y las imágenes coinciden. La página pública del CHEE-49 los usa también en
   la banda de color de cada nivel. */
.asbc-qn-fill--danger  { background-color: #b22222; }
.asbc-qn-fill--warning { background-color: #e08e0b; }
.asbc-qn-fill--info    { background-color: #5aa02c; }
.asbc-qn-fill--success { background-color: #2d7a2d; }

/* Dimensión estimada por prorrateo: se raya para que se distinga de un dato
   completo sin depender del texto que la acompaña. */
.asbc-qn-profile__fill--estimated {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 4px,
        transparent 4px, transparent 8px
    );
}

/* Dimensión sin datos suficientes: carril vacío con trama, sin bandas ni
   relleno. */
.asbc-qn-profile__track--nodata {
    background: repeating-linear-gradient(
        45deg,
        #f2f2f2 0, #f2f2f2 5px, #e8e8e8 5px, #e8e8e8 10px
    );
}

/* Índice global, en grande, encabezando el informe individual. */
.asbc-qn-global {
    margin: 0 0 6px;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
}
.asbc-qn-global--danger  { color: #b22222; }
.asbc-qn-global--warning { color: #e08e0b; }
.asbc-qn-global--info    { color: #5aa02c; }
.asbc-qn-global--success { color: #2d7a2d; }
.asbc-qn-global__scale { font-size: 18px; font-weight: 400; color: #777; }

/* Celda de la tabla alumno × dimensión del informe de grupo, y de la tabla de
   distribución por niveles: semáforo con el número dentro. El color de fondo
   es el del nivel, aclarado; el texto se mantiene oscuro para que el contraste
   sea legible. */
.asbc-qn-cell { text-align: center; font-weight: 600; }
.asbc-qn-cell--danger  { background-color: #f7dede; }
.asbc-qn-cell--warning { background-color: #fbf0dc; }
.asbc-qn-cell--info    { background-color: #e6f2dd; }
.asbc-qn-cell--success { background-color: #d6ebd0; }
.asbc-qn-cell--nodata  { background-color: #f2f2f2; color: #999; }

/* Señales y conductas a cambiar del informe individual. */
.asbc-qn-item-list { margin: 0; padding-left: 18px; }
.asbc-qn-item-list li { margin-bottom: 6px; }
.asbc-qn-item-answer { color: #777; font-size: 12px; }

/* Anchuras de relleno y de las bandas, en pasos de 5 puntos (ver la nota de la
   CSP arriba y LevelBands::STEP). */
.asbc-qn-w-0 { width: 0%; }
.asbc-qn-w-5 { width: 5%; }
.asbc-qn-w-10 { width: 10%; }
.asbc-qn-w-15 { width: 15%; }
.asbc-qn-w-20 { width: 20%; }
.asbc-qn-w-25 { width: 25%; }
.asbc-qn-w-30 { width: 30%; }
.asbc-qn-w-35 { width: 35%; }
.asbc-qn-w-40 { width: 40%; }
.asbc-qn-w-45 { width: 45%; }
.asbc-qn-w-50 { width: 50%; }
.asbc-qn-w-55 { width: 55%; }
.asbc-qn-w-60 { width: 60%; }
.asbc-qn-w-65 { width: 65%; }
.asbc-qn-w-70 { width: 70%; }
.asbc-qn-w-75 { width: 75%; }
.asbc-qn-w-80 { width: 80%; }
.asbc-qn-w-85 { width: 85%; }
.asbc-qn-w-90 { width: 90%; }
.asbc-qn-w-95 { width: 95%; }
.asbc-qn-w-100 { width: 100%; }