/* Estilos generales para la página */
.container {
    max-width: 100%; /* Asegura que el contenedor toma el ancho máximo */
}

/* Estilos específicos para las columnas */
.col-md-2 {
    flex: 0 0 14%; /* 14 del espacio disponible en pantallas medianas a grandes */
    max-width: 14%;
    font-size: 0.8rem; /* Tamaño de la fuente reducido */
}

/* Reducir el tamaño de las etiquetas dentro de la columna más pequeña */
.col-md-2 .form-check-label {
    font-size: 0.95rem; /* Establece un tamaño de fuente más pequeño para las etiquetas dentro de .col-md-2 */
}

.col-md-4 {
    flex: 0 0 43%; /* 43% del espacio disponible en pantallas medianas a grandes */
    max-width: 43%;
}

/* Estilo para los jumbotrones, usados en las columnas de texto y resultados */
.jumbotron {
    padding: 20px;
    background-color: #f8f9fa; /* Fondo claro para destacar el área */
    border-radius: 5px; /* Bordes redondeados para mejor estética */
    min-height: 60%; /* Altura mínima para uniformidad */
    height: 70vh; /* Fija la altura del jumbotron para propósitos de prueba */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evita que el contenido salga del contenedor */
}

/* Estilos específicos para el texto de salida */
.styled-pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: inherit;
    border-radius: 5px;
    border: none; /* Quitar el borde */
    background: none;
    padding: 0;
    overflow: auto; /* Añade el scroll cuando el contenido es largo */
    max-height: calc(100% - 50px); /* Asegura que el pre no exceda la altura del contenedor menos el espacio de los botones */
    flex-grow: 1; /* Permite que el <pre> ocupe el espacio disponible */
}


/* Estilos para el contenedor de opciones */
.options-container {
    background-color: #f8f9fa;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 20px; /* Añade espacio debajo para evitar solapamientos */
}

/* Estilos para los controles dentro del contenedor de opciones */
.form-check, .form-check-label, .form-check-input {
    padding-left: 20px;
    margin-bottom: 8px;
    cursor: pointer; /* Indica que el elemento es interactivo */
}

/* Media queries para adaptabilidad en dispositivos móviles */
@media (max-width: 768px) {
    .col-md-2, .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%; /* Las columnas toman el 100% del ancho en pantallas pequeñas */
    }

    .options-container {
        width: 100%; /* Asegura que el contenedor de opciones ocupa todo el ancho disponible */
        position: relative; /* Elimina posicionamiento fijo para evitar solapamientos */
        left: 0;
        top: 0;
        margin-top: 10px; /* Espacio superior para separar del contenido anterior */
    }

    .jumbotron {
        padding: 10px; /* Reduce el padding en dispositivos pequeños para aprovechar el espacio */
    }
}

.btn.selected-button {
    background-color: black !important;  /* Color de Bootstrap para botones primarios */
    color: whitesmoke;
    border-color: black;
}

#resultText {
    border: 1px solid #ced4da; /* Estilo de borde por defecto, ajusta según necesidad */
}

#useImpersonal,
#useImpersonal + label {
    display: none;
}

#divMostrarDeteccion {
    display: none;
}