:root {
    --mcc-primary: #244a7c;
    --mcc-primary-dark: #173657;
    --mcc-accent: #3b82c4;
    --mcc-sidebar-width: 270px;
    --mcc-border: #e5e7eb;
    --mcc-text-muted: #6b7280;
}

html {
    min-height: 100%;
}

/* Logo del header público: más chico en móvil para que no se amontone con
   el botón de "Iniciar sesión" al lado (encontrado probando en Android real). */
.mcc-header-logo {
    height: 56px;
}

@media (min-width: 576px) {
    .mcc-header-logo {
        height: 96px;
    }
}

body {
    min-height: 100vh;
    color: #1f2937;
    background-color: #f5f7fb;
}

.sidebar {
    min-height: 100vh;
    width: var(--mcc-sidebar-width);
    background: linear-gradient(180deg, var(--mcc-primary-dark) 0%, #1f2937 100%);
}

.sidebar .nav-link {
    border-radius: 0.5rem;
    color: rgba(255, 255, 255, 0.78) !important;
    transition: background-color 160ms ease, color 160ms ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.14);
}

.sidebar .nav-link.active {
    box-shadow: inset 3px 0 0 #93c5fd;
}

/*
 * Menú lateral con scroll propio en escritorio (pedido explícito): queda fijo
 * a la altura de la pantalla mientras el contenido se desplaza, así que ni
 * se ve una pantalla en blanco al recorrer el menú en páginas cortas, ni hay
 * que volver a subir toda la página para cambiar de sección. `app.js` lo
 * posiciona en la sección activa al cargar cada página.
 */
/*
 * La columna de contenido nunca se ensancha por una tabla u otro elemento
 * ancho: cede su ancho (`min-width: 0`) y la tabla se desplaza dentro de su
 * `.table-responsive`. En TODOS los tamaños — antes solo en escritorio, y en
 * celular varias páginas tenían scroll horizontal de toda la página (hasta
 * 700 px de más; hallazgo de las pruebas en navegador, 2026-09-29).
 */
.mcc-main-column {
    min-width: 0;
}

@media (min-width: 992px) {
    /* Ancho fijo (pedido explícito, 2026-09-28): como elemento flex, el menú
       se encogía en páginas con tablas anchas (p. ej. Contactos para citas).
       La columna de contenido cede en su lugar (`min-width: 0`) y la tabla
       se desplaza dentro de su `.table-responsive`. */
    .sidebar {
        flex-shrink: 0;
    }


    .sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    }
}

.navbar {
    min-height: 64px;
}

.card {
    border-color: var(--mcc-border);
}

.page-title {
    color: var(--mcc-primary-dark);
    font-weight: 700;
}

.table thead th {
    white-space: nowrap;
    color: #4b5563;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.table tbody tr {
    vertical-align: middle;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mcc-accent);
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 196, 0.15);
}

.auth-logo {
    max-width: 220px;
    max-height: 80px;
    object-fit: contain;
}

.empty-state {
    padding: 3rem 1rem;
    color: var(--mcc-text-muted);
    text-align: center;
}

.cursor-pointer {
    cursor: pointer;
}

/*
 * Puntos de enganche de marca (Fase 10): Bootstrap 5.3 fija el color de
 * `.btn-primary`/`.text-primary`/etc. como valor literal en tiempo de
 * compilación (no referencia `--bs-primary` en tiempo de ejecución), así
 * que sobreescribir esa variable no alcanza. Estas reglas, cargadas después
 * de Bootstrap, sí usan `--mcc-primary`/`--mcc-primary-dark` — las mismas
 * dos variables que ya pinta la barra lateral — para que el logo/color de
 * un colegio se refleje también en botones, enlaces y elementos activos.
 */
.btn-primary {
    background-color: var(--mcc-primary);
    border-color: var(--mcc-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--mcc-primary-dark) !important;
    border-color: var(--mcc-primary-dark) !important;
}

.text-primary {
    color: var(--mcc-primary) !important;
}

.bg-primary {
    background-color: var(--mcc-primary) !important;
}

.border-primary {
    border-color: var(--mcc-primary) !important;
}

a:not(.btn) {
    color: var(--mcc-primary);
}

a:not(.btn):hover {
    color: var(--mcc-primary-dark);
}

.nav-pills .nav-link.active {
    background-color: var(--mcc-primary-dark);
}

@media (max-width: 991.98px) {
    .sidebar {
        min-height: auto;
        width: 100%;
    }
}

