/* ============================================================
   Estilos generales — Reunión y Atención a Padres (ITS Pereira)
   Estética: Flat Design + Bento Grid + Claymorphism en superficies.
   Los colores vienen de los tokens definidos en themes.css.
   ============================================================ */

/* ---------- Base ---------- */

body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--color-enlace);
}

a:hover {
    color: var(--color-acento-fuerte);
}

.text-body-secondary {
    color: var(--color-texto-suave) !important;
}

/* Foco visible en todo elemento interactivo (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid var(--color-foco);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ---------- Navbar y footer (flat) ---------- */

.navbar,
footer {
    background-color: var(--color-superficie) !important;
    border-bottom: 1px solid var(--color-borde);
}

footer {
    position: relative;
    border-bottom: 0;
    border-top: 0; /* el borde se reemplaza por la línea de acento (::before) */
}

.navbar-brand {
    font-weight: 700;
    color: var(--color-acento-fuerte);
}

/* Línea de acento institucional: bajo la navbar y sobre el footer.
   Verde escudo → teal (AM) → oliva (PM): ata los tres acentos del sistema. */
.navbar::after,
footer::before {
    content: '';
    position: absolute;
    inset: 100% 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-verde-acento) 0 40%,
        var(--am) 40% 70%,
        var(--pm) 70% 100%);
}

footer::before {
    inset: 0 0 auto 0; /* la línea va ARRIBA del footer */
}

/* Navbar fija arriba: gana una sombra plana al desplazar (FASE 3 con JS) */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1020;
}

.navbar.is-scrolled {
    box-shadow: 0 4px 16px rgba(0, 143, 57, 0.12);
}

[data-bs-theme="dark"] .navbar.is-scrolled {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: no-preference) {
    .navbar {
        transition: box-shadow var(--duracion-media) ease;
    }
}

/* ---------- Hero / panel de inicio ----------
   Base flat (panel duotono verde) + elevación exterior suave. El clay fuerte
   se reserva para tarjetas y botones. */

.hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 2.5rem;
    padding: clamp(2.25rem, 1rem + 6vw, 4.5rem) clamp(1.5rem, 1rem + 4vw, 4rem);
    border: var(--borde-clay);
    border-radius: var(--radio-clay);
    background-color: var(--duo-verde);
    box-shadow: 0 12px 30px rgba(0, 143, 57, 0.10);
}

[data-bs-theme="dark"] .hero {
    box-shadow: none; /* en oscuro el volumen lo da el --borde-clay */
}

.hero__contenido {
    position: relative;
    z-index: 1;
    max-width: 44rem;
}

.hero__titulo {
    margin-bottom: 1rem;
    font-size: var(--texto-display-1);
    font-weight: var(--peso-display);
    letter-spacing: var(--interletra-display);
    line-height: 1.05;
}

.hero__subtitulo {
    max-width: 36rem;
    margin-bottom: 1.75rem;
    font-size: 1.15rem;
    color: var(--color-texto-suave);
}

.hero__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ---------- Botones clay ---------- */

.hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radio-clay-chico);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--duracion-rapida) var(--curva-arcilla),
                box-shadow var(--duracion-rapida) ease;
}

.hero__cta--primario {
    background-color: var(--verde-oscuro);
    color: #ffffff;                 /* 6.26:1 sobre #00702d */
    box-shadow: 0 6px 16px rgba(0, 143, 57, 0.28);
}

.hero__cta--primario:hover {
    color: #ffffff;
}

[data-bs-theme="dark"] .hero__cta--primario {
    background-color: var(--color-verde-texto); /* #3fd06c */
    color: #0d140f;                 /* texto oscuro sobre verde claro: alto contraste */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.hero__cta--secundario {
    background-color: var(--color-superficie);
    color: var(--color-enlace);
    border: 1px solid var(--color-borde);
}

.hero__cta:hover {
    transform: translateY(-3px);
}

.hero__cta:active {
    transform: translateY(0);
}

.hero__cta--primario:active {
    box-shadow:
        inset 2px 2px 8px rgba(0, 0, 0, 0.30),
        inset -1px -1px 3px rgba(255, 255, 255, 0.15);
}

/* Botones clay genéricos (reutilizables): radio chico + sombra clay + :active
   que se hunde. Mantienen el color de Bootstrap; solo cambia la forma. */
.btn-clay {
    border-radius: var(--radio-clay-chico);
    box-shadow: 0 6px 16px rgba(0, 143, 57, 0.18);
    transition: transform var(--duracion-rapida) var(--curva-arcilla),
                box-shadow var(--duracion-rapida) ease;
}

