/* Estilos para el filtro de cotizaciones - Estilo Admin */

/* Contenedor del filtro */
.quotes-filter-container {
    transition: all 0.3s ease;
}

/* Input de búsqueda con estilo admin */
#quotesSearchInput, #forexSearchInput {
    background-color: white;
}

#quotesSearchInput:focus, #forexSearchInput:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    background-color: white;
}

/* Input group con estilo admin */
.input-group-text.bg-body-tertiary {
    background-color: #f8f9fa !important;
    border-color: #dee2e6;
    color: #6c757d;
}

/* Botones del filtro con estilo admin */
#clearSearchBtn, #clearForexSearchBtn {
    transition: all 0.2s ease;
    border-color: #dee2e6;
    color: #6c757d;
}

#clearSearchBtn:hover, #clearForexSearchBtn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #495057;
}

#resetFilterBtn, #resetForexFilterBtn {
    transition: all 0.2s ease;
    border-color: #0dcaf0;
    color: #0dcaf0;
}

#resetFilterBtn:hover, #resetForexFilterBtn:hover {
    background-color: #0dcaf0;
    color: white;
}

/* Información del filtro con estilo admin */
#filterResultsInfo, #forexFilterResultsInfo {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Checkboxes con estilo admin */
.form-check-input {
    border-color: #adb5bd;
    background-color: white;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}

.form-check-label.small {
    font-size: 0.875rem;
    color: #495057;
}

/* Iconos en checkboxes */
.form-check-label i {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Estilos para filas filtradas */
tr[style*="display: none"] {
    display: none !important;
}

/* Transición suave para mostrar/ocultar filas */
tbody tr {
    transition: all 0.2s ease;
}

/* Pantallas intermedias (tablets grandes y pantallas pequeñas de escritorio) */
@media (max-width: 983px) and (min-width: 769px) {
    /* Ajustar el texto de ayuda del formulario para pantallas intermedias */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .form-text.small.mt-1 {
        margin-top: 0.5rem !important;
        margin-bottom: 1rem !important;
        text-align: center;
        padding: 0 20px;
        max-width: 550px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ajustar el margen del input group para dar espacio al texto de ayuda */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        margin-bottom: 0.25rem;
    }
    
    /* Añadir espacio entre las dos columnas en pantallas intermedias */
    .card.border-0.shadow-sm.mb-4 .row.g-3.align-items-center {
        row-gap: 1rem !important;
    }
    
    /* Centrar también el campo de búsqueda en pantallas intermedias */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Asegurar que el input group ocupe el ancho completo pero centrado */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        width: 100%;
        max-width: 600px;
    }
    
    /* Limitar ancho máximo de los botones en pantallas intermedias */
    .quotes-page .col-12.col-lg-4 > .btn-group {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    /* Asegurar que el contenedor padre también centre el contenido */
    .quotes-page .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
    
    /* Estilos específicos para el filtro de cotizaciones */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
}

/* Pantallas pequeñas (tablets y móviles) */
@media (max-width: 768px) {
    .quotes-filter-container .row > div {
        margin-bottom: 1rem;
    }
    
    .form-check {
        margin-bottom: 0.5rem;
    }
    
    .d-flex.flex-wrap {
        justify-content: flex-start !important;
    }
    
    /* Limitar ancho máximo de los botones en pantallas pequeñas y centrarlos */
    .quotes-page .col-12.col-lg-4 > .btn-group {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    /* Asegurar que el contenedor padre también centre el contenido */
    .quotes-page .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
    
    /* Estilos específicos para el filtro de cotizaciones */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
    
    /* Ajustar el texto de ayuda del formulario para evitar solapamiento */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .form-text.small.mt-1 {
        margin-top: 0.75rem !important;
        margin-bottom: 1.25rem !important;
        text-align: center;
        padding: 0 15px;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ajustar el margen del input group para dar espacio al texto de ayuda */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        margin-bottom: 0.5rem;
    }
    
    /* Añadir espacio entre las dos columnas en pantallas medianas */
    .card.border-0.shadow-sm.mb-4 .row.g-3.align-items-center {
        row-gap: 1.25rem !important;
    }
    
    /* Centrar también el campo de búsqueda en pantallas medianas */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Asegurar que el input group ocupe el ancho completo pero centrado */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        width: 100%;
        max-width: 500px;
    }
}

/* Limitar ancho máximo de los botones en todas las pantallas */
.quotes-page .col-12.col-lg-4 > .btn-group {
    max-width: 400px;
    width: 100%;
}

/* Asegurar que los botones se ajusten dentro del contenedor limitado */
.quotes-page .col-12.col-lg-4 > .btn-group .btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}

/* Estilos específicos para el filtro de cotizaciones */
.card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
    max-width: 400px;
    width: 100%;
}

/* Estilos para filtro de forex (misma estructura) */
.quotes-page .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
    max-width: 400px;
    width: 100%;
}

/* Para pantallas muy pequeñas */
@media (max-width: 576px) {
    .quotes-page .col-12.col-lg-4 > .btn-group {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    /* Estilos específicos para filtro de forex en pantallas pequeñas */
    .quotes-page .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 > .btn-group {
        max-width: 280px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        justify-content: center;
    }
    
    /* Asegurar que el contenedor padre también centre el contenido en pantallas muy pequeñas */
    .quotes-page .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
    
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-4 {
        display: flex;
        justify-content: center;
    }
    
    /* Ajustar el texto de ayuda del formulario para evitar solapamiento en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .form-text.small.mt-1 {
        margin-top: 0.75rem !important;
        margin-bottom: 1.5rem !important;
        text-align: center;
        padding: 0 8px;
        font-size: 0.7rem;
        line-height: 1.1;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ajustar el margen del input group para dar espacio al texto de ayuda en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        margin-bottom: 0.75rem;
    }
    
    /* Añadir espacio entre las dos columnas en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .row.g-3.align-items-center {
        row-gap: 1.5rem !important;
    }
    
    /* Reducir el padding del card body en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .card-body.p-3 {
        padding: 1rem !important;
    }
    
    /* Centrar también el campo de búsqueda en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    /* Asegurar que el input group ocupe el ancho completo pero centrado en pantallas muy pequeñas */
    .card.border-0.shadow-sm.mb-4 .col-12.col-lg-8 .input-group {
        width: 100%;
        max-width: 400px;
    }
}

/* Efectos hover para el card del filtro */
.card.border-0.shadow-sm {
    transition: box-shadow 0.2s ease;
}

/* Eliminado el efecto hover según solicitud del usuario */

/* Reducir margen inferior del filtro */
.card.border-0.shadow-sm.mb-4 {
    margin-bottom: 0.5em !important;
}

/* Incrementar margen inferior del párrafo debajo del título */
.quotes-page .text-muted {
    margin-bottom: 1.3em !important;
}

/* Eliminar margen inferior del icono de búsqueda */
.input-group-text.bg-body-tertiary i.fa-search {
    margin-bottom: 0 !important;
}