/* General Body & Container */
body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #f0f2f5;
    margin: 0;
    padding: 0;
    line-height: 1.2;
    color: #333;
    background-image:
    url('/css/MAFIL.jpg') center center / cover no-repeat fixed;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.register-container {
    flex: 1 0 auto;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: linear-gradient(180deg, rgba(3,135,224,0.06) 0%, rgba(3,135,224,0.02) 80%, transparent 100%);
    padding-top: 16vh;
    box-sizing: border-box;
    overflow-y: auto;      /* Permite scroll solo aquí */
    max-height: 100vh;     /* No sobrepasa la pantalla */
}

/* Register Box - El corazón del formulario */
.register-box {
    background: #fafdff; /* Blanco ligeramente azulado */
    border-radius: 1.2rem; /* Bordes un poco más redondeados */
    box-shadow: 0 8px 30px rgba(2,103,187,0.15), 0 4px 12px rgba(2,103,187,0.08); /* Sombra más pronunciada pero suave */
    padding: 1.5rem 2rem; /* Más padding interno para mejor aire */
    max-width: 700px; /* Un poco más angosto para centrar el foco */
    width: 95%; /* Asegura que ocupe buen ancho en pantallas pequeñas */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid #cce7ff; /* Borde más suave */
    box-sizing: border-box;
    position: relative; /* Para posibles elementos internos posicionados */
    z-index: 2; /* Asegura que esté por encima de cualquier fondo complejo */
}

/* Título del formulario */
.register-box h2 {
    color: #004695; /* Azul oscuro corporativo */
    font-weight: 800;
    margin-bottom: 1.5rem; /* Más espacio debajo del título */
    font-size: 1.8rem; /* Título un poco más grande */
    letter-spacing: 0.5px;
    text-align: center;
    border-bottom: 3px solid #0277cd; /* Borde inferior más pronunciado */
    padding-bottom: 0.8rem;
    background: none;
    line-height: 1.2;
}

/* Formulario grid */
.register-box form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 1.5rem; /* Mayor separación entre filas y columnas */
}

.register-box form > div {
    display: flex;
    flex-direction: column;
    gap: 0.4rem; /* Espacio más cómodo entre label y campo */
}

.register-box form > div.full-width {
    grid-column: 1 / -1;
}

/* Labels de los campos */
.register-box label {
    font-weight: 600;
    color: #0277cd; /* Azul de énfasis */
    font-size: 0.95em; /* Ligeramente más pequeño para mantener jerarquía */
    letter-spacing: 0.1px;
    margin-bottom: 0.2em; /* Espacio sutil */
}

/* Estilos para Inputs y Selects */
.register-box input[type="text"],
.register-box input[type="password"],
.register-box input[type="email"],
.register-box select {
    width: 100%;
    padding: 0.7em 0.9em; /* Padding más generoso para mejor tacto */
    border: 1.5px solid #dbe6ee; /* Borde más suave y claro */
    border-radius: 0.7em;
    font-size: 1em; /* Tamaño de fuente normal */
    background: #ffffff;
    color: #2e3b4e; /* Gris oscuro para el texto */
    font-weight: 500;
    box-shadow: inset 0 1px 4px rgba(44,62,80,0.03); /* Sombra interna sutil */
    transition: all 0.25s ease-in-out; /* Transición más suave */
    outline: none;
    box-sizing: border-box;
}

.register-box input[type="text"]:focus,
.register-box input[type="password"]:focus,
.register-box input[type="email"]:focus,
.register-box select:focus {
    border-color: #0387e0; /* Azul principal al enfocar */
    box-shadow: 0 0 0 3px rgba(3,135,224,0.25), inset 0 1px 4px rgba(2,103,187,0.05); /* Sombra de enfoque más visible */
    background: #fdfefe; /* Fondo más blanco al enfocar */
    color: #23272f;
}

/* Placeholders específicos */
.register-box input[type="text"]::placeholder,
.register-box input[type="password"]::placeholder,
.register-box input[type="email"]::placeholder {
    color: #9ab4c7; /* Gris azulado más claro */
    opacity: 0.9;
    font-size: 0.9em; /* Ligeramente más pequeño */
    font-weight: 400;
}

