/* Estilos para centrar el formulario y hacerlo responsive */
.formulario-container {
    display: flex; /* Asegura el uso de flexbox */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    min-height: 100vh; /* Asegura que ocupe toda la altura de la pantalla */
    padding: 20px; /* Espaciado interno para evitar que se pegue a los bordes */
    box-sizing: border-box; /* Incluye padding y borde dentro del tamaño total */
}

@media (max-width: 768px) {
    .formulario-container {
        flex-direction: column; /* Cambia a diseño vertical */
        padding: 15px; /* Reduce el espaciado interno */
    }
}

/* Ajustes para el contenedor del formulario */
.form-container {
    max-width: 600px; /* Ancho máximo en escritorio */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    background-color: #fff; /* Fondo blanco */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para destacar */
    padding: 20px; /* Espaciado interno */
}

/* Estilos para el contenedor de la imagen */
.thumbnail {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
    text-align: center; /* Centra el texto dentro del contenedor */
}

.thumbnail img {
    max-width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor */
    height: auto; /* Hace que la altura se ajuste automáticamente */
}

/* Estilos para el contenido del formulario */
.caption {
    padding: 15px;
}

/* Estilos para los inputs */
.form-controlC {
    font-family: Arial, sans-serif; /* Fuente consistente */
    font-size: 16px;               /* Tamaño de texto uniforme */
    padding: 10px;                 /* Espaciado interno */
    margin: 5px 0;                 /* Separación entre elementos */
    border: 1px solid #d281b2;     /* Borde personalizado */
    border-radius: 5px;            /* Bordes redondeados */
    box-sizing: border-box;        /* Incluye el padding en el tamaño total */
    width: 100%;                   /* Que ocupen todo el ancho disponible */
}

.select2-selection {
    text-align: left !important;
}


/* Estilos para pantallas pequeñas */
@media (max-width: 480px) {
    .form-container {
        width: 90%; /* Ocupa un 90% del ancho de la pantalla */
        padding: 10px; /* Reduce el espaciado interno */
        margin: 0 auto; /* Centra el formulario */
    }

    .formulario-container {
        padding: 10px; /* Ajuste para evitar bordes demasiado ajustados */
    }
}