/*
 * Caja adaptable de logo (Fase 10, ajuste): un logo horizontal a una altura
 * fija se ve diminuto; uno vertical a un ancho fijo se ve angosto. En vez de
 * calcular la proporción de cada imagen, la caja fija un alto generoso, un
 * ancho mínimo (para que un logo vertical nunca quede "en hilo") y un ancho
 * máximo (para que uno horizontal no se desborde) — `object-fit: contain`
 * dentro de esos límites hace que cada logo use el espacio disponible según
 * su propia forma, siempre centrado, sin recortarse ni deformarse.
 */
.mcc-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    min-width: 56px;
    max-width: 220px;
}

.mcc-logo-box img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.mcc-logo-box--sm {
    height: 40px;
    min-width: 40px;
    max-width: 160px;
}

.mcc-logo-box--lg {
    height: 140px;
    min-width: 140px;
    max-width: 320px;
}

/*
 * Toasts y modal de confirmación con la identidad del sitio (Fase 14) —
 * reemplazan `window.confirm()`/`alert()`, genéricos del navegador y sin
 * marca. `mcc-toast`/`mcc-confirm-modal` se cargan desde `partials/alerts.php`
 * y `assets/js/app.js`, transversales a las tres plantillas del sitio.
 */
.mcc-toast {
    min-width: 300px;
    max-width: 380px;
    box-shadow: 0 10px 30px rgba(23, 54, 87, 0.18);
    border-radius: 0.5rem;
}

.mcc-toast .toast-body {
    color: #fff;
    font-weight: 500;
}

