/* /var/www/asbc.es/public_html/assets/css/app.css
 *
 * CSS de la aplicación (no afecta a emails ni a la página de error standalone).
 *
 * Este fichero recoge clases utilitarias reemplazo de los style="..." inline
 * que existían en plantillas Twig. Se carga desde base_html.twig vía
 * assets/css/app.css.
 *
 * Está diseñado para coexistir con Bootstrap 3 (la app lo usa); las clases
 * .asbc-* tienen prefijo para no chocar con clases del framework.
 */

/* Logo de la marca en la barra de navegación. El logo0.jpg es muy grande en
   origen: .navbar-brand de Bootstrap 3 tiene 15px de relleno vertical sobre
   una barra de 50px de alto, así que se limita la ALTURA de la imagen a 20px
   (y se anula el relleno superior/inferior heredado para centrarla). El ancho
   se ajusta solo manteniendo la proporción. */
.navbar-brand.asbc-brand {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    /*height: 50px; */

    height: 110px; /* 100 de imagen + 10 de marco vacio*/
}
.navbar-brand.asbc-brand img {
    height: 100px;
    width: auto;
    display: block;
}

/* Envoltura para mostrar un tooltip (atributo title) sobre un botón
   DESHABILITADO. Los controles deshabilitados no reciben eventos de ratón en
   varios navegadores (Chrome incluido), por lo que su `title` no se muestra al
   pasar por encima. Poniendo el `title` en este <span> contenedor —que sí
   recibe el hover— el tooltip aparece, y `pointer-events:none` en el botón deja
   pasar el ratón al span. El cursor "no permitido" da la pista visual. */
.asbc-disabled-wrap {
    display: inline-block;
    cursor: not-allowed;
}
.asbc-disabled-wrap > .btn[disabled] {
    pointer-events: none;
}

/* === Utilidades de display ================================================ */

/* Bootstrap 3 no incluye `.d-inline` (esa clase es de Bootstrap 4/5). Como las
 * plantillas Twig la usan abundantemente para meter <form> dentro de un
 * `panel-heading` o de una celda de tabla — al ser <form> un bloque por
 * defecto, sin esta clase los botones aparecen apilados verticalmente — la
 * definimos aquí con `display: inline-block` (no `inline` puro, para preservar
 * los anchos y márgenes del botón) y un pequeño espaciado lateral entre cada
 * elemento adyacente, idéntico al gap natural entre <a class="btn"> contiguos
 * de Bootstrap. Sin esto, en /results los botones Activate/Deactivate /
 * Archive / Reset / Download CSV aparecían apilados en columna en lugar de en
 * fila — visible en el sprint actual, punto 1. */
.d-inline {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
}
/* Sin margen izquierdo en el primero de la línea, para no crear "huecos
 * fantasma" al inicio de la barra de acciones. */
.d-inline:first-child {
    margin-left: 0;
}

/* === Imágenes y avatares =================================================== */

.asbc-pic-thumb-sm {
    max-height: 64px;
    border: 1px solid #ddd;
    padding: 2px;
}

.asbc-pic-thumb-md {
    max-height: 160px;
}

/* Avatar fijo 100×100 para listados (también funciona para 50×50 si se
   prefiere ese tamaño). Aplica tanto a SVG (que escala con width/height)
   como a thumbnails PNG/JPG. object-fit:cover recorta el sobrante en
   imágenes no cuadradas para que nunca se deformen. */
