@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /***********Rosas**********/
    --Rosa-Claro: #F8C8DC;
    --Rosa-Chicle: #FF69B4;
    --Rosa-Viejo: #C08081;
    --Rosa-Pastel: #FADADD;
    --Rosa-Coral-Suave: #F6A6B2;
    --Rosa-Empolvado: #D291BC;
    --Rosa-Pastel-2: #FFC1CC;
    --Rosa-Chicle-2: #FF8FAB;
    --Rosa-Intenso: #FF5C8A;
    --Rosa-Fucsia: #E75480;
    --Rosa-Orquídea: #C71585;
    --Rosa-Orquídea-Claro: #cc63a6;
    /**************************/

    /*****Morados y Lilas******/
    --Lila-Suave: #CBAACB;
    --Morado-Pastel: #A58EEC;
    --Moradao-Intenso: #6A0DAD;
    --Violeta-Oscuro: #4B0082;
    --Lavanda-Suave: #BFA2DB;
    --Morado-Medio: #9F6BA0;
    --Púrpura-Elegente: #6A4C93;
    --Violeta-Profundo: #3B185F;
    --Lavanda-Suave: #E6E6FA;
    --Lila: #C8A2C8;
    --Púrpura-Medio: #9370DB;
    --Violeta-Intensso: #8A2BE2;
    --Indigo-Profundo: #4B0082;
    /**************************/

    /**********Fondos***********/
    --Fondobody1: #f3e5f3;
    --Fondobody2: #f5e2f5;
    --Fondocard: #fff7f7;
    /**************************/

    /**********Otros***********/
    --Blanco-Nieve: #FFFFFF;
    --Gris-Perla: #F5F5F5;
    --Gris-Claro: #E0E0E0;
    --Beige-Suave: #F8F1EB;
    --Arena-Pálida: #EAD7C2;
    --Dorado-Suave: #FFD580;
    --Amarillo-Pastel: #FFFACD;
    --Durazno-Suave: #FFDA;
    --Coral-Pastel: #FFB6A6;
    --Terracota-Claro: #E6A57E;
    --Verde-Menta: #A8E6CF;
    --Verde-Salvia: #C5E1C5;
    --Verde-Oliva-Claro: #B5C99A;
    --Azul-Pastel: #A7C7E7;
    --Azul-Grisáceo: #7BAFD4;
    /**************************/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    background-size: 15% auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.background-slider {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.background-slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.background-slider .slide.active {
    opacity: 1;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
    background: rgba(0, 0, 0, 0.7);
    z-index: -1;
}

.container {
    width: 100%;
    max-width: 900px;
    background: #fff7f7;
    border-radius: 15px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.login-container {
    display: flex;
    min-height: 500px;
}

.welcome-section {
    flex: 1;
    background-color: #fcb5ca;
    color: black;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.welcome-section h1 {
    font-size: 32px;
    margin-bottom: 15px;
}

.welcome-section p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.switch-btn {
    background-color: #ca5b8f;
    color: black;
    border: none;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s;
}

.switch-btn:hover {
    background: #bb0057;
    color: white;
}

.form-section {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-section h2 {
    font-size: 28px;
    color: #000000;
    margin-bottom: 30px;
    text-align: center;
}

.input-group {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #000000;
}

input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    font-size: 16px;
    transition: border 0.3s;
    background-color: #e4e4e4;
    color: black;
}

input:focus {
    border-color: var(--Rosa-Orquídea);
    outline: none;
    box-shadow: 0 0 0 3px rgba(204, 99, 166, 0.2);
}

.error {
    color: rgb(255, 0, 0);
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.forgot-password {
    text-align: right;
    margin-bottom: 25px;
}

.forgot-password a {
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.forgot-password a:hover {
    text-decoration: underline;
}

.login-btn {
    background: #ca5b8f;
    color: black;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    transition: background 0.3s;
}

.login-btn:hover {
    background: #bb0057;
    color:white;
}

/* --- Ajustes del botón de volver --- */
.back-home {
    margin-top: 20px; /* separación del botón de iniciar sesión */
    text-align: center;
}

.back-home .switch-btn {
    background-color: #d291bc; /* color más suave para diferenciarlo */
    padding: 10px 20px; /* más delgado */
    font-size: 15px;
}

.back-home .switch-btn:hover {
    background-color: #bb0057;
    color: white;
}

@media (max-width: 768px) {
    .login-container {
        flex-direction: column;
    }
    
    .welcome-section, .form-section {
        padding: 30px 20px;
    }
    
    .welcome-section {
        order: 2;
    }
    
    .form-section {
        order: 1;
    }
}