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

/* css/registration-styles.css */
/* Variables CSS para colores (deben coincidir con login-styles.css) */
:root {
  --primary-color: #D4AF37; /* Dorado fuerte, principal */
  --secondary-color: #F4C542; /* Amarillo brillante */
  --dark-bg: #0E1117; /* Fondo general navy oscuro */
  --dark-container-bg: #1A1F2B; /* Fondo del formulario */
  --text-light: #FFFFFF; /* Texto principal */
  --text-muted: #B8C0CC; /* Texto secundario */
  --input-bg: #232B3A; /* Fondo inputs */
  --input-border: #374151; /* Borde inputs */
  --error-color: #E63946; /* Rojo profesional */
  --success-color: #00A86B; /* Verde inversión */
}


/* Estilos globales para el cuerpo de la página de registro (resetea y centra) */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; /* Fuente principal */
    background-color: var(--dark-bg); /* Fondo oscuro general */
    background: radial-gradient(circle at top left, #1A1F2B 0%, #0E1117 100%);
    color: var(--text-light); /* Color de texto predeterminado */
    display: flex; /* Utiliza flexbox para centrar el formulario */
    justify-content: center; /* Centrado horizontal */
    align-items: center; /* Centrado vertical */
    min-height: 100vh; /* Ocupa al menos el 100% del alto de la ventana */
    overflow: auto; /* Permite scroll si el contenido es más grande que la ventana */
}

/* Contenedor principal del formulario de registro */
.registration-container {
    background-color: var(--dark-container-bg); /* Color de fondo para la caja del formulario */
    border-radius: 12px; /* Esquinas redondeadas */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); /* Sombra para dar profundidad */
    padding: 40px; /* Espaciado interno */
    width: 100%;
    max-width: 600px; /* Ancho máximo para el formulario de registro (un poco más ancho que el de login) */
    position: relative; /* Para posibles elementos posicionados dentro */
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
    overflow: hidden; /* Asegura que cualquier efecto de desbordamiento se recorte */
    margin: 20px; /* Margen para asegurar que no se pegue a los bordes en pantallas pequeñas */
}

/* Estilos para el encabezado del formulario */
.registration-header {
    margin-bottom: 30px; /* Espacio debajo del encabezado */
    text-align: center;
}

.registration-header h2 {
    font-family: 'Poppins', sans-serif; /* Mantiene coherencia visual */
    font-weight: 700;
    font-size: 2.2em;
    letter-spacing: 0.5px; /* Separación sutil para elegancia */
    text-transform: uppercase; /* Opcional: da aspecto más sólido */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.registration-header p {
    font-weight: 300;
    font-size: 1em;
    color: var(--text-muted);
}

/* Estilos generales para el formulario (flex-direction column para apilar elementos) */
.registration-form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre los grupos de formulario */
}

/* Estilos para cada grupo de formulario (label + input) */
.form-group {
    text-align: left; /* Alinea el label y el input a la izquierda */
}

.form-group label {
    display: block; /* Hace que el label ocupe su propia línea */
    margin-bottom: 8px; /* Espacio entre label y input */
    font-size: 0.95em;
    color: var(--text-light); /* Color de los labels */
    font-weight: 500; /* Grosor de la fuente */
}

/* ESTILOS GENERALES PARA TODOS LOS INPUTS DE TEXTO, CONTRASEÑA, SELECT Y WHATSAPP */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
/*.form-group input[type="tel"],*/
.form-group select.form-select {
    width: 100%; /* Ocupa el 100% del ancho disponible */
    padding: 12px 15px; /* Espaciado interno */
    border: 1px solid var(--input-border); /* Borde sutil */
    border-radius: 8px; /* Esquinas redondeadas */
    background-color: var(--input-bg); /* Color de fondo de los inputs */
    color: var(--text-light); /* Color del texto dentro del input */
    font-size: 1em;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para enfoque */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="tel"]:focus,
.form-group select.form-select:focus {
    border-color: var(--primary-color); /* Color del borde al enfocar */
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.3); /* Sombra suave al enfocar */
    outline: none; /* Elimina el contorno por defecto del navegador */
}

/* Contenedor específico para el campo de contraseña y el botón de ojo */
.password-input-wrapper {
    position: relative; /* Permite posicionar el ojo absolutamente dentro de este contenedor */
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
    display: flex; /* Usar flexbox para alinear el input y el botón de ojo */
}

