/* Estilos personalizados de Daniel de la Vega.
 * Agregar aqui las sobreescrituras y clases nuevas; no editar los CSS de la plantilla.
 */

/* ======================== ACCESO FIJO PLATAFORMA BETEL ======================== */
.acceso-betel-layer {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 999;
}

.acceso-betel-fijo {
    position: absolute;
    right: 20px;
    bottom: 90px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 3px solid #0b1f40;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(11, 31, 64, 0.3);
    pointer-events: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.acceso-betel-fijo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 17px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.acceso-betel-fijo:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(11, 31, 64, 0.4);
}

@media (max-width: 991px) {
    .acceso-betel-fijo {
        right: 15px;
        bottom: 85px;
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 767px) {
    .acceso-betel-fijo {
        touch-action: none;
        cursor: grab;
    }

    .acceso-betel-fijo.arrastrando {
        cursor: grabbing;
        transform: scale(1.05);
        transition: none;
    }
}

@media (max-width: 575px) {
    .acceso-betel-fijo {
        right: 10px;
        bottom: 80px;
        width: 80px;
        height: 80px;
    }
}

/* ======================== ARRASTRE BOTÓN BETEL EN MÓVIL ======================== */
@media (max-width: 767px) {
    .acceso-betel-fijo {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .acceso-betel-fijo.arrastrando {
        cursor: grabbing;
        transform: scale(1.05);
        transition: none;
    }

    .acceso-betel-fijo img {
        pointer-events: none;
        user-select: none;
        -webkit-user-drag: none;
    }
}

/* Acceso a la administracion */
.acceso-administracion-card {
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.acceso-recaptcha {
    display: flex;
    justify-content: center;
}

/* Administracion de modales */
.admin-modales .modal-posicion {
    width: 7rem;
}

.modal-contenido {
    overflow-wrap: anywhere;
}

.modal-contenido img {
    max-width: 100%;
    height: auto;
}

.admin-modales .cke {
    max-width: 100%;
}

/* Publicaciones */
.publicacion-portada {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.publicacion-detalle {
    max-width: 960px;
}

.publicacion-contenido {
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.publicacion-contenido img,
.publicacion-imagen-detalle {
    max-width: 100%;
    height: auto;
}

.publicacion-imagen-actual {
    max-width: 240px;
    max-height: 180px;
    object-fit: contain;
}


/* Galería por álbumes y formularios de administración. */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1.5rem;
}
.galeria-album, .galeria-foto {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem;
    background: #edf1f5;
    aspect-ratio: 4 / 3;
}
.galeria-album img, .galeria-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.galeria-album-titulo {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, .85));
    opacity: 0;
    transition: opacity .25s ease;
}
.galeria-album-titulo strong { font-size: 1.25rem; }
.galeria-album:hover .galeria-album-titulo,
.galeria-album:focus-visible .galeria-album-titulo { opacity: 1; }
.galeria-album:hover img { transform: scale(1.08); }
.galeria-album:focus-visible, .galeria-foto:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 3px; }
.galeria-sin-imagen { display: grid; height: 100%; place-items: center; }
.galeria-editor { max-width: 1100px; }
.galeria-campo { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border: 1px solid #dee2e6; border-radius: .75rem; }
.galeria-preview { width: 100%; height: 180px; object-fit: cover; border-radius: .5rem; }
@media (hover: none) {
    .galeria-album-titulo { opacity: 1; }
}



/* Documentos institucionales: ajustes sobre las tarjetas de la plantilla. */
.documentos-contenido {
    flex: 1;
    min-width: 0;
}
.documentos-tarjeta h3 {
    overflow-wrap: anywhere;
}
.documentos-administracion input[type="number"] {
    max-width: 120px;
}


/* Administración y contenido de talleres. */
[data-taller-tarjeta] .workshop-thumb {
    aspect-ratio: 3 / 4;
    background: #fff;
}
[data-taller-tarjeta] .workshop-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: center;
}
[data-taller-tarjeta] .workshop-card:hover .workshop-thumb img {
    transform: none;
}

.talleres-descripcion {
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.talleres-posicion { max-width: 120px; }
.talleres-preview { width: 100%; max-height: 220px; object-fit: contain; border-radius: .75rem; }
.talleres-formulario { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
[data-taller-tarjeta][hidden] { display: none !important; }


/* Imagen del taller en la ventana de detalle. */
.talleres-detalle-imagen {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    object-fit: cover;
}
@media (max-width: 767.98px) {
    .talleres-detalle-imagen {
        height: 16rem;
        min-height: 0;
    }
}


/* Administración de cursos. */
.cursos-anio { max-width: 360px; }
.cursos-posicion { width: 110px; }
.cursos-foto { width: 100px; height: 70px; object-fit: cover; border-radius: .5rem; }
.cursos-preview { max-width: 100%; max-height: 260px; object-fit: contain; border-radius: .75rem; }
.cursos-formulario { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cursos-tabla { min-width: 650px; }


/* Equipo de funcionarios: mantener las tarjetas de docentes de la plantilla. */
.funcionario-iniciales { display: grid; place-items: center; }
.funcionario-posicion { max-width: 110px; }
.funcionario-preview { max-width: 100%; max-height: 240px; object-fit: contain; border-radius: .75rem; }
.funcionarios-formulario { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
[data-funcionarios-equipo][hidden] { display: none !important; }

/* Identidad del colegio y acceso a Betel Colegios. */
.brand-logo img,
.offcanvas-title img,
.site-footer a[href="index.php"] img {
    object-fit: contain;
    flex-shrink: 0;
}
.site-navbar .brand-logo .brand-name {
    display: block;
    max-width: 210px;
    white-space: normal;
    font-size: 0.95rem;
    line-height: 1.25;
}
.site-navbar .brand-slogan {
    max-width: 210px;
    white-space: normal;
}
.betel-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 4px 12px;
    border-radius: 14px;
    transition: transform 180ms ease;
}
.betel-logo-link img {
    display: block;
    width: 130px;
    height: auto;
    object-fit: contain;
}
.betel-logo-header {
    background: #e6f4ff;
    border: 2px solid #003879;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.betel-logo-footer {
    background: transparent;
    padding: 0;
    max-width: 100%;
}
.betel-logo-footer img {
    width: 260px;
    max-width: 100%;
    height: auto;
}
.betel-logo-link:hover,
.betel-logo-link:focus-visible {
    transform: scale(1.08);
    box-shadow: none;
}
.betel-logo-link.betel-logo-header:hover,
.betel-logo-link.betel-logo-header:focus-visible {
    box-shadow: 0 6px 18px rgb(15 35 65 / 18%);
}
.betel-logo-link:focus-visible {
    outline: 3px solid #e7bc3c;
    outline-offset: 4px;
}
@media (max-width: 575.98px) {
    .site-navbar .brand-logo .brand-name {
        max-width: 160px;
        font-size: 0.8rem;
    }
    .site-navbar .brand-logo {
        margin-right: 0;
        gap: 8px;
    }
}


/* Mantener las interacciones suaves aun cuando el sistema reduzca el movimiento.
 * La plantilla conserva la reducción de animaciones automáticas y de scroll.
 * Bootstrap también establece transition: none en varios componentes.
 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 200ms !important;
    }

    .btn,
    .form-control,
    .form-select,
    .form-check-input,
    .form-switch .form-check-input,
    .nav-link,
    .accordion-button,
    .accordion-button::after {
        transition-property: color, background-color, border-color, box-shadow, transform, background-position;
        transition-timing-function: ease;
    }

    .fade {
        transition-property: opacity;
    }

    .collapsing {
        transition-property: height;
    }

    .collapsing.collapse-horizontal {
        transition-property: width;
    }

    .offcanvas,
    .modal.fade .modal-dialog {
        transition-property: transform;
    }

    /* El arrastre debe seguir al puntero sin retrasos. */
    .acceso-betel-fijo.arrastrando {
        transition-duration: 0s !important;
    }
}

/* Slider principal: Bootstrap determina el sentido de avance y retroceso. */
/* El contraste sigue al bloque de texto de cada diapositiva. */
#heroCarousel .hero-overlay {
    background: linear-gradient(100deg, rgb(12 24 58 / 45%), rgb(12 24 58 / 23%) 80%);
}
#heroCarousel .hero-content .col-lg-7 {
    position: relative;
    isolation: isolate;
}
#heroCarousel .hero-content .col-lg-7::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: -7rem -9vw;
    background: radial-gradient(ellipse farthest-side at center, rgb(12 24 58 / 82%) 0%, rgb(12 24 58 / 68%) 58%, transparent 100%);
}

