/* QUITAR BORDE NATIVO DEL CONTENEDOR DEVEXPRESS */
.sicns-login-input,
.sicns-login-input.dxeTextBoxSys,
.sicns-login-input.dxeTextBox {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.master-top {
    display: none !important;
}

.master-content {
    top: 0 !important;
    height: 100vh !important; /* fallback para navegadores viejos */
    height: 100dvh !important; /* altura dinámica real en mobile */
}

/* ==========================================================
   CONTENEDOR GENERAL — split: login izq, imagen der
   ========================================================== */
.sicns-login {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 400px; /* piso de seguridad para pantallas muy bajas */
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
    box-sizing: border-box;
}

/* ==========================================================
   PANEL LOGIN (IZQUIERDA)
   Los porcentajes usan clamp() para no saltar bruscamente
   entre breakpoints fijos.
   ========================================================== */
.sicns-login-panel {
    flex: 0 0 clamp(35%, 40%, 45%);
    width: clamp(35%, 40%, 45%);
    height: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    padding: clamp(16px, 4vw, 40px);
    overflow-y: auto; /* si el contenido no entra, scrollea en vez de romper */
}

/* ==========================================================
   IMAGEN (DERECHA)
   Backstretch sigue manejando slider1/2/3 sobre este div.
   ========================================================== */
.sicns-login-image {
    flex: 0 0 clamp(55%, 60%, 65%);
    width: clamp(55%, 60%, 65%);
    height: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    background: #1c2b1a;
    z-index: 1;
    box-sizing: border-box;
}

    .sicns-login-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 5;
        pointer-events: none;
    }

/* ==========================================================
   CARD DE LOGIN (contenido dentro del panel izquierdo)
   max-width fluido: nunca menor a 260px, nunca mayor a 380px,
   y en el medio escala con el viewport.
   ========================================================== */
.sicns-login-card {
    width: 100%;
    max-width: clamp(260px, 90vw, 380px);
    box-sizing: border-box;
}

/* ==========================================================
   LOGO
   ========================================================== */
.sicns-login-logo {
    text-align: center;
    margin-bottom: clamp(8px, 2vh, 15px);
}

    .sicns-login-logo img {
        max-width: clamp(90px, 15vw, 150px);
        height: auto;
    }

/* ==========================================================
   TÍTULO
   ========================================================== */
.sicns-login-subtitle {
    color: #3a3a3a !important;
    font-size: clamp(12px, 1.5vw, 14px);
    text-align: center;
    margin-bottom: clamp(10px, 2vh, 20px);
}

/* ==========================================================
   CAMPOS
   ========================================================== */
.sicns-login-field {
    margin-bottom: clamp(10px, 2vh, 18px);
}

.sicns-login-label {
    display: block;
    color: #3a3a3a !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
    margin-left: 10px;
}

/* ==========================================================
   TEXTBOX DEVEXPRESS
   ========================================================== */
.sicns-login-input {
    width: 100%;
}

    .sicns-login-input input {
        width: 100% !important;
        height: clamp(38px, 6vh, 46px) !important;
        box-sizing: border-box !important;
        background: #f7f8f9 !important;
        border: 1.5px solid #e6e7e9 !important;
        border-radius: 10px !important;
        padding-left: 16px !important;
        color: #1a1a1a !important;
        font-size: 14.5px !important;
        outline: none !important;
        transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }

        .sicns-login-input input:hover {
            border-color: #cfd1d4 !important;
        }

        .sicns-login-input input:focus {
            background: #ffffff !important;
            border-color: #72bf44 !important;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.18) !important;
        }

/* ==========================================================
   MENSAJE
   ========================================================== */
.sicns-login-message {
    display: block;
    min-height: 18px;
    margin-top: -6px;
    margin-bottom: 8px;
    font-size: 12px !important;
    color: #e5484d !important;
    text-align: center;
}

/* ==========================================================
   BOTÓN
   ========================================================== */