.password-input-wrapper input {
    flex-grow: 1; /* Permite que el input ocupe el espacio disponible */
    padding-right: 45px; /* Espacio adicional a la derecha para el icono del ojo */
    /* Otros estilos base ya vienen de las reglas generales de input */
}

.toggle-password {
    position: absolute; /* Posiciona el ojo de forma absoluta */
    right: 25px; /* Distancia desde el borde derecho */
    top: 50%; /* Alinea verticalmente al centro del input */
    transform: translateY(-50%); /* Ajuste fino para centrado vertical */
    cursor: pointer; /* Cambia el cursor para indicar que es clicable */
    color: var(--text-muted); /* Color del icono */
    font-size: 1.1em; /* Tamaño del icono */
    padding: 5px; /* Área de clic más fácil */
    transition: color 0.2s ease; /* Transición suave al pasar el ratón */
}

.toggle-password:hover {
    color: var(--primary-color); /* Color al pasar el ratón */
}

/* Estilos para el input-group de WhatsApp */
.input-group .input-group-text {
    background-color: var(--input-bg); /* Fondo del prefijo */
    border: 1px solid var(--input-border); /* Borde */
    border-right: none; /* Sin borde a la derecha */
    border-radius: 8px 0 0 8px; /* Redondeado solo a la izquierda */
    color: var(--text-light); /* Color del texto del prefijo */
    padding: 12px 15px;
    font-size: 1em;
}

.input-group input[type="tel"] {
    border-radius: 0 8px 8px 0; /* Redondeado solo a la derecha */
    padding: 12px 15px; /* Espaciado interno */
    border: 1px solid var(--input-border); /* Borde sutil */
    background-color: var(--input-bg); /* Color de fondo de los inputs */
    color: var(--text-light); /* Color del texto dentro del input */
    font-size: 1em;
    box-sizing: border-box; /* Incluye padding y border en el ancho total */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transición suave para enfoque */
}

/* Estilos para los mensajes de validación (success/error) */
.text-danger {
    color: var(--error-color) !important;
    font-size: 0.85em;
    margin-top: 5px;
}

/* Estilos para el feedback de validación de Bootstrap */
.form-control.is-valid, .form-select.is-valid {
    border-color: var(--success-color) !important;
    padding-right: calc(1.5em + 0.75rem) !important; /* Ajusta padding para el icono */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%232ecc71' d='M2.3 6.73L.6 4.53c-.4-.4-.3-1 .1-1.4s1-.4 1.4.1L3.5 5.3l3.5-3.5c.4-.4 1-.3 1.4.1s.3 1-.1 1.4L3.7 6.73c-.4.4-1 .3-1.4-.1z'/%3e%3c/svg%3e") !important; /* Icono verde */
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

.form-control.is-invalid, .form-select.is-invalid {
    border-color: var(--error-color) !important;
    padding-right: calc(1.5em + 0.75rem) !important; /* Ajusta padding para el icono */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23e74c3c'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M9 3L3 9M3 3l6 6'/%3e%3c/svg%3e") !important; /* Icono rojo */
    background-repeat: no-repeat !important;
    background-position: right calc(0.375em + 0.1875rem) center !important;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
}

/* Ajustes para Select2 */
.select2-container--default .select2-selection--single {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    height: auto !important; /* Deja que el contenido defina la altura */
    min-height: calc(2.5rem + 2px); /* Asegura una altura mínima similar a los inputs */
    display: flex !important; /* Usa flexbox para alinear el texto y la flecha */
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-light) !important;
    line-height: normal !important; /* Resetea el line-height para que se alinee con flex */
    padding: 12px 15px !important; /* Ajusta el padding para que coincida con los inputs */
    padding-right: 35px !important; /* Espacio para la flecha */
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 15px !important; /* Ajusta la posición de la flecha */
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent !important; /* Color de la flecha */
    border-width: 6px 4px 0 4px !important; /* Tamaño de la flecha */
    margin-top: 0 !important; /* Ajuste fino */
}

/* Estilos para el dropdown de Select2 */
.select2-container--default .select2-results__option {
    padding: 10px 15px;
    color: var(--text-light);
    background-color: var(--dark-container-bg);
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--primary-color) !important; /* Fondo de la opción seleccionada */
    color: var(--text-light) !important;
}