#heroCarousel .carousel-item {
    transition-property: transform;
    transition-duration: 650ms !important;
    transition-timing-function: ease-in-out;
}

#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next {
    display: flex;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgb(0 0 0 / 25%);
}

#heroCarousel .carousel-control-prev {
    left: 0.5rem;
}

#heroCarousel .carousel-control-next {
    right: 0.5rem;
}

@media (max-width: 767.98px) {
    #heroCarousel .carousel-control-prev,
    #heroCarousel .carousel-control-next {
        width: 2.25rem;
        height: 2.75rem;
    }

    #heroCarousel .hero-content > .container {
        padding-inline: 3.25rem;
    }
}

/* Iconos de contacto y redes sociales: hover solo dentro de enlaces. */
.icono-sitio {
    display: inline-block;
    width: 24px;
    height: 24px;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}
.topbar .icono-sitio {
    width: 22px;
    height: 22px;
}
.footer-social .icono-sitio {
    width: 36px;
    height: 36px;
}
a .icono-sitio {
    transition: transform 200ms ease;
}
a:hover .icono-sitio,
a:focus-visible .icono-sitio {
    transform: scale(1.12);
}

/* Mayor presencia de la insignia y las redes sociales. */
.site-navbar .brand-logo > img {
    width: 64px;
    height: 76px;
}
.offcanvas-title > img {
    width: 48px;
    height: 56px;
}
.site-footer a[href="index.php"] > img {
    width: 80px;
    height: 94px;
}
.topbar a[aria-label="Facebook"] .icono-sitio,
.topbar a[aria-label="Instagram"] .icono-sitio,
.topbar a[aria-label="YouTube"] .icono-sitio {
    width: 32px;
    height: 32px;
}
.footer-social .icono-sitio {
    width: 36px;
    height: 36px;
}
.footer-social a {
    width: 48px;
    height: 48px;
}
@media (max-width: 575.98px) {
    .site-navbar .brand-logo > img {
        width: 52px;
        height: 62px;
    }
}

