/* ================================================================
   assets/css/datatables-theme.css — MAE Web
   Tema personalizado para DataTables 2.x
   Basado en el design system del proyecto.
   ================================================================ */

/* ── Alineado con tokens MAE (app.css) ──────────────────────────── */
:root {
    --dt-primary:    #368ee0;
    --dt-text:       #1a1d24;
    --dt-muted:      #5c6470;
    --dt-border:     #dce1ea;
    --dt-bg:         #e8ebf0;
    --dt-bg-white:   #ffffff;
    --dt-radius:     8px;
    --dt-font:       'Titillium Web', 'Segoe UI', system-ui, sans-serif;
    --dt-font-mono:  'Consolas', 'Courier New', monospace;
}

/* ── Reset de estilos por defecto de DataTables ─────────────────── */
table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
    font-size: .85rem;
    font-family: var(--dt-font);
    background: var(--dt-bg-white);
}

/* ── Cabecera de la tabla ───────────────────────────────────────── */
table.dataTable thead tr {
    border-bottom: 2px solid #c8d8e8;
}

table.dataTable thead th,
table.dataTable thead td {
    background: #eaf0f8;
    color: var(--dt-text);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .6rem .9rem;
    border: none;
    border-bottom: 2px solid #c8d8e8;
    border-right: 1px solid #dde5ef;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    user-select: none;
}

table.dataTable thead th:last-child,
table.dataTable thead td:last-child {
    border-right: none;
}

/* ── Indicadores de ordenamiento ────────────────────────────────── */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.sorting_asc_disabled,
table.dataTable thead th.sorting_desc_disabled {
    cursor: pointer;
    padding-right: 1.75rem;
    background-image: none !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    content: '';
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
}

table.dataTable thead th.sorting::after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid rgba(0,0,0,.2);
    box-shadow: 0 5px 0 rgba(0,0,0,.2);
}

table.dataTable thead th.sorting_asc::after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid var(--dt-primary);
    box-shadow: none;
}

table.dataTable thead th.sorting_desc::after {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid var(--dt-primary);
    top: calc(50% + 2px);
    box-shadow: none;
}

table.dataTable thead th.sorting:hover { background: #dce8f4; }
table.dataTable thead th.sorting_asc   { background: #dce8f4; }
table.dataTable thead th.sorting_desc  { background: #dce8f4; }

/* ── Cuerpo de la tabla ─────────────────────────────────────────── */
table.dataTable tbody tr {
    transition: background .1s;
}

table.dataTable tbody td {
    padding: .48rem .9rem;
    border: none;
    border-bottom: 1px solid #eef0f4;
    vertical-align: middle;
    font-size: .85rem;
    color: var(--dt-text);
    line-height: 1.4;
}

table.dataTable tbody tr:last-child td {
    border-bottom: none;
}

/* Filas alternadas */
table.dataTable.display tbody tr.odd td,
table.dataTable.stripe  tbody tr.odd td { background: #ffffff; }

table.dataTable.display tbody tr.even td,
table.dataTable.stripe  tbody tr.even td { background: #f9fafb; }

/* Hover */
table.dataTable.display tbody tr:hover td,
table.dataTable.stripe  tbody tr:hover td,
table.dataTable.hover   tbody tr:hover td,
table.dataTable.display tbody tr.odd:hover td,
table.dataTable.display tbody tr.even:hover td {
    background: rgba(51, 122, 183, .06) !important;
    cursor: pointer;
}

/* Celda vacía */
table.dataTable td.dataTables_empty {
    text-align: center;
    color: var(--dt-muted);
    padding: 3rem !important;
    font-size: .9rem;
}

/* ── Wrapper principal ──────────────────────────────────────────── */
.dataTables_wrapper {
    font-size: .875rem;
    font-family: var(--dt-font);
    position: relative;
}

/* ── Fila superior: largo + búsqueda ────────────────────────────── */
.dt-controls,
.dataTables_wrapper > .dataTables_length,
.dataTables_wrapper > .dataTables_filter {
    padding: .7rem 1rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--dt-border);
}

.dt-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.dataTables_length label,
.dt-length label {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--dt-muted);
    font-size: .85rem;
    margin: 0;
    white-space: nowrap;
}

.dataTables_length select,
.dt-length select {
    padding: .28rem .55rem;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    color: var(--dt-text);
    background: var(--dt-bg-white);
    font-size: .85rem;
    font-family: var(--dt-font);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    appearance: auto;
}

.dataTables_length select:focus,
.dt-length select:focus {
    outline: none;
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 3px rgba(51,122,183,.15);
}

.dataTables_filter,
.dt-filter {
    display: flex;
    align-items: center;
}

.dataTables_filter label,
.dt-filter label {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--dt-muted);
    font-size: .85rem;
    margin: 0;
}

.dataTables_filter input[type="search"],
.dataTables_filter input[type="text"],
.dt-filter input {
    border: 1px solid var(--dt-border);
    border-radius: 20px;
    padding: .32rem .75rem .32rem 2rem;
    font-size: .85rem;
    font-family: var(--dt-font);
    color: var(--dt-text);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23999' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
        no-repeat .62rem center,
        var(--dt-bg-white);
    width: 210px;
    transition: border-color .15s, box-shadow .15s, width .2s;
    outline: none;
}

.dataTables_filter input:focus,
.dt-filter input:focus {
    border-color: var(--dt-primary);
    box-shadow: 0 0 0 3px rgba(51,122,183,.15);
    width: 270px;
}

/* ── Indicador de procesamiento ─────────────────────────────────── */
.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.95);
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    padding: .75rem 1.5rem .75rem 1rem;
    font-size: .85rem;
    color: var(--dt-muted);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .65rem;
    white-space: nowrap;
    pointer-events: none;
    margin: 0 !important;
    width: auto !important;
    border-top: none !important;
}