.btn-clay:hover {
    transform: translateY(-2px);
}

.btn-clay:active {
    transform: translateY(0);
    box-shadow:
        0 2px 6px rgba(0, 143, 57, 0.14),
        inset 2px 2px 6px rgba(0, 0, 0, 0.22),
        inset -1px -1px 3px rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] .btn-clay {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .btn-clay:active {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 2px 2px 6px rgba(0, 0, 0, 0.55),
        inset -1px -1px 3px rgba(230, 241, 234, 0.12);
}

/* ---------- Reloj protagonista (inicio) ---------- */

.reloj {
    text-align: center;
    margin: 1.5rem auto 0;
}

.reloj__fecha {
    margin: 0 0 0.25rem;
    font-size: clamp(1rem, 0.85rem + 0.8vw, 1.35rem);
    color: var(--color-texto-suave);
}

.reloj__hora {
    margin: 0;
    font-size: var(--texto-reloj);
    font-weight: var(--peso-display);
    letter-spacing: var(--interletra-display);
    line-height: 1;
    color: var(--color-verde-texto);
    font-variant-numeric: tabular-nums; /* la hora no "salta" al cambiar de dígito */
}

/* ---------- Botón de marca (verde institucional, accesible) ---------- */

.btn-marca {
    background-color: var(--verde-oscuro);
    color: #ffffff;            /* 6.26:1 sobre #00702d */
    border: 0;
}

.btn-marca:hover,
.btn-marca:focus {
    background-color: #005a24; /* verde más oscuro */
    color: #ffffff;
}

[data-bs-theme="dark"] .btn-marca {
    background-color: var(--color-verde-texto); /* #3fd06c */
    color: #0d140f;            /* texto oscuro sobre verde claro */
}

[data-bs-theme="dark"] .btn-marca:hover,
[data-bs-theme="dark"] .btn-marca:focus {
    color: #0d140f;
}

/* ---------- Bento Grid ---------- */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

/* Tarjeta clay. La sombra se compone una sola vez a partir de tres custom
   properties: el hover solo cambia --clay-outer, el modo oscuro solo
   --clay-insets, y cada jornada solo --tinte-clay. */
.bento-item {
    position: relative; /* ancla para stretched-link */
    grid-column: span 2;
    padding: 1.75rem;
    background-color: var(--color-superficie);
    border: var(--borde-clay);
    border-radius: var(--radio-clay);
    --tinte-clay: var(--tinte-sombra-verde);
    --clay-outer: 0 10px 26px var(--tinte-clay);
    --clay-insets:
        inset 2px 2px 6px rgba(255, 255, 255, 0.9),
        inset -3px -3px 8px rgba(0, 143, 57, 0.08);
    box-shadow: var(--clay-outer), var(--clay-insets);
    transition: transform var(--duracion-media) var(--curva-arcilla),
                box-shadow var(--duracion-media) var(--curva-arcilla);
}

/* Hover/focus: la tarjeta se "infla" — más elevación exterior + leve subida */
.bento-item:hover,
.bento-item:focus-within {
    --clay-outer: 0 18px 38px var(--tinte-clay);
    transform: translateY(-4px);
}

[data-bs-theme="dark"] .bento-item {
    --tinte-clay: rgba(0, 0, 0, 0.4);
    --clay-insets:
        inset 2px 2px 6px rgba(230, 241, 234, 0.07),
        inset -3px -3px 8px rgba(0, 0, 0, 0.45);
}

.bento-item--medio  { grid-column: span 3; }
.bento-item--ancho  { grid-column: span 4; }
.bento-item--total  { grid-column: span 6; }

/* Color por jornada: solo cambia el tinte de la sombra exterior y los acentos.
   En oscuro el tinte vuelve a neutro (la regla dark gana por especificidad);
   la identidad la sostienen el color del enlace y el duotono del icono. */
.bento-item--am {
    --tinte-clay: var(--tinte-sombra-am);
    --acento-jornada-texto: var(--am-texto);
    --duo-jornada: var(--duo-am);
}
.bento-item--pm {
    --tinte-clay: var(--tinte-sombra-pm);
    --acento-jornada-texto: var(--pm-texto);
    --duo-jornada: var(--duo-pm);
}

/* Enlace de cada tarjeta de jornada en su color (variante -texto, ≥4.5:1) */
.bento-item--jornada a {
    color: var(--acento-jornada-texto);
    font-weight: 600;
}
.bento-item--jornada a:hover {
    color: var(--acento-jornada-texto);
}

/* La pastilla del icono se tiñe con el duotono de la jornada */
.bento-item--jornada .bento-icono {
    background-color: var(--duo-jornada);
    color: var(--acento-jornada-texto);
}

/* Tarjeta destacada: verde pleno, texto blanco. Bevel clay propio. */
.bento-item--destacado {
    overflow: hidden;
    background-color: var(--verde-oscuro);
    color: #ffffff;                 /* 6.26:1 sobre #00702d */
    --clay-outer: 0 14px 32px rgba(0, 143, 57, 0.32);
    --clay-insets:
        inset 2px 2px 8px rgba(255, 255, 255, 0.22),
        inset -3px -3px 10px rgba(0, 0, 0, 0.22);
}
.bento-item--destacado:hover,
.bento-item--destacado:focus-within {
    --clay-outer: 0 20px 42px rgba(0, 143, 57, 0.4);
}
[data-bs-theme="dark"] .bento-item--destacado {
    --clay-insets:
        inset 2px 2px 8px rgba(255, 255, 255, 0.18),
        inset -3px -3px 10px rgba(0, 0, 0, 0.3);
}

.bento-item h2,
.bento-item h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

/* Icono como pastilla de arcilla: mini doble inset, radio chico */
.bento-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radio-clay-chico);
    background-color: var(--color-superficie-alt);
    color: var(--color-acento-fuerte);
    font-size: 1.4rem;
    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.9),
        inset -2px -2px 5px rgba(0, 143, 57, 0.12);
}