/* Banners interiores: imagen visible y contraste concentrado en el texto. */
.page-hero .page-hero-bg {
    opacity: 1;
}
.page-hero::before {
    background: linear-gradient(
        90deg,
        rgb(18 33 65 / 88%) 0%,
        rgb(18 33 65 / 78%) 42%,
        rgb(18 33 65 / 50%) 65%,
        rgb(18 33 65 / 12%) 100%
    );
}
.page-hero h1,
.page-hero p.lead,
.page-hero .breadcrumb {
    text-shadow: 0 2px 5px rgb(0 0 0 / 35%);
}
.page-hero p.lead,
.page-hero .breadcrumb a {
    color: #fff;
}
@media (max-width: 767.98px) {
    .page-hero::before {
        background: linear-gradient(
            180deg,
            rgb(18 33 65 / 80%) 0%,
            rgb(18 33 65 / 72%) 65%,
            rgb(18 33 65 / 30%) 100%
        );
    }
}

/* Banner sin título ni subtítulo. */
page-hero > .banner-solo-imagen {
    display: block;
    width: 100%;
    height: clamp(180px, 25vw, 420px);
    object-fit: fill;
}

.banner-academico,
.banner-academico > img {
    display: block;
    width: 100%;
    height: auto;
}

/* Elemento seleccionado dentro de los menús desplegables. */
@media (min-width: 1200px) {
    #menu-administracion {
        max-height: var(--alto-menu-admin, 65vh);
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
}

.site-navbar .menu-item.active {
    background: rgba(var(--brand-primary-rgb), 0.1);
    color: var(--brand-primary);
    box-shadow: inset 3px 0 0 currentColor;
}

