/* =====================================================
   Akcadmia — componentes/horario.css
   Base COMPARTIDA por los tres horarios (Profesor, Alumno, perfil público):
   estructura de la grilla + indicador de día/hora actual.

   El marcado lo pinta la parcial compartida Views/Shared/_GrillaSemana.cshtml y
   lo recarga por AJAX js/compartido/grilla-horario.js, así que estos estilos son
   GLOBALES a propósito: en un .cshtml.css no alcanzarían al HTML inyectado.

   Lo que sí pinta Razor en cada vista (la etiqueta y el input de semana) vive en
   el .cshtml.css de esa vista, no aquí.

   Cada horario añade encima su propio componentes/horario-{rol}.css con lo
   particular (badges de estado, botones, colores).
   ===================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   ESTRUCTURA COMÚN DE LA GRILLA
   ───────────────────────────────────────────────────────────────────────── */

/* === Tabla === */
.edu-horario__grid-tabla {
    min-width: 780px;
    table-layout: fixed;
}

/* === Columna de horas (colgroup) ===
   En rem para que crezca con la letra. Tiene que caber «10:00 p.m.», la etiqueta
   más larga: la de 12 horas no se parte (nowrap) y, si no cabe, se corta contra
   la columna del lunes. */
.edu-horario__grid-colhora {
    width: 6rem;
}

/* === Celda de la columna de horas: 12h principal + 24h secundario === */
.edu-horario__grid-celda-hora {
    line-height: 1.2;
    font-weight: 600;
}

.edu-horario__grid-celda-hora__12h {
    white-space: nowrap;
}

.edu-horario__grid-celda-hora__24h {
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.75;
    color: #6c757d;
}

/* === Celda de slot (el <td> donde caen las tarjetas) ===
   ATENCIÓN: esta altura es la que lee grilla-horario.js para calcular el alto de
   cada tarjeta según su duración. Si cambia aquí, no hay que tocar el JS. */
.edu-horario__grid-slot {
    position: relative;
    vertical-align: top;
    height: 72px;
    min-height: 72px;
    overflow: visible;
}

/* === Tarjeta de clase: posición absoluta dentro del slot ===
   El alto lo pone el JS (duración de la clase); todo lo demás, aquí.

   COLUMNA FLEX: la zona desplazable crece y las acciones del pie se quedan
   debajo, ocupando lo que necesiten. Antes se reservaba sitio con un
   padding-bottom fijo de 18px que NUNCA llegó a aplicarse: el armazón pinta la
   tarjeta con la utilidad .p-1 de Bootstrap, y las utilidades de espaciado
   llevan !important, así que ganaban siempre. Resultado: el área de scroll
   llegaba hasta abajo y los botones quedaban ENCIMA de la última fila de
   contenido. Con flex la reserva ya no es un número mágico: es el alto real de
   los botones de cada rol. */
.edu-horario__grid-tarjeta {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    z-index: 3;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-size: 0.68rem;
    line-height: 1.35;
}

/* Tarjeta que lleva a otra pantalla (el módulo Clases). La emite el armazón
   cuando la posición trae URL de navegación; antes solo la tenía el alumno y la
   del profesor no daba ninguna pista de que se podía pulsar. */
.edu-horario__grid-tarjeta--navegable {
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

    .edu-horario__grid-tarjeta--navegable:hover {
        box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15);
    }

/* Área desplazable interna: el contenido scrollea y los botones/acciones
   (editar, cancelar, "+") quedan fuera de este div, sin irse con él.

   flex:1 1 auto reparte lo que sobra tras las acciones, y min-height:0 es
   imprescindible: sin él un hijo flex no baja de su contenido, el div nunca se
   encoge y no llega a activar su propio scroll. Sustituye al max-height:100%,
   que medía contra la tarjeta entera e ignoraba el pie. Sigue dependiendo de
   ser hijo DIRECTO de la tarjeta: por eso las parciales no tienen raíz propia. */
.edu-horario__grid-tarjeta-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

    .edu-horario__grid-tarjeta-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .edu-horario__grid-tarjeta-scroll::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .2);
        border-radius: 2px;
    }

/* === Horas dentro de la tarjeta: 12h principal + 24h secundario === */
.edu-horario__grid-horas {
    line-height: 1.25;
}

.edu-horario__grid-hora12 {
    font-weight: 600;
    white-space: nowrap;
}

