/* ════════════════════════════════════════════════════════════
   tabla-servicios.css — Directorio de servicios con DataTables.
   Encabezado institucional oscuro y filas alternas, para que la
   tabla resalte sobre el fondo claro del portal.
   ════════════════════════════════════════════════════════════ */

/* ── Encabezado ──────────────────────────────────────────────── */
table.tabla-servicios {
    border-collapse: separate;
    border-spacing: 0;
}

table.tabla-servicios thead th {
    padding: .85rem .875rem;
    background: var(--c-blue-800);
    color: var(--c-white);
    border-bottom: 3px solid var(--c-yellow);
    white-space: nowrap;
}

table.tabla-servicios thead th:first-child { border-radius: var(--r-xs) 0 0 0; }
table.tabla-servicios thead th:last-child  { border-radius: 0 var(--r-xs) 0 0; }

table.tabla-servicios thead th.dt-orderable-asc:hover,
table.tabla-servicios thead th.dt-orderable-desc:hover,
table.tabla-servicios thead th.dt-ordering-asc,
table.tabla-servicios thead th.dt-ordering-desc {
    background: var(--c-blue-900);
    outline: none;
}

table.tabla-servicios thead th.dt-ordering-asc,
table.tabla-servicios thead th.dt-ordering-desc {
    color: var(--c-yellow);
}

table.tabla-servicios thead th:focus-visible {
    outline: 3px solid var(--c-yellow);
    outline-offset: -3px;
}

/* Flechas de orden legibles sobre el fondo oscuro */
table.dataTable.tabla-servicios thead > tr > th span.dt-column-order::before,
table.dataTable.tabla-servicios thead > tr > th span.dt-column-order::after {
    color: var(--c-white);
    opacity: .6;
}

table.dataTable.tabla-servicios thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable.tabla-servicios thead > tr > th.dt-ordering-desc span.dt-column-order::after {
    color: var(--c-yellow);
    opacity: 1;
}

/* ── Filas ───────────────────────────────────────────────────── */
table.tabla-servicios .app-table__name {
    color: var(--c-blue-800);
    font-weight: 700;
}

table.tabla-servicios tbody tr:nth-child(even) {
    background: var(--c-page);
}

table.tabla-servicios tbody tr:hover {
    background: var(--c-blue-050);
}

@media (min-width: 769px) {
    table.tabla-servicios { min-width: 720px; }

    table.tabla-servicios tbody th,
    table.tabla-servicios tbody td {
        border-bottom: 1px solid var(--c-line);
    }
}

/* Móvil: las filas son tarjetas (portal.css) y el encabezado queda como barra
   de botones de orden, porque sin él no habría cómo ordenar. */
@media (max-width: 768px) {
    table.tabla-servicios thead {
        display: block;
        margin-bottom: .75rem;
    }

    table.tabla-servicios thead tr {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        border-radius: var(--r-xs);
    }

    table.tabla-servicios thead th {
        display: block;
        flex: 1 1 auto;
        width: auto;
        padding: .7rem .6rem;
        border-radius: 0;
        font-size: .7rem;
    }

    table.tabla-servicios thead th:last-child { display: none; }
}

/* ── Controles: filas por página, resumen y páginas ─────────── */
.table-wrap div.dt-container {
    font-size: .86rem;
    color: var(--c-ink-500);
}

.table-wrap div.dt-container div.dt-layout-row {
    align-items: center;
    gap: .75rem 1rem;
    margin: 1rem 0 0;
}

.table-wrap div.dt-container div.dt-layout-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: 0;
}

.table-wrap div.dt-container .dt-info {
    padding: 0;
}

.table-wrap div.dt-container .dt-length label {
    margin: 0 .35rem;
}

.table-wrap div.dt-container .dt-length select {
    min-height: 36px;
    padding: .2rem .4rem;
    border: 1px solid var(--c-blue-800);
    border-radius: var(--r-xs);
    background: var(--c-white);
    color: var(--c-blue-900);
    font-weight: 700;
    cursor: pointer;
}

.table-wrap div.dt-container .dt-paging .dt-paging-button {
    min-width: 36px;
    min-height: 36px;
    margin: 0 .1rem;
    padding: .3rem .55rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-xs);
    background: var(--c-white);
    color: var(--c-blue-800) !important;
    font-weight: 700;
    cursor: pointer;
}

.table-wrap div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    border-color: var(--c-blue-800);
    background: var(--c-blue-050);
    color: var(--c-blue-900) !important;
}

.table-wrap div.dt-container .dt-paging .dt-paging-button.current,
.table-wrap div.dt-container .dt-paging .dt-paging-button.current:hover {
    border-color: var(--c-blue-800);
    background: var(--c-blue-800);
    color: var(--c-white) !important;
}

.table-wrap div.dt-container .dt-paging .dt-paging-button.disabled,
.table-wrap div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    background: var(--c-page);
    color: var(--c-ink-500) !important;
    opacity: .6;
    cursor: default;
}

.table-wrap div.dt-container .dt-paging .dt-paging-button:focus-visible,
.table-wrap div.dt-container .dt-length select:focus-visible {
    outline: 3px solid var(--c-yellow);
    outline-offset: 1px;
}