/* Estilos generales del contenedor del formulario */
.mc-colegio-form-wrap {
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
    max-width: 960px; /* Suficientemente ancho para 3 columnas en escritorio */
    margin: 20px auto; /* Centra el formulario en la página */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sutil sombra para mejor visualización */
}

/* Títulos del formulario */
.mc-colegio-form-wrap h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* Contenedor para los campos en formato de cuadrícula/columnas */
.mc-form-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
    justify-content: space-between; /* Distribuye el espacio entre las columnas */
    gap: 20px; /* Espacio uniforme entre las filas y columnas */
    margin-bottom: 20px; /* Espacio debajo de la cuadrícula de campos */
}

/* Estilos para cada párrafo (campo individual) dentro de la cuadrícula */
.mc-form-grid p {
    /* **ESTO ES CLAVE PARA LAS TRES COLUMNAS:** */
    /* Calcula el ancho para que quepan 3 columnas, restando el espacio de los "gaps" */
    flex: 0 0 calc(33.333% - (2 * 20px / 3)); /* 33.333% por columna, restando 2/3 del gap */
    /* Explicación del cálculo:
       - 33.333% es el ancho para 3 columnas si no hubiera gap.
       - Como hay 2 gaps de 20px entre 3 columnas, cada columna "pierde" 2/3 del gap total.
       - Esto asegura que 'justify-content: space-between' funcione correctamente. */
    margin: 0; /* Elimina el margen predeterminado de los párrafos para un mejor control con gap */
}

/* Para campos que puedan necesitar una fila completa (ej. un textarea o un campo largo) */
/* Puedes añadir una clase específica a estos campos si quieres que rompan el diseño de 3 columnas */
/* Por ejemplo, <p class="mc-full-width-field">...</p> en tu HTML */
.mc-form-grid p.mc-full-width-field {
    flex: 0 0 100%; /* Ocupa el 100% del ancho, forzando a una nueva fila */
}

/* Ajuste para que las etiquetas de los checkboxes no se vean mal en columnas */
.mc-form-grid p input[type="checkbox"] {
    width: auto; /* Evita que el checkbox ocupe 100% de ancho */
    margin-right: 8px; /* Pequeño espacio entre checkbox y label */
}

/* Estilos para las etiquetas e inputs */
.mc-colegio-form-wrap label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600; /* Un poco más de grosor para la etiqueta */
    color: #555;
}

.mc-colegio-form-wrap input[type="text"],
.mc-colegio-form-wrap input[type="email"],
.mc-colegio-form-wrap input[type="tel"],
.mc-colegio-form-wrap input[type="number"],
.mc-colegio-form-wrap input[type="date"], /* Para el campo de fecha */
.mc-colegio-form-wrap textarea,
.mc-colegio-form-wrap select { /* Añadido para futuros selects */
    width: 100%;
    padding: 10px 12px; /* Aumenta un poco el padding */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Crucial para que el padding no aumente el ancho total */
    font-size: 15px; /* Ligeramente más grande */
    line-height: 1.5;
    transition: border-color 0.2s ease-in-out; /* Transición suave al enfocar */
}

.mc-colegio-form-wrap input:focus,
.mc-colegio-form-wrap textarea:focus,
.mc-colegio-form-wrap select:focus {
    border-color: #0073aa; /* Resalta el borde al enfocar */
    outline: none; /* Elimina el contorno por defecto */
}

/* Contenedor para el botón de envío y el mensaje de respuesta */
/* Es importante que estos elementos no interfieran con la lógica de las columnas */
.mc-form-submit-row {
    text-align: center; /* Centra el botón de envío si se desea */
    margin-top: 30px; /* Espacio superior para separar del último campo */
}

/* Estilos para el botón de envío */
.mc-colegio-form-wrap input[type="submit"] {
    background-color: #0073aa;
    color: white;
    padding: 12px 25px; /* Más padding para un botón más grande */
    border: none;
    border-radius: 5px; /* Bordes ligeramente más redondeados */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.mc-colegio-form-wrap input[type="submit"]:hover {
    background-color: #005177;
}

/* Mensajes de respuesta del formulario */
#mc-colegio-response-message {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
}

#mc-colegio-response-message p {
    margin: 0; /* Elimina margen extra de párrafo */
    font-weight: bold;
}

#mc-colegio-response-message .loading-message {
    color: #0073aa;
    background-color: #e6f7ff;
}

#mc-colegio-response-message .success-message {
    color: green;
    background-color: #e8ffe8;
}

#mc-colegio-response-message .error-message {
    color: red;
    background-color: #ffe8e8;
}

/* Media query para hacer el formulario de una o dos columnas en pantallas pequeñas */