/* ============================================================
   fcqb-ui.css — Tema visual institucional FCQB (capa sobre Bootstrap 5)
   ────────────────────────────────────────────────────────────
   Mismo lenguaje visual que el sistema de Login:
   cabecera con logos, barra azul, tarjetas blancas con borde
   izquierdo azul, esquinas rectas, Montserrat para títulos y
   botones, Barlow Semi Condensed para texto.

   CÓMO USARLO EN CUALQUIER PÁGINA:
     1. Cargar Bootstrap.
     2. Cargar el style.css propio de la página (si existe).
     3. Cargar ESTE archivo al final, para que sus reglas ganen:
        <link rel="stylesheet" href="../recursos/fcqb-ui.css">
   No cambia ningún id ni clase que use jQuery: sólo apariencia.
   ============================================================ */


/* ============================================================
   1. VARIABLES (colores institucionales y de estado)
   ============================================================ */
:root {
    --amarillo-base:          #C49E0D;   /* Oro institucional */
    --azul-base:              #08338F;   /* Azul institucional */
    --gris-base:              #DBE1EA;   /* Gris de bordes */
    --azul-claroestrambotico: #0094CD;   /* Azul claro para enlaces y acentos */
    --amarillo-estrambotico:  #FFCC00;   /* Amarillo brillante */
    --azul-oscuro:            #1A2B4C;   /* Texto principal y hover de botones */
    --amarillo-oscuro:        #877514;   /* Oro oscuro */
    --minimal-base:           #ecf2ff;   /* Fondo de página azul muy claro */
    --montserrat:             "Montserrat", sans-serif;            /* Títulos y botones */
    --Barlow:                 "Barlow Semi Condensed", sans-serif; /* Texto general */

    --fcqb-rojo:        #B3261E;   /* Error / eliminar */
    --fcqb-rojo-fondo:  #FCEEEE;   /* Fondo de alertas de error */
    --fcqb-rojo-texto:  #8C1D18;   /* Texto de alertas de error */
    --fcqb-verde:       #1E6B34;   /* Éxito */
    --fcqb-verde-fondo: #E6F4EA;   /* Fondo de alertas de éxito */
    --fcqb-oro-fondo:   #FFF8E1;   /* Fondo de alertas de advertencia */
    --fcqb-oro-texto:   #6B5300;   /* Texto de alertas de advertencia (contraste AA) */
    --fcqb-info-fondo:  #E3F0FA;   /* Fondo de alertas informativas */
    --fcqb-info-texto:  #0B5A8A;   /* Texto de alertas informativas */
    --fcqb-gris-texto:  #6B7A90;   /* Texto secundario */
    --fcqb-sombra:      0 4px 32px rgba(8, 51, 143, 0.10); /* Sombra de tarjetas (igual que el login) */
    --fcqb-foco:        0 0 0 3px rgba(8, 51, 143, 0.15);  /* Anillo de foco de campos y botones */

    /* Relleno común: todas las tarjetas, acordeones y modales alinean su contenido al mismo borde interior */
    --fcqb-relleno-x:   44px;      /* Relleno horizontal (escritorio) */
    --fcqb-relleno-y:   40px;      /* Relleno vertical (escritorio) */
    --fcqb-separacion:  24px;      /* Espacio entre tarjetas */
}

@media (max-width: 767px) {
    :root {
        --fcqb-relleno-x: 24px;    /* Relleno horizontal en móvil */
        --fcqb-relleno-y: 28px;    /* Relleno vertical en móvil */
    }
}


/* ============================================================
   2. BASE
   ============================================================ */
body {
    background: var(--minimal-base);     /* Fondo azul muy claro, como el login */
    color: var(--azul-oscuro);           /* Texto principal */
    font-family: var(--Barlow);          /* Tipografía de texto */
}

a { color: var(--azul-base); }                        /* Enlaces en azul institucional */
a:hover { color: var(--azul-claroestrambotico); }     /* Azul claro al pasar el cursor */

.text-primary { color: var(--azul-base) !important; } /* Reemplaza el azul genérico de Bootstrap */
.text-muted   { color: var(--fcqb-gris-texto) !important; } /* Gris secundario con mejor contraste */

.separador { margin: 32px 0; }           /* Espaciado vertical más compacto que el original (40-60 px) */


/* ============================================================
   3. CABECERA INSTITUCIONAL (idéntica al sistema de Login)
   Marcado: recursos/cabecera.php
   ============================================================ */
.fcqb-cabecera {                         /* Franja dorada con logos */
    background: var(--amarillo-base);    /* Fondo oro */
    text-align: center;                  /* Logos centrados */
}

.fcqb-cabecera .container {              /* Contenedor de la fila de logos */
    display: flex;                       /* Logos e info en fila */
    flex-wrap: wrap;                     /* Permite bajar en pantallas angostas */
    align-items: stretch;                /* Misma altura */
}

.fcqb-cabecera img {                     /* Imágenes de los logos */
    width: 100%;                         /* Ocupan su celda */
    height: 100%;                        /* Ocupan su celda */
    object-fit: contain;                 /* Sin deformarse */
    vertical-align: middle;              /* Sin espacio fantasma debajo */
}

.fcqb-cabecera .uas,
.fcqb-cabecera .vision,
.fcqb-cabecera .fcqb {                   /* Celdas cuadradas de los tres logos */
    display: flex;                       /* Centrado del logo */
    justify-content: center;             /* Centrado horizontal */
    align-items: center;                 /* Centrado vertical */
    aspect-ratio: 1;                     /* Siempre cuadradas */
    align-self: flex-start;              /* No se estiran con la info */
    flex: 1 1 0%;                        /* Reparten el espacio en partes iguales */
    padding: 0;                          /* Anula el padding de las columnas de Bootstrap */
}

