/* ---------------------------------- */
/* ESTILOS DE TLAXCALA (CSS) - FINAL  */
/* ---------------------------------- */

/* Tipografía Sans-serif para uniformidad */
body, * {
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}

/* Corrección para centrar el contenido verticalmente y APLICAR IMAGEN DE FONDO */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    
    /* 1. Establecer la imagen de fondo */
    background-image: url('../img/secretaria.jpg'); 
    
    /* 2. Propiedades para cubrir toda la pantalla */
    background-size: cover; /* Asegura que la imagen cubra todo el viewport */
    background-position: center center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Mantiene la imagen fija si hay desplazamiento (opcional) */

    /* 3. Color de respaldo (si la imagen no carga) - Usamos el color oscuro */
    background-color: #4A356A; 
}

/* Aplicar una capa oscura/semi-transparente sobre el fondo si la imagen es muy clara o tiene mucho detalle. 
   Esto se logra envolviendo el contenido del body en un div si es necesario, pero lo haremos con el .container
   para simplificar, manteniendo el color del fondo de la pagina.
*/
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /* OPCIONAL: Si necesitas oscurecer el fondo, puedes aplicar un color semi-transparente aquí.
       background-color: rgba(0, 0, 0, 0.4); 
    */
}

.form {
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    transition: all 1s ease;
}

.form .form_front {
    /* Fondo del card de login: Morado Primario (#7D68A1) */
    background-color: #7D68A1;
    /* ... (El resto de estilos de form_front se mantiene) ... */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: absolute;
    backface-visibility: hidden;
    padding: 65px 45px;
    border-radius: 15px;
    box-shadow: 
        10px 10px 20px rgba(0, 0, 0, 0.4), 
        -10px -10px 20px rgba(160, 140, 190, 0.6); 
}

/* ... (El resto del código CSS se mantiene igual) ... */

.form .form_back {
    background-color: #7D68A1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(-180deg);
    padding: 65px 45px;
    border-radius: 15px;
    box-shadow: 
        10px 10px 20px rgba(0, 0, 0, 0.4), 
        -10px -10px 20px rgba(160, 140, 190, 0.6);
}

.form_details, .login-subtitle {
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 10px;
    color: #FFFFFF; 
    margin: 0;
}

.input {
    width: 245px;
    min-height: 45px;
    color: #FFFFFF;
    outline: none;
    transition: 0.35s;
    padding: 0px 7px;
    background-color: #8F75B5; 
    border-radius: 6px;
    border: 2px solid #8F75B5;
    box-shadow: 
        inset 5px 5px 10px rgba(0, 0, 0, 0.4), 
        inset -5px -5px 10px rgba(160, 140, 190, 0.6);
}

.input::placeholder {
    color: #e0e0e0;
}

.input:focus.input::placeholder {
    transition: 0.3s;
    opacity: 0;
}

.input:focus {
    transform: scale(1.05);
    box-shadow: 
        5px 5px 10px rgba(0, 0, 0, 0.4),
        -5px -5px 10px rgba(160, 140, 190, 0.6),
        inset 2px 2px 5px rgba(0, 0, 0, 0.4),
        inset -1px -1px 3px rgba(160, 140, 190, 0.6);
}

.btn {
    padding: 10px 35px;
    cursor: pointer;
    background-color: #B18428; 
    border-radius: 6px;
    border: 2px solid #B18428;
    box-shadow: 
        6px 6px 10px rgba(0, 0, 0, 0.4),
        1px 1px 10px rgba(182, 115, 219, 0.6);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    transition: 0.35s;
}

.btn:hover, .btn:focus {
    transform: scale(1.05);
    box-shadow: 
        6px 6px 10px rgba(0, 0, 0, 0.4),
        1px 1px 10px rgba(182, 115, 219, 0.6),
        inset 2px 2px 10px rgba(0, 0, 0, 0.4),
        inset -1px -1px 5px rgba(182, 115, 219, 0.6);
}

.form .switch {
    font-size: 13px;
    color: #FFFFFF;
}

.forgot-btn {
    color: #FFFFFF !important; 
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.3s;
    background: none;
    border: none;
}

.forgot-btn:hover {
    color: #cccccc !important; 
}

.form .switch .signup_tog {
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

.container #signup_toggle {
    display: none;
}

.container #signup_toggle:checked + .form {
    transform: rotateY(-180deg);
}