/* ==========================================================================
   Login con la marca SAC (interface/login/login_frame.php), para todos los clientes.
   Filtro de las fotos del slideshow: degradado con colores del Manual de marca
   (los mismos de --sac-* en library/css/migration.css, que el login no carga):
   azul oscuro #212B59 = 33,43,89 / petróleo #006184 = 0,97,132 / cian #00A3E5 = 0,163,229.
   Oscuro a la izquierda para que el texto blanco se lea y casi transparente a la
   derecha para que la foto se vea nítida. Aplica con .login-marca-sac, que va fija
   en la sección de fotos de login_frame.php (todos los clientes).
   ========================================================================== */
.slider3.login-marca-sac:before {
    background: linear-gradient(100deg,
        rgba(33, 43, 89, 0.82) 0%,
        rgba(33, 43, 89, 0.55) 40%,
        rgba(0, 97, 132, 0.25) 72%,
        rgba(0, 163, 229, 0.12) 100%);
    opacity: 1;
}

.slider3.login-marca-sac .slider-text {
    text-shadow: 0 1px 8px rgba(33, 43, 89, 0.45);
}

/* ==========================================================================
   Responsive del login (tablet, celular y pantallas bajas).
   - style.css fija .slide-banner en height:100vh: cuando el contenido no cabe
     (celular, tablet vertical, laptop baja) el formulario quedaba debajo del
     fondo de fotos, sobre un gris. Ahora la sección crece con el contenido.
   - Por debajo de 992px el grid col-sm-8/col-sm-4 dejaba la tarjeta de acceso
     en ~215px de ancho: se apila (texto arriba, tarjeta centrada debajo).
   - El BS3 del login colapsa la barra por debajo de 992px y no hay botón para
     abrirla: "Centro de soporte" desaparecía. Se muestra siempre, más pequeño.
   Los !important de tamaño de letra pisan los style="" de algunos clientes.
   ========================================================================== */
/* El body de Metronic es flex en columna con alto fijo: sin flex-shrink:0 la
   sección se encogía al alto de la pantalla y el contenido se salía igual. */
.slide-banner.slider3 {
    height: auto;
    min-height: 100vh;
    flex-shrink: 0;
}

@supports (min-height: 100dvh) {
    .slide-banner.slider3 {
        min-height: 100dvh;
    }
}

/* Escritorio: el relleno inferior de style.css (112px + 70px) no se veía, pero
   ahora que la sección crece con el contenido metería desplazamiento de más. */
@media (min-width: 992px) {
    .slider-app.slider3 {
        padding-bottom: 32px;
    }

    .slider3 .appslider .slide3-text {
        padding-bottom: 0;
    }
}

/* Laptops con poca altura: menos aire arriba para que la tarjeta quepa */
@media (min-width: 992px) and (max-height: 720px) {
    .slider-app.slider3 {
        padding-top: 70px;
        padding-bottom: 16px;
    }

    .slider3 .slider3-content.appslider {
        margin-top: 30px;
    }

    .slider3 .appslider .slide3-text {
        padding-top: 30px;
    }

    #kt_login .login-aside.p-lg-10 {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    #kt_login .text-center.mb-lg-20 {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 991px) {
    .header2 .navbar.navbar-default {
        padding: 12px 0;
    }

    .header2 .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible !important;
    }

    .header2 .container > .navbar-collapse {
        margin: 0;
    }

    .header2 .navbar-nav {
        float: right;
        margin: 0;
    }

    .header2 .navbar-nav > li {
        float: left;
        margin-right: 0;
    }

    .header2 .navbar.navbar-default .navbar-collapse .menu li a {
        font-size: 12px;
        line-height: 32px;
    }

    .slider-app.slider3 {
        padding: 80px 0 40px;
    }

    .slider3 .slider3-content.appslider {
        margin-top: 0;
    }

    /* max-width/flex: el CSS de Metronic (BS4) también define .col-sm-* */
    .slider3 .slider3-content > [class*="col-sm-"] {
        float: none;
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .slider3 .appslider .slide3-text {
        padding-top: 16px;
        padding-bottom: 28px;
        text-align: center;
    }

    .slider3 .slide3-text .slider-text {
        max-width: 560px !important;
        margin: 0 auto;
    }

    .slider3 .slide3-text .slider-text h2 {
        font-size: 40px !important;
        line-height: 1.2 !important;
        margin: 0;
    }

    .slider3 .slide3-text .slider-text p {
        font-size: 17px !important;
        line-height: 1.6 !important;
        padding: 14px 0 0;
        margin: 0;
    }

    .slider3 .slide3-text .slider-text .btn {
        margin-top: 16px !important;
    }

    .slider3 .slider3-content > .col-sm-4 {
        max-width: 440px;
        margin: 0 auto;
    }

    /* Texto centrado sobre la foto: el degradado pasa a vertical para que se lea
       en todo el ancho (el horizontal deja clara la mitad derecha). */
    .slider3.login-marca-sac:before {
        background: linear-gradient(180deg,
            rgba(33, 43, 89, 0.85) 0%,
            rgba(33, 43, 89, 0.70) 45%,
            rgba(0, 97, 132, 0.45) 100%);
    }
}

/* Celular (vertical o acostado): textos y tarjeta compactos */
@media (max-width: 767px),
       (max-width: 991px) and (max-height: 500px) {
    .slider-app.slider3 {
        padding: 64px 0 24px;
    }

    .slider3 .appslider .slide3-text {
        padding-top: 8px;
        padding-bottom: 20px;
    }

    .slider3 .slide3-text .slider-text h2 {
        font-size: 28px !important;
    }

    .slider3 .slide3-text .slider-text p {
        font-size: 15px !important;
        padding-top: 10px;
    }

    #kt_login .login-aside {
        padding: 22px 20px !important;
    }

    #kt_login .login-aside .flex-center {
        margin-top: 0 !important;
    }

    #kt_login .login-signin .text-center.mb-10,
    #kt_login .login-forgot .text-center.mb-10 {
        margin-bottom: 16px !important;
    }

    #kt_login .login-signin h2,
    #kt_login .login-forgot h3 {
        font-size: 22px;
    }

    /* 16px evita que iOS haga zoom al tocar el campo */
    #kt_login .form-control {
        font-size: 16px;
    }

    /* Botón a todo el ancho; el div vacío que lo acompaña solo agregaba alto */
    #kt_login_signin_submit {
        width: 100%;
    }

    #kt_login .login-signin .form-group > div:empty {
        display: none;
    }
}

/* Celulares bajos y celulares acostados: el párrafo se oculta para que el
   formulario quede a la vista sin tanto desplazamiento. */
@media (max-width: 767px) and (max-height: 700px),
       (max-width: 991px) and (max-height: 500px) {
    .slider3 .slide3-text .slider-text p {
        display: none;
    }
}

/* Celular acostado: título a la izquierda y tarjeta a la derecha, para que el
   formulario empiece arriba en vez de quedar debajo del título. */
@media (min-width: 576px) and (max-width: 991px) and (max-height: 500px) {
    .slider-app.slider3 {
        padding-top: 60px;
    }

    .slider3 .slider3-content.appslider {
        display: flex;
        align-items: flex-start;
    }

    .slider3 .slider3-content > .slide3-text {
        flex: 1 1 auto;
        width: auto;
        padding: 40px 24px 0 12px;
        text-align: left;
    }

    .slider3 .slider3-content > .col-sm-4 {
        flex: 0 0 380px;
        width: 380px;
        max-width: 55%;
        margin: 0;
    }
}