.asbc-avatar-100 {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}
.asbc-avatar-50 {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

/* === Forms y listas ======================================================== */

.asbc-form-inline {
    /* Forma de "inline" para los <form> de borrado dentro de una tabla
       de acciones. Necesario para que botones quepan en la misma línea
       que el resto de enlaces. */
    display: inline;
}

/* Sprint 2026-05-27 (correo interno).

   `.asbc-navbar-form`: <form> del botón "Cerrar sesión" dentro de la
   navbar. Replica EXACTAMENTE el relleno que Bootstrap aplica a los
   enlaces de navegación vecinos (`.navbar-nav > li > a`), de modo que
   el botón de logout quede a la misma altura que Perfil/Correo/Panel/
   Contacto (antes el form no compartía ese padding y el botón salía
   desalineado, más arriba que los demás).

   - En estado colapsado (móvil, < 768px) los enlaces usan padding
     10px 15px (regla `.nav > li > a`).
   - En estado expandido (>= 768px) usan padding 15px (regla
     `.navbar-nav > li > a`). Reproducimos ambos. */
.navbar-nav > li > form.asbc-navbar-form {
    margin: 0;
    padding: 10px 15px;
}
@media (min-width: 768px) {
    .navbar-nav > li > form.asbc-navbar-form {
        padding: 15px;
    }
}

/* `.asbc-message-body`: cuerpo de un mensaje del correo interno. El
   texto es plano y se muestra con |nl2br (que ya convierte los saltos
   de línea en <br>); aquí sólo evitamos que las palabras largas (URLs)
   desborden el panel. No usamos `white-space: pre-wrap` para no duplicar
   los saltos que ya inserta nl2br. */
.asbc-message-body {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* `.asbc-directory`: contenedor (well) de la AGENDA del formulario de
   redacción del correo interno. La agenda del SUPERADMIN puede listar
   TODOS los profesores de TODOS los centros, así que acotamos la altura
   y dejamos scroll vertical para que el formulario no crezca sin límite.
   Para la agenda corta de un profesor (colegas de su centro) el
   max-height no llega a aplicarse y se ve igual que antes. */
.asbc-directory {
    max-height: 320px;
    overflow-y: auto;
}

.asbc-label-natural {
    /* Texto del <label> al lado de un checkbox: peso normal y cursor
       pointer para que se vea claramente que es clicable. */
    font-weight: normal;
    cursor: pointer;
}

/* === Tablas ================================================================ */

.asbc-col-narrow   { width:  60px; }   /* checkboxes */
.asbc-col-code     { width: 180px; }   /* códigos de alumno */
.asbc-col-active   { width:  80px; }   /* "Active" en columnas de acciones */
.asbc-col-avatar   { width: 110px; }   /* columna de avatar 100px + padding */

/* Centrado vertical para tablas con avatares: si no, los datos quedan
   pegados arriba y el avatar parece flotar. Se activa con la clase
   .table-vcenter en la <table>. */
.table-vcenter > tbody > tr > td {
    vertical-align: middle;
}

/* === Espaciado ============================================================= */

.asbc-spacer-md {
    height: 20px;
}

/* === Items: imagetextrelations ============================================ */

/* Cada imagen opción es un label clickable. El radio queda oculto pero
   funcional. Al pasar el ratón por encima, la imagen se resalta. */
.asbc-image-option {
    display: block;
    cursor: pointer;
    padding: 8px;
    border: 2px solid transparent;
    border-radius: 4px;
    margin-bottom: 8px;
}
.asbc-image-option:hover {
    border-color: #5bc0de;
}
.asbc-image-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.asbc-image-option input[type="radio"]:checked + img {
    box-shadow: 0 0 0 3px #5cb85c;
}

/* Resaltado de la imagen correcta en modo View/Check. */
.asbc-image-correct {
    padding: 8px;
    border: 2px solid #5cb85c;
    border-radius: 4px;
    background: #dff0d8;
}

/* === Items: shortanswers ================================================== */
/* Texto del item con huecos: salto de línea natural y tipografía un punto
   más grande para que destaque sobre el statement. */
.answer-text {
    font-size: 1.15em;
    line-height: 1.8;
}

/* Input que reemplaza un hueco {{N}} en modo Do. Inline para que no rompa
   la línea, ancho fijo razonable y borde Bootstrap-friendly. */
.inline-input {
    display: inline-block;
    width: auto;
    min-width: 6em;
    margin: 0 4px;
}

/* Respuesta correcta en modo View/Check: fondo amarillo claro para que
   el profesor la identifique a simple vista. */
.answer-highlight {
    background: #fff3a0;
    padding: 1px 6px;
    border-radius: 3px;
}

/* === Tipografía ============================================================ */

.asbc-uppercase {
    text-transform: uppercase;
}

/* === Auditor de imágenes (Admin) =========================================== */

/* Tabla del informe en /admin/assets: las celdas con paths a ficheros son
   largas y el truncado de Bootstrap quedaría feo. Las dejamos con
   word-break para que se rompan elegantemente. */
.asbc-asset-path {
    font-family: monospace;
    font-size: 0.9em;
    word-break: break-all;
}
/* Resumen con números grandes — un "card" simple. */
.asbc-asset-stat {
    display: inline-block;
    min-width: 140px;
    margin: 4px;
    padding: 12px 16px;
    background: #f5f5f5;
    border-left: 4px solid #5bc0de;
    border-radius: 2px;
}
.asbc-asset-stat strong { display: block; font-size: 1.6em; line-height: 1; }
.asbc-asset-stat.danger  { border-left-color: #d9534f; }
.asbc-asset-stat.warning { border-left-color: #f0ad4e; }
.asbc-asset-stat.success { border-left-color: #5cb85c; }

/* `.asbc-superadmin-banner`: banda informativa bajo el navbar que indica
   al SUPERADMIN si está actuando como ADMINISTRADOR (rutas /admin/...) o
   como PROFESOR (resto). Sprint papelera-SUPERADMIN. Letra algo mayor y
   en rojo, centrada, a todo el ancho. Solo se renderiza para SUPERADMIN
   (condición en base.html.twig). */
.asbc-superadmin-banner {
    text-align: center;
    font-size: 1.25em;
    font-weight: 700;
    color: #a94442;                 /* rojo (mismo tono que alert-danger) */
    background-color: #f9eaea;
    border-bottom: 2px solid #d9534f;
    padding: 6px 12px;
    letter-spacing: 0.3px;
}
/* Matiz cromático según el contexto, conservando el rojo del texto para
   que destaque tal y como se pidió. */
.asbc-superadmin-banner--admin   { background-color: #f9eaea; }
.asbc-superadmin-banner--teacher { background-color: #fdf3f3; }

/* Pie de página (2026-07-02): fondo oscuro (Bootstrap navbar-inverse). Se pide
   que TODOS los textos (enlaces legales, aviso de donación y copyright) salgan
   en BLANCO y CENTRADOS. El color/centrado va aquí (no inline) porque la CSP
   del .htaccess prohíbe estilos en línea. */
.footer {
    text-align: center;
}
/* Blanco para el texto plano y para TODOS los enlaces del pie (que por defecto
   Bootstrap pintaría en azul sobre el fondo oscuro). */
.footer,
.footer a,
.footer .copyright,
.footer .asbc-footer-links > li > a,
.footer .asbc-donation {
    color: #fff;
}
.footer a:hover,
.footer a:focus {
    color: #fff;
    text-decoration: underline;
}
/* Separación vertical entre las tres líneas y corte de la dirección de bitcoin
   (larga) para que no desborde en pantallas estrechas. */
.footer .asbc-footer-links {
    margin-bottom: 6px;
}
.footer .asbc-donation {
    margin-bottom: 6px;
    word-break: break-all;
}

/* === Migración CSP 2026-07-04: reemplazo de los style="..." inline ========
   La CSP del .htaccess (style-src 'self', sin 'unsafe-inline') bloquea los
   atributos style="..." del HTML servido. Estas clases sustituyen a TODOS los
   que quedaban en plantillas Twig. El JS puede seguir usando el.style.* en
   tiempo de ejecución (la CSSOM no está sujeta a style-src). */

/* --- Espaciado (valores heredados de los inline que reemplazan) --- */
.asbc-mt-0  { margin-top: 0; }
.asbc-mt-5  { margin-top: 5px; }
.asbc-mt-8  { margin-top: 8px; }
.asbc-mt-10 { margin-top: 10px; }
.asbc-mb-8  { margin-bottom: 8px; }
.asbc-mb-10 { margin-bottom: 10px; }
.asbc-mb-15 { margin-bottom: 15px; }
.asbc-ml-4  { margin-left: 4px; }
.asbc-ml-8  { margin-left: 8px; }
.asbc-mr-4  { margin-right: 4px; }
.asbc-mr-12 { margin-right: 12px; }

/* --- Oculto: estado inicial servido por el servidor. El JS lo conmuta con
   classList (ver billing-form.js). No usar para ocultaciones en tiempo de
   ejecución: para eso el.style.display sigue siendo válido bajo CSP. --- */
.asbc-hidden { display: none; }

/* --- Botón deshabilitado con aspecto "apagado" (Delete no disponible en
   listados, Recuperar sin grupo activo, etc.). Acompaña al atributo
   disabled, que es quien realmente inhabilita el control. --- */
.asbc-btn-disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* --- Columna estrecha (32px) del checkbox de selección en las tablas de
   papelera/huérfanos. Distinta de .asbc-col-narrow (60px). --- */
.asbc-col-check { width: 32px; }

/* --- Contador de participantes sobre la cabecera coloreada del panel de
   resultados: blanco y negrita para que sea legible sobre el fondo. --- */
.asbc-panel-heading-count {
    color: #fff;
    font-weight: bold;
}

/* --- <label> de radio dentro de un panel-heading (cierre de cuenta /
   cierre de profesor por admin): sin margen y en negrita. --- */
.asbc-panel-radio-label {
    margin: 0;
    font-weight: bold;
}

/* --- Corte elegante de códigos largos (grupo/centro) en <code>. --- */
.asbc-break-all { word-break: break-all; }

/* --- Tabla de corrección manual (items/check): dos mitades fijas. --- */
.asbc-table-fixed {
    width: 100%;
    table-layout: fixed;
}
.asbc-w-50 { width: 50%; }

/* --- Aviso informativo de la portada: color de texto original. --- */
.asbc-home-notice { color: navy; }

/* --- /profile: fila del código de centro (código + botón Copiar) y el
   propio código en grande para que se pueda dictar/copiar sin error. --- */
.asbc-code-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.asbc-code-big {
    font-size: 1.6em;
    color: #c9302c;
    font-weight: bold;
    letter-spacing: 1px;
    word-break: break-all;
    background: #fff;
    border: 1px solid #ebccd1;
    padding: 6px 10px;
    border-radius: 4px;
}

/* --- Leyendas del sociograma individual: mismos colores que los SVG
   (octantes y anillos del mapa de distancia social). --- */
.asbc-soc-blue      { color: #1e6fc4; }
.asbc-soc-blue-soft { color: #a8c2e8; }
.asbc-soc-red       { color: #b22222; }
.asbc-soc-red-soft  { color: #d8a5a5; }

/* --- Informe sociométrico: pista visual del género en la tabla resumen,
   misma convención de color que el SVG (#8FBC8F male / #F5DEB3 female). --- */
.asbc-gender-male {
    background-color: #8FBC8F;
    color: #222;
}
.asbc-gender-female {
    background-color: #F5DEB3;
    color: #222;
}

/* --- Informe sociométrico: PERFIL del alumno (2026-07-13) -------------------
   Etiqueta de color junto al nombre en la tabla de indicadores individuales.
   Los colores son EXACTAMENTE los del título del diagrama de estatus
   (SociometricProfile::color()), para que la tabla y el SVG se lean como una
   sola cosa. Van en CSS y no en un `style` inline porque la CSP del proyecto
   (style-src 'self') bloquea los estilos en línea.

   El púrpura del "controvertido" es la mezcla del azul del popular y el rojo
   del rechazado — que es justo lo que ese perfil significa: alto en los dos. */
.asbc-soc-profile-popular       { background-color: #1e6fc4; color: #fff; }
.asbc-soc-profile-rejected      { background-color: #b22222; color: #fff; }
.asbc-soc-profile-controversial { background-color: #8e44ad; color: #fff; }
.asbc-soc-profile-ignored       { background-color: #666666; color: #fff; }

/* === 2FA del superadmin (tarjeta de coordenadas, 2026-07-05) =============== */

/* Coordenada del reto de login, resaltada para que no haya dudas de cuál es. */
.asbc-2fa-coord {
    font-family: monospace;
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: 2px;
    color: #c9302c;
}

/* Rejilla 8x8 de la tarjeta de enrolamiento: celdas monoespaciadas y centradas
   para que se lea/imprima como una tabla de coordenadas. */
.asbc-2fa-card td {
    font-family: monospace;
    font-size: 1.05em;
    letter-spacing: 1px;
}
.asbc-2fa-card th {
    background: #f5f5f5;
}

/* Al IMPRIMIR (o guardar como PDF desde el navegador) se ocultan los controles
   y avisos: sólo sale la tarjeta. */
@media print {
    .asbc-2fa-noprint {
        display: none !important;
    }
}

/* === PÁGINAS PÚBLICAS DE CONTENIDO (SEO, 2026-07-14) ======================= */
/* Estilos de /school-sociogram (templates/public/sociogram.html.twig) y del
   panel que la anuncia en la portada. Todo vive aquí (y no en atributos `style`)
   porque la CSP del proyecto (`style-src 'self'`) bloquea los estilos en línea.

   La página alterna TEXTO e IMAGEN a izquierda y derecha con la rejilla de
   Bootstrap (col-md-7 / col-md-5 + push/pull). En pantallas pequeñas las
   columnas se apilan y el texto queda siempre por encima de su ilustración. */

/* Contenedor de la página: texto algo más aireado que el del resto de la
   aplicación, porque aquí se LEE (no se opera). */
.asbc-soc-page {
    font-size: 15px;
    line-height: 1.65;
}
.asbc-soc-page h2 {
    margin-top: 40px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}
.asbc-soc-page h3 {
    margin-top: 18px;
    font-size: 19px;
}
.asbc-soc-page .lead {
    color: #33475b;
}

/* H1 de la cabecera (.page-header del layout). Se define aquí porque el layout
   no traía ningún h1 y el de Bootstrap saldría desproporcionado. */
.asbc-soc-h1 {
    margin: 0;
    font-size: 30px;
}

/* Fila de texto + ilustración. El margen inferior las separa entre sí. */
.asbc-soc-block {
    margin-bottom: 30px;
}

/* Ilustración: nunca desborda su columna (img-responsive de Bootstrap ya pone
   max-width:100%) y se enmarca con un borde suave para que se distinga del
   texto. El pie va en gris y pequeño: es una aclaración, no contenido.

   INDEPENDIENTE DEL TAMAÑO DE LA IMAGEN (2026-07-14). Las ilustraciones se
   regeneran de vez en cuando (`bin/sociogram-demo` y capturas de la cuenta demo)
   y pueden cambiar de dimensiones y de proporción: los mapas de distancia social
   ya lo hicieron. Por eso aquí NO se fija nunca el alto Y el ancho a la vez ni se
   emiten width/height en el HTML: se limita una dimensión y la otra queda en
   `auto`, de modo que el navegador reescala proporcionalmente lo que le pongas.
   Cambiar una captura no obliga a tocar el CSS. */
.asbc-soc-figure {
    margin: 10px 0 20px;
}
.asbc-soc-figure img {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 6px;
    background: #fff;
    /* Techo de altura para que una imagen muy vertical (o un SVG cuadrado de
       1000x1000) no se coma la pantalla. El ancho lo limita .img-responsive al
       de la columna; `auto` en la otra dimensión conserva la proporción. */
    max-height: 460px;
    width: auto;
}
.asbc-soc-figure figcaption {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #777;
    text-align: center;
}

/* Figuras ENFRENTADAS de dos en dos (popular vs rechazado: mapa de distancia
   social y diagrama de estatus). La comparación ES el argumento de esas dos
   secciones, así que las dos imágenes tienen que leerse como comparables:

     · Se igualan POR ALTURA (mismo max-height), que es lo único que las hace
       visualmente equiparables aunque sus tamaños en píxeles no coincidan —y no
       coinciden— o cambien al regenerarlas.
     · El techo es mayor que el general (460 → 560): son ilustraciones VERTICALES
       y con el techo común quedaban demasiado estrechas para leer los anillos y
       los octantes. Aun así caben de sobra en media fila (col-md-6). */
.asbc-soc-figure--pair img {
    max-height: 560px;
}

/* Los cuatro pasos (HowTo). Tarjetas de igual altura con el número destacado. */
.asbc-soc-steps {
    margin-top: 20px;
}
.asbc-soc-step {
    height: 100%;
}
.asbc-soc-step h3 {
    margin-top: 6px;
    font-size: 17px;
}
.asbc-soc-step p {
    font-size: 14px;
}
.asbc-soc-step-num {
    display: inline-block;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 50%;
    background: #1e6fc4;    /* Mismo azul que las elecciones en los grafos. */
    color: #fff;
    font-weight: bold;
    font-size: 17px;
}

/* Los cuatro perfiles sociométricos. La etiqueta de color del encabezado usa
   las clases .asbc-soc-profile-{popular,rejected,ignored,controversial} que YA
   existen más arriba (las de la tabla de indicadores del informe), para que la
   web pública y la aplicación hablen con los mismos colores. */
.asbc-soc-profile-card .panel-title .label {
    font-size: 14px;
    padding: 5px 12px;
}
.asbc-soc-profile-card .panel-body p {
    margin-bottom: 0;
}

/* Llamada a la acción del final. */
.asbc-soc-cta {
    margin-top: 40px;
}
.asbc-soc-cta .panel-title {
    margin: 0;
    font-size: 18px;
}

/* Panel de la PORTADA que anuncia la página del sociograma: miniatura del grafo
   a la izquierda y el reclamo a la derecha. La miniatura se limita en altura
   para que no empuje al texto fuera de la pantalla en tabletas. */
.asbc-home-sociogram-thumb {
    max-height: 190px;
    width: auto;
}

/* --- Lupa de las ilustraciones (2026-07-14) --------------------------------
   Las ilustraciones de /school-sociogram se muestran reducidas junto al texto
   que las explica; al pulsarlas se abren a tamaño completo en el modal de
   Bootstrap (ver assets/js/sociogram-lightbox.js). Estas reglas son solo la
   señal visual de que la imagen se puede ampliar y el encaje de la imagen
   dentro de la ventana. */

/* El cursor de lupa avisa de que la imagen es pulsable; el borde se resalta al
   pasar por encima. En una tableta no hay "pasar por encima": para eso está el
   aviso .asbc-soc-zoom-hint bajo la primera ilustración. */
.asbc-soc-zoom {
    cursor: zoom-in;
    display: block;
}
.asbc-soc-zoom:hover img,
.asbc-soc-zoom:focus img {
    border-color: #1e6fc4;
}

.asbc-soc-zoom-hint {
    margin-top: -10px;
    font-size: 13px;
}

/* Dentro de la ventana, la imagen se ve tan grande como quepa sin obligar a
   hacer scroll: nunca más ancha que el diálogo ni más alta que la pantalla. */
.asbc-soc-lightbox-img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
}

/* El diálogo, más ancho que el modal-lg estándar (900 px) en pantallas grandes:
   las capturas del informe rondan los 1200 px y con menos ancho se leerían mal. */
@media (min-width: 1200px) {
    .asbc-soc-lightbox .modal-dialog {
        width: 1140px;
    }
}