:root {
    --azul-moni: #003375;
    --fondo-gris: #dae1ec; 
    --blanco: #ffffff;
    --texto-negro: #202124;
    --linea-clara: #dadce0;
    --fuente: 'docs-Montserrat', sans-serif;
}

/* Base */
body {
    background-color: var(--fondo-gris);
    font-family: var(--fuente);
    color: var(--texto-negro);
    margin: 0;
    padding: 20px;
}

.form-container {
    width: 70%; /* Usamos width en lugar de max-width para asegurar el tamaño en PC */
    max-width: 1200px; /* Opcional: para que no se vea gigante en monitores ultra anchos */
    margin: 20px auto;
    transition: width 0.3s ease;
}
/* Responsividad para Tablets y Celulares */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Reducimos el espacio exterior para ganar lugar */
    }

    .form-container {
        width: 95%; /* El contenedor ocupa todo el ancho disponible */
        margin: 10px 0;
        margin: 0px auto;
    }

    header, fieldset {
        border-radius: 0; /* Opcional: quitar redondeado en móvil se ve más nativo */
        padding: 16px;    /* Reducimos el padding interno para que no se vea apretado */
    }

    input[type="text"],
    input[type="tel"],
    select,
    textarea {
        max-width: 90%; /* Permitimos que los inputs crezcan en móvil */
    }
}

/* Header alineado a la izquierda */
header {
    background-color: var(--blanco);
    padding: 24px;
    border-radius: 8px;
    border-top: 10px solid var(--azul-moni); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el logo y el texto horizontalmente */
    text-align: center

}

h1 {
    font-size: 24pt;
    font-weight: 600;
    margin: 0;
}

/* Tarjetas Blancas (Fieldsets) */
fieldset {
    border: none;
    background-color: var(--blanco);
    padding: 24px;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    
    /* Esto es CLAVE: permite que el contenido fluya normal */
    display: block;
    min-inline-size: auto;
}

label {
    display: block;
    margin-bottom: 12px;
    font-size: 13pt;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}

/* Estilo de Línea Punteada (como tu captura) */
input[type="text"],
input[type="tel"],
select,
textarea {
    width: 100%;
    max-width: 350px;
    padding: 8px 0;
    border: none;
    border-bottom: 1px dotted var(--linea-clara);
    border-radius: 0;
    font-family: var(--fuente);
    font-size: 12pt;

    background-color: transparent;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--azul-moni);
}

/* Opciones Radio */
.radio-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
}

.radio-group label {
    font-weight: 400;
    font-size: 12pt;
    gap: 5px;
}

input[type="radio"] {

    transform: scale(1.5);
    margin-right: 12px;
    margin-left:  0px;
    /* Solo cambia esto al color que quieras */
    accent-color: var(--azul-moni); 
}

input::placeholder {
    color: #757575; /* Color base gris de Google */
    font-weight: 500;
}

/* También para navegadores antiguos o Firefox */
input::-webkit-input-placeholder { color: rgba(112, 117, 122, 0.5); }
input::-moz-placeholder { color: rgba(112, 117, 122, 0.5); }

/* Botón de Enviar Estilo Google Forms */
.btn-submit {
    background-color: var(--azul-moni); /* El azul de tu marca */
    color: var(--blanco);
    padding: 12px 24px; /* Lo hace más grande y cómodo */
    border: none;
    border-radius: 8px; /* Bordes ligeramente redondeados */
    font-family: var(--fuente);
    font-size: 13pt; /* Tamaño de letra según tu estándar */
    font-weight: 700; /* Letras en negrita */
    cursor: pointer;
    
    /* Centrado del botón */
    display: block;
    margin-top: 20px; /* Espacio arriba del botón */
    
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Efecto al pasar el mouse */
.btn-submit:hover {
    background-color: #1a4b8c; /* Un azul un poco más oscuro */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Efecto al hacer clic */
.btn-submit:active {
    background-color: #002657;
    transform: translateY(1px);
}