* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI';
    font-size: 25px;
}


.form input {
    min-width: 400px;
    display: block;
    margin: 20px;
    padding: 15px;
    background-color: #ece7e7;
    font-size: 20px;
    border: none;
    outline: none;
    font-size: 22px;
    box-shadow: 15px 15px 25px #a8a8a8;
    transition: box-shadow 0.5s;
}

.form input:focus {
    box-shadow: 5px 5px 15px #a8a8a8;
}

.form .btn {
    display: block;
    margin: auto;
    padding: 10px 35px;
    background-color: #949292;
    color: #fff;
    border: none;
    font-size: 22px;
    border-radius: 10px;
    box-shadow: 15px 15px 25px #a8a8a8;
    transition: box-shadow 0.5s;
    outline: none;
}

.form .btn:hover {
    box-shadow: 5px 5px 15px #aaa;
}

.form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 50vh;
    width: 50vw;
    position: absolute;
    bottom: 0px;
    font-size: 35px;
}

.left-section .form {
    float: left;
    margin: 35vh auto;
}

.right-section .form {
    float: right;
    right: 0;
    margin: 30vh auto;
}

.cover .switch-btn {
    position: absolute;
    bottom: 0;
    font-size: 25px;
    margin: 40vh auto;
    padding: 10px 55px;
    background-color: #1984bc;
    color: #fff;
    border: none;
    border-radius: 10px;
    box-shadow: 15px 15px 25px #a8a8a8;
    transition: box-shadow 0.5s;
    outline: none;
}

.cover .switch-btn:hover {
    box-shadow: 5px 5px 15px #aaa;
}

.left-section .cover {
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.left-section .cover img {
    height: 100vh;
    width: 50vw;
}

.left-section .cover h1 {
    position: absolute;
    bottom: 0px;
    margin: 60vh auto;
    color: #fff;
    font-size: 50px;
}

.left-section .cover h3 {
    position: absolute;
    bottom: 0px;
    margin: 50vh auto;
    color: #fff;
    font-size: 35px;
}

.left-section .cover-hide {
    visibility: hidden;
}

.left-section .form-hide {
    visibility: hidden;
}

.right-section .cover {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: relative;
}

.right-section .cover img {
    height: 100vh;
    width: 50vw;
}

.right-section .cover h1 {
    position: absolute;
    bottom: 0px;
    margin: 60vh auto;
    color: #fff;
    font-size: 50px;
}

.right-section .cover h3 {
    position: absolute;
    bottom: 0px;
    margin: 50vh auto;
    color: #fff;
    font-size: 35px;
}

.right-section .cover-hide {
    visibility: hidden;
}

.right-section .form-hide {
    visibility: hidden;
}

.fade-in-element {
    animation-name: fade-in-element;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.g-recaptcha {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

@keyframes fade-in-element {
    from {
        opacity: 0;
    }
  
    to {
        opacity: 1;
    }
}

.error-msg {
    width: 100%;
    max-width: 400px; 
    margin: 20px auto;
    padding: 15px 20px;
    background: #ffdddd;
    color: #b30000;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    box-shadow: 15px 15px 25px #a8a8a8;
}

.input-group {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    pointer-events: none;
    z-index: 10;
}

.input-group .input {
    padding-left: 55px !important; 
    margin: 0; 
}

.input-password {
    background-image: url('../img/keys.ico');
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 25px 25px;
    padding-left: 55px !important;
}


/* =========================
   VISTA MOBILE
========================= */
@media (max-width: 768px) {

    body {
        font-size: 18px;
        overflow-x: hidden;
    }

    /* Ocultar covers en celular */
    .cover {
        display: none !important;
    }

    /* Secciones ocupan todo el ancho */
    .left-section .form, 
    .right-section .form {
        margin: 0 auto !important; /* Eliminamos el 35vh y 30vh */
        float: none;
    }

    /* 2. Convertimos la sección en un contenedor flexible centrado */
    .left-section {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centrado vertical */
        align-items: center;     /* Centrado horizontal */
        height: 100vh;           /* Ocupa todo el alto de la pantalla */
        width: 100vw;
    }

    /* Formulario centrado */
    .form {
        position: static !important; /* Rompe el "absolute" y "bottom: 0" */
        width: 90%;
        max-width: 450px;
        height: auto;
        padding: 20px;
    }

    /* 4. El captcha a veces empuja el diseño, lo escalamos un poco si es necesario */
    .g-recaptcha {
        transform: scale(0.85);
        transform-origin: center;
        margin: 10px auto;
    }
     /* Inputs adaptables */
     .form input {
         min-width: unset;
         width: 100%;
         max-width: 100%;
         margin: 10px 0;
         font-size: 18px;
     }

     /* Botones táctiles corregidos */
     .form .btn {
         width: 100%;
         max-width: 90%;
         display: block;
         margin: 20px auto;
         font-size: 18px;
         padding: 14px 0; 
         /* FUERZA EL CENTRADO DEL TEXTO */
         text-align: center;
         text-indent: 0; 
         padding-left: 0 !important;
         padding-right: 0 !important;
         box-sizing: border-box;
     }

    /* Ajuste títulos */
    h1 {
        font-size: 24px;
        text-align: center;
    }

    h3 {
        font-size: 16px;
        text-align: center;
    }

    /* Logo */
    .form img {
        max-width: 200px;
        margin-bottom: 20px;
    }

    .input-group {
        width: 100%; 
        max-width: 90%; 
        margin: 10px auto;
    }

    .form input {
        min-width: unset;
        width: 100% !important;
        margin: 0;
        font-size: 18px;
        padding: 12px 12px 12px 50px !important; 
    }

    .input-icon {
        width: 18px; 
        left: 12px; 
    }
}


.image-overlay {
    position: absolute;
    bottom: 40px;
    right: 5%;
    width: 90%;
    /*background: rgba(40, 40, 40, 0.85);*/
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1.4;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

/* MODO OSCURO LOGIN - ALTO CONTRASTE (#1e293b sobre #0b0f19) */
[data-theme="dark"] body {
    background-color: #0b0f19 !important;
    color: #f8fafc !important;
}

[data-theme="dark"] .form {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .form input {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #334155 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] .form input:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 0.2rem rgba(56, 189, 248, 0.3) !important;
}

[data-theme="dark"] .form .btn {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

[data-theme="dark"] .form .btn:hover {
    background-color: #0369a1 !important;
}

[data-theme="dark"] .error-msg {
    background: #450a0a !important;
    color: #fca5a5 !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}