/* --- Variables optimizadas --- */
:root {
    --primary: #6c5ce7; /* Color principal */
    --secondary: #00cec9; /* Color secundario */
    --dark: #2d3436; /* Color oscuro para texto */
    --blanco: #ffffff; /* Color blanco */
    --gris: #f9f9f9; /* Fondo claro */

    --trans: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; /* Transiciones reutilizables */
    --shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sombra estándar */
    --radio: 12px; /* Bordes redondeados */
}

/* Reset */
* { 
    margin: 0; /* Quita márgenes por defecto */
    padding: 0; /* Quita relleno por defecto */
    box-sizing: border-box; /* Incluye padding y border en el tamaño */
}

/* Base */
body {
    font-family: 'Montserrat', sans-serif; /* Fuente principal */
    background-color: var(--gris); /* Fondo general */
    color: var(--dark); /* Color de texto */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* Transiciones */
a, button, input {
    transition: 0.2s ease; /* Suaviza cambios en hover/focus */
}

/* CONTENEDOR PRINCIPAL */
.contenedor-registro {
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    display: flex; /* Activa flexbox */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); /* Fondo degradado */
    padding: 20px; /* Espaciado interno */
}

/* TARJETA */
.card-registro {
    background: var(--blanco); /* Fondo blanco */
    width: 100%; /* Ancho completo */
    max-width: 380px; /* Máximo ancho */
    padding: 2.5rem; /* Espaciado interno */
    border-radius: var(--radio); /* Bordes redondeados */
    box-shadow: var(--shadow); /* Sombra */
    transition: var(--trans); /* Animaciones suaves */
}

.card-registro:hover {
    transform: translateY(-3px); /* Eleva la tarjeta */
    box-shadow: 0 15px 40px rgba(0,0,0,0.15); /* Sombra más fuerte */
}

/* HEADER */
.header-registro,
.grupo-inputs {
    margin-bottom: 15px; /* Espacio inferior */
}

.header-registro {
    text-align: center; /* Centra el texto */
}

.header-registro h1 {
    font-size: 24px; /* Tamaño del título */
}

/* INPUTS */
.grupo-inputs {
    border: none; /* Quita borde del fieldset */
}

.grupo-inputs legend {
    font-size: 14px; /* Tamaño del texto */
    margin-bottom: 10px; /* Espacio inferior */
}

.grupo-inputs label {
    display: block; /* Hace que ocupe toda la línea */
    margin-bottom: 6px; /* Espacio inferior */
    font-weight: 600; /* Texto seminegrita */
}

/* FOOTER DE REGISTRO */
.registro-acceso {
    margin-top: 20px; /* Espacio superior */
    text-align: center; /* Centra contenido */
}

/* Links dentro */
.registro-acceso a {
    color: var(--primary); /* Color principal */
    text-decoration: none; /* Quita subrayado */
}

/* Hover */
.registro-acceso a:hover {
    text-decoration: underline; /* Subraya al pasar mouse */
    opacity: 0.8; /* Reduce opacidad */
}

/* CAMPO CON ICONO */
.input-icono {
    display: flex; /* Alinea icono e input */
    align-items: center; /* Centra verticalmente */
    border: 1px solid #ddd; /* Borde gris */
    border-radius: 8px; /* Bordes redondeados */
    padding: 10px; /* Espacio interno */
    background: #fff; /* Fondo blanco */
    transition: var(--trans); /* Animación */
}

.input-icono:focus-within {
    border-color: var(--primary); /* Cambia borde al enfocar */
    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.15); /* Resalta campo */
}

.input-icono input {
    border: none; /* Quita borde del input */
    outline: none; /* Quita contorno azul */
    width: 100%; /* Ocupa todo el espacio */
    padding-left: 10px; /* Separación del icono */
}

.input-icono input:focus {
    background: #f4f6ff; /* Cambia fondo al escribir */
}

/* BOTÓN */
.btn-registro {
    width: 100%; /* Ancho completo */
    padding: 13px; /* Espacio interno */
    background: var(--primary); /* Color principal */
    color: #fff; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 8px; /* Bordes redondeados */
    font-weight: bold; /* Texto en negrita */
    cursor: pointer; /* Cursor tipo botón */
    margin-top: 10px; /* Espacio arriba */
    transition: var(--trans); /* Animación */
}

.btn-registro:hover {
    transform: translateY(-2px); /* Efecto flotante */
    box-shadow: 0 8px 20px rgba(0,0,0,0.15); /* Sombra */
}

.btn-registro:active {
    transform: scale(0.98); /* Efecto al presionar */
}

/* FOOTER (sin registro-acceso) */
.footer-registro {
    margin-top: 20px; /* Espacio superior */
    text-align: center; /* Centra texto */
}

.footer-registro a {
    color: var(--primary); /* Color principal */
    text-decoration: none; /* Sin subrayado */
}

.footer-registro a:hover {
    text-decoration: underline; /* Subraya al pasar mouse */
}

/* MENSAJES ERROR */
small {
    color: red; /* Color rojo */
    font-size: 12px; /* Tamaño pequeño */
    display: block; /* Ocupa toda la línea */
    margin-bottom: 10px; /* Espacio inferior */
}

/* VALIDACIÓN */
.error {
    border: 2px solid red; /* Borde rojo para error */
}

.correcto {
    border: 2px solid green; /* Borde verde para correcto */
}

/* RESPONSIVE */
@media (max-width: 480px) {
    .card-registro {
        padding: 1.8rem; /* Reduce padding en móviles */
    }

    .header-registro h1 {
        font-size: 21px; /* Reduce tamaño del título */
    }
}