/* Estilos únicos para el formulario de Libro de Reclamaciones */
/* Estilo general del formulario */
.libro-reclamaciones-form {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 900px;
    margin: 20px auto;
}

.libro-reclamaciones-form h2 {
    font-size: 22px;
    margin-bottom: 20px;
}

/* Estilos para la cuadrícula del formulario */
.form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

/* Estilos para cada grupo de formulario */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: bold;
    margin-bottom: 5px;
}

.form-group input,
.form-group select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.form-group input[type="radio"] {
    width: auto;
}

.radio-group {
    display: flex;
    gap: 10px;
}

/* Estilos específicos para los campos de menor de edad */
.form-group .radio-group label {
    margin-right: 20px;
}

/* Asegurarse de que el formulario del tutor se mantenga debajo de los otros campos */
#tutor-form {
    clear: both; /* Asegura que se mantenga en una nueva línea */
    display: block; /* Para asegurarse de que el layout grid no lo afecte */
    width: 90%; /* Ocupa todo el ancho disponible */
    padding: 15px;
}

/* Ajustar el grid del formulario del tutor */
#tutor-form .form-grid {
    grid-template-columns: 1fr 1fr !important; /* Dos columnas */
    grid-gap: 20px;
}

/* Asegurar que el contenedor padre de las opciones de menor de edad se comporte correctamente */
.form-group {
    clear: both; /* Asegurar que otros elementos no se alineen junto a esta pregunta */
    margin-bottom: 15px; /* Separación visual */
}

/* Ajustar el título de la sección del tutor */
#tutor-form h3 {
    font-size: 20px;
    margin-bottom: 15px;
}

/* Estilos para organizar los datos de la empresa en una sola línea */
.libro-reclamaciones-datos-empresa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.libro-reclamaciones-datos-empresa p {
    flex: 1;
    margin-right: 10px;
    font-size: 14px;
}

.libro-reclamaciones-datos-empresa p:last-child {
    margin-right: 0;
}

.notas-adicionales {
    margin-top: -20px;
    font-size: 12px;
    color: #555;
}

/* Estilo básico para el botón de envío */
.btn-submit {
    background-color: #d32f2f; /* Rojo similar al de los enlaces */
    color: white; /* Texto en blanco */
    padding: 12px 20px; /* Espaciado interior */
    font-size: 16px; /* Tamaño del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer; /* Cambiar el cursor a pointer */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
    text-align: center; /* Centrar el texto */
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 300px; /* Limita el ancho máximo */
    display: block; /* Asegura que sea un bloque */
    margin: 20px auto; /* Centrar el botón horizontalmente */
}

/* Efecto hover para el botón */
.btn-submit:hover {
    background-color: #b71c1c; /* Color más oscuro al pasar el ratón */
}

/* Efecto activo cuando el botón es presionado */
.btn-submit:active {
    background-color: #9e1b1b; /* Aún más oscuro cuando se presiona */
    transform: scale(0.98); /* Ligeramente más pequeño para dar sensación de clic */
}

/* Responsive */
@media (max-width: 768px) {
    .form-grid {
        display: block;
    }
    #tutor-form .form-grid {
        display: block;
    }

    .libro-reclamaciones-datos-empresa {
        flex-direction: column;
        align-items: flex-start; /* Alinea los elementos a la izquierda */
      }
      .libro-reclamaciones-datos-empresa p {
        margin-bottom: 10px; /* Opcional: separa cada elemento */
      }
}