/* DataTables Responsive - Estilos personalizados para móvil */

/* Mejoras generales para móvil */
@media screen and (max-width: 767px) {
    /* Reducir padding en celdas para ahorrar espacio */
    table.dataTable tbody td {
        padding: 6px 4px;
        font-size: 12px;
    }

    table.dataTable thead th {
        padding: 8px 4px;
        font-size: 11px;
    }

    /* Mejorar botones de paginación en móvil */
    .dataTables_paginate .paginate_button {
        padding: 0.3em 0.6em;
        margin: 0 2px;
        font-size: 12px;
    }

    /* Ajustar controles de DataTables */
    .dataTables_length,
    .dataTables_filter {
        margin-bottom: 10px;
    }

    .dataTables_length select {
        width: auto;
        min-width: 60px;
    }

    .dataTables_filter input {
        width: 100%;
        max-width: 200px;
    }

    /* Mejorar la visualización de detalles responsive */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
        background: #685bc7;
        color: white;
        font-weight: bold;
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
        background: #28a745;
    }

    /* Estilos para filas de detalles expandidas */
    table.dataTable > tbody > tr.child {
        background: #f8f9fa;
    }

    table.dataTable > tbody > tr.child ul.dtr-details {
        width: 100%;
        padding-left: 0;
    }

    table.dataTable > tbody > tr.child ul.dtr-details li {
        border-bottom: 1px solid #dee2e6;
        padding: 8px 0;
        word-break: break-word;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        font-weight: bold;
        color: #685bc7;
        display: inline-block;
        min-width: 80px;
    }

    table.dataTable > tbody > tr.child span.dtr-data {
        margin-left: 10px;
    }
}

/* Mejoras para tablets */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    table.dataTable tbody td {
        padding: 8px 6px;
        font-size: 13px;
    }

    table.dataTable thead th {
        padding: 10px 6px;
        font-size: 12px;
    }
}

/* Ocultar columnas específicas en pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    /* Para todas las DataTables, asegurar que el botón responsive sea visible */
    td.dtr-control {
        width: 30px !important;
        text-align: center;
    }

    /* Ajustar info de DataTables */
    .dataTables_info {
        font-size: 11px;
        margin-bottom: 10px;
    }

    /* Simplificar paginación en pantallas muy pequeñas */
    .dataTables_paginate .paginate_button {
        display: none;
    }

    .dataTables_paginate .paginate_button.current,
    .dataTables_paginate .paginate_button.previous,
    .dataTables_paginate .paginate_button.next {
        display: inline-block;
    }
}

/* Estilos para botones de acción en móvil */
@media screen and (max-width: 767px) {
    .btn-group .btn {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        margin: 1px;
    }

    .btn-group .btn i {
        font-size: 12px;
    }

    /* Hacer que los grupos de botones se ajusten mejor */
    .btn-group {
        flex-wrap: wrap;
        gap: 2px;
    }
}

/* Loading spinner personalizado para móvil */
.dataTables_processing {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #685bc7 !important;
    border-radius: 4px !important;
    color: #685bc7 !important;
    font-weight: bold !important;
}

/* Mejorar contraste en modo oscuro si es necesario */
@media (prefers-color-scheme: dark) {
    table.dataTable > tbody > tr.child {
        background: #343a40;
        color: white;
    }

    table.dataTable > tbody > tr.child ul.dtr-details li {
        border-bottom-color: #495057;
    }

    table.dataTable > tbody > tr.child span.dtr-title {
        color: #ffc107;
    }
}

/* Animaciones suaves para expandir/colapsar */
table.dataTable > tbody > tr.child {
    animation: slideDown 0.3s ease;
}

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

/* Mejorar la visualización de badges en móvil */
@media screen and (max-width: 767px) {
    .badge {
        font-size: 0.7em;
        padding: 0.2em 0.4em;
    }

    .badge-success,
    .badge-warning,
    .badge-danger,
    .badge-primary,
    .badge-secondary {
        white-space: nowrap;
    }
}