/* --- Reseteo Básico y Variables Globales --- */
:root {
    /* Color de fondo principal (amarillo/mostaza) */
    --bg-color: #dab829;
    /* Color de texto oscuro */
    --text-color: #1a1a1a;
    /* Color del botón y footer */
    --dark-accent: #000000;
    /* Tipografía principal */
    --font-family: 'Poppins', sans-serif;
}

/* Reseteo para que paddings y borders no aumenten el ancho de los elementos */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Estilos generales del cuerpo */
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    /* Flexbox para centrar el contenido verticalmente si la pantalla es alta */
    display: flex;
    flex-direction: column;
    min-height: 90vh; /* Altura mínima del 100% de la ventana */
}

/* --- Contenedores Principales --- */
/* Contenedor que centra todo el contenido principal */
.main-container {
    width: 100%;
    max-width: 800px; /* Ancho máximo para escritorio */
    margin: 0 auto; /* Centrado horizontal */
    padding: 40px 20px; /* Espacio interno */
    text-align: center; /* Centrar texto por defecto */
    flex: 1; /* Ocupa el espacio disponible restante antes del footer */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar elementos hijos horizontalmente */
}

/* Espaciador para asegurar que el footer quede abajo si hay poco contenido */
.spacer {
    flex-grow: 1;
}

/* --- Encabezado y Textos --- */
.header-logo img {
    max-width: 200px; /* Tamaño máximo del logo principal */
    height: auto;
    margin-bottom: 10px;
}

.intro-text h1 {
    font-size: 1.0rem; /* Tamaño de fuente base para el título */
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.4;
}

.intro-text .sub-text {
    font-size: 1rem;
    font-weight: 700; /* Más negrita para el subtítulo */
    margin-bottom: 30px;
}

/* --- Estilos del Formulario --- */
.registro-form {
    width: 100%;
    max-width: 500px; /* Ancho máximo del formulario */
    text-align: left; /* Alinear etiquetas e inputs a la izquierda */
}

.form-group {
    margin-bottom: 15px; /* Espacio entre campos */
}

/* Estilos para las etiquetas (labels) */
.form-group label {
    display: block; /* Que ocupen toda la línea */
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Estilos comunes para inputs y selects */
.form-group input[type="text"],
.form-group input[type="tel"],
.form-group input[type="email"],
.form-group select {
    width: 100%; /* Ancho completo del contenedor padre */
    padding: 8px 12px; /* Relleno interno para que se vean grandes */
    border: none; /* Sin borde por defecto */
    border-radius: 25px; /* Bordes muy redondeados como en la imagen */
    background-color: #ffffff; /* Fondo blanco */
    font-family: var(--font-family);
    font-size: 1rem;
    outline: none; /* Quitar contorno azul al seleccionar */
}

/* --- Estilos Específicos para Fecha de Nacimiento --- */
/* Contenedor flex para poner los 3 selects en línea */
.date-selectors {
    display: flex;
    gap: 10px; /* Espacio entre los selects */
    justify-content: space-between;
}

/* Ajuste de anchos para los selects de fecha */
.date-selectors select#dia { flex: 1; } /* Ocupa 1 parte */
.date-selectors select#mes { flex: 2; } /* Ocupa 2 partes (más ancho para nombres de mes) */
.date-selectors select#anio { flex: 1.2; } /* Ocupa 1.2 partes */

/* Nota de "Casilla obligatoria" */
.required-note {
    font-size: 0.85rem;
    margin-top: -10px;
    margin-bottom: 30px;
    font-weight: 600;
}

/* --- Botón de Registrar --- */
.btn-submit {
    width: 100%;
    padding: 15px;
    background-color: var(--dark-accent); /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    border: none;
    border-radius: 30px; /* Bordes redondeados */
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer; /* Manito al pasar el mouse */
    transition: background-color 0.3s ease; /* Transición suave para hover */
}

.btn-submit:hover {
    background-color: #333333; /* Un poco más claro al pasar el mouse */
}

/* --- Estilos para Mensajes de Alerta (PHP) --- */
.alerta {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px;
    font-weight: 600;
}
/* Color rojo para errores */
.alerta-error {
    background-color: #ffdede;
    color: #c00000;
    border: 1px solid #c00000;
}
/* Color verde para éxito */
.alerta-exito {
    background-color: #e3ffde;
    color: #2e7d32;
    border: 1px solid #2e7d32;
}

/* --- Footer --- */
.main-footer {
    background-color: var(--dark-accent); /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    width: 100%;
    padding: 20px 0;
    text-align: center; /* Centrar texto por defecto */
    align-items: center; /* Centrado vertical */
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex; /* Flexbox para alinear texto y logo */
    justify-content: space-between; /* Texto a la izquierda, logo a la derecha */
    align-items: center; /* Centrado vertical */
    flex-wrap: wrap; /* Permitir que se envuelva en móviles muy pequeños */
    gap: 15px;
}

.footer-text {
    font-size: 0.8rem;
    font-weight: 300;
}

.footer-logo {
    height: 25px; /* Altura fija para el logo del footer */
    width: auto;
}

/* --- Media Queries (Responsive Design) --- */
/* Para dispositivos móviles (pantallas menores a 600px) */
@media (max-width: 600px) {
    .main-container {
        padding: 30px 15px;
    }

    .header-logo img {
        max-width: 220px; /* Logo más pequeño en móvil */
    }

    .intro-text h1 {
        font-size: 1rem; /* Título más pequeño */
    }
    
    /* En móviles, apilar los selectores de fecha si es necesario */
    .date-selectors {
       /* Descomenta si prefieres que se apilen en pantallas muy estrechas */
       /* flex-direction: column; */
    }
    
    /* Ajustar el footer para que se apile verticalmente en móviles */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
}