.fcqb-cabecera .uas    { background: var(--azul-base); } /* Fondo azul tras el escudo UAS */
.fcqb-cabecera .vision { background: var(--gris-base); } /* Fondo gris tras Visión 2029 */
.fcqb-cabecera .fcqb   { background: #fff; }             /* Fondo blanco tras el logo FCQB */

.fcqb-cabecera .cabecera-info {          /* Texto "Facultad de Ciencias..." */
    display: none;                       /* Oculto en pantallas pequeñas */
    flex: 0 0 66.67%;                    /* Dos tercios del ancho en escritorio */
    max-width: 66.67%;                   /* Dos tercios del ancho en escritorio */
    padding: 30px;                       /* Espacio interior */
    text-align: left;                    /* Alineado a la izquierda */
    color: #fff;                         /* Texto blanco */
    background: url('logo2025min.png') no-repeat right bottom -100px var(--amarillo-base); /* Águila decorativa */
}

.fcqb-cabecera .contenido-cabecera {     /* Nombre de la facultad */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Extra gruesa */
    font-size: 28px;                     /* Tamaño en escritorio grande */
    line-height: 1.2;                    /* Interlineado compacto */
}

.fcqb-cabecera .uas-label {              /* "Universidad Autónoma de Sinaloa" */
    margin: 10px 0 0;                    /* Separación del nombre */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 200;                    /* Muy delgada */
    letter-spacing: 2px;                 /* Espaciado */
}

@media (min-width: 992px) {
    .fcqb-cabecera .cabecera-info { display: block; } /* La info aparece desde 992 px */
}

@media (max-width: 991px) {
    .fcqb-cabecera .uas,
    .fcqb-cabecera .vision,
    .fcqb-cabecera .fcqb { flex: 0 0 33.33%; max-width: 33.33%; } /* Tres logos a lo ancho */
}

@media (min-width: 992px) and (max-width: 1199px) {
    .fcqb-cabecera .contenido-cabecera { font-size: 20px; } /* Nombre más pequeño en laptops */
}

/* ---- Barra azul del título del sistema (fija al desplazar) ---- */
.fcqb-barra {                            /* Franja azul bajo los logos */
    position: sticky;                    /* Se queda arriba al desplazar */
    top: 0;                              /* Pegada al borde superior */
    z-index: 1020;                       /* Encima del contenido, debajo de modales */
    padding: 0;                          /* Anula el padding de 15 px de style.css */
    background: var(--azul-base);        /* Azul institucional */
    color: #fff;                         /* Texto blanco */
}

.fcqb-barra-titulo {                     /* Texto "SISTEMA DE ASESORÍA FCQB" */
    padding: 16px 0;                     /* Altura de la barra */
    font-family: var(--Barlow);          /* Barlow Semi Condensed (igual en todos los sistemas FCQB) */
    font-weight: 600;                    /* Semigruesa */
    font-size: 14px;                     /* Tamaño */
    letter-spacing: 3px;                 /* Espaciado amplio, como el login */
    text-transform: uppercase;           /* Mayúsculas */
}

.fcqb-barra-titulo a { color: #fff; text-decoration: none; } /* Si el título es enlace, se ve igual */


/* ============================================================
   4. TARJETAS (estilo login-card)
   ============================================================ */
.fcqb-tarjeta,
.card {                                  /* Tarjeta blanca con borde azul */
    background: #fff;                    /* Fondo blanco */
    border: 0;                           /* Sin borde gris de Bootstrap */
    border-left: 4px solid var(--azul-base); /* Acento azul a la izquierda */
    border-radius: 0;                    /* Esquinas rectas */
    box-shadow: var(--fcqb-sombra);      /* Sombra suave */
}

.fcqb-tarjeta { padding: var(--fcqb-relleno-y) var(--fcqb-relleno-x); } /* Espacio interior de tarjetas propias */

.fcqb-tarjeta-cabecera { margin-bottom: 32px; } /* Separación entre títulos y contenido */

.fcqb-acento {                           /* Cuadrito dorado sobre los títulos */
    display: inline-block;               /* En línea */
    width: 0.5em;                        /* Ancho */
    height: 0.5em;                       /* Alto */
    margin-bottom: 14px;                 /* Separación inferior */
    background: var(--amarillo-base);    /* Oro */
}

.fcqb-etiqueta {                         /* Texto pequeño sobre los títulos */
    margin: 0 0 8px;                     /* Separación inferior */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-weight: 300;                    /* Delgada */
    font-size: 13px;                     /* Pequeña */
    letter-spacing: 4px;                 /* Espaciado amplio */
    text-transform: uppercase;           /* Mayúsculas */
    color: var(--azul-claroestrambotico); /* Azul claro */
}

.fcqb-titulo {                           /* Título principal de una tarjeta */
    margin: 0;                           /* Sin márgenes de Bootstrap */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Extra gruesa */
    font-size: 28px;                     /* Grande */
    line-height: 1.2;                    /* Interlineado compacto */
    color: var(--azul-base);             /* Azul institucional */
}

@media (max-width: 767px) {
    .fcqb-tarjeta { border-left-width: 3px; }                     /* Borde más delgado en móvil (el relleno lo ajustan las variables) */
    .fcqb-titulo  { font-size: 24px; }                            /* Título más pequeño */
}

/* ---- Barra de usuario (botones arriba del contenido) ---- */
.fcqb-barra-usuario {                    /* Fila con título a la izquierda y botones a la derecha */
    display: flex;                       /* En fila */
    align-items: center;                 /* Centrado vertical */
    justify-content: space-between;      /* Extremos opuestos */
    flex-wrap: wrap;                     /* Bajan en pantallas angostas */
    gap: 16px;                           /* Separación */
    margin-bottom: var(--fcqb-separacion); /* Separación del contenido */
    padding: 28px var(--fcqb-relleno-x); /* Mismo borde interior que las demás tarjetas */
    background: #fff;                    /* Tarjeta blanca */
    border-left: 4px solid var(--azul-base); /* Acento azul */
    box-shadow: var(--fcqb-sombra);      /* Sombra */
    text-align: left;                    /* Anula el text-end de Bootstrap */
}

.fcqb-barra-usuario .fcqb-etiqueta { margin-bottom: 2px; } /* Etiqueta pegada al título */
.fcqb-barra-usuario .fcqb-titulo   { font-size: 22px; }    /* Título más compacto */

.fcqb-barra-usuario-botones {            /* Grupo de botones */
    display: flex;                       /* En fila */
    flex-wrap: wrap;                     /* Bajan si no caben */
    justify-content: flex-end;           /* Alineados a la derecha */
    gap: 8px;                            /* Separación */
}

.fcqb-barra-usuario-botones .btn-warning { margin-left: 0; } /* Anula el margen de 30 px de style.css */


/* ============================================================
   5. BOTONES
   ============================================================ */
.btn {                                   /* Todos los botones */
    border-radius: 0;                    /* Esquinas rectas */
    font-family: var(--montserrat);      /* Tipografía de botones del login */
    font-weight: 600;                    /* Semigruesa */
    font-size: 13px;                     /* Tamaño */
    letter-spacing: 1.5px;               /* Espaciado */
    text-transform: uppercase;           /* Mayúsculas */
    padding: 10px 18px;                  /* Altura cómoda */
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 150ms ease; /* Animación suave */
}

.btn:active { transform: translateY(1px); }             /* Pequeño "hundimiento" al hacer clic */
.btn:focus,
.btn:focus-visible { box-shadow: var(--fcqb-foco); }    /* Anillo de foco institucional */

.btn-sm,
.btn-group-sm > .btn { padding: 5px 10px; font-size: 11px; letter-spacing: 1px; } /* Botones pequeños */

.btn-primary {                           /* Botón principal */
    background-color: var(--azul-base);  /* Azul institucional */
    border-color: var(--azul-base);      /* Mismo borde */
    color: #fff;                         /* Texto blanco */
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {   /* Estados activos del principal */
    background-color: var(--azul-oscuro); /* Azul oscuro, como el login */
    border-color: var(--azul-oscuro);    /* Mismo borde */
    color: #fff;                         /* Texto blanco */
}

.btn-secondary,
.btn-outline-primary {                   /* Botón secundario: contorno azul */
    background-color: transparent;       /* Sin relleno */
    border: 1.5px solid var(--azul-base); /* Contorno azul */
    color: var(--azul-base);             /* Texto azul */
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary { /* Estados activos del secundario */
    background-color: var(--azul-base);  /* Se rellena de azul */
    border-color: var(--azul-base);      /* Mismo borde */
    color: #fff;                         /* Texto blanco */
}

.btn-outline-secondary {                 /* Botón neutro (p. ej. limpiar búsqueda) */
    background-color: #fff;              /* Fondo blanco */
    border: 1.5px solid var(--gris-base); /* Borde gris */
    color: var(--azul-oscuro);           /* Texto oscuro */
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {          /* Estados activos del neutro */
    background-color: var(--minimal-base); /* Azul muy claro */
    border-color: var(--azul-base);      /* Borde azul */
    color: var(--azul-base);             /* Texto azul */
}

.btn-success { background-color: var(--fcqb-verde); border-color: var(--fcqb-verde); color: #fff; } /* Verde (exportar, confirmar) */
.btn-success:hover,
.btn-success:focus,
.btn-success:active { background-color: #154D25; border-color: #154D25; color: #fff; }              /* Verde más oscuro */

.btn-danger { background-color: var(--fcqb-rojo); border-color: var(--fcqb-rojo); color: #fff; }    /* Rojo (eliminar) */
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active { background-color: var(--fcqb-rojo-texto); border-color: var(--fcqb-rojo-texto); color: #fff; } /* Rojo más oscuro */

.btn-outline-danger { border: 1.5px solid var(--fcqb-rojo); color: var(--fcqb-rojo); }             /* Contorno rojo */
.btn-outline-danger:hover,
.btn-outline-danger:focus { background-color: var(--fcqb-rojo); border-color: var(--fcqb-rojo); color: #fff; } /* Se rellena de rojo */

.btn-warning { background-color: var(--amarillo-base); border-color: var(--amarillo-base); color: #fff; } /* Oro institucional */
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active { background-color: var(--amarillo-oscuro); border-color: var(--amarillo-oscuro); color: #fff; } /* Oro oscuro */
.btn-warning a,
.btn-warning span.badge { color: inherit; }           /* Anula el texto negro de style.css */

.btn:disabled,
.btn.disabled { opacity: 0.45; }                       /* Botones desactivados atenuados */

.fcqb-boton-ayuda:disabled {            /* Botón de ayuda de los formularios: está desactivado sólo para que el globo
                                           lo maneje su contenedor, pero debe verse igual que un botón secundario */
    opacity: 1;                          /* Sin atenuar */
    background-color: transparent;       /* Anula el gris de .btn-secondary:disabled de Bootstrap */
    border-color: var(--azul-base);      /* Contorno azul */
    color: var(--azul-base);             /* Icono azul */
}

.btn .badge {                            /* Contenedor del icono dentro de botones */
    padding: 0;                          /* Sin relleno extra */
    background: transparent;             /* Sin fondo */
    color: inherit;                      /* Mismo color que el texto del botón */
    vertical-align: middle;              /* Alineado con el texto */
}

.btn svg { width: 16px; height: 16px; }  /* Iconos de botón a tamaño uniforme */

.btn-close:focus { box-shadow: var(--fcqb-foco); }     /* Foco del botón cerrar */


/* ============================================================
   6. FORMULARIOS
   ============================================================ */
.form-control,
.form-select {                           /* Campos de texto y listas */
    border: 1.5px solid var(--gris-base); /* Borde gris como el login */
    border-radius: 0;                    /* Esquinas rectas */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 16px;                     /* Legible (y evita zoom en iOS) */
    font-weight: 300;                    /* Delgada */
    color: var(--azul-oscuro);           /* Texto oscuro */
    padding-top: 10px;                   /* Altura cómoda */
    padding-bottom: 10px;                /* Altura cómoda */
}

.form-control::placeholder { color: #b0b8c9; font-weight: 300; } /* Texto de ejemplo gris claro */

.form-control:focus,
.form-select:focus {                     /* Campo con el cursor */
    border-color: var(--azul-base);      /* Borde azul */
    box-shadow: var(--fcqb-foco);        /* Anillo de foco */
}

.form-control:disabled,
.form-control[readonly] { background-color: #F4F6FA; } /* Campos de sólo lectura */

.input-group-text {                      /* Cajita de icono a la izquierda */
    border: 1.5px solid var(--gris-base); /* Mismo borde que los campos */
    border-radius: 0;                    /* Esquinas rectas */
    background: var(--minimal-base);     /* Azul muy claro */
    color: var(--azul-base);             /* Icono azul */
}

.input-group > :not(:first-child):not(.dropdown-menu) { margin-left: -1.5px; } /* Une bordes de 1.5 px sin duplicarlos */

.form-floating > label { color: var(--fcqb-gris-texto); } /* Etiqueta flotante en gris */
.form-floating > .form-control { padding-top: 1.625rem; } /* Restaura el espacio de la etiqueta flotante */

.form-label,
.fcqb-label {                            /* Etiquetas de campo */
    display: block;                      /* En su propia línea */
    margin-bottom: 8px;                  /* Separación del campo */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-weight: 400;                    /* Normal */
    font-size: 13px;                     /* Pequeña */
    letter-spacing: 2px;                 /* Espaciado */
    text-transform: uppercase;           /* Mayúsculas */
    color: var(--azul-oscuro);           /* Oscura */
}

.form-check-input { border: 1.5px solid var(--gris-base); } /* Casillas con borde gris */
.form-check-input[type="checkbox"] { border-radius: 0; }    /* Casillas cuadradas */
.form-check-input:checked { background-color: var(--azul-base); border-color: var(--azul-base); } /* Marcadas en azul */
.form-check-input:focus { border-color: var(--azul-base); box-shadow: var(--fcqb-foco); }         /* Foco */


/* ============================================================
   7. MENÚS DESPLEGABLES
   ============================================================ */
.dropdown-menu {                         /* Caja del menú */
    border: 0;                           /* Sin borde gris */
    border-top: 3px solid var(--azul-base); /* Acento azul arriba */
    border-radius: 0;                    /* Esquinas rectas */
    box-shadow: 0 8px 28px rgba(26, 43, 76, 0.18); /* Sombra */
    padding: 6px 0;                      /* Espacio interior */
}

.dropdown-item {                         /* Opciones del menú */
    padding: 9px 18px;                   /* Espacio cómodo */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 15px;                     /* Legible */
    color: var(--azul-oscuro);           /* Texto oscuro */
}

.dropdown-item:hover,
.dropdown-item:focus { background: var(--minimal-base); color: var(--azul-base); } /* Azul muy claro al pasar el cursor */
.dropdown-item.active,
.dropdown-item:active { background: var(--azul-base); color: #fff; }               /* Opción seleccionada */
.dropdown-divider { border-top-color: var(--gris-base); }                           /* Línea divisoria */


/* ============================================================
   8. VENTANAS MODALES
   ============================================================ */
.modal-content {                         /* Caja del modal */
    border: 0;                           /* Sin borde */
    border-top: 4px solid var(--azul-base); /* Acento azul arriba, como los diálogos del login */
    border-radius: 0;                    /* Esquinas rectas */
    box-shadow: 0 12px 48px rgba(8, 51, 143, 0.25); /* Sombra */
}

.modal-header { padding: 28px 32px; border-bottom: 1px solid var(--gris-base); } /* Encabezado (un poco más alto para el título grande) */
.modal-body   { padding: 28px 32px; }                                            /* Contenido */
.modal-footer { padding: 20px 32px; border-top: 1px solid var(--gris-base); gap: 8px; } /* Botones */
.modal-footer > * { margin: 0; }                                                 /* El gap ya separa los botones */

.modal-title,
.title-modal {                           /* Título del modal: mismo estilo que los títulos de sección */
    margin: 0;                           /* Sin márgenes de Bootstrap */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Extra gruesa, como .fcqb-titulo */
    font-size: 24px;                     /* Un poco menor que el título de tarjeta (28 px) por el espacio del modal */
    line-height: 1.2;                    /* Interlineado compacto */
    letter-spacing: normal;              /* Sin espaciado extra */
    text-transform: none;                /* Anula las mayúsculas de style.css */
    color: var(--azul-base);             /* Azul institucional */
}

@media (max-width: 767px) {
    .modal-title,
    .title-modal { font-size: 20px; }    /* Más compacto en móvil */
}

.modal-backdrop.show { background-color: var(--azul-oscuro); opacity: 0.55; } /* Fondo oscurecido azulado */


/* ============================================================
   9. ACORDEÓN (secciones de solicitudes)
   ============================================================ */
.accordion { margin: 0; }                /* Anula el margen de 30 px de asesorias/style.css: la separación la da la barra de usuario */

.accordion-item {                        /* Cada sección */
    margin-bottom: var(--fcqb-separacion); /* Misma separación que entre tarjetas */
    background: #fff;                    /* Tarjeta blanca */
    border: 0;                           /* Sin borde gris */
    border-left: 4px solid var(--azul-base); /* Acento azul */
    box-shadow: var(--fcqb-sombra);      /* Sombra */
}

.accordion-item:first-of-type,
.accordion-item:last-of-type,
.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed { border-radius: 0; } /* Esquinas rectas */

.accordion-item:not(:first-of-type) { border-top: 0; } /* Bootstrap quita el borde superior; aquí no hay */

.accordion-button {                      /* Encabezado clicable de la sección */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 600;                    /* Semigruesa */
    font-size: 14px;                     /* Tamaño */
    letter-spacing: 1.5px;               /* Espaciado */
    text-transform: uppercase;           /* Mayúsculas */
    color: var(--azul-base);             /* Azul institucional */
    background: #fff;                    /* Fondo blanco */
}

.accordion-button { padding: 32px var(--fcqb-relleno-x); } /* Un poco más de relleno vertical; mismo borde interior que las tarjetas */

.fcqb-acordeon-titulo {                  /* Título de la sección (misma familia que los títulos de tarjeta, más pequeño) */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Extra gruesa, como .fcqb-titulo */
    font-size: 18px;                     /* Más pequeño que el título de tarjeta (28 px) */
    line-height: 1.3;                    /* Interlineado */
    letter-spacing: normal;              /* Anula el espaciado del botón */
    text-transform: none;                /* Anula las mayúsculas del botón */
    color: var(--azul-base);             /* Azul institucional */
    text-align: left;                    /* Títulos largos alineados a la izquierda */
}

@media (max-width: 767px) {
    .accordion-button { padding-top: 24px; padding-bottom: 24px; } /* Algo menos alto en móvil */
    .fcqb-acordeon-titulo { font-size: 16px; }                      /* Título más compacto */
}

.accordion-button:not(.collapsed) {      /* Sección abierta */
    color: var(--azul-base);             /* Mantiene el azul (Bootstrap lo cambia) */
    background: #fff;                    /* Mantiene el blanco */
    box-shadow: inset 0 -1px 0 var(--gris-base); /* Línea divisoria inferior */
}

.accordion-button:focus { border-color: transparent; box-shadow: var(--fcqb-foco); } /* Foco visible */

/* Icono del acordeón: una cruz "+" dibujada con CSS (sin imágenes, compatible con la CSP)
   que gira 135° hasta quedar como "×" cuando la sección está abierta. */
.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    width: 18px;                         /* Tamaño del icono */
    height: 18px;                        /* Tamaño del icono */
    background-image:
        linear-gradient(var(--azul-base), var(--azul-base)),   /* Línea horizontal */
        linear-gradient(var(--azul-base), var(--azul-base));   /* Línea vertical */
    background-size: 16px 2px, 2px 16px; /* Largo y grosor de cada línea */
    background-position: center;         /* Centradas: forman la cruz */
    background-repeat: no-repeat;        /* Sin repetirse */
    transition: transform 350ms ease;    /* Giro suave */
}

.accordion-button.collapsed::after { transform: rotate(0deg); }      /* Cerrada: "+" */
.accordion-button:not(.collapsed)::after { transform: rotate(135deg); } /* Abierta: gira y queda como "×" */

@media (prefers-reduced-motion: reduce) {
    .accordion-button::after { transition: none; } /* Sin animación si el usuario la desactivó en su sistema */
}

.accordion-body {                        /* Contenido de la sección */
    padding: 32px var(--fcqb-relleno-x); /* Mismo borde interior que las tarjetas */
    background: #F7F9FD;                 /* Gris azulado muy claro */
}


/* ============================================================
   10. ALERTAS Y MENSAJES (estilo login-alerta)
   ============================================================ */
.alert {                                 /* Todas las alertas */
    border: 0;                           /* Sin borde completo */
    border-left: 3px solid;              /* Sólo acento a la izquierda (el color lo da la variante) */
    border-radius: 0;                    /* Esquinas rectas */
    padding: 12px 16px;                  /* Espacio interior */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 15px;                     /* Legible */
}

.alert-warning { background: var(--fcqb-info-fondo);  border-color: var(--fcqb-info-texto); color: var(--fcqb-info-texto); } /* Avisos: mismo azul informativo en todo el sistema (antes oro) */
.alert-danger  { background: var(--fcqb-rojo-fondo);  border-color: var(--fcqb-rojo);     color: var(--fcqb-rojo-texto); } /* Error: rojo */
.alert-success { background: var(--fcqb-verde-fondo); border-color: var(--fcqb-verde);    color: var(--fcqb-verde); }      /* Éxito: verde */
.alert-info,
.alert-primary { background: var(--fcqb-info-fondo);  border-color: var(--fcqb-info-texto); color: var(--fcqb-info-texto); } /* Información: azul */
.alert-secondary,
.alert-light   { background: #F4F6FA; border-color: var(--gris-base); color: var(--azul-oscuro); }                           /* Neutra */

.alert .alert-link { color: inherit; }   /* Enlaces dentro de alertas del mismo color */

/* Dentro de los modales TODAS las alertas (avisos, confirmaciones y errores) usan el mismo azul
   informativo que el explorador rápido, para que los lightbox se vean uniformes. */
.modal .alert { background: var(--fcqb-info-fondo); border-color: var(--fcqb-info-texto); color: var(--fcqb-info-texto); }


/* ============================================================
   11. INSIGNIAS, LISTAS, POPOVERS, SPINNERS
   ============================================================ */
.badge { border-radius: 2px; font-family: var(--Barlow); font-weight: 600; letter-spacing: 0.5px; } /* Insignias casi rectas */

.bg-primary,
.text-bg-primary { background-color: var(--azul-base) !important; color: #fff !important; }  /* Insignia azul institucional */
.bg-warning      { background-color: var(--amarillo-estrambotico) !important; }                /* Insignia amarilla */
.bg-danger       { background-color: var(--fcqb-rojo) !important; }                           /* Insignia roja */
.bg-success      { background-color: var(--fcqb-verde) !important; }                          /* Insignia verde */

.list-group-item {                       /* Elementos de lista */
    border-color: var(--gris-base);      /* Bordes grises */
    font-family: var(--Barlow);          /* Tipografía de texto */
}
.list-group-item:first-child,
.list-group-item:last-child { border-radius: 0; }                                 /* Esquinas rectas */
.list-group-item-action:hover,
.list-group-item-action:focus { background: var(--minimal-base); color: var(--azul-base); } /* Azul muy claro al pasar el cursor */
.list-group-item.active { background: var(--azul-base); border-color: var(--azul-base); }  /* Elemento seleccionado */

/* ---- Popovers (instrucciones del perfil de alumnos): mismo estilo que alertas y tooltips ---- */
.popover,
.popover.pocolor {                       /* Globo de ayuda (.pocolor es la clase amarilla de asesorias/style.css) */
    max-width: 320px;                    /* Ancho cómodo para las instrucciones */
    border: 0;                           /* Sin borde completo */
    border-left: 3px solid var(--fcqb-info-texto); /* Acento izquierdo, como las alertas */
    border-radius: 0;                    /* Esquinas rectas */
    background: var(--fcqb-info-fondo);  /* Azul muy claro (antes amarillo) */
    color: var(--fcqb-info-texto);       /* Texto azul */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 14px !important;          /* Anula los 12 px con !important de style.css */
    box-shadow: 0 8px 28px rgba(26, 43, 76, 0.18); /* Sombra para separarlo del fondo */
}

.popover-header,
.pocolor .popover-header {               /* Título "INSTRUCCIONES" */
    margin: 0;                           /* Sin márgenes del h3 */
    padding: 14px 18px 10px;             /* Espacio interior */
    border-bottom: 1px solid rgba(11, 90, 138, 0.18); /* Línea divisoria tenue */
    border-radius: 0;                    /* Esquinas rectas */
    background: transparent;             /* Mismo fondo que el globo (antes amarillo) */
    color: var(--fcqb-info-texto);       /* Texto azul */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-size: 12px;                     /* Pequeño */
    font-weight: 700;                    /* Grueso */
    letter-spacing: 1.5px;               /* Espaciado */
}

.popover-body,
.popover-bod {                           /* Contenido (.popover-bod es la clase de la plantilla del alumno) */
    padding: 12px 18px 14px;             /* Espacio interior */
    color: var(--fcqb-info-texto);       /* Texto azul */
    line-height: 1.5;                    /* Interlineado cómodo */
}

.popover-bod p { margin: 0 0 8px; }      /* Separación entre instrucciones */
.popover-bod p:last-child { margin-bottom: 0; } /* Sin espacio extra al final */
.popover-bod strong { font-weight: 600; } /* Etiquetas ("LICENCIATURA:") en semi-negritas */

.popover .popover-arrow::before,
.popover .popover-arrow::after { border-color: transparent; } /* Flecha sin borde gris */
.bs-popover-end > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after  { border-right-color: var(--fcqb-info-fondo); }
.bs-popover-start > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after   { border-left-color: var(--fcqb-info-fondo); }
.bs-popover-top > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after    { border-top-color: var(--fcqb-info-fondo); }
.bs-popover-bottom > .popover-arrow::after,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after { border-bottom-color: var(--fcqb-info-fondo); }

/* ---- Tooltips: mismo estilo que las alertas informativas ---- */
.tooltip { font-family: var(--Barlow); }                 /* Tipografía de texto */
.tooltip.show { opacity: 1; }                            /* Sin transparencia (Bootstrap usa 0.9) */

.tooltip-inner {                         /* Caja del tooltip */
    max-width: 280px;                    /* Más ancho: algunos muestran listas de alumnos o notas largas */
    padding: 10px 14px;                  /* Espacio interior */
    border-left: 3px solid var(--fcqb-info-texto); /* Acento izquierdo, como las alertas */
    border-radius: 0;                    /* Esquinas rectas */
    background: var(--fcqb-info-fondo);  /* Azul muy claro */
    color: var(--fcqb-info-texto);       /* Texto azul */
    font-size: 14px;                     /* Legible */
    line-height: 1.45;                   /* Interlineado */
    text-align: left;                    /* Alineado a la izquierda (listas de nombres) */
    box-shadow: 0 6px 20px rgba(26, 43, 76, 0.18); /* Sombra para separarlo del fondo blanco */
}

/* Flechita del tooltip del mismo color que el fondo, en cualquier posición */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before    { border-top-color: var(--fcqb-info-fondo); }
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before  { border-right-color: var(--fcqb-info-fondo); }
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--fcqb-info-fondo); }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before   { border-left-color: var(--fcqb-info-fondo); }

.spinner-border { color: var(--azul-base); }          /* Indicador de carga azul */
.btn .spinner-border { color: inherit; }              /* Dentro de botones toma el color del texto */

.table > thead { background: var(--azul-base); color: #fff; } /* Encabezado de tablas en azul */
.table > thead th { font-weight: 500; letter-spacing: 1px; border-bottom: 0; } /* Texto del encabezado */


/* ============================================================
   12. COMPONENTES PROPIOS DEL SISTEMA DE ASESORÍAS
   (clases que ya existen en los style.css y en el JavaScript)
   ============================================================ */

/* ---- Tarjetas de solicitudes (generadas por main.js) ---- */
.solicitud-individual {                  /* Cada solicitud de asesoría */
    background: #fff;                    /* Fondo blanco */
    border: 1px solid var(--gris-base);  /* Borde gris */
    border-left: 3px solid var(--gris-base); /* Acento izquierdo neutro */
    border-radius: 0;                    /* Esquinas rectas */
    transition: border-color 200ms ease, box-shadow 200ms ease; /* Animación suave */
}

.solicitud-individual,
.solicitud-individual:hover {            /* Cada resultado; mismo relleno con y sin cursor (el original "saltaba") */
    margin-left: 0;                      /* Anula el margen negativo de .row: no se sale del contenedor */
    margin-right: 0;                     /* Anula el margen negativo de .row */
    padding: 18px 12px 6px;              /* Más aire (las columnas internas suman 12 px a los lados) */
}

.solicitud-individual:hover {            /* Al pasar el cursor */
    border-left: 3px solid var(--azul-base); /* Acento azul */
    box-shadow: 0 4px 18px rgba(8, 51, 143, 0.10); /* Sombra ligera */
}

.solicitud-individual .titulo-solicitud,
.list-group-notification h6 {            /* Nombre de cada resultado (alumno, docente o materia) */
    margin: 0 0 8px;                     /* Separación de los datos */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Mismo grosor que los títulos de sección */
    font-size: 16px;                     /* Tamaño de resultado (menor que el de sección) */
    line-height: 1.3;                    /* Interlineado */
    letter-spacing: normal;              /* Sin espaciado extra */
    text-transform: none;                /* Anula las mayúsculas de style.css: se respeta el texto como viene */
    color: var(--azul-base);             /* Azul institucional */
}

.context-paragraph {                     /* Datos del resultado (licenciatura, tema, docente...) */
    margin-bottom: 12px;                 /* Separación de los botones o del borde */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 15px;                     /* Legible (antes 13 px gris claro) */
    font-weight: 400;                    /* Normal (antes 300, muy delgada) */
    line-height: 1.6;                    /* Interlineado cómodo */
    color: #000;                         /* Negro para mejor lectura */
}

.context-paragraph .text-muted { color: #000 !important; } /* También en negro las líneas que antes eran grises */
.context-paragraph strong { font-weight: 600; }             /* Etiquetas ("Tema:", "Docente:") en semi-negritas */
.context-separador { margin: 0 4px; color: var(--gris-base); } /* Barra "|" tenue entre dos datos de la misma línea */

.context-solicitud-primary { color: var(--azul-base); background-color: var(--minimal-base); }       /* Etiqueta azul */
.context-solicitud-warning { color: var(--fcqb-oro-texto); background-color: var(--fcqb-oro-fondo); } /* Etiqueta oro */

/* ---- Indicadores del tablero (dashboard) ---- */
.dashboard-card {                        /* Tarjeta de indicador o gráfica */
    border: 0;                           /* Sin borde gris */
    border-left: 4px solid var(--azul-base); /* Acento azul */
    border-radius: 0;                    /* Esquinas rectas */
    box-shadow: var(--fcqb-sombra);      /* Sombra */
    padding: 20px;                       /* Espacio interior */
}

.dashboard-stat {                        /* Número grande */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Extra gruesa */
    color: var(--azul-base);             /* Azul institucional (antes azul genérico #0c6cf8) */
    font-variant-numeric: tabular-nums;  /* Dígitos de ancho fijo */
}

.dashboard-label,
.dashboard-chart-title {                 /* Descripción del número y títulos de gráficas */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 13px;                     /* Pequeña */
    letter-spacing: 1.5px;               /* Espaciado */
    color: var(--azul-oscuro);           /* Oscura */
}

.dashboard-chart-title { font-weight: 600; } /* Título de gráfica algo más grueso */

/* ---- Tablero unificado (columna izquierda de docente y administrador) ---- */
.fcqb-estadisticas {                     /* Fila de cifras (estilo panel-estadistica del Login) */
    display: grid;                       /* Cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* Columnas iguales; bajan si no caben */
    gap: 12px;                           /* Separación entre cifras */
    margin-bottom: 40px;                 /* Separación de las gráficas */
}

.fcqb-estadistica {                      /* Una cifra */
    padding: 16px 18px;                  /* Espacio interior */
    background: var(--minimal-base);     /* Azul muy claro */
    border-left: 3px solid var(--azul-claroestrambotico); /* Acento azul claro */
}

.fcqb-estadistica-valor {                /* Número grande */
    display: block;                      /* En su propia línea */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-size: 30px;                     /* Grande */
    font-weight: 700;                    /* Gruesa */
    line-height: 1.1;                    /* Compacta */
    color: var(--azul-base);             /* Azul institucional */
    font-variant-numeric: tabular-nums;  /* Dígitos de ancho fijo */
}

.fcqb-estadistica-texto {                /* Descripción del número */
    display: block;                      /* Debajo del número */
    margin-top: 6px;                     /* Separación */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 13px;                     /* Pequeña */
    letter-spacing: 0.5px;               /* Espaciado */
    color: var(--azul-oscuro);           /* Oscura */
}

.fcqb-graficas {                         /* Zona de gráficas dentro de la tarjeta */
    display: grid;                       /* Cuadrícula */
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas iguales */
    gap: 40px 32px;                      /* Separación vertical y horizontal */
    padding-top: 36px;                   /* Separación de la línea */
    border-top: 1px solid var(--gris-base); /* Línea que separa cifras y gráficas */
}

.fcqb-grafica { min-width: 0; }          /* Permite que la gráfica se encoja sin desbordar */
.fcqb-grafica--ancha { grid-column: 1 / -1; } /* Ocupa las dos columnas */

.fcqb-grafica-titulo {                   /* Título de cada gráfica */
    margin: 0 0 18px;                    /* Separación de la gráfica */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 12px;                     /* Pequeña */
    font-weight: 600;                    /* Semigruesa */
    letter-spacing: 2px;                 /* Espaciado amplio */
    text-transform: uppercase;           /* Mayúsculas */
    color: var(--azul-oscuro);           /* Oscura */
}

.fcqb-grafica-dona {                     /* Contenedor de gráficas de dona */
    max-width: 220px;                    /* No crecen demasiado */
    margin: 0 auto;                      /* Centradas */
}

.fcqb-grafica-fija {                     /* Contenedor de alto fijo (gráficas con maintainAspectRatio:false) */
    position: relative;                  /* Requerido por Chart.js */
    height: 240px;                       /* Alto de la gráfica */
}

.fcqb-buscador + .accordion:has(.panel-grupo:not(.d-none)) { margin-top: var(--fcqb-separacion); } /* Separación sólo cuando aparecen resultados de búsqueda */

@media (max-width: 575px) {
    .fcqb-graficas { grid-template-columns: 1fr; }        /* Una gráfica por fila en móvil */
    .fcqb-estadistica { padding: 14px 12px; }             /* Cifras más compactas para que quepan tres */
    .fcqb-estadistica-valor { font-size: 24px; }          /* Número algo más pequeño */
}

/* ---- Tabla de resultados (modal "Consulta de asesorías"); diseño de la lista de usuarios del Login ---- */
/* Marcado: asesores/ajax/tabla_busqueda.php */
#contenedor-archivo-asesorias { padding: 0; } /* Anula el relleno de style.css: la tabla ocupa todo el ancho del modal */

.fcqb-tabla-resumen {                    /* "12 asesorías encontradas" */
    margin: 0 0 12px;                    /* Separación de la tabla */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 14px;                     /* Legible */
    color: var(--azul-oscuro);           /* Oscuro */
    font-variant-numeric: tabular-nums;  /* Dígitos de ancho fijo */
}

.fcqb-tabla-envoltorio {                 /* Marco con desplazamiento interno */
    max-height: 60vh;                    /* Alto máximo: el encabezado queda fijo y las filas se desplazan */
    overflow: auto;                      /* Barra de desplazamiento si hay muchas filas */
    border: 1px solid var(--gris-base);  /* Borde suave */
}

.fcqb-tabla {                            /* Tabla */
    width: 100%;                         /* Todo el ancho */
    border-collapse: collapse;           /* Bordes unidos */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 14px;                     /* Legible */
    color: #000;                         /* Negro para mejor lectura */
}

.fcqb-tabla th {                         /* Encabezados */
    position: sticky;                    /* Fijos al desplazar */
    top: 0;                              /* Pegados arriba */
    z-index: 1;                          /* Por encima de las filas */
    padding: 12px 14px;                  /* Espacio interior */
    background: var(--azul-base);        /* Azul institucional */
    color: #fff;                         /* Texto blanco */
    text-align: left;                    /* A la izquierda */
    font-weight: 500;                    /* Semigruesa */
    letter-spacing: 1px;                 /* Espaciado */
    white-space: nowrap;                 /* En una línea */
}

.fcqb-tabla td {                         /* Celdas */
    padding: 14px;                       /* Espacio interior */
    border-top: 1px solid var(--gris-base); /* Línea entre filas */
    vertical-align: top;                 /* Datos alineados arriba */
}

.fcqb-tabla tbody tr:hover td { background: #F7F9FD; } /* Resalta la fila bajo el cursor */

.fcqb-celda-titulo {                     /* Nombre del alumno */
    display: block;                      /* En su propia línea */
    font-family: var(--montserrat);      /* Tipografía de títulos */
    font-weight: 800;                    /* Mismo grosor que los títulos de sección */
    font-size: 14px;                     /* Tamaño de tabla */
    line-height: 1.3;                    /* Interlineado */
    color: var(--azul-base);             /* Azul institucional */
}

.fcqb-celda-dato { display: block; font-weight: 600; }          /* Dato principal de la celda (materia, fecha, docente) */
.fcqb-celda-sub  { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; } /* Datos secundarios */
.fcqb-celda-sub strong { font-weight: 600; }                    /* Etiqueta "Tema:" */
.fcqb-celda-principal { min-width: 180px; }                     /* El nombre no se aprieta demasiado */
.fcqb-celda-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; } /* Fechas en una línea */
.fcqb-celda-nunca { color: var(--fcqb-gris-texto); font-style: italic; }       /* "No agendada" en gris, como "Nunca" en el Login */
.fcqb-celda-acciones { text-align: right; white-space: nowrap; }               /* Botón a la derecha */
.fcqb-celda-agenda { min-width: 150px; }                                        /* Agenda: el lugar puede ocupar dos líneas */
.fcqb-celda-agenda .fcqb-celda-dato { white-space: nowrap; font-variant-numeric: tabular-nums; } /* La fecha no se parte */
.fcqb-celda-docente { min-width: 170px; }                                       /* Nombres de docente sin partirse demasiado */

.fcqb-celda-tema {                       /* Tema: máximo dos líneas (el texto completo está en el title) */
    display: -webkit-box;                /* Necesario para recortar por líneas */
    -webkit-line-clamp: 2;               /* Dos líneas */
    -webkit-box-orient: vertical;        /* En vertical */
    overflow: hidden;                    /* Oculta el resto */
}

.fcqb-insignia {                         /* Etiqueta pequeña (como "Admin" en el Login) */
    display: inline-block;               /* Caja en línea */
    margin-top: 6px;                     /* Separación del dato de arriba */
    padding: 1px 7px;                    /* Espacio interior */
    background: var(--azul-base);        /* Azul */
    color: #fff;                         /* Texto blanco */
    font-size: 11px;                     /* Pequeña */
    font-weight: 600;                    /* Semigruesa */
    letter-spacing: 1px;                 /* Espaciado */
    text-transform: uppercase;           /* Mayúsculas */
}

.fcqb-insignia--oro {                    /* Etiqueta "Grupal" (como "Tú" en el Login) */
    background: var(--amarillo-estrambotico); /* Amarillo institucional */
    color: var(--azul-oscuro);           /* Texto oscuro para contraste */
    cursor: help;                        /* Indica que tiene información al pasar el cursor */
}

.fcqb-accion {                           /* Botón pequeño de la fila (como "Contraseña" en el Login) */
    display: inline-flex;                /* Icono + texto */
    align-items: center;                 /* Centrado vertical */
    gap: 6px;                            /* Separación icono-texto */
    padding: 6px 12px;                   /* Espacio interior */
    border: 1px solid var(--gris-base);  /* Borde suave */
    background: #fff;                    /* Fondo blanco */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 13px;                     /* Pequeño */
    font-weight: 500;                    /* Semigruesa */
    color: var(--azul-base);             /* Azul */
    text-decoration: none;               /* Sin subrayado cuando es enlace */
    cursor: pointer;                     /* Cursor de mano */
    transition: border-color 200ms ease, background 200ms ease; /* Animación suave */
}

.fcqb-accion svg { width: 14px; height: 14px; flex-shrink: 0; }                 /* Icono */
.fcqb-accion:hover,
.fcqb-accion:focus-visible { border-color: var(--azul-base); background: var(--minimal-base); color: var(--azul-base); } /* Resalta al pasar el cursor */
.fcqb-accion--exito { color: var(--fcqb-verde); }                                /* "Ver evidencia" en verde */
.fcqb-accion--exito:hover,
.fcqb-accion--exito:focus-visible { border-color: var(--fcqb-verde); background: var(--fcqb-verde-fondo); color: var(--fcqb-verde); }

@media (max-width: 767px) {
    .fcqb-col-opcional { display: none; } /* Oculta "Solicitada" y "Docente" para que la tabla quepa en móvil */
    .fcqb-celda-principal,
    .fcqb-celda-agenda { min-width: 0; }               /* Sin anchos mínimos: la tabla cabe en el ancho del teléfono */
    .fcqb-tabla th,
    .fcqb-tabla td { padding: 10px 8px; }              /* Celdas más compactas */
    .fcqb-celda-titulo { font-size: 13px; }            /* Nombre un poco más pequeño */
    .fcqb-accion { padding: 8px; }                     /* Botón cuadrado sólo con icono */
    .fcqb-accion-texto { display: none; }              /* En móvil se oculta el texto (queda el aria-label) */
}

/* ---- Notificaciones y evidencias ---- */
.list-group-notification .badge.evidencia:hover { background-color: var(--azul-base); } /* Antes azul genérico */

/* ---- Tarjetas de la portada (azul y oro) ---- */
.azul,
.oro {                                   /* Accesos de la portada */
    box-shadow: var(--fcqb-sombra);      /* Sombra */
    transition: transform 200ms ease, box-shadow 200ms ease; /* Animación suave */
}
.azul:hover,
.oro:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(8, 51, 143, 0.20); } /* Se elevan al pasar el cursor */
.azul h4,
.oro h4 { font-family: var(--montserrat); font-weight: 800; letter-spacing: 0.5px; }        /* Títulos */


/* ============================================================
   13. PANTALLA DE ACCESO (estilo del login)
   Marcado: asesorias/index.php y asesores/index.php
   ============================================================ */
.fcqb-acceso {                           /* Sección que centra la tarjeta */
    display: flex;                       /* Centrado */
    justify-content: center;             /* Horizontal */
    align-items: center;                 /* Vertical */
    min-height: calc(100vh - 260px);     /* Ocupa la pantalla bajo la cabecera */
    padding: 60px 20px;                  /* Espacio alrededor */
}

.fcqb-acceso .fcqb-tarjeta {             /* Tarjeta del formulario */
    width: 100%;                         /* Ocupa el ancho... */
    max-width: 520px;                    /* ...hasta 520 px */
    padding: 52px 56px;                  /* Relleno amplio, como el login */
}

.fcqb-campo { margin-bottom: 22px; }     /* Separación entre campos */

.fcqb-input-envoltorio {                 /* Contenedor de input con icono */
    position: relative;                  /* Referencia para los iconos */
    display: flex;                       /* En fila */
    align-items: center;                 /* Centrado vertical */
}

.fcqb-input-icono {                      /* Icono a la izquierda del campo */
    position: absolute;                  /* Encima del input */
    left: 14px;                          /* Separación del borde */
    width: 17px;                         /* Tamaño */
    height: 17px;                        /* Tamaño */
    color: var(--azul-base);             /* Azul */
    opacity: 0.5;                        /* Tenue */
    pointer-events: none;                /* No bloquea clics al input */
}

.fcqb-input-envoltorio .form-control { padding-left: 44px; padding-right: 44px; } /* Espacio para ambos iconos */

.fcqb-mostrar-clave {                    /* Botón ojo para ver/ocultar */
    position: absolute;                  /* Encima del input */
    right: 10px;                         /* A la derecha */
    display: flex;                       /* Centra el icono */
    padding: 4px;                        /* Área clicable */
    background: none;                    /* Sin fondo */
    border: 0;                           /* Sin borde */
    color: var(--azul-base);             /* Azul */
    opacity: 0.45;                       /* Tenue */
    cursor: pointer;                     /* Cursor de mano */
}
.fcqb-mostrar-clave:hover,
.fcqb-mostrar-clave:focus-visible { opacity: 0.9; outline: none; } /* Más visible al usarlo */
.fcqb-mostrar-clave svg { width: 18px; height: 18px; }             /* Tamaño del ojo */

.fcqb-boton-ancho {                      /* Botón que ocupa todo el ancho */
    width: 100%;                         /* Ancho completo */
    display: flex;                       /* Texto + icono */
    align-items: center;                 /* Centrado vertical */
    justify-content: center;             /* Centrado horizontal */
    gap: 10px;                           /* Separación texto-icono */
    padding: 15px 24px;                  /* Alto, como el login */
    font-size: 14px;                     /* Tamaño */
    letter-spacing: 2px;                 /* Espaciado */
}
.fcqb-boton-ancho svg { transition: transform 350ms ease; }          /* Animación de la flecha */
.fcqb-boton-ancho:hover svg { transform: translateX(4px); }          /* La flecha avanza al pasar el cursor */

.fcqb-ayuda {                            /* Texto de ayuda bajo el formulario */
    margin: 24px 0 0;                    /* Separación superior */
    text-align: center;                  /* Centrado */
    font-family: var(--Barlow);          /* Tipografía de texto */
    font-size: 14px;                     /* Legible */
    font-weight: 300;                    /* Delgada */
    color: #66768C;                      /* Gris (contraste AA sobre blanco) */
}
.fcqb-ayuda a { color: var(--azul-claroestrambotico); } /* Enlace de soporte */
.fcqb-ayuda a:hover { color: var(--azul-base); }        /* Más oscuro al pasar el cursor */

.fcqb-instrucciones {                    /* Texto de instrucciones bajo el título */
    margin: 12px 0 0;                    /* Separación del título */
    font-size: 15px;                     /* Legible */
    font-weight: 300;                    /* Delgada */
    color: var(--azul-oscuro);           /* Oscura */
}

@media (max-width: 767px) {
    .fcqb-acceso { padding: 32px 16px; align-items: flex-start; } /* Tarjeta arriba en móvil */
    .fcqb-acceso .fcqb-tarjeta { padding: 32px 24px; }             /* Menos relleno */
}