/* ============================================
   BOTONES DE DATATABLES (Exportar, Columnas, etc)
   ============================================ */

/* Estilos iniciales con máxima especificidad para evitar parpadeo */
.dt-button,
.dt-buttons .dt-button,
button.dt-button,
.dt-button-collection .dt-button,
.dt-buttons button,
div.dt-buttons button,
div.dt-buttons .dt-button,
div.dt-button-collection button,
div.dt-button-collection .dt-button,
.buttons-collection {
    background-color: #852d2d !important;
    color: var(--buttons-datatable-color) !important;
    border-color: #125597 !important;
    background-image: none !important;
    border: 1px solid #da27a4 !important;
}

/* Estilos para menús desplegables y modales */
.dt-dropdown-menu,
.dt-button-collection .dt-button,
.colvis-restore,
div.dt-button-collection button,
.dt-button-collection .colvis-active,
.dt-button-collection button.active,
.dt-button-collection button[aria-pressed="true"] {
    background-color: var(--buttons-datatable-bg) !important;
    color: var(--buttons-datatable-color) !important;
    border-color: #dee2e6 !important;
    background-image: none !important;
    border: 1px solid #14487c !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    margin: 2px !important;
}

/* Hover en botones de colección */
.dt-button-collection .dt-button:hover,
.dt-dropdown-menu button:hover,
div.dt-button-collection button:hover,
.dt-button-collection .colvis-active:hover,
.dt-button-collection button.active:hover {
    background-color: #1e70c2 !important;
    border-color: #adb5bd !important;
}

/* Botones activos en el modal de columnas */
.dt-button-collection button.active,
.dt-button-collection .colvis-active,
.dt-button-collection button[aria-pressed="true"] {
    background-color: #4f8f57 !important;
    color: #1976d2 !important;
    border-color: #90caf9 !important;
}

/* Contenedor de botones */
.dt-buttons {
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
}

/* Botones de colección y personalizados */
.dt-buttons .buttons-collection,
.dt-buttons .dt-custom-buttons {
    margin: 0rem .3rem !important;
    border-radius: 4px !important;
    font-size: 0.70rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 6px 12px !important;
    height: 32px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

/* Solo colores para buttons-collection, NO para dt-custom-buttons */
.dt-buttons .buttons-collection {
    border: 1px solid #dee2e6 !important;
    background-color: #ffffff !important;
    color: var(--buttons-datatable-color) !important;
}

/* Sobrescribir estilos específicos de DataTables */
.dt-buttons .dt-button-collection,
.dt-buttons .buttons-collection {
    background-color: #ffffff !important;
    color: var(--buttons-datatable-color) !important;
    border-color: #dee2e6 !important;
}

.dt-buttons .dt-button-collection:hover,
.dt-buttons .buttons-collection:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

/* Selectores más específicos para sobrescribir estilos de DataTables */
/* .dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .buttons-collection {
    background-color: #ffffff !important;
    color: var(--buttons-datatable-color) !important;
    border-color: #dee2e6 !important;
    background-image: none !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .buttons-collection:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    background-image: none !important;
} */
 .dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .buttons-collection {
    background-color: var(--btn-info-background) !important;
    color: var(--btn-info-color) !important;
    border-color: var(--btn-info-border-color-hover) !important;
    background-image: none !important;
}

.dataTables_wrapper .dt-buttons .dt-button:hover,
.dataTables_wrapper .dt-buttons .buttons-collection:hover {
    background-color: var(--btn-info-background-hover) !important;
    border-color: var(--btn-info-border-hover-color) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    background-image: none !important;
}


/* Mejorar el espaciado entre iconos y texto */
.dt-buttons .dt-button {
    gap: 4px !important;
    line-height: 1.2 !important;
}

/* ============================================
   ALINEACIÓN DE ICONOS EN BOTONES
   ============================================ */
.dt-button i,
.dt-buttons .dt-button i,
button.dt-button i,
.buttons-collection i,
.dt-custom-buttons i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    margin-top: 0 !important; /* Reset potential margins */
    margin-bottom: 0 !important;
    height: auto !important;
}