[data-bs-theme="dark"] .bento-icono {
    box-shadow:
        inset 2px 2px 5px rgba(230, 241, 234, 0.06),
        inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-item,
    .bento-item--medio,
    .bento-item--ancho {
        grid-column: span 1;
    }

    .bento-item--total {
        grid-column: span 2;
    }
}

@media (max-width: 575.98px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item,
    .bento-item--medio,
    .bento-item--ancho,
    .bento-item--total {
        grid-column: span 1;
    }

    .hero__subtitulo {
        font-size: 1.05rem;
    }

    .hero__cta {
        flex: 1 1 auto;
    }
}

/* ---------- Vistas públicas: acentos por jornada ---------- */

.jornada-am { --acento-jornada: var(--am); --acento-jornada-texto: var(--am-texto); }
.jornada-pm { --acento-jornada: var(--pm); --acento-jornada-texto: var(--pm-texto); }

/* Cabecera de las vistas (título + cambio de jornada) */
.tv-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

/* Reloj + switch de jornada agrupados a la derecha de la cabecera */
.tv-cabecera__derecha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

/* Reloj compacto en la cabecera de la vista TV (la home tiene el grande) */
.tv-reloj {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}

.tv-reloj__hora {
    font-weight: var(--peso-display);
    font-variant-numeric: tabular-nums; /* no "salta" al cambiar de segundo */
    color: var(--color-verde-texto);
    font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
}

.tv-reloj__fecha {
    font-size: clamp(0.75rem, 0.65rem + 0.4vw, 1rem);
    color: var(--color-texto-suave);
}

/* La navbar y el footer no se aplastan cuando la vista TV ocupa todo el alto */
.navbar { flex-shrink: 0; }
footer { flex-shrink: 0; }

/* ---------- Distribución (versión TV de una sola vista) ----------
   Móvil: 1 columna apilada (scroll normal).
   >=576px: 2 columnas.
   >=992px: 3 columnas que LLENAN el alto del viewport sin scroll — la grilla
   flexiona y reparte el alto entre las filas (sin offsets mágicos). */

.tv-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}

.tv-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.9rem;
    background-color: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-left: 0.35rem solid var(--acento-jornada, var(--color-verde-acento));
    border-radius: var(--radio-clay-chico);
}

.tv-grupo {
    min-width: 3.4em;
    font-weight: var(--peso-display);
    font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
    color: var(--acento-jornada-texto, var(--color-verde-texto));
}

.tv-docente {
    font-weight: 600;
    line-height: 1.15;
    font-size: clamp(0.95rem, 0.82rem + 0.5vw, 1.25rem);
}

.tv-aula {
    justify-self: end;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem);
}