/* Imágenes de los submenús: tamaño uniforme y sin deformación. */
.site-navbar .menu-icon .icono-submenu {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Iconos informativos de Nosotros: proporción original, sin zoom. */
.icono-nosotros {
    display: block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

/* Iconos del inicio: ilustraciones informativas y accesos con enlace. */
.icono-inicio {
    display: inline-block;
    width: 40px;
    height: 40px;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}
.icono-inicio-pequeno {
    width: 28px;
    height: 28px;
}
a .icono-inicio {
    transition: transform 200ms ease;
}
a:hover .icono-inicio,
a:focus-visible .icono-inicio {
    transform: scale(1.12);
}

/* Imágenes de iconos en las vistas públicas y componentes dinámicos. */
.icono-publico {
    display: inline-block;
    width: 24px;
    height: 24px;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
    flex-shrink: 0;
}
.icon-box > .icono-publico,
.file-icon > .icono-publico {
    width: 40px;
    height: 40px;
}
.btn .icono-publico,
.event-info .icono-publico,
.nav-link .icono-publico {
    width: 20px;
    height: 20px;
}
a .icono-publico,
button .icono-publico {
    transition: transform 200ms ease;
}
a:hover .icono-publico,
a:focus-visible .icono-publico,
button:hover .icono-publico,
button:focus-visible .icono-publico {
    transform: scale(1.12);
}

/* Iconos de los controles flotantes y de navegación. */
.whatsapp-fab,
.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
    background: transparent;
    border: 0;
    box-shadow: none;
    animation: none;
    transform: none;
}
.whatsapp-fab {
    width: 64px;
    height: 64px;
}
.whatsapp-fab .icono-publico {
    width: 64px;
    height: 64px;
}
.back-to-top .icono-publico,
.lightbox-nav .icono-publico {
    width: 28px;
    height: 28px;
}

/* Historia e información institucional del colegio. */
.nosotros-seccion {
    scroll-margin-top: 110px;
}
.nosotros-texto p {
    line-height: 1.85;
}
.nosotros-figura {
    margin-bottom: 1.5rem;
}
.nosotros-figura img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: contain;
    border-radius: 16px;
}
.nosotros-figura figcaption {
    margin-top: 0.75rem;
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
    line-height: 1.5;
}
.nosotros-organigrama {
    max-width: 1100px;
    margin-inline: auto;
}
.nosotros-organigrama img {
    max-height: none;
}

/* Álbumes con texto, títulos y video. */
.galeria-campo .form-label {
    display: block;
    width: 100%;
}
.galeria-medio {
    min-width: 0;
}
.galeria-medio iframe {
    border: 0;
    border-radius: 12px;
}
.galeria-medio figcaption {
    overflow-wrap: anywhere;
    font-weight: 600;
}
.galeria-texto {
    overflow-wrap: anywhere;
}
.galeria-texto img {
    max-width: 100%;
    height: auto;
}


/* Pantalla de carga compartida por las vistas del colegio. */
#carga-sitio:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: radial-gradient(ellipse at center, var(--brand-primary, #1f3a93), #121f46 85%);
    transition: opacity 220ms ease-out;
}
#carga-sitio.carga-lista {
    opacity: 0;
}
.carga-emblema {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 48px rgb(255 255 255 / 18%);
}
.carga-emblema img {
    object-fit: contain;
}
.carga-emblema::before {
    content: "";
    position: absolute;
    inset: -12px;
    border: 2px solid rgb(255 255 255 / 18%);
    border-top-color: #f6b21b;
    border-radius: 50%;
    animation: orbita-colegio 1.2s linear infinite;
}
@keyframes orbita-colegio {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    /* Un solo giro suave durante la carga, incluso con movimiento reducido. */
    .carga-emblema::before {
        animation-duration: 2.6s !important;
        animation-iteration-count: 1 !important;
    }
}

/* Espacio para el indicador del selector de año del Cuadro de Honor. */
#honor-anio {
    min-width: 7rem;
    padding-inline-end: 2.5rem;
}


.level-card .level-body .icono-publico {
    position: static;
    z-index: auto;
    width: 1em;
    height: 1em;
    object-fit: contain;
    vertical-align: -0.125em;
}


/* Gestos del visor: ampliar con dos dedos y desplazar sin cambiar de imagen. */
.lightbox-modal .lightbox-stage {
    touch-action: none;
    overflow: hidden;
}
.lightbox-modal [data-lb-image] {
    user-select: none;
    -webkit-user-drag: none;
    animation: none;
    transition: none;
    transform-origin: center;
}
.lightbox-modal .lightbox-nav {
    z-index: 2;
}

/* Crédito de desarrollo en la barra inferior. */
.footer-desarrollo {
    align-self: center;
    text-align: center;
}
.footer-betel-digital {
    display: inline-block;
    color: inherit;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
    transition: color 180ms ease, transform 180ms ease, text-decoration-color 180ms ease;
}
.footer-betel-digital:hover,
.footer-betel-digital:focus-visible {
    color: #e7bc3c;
    text-decoration-color: currentColor;
    transform: translateY(-2px);
}
.footer-betel-digital:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 3px;
}