/* ============================================================
   ARCHIVO: login-principal.css (VISTA MÁXIMO CRISTAL)
   ============================================================ */

/* 1. RESET Y BASE */
* {
    margin: 0;                /* Elimina el margen externo por defecto del navegador */
    padding: 0;               /* Elimina el relleno interno por defecto del navegador */
    box-sizing: border-box;   /* Asegura que el ancho/alto incluya el padding y el borde */
}

body {
    padding-top: 0 !important;   /* Anula cualquier espacio superior heredado del global */
    background-color: var(--background, #0a0a1a); /* Fondo dinámico controlado por tu JS */
    color: var(--color, #ffffff);                 /* Color de texto principal dinámico */
    font-family: 'Cinzel', serif;                 /* Fuente estilo épico para el sitio */
    min-height: 100vh;           /* Fuerza al cuerpo a ocupar toda la altura visual */
    display: flex;               /* Activa el modo caja flexible para centrar */
    align-items: center;         /* Centra el contenido verticalmente */
    justify-content: center;     /* Centra el contenido horizontalmente */
    overflow: hidden;            /* Evita barras de scroll si algo se sale de la pantalla */
    transition: background-color 0.4s ease; /* Suaviza la transición al cambiar de tema */
}

/* 2. ESTRUCTURA */
.login-container {
    position: relative;          /* Define el punto de referencia para elementos absolute (Lilith/Círculos) */
    width: 25rem;                /* Define el ancho fijo de la sección del formulario */
}

/* 3. EL FORMULARIO (MÁXIMO EFECTO CRISTAL) */
.form-container {
    position: relative;          /* Lo mantiene en su flujo pero permite usar z-index */
    z-index: 10;                 /* Capa por encima de los círculos pero debajo de Lilith */
    padding: 3.5rem 2rem;        /* Espacio interno amplio para que el diseño respire */
    
    /* 🚩 CRISTAL PURO: Fondo casi invisible con desenfoque extremo */
    background: rgba(255, 255, 255, 0.01); 
    backdrop-filter: blur(40px);           /* El efecto que empaña lo que hay detrás */
    -webkit-backdrop-filter: blur(40px);   /* Compatibilidad específica para Safari */
    
    /* Borde fino con brillo para dar la sensación de canto de vidrio */
    border: 1px solid rgba(255, 255, 255, 0.25); 
    
    border-radius: 20px;         /* Esquinas muy redondeadas */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6); /* Sombra oscura para despegarlo del fondo */
}

/* 4. TEXTOS E INPUTS */
h1.opacity {
    text-align: center;          /* Centra el texto "LOGIN" */
    font-size: 2.5rem;           /* Tamaño de fuente grande */
    letter-spacing: 6px;         /* Mucho espacio entre letras para estilo lujoso */
    margin-bottom: 2rem;         /* Distancia con el primer campo de texto */
    position: relative;          /* Permite posicionarlo en capas */
    z-index: 25;                 /* Lo pone por delante de Lilith */
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Sombra al texto para que no se pierda en el cristal */
}

.login-container form input {
    display: block;              /* Los inputs ocupan toda la línea */
    width: 100%;                 /* Ancho total del contenedor */
    padding: 15px;               /* Relleno para que sea cómodo escribir */
    margin-bottom: 1.5rem;       /* Separación entre el usuario y la contraseña */
    
    /* Fondo oscuro para que el texto blanco se lea perfectamente sobre el cristal */
    background: rgba(0, 0, 0, 0.7); 
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde muy sutil */
    border-radius: 8px;          /* Esquinas del campo redondeadas */
    color: #fff;                 /* Color del texto que escribe el usuario */
    font-family: 'Arial', sans-serif; /* Letra clara para legibilidad al escribir */
    outline: none;               /* Quita el borde azul que pone Google Chrome al hacer clic */
    position: relative;          /* Posicionamiento para z-index */
    z-index: 25;                 /* Permite que el input sea clicable sobre la imagen */
}

/* 5. BOTÓN: Dinámico según el tema del JS */
.login-container form button {
    width: 100%;                 /* Botón del mismo ancho que los inputs */
    padding: 15px;               /* Altura cómoda para clics */
    background: var(--primary-color, #0f3460); /* Color de fondo que cambia con el JS */
    color: var(--color, #ffffff);              /* Color de texto del botón que cambia con el JS */
    border: none;                /* Sin bordes */
    border-radius: 8px;          /* Redondeo coherente con los inputs */
    font-family: 'Cinzel', serif; /* Fuente épica para el botón principal */
    font-weight: bold;           /* Letra gruesa */
    font-size: 1.2rem;           /* Texto grande */
    cursor: pointer;             /* Cambia el cursor a una mano */
    transition: 0.3s;            /* Suaviza los efectos de hover */
    position: relative;          /* Posicionamiento para z-index */
    z-index: 25;                 /* Por encima de todos los elementos decorativos */
}

.login-container form button:hover {
    filter: brightness(1.3);     /* Aumenta el brillo al pasar el ratón */
    transform: scale(1.02);      /* Hace que el botón crezca un 2% al pasar el ratón */
}

/* 6. LILITH: Ajustada a la derecha */
.illustration {
    position: absolute;          /* Se mueve libremente dentro del login-container */
    top: -30%;                   /* Sube hacia afuera de la caja */
    right: -180px;               /* La desplaza hacia afuera por la derecha */
    width: 95%;                  /* Tamaño de la imagen de Lilith */
    z-index: 15;                 /* Capa entre el cristal y los textos */
    pointer-events: none;        /* Hace que la imagen sea "fantasma" y los clics pasen al fondo */
    filter: drop-shadow(0 0 25px rgba(0,0,0,0.9)); /* Sombra externa a la silueta */
}

/* 7. CÍRCULOS: Nítidos (Sin difuminado) */
.circle {
    position: absolute;          /* Posicionamiento libre */
    width: 160px;                /* Tamaño del círculo */
    height: 160px;               /* Tamaño del círculo */
    background: var(--primary-color, #0f3460); /* Color que cambia con tu JS */
    border-radius: 50%;          /* Hace que el cuadrado sea un círculo perfecto */
    z-index: -1;                 /* Se coloca detrás de la caja de cristal */
    filter: none;                /* Asegura que no tenga ningún difuminado */
}

.circle-one { 
    top: -50px;                  /* Lo saca un poco por la esquina superior */
    left: -50px;                 /* Lo saca un poco por la izquierda */
    opacity: 0.8;                /* Transparencia leve */
}

.circle-two { 
    bottom: -50px;               /* Lo saca un poco por la esquina inferior */
    right: -50px;                /* Lo saca un poco por la derecha */
    opacity: 0.6;                /* Transparencia mayor */
}

/* 8. SELECTOR DE COLORES (JS) */
.theme-btn-container {
    position: fixed !important;  /* Lo mantiene fijo en la pantalla al mover el scroll */
    left: 20px !important;       /* Distancia al borde izquierdo */
    bottom: 20px !important;     /* Distancia al borde inferior */
    display: flex !important;    /* Activa flex para los botones */
    flex-direction: column;      /* Pone los botones uno encima del otro */
    gap: 8px;                    /* Separación entre los botones de colores */
    z-index: 1000;               /* Por encima de absolutamente todo para poder clicar */
}

.theme-btn {
    border-radius: 4px;          /* Esquinas de los cuadraditos de colores */
    cursor: pointer;             /* Cursor de mano */
    border: 2px solid rgba(255,255,255,0.4); /* Borde blanco translúcido */
    transition: transform 0.2s;  /* Suaviza el crecimiento al pasar el ratón */
}

/* 9. LINKS Y FOOTER (EFECTO AMARILLO) */
.register-forget {
    margin-top: 1.5rem;          /* Espacio entre el botón y los links */
    display: flex;               /* Activa flexbox */
    justify-content: space-between; /* Uno a la izquierda y otro a la derecha */
    position: relative;          /* Posicionamiento de capa */
    z-index: 25;                 /* Por encima de Lilith */
}

.register-forget a, .footer-legal-index a {
    color: var(--color, #ffffff); /* Color dinámico del texto de los links */
    text-decoration: none;        /* Quita el subrayado */
    font-size: 0.85rem;           /* Letra pequeña y discreta */
    transition: color 0.3s;       /* Suaviza el cambio a amarillo */
}

.register-forget a:hover, .footer-legal-index a:hover {
    color: #f39c12 !important;    /* Cambia a amarillo dorado al pasar el ratón */
}

footer {
    position: absolute;          /* Se ancla respecto al body */
    bottom: 30px;                /* 30 píxeles de distancia del suelo */
    width: 100%;                 /* Ocupa todo el ancho para poder centrar */
    text-align: center;          /* Centra los textos legales */
}