/* Botón de Submit */
.register-box button[type="submit"] {
    background: linear-gradient(90deg, #0387e0 0%, #004695 100%); /* Degradado de azul más vibrante */
    color: #fff;
    border: none;
    border-radius: 2.5em; /* Más redondeado para un look moderno */
    font-weight: 800;
    font-size: 1.15em; /* Un poco más grande */
    padding: 1em 0; /* Más padding vertical */
    margin-top: 1.8em; /* Más espacio arriba */
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(2,103,187,0.2), 0 2px 6px rgba(3,135,224,0.15); /* Sombra más suave */
    transition: all 0.25s ease-out; /* Transición más rápida y suave */
    letter-spacing: 0.8px; /* Un poco más de espaciado */
    text-transform: uppercase;
    grid-column: 1 / -1;
    outline: none;
    border-bottom: 4px solid #0156a8; /* Borde inferior más grueso */
    position: relative;
    overflow: hidden; /* Para efectos de hover */
}

.register-box button[type="submit"]:hover {
    background: linear-gradient(90deg, #0277cd 0%, #0387e0 100%);
    transform: translateY(-3px); /* Efecto de "levantamiento" */
    box-shadow: 0 8px 28px rgba(2,103,187,0.25), 0 3px 10px rgba(3,135,224,0.2);
    border-bottom: 4px solid #004695;
}

.register-box button[type="submit"]:active {
    transform: translateY(0); /* Vuelve a la posición original al presionar */
    box-shadow: 0 2px 8px rgba(2,103,187,0.15), 0 1px 3px rgba(3,135,224,0.1);
    border-bottom: 2px solid #004695;
}

/* Mensajes de alerta */
.register-box .alert,
.register-box .alert-danger,
.register-box .alert-success {
    border-radius: 0.6em;
    padding: 0.9em 1.2em;
    margin-bottom: 1.5em; /* Más espacio */
    font-size: 0.95em;
    font-weight: 600;
    text-align: center; /* Centrar el texto para mensajes */
    background: #eaf4fb;
    color: #0277cd; /* Color principal de alerta */
    border: 1.5px solid #0277cd;
    box-shadow: 0 1px 8px rgba(2,103,187,0.06);
    grid-column: 1 / -1;
    transition: all 0.3s ease; /* Transición para cuando aparezcan */
}

.register-box .alert-success {
    background: #e6f7ed; /* Verde claro suave */
    color: #28a745; /* Verde de éxito */
    border: 1.5px solid #28a745;
}

.register-box .alert-danger { /* Añadido para mensajes de error */
    background: #ffebe6; /* Rojo claro suave */
    color: #dc3545; /* Rojo de error */
    border: 1.5px solid #dc3545;
}

/* Enlace de login */
.register-box .login-link {
    color: #0277cd;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.2em;
    transition: color 0.18s, border-bottom 0.18s;
    letter-spacing: 0.2px;
    border-bottom: 2px solid #0387e0;
    padding-bottom: 1px;
    font-size: 1em;
    display: inline-block;
    position: relative; /* Para pseudo-elementos si quisieras un subrayado más complejo */
}
.register-box .login-link:hover {
    color: #004695; /* Azul más oscuro al pasar el ratón */
    border-bottom: 2px solid #004695;
    text-decoration: none;
}

/* Enlace de "Ya tienes cuenta" */
.register-box .extra-links {
    text-align: center;
    margin-top: 1.8em; /* Más espacio arriba */
    font-size: 1.01em;
    color: #2A4B7D; /* Azul primario, más oscuro y legible */
    grid-column: 1 / -1;
    background: #FBFDFF; /* Fondo blanco cálido */
    border-radius: 0.8em; /* Más redondeado */
    padding: 1em 1.5em; /* Más padding interno */
    border: 1.5px solid #bdd7f5; /* Borde más claro y suave */
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(42,75,125,0.07); /* Sombra más pronunciada */
    display: flex;
    flex-direction: column;
    gap: 0.5em; /* Más espacio entre elementos */
}

.register-box .extra-links .login-link {
    color: #004695; /* Azul oscuro para contraste en este bloque */
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.2em;
    transition: color 0.18s, border-bottom 0.18s;
    letter-spacing: 0.2px;
    border-bottom: 2px solid #0277cd; /* Un azul más vibrante para el subrayado */
    padding-bottom: 1px;
    font-size: 1.02em; /* Ligeramente más grande */
    display: inline-block;
}
.register-box .extra-links .login-link:hover {
    color: #0387e0; /* Azul principal al pasar el ratón */
    border-bottom: 2px solid #0387e0;
    text-decoration: none;
}

/* Media Queries para Responsive */
@media (max-width: 768px) { /* Ajuste para tablets y móviles */
    .register-box {
        padding: 1.5rem 1rem; /* Ajuste el padding para pantallas más pequeñas */
        max-width: 95vw;
        border-radius: 1rem; /* Ligeramente menos redondeado */
    }
    .register-box h2 {
        font-size: 1.5rem; /* Título más pequeño en móvil */
        margin-bottom: 1.2rem;
    }
    .register-box form {
        grid-template-columns: 1fr; /* Una columna en móvil */
        gap: 1rem; /* Espacio más generoso entre campos */
    }
    .register-container {
        padding-top: 5vh; /* Menos espacio arriba en móviles */
    }
    .register-box button[type="submit"] {
        font-size: 1em; /* Botón más pequeño en móvil */
        padding: 0.8em 0;
    }
}

@media (max-width: 480px) { /* Ajuste para móviles muy pequeños */
    .register-box {
        padding: 1.2rem 0.8rem;
    }
    .register-box h2 {
        font-size: 1.3rem;
    }
    .register-box input[type="text"],
    .register-box input[type="password"],
    .register-box input[type="email"],
    .register-box select {
        padding: 0.6em 0.8em;
        font-size: 0.95em;
    }
}