/* ESTILOS FINALES CON MÁXIMA PRIORIDAD */
/* * .dt-button,
* .dt-buttons .dt-button:not(.dt-custom-buttons),
* button.dt-button:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:not(.dt-custom-buttons),
* .dt-buttons button:not(.dt-custom-buttons),
* div.dt-buttons button:not(.dt-custom-buttons),
* div.dt-buttons .dt-button:not(.dt-custom-buttons),
* div.dt-button-collection button:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:not(.dt-custom-buttons),
* .buttons-collection:not(.dt-custom-buttons),
* .dt-button-collection,
* .dt-dropdown-menu,
* .colvis-restore,
* .dt-button-collection button:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:not(.dt-custom-buttons),
* div.dt-button-collection,
* div.dt-button-collection button:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:not(.dt-custom-buttons) {
    background-color: #ffffff !important;
    color: var(--buttons-datatable-color) !important;
    border-color: #dee2e6 !important;
    background-image: none !important;
    border: 1px solid #dee2e6 !important;
} */

/* Hover con máxima prioridad */
/* * .dt-button:hover:not(.dt-custom-buttons),
* .dt-buttons .dt-button:hover:not(.dt-custom-buttons),
* button.dt-button:hover:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:hover:not(.dt-custom-buttons),
* .dt-buttons button:hover:not(.dt-custom-buttons),
* div.dt-buttons button:hover:not(.dt-custom-buttons),
* div.dt-buttons .dt-button:hover:not(.dt-custom-buttons),
* div.dt-button-collection button:hover:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:hover:not(.dt-custom-buttons),
* .buttons-collection:hover:not(.dt-custom-buttons),
* .dt-button-collection:hover,
* .dt-dropdown-menu:hover,
* .colvis-restore:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
    background-image: none !important;
} */

* .dt-button,
* .dt-buttons .dt-button:not(.dt-custom-buttons),
* button.dt-button:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:not(.dt-custom-buttons),
* .dt-buttons button:not(.dt-custom-buttons),
* div.dt-buttons button:not(.dt-custom-buttons),
* div.dt-buttons .dt-button:not(.dt-custom-buttons),
* div.dt-button-collection button:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:not(.dt-custom-buttons),
* .buttons-collection:not(.dt-custom-buttons),
* .dt-button-collection,
* .dt-dropdown-menu,
* .colvis-restore,
* .dt-button-collection button:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:not(.dt-custom-buttons),
* div.dt-button-collection,
* div.dt-button-collection button:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:not(.dt-custom-buttons) {
    background-color: var(--btn-info-background) !important;
    color: var(--btn-info-color) !important;
    border-color: var(--btn-info-border-color) !important;
    background-image: none !important;
    border: 1px solid var(--btn-info-border-color) !important;
}

* .dt-button:hover:not(.dt-custom-buttons),
* .dt-buttons .dt-button:hover:not(.dt-custom-buttons),
* button.dt-button:hover:not(.dt-custom-buttons),
* .dt-button-collection .dt-button:hover:not(.dt-custom-buttons),
* .dt-buttons button:hover:not(.dt-custom-buttons),
* div.dt-buttons button:hover:not(.dt-custom-buttons),
* div.dt-buttons .dt-button:hover:not(.dt-custom-buttons),
* div.dt-button-collection button:hover:not(.dt-custom-buttons),
* div.dt-button-collection .dt-button:hover:not(.dt-custom-buttons),
* .buttons-collection:hover:not(.dt-custom-buttons),
* .dt-button-collection:hover,
* .dt-dropdown-menu:hover,
* .colvis-restore:hover {
	border: 1px solid var(--btn-info-border-color-hover) !important;
	background-color: var(--btn-info-background-hover) !important;
	color: var(--btn-info-color-hover) !important;
}

/*div columnas */
div.dt-button-collection.fixed.three-column {
    background-color: #ffffff !important;
    padding-bottom: 8px;
    border-radius: 4px;
    width: 55rem;
    margin-left: -27.5rem !important;
    gap: 1rem;
    padding: 1rem;
}
/* Cambiar fondo del menú de longitud de página */
div.dt-button-collection:not(.fixed):not(.three-column) {
    background-color: #f0f4ff !important; /* El color que prefieras */
    border-radius: 4px !important;
    padding-bottom: 8px;
}
/* OVERRIDE ESPECÍFICO PARA COMBATIR estilos.css */
html body div.dt-button-collection a.dt-button.buttons-columnVisibility,
html body div.dt-button-collection a.dt-button,
html body div.dt-button-collection button.dt-button,
html body div.dt-button-collection button,
html body .dt-button-collection a,
html body .dt-button-collection button {
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: var(--buttons-datatable-color) !important;
    border: 1px solid #dee2e6 !important;
    border-color: #dee2e6 !important;
    margin-bottom: 0.5rem !important;
}

html body div.dt-button-collection a.dt-button.buttons-columnVisibility:hover,
html body div.dt-button-collection a.dt-button:hover,
html body div.dt-button-collection button.dt-button:hover,
html body div.dt-button-collection button:hover,
html body .dt-button-collection a:hover,
html body .dt-button-collection button:hover {
    background: #f8f9fa !important;
    background-color: #f8f9fa !important;
    background-image: none !important;
    border-color: #adb5bd !important;
    margin-bottom: 0.5rem !important;
}

html body div.dt-button-collection a.dt-button.buttons-columnVisibility.active,
html body div.dt-button-collection a.dt-button.active,
html body div.dt-button-collection button.active,
html body div.dt-button-collection button[aria-pressed="true"] {
    background: #007bff !important;
    background-color: #007bff !important;
    background-image: none !important;
    color: white !important;
    border-color: #007bff !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================
   DROPDOWN DE COLUMNAS PERSONALIZADO
   ============================================ */

/* El dropdown ahora se crea dinámicamente con estilos inline */
/* Solo mantenemos estilos de respaldo si son necesarios */

.column-visibility-dropdown {
    position: absolute !important;
    z-index: 1000 !important;
}

/* Forzar que los checkboxes se vean como checkboxes normales, no como switches */
/* Usar mayor especificidad para sobrescribir checkbox.css */
.column-visibility-dropdown input[type="checkbox"].column-visibility-checkbox,
input[type="checkbox"].column-visibility-checkbox {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    min-height: 16px !important;
    max-height: 16px !important;
    border-radius: 3px !important;
    background: white !important;
    background-color: white !important;
    position: relative !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: none !important;
}

.column-visibility-dropdown input[type="checkbox"].column-visibility-checkbox::before,
input[type="checkbox"].column-visibility-checkbox::before {
    display: none !important;
    content: none !important;
}

.column-visibility-dropdown input[type="checkbox"].column-visibility-checkbox:checked,
input[type="checkbox"].column-visibility-checkbox:checked {
    background: #007bff !important;
    background-color: #007bff !important;
}

.column-visibility-dropdown input[type="checkbox"].column-visibility-checkbox:checked::before,
input[type="checkbox"].column-visibility-checkbox:checked::before {
    display: none !important;
    content: none !important;
    transform: none !important;
}

.column-visibility-dropdown input[type="checkbox"].column-visibility-checkbox:focus,
input[type="checkbox"].column-visibility-checkbox:focus {
    outline: 2px solid #007bff !important;
    outline-offset: 2px !important;
}
.partido_pendiente-2026{
	background-color: #EA0B0B !important;
	color: white;
}
.partido_finalizado-2026{
	background-color: #3DF59E !important;
	color: black;
}
.partido_sin_asignar-2026{
	background-color: #FFAA44 !important;
	color: black;
}
.partido_aplazado-2026{
	background-color: #3457FF !important;
	color: white;
}
.disponible-2026{
	color:#3DF59E !important;
}
.ocupado-2026{
	color:#EA0B0B !important;
}
.asignado-2026{
	color:#FFAA44 !important;
}
.viajar-2026{
    color:#3457FF !important;
}