html,
    body {
        height: 100%;
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
        overflow-x: hidden;
    }

    .hero-bg {
        position: relative;
        min-height: 100vh;
        overflow: hidden;
        background: #000000;
    }

    .hero-video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
    }

    .hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            rgba(10, 20, 25, .72) 0%,
            rgba(10, 20, 25, .48) 40%,
            rgba(10, 20, 25, .55) 100%
        );
        z-index: 1;
    }

    .hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: 2;
    }

    .hero-content {
        position: relative;
        z-index: 3;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 20px;
    }

    .shell {
        width: min(1180px, 100%);
        display: grid;
        grid-template-columns: 1.08fr .92fr;
        gap: 42px;
        align-items: center;
    }

    /* ==========================================
       PANEL INSTITUCIONAL
       ========================================== */

    .brand-panel {
        color: #ffffff;
        padding: 20px 10px;
    }

    .brand-escudos {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 24px;
    }

    .brand-escudos a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .brand-escudos img {
        width: 165px;
        height: auto;
        max-width: 100%;
        object-fit: contain;
        filter: drop-shadow(0 14px 28px rgba(0, 0, 0, .45));
        transition: transform .25s ease;
    }

    .brand-escudos img:hover {
        transform: scale(1.04);
    }

    .brand-title {
        margin: 18px 0 12px 0;
        font-weight: 900;
        line-height: 1.08;
        font-size: clamp(36px, 4vw, 56px);
        text-align: center;
        text-shadow: 0 14px 38px rgba(0, 0, 0, .55);
    }

    .brand-sub {
        margin: 0 auto;
        max-width: 58ch;
        opacity: .95;
        line-height: 1.7;
        font-size: 16px;
        color: rgba(255, 255, 255, .92);
        text-shadow: 0 8px 24px rgba(0, 0, 0, .35);
        text-align: center;
    }

    .brand-actions {
        margin-top: 24px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pill {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        padding: .72rem 1rem;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .08);
        color: #ffffff;
        text-decoration: none;
        font-weight: 700;
        transition: all .2s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
        cursor: pointer;
    }

    .pill:hover {
        background: rgba(255, 255, 255, .16);
        transform: translateY(-1px);
        color: #ffffff;
        text-decoration: none;
    }

    .brand-links-inst {
        margin-top: 26px;
        text-align: center;
    }

    .inst-title {
        display: inline-block;
        margin-bottom: 10px;
        padding: 5px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, .18);
        background: rgba(255, 255, 255, .08);
        color: #f8fafc;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .6px;
        text-transform: uppercase;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
    }

    .inst-links {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .inst-links a,
    .inst-links span {
        color: rgba(255, 255, 255, .92);
        text-decoration: none;
        font-size: 14px;
        font-weight: 700;
        transition: all .18s ease;
    }

    .inst-links a:hover {
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .inst-links i {
        margin-right: 5px;
        font-size: 14px;
    }

    .sep {
        color: rgba(255, 255, 255, .50);
        font-weight: 700;
    }

    /* ==========================================
       FOOTER INFORMATIVO
       ========================================== */

    .brand-footer-wrap {
        margin-top: 70px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .brand-footer-info,
    .brand-footer-extra {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        color: rgba(255, 255, 255, .94);
        font-size: 14px;
        font-weight: 800;
        text-align: center;
        text-shadow: 0 8px 22px rgba(0, 0, 0, .65);
    }

    .brand-footer-extra {
        margin-top: 12px;
    }

    .brand-footer-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, .94);
        text-decoration: none;
        line-height: 1.3;
    }

    .brand-footer-item i {
        font-size: 16px;
    }

    .brand-footer-sep {
        color: rgba(255, 255, 255, .60);
        font-weight: 900;
    }

    .icon-whatsapp {
        color: #25d366;
    }

    .brand-footer-link,
    .brand-footer-link:visited {
        color: inherit;
        text-decoration: none;
    }

    .brand-footer-link:hover,
    .brand-footer-link:focus {
        text-decoration: underline;
    }

    .icon-guardia,
    .icon-direccion,
    .icon-horario {
        color: #ffffff;
    }

    /* ==========================================
       LOGIN
       ========================================== */

    .login-side {
        max-width: 460px;
        width: 100%;
        margin-left: auto;
    }

    .login-card {
        max-width: 460px;
        width: 100%;
        margin-left: auto;
        overflow: hidden;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(255, 255, 255, .40);
        border-radius: 22px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .login-side .login-card {
        max-width: 100%;
        margin-left: 0;
    }

    .login-head {
        padding: 22px 22px 16px 22px;
        border-bottom: 1px solid rgba(15, 23, 42, .08);
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .95) 0%,
            rgba(247, 250, 252, .92) 100%
        );
    }

    .login-head h3 {
        margin: 0;
        font-size: 24px;
        font-weight: 900;
        color: #0f172a;
    }

    .login-head p {
        margin: 6px 0 0 0;
        font-size: 13px;
        color: #475569;
    }

    .login-body {
        padding: 22px;
    }

    .form-label {
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 800;
        color: #0f172a;
    }

    .input-icon-wrap {
        position: relative;
    }

    .input-icon-wrap i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #c89b1d;
        font-size: 16px;
        pointer-events: none;
    }

    .input-icon-wrap .form-control {
        padding-left: 40px;
    }

    .form-control-success {
        border: 2px solid #d4a017 !important;
        box-shadow: none !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, .96);
    }

    .form-control-success:focus {
        border-color: #f0b90b !important;
        box-shadow: 0 0 0 .2rem rgba(240, 185, 11, .18) !important;
    }

    .help-line {
        font-size: 12px;
        color: #6b7280;
        line-height: 1.5;
    }

    .msg {
        margin-top: 10px;
        font-size: 13px;
        font-weight: 700;
        color: #b91c1c;
    }

    .login-foot {
        padding: 14px 22px;
        border-top: 1px solid rgba(15, 23, 42, .08);
        font-size: 12px;
        color: #64748b;
        background: rgba(248, 250, 252, .92);
    }

    .btn-ingresar {
        background: linear-gradient(
            180deg,
            #e0b100 0%,
            #c99700 100%
        ) !important;
        border: 1px solid #c99700 !important;
        color: #ffffff !important;
        font-weight: 700;
        border-radius: 12px;
        transition: all .2s ease;
    }

    .btn-ingresar:hover {
        background: linear-gradient(
            180deg,
            #f0c419 0%,
            #d4a017 100%
        ) !important;
        transform: translateY(-1px);
    }

    .btn-ingresar:focus {
        box-shadow: 0 0 0 .2rem rgba(240, 185, 11, .25) !important;
    }

    /* ==========================================
       MODALES GENERALES
       ========================================== */

    .modal-ame .modal-content {
        border: 0;
        border-radius: 22px;
        overflow: hidden;
        box-shadow: 0 24px 60px rgba(0, 0, 0, .30);
    }

    .modal-ame .modal-header {
        padding: 18px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        background: linear-gradient(
            135deg,
            #152532 0%,
            #1f3a4a 45%,
            #198754 100%
        );
        color: #ffffff;
    }

    .modal-ame .modal-title {
        margin: 0;
        font-weight: 900;
        font-size: 22px;
    }

    .modal-ame .modal-subtitle {
        margin: 4px 0 0 0;
        font-size: 13px;
        opacity: .92;
    }

    .modal-ame .modal-body {
        padding: 22px;
        background: #f8fafc;
    }

    .modal-ame .modal-footer {
        padding: 14px 22px;
        border-top: 1px solid rgba(15, 23, 42, .08);
        background: #ffffff;
    }

    .btn-open-page {
        border-radius: 12px;
        font-weight: 800;
    }

    /* ==========================================
       MULTIMEDIA
       ========================================== */

    .media-play-tile {
        width: 82px;
        height: 54px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(
            135deg,
            #152532 0%,
            #198754 100%
        );
        color: #ffffff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 22px rgba(25, 135, 84, .24);
        transition: all .18s ease;
    }

    .media-play-tile i {
        font-size: 30px;
    }

    .media-play-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px rgba(25, 135, 84, .32);
    }

    /* ==========================================
       POP UP DE AVISO
       ========================================== */

    .popup-aviso-overlay {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-sizing: border-box;
        background: rgba(15, 23, 42, .78);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 999999;
    }

    .popup-aviso-contenedor {
        position: relative;
        display: flex;
        flex-direction: column;

        /*
         * POPUP MÁS VERTICAL:
         * se reduce el ancho respecto de los 720px anteriores.
         */
        width: min(560px, calc(100vw - 40px));
        max-width: 560px;
        max-height: calc(100vh - 40px);

        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, .40);
        border-radius: 22px;
        box-shadow: 0 25px 70px rgba(0, 0, 0, .38);
        animation: popupEntrada .30s ease-out;
    }

    .popup-aviso-header {
        position: relative;
        flex-shrink: 0;
        min-height: 178px;

        display: flex;
        flex-direction: column;
        justify-content: flex-end;

        padding: 20px 62px 18px 26px;
        box-sizing: border-box;

        overflow: hidden;
        color: #ffffff;
        border-radius: 22px 22px 0 0;

        /*
         * Esta imagen es decorativa de cabecera.
         * Aquí sí usamos cover porque debe llenar todo el encabezado.
         */
        background-image: url('../img/header_popup.png');
        background-size: cover;
        background-position: center 57%;
        background-repeat: no-repeat;
    }

    .popup-aviso-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(
            90deg,
            rgba(8, 18, 28, .90) 0%,
            rgba(8, 18, 28, .65) 48%,
            rgba(8, 18, 28, .20) 100%
        );
    }

    .popup-aviso-icono,
    .popup-aviso-titulo,
    .popup-aviso-subtitulo {
        position: relative;
        z-index: 1;
    }

    /* ==========================================
       ESCUDO PEQUEÑO DEL POP UP
       ========================================== */

    .popup-aviso-icono {
        flex: 0 0 66px;
        width: 66px;
        min-width: 66px;
        max-width: 66px;

        height: 66px;
        min-height: 66px;
        max-height: 66px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0 0 12px 0;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;

        border: 1px solid rgba(255, 255, 255, .30);
        border-radius: 50%;
        background: rgba(8, 18, 28, .62);

        box-shadow:
            0 7px 18px rgba(0, 0, 0, .32),
            inset 0 0 0 1px rgba(255, 255, 255, .06);
    }

    .popup-aviso-header .popup-aviso-icono img {
        display: block;

        width: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;

        height: 57px !important;
        min-height: 57px !important;
        max-height: 57px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain;
        object-position: center;

        border: 0;
        border-radius: 0;
        background: transparent;

        filter: drop-shadow(
            0 2px 4px rgba(0, 0, 0, .45)
        );
    }

    .popup-aviso-titulo {
        margin: 0;
        color: #ffffff;
        font-size: 24px;
        line-height: 1.25;
        font-weight: 900;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
    }

    .popup-aviso-subtitulo {
        margin-top: 6px;
        color: rgba(255, 255, 255, .94);
        font-size: 13px;
        font-weight: 600;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .75);
    }

    .popup-aviso-cerrar {
        position: absolute;
        z-index: 2;
        top: 18px;
        right: 18px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .22);
        border-radius: 50%;
        background: rgba(15, 23, 42, .45);
        color: #ffffff;
        font-size: 26px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        transition:
            background .2s ease,
            transform .2s ease;
    }

    .popup-aviso-cerrar:hover {
        background: rgba(255, 255, 255, .25);
        transform: rotate(5deg);
    }

    .popup-aviso-cerrar:focus {
        outline: 2px solid rgba(255, 255, 255, .65);
        outline-offset: 2px;
    }

    .popup-aviso-body {
        min-height: 0;

        /*
         * El cuerpo puede crecer verticalmente.
         * Si el contenido supera la pantalla, sólo este sector hace scroll.
         */
        padding: 22px 24px 18px 24px;
        overflow-y: auto;
        overflow-x: hidden;

        background: #ffffff;

        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .popup-aviso-body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .popup-aviso-mensaje {
        color: #334155;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;
        overflow-wrap: break-word;
    }

    /* ==========================================
       IMAGEN DEL POP UP
       Se adapta al ancho disponible sin recortarse
       y conserva su proporción original.
       ========================================== */

    .popup-aviso-imagen {
        /*
         * IMAGEN INFORMATIVA:
         *
         * - Horizontal: se reduce hasta entrar completa.
         * - Vertical: se reduce hasta entrar completa.
         * - Cuadrada: se centra y conserva proporción.
         * - Nunca se recorta.
         * - Nunca se estira.
         */
        display: block !important;

        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: min(46vh, 430px) !important;

        margin: 18px auto 0 auto !important;

        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #ffffff;

        object-fit: contain !important;
        object-position: center center !important;
    }

    /* El video mantiene una altura controlada */
    .popup-aviso-video {
        display: block;

        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;

        max-height: 360px;

        margin-top: 18px;

        border: 0;
        border-radius: 14px;
        background: #000000;

        /*
         * Evita que un video sea recortado.
         */
        object-fit: contain;
        object-position: center;
    }

    .popup-aviso-footer {
        flex-shrink: 0;

        display: flex;
        justify-content: flex-end;

        padding: 0 24px 22px 24px;

        background: #ffffff;
        border-radius: 0 0 22px 22px;
    }

    .popup-aviso-boton {
        min-width: 135px;
        padding: 12px 22px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(
            180deg,
            #198754 0%,
            #157347 100%
        );
        color: #ffffff;
        font-size: 14px;
        font-weight: 900;
        cursor: pointer;
        box-shadow: 0 8px 18px rgba(25, 135, 84, .24);
        transition:
            transform .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }

    .popup-aviso-boton:hover {
        background: linear-gradient(
            180deg,
            #157347 0%,
            #146c43 100%
        );
        transform: translateY(-1px);
        box-shadow: 0 12px 22px rgba(25, 135, 84, .30);
    }

    .popup-aviso-boton:focus {
        outline: none;
        box-shadow: 0 0 0 .25rem rgba(25, 135, 84, .22);
    }

    body.popup-abierto {
        overflow: hidden;
    }

    @keyframes popupEntrada {

        from {
            opacity: 0;
            transform: translateY(22px) scale(.97);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ==========================================
       RESPONSIVE TABLET
       ========================================== */

    @media (max-width: 992px) {

        .shell {
            grid-template-columns: 1fr;
            gap: 28px;
        }

        .brand-panel {
            text-align: center;
            padding-bottom: 0;
        }

        .brand-actions {
            justify-content: center;
        }

        .login-side {
            margin: 0 auto;
        }

        .login-card {
            margin: 0 auto;
        }

        .brand-footer-wrap {
            margin-top: 42px;
        }
    }

    /* ==========================================
       RESPONSIVE TELÉFONO
       ========================================== */

    @media (max-width: 576px) {

        .hero-content {
            padding: 22px 14px;
        }

        .brand-escudos img {
            width: 130px;
        }

        .brand-title {
            font-size: clamp(28px, 7vw, 38px);
        }

        .brand-sub {
            font-size: 14px;
            line-height: 1.6;
        }

        .pill {
            width: 100%;
            justify-content: center;
        }

        .brand-actions {
            flex-direction: column;
        }

        .inst-links {
            flex-direction: column;
            gap: 6px;
        }

        .sep {
            display: none;
        }

        .modal-ame .modal-title {
            font-size: 18px;
        }

        .brand-footer-wrap {
            margin-top: 34px;
        }

        .brand-footer-info,
        .brand-footer-extra {
            flex-direction: column;
            gap: 7px;
            font-size: 13px;
        }

        .brand-footer-extra {
            margin-top: 12px;
        }

        .brand-footer-sep {
            display: none;
        }

        .popup-aviso-overlay {
            padding: 12px;
        }

        .popup-aviso-contenedor {
            width: calc(100vw - 24px);
            max-width: 520px;
            max-height: calc(100vh - 24px);

            border-radius: 18px;
        }

        .popup-aviso-header {
            min-height: 165px;
            padding: 18px 55px 17px 22px;
            border-radius: 18px 18px 0 0;
            background-position: 62% center;
        }

        .popup-aviso-icono {
            flex-basis: 58px;

            width: 58px;
            min-width: 58px;
            max-width: 58px;

            height: 58px;
            min-height: 58px;
            max-height: 58px;

            margin-bottom: 10px;
            padding: 4px;
        }

        .popup-aviso-header .popup-aviso-icono img {
            width: 35px !important;
            min-width: 35px !important;
            max-width: 35px !important;

            height: 40px !important;
            min-height: 40px !important;
            max-height: 40px !important;
        }

        .popup-aviso-titulo {
            font-size: 20px;
        }

        .popup-aviso-subtitulo {
            margin-top: 5px;
            font-size: 12px;
        }

        .popup-aviso-cerrar {
            top: 14px;
            right: 14px;
            width: 36px;
            height: 36px;
            font-size: 23px;
            line-height: 32px;
        }

        .popup-aviso-body {
            padding: 20px 22px 16px 22px;
        }

        .popup-aviso-mensaje {
            font-size: 14px;
            line-height: 1.65;
        }

        .popup-aviso-imagen {
            display: block !important;

            width: auto !important;
            height: auto !important;

            max-width: 100% !important;
            max-height: 42vh !important;

            margin: 16px auto 0 auto !important;

            object-fit: contain !important;
            object-position: center center !important;
        }

        .popup-aviso-video {
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;

            max-height: 260px;

            margin-top: 16px;

            object-fit: contain;
            object-position: center;
        }

        .popup-aviso-footer {
            padding: 0 22px 20px 22px;
            border-radius: 0 0 18px 18px;
        }

        .popup-aviso-boton {
            width: 100%;
        }
    }


    /* ==========================================
       RECUPERACIÓN DE CONTRASEÑA
       ========================================== */

    .recovery-security-note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        margin-bottom: 16px;
        border: 1px solid #bfdbfe;
        border-radius: 12px;
        background: #eff6ff;
        color: #1e3a8a;
        font-size: 13px;
        line-height: 1.5;
    }

    .recovery-security-note i {
        margin-top: 1px;
        font-size: 18px;
        flex: 0 0 auto;
    }

    .recovery-help {
        margin-top: 7px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.45;
    }

    .recovery-example {
        font-weight: 800;
        color: #334155;
    }

    .loading-overlay {
        display: none;
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .42);
        z-index: 1000000;
    }

    .loading-card {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 280px;
        max-width: calc(100% - 32px);
        padding: 26px 36px;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
        text-align: center;
    }

    .loading-title {
        margin-top: 15px;
        color: #0f172a;
        font-size: 16px;
        font-weight: 800;
    }

    .loading-subtitle {
        margin-top: 8px;
        color: #64748b;
        font-size: 13px;
    }