@media (min-width: 576px) {
    .tv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    main.vista-tv {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0; /* sin esto, el footer empuja y aparece scroll */
    }
    .vista-tv .tv-grid {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(var(--filas, 10), minmax(0, 1fr));
        grid-auto-flow: column; /* orden por columnas (tipo periódico) */
        gap: 0.5rem 0.9rem;
        overflow: hidden; /* recorte de seguridad: nunca scroll en la vista TV */
    }
    .vista-tv .tv-grupo   { font-size: clamp(1.4rem, 0.8rem + 1.1vw, 2.2rem); }
    .vista-tv .tv-docente { font-size: clamp(1.05rem, 0.7rem + 0.8vw, 1.5rem); }
    .vista-tv .tv-aula    { font-size: clamp(1.6rem, 1rem + 1.3vw, 2.6rem); }
}

/* ---------- Atención (tabla responsive: horizontal / tarjetas en móvil) ---------- */

/* Caja de búsqueda en vivo: el JS la revela (sin JS queda hidden, así no hay
   un input muerto). Acotada en ancho para no estirarse de pared a pared. */
.atencion-buscador {
    max-width: 32rem;
    margin-bottom: 1.1rem;
}

/* Fila filtrada: se oculta en AMBOS layouts. La doble clase (tr.fila-oculta)
   le gana en especificidad al `display:block` del modo tarjeta en móvil. */
.tabla-atencion tr.fila-oculta {
    display: none;
}

.tabla-atencion {
    width: 100%;
    border-collapse: collapse;
}

.tabla-atencion caption {
    caption-side: top;
    text-align: left;
    color: var(--color-texto-suave);
    padding-bottom: 0.6rem;
}

.tabla-atencion th,
.tabla-atencion td {
    padding: 0.65rem 0.8rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde);
}

.tabla-atencion thead th {
    background-color: var(--color-superficie-alt);
    border-bottom: 2px solid var(--acento-jornada, var(--color-verde-acento));
    white-space: nowrap;
}

.tabla-atencion tbody th[scope="row"] {
    font-weight: var(--peso-display);
    white-space: nowrap;
    color: var(--acento-jornada-texto, var(--color-verde-texto));
}

@media (max-width: 767.98px) {
    /* Oculta el thead visualmente; en móvil cada celda lleva su etiqueta */
    .tabla-atencion thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    .tabla-atencion,
    .tabla-atencion tbody,
    .tabla-atencion tr,
    .tabla-atencion th,
    .tabla-atencion td {
        display: block;
    }
    .tabla-atencion tr {
        margin-bottom: 0.85rem;
        padding: 0.6rem 0.85rem;
        border: 1px solid var(--color-borde);
        border-left: 0.35rem solid var(--acento-jornada, var(--color-verde-acento));
        border-radius: var(--radio-clay-chico);
    }
    .tabla-atencion tbody th[scope="row"],
    .tabla-atencion td {
        border-bottom: 0;
        padding: 0.2rem 0;
    }
    .tabla-atencion td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-texto-suave);
    }
    .tabla-atencion tbody th[scope="row"]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-texto-suave);
    }
}

/* ---------- Movimiento ---------- */

/* Aparición progresiva de las tarjetas: solo con JS (.js-anim en <html>) y sin
   preferencia de menos movimiento. Usa `translate` (independiente de
   `transform`) para no pisar el lift de hover de las tarjetas clay. */
@media (prefers-reduced-motion: no-preference) {
    .js-anim .bento-item {
        opacity: 0;
        translate: 0 16px;
        transition: opacity var(--duracion-media) ease,
                    translate var(--duracion-media) var(--curva-arcilla),
                    transform var(--duracion-media) var(--curva-arcilla),
                    box-shadow var(--duracion-media) var(--curva-arcilla);
    }

    .js-anim .bento-item.is-visible {
        opacity: 1;
        translate: none;
    }
}

/* Transición suave al cambiar de tema. Solo durante el clic deliberado
   (.tema-animado en <html>, que theme-toggle.js pone y quita). */
@media (prefers-reduced-motion: no-preference) {
    .tema-animado body,
    .tema-animado .navbar,
    .tema-animado footer,
    .tema-animado .hero,
    .tema-animado .bento-item,
    .tema-animado .bento-icono,
    .tema-animado .btn-clay {
        transition: background-color var(--duracion-media) ease,
                    color var(--duracion-media) ease,
                    box-shadow var(--duracion-media) ease,
                    border-color var(--duracion-media) ease;
    }
}

/* Respetar la preferencia de menos movimiento (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .bento-item {
        transition: none;
    }

    .bento-item:hover,
    .bento-item:focus-within {
        transform: none;
    }

    .hero__cta,
    .btn-clay {
        transition: none;
    }

    .hero__cta:hover,
    .btn-clay:hover {
        transform: none;
    }
}