.dataTables_processing::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--dt-primary);
    border-radius: 50%;
    flex-shrink: 0;
    animation: dt-spin .65s linear infinite;
}

@keyframes dt-spin { to { transform: rotate(360deg); } }

/* ── Fila inferior: info + paginación ───────────────────────────── */
.dt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--dt-border);
    background: #f8fafc;
    flex-wrap: wrap;
    gap: .5rem;
}

.dataTables_info,
.dt-info {
    font-size: .85rem;
    color: var(--dt-muted);
    padding: .65rem 1rem;
    white-space: nowrap;
}

/* ── Paginación ─────────────────────────────────────────────────── */
.dataTables_paginate,
.dt-pages {
    display: flex;
    align-items: center;
    gap: .2rem;
    flex-wrap: wrap;
    padding: .5rem 1rem;
}

/* DT 2.x: .dt-paging-button */
.dt-paging .dt-paging-button {
    -webkit-appearance: none;
    appearance: none;
}

.dt-paging .dt-paging-button,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 .6rem;
    margin-left: 2px;
    border: 1px solid var(--dt-border) !important;
    border-radius: var(--dt-radius);
    background: var(--dt-bg-white) !important;
    color: var(--dt-text) !important;
    font-size: .85rem;
    font-weight: 500;
    font-family: var(--dt-font);
    cursor: pointer;
    text-decoration: none !important;
    transition: all .15s;
    line-height: 1;
    box-sizing: border-box;
    outline: none;
}

.dt-paging .dt-paging-button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #eaf0f8 !important;
    border-color: var(--dt-primary) !important;
    color: var(--dt-primary) !important;
    text-decoration: none !important;
}

.dt-paging .dt-paging-button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--dt-primary) !important;
    border-color: var(--dt-primary) !important;
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
}

.dt-paging .dt-paging-button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #2a6496 !important;
    border-color: #2a6496 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.dt-paging .dt-paging-button.disabled,
.dt-paging .dt-paging-button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    cursor: not-allowed;
    opacity: .38;
    background: var(--dt-bg) !important;
    color: var(--dt-muted) !important;
    border-color: var(--dt-border) !important;
}

.dt-paging .ellipsis,
.dataTables_paginate .ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--dt-muted);
    font-size: .85rem;
    cursor: default;
    user-select: none;
}

/* ── Botones de acción en tablas ────────────────────────────────── */
table.dataTable .btn { font-size: .78rem; padding: .2rem .5rem; }
table.dataTable .btn + .btn { margin-left: .2rem; }

/* ── Columnas numéricas ─────────────────────────────────────────── */
table.dataTable td.text-right,
table.dataTable td.dt-right { text-align: right; font-family: var(--dt-font-mono); }

table.dataTable td.text-center,
table.dataTable td.dt-center { text-align: center; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .dt-controls {
        flex-direction: column;
        align-items: stretch;
        padding: .6rem .75rem;
    }

    .dataTables_filter input[type="search"],
    .dataTables_filter input[type="text"],
    .dt-filter input {
        width: 100% !important;
    }

    .dt-footer {
        flex-direction: column;
        align-items: center;
        padding: .5rem .75rem;
    }

    .dataTables_paginate,
    .dt-pages {
        overflow-x: auto;
        width: 100%;
        justify-content: center;
    }

    table.dataTable thead th,
    table.dataTable thead td { font-size: .72rem; padding: .5rem .55rem; }

    table.dataTable tbody td { font-size: 1.1rem; padding: .42rem .55rem; }
}