.sicns-login-button {
    width: 100% !important;
    height: clamp(38px, 6vh, 48px) !important;
    margin-top: 10px;
    border: none !important;
    border-radius: 10px !important;
    background: #72bf44 !important;
    color: #ffffff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}

    .sicns-login-button:hover {
        background: #65ad3c !important;
    }

    .sicns-login-button:active {
        transform: scale(0.99);
    }

/* ==========================================================
   RECUPERAR CONTRASEÑA
   ========================================================== */
.sicns-login-recovery {
    text-align: center;
    margin-top: 10px;
}

    .sicns-login-recovery a,
    .sicns-login-recovery span {
        color: #3a3a3a !important;
        font-size: 12px !important;
    }

        .sicns-login-recovery a:hover {
            color: #72bf44 !important;
        }

/* ==========================================================
   INFORMACIÓN INFERIOR
   ========================================================== */
.sicns-login-version {
    text-align: center;
    margin-top: clamp(6px, 1.5vh, 10px);
    padding-top: clamp(10px, 2vh, 20px);
    border-top: 1px solid #f0f0f0;
}

    .sicns-login-version span {
        color: #3a3a3a !important;
        font-size: 11px !important;
    }

/* ==========================================================
   OCULTAR ELEMENTOS DEL ASPXROUNDPANEL
   ========================================================== */
.sicns-login-card .dxrpControl,
.sicns-login-card .dxrp {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sicns-login-card .dxrpHeader {
    display: none !important;
}

/* ==========================================================
   BACKSTRETCH — SOLO DENTRO DEL PANEL DERECHO
   ========================================================== */
.sicns-login-image {
    position: relative !important;
    height: 100%;
    overflow: hidden !important;
    z-index: 1;
}

    .sicns-login-image .backstretch {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        z-index: 0 !important;
    }

        .sicns-login-image .backstretch img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
        }

.sicns-login-panel {
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================================
   ============================================================
   BREAKPOINTS ESTRUCTURALES
   (acá SÍ cambiamos el layout, no solo tamaños)
   ============================================================
   ============================================================ */

/* Tablets / pantallas medianas en portrait */
@media (max-width: 900px) and (orientation: portrait) {
    .sicns-login-panel {
        flex: 0 0 50%;
        width: 50%;
    }

    .sicns-login-image {
        flex: 1 1 50%;
        width: 50%;
    }
}

/* Celulares en portrait: una sola columna, imagen oculta */
@media (max-width: 700px) and (orientation: portrait) {
    .sicns-login {
        flex-direction: column;
        overflow-y: auto;
    }

    .sicns-login-panel {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 100%;
        padding: clamp(24px, 6vw, 40px) 20px 35px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sicns-login-image {
        display: none;
    }
}

/* ============================================================
   LANDSCAPE MOBILE (pantalla ancha pero baja)
   Cubre celulares acostados y tablets chicas acostadas
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
    .sicns-login {
        flex-direction: row;
        overflow-y: auto;
    }

    .sicns-login-panel {
        flex: 0 0 55%;
        width: 55%;
        min-height: auto;
        height: 100%;
        padding: clamp(10px, 2vh, 20px);
        justify-content: flex-start;
        overflow-y: auto;
    }

    .sicns-login-image {
        flex: 0 0 45%;
        width: 45%;
        display: block;
    }

    .sicns-login-card {
        max-width: 320px;
    }

    .sicns-login-logo {
        margin-bottom: 6px;
    }

        .sicns-login-logo img {
            max-width: 70px;
        }

    .sicns-login-subtitle {
        margin-bottom: 8px;
        font-size: 11px;
    }

    .sicns-login-field {
        margin-bottom: 8px;
    }

    .sicns-login-input input {
        height: 34px !important;
    }

    .sicns-login-button {
        height: 36px !important;
        margin-top: 4px;
    }

    .sicns-login-version {
        margin-top: 4px;
        padding-top: 6px;
    }
}

/* ============================================================
   LANDSCAPE MOBILE EXTREMO (altura muy chica, ej. iPhone SE acostado)
   Se cae a una sola columna con scroll para que nada se corte
   ============================================================ */
@media (orientation: landscape) and (max-height: 340px) {
    .sicns-login {
        flex-direction: column;
    }

    .sicns-login-image {
        display: none;
    }

    .sicns-login-panel {
        width: 100%;
        flex: 1 1 auto;
        padding: 10px 16px;
    }
}

/* ============================================================
   PANTALLAS MUY GRANDES (monitores 4K, TVs)
   Evita que la imagen y el panel se estiren de forma absurda
   ============================================================ */
@media (min-width: 1800px) {
    .sicns-login-card {
        max-width: 420px;
    }
}