.edu-horario__grid-hora24 {
    font-size: 0.58rem;
    opacity: 0.8;
}

/* === Botón + de la celda (crear clase, buscar clases) ===
   La misma forma la reutiliza el "+" de matrícula del perfil público, que vive
   dentro de la tarjeta; grilla-horario.js solo gobierna los que son hijos
   directos de la celda. */
.edu-horario__grid-btnplus {
    width: 20px;
    height: 20px;
    top: 3px;
    right: 3px;
    font-size: .75rem;
    z-index: 2;
    line-height: 1;
}

/* === Apariencia CLARA de la grilla, independiente del modo oscuro del SO ===
   Acotado a los contenedores de grilla (#grilla-semana en Profesor/Alumno,
   #prof-grilla-semana en el perfil público) para no teñir de blanco el resto
   de tarjetas de la plataforma. Va por id y no por clase porque el .card lo
   pinta la parcial que se recarga por AJAX. */
#grilla-semana .card,
#prof-grilla-semana .card {
    background-color: #fff;
    color: #212529;
    border-color: rgba(0, 0, 0, .125);
}

    #grilla-semana .card .table,
    #prof-grilla-semana .card .table {
        --bs-table-bg: #fff;
        --bs-table-color: #212529;
        --bs-table-color-type: initial;
        --bs-table-striped-color: #212529;
        --bs-table-hover-color: #212529;
        --bs-table-hover-bg: rgba(0, 0, 0, .04);
        --bs-table-border-color: #dee2e6;
        color: #212529;
    }

/* === La isla clara, también con el tema OSCURO activo ===
   La regla de arriba deja la grilla clara en los dos temas, pero solo pinta el
   fondo del .card: todo lo que va DENTRO de la tarjeta seguía conmutando con el
   tema, así que quedaba texto claro sobre superficie clara. Es lo que se veía en
   el nombre del curso, en la línea de la hora en 24h y en los enlaces de Editar y
   Eliminar.

   Se devuelven a sus valores del tema claro las tres cosas que se colaban:

   1. Las variables de Bootstrap que el tema oscuro remapea en el body y que se
      heredan hasta aquí. Es también lo que arregla los enlaces y los botones
      btn-link, que leen --bs-link-color, y las alertas de "clase inactiva", que
      se construyen con las variables -subtle y -emphasis y dentro de la tarjeta
      salían como recuadros oscuros. Se restauran todas y no solo las que se usan
      hoy: el tema oscuro las remapea en bloque, y dejar la mitad puestas es
      garantizar que el siguiente componente que entre en la tarjeta vuelva a
      salir oscuro. De paso, con --bs-primary-rgb en su valor claro el tinte de
      las tarjetas —bg-primary bg-opacity-10 y su borde, que decide el mapeador
      de cada rol— vuelve a ser idéntico al de modo claro.
   2. Los colores de texto que el tema oscuro impone con !important. Necesitan
      !important también aquí: la especificidad sola no le gana a una declaración
      marcada.
   3. Las superficies claras que el tema oscuro reconvierte en oscuras.

   Vale para los tres horarios: profesor y alumno cuelgan de #grilla-semana y el
   perfil público de #prof-grilla-semana. */
[data-tema="oscuro"] #grilla-semana,
[data-tema="oscuro"] #prof-grilla-semana {
    color: #212529;
    --bs-body-color: #212529;
    --bs-emphasis-color: #212529;
    --bs-heading-color: #212529;
    --bs-secondary-color: rgba(33, 37, 41, .75);
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-link-hover-color-rgb: 67, 56, 202;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
}

    [data-tema="oscuro"] #grilla-semana .text-muted,
    [data-tema="oscuro"] #grilla-semana .form-text,
    [data-tema="oscuro"] #prof-grilla-semana .text-muted,
    [data-tema="oscuro"] #prof-grilla-semana .form-text {
        color: #6c757d !important;
    }

    [data-tema="oscuro"] #grilla-semana .text-body,
    [data-tema="oscuro"] #grilla-semana .text-dark,
    [data-tema="oscuro"] #prof-grilla-semana .text-body,
    [data-tema="oscuro"] #prof-grilla-semana .text-dark {
        color: #212529 !important;
    }

    [data-tema="oscuro"] #grilla-semana .bg-white,
    [data-tema="oscuro"] #prof-grilla-semana .bg-white {
        background-color: #fff !important;
        color: #212529;
    }

    [data-tema="oscuro"] #grilla-semana .bg-light:not(.form-control):not(.badge),
    [data-tema="oscuro"] #prof-grilla-semana .bg-light:not(.form-control):not(.badge) {
        background-color: #f8f9fa !important;
        color: #212529;
    }

    [data-tema="oscuro"] #grilla-semana .badge.bg-light,
    [data-tema="oscuro"] #prof-grilla-semana .badge.bg-light {
        background-color: #f8f9fa !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }

