/* Listados administrativos de Roles y Usuarios. Esta hoja se carga después de app.css. */
.listing-panel { min-width: 0; }
.listing-surface {
    container-type: inline-size;
    background: var(--color-surface-raised);
    border: var(--border-strong);
    box-shadow: var(--shadow-surface);
}

.data-table-wrap { scrollbar-color: var(--color-input-border) transparent; }
.listing-surface--roles .data-table { min-width: 34rem; }
.listing-surface--users .data-table { min-width: 55rem; }

.listing-surface .data-table { table-layout: auto; }
.listing-surface .data-table thead th {
    background: var(--color-surface-subtle);
    border-bottom: var(--border-strong);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    letter-spacing: .08em;
    padding-block: var(--space-3);
}

.listing-surface .data-table th,
.listing-surface .data-table td { padding-inline: var(--space-5); }

.listing-surface .data-table tbody td {
    border-bottom: var(--border-strong);
    color: var(--color-text-muted);
    line-height: 1.45;
    padding-block: var(--space-3);
    vertical-align: middle;
}

.listing-surface .data-table tbody tr:nth-child(even) { background: var(--surface-glass-low); }
.listing-surface .data-table tbody tr:hover { background: var(--color-info-surface); }
.listing-surface .data-table tbody tr:focus-within { background: var(--color-info-surface); }

.listing-surface .table-primary {
    color: var(--color-text);
    font-weight: 750;
    white-space: normal;
}

.listing-surface .table-secondary {
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
    white-space: normal;
}

.listing-surface--users .user-cell { align-items: center; display: flex; gap: var(--space-3); min-width: 16rem; }
.user-cell__avatar { align-items: center; background: var(--color-info-surface); border-radius: var(--radius-pill); color: var(--color-accent); display: inline-flex; flex: 0 0 auto; font-size: var(--font-size-xs); font-weight: 750; height: 2.25rem; justify-content: center; width: 2.25rem; }
.user-cell__identity { display: grid; gap: var(--space-1); min-width: 0; }
.user-cell__identity .table-secondary { font-size: var(--font-size-xs); line-height: 1.2; }
.table-role { background: var(--color-info-surface); border-radius: var(--radius-pill); color: var(--color-accent); display: inline-block; font-size: var(--font-size-xs); font-weight: 700; max-width: 18rem; overflow: hidden; padding: var(--space-1) var(--space-3); text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; }

.listing-surface .table-actions { width: 1%; }
.listing-surface .table-actions__button {
    background: var(--surface-glass-high);
    border: var(--border-strong);
    box-shadow: var(--shadow-xs);
    color: var(--color-accent);
    min-height: 2.25rem;
    padding-inline: var(--space-3);
    white-space: nowrap;
}

.listing-surface .table-actions__button:hover:not(:disabled) {
    background: var(--color-info-surface);
    border-color: var(--color-accent);
}

.listing-empty {
    align-items: center;
    display: grid;
    justify-items: center;
    min-height: 15rem;
    padding: var(--space-8) var(--space-5);
    text-align: center;
}

.listing-empty::before {
    background: var(--color-info-surface);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-card);
    color: var(--color-accent);
    content: "⌕";
    display: grid;
    font-size: var(--font-size-2xl);
    height: 3.5rem;
    line-height: 1;
    margin-bottom: var(--space-3);
    place-items: center;
    width: 3.5rem;
}

.listing-empty p {
    color: var(--color-text-muted);
    margin: 0;
    max-width: 28rem;
}

.listing-surface .pagination { background: var(--color-surface-subtle); border-top: var(--border-strong); }
.listing-surface .pagination__controls { align-items: center; flex-wrap: wrap; }
.listing-surface .pagination__button {
    background: var(--surface-glass-high);
    border: var(--border-strong);
    border-radius: var(--radius-control);
    min-height: 2.25rem;
}
.listing-surface .pagination__button:hover:not(:disabled) { border-color: var(--color-accent); }
.listing-surface .pagination__button--active,
.listing-surface .pagination__button--active:hover:not(:disabled) {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-brand);
}

@container (max-width: 44rem) {
    .data-table-wrap { overflow-x: visible; }
    .listing-surface .data-table,
    .listing-surface--roles .data-table,
    .listing-surface--users .data-table { display: block; min-width: 0; width: 100%; }
    .listing-surface .data-table thead {
        clip: rect(0, 0, 0, 0);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    .listing-surface .data-table tbody {
        display: grid;
        gap: var(--space-3);
        padding: var(--space-4);
    }
    .listing-surface .data-table tbody tr,
    .listing-surface .data-table tbody tr:nth-child(even) {
        background: var(--color-surface-subtle);
        border: var(--border-strong);
        border-radius: var(--radius-control);
        box-shadow: var(--shadow-xs);
        display: grid;
        min-width: 0;
        overflow: hidden;
    }
    .listing-surface .data-table tbody tr:hover,
    .listing-surface .data-table tbody tr:focus-within { background: var(--color-info-surface); }
    .listing-surface .data-table tbody td,
    .listing-surface .data-table tbody tr:last-child td {
        align-items: baseline;
        border-bottom: var(--border-subtle);
        display: flex;
        gap: var(--space-3);
        justify-content: space-between;
        min-width: 0;
        padding: var(--space-2) var(--space-4);
        text-align: right;
        white-space: normal;
    }
    .listing-surface .data-table tbody td:first-child { padding-top: var(--space-4); }
    .listing-surface .data-table tbody td:last-child { border-bottom: 0; padding-bottom: var(--space-4); }
    .listing-surface .data-table tbody td::before {
        color: var(--color-text-muted);
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--font-size-xs);
        font-weight: 750;
        letter-spacing: .045em;
        text-align: left;
        text-transform: uppercase;
    }
    .listing-surface--users .data-table tbody td.user-cell-container { display: block; text-align: left; }
    .listing-surface--users .data-table tbody td.user-cell-container::before { display: none; }
    .listing-surface--users .user-cell__identity { flex: 1 1 auto; }
    .listing-surface .table-role { max-width: 100%; white-space: normal; }
    .listing-surface .data-table .table-actions { width: auto; }
    .listing-surface .data-table .table-actions:empty { display: none; }
}

@container (max-width: 25rem) {
    .listing-surface .data-table tbody td { align-items: flex-start; flex-direction: column; gap: var(--space-1); text-align: left; }
    .listing-surface .data-table .table-actions { align-items: stretch; }
}