.mcc-toast .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mcc-toast-success { background-color: #1a7f4e; }
.mcc-toast-danger { background-color: #b3261e; }
.mcc-toast-warning { background-color: #a1670a; }
.mcc-toast-info,
.mcc-toast-primary { background-color: var(--mcc-primary); }
.mcc-toast-secondary { background-color: var(--mcc-text-muted); }

.mcc-confirm-modal .modal-header {
    background-color: var(--mcc-primary);
    color: #fff;
    border-bottom: none;
}

.mcc-confirm-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.mcc-confirm-modal .modal-title {
    font-size: 1.05rem;
}

/*
 * Matriz de permisos por rol (Fase 14) — tabla tipo Likert (función x
 * acción) en vez de la nube de etiquetas suelta que había antes en
 * "Permisos de su rol"/`/personal/{id}`.
 */
/* Solo las celdas de datos (un icono/guion) se mantienen en una sola
   línea — los encabezados de columna (nombres de acción, a veces largos:
   "Consultar (propios)") se dejan envolver en 2 líneas a propósito, para
   que cada columna sea angosta en vez de forzar scroll horizontal
   (hallazgo real: la tabla se salía del ancho de pantalla en /personal).
   `table-layout: fixed` es la parte que realmente importa aquí: sin esto,
   un navegador con layout automático de tablas IGNORA cualquier
   max-width/width en una celda y sigue calculando el ancho por el
   contenido más largo — `max-width` solo por sí solo no alcanza. */
.mcc-permission-matrix {
    table-layout: fixed;
    width: 100%;
}

.mcc-permission-matrix td {
    white-space: nowrap;
    overflow: hidden;
}

.mcc-permission-matrix th {
    white-space: normal;
    font-size: 0.8rem;
    word-break: break-word;
}

.mcc-permission-matrix td:first-child,
.mcc-permission-matrix th:first-child {
    white-space: normal;
    width: 140px;
}

/* Gráficos del dashboard: compactos por defecto (panorama de un vistazo),
   expandibles bajo demanda — feedback real revisando el dashboard con
   datos de prueba de carga (colegios con 70+ grupos). */
.mcc-chart-wrap {
    position: relative;
    height: 130px;
    transition: height 0.2s ease;
}

.mcc-chart-wrap.mcc-chart-expanded {
    height: 340px;
}

/* Tablas comparativas del dashboard global (colegio + 1-2 columnas de
   cifras): sin este límite se estiran a lo ancho de la tarjeta, dejando un
   hueco enorme en medio para muy poco contenido real. Centrada (no pegada
   a la izquierda) — feedback real: se veía descuadrada dentro de la
   tarjeta, con todo el espacio sobrante de un solo lado. */
.mcc-narrow-table {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.mcc-matrix-table th {
    white-space: nowrap;
}

/* Tomar asistencia (pedido explícito): resaltar de forma sutil la fila
   según el estado elegido en su <select> — antes había que leer el texto
   de cada select uno por uno para detectar un "Ausente" en una lista
   larga. Colores deliberadamente tenues (fondo, no texto) para no competir
   con el resto de la tabla ni parecer un error de validación.
   Hallazgo real: `background-color` en el <tr> no se veía en absoluto —
   Bootstrap 5.3 pinta cada <td> con su propio fondo opaco
   (`background-color: var(--bs-table-bg)`, blanco por defecto), que tapa
   por completo el fondo del <tr> sin importar la especificidad CSS. La
   forma correcta es sobreescribir la variable `--bs-table-bg` en la fila:
   como es una custom property con herencia normal, cada <td> hijo la
   hereda y pinta con ese color en vez del blanco por defecto. */
.mcc-row-absent {
    --bs-table-bg: rgba(220, 53, 69, 0.08);
}

.mcc-row-late {
    --bs-table-bg: rgba(255, 193, 7, 0.12);
}

.mcc-row-justified {
    --bs-table-bg: rgba(13, 110, 253, 0.07);
}

/* Checkboxes y radios más visibles en toda la plataforma (pedido explícito
   — con el borde gris clarito por defecto de Bootstrap casi no se notaban,
   sobre todo sin marcar). Más grandes, borde más oscuro y grueso, y el
   color de marca del colegio al marcarse (`--mcc-primary`, ya
   sobreescrita por colegio en la marca personalizada — Fase 10). */
.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border: 2px solid #6c757d;
    accent-color: var(--mcc-primary);
}

.form-check-input:checked {
    border-color: var(--mcc-primary);
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(36, 74, 124, 0.25);
}

.form-check-label {
    padding-top: 0.05em;
}
/* Alcance de comunicados (funnels de apertura): barras horizontales en HTML/CSS
   (accesibles sin JS — cada barra lleva su cifra y porcentaje como texto).
   Un solo tono para magnitud; el gris queda para "sin abrir/pendiente". */
.mcc-hbar-row {
    display: grid;
    grid-template-columns: minmax(150px, 30%) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.mcc-hbar-label {
    font-size: 0.875rem;
    color: #212529;
}

.mcc-hbar-track {
    background: #eef1f5;
    border-radius: 4px;
    height: 14px;
    overflow: hidden;
}

.mcc-hbar-fill {
    background: #2a78d6;
    height: 100%;
    border-radius: 0 4px 4px 0;
    min-width: 2px;
}

.mcc-hbar-fill.mcc-hbar-muted {
    background: #9aa5b1;
}

.mcc-hbar-value {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: #495057;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .mcc-hbar-row {
        grid-template-columns: 1fr auto;
    }

    .mcc-hbar-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/*
 * Contraste de los botones de contorno (hallazgo de Lighthouse, 2026-09-29):
 * los colores por defecto de Bootstrap quedan por debajo de 4.5:1 como texto
 * sobre fondo blanco o gris claro — info (1.9:1) y warning (1.6:1) casi no se
 * leían, y primary/success rozaban el mínimo. Se usan los tonos "emphasis" de
 * Bootstrap para el texto y el borde; al pasar el cursor conservan el relleno
 * de su color.
 */
.btn-outline-primary { --bs-btn-color: #0a58ca; --bs-btn-border-color: #0a58ca; }
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43; }
.btn-outline-info { --bs-btn-color: #055160; --bs-btn-border-color: #087990; }
.btn-outline-warning { --bs-btn-color: #664d03; --bs-btn-border-color: #997404; }
.btn-outline-danger { --bs-btn-color: #b02a37; --bs-btn-border-color: #b02a37; }
.btn-outline-secondary { --bs-btn-color: #495057; --bs-btn-border-color: #6c757d; }
/* <code> dentro de avisos amarillos (p. ej. la nota de borrador de /privacidad). */
.alert code { color: #7a1d4a; }
/* Texto libre que escribió alguien (mensajes, reportes): conserva sus saltos de línea. */
.mcc-preserve-lines { white-space: pre-line; overflow-wrap: anywhere; }
/* Botón de usuario de la barra superior: con un nombre o correo largo se recorta con "…" en vez de ensanchar la página en celular. */
.mcc-user-menu { min-width: 0; }
/* Campo trampa del filtro antispam (FormTrap): fuera de la pantalla para las personas, visible para los bots. */
.mcc-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Lista de casillas con su propio scroll (responsables de una actividad). */
.mcc-check-list { max-height: 260px; overflow-y: auto; }