/* ─────────────────────────────────────────────────────────────────────────
   TARJETA CON EL COLOR DE SU CURSO
   ───────────────────────────────────────────────────────────────────────── */

/* El color llega en data-color y grilla-horario.js lo pasa a --edu-paleta-color:
   el marcado no lleva style. La tarjeta se tiñe con una capa por debajo del
   contenido y no mezclando el color en el fondo, que pediría color-mix y dejaría
   sin tinte a los navegadores de hace un par de años.

   El fondo se fija en el blanco de la isla con !important porque las utilidades
   bg-* del estado siguen en la tarjeta —las pone el mapeador y las repinta el
   horario cuando el estado cambia en vivo— y también llevan !important: con esta
   especificidad gana el blanco, y el estado queda en el borde y en el badge. Es
   blanco en los dos temas porque la grilla es una isla clara en los dos. */
.edu-horario__grid-tarjeta.edu-horario__grid-tarjeta--color {
    background-color: #fff !important;
}

/* z-index -1 la deja entre el fondo y el contenido: la tarjeta ya forma su
       propio contexto de apilamiento con su z-index, y su overflow recorta la
       capa con las esquinas redondeadas. */
.edu-horario__grid-tarjeta--color::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--edu-paleta-color, transparent);
    opacity: .16;
    pointer-events: none;
}

/* El gris de .text-muted no llega a 4,5:1 sobre el tinte de los colores más
   oscuros de la paleta; este sí, con todos ellos. Va con los ids de la grilla para
   empatar en especificidad con la regla del tema oscuro de arriba y ganarle por
   venir después: en los dos temas es el mismo, como el resto de la isla. */
#grilla-semana .edu-horario__grid-tarjeta--color .text-muted,
#prof-grilla-semana .edu-horario__grid-tarjeta--color .text-muted {
    color: #5c636a !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   INDICADORES DE DÍA Y HORA ACTUAL
   Los inyecta inicializarIndicadorHoraActual (utilidades.js). Bootstrap 5 pinta
   el fondo de celda con box-shadow inset, por eso se sobrescriben las variables
   de Bootstrap Y el box-shadow.
   ───────────────────────────────────────────────────────────────────────── */

/* Encabezado del día actual (th) */
th.edu-horario__encabezado-dia--hoy,
th.edu-horario__encabezado-dia--hoy[class] {
    --bs-table-bg: transparent !important;
    --bs-table-bg-state: #1a56db !important;
    --bs-table-bg-type: #1a56db !important;
    --bs-table-accent-bg: #1a56db !important;
    background-color: #1a56db !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: none !important;
}

/* Todas las celdas de datos de la columna del día actual */
td.edu-horario__celda--hoy {
    --bs-table-bg-state: rgba(26, 86, 219, 0.08) !important;
    background-color: rgba(26, 86, 219, 0.08) !important;
    box-shadow: inset 0 0 0 9999px rgba(26, 86, 219, 0.08) !important;
}

/* Celda específica de la hora actual (dentro de la columna de hoy) */
td.edu-horario__celda--ahora {
    --bs-table-bg-state: rgba(26, 86, 219, 0.20) !important;
    background-color: rgba(26, 86, 219, 0.20) !important;
    box-shadow: inset 0 0 0 9999px rgba(26, 86, 219, 0.20) !important;
}

/* Línea de tiempo real — se posiciona en el wrapper .table-responsive */
.edu-horario__linea-tiempo {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background-color: rgba(46, 204, 113, 0.85);
    z-index: 20;
    pointer-events: none;
    border-radius: 1px;
    box-shadow: 0 0 3px rgba(46, 204, 113, 0.35);
}

    /* Punto circular al inicio de la línea */
    .edu-horario__linea-tiempo::before {
        content: '';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(46, 204, 113, 0.9);
        box-shadow: 0 0 3px rgba(46, 204, 113, 0.45);
    }