/*
  ESTILOS PARA LOGIN Y REGISTRO
  Diseño: Panel Dividido
  Paleta: Morado oscuro (gradiente), Verde Agua (#38b2ac), Amarillo (##d4af37)
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

:root {
    --color-fondo-oscuro-1: #1a1a2e;
    --color-fondo-oscuro-2: #2a1b3d;
    --color-tarjeta-glass: rgba(26, 26, 46, 0.92);
    --color-tarjeta-borde: rgba(255, 255, 255, 0.1);
    --color-verde-agua: #38b2ac;
    --color-verde-agua-hover: #319795;
    --color-amarillo: ##d4af37;
    --color-amarillo-hover: #e0a800;
    --color-texto-blanco: #f0f0f0;
    --color-texto-gris: #a0a0a0;
}

/* FONDO GENERAL DE LA PÁGINA */
.login-background {
    background: radial-gradient(circle at top left, var(--color-fondo-oscuro-2) 0%, var(--color-fondo-oscuro-1) 70%);
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* TARJETA PRINCIPAL */
.login-content-wrapper {
    width: 100%;
    max-width: 900px;
    min-height: 600px;
    display: flex;
    background-color: var(--color-tarjeta-glass);
    border: 1px solid var(--color-tarjeta-borde);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.login-art-panel {
    width: 85%;
    /*background-image: linear-gradient(160deg, rgba(42, 27, 61, 0.8) 0%, rgba(56, 178, 172, 0.7) 100%), url('../images/login-art.png');*/
    background-image: linear-gradient(135deg, #fffcfc73, rgb(219 211 230 / 0%)), url(../images/login-art.png);
/*    background-image: url(../images/login-art.png);*/
    background-size: cover;
    background-position: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--color-texto-blanco);
}

.logo-text {
    font-weight: 700;
    opacity: 0.8;
}

.art-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.art-subtitle {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* PANEL DERECHO (Formulario) */
.login-form-panel {
    width: 55%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    color: var(--color-texto-blanco);
}

.form-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--color-texto-blanco);
}

/* Estilo de los campos de formulario (Inputs) */
.form-control {
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
}

    .form-control::placeholder {
        color: var(--color-texto-gris);
    }

    .form-control:focus {
        background-color: rgba(0, 0, 0, 0.3);
        border-color: var(--color-verde-agua);
        box-shadow: 0 0 0 0.25rem rgba(56, 178, 172, 0.25);
    }

/* BOTÓN PRINCIPAL (VERDE AGUA) */
.btn-custom-primary {
    background-color: var(--color-verde-agua);
    border: none;
    border-radius: 8px;
    font-weight: bold;
    color: #ffffff;
    padding: 0.65rem 1.5rem;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

    .btn-custom-primary:hover {
        background-color: var(--color-verde-agua-hover);
        box-shadow: 0 0 20px rgba(56, 178, 172, 0.6);
        transform: translateY(-2px);
        color: #ffffff;
    }

/* ENLACES (GRIS Y AMARILLO) */
.text-muted-custom {
    color: var(--color-texto-gris) !important;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

    .text-muted-custom:hover {
        color: #fff !important;
    }

/* Enlace principal para "Regístrate" - AMARILLO */
.link-custom-primary {
    color: var(--color-amarillo) !important;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s;
}

    .link-custom-primary:hover {
        color: var(--color-amarillo-hover) !important;
        text-decoration: underline;
    }

/* Separador */
hr {
    border-color: var(--color-tarjeta-borde) !important;
}

/* Footer */
.login-footer {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: var(--color-texto-gris);
    font-size: 0.85rem;
}