.select2-container--default .select2-dropdown {
    background-color: var(--dark-container-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Cambiar el color del texto cuando tiene un valor seleccionado */
.select2-container--default .select2-selection--single.has-value .select2-selection__rendered {
    color: var(--text-light) !important; /* Mantener color de texto light */
}

/* Estilos para el check de términos y condiciones */
.alert.alert-dark {
    background-color: var(--input-bg); /* Fondo más oscuro para la alerta */
    color: var(--text-light); /* Color de texto claro */
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.form-check-input {
    width: 20px; /* Tamaño del checkbox */
    height: 20px;
    margin-right: 10px;
    border: 2px solid var(--input-border); /* Borde del checkbox */
    background-color: var(--input-bg); /* Fondo del checkbox */
    accent-color: var(--primary-color); /* Color del checkbox al marcarse */
    cursor: pointer;
}

.form-check-label {
    color: var(--text-muted);
    font-size: 0.95em;
    cursor: pointer;
}

.form-check-label a {
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.form-check-label a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Estilos para el botón de Registro */
.btn-primary {
    width: 100%; /* Ocupa todo el ancho disponible */
    padding: 14px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 8px; /* Esquinas redondeadas */
    font-size: 1.1em; /* Tamaño de fuente */
    font-weight: 600; /* Grosor de la fuente */
    cursor: pointer; /* Cursor de puntero */
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--text-light); /* Color del texto del botón */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transiciones suaves para hover */
    margin-top: 15px; /* Espacio superior */
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px); /* Pequeño movimiento hacia arriba al pasar el ratón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); /* Sombra más pronunciada al pasar el ratón */
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: linear-gradient(90deg, #555, #777); /* Un gradiente más oscuro para deshabilitado */
    box-shadow: none;
    transform: none;
}

/* Estilos para los botones de mostrar/ocultar contraseña */
.btn-warning {
    background-color: var(--input-bg); /* Mismo fondo que los inputs */
    border: 1px solid var(--input-border); /* Borde similar al input */
    border-left: none; /* Sin borde a la izquierda */
    border-radius: 0 8px 8px 0; /* Redondeado solo a la derecha */
    color: var(--text-muted); /* Color del icono */
    padding: 12px 15px; /* Ajusta el padding para que coincida con el input */
    font-size: 1em;
    transition: color 0.2s ease;
}

.btn-warning:hover {
    color: var(--primary-color);
    background-color: var(--input-bg); /* Mantener el mismo fondo */
    border-color: var(--primary-color); /* Cambiar el borde al enfocar */
}

/* Estilos para mensajes de alerta del formulario */
#alert-container {
    margin-top: 20px;
}

.alert {
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    text-align: center;
}

.alert-danger {
    background-color: rgba(231, 76, 60, 0.2); /* Fondo rojo semitransparente */
    color: var(--error-color); /* Texto rojo */
    border: 1px solid var(--error-color); /* Borde rojo */
}

.alert-success {
    background-color: rgba(46, 204, 113, 0.2); /* Fondo verde semitransparente */
    color: var(--success-color); /* Texto verde */
    border: 1px solid var(--success-color); /* Borde verde */
}

/* Media Queries para responsividad */
@media (max-width: 768px) {
    .registration-container {
        padding: 30px 20px;
        margin: 15px;
        max-width: 100%; /* Permite que ocupe todo el ancho disponible */
    }

    .registration-header h2 {
        font-size: 1.8em;
    }

    .btn-primary {
        padding: 12px 15px;
        font-size: 1em;
    }

    .form-group small {
        font-size: 0.8em;
    }
}

.alert-fixed {
  position: fixed;
  top: 10rem; /* antes era 1.2rem → más abajo */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  width: min(420px, 90%);
  text-align: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  animation: floatIn 0.6s ease, fadeOut 0.5s ease 2.5s forwards;
}

/* Animación de entrada */
@keyframes floatIn {
  from { 
    opacity: 0; 
    transform: translate(-50%, -20px); 
  }
  to { 
    opacity: 1; 
    transform: translate(-50%, 0); 
  }
}

/* Animación de salida */
@keyframes fadeOut {
  to { 
    opacity: 0; 
    transform: translate(-50%, -10px); 
  }
}