/* ==========================================================================
   TEMA
   ========================================================================== */

:root{
    --theme-primary:#1c1690;
    --theme-primary-bg:#1c1690e6;
    --theme-light:#1c16901a;
    --text-planilla-color:#1c1690;
}

html,
body{
    height:100%;
}

body{
    margin:0;
    background:#f5f7fb !important;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
}

/* ==========================================================================
   COLORES
   ========================================================================== */

.text-theme{
    color:var(--theme-primary)!important;
}

.bg-theme{
    background:var(--theme-primary)!important;
}

.text-planilla{
    color:var(--text-planilla-color)!important;
}

/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-card-wrapper {
    width: min(1180px, 95vw);
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.04);
    display: flex;
    min-height: 550px;
    margin: auto;
}

/* ==========================================================================
   COLUMNA IZQUIERDA
   ========================================================================== */

/*
 * CS-60: los banners del CRM tienen tamano estandar (escritorio 1000x1600, movil 1000x500).
 * El carrusel toma la proporcion de la imagen para mostrarla completa, sin recortes ni deformaciones.
 */

#id-col-intro {
    position: relative;
    background: #eaf3f5;
    padding: 0;
}

/* Si el formulario es mas alto que el banner, este queda centrado en la columna (d-lg-flex) */
#loginBannerCarousel {
    width: 100%;
    aspect-ratio: 5 / 8;
}

/* Las slides se apilan con opacidad (carousel-fade) en lugar de display:none para que
   las imagenes con loading="lazy" se precarguen y no aparezcan en blanco al rotar. */
.login-banner-carousel .carousel-item {
    display: block;
}

.login-banner-carousel .login-banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Indicadores en forma de punto para cubrir lo minimo del arte */
.login-banner-carousel .carousel-indicators {
    margin-bottom: .6rem;
}

.login-banner-carousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border: 0;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.3);
    transition: width .3s ease, opacity .3s ease;
}

.login-banner-carousel .carousel-indicators .active {
    width: 22px;
    border-radius: 4px;
}

.login-banner-carousel .carousel-control-prev-icon,
.login-banner-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 0 3px rgba(0,0,0,.45));
}

/* ==========================================================================
   COLUMNA DERECHA
   ========================================================================== */

#id-col-main {
    overflow-y: auto;
}

#id-col-main .tab-content {
    width: 100%;
    margin: auto 0;
}

#id-col-main .mx-auto {
    width: 100%;
    max-width: 440px;
}

@media (min-width: 992px) {
    #id-col-main {
        padding: 3.5rem !important;
    }
}

@media (max-width: 991.98px) {
    .login-card-wrapper {
        max-width: 500px;
        min-height: auto;
    }

    #id-col-main {
        padding: 1.5rem !important;
    }
}

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */

.form-label-custom{

    font-size:.90rem;

    font-weight:600;

    color:#374151;

    margin-bottom:.45rem;
}

.form-control-custom{

    width:100%;

    border-radius:10px;

    border:1px solid #d1d5db;

    padding:.70rem 1rem;

    font-size:.95rem;

    box-shadow:none!important;

    transition:.2s;
}

.form-control-custom:focus{

    border-color:var(--theme-primary)!important;

    box-shadow:0 0 0 3px var(--theme-light)!important;
}

.input-password-wrapper{

    position:relative;
}

.toggle-password{

    position:absolute;

    right:15px;

    top:50%;

    transform:translateY(-50%);

    background:none;

    border:none;

    color:#6b7280;

    padding:0;

    cursor:pointer;
}

/* ==========================================================================
   BOTONES
   ========================================================================== */

.btn-outline-login-theme{

    width:100%;

    border-radius:10px;

    border:2px solid var(--theme-light)!important;

    background:var(--theme-light)!important;

    color:var(--theme-primary)!important;

    font-weight:600;

    transition:.25s;
}

.btn-outline-login-theme:hover{

    background:var(--theme-primary)!important;

    color:#fff!important;

    border-color:var(--theme-primary)!important;
}

.btn-outline-theme{

    border-radius:10px;

    border:1px solid var(--theme-primary);

    color:var(--theme-primary);

    background:#fff;

    transition:.25s;
}

.btn-outline-theme:hover{

    background:var(--theme-light);
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */

.marquee-container{

    overflow:hidden;

    white-space:nowrap;

    padding:1rem 0;
}

.marquee-content{

    display:flex;

    width:max-content;

    animation:marquee 35s linear infinite;
}

.marquee-item{

    height:75px;

    margin:0 60px;

    opacity:.5;

    transition:.3s;
}

.marquee-item:hover{

    opacity:1;

    transform:scale(1.05);
}

@keyframes marquee{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

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

@media (max-width:991.98px){

    .login-card-wrapper{

        width:100%;

        max-width:520px;

        min-height:auto;

        max-height:none;

        border-radius:18px;

        margin:16px;
    }

    #id-col-main{

        padding:1.5rem !important;
    }

    #id-col-main .mx-auto{

        max-width:100%;
    }

}

@media (max-width:576px){

    .login-page{

        padding:12px;
    }

    .login-card-wrapper{

        margin:0;

        border-radius:16px;
    }

    #id-col-main{

        padding:1.15rem !important;
    }

    .form-control-custom{

        font-size:16px;
    }

    .row.mx-0>.col-sm-6{

        padding-left:0!important;

        padding-right:0!important;

        margin-bottom:.75rem;
    }

    .btn-outline-theme{

        width:100%;
    }

}

/* Estilo para el cintillo de ambiente */

.env-badge {
    position: fixed;
    top: 25px;
    right: 0;
    background-color: var(--theme-primary);
    color: #ffffff;
    padding: 8px 25px 8px 30px;
    font-weight: 700;
    font-size: 0.90rem;
    letter-spacing: 1px;
    z-index: 9999;
    border-radius: 30px 0 0 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .env-badge {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 0;
        text-align: center;
        padding: 4px 0;
        font-size: 0.75rem;
        box-shadow: none;
    }
    .login-page {
        padding-top: 35px !important;
    }
}

/* ==========================================================================
   CARRUSEL MOVIL (CS-45: el carrusel se muestra en todas las pantallas)
   CS-60: imagen horizontal (url_imagen2) completa, debajo del formulario
   ========================================================================== */

#id-col-intro-mobile {
    background: #eaf3f5;
    border-top: 1px solid #e5e7eb;
}

#loginBannerCarouselMobile {
    width: 100%;
    aspect-ratio: 2 / 1;
}

#loginBannerCarouselMobile .login-banner-fallback {
    height: 100%;
    padding: 1rem !important;
}