/**
 * TEAK DataTables - Estilos Estandarizados para Botones
 * ======================================================
 * Estilos consistentes para todos los botones de exportación
 * Colores corporativos y formas unificadas
 */

/* ============================================
   BOTONES DE DATATABLES - CONTENEDOR
   ============================================ */
.dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ============================================
   ESTILOS BASE DE BOTONES
   ============================================ */
.dt-button,
.dt-buttons .btn,
div.dt-button-collection button.dt-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Espaciado */
    padding: 0.5rem 1rem;
    margin: 0;

    /* Tipografía */
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;

    /* Bordes */
    border: 1px solid transparent;
    border-radius: 0.375rem;

    /* Efectos */
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease-in-out;

    /* Eliminar estilos por defecto */
    background-image: none;
    box-shadow: none;
}

.dt-button:focus,
.dt-buttons .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(29, 151, 108, 0.25);
}

.dt-button:hover,
.dt-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dt-button:active,
.dt-buttons .btn:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   BOTONES POR TIPO - COLORES CORPORATIVOS
   ============================================ */

/* Botón COPIAR - Gris */
.dt-button.buttons-copy,
.dt-buttons .btn-copy,
button.dt-button[title*="Copiar"] {
    color: #374151;
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.dt-button.buttons-copy:hover,
.dt-buttons .btn-copy:hover {
    color: #1f2937;
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

/* Botón EXCEL - Verde */
.dt-button.buttons-excel,
.dt-button.buttons-excelHtml5,
.dt-buttons .btn-excel,
button.dt-button[title*="Excel"],
#btn-xlsx-all {
    color: #ffffff;
    background-color: #10b981;
    border-color: #10b981;
}

.dt-button.buttons-excel:hover,
.dt-button.buttons-excelHtml5:hover,
.dt-buttons .btn-excel:hover,
#btn-xlsx-all:hover {
    color: #ffffff;
    background-color: #059669;
    border-color: #047857;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Botón CSV - Azul claro */
.dt-button.buttons-csv,
.dt-button.buttons-csvHtml5,
.dt-buttons .btn-csv,
button.dt-button[title*="CSV"] {
    color: #ffffff;
    background-color: #3b82f6;
    border-color: #3b82f6;
}

.dt-button.buttons-csv:hover,
.dt-button.buttons-csvHtml5:hover,
.dt-buttons .btn-csv:hover {
    color: #ffffff;
    background-color: #2563eb;
    border-color: #1d4ed8;
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Botón PDF - Rojo corporativo */
.dt-button.buttons-pdf,
.dt-button.buttons-pdfHtml5,
.dt-buttons .btn-pdf,
button.dt-button[title*="PDF"],
#btn-pdf-all {
    color: #ffffff;
    background-color: #dc2626;
    border-color: #dc2626;
}

.dt-button.buttons-pdf:hover,
.dt-button.buttons-pdfHtml5:hover,
.dt-buttons .btn-pdf:hover,
#btn-pdf-all:hover {
    color: #ffffff;
    background-color: #b91c1c;
    border-color: #991b1b;
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

/* Botón IMPRIMIR - Oscuro */
.dt-button.buttons-print,
.dt-buttons .btn-print,
button.dt-button[title*="Imprimir"] {
    color: #ffffff;
    background-color: #1f2937;
    border-color: #1f2937;
}

.dt-button.buttons-print:hover,
.dt-buttons .btn-print:hover {
    color: #ffffff;
    background-color: #111827;
    border-color: #030712;
    box-shadow: 0 4px 8px rgba(31, 41, 55, 0.3);
}

/* Botón COLVIS (Column Visibility) - Índigo */
.dt-button.buttons-colvis,
.dt-buttons .btn-colvis {
    color: #ffffff;
    background-color: #6366f1;
    border-color: #6366f1;
}

.dt-button.buttons-colvis:hover,
.dt-buttons .btn-colvis:hover {
    color: #ffffff;
    background-color: #4f46e5;
    border-color: #4338ca;
}

/* ============================================
   ICONOS EN BOTONES (Bootstrap Icons)
   ============================================ */
.dt-button::before {
    font-family: 'bootstrap-icons' !important;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
}

/* Iconos específicos por tipo */
.dt-button.buttons-copy::before {
    content: "\f328"; /* bi-clipboard */
}

.dt-button.buttons-excel::before,
.dt-button.buttons-excelHtml5::before {
    content: "\f382"; /* bi-file-earmark-excel */
}

.dt-button.buttons-csv::before,
.dt-button.buttons-csvHtml5::before {
    content: "\f35f"; /* bi-filetype-csv */
}

.dt-button.buttons-pdf::before,
.dt-button.buttons-pdfHtml5::before {
    content: "\f37f"; /* bi-file-earmark-pdf */
}

.dt-button.buttons-print::before {
    content: "\f4c1"; /* bi-printer */
}

.dt-button.buttons-colvis::before {
    content: "\f35a"; /* bi-eye */
}

/* ============================================
   BOTONES DESHABILITADOS
   ============================================ */
.dt-button.disabled,
.dt-button:disabled,
.dt-buttons .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ============================================
   COLECCIÓN DE BOTONES (Dropdown)
   ============================================ */
div.dt-button-collection {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
}

div.dt-button-collection button.dt-button {
    width: 100%;
    margin: 0.125rem 0;
    justify-content: flex-start;
    border-radius: 0.25rem;
}

div.dt-button-collection button.dt-button:hover {
    background-color: #f3f4f6;
    transform: none;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */
@media (max-width: 640px) {
    .dt-buttons {
        width: 100%;
    }

    .dt-button,
    .dt-buttons .btn {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    .dt-button::before {
        font-size: 0.875rem;
    }
}

/* ============================================
   COMPATIBILIDAD CON BOOTSTRAP
   ============================================ */
/* Sobrescribir estilos de Bootstrap si es necesario */
.dt-buttons .btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
}

.dt-buttons .btn-success:hover {
    background-color: #059669 !important;
    border-color: #047857 !important;
}

.dt-buttons .btn-danger {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

.dt-buttons .btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #991b1b !important;
}

.dt-buttons .btn-info {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.dt-buttons .btn-info:hover {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

.dt-buttons .btn-dark {
    background-color: #1f2937 !important;
    border-color: #1f2937 !important;
}

.dt-buttons .btn-dark:hover {
    background-color: #111827 !important;
    border-color: #030712 !important;
}

.dt-buttons .btn-secondary {
    background-color: #6b7280 !important;
    border-color: #6b7280 !important;
}

.dt-buttons .btn-secondary:hover {
    background-color: #4b5563 !important;
    border-color: #374151 !important;
}

/* ============================================
   ESPACIADO DEL CONTENEDOR
   ============================================ */
.dt-buttons {
    margin-bottom: 1rem;
}

/* Cuando los botones están dentro de una card */
.card-body .dt-buttons {
    margin-bottom: 0.75rem;
}

/* ============================================
   ALINEACIÓN Y LAYOUT
   ============================================ */
.dt-buttons-right {
    justify-content: flex-end;
}

.dt-buttons-center {
    justify-content: center;
}

.dt-buttons-left {
    justify-content: flex-start;
}

/* ============================================
   LOADING STATE (opcional)
   ============================================ */
.dt-button.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.dt-button.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid #ffffff;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

/* ============================================
   TAMAÑOS ALTERNATIVOS
   ============================================ */
.dt-buttons-sm .dt-button {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.dt-buttons-lg .dt-button {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

/* ============================================
   TOOLTIPS (si usas Tippy.js o similar)
   ============================================ */
.dt-button[data-tippy-content] {
    cursor: help;
}