/* 1. Reset Global y Tipografía Base */

@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/century-gothic.ttf') format('truetype'); /* Asegúrate de tener el archivo aquí */
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Century Gothic', Arial, sans-serif;
}

body {
    background: url('../images/fondo2.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    /* Establecemos un tamaño de fuente base más grande para que todo escale */
    font-size: 18px; 
}

/* 2. Contenedor Principal (Escalado para PC y Móvil) */
.formulario {
    background-color: rgba(237, 237, 237, 0.95); /* Ligeramente transparente para toque moderno */
    width: 100%;
    max-width: 750px; /* Aumentamos de 500px a 750px para dar presencia en escritorio */
    padding: 50px; /* Más espacio interno para que "respire" */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* Sombra más profunda y profesional */
}

/* 1. Asegurar que todo el formulario centralice su contenido */
.form-registro {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto centra horizontalmente todo lo que está adentro */
    text-align: center;
}

/* 2. El título "¡Regístrate!" */
.form-registro h1 {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

/* 3. Contenedor de Logos Institucionales */
.logos-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    min-height: 100px; /* Forzamos una altura mínima para que no colapse */
    width: 100%;
}

.logo {
    display: block;    /* Asegura que el navegador las trate como bloques visibles */
    height: 80px;      /* Tamaño visible */
    width: auto;
    object-fit: contain;
}

/* 4. Tipografía mejorada */
h1 { 
    margin-bottom: 25px; 
    color: #222; 
    font-size: 2.5rem; /* Título mucho más grande */
}

p { 
    margin-top: 20px; 
    margin-bottom: 10px;
    color: #444; 
    font-size: 1.2rem;
    text-align: left; /* Alinear etiquetas a la izquierda mejora la lectura (UX) */
    font-weight: bold;
}

/* 5. Inputs y Selects (Optimizados para visibilidad y tacto) */
input[type="text"], select {
    width: 100%;
    padding: 15px; /* Campos más "gorditos" y fáciles de tocar en celular */
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1.1rem; /* Texto interno más grande */
    margin-bottom: 10px;
    transition: border-color 0.3s ease;
}

/* Efecto al hacer clic en un input */
input[type="text"]:focus, select:focus {
    outline: none;
    border-color: rgb(42, 174, 235);
    box-shadow: 0 0 5px rgba(42, 174, 235, 0.5);
}

/* 6. Botón de Enviar (Call to Action) */
input[type='submit'] {
    background-color: rgb(42, 174, 235);
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    padding: 15px 40px; /* Reducimos el padding vertical y damos más aire horizontal */
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 6px;
    
    /* EL CAMBIO CLAVE: */
    width: auto;         /* El botón solo ocupará lo necesario según su contenido */
    min-width: 200px;    /* Aseguramos que no se vea ridículamente pequeño en móviles */
    align-self: center;  /* Se mantiene centrado en el grupo */
    
    transition: background-color 0.3s ease, transform 0.1s ease;
}

input[type='submit']:hover {
    background-color: rgb(35, 145, 195);
}

input[type='submit']:active {
    transform: scale(0.98); /* Pequeño efecto de hundimiento al hacer clic */
}

.input-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente el select y el texto */
    width: 100%;
    max-width: 400px;    /* Mantiene el ancho estándar */
    margin: 10px 0;
}

/* Ajuste específico para la etiqueta <p> */
.input-group p {
    text-align: center;
    width: 100%;
    margin-bottom: 5px;
}
/* 5. Los inputs de texto */
input[type="text"] {
    width: 100%;
    max-width: 400px; /* Alineado con el tamaño de los selects */
    text-align: center; /* Centra el texto que el usuario escribe */
}

/* Selects estandarizados */
select {
    width: 100%;          /* Ocupa el espacio del grupo */
    max-width: 400px;     /* Tamaño estándar máximo para que no se estiren demasiado */
    padding: 12px;
    border: 1px solid #000;
    border-radius: 6px;
    background-color: white;
    font-size: 1rem;
    text-align-last: center; /* Centra el texto DENTRO del select */
    cursor: pointer;
}

/* Mejora de enfoque para seguridad visual */
select:focus {
    border-color: rgb(42, 174, 235);
    outline: none;
}