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

/* ══════════════════════════════════════════════════════════════════════════
   CHEE-49 · las clases propias de su página pública (Fase 11, entrega 11c-3)
   ══════════════════════════════════════════════════════════════════════════

   Vivían en el app.css del NÚCLEO desde el 2026-08-06, y son solo de
   /study-habits-questionnaire: las tarjetas de las dimensiones, las etapas,
   los niveles y los avisos de validez del ejemplo. Las publica
   bin/modules-publish-assets y las carga esa página en su bloque head_extra,
   que va DETRÁS de app.css —la cascada queda como estaba—, junto a la hoja
   del motor de cuestionarios, de la que toma los colores de la banda de cada
   nivel (.asbc-qn-fill--<clase>).

   Lo que sigue es el bloque tal como estaba en app.css. */

/* --- Página pública del cuestionario de hábitos de estudio (2026-08-06) -----
   /study-habits-questionnaire reutiliza el CSS COMÚN de las páginas públicas de
   contenido (.asbc-pub-*) para que las tres se lean como una sola colección. Lo
   que sigue es lo ÚNICO que esa página tiene y las otras no.

   El prefijo era .asbc-soc-* hasta el 2026-09-21: se llamaba así porque la
   primera página que lo usó fue la del sociograma, y el nombre hacía creer que
   estas clases eran de ese módulo. Lo que sigue llamándose .asbc-soc-* SÍ es del
   sociograma: los cuatro perfiles sociométricos y los colores de los anillos. */

/* Tarjetas de las dimensiones, las etapas, los niveles y los avisos de validez:
   se igualan en altura dentro de su fila para que la rejilla no quede dentada.

   Bootstrap 3 coloca las columnas con `float`, y una columna flotante NO tiene
   la altura de su fila: `height: 100%` sobre el panel no iguala nada por sí solo
   (se probó, y las cuatro tarjetas de nivel acababan a cuatro alturas). Hace
   falta convertir la fila en contenedor flexible, igual que en las tarjetas de
   la portada.

   Solo a partir de ≥768 px: por debajo, las columnas ya ocupan el ancho completo
   y se apilan, así que no hay nada que igualar. */
@media (min-width: 768px) {
    .asbc-sh-dimensions,
    .asbc-sh-stages,
    .asbc-sh-levels,
    .asbc-sh-validity {
        display: flex;
        flex-wrap: wrap;
    }
    .asbc-sh-dimensions > [class*="col-"],
    .asbc-sh-stages > [class*="col-"],
    .asbc-sh-levels > [class*="col-"],
    .asbc-sh-validity > [class*="col-"] {
        display: flex;
    }
    .asbc-sh-dimensions .panel,
    .asbc-sh-stages .panel,
    .asbc-sh-levels .panel,
    .asbc-sh-validity .panel {
        width: 100%;
    }
}
.asbc-sh-dimensions .asbc-sh-dimension h3 {
    margin-top: 0;
    font-size: 17px;
}
.asbc-sh-dimensions .asbc-sh-dimension p,
.asbc-sh-levels .asbc-sh-level p {
    margin-bottom: 0;
    font-size: 14px;
}

/* Informe individual de muestra: la etiqueta de nivel va en la cabecera de cada
   tarjeta, junto al nombre de la dimensión y su índice. */
.asbc-sh-dimensions .asbc-sh-dimension h3 .label {
    font-size: 11px;
    vertical-align: middle;
    margin: 0 4px;
}
.asbc-sh-dimensions .asbc-sh-dimension h3 small {
    color: #999;
    font-size: 13px;
}

/* El bloque de CONSEJOS se separa del párrafo interpretativo: uno describe lo
   que pasa y el otro dice qué hacer, y mezclarlos visualmente hace que el
   segundo —que es el accionable— se lea como más de lo mismo. Los consejos
   vienen del catálogo separados por "·", así que se dejan como un párrafo
   destacado en vez de trocearlos en una lista. */
.asbc-sh-advice {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid #5aa02c;
    background: #f6faf3;
    font-size: 13px;
}

/* Señales específicas (ansiedad, procrastinación…) y las tres conductas a
   cambiar: listas normales, con algo de aire y el mismo cuerpo que el resto. */
.asbc-sh-alerts,
.asbc-sh-items {
    margin-bottom: 24px;
}
.asbc-sh-alerts li,
.asbc-sh-items li {
    margin-bottom: 8px;
}

/* Banda de color de cada nivel. El color NO se declara aquí: se reutilizan las
   clases que ya pintan las barras del informe del profesor, para que la web
   pública y la aplicación hablen con los mismos colores y no haya dos sitios
   que actualizar si algún día cambian. Desde la Fase 11 (entrega 11c-2) son
   las .asbc-qn-fill--<clase> de la hoja del MOTOR de cuestionarios
   (modules/questionnaires/assets/css/questionnaires.css), que la página
   carga en su head_extra; antes eran las .sh-profile__fill--<nivel> de aquí. */
.asbc-sh-levels .asbc-sh-level-bar {
    height: 6px;
    border-radius: 3px;
    margin-bottom: 12px;
}
.asbc-sh-levels .asbc-sh-level h3 {
    margin-top: 0;
    font-size: 17px;
}
.asbc-sh-levels .asbc-sh-level h3 small {
    display: block;
    margin-top: 3px;
    color: #999;
}