/* ═══════════════════════════════════════════════════════════════
   gtk-admin.css — GTK HablaIP · Pantallas de administración

   Tabla de agentes y clientes: celda de identidad, contacto agrupado,
   acciones discretas y filtros por rol. Incluye los avatares, que se
   usaban en el HTML pero no estaban definidos en ninguna hoja.
   ═══════════════════════════════════════════════════════════════ */

/* ── Avatares ────────────────────────────────────────────────── */
.avatar-circle,
.avatar-initials {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bs-card-bg, #fff), 0 0 0 3px var(--gtk-border, rgba(0, 0, 0, .08));
}

/* ── Celda de identidad: avatar + nombre + código ────────────── */
.adm-ident {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}

.adm-ident-txt {
    min-width: 0;
}

.adm-ident-nom {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.3;
    color: var(--bs-body-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-ident-cod {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .68rem;
    color: var(--bs-secondary-color);
    letter-spacing: .01em;
}

/* ── Celda de contacto: correo arriba, teléfono abajo ────────── */
.adm-contacto {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .8rem;
    min-width: 0;
}

.adm-contacto a {
    color: var(--bs-body-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-contacto a:hover {
    color: var(--gtk-primary, #696cff);
    text-decoration: underline;
}

.adm-contacto .ti {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    flex-shrink: 0;
}

.adm-contacto .adm-tel {
    color: var(--bs-secondary-color);
    font-size: .76rem;
}

.adm-vacio {
    color: var(--bs-secondary-color);
    opacity: .6;
}

/* ── Acciones discretas ──────────────────────────────────────────
   Antes eran cuatro botones con contorno de cuatro colores distintos,
   que competían con los datos. Ahora son neutros y solo toman color
   al pasar el cursor. */
.adm-acciones {
    display: flex;
    gap: .1rem;
    justify-content: flex-end;
}

.adm-acc {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: var(--gtk-radius-sm, 7px);
    color: var(--bs-secondary-color);
    transition: background var(--gtk-dur, .16s) var(--gtk-ease, ease),
                color var(--gtk-dur, .16s) var(--gtk-ease, ease);
    padding: 0;
}

.adm-acc:hover {
    background: rgba(var(--gtk-rgb, 105, 108, 255), .1);
    color: var(--gtk-primary, #696cff);
}

.adm-acc.adm-acc-peligro:hover {
    background: rgba(255, 68, 68, .1);
    color: var(--gtk-prio-alta, #ff4444);
}

/* ── Filas ───────────────────────────────────────────────────── */
#TablaAgentes > tbody > tr,
#TablaClientes > tbody > tr {
    transition: background var(--gtk-dur, .16s) var(--gtk-ease, ease);
}

#TablaAgentes > tbody > tr:hover,
#TablaClientes > tbody > tr:hover {
    background: rgba(var(--gtk-rgb, 105, 108, 255), .04);
}

#TablaAgentes > tbody > tr > td,
#TablaClientes > tbody > tr > td {
    vertical-align: middle;
    padding-top: .55rem;
    padding-bottom: .55rem;
}

/* ── Chips de filtro por rol ─────────────────────────────────────
   Sustituyen al desplegable: los filtros quedan a la vista y cada uno
   muestra cuántos agentes tiene. Mismo lenguaje que el panel de tickets. */
.adm-filtros {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.adm-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border-radius: 20px;
    border: 1.5px solid var(--gtk-border-mid, rgba(0, 0, 0, .11));
    background: transparent;
    color: var(--bs-secondary-color);
    font-size: .74rem;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--gtk-dur, .16s) var(--gtk-ease, ease);
}

.adm-chip:hover {
    border-color: rgba(var(--gtk-rgb, 105, 108, 255), .5);
    color: var(--gtk-primary, #696cff);
    background: rgba(var(--gtk-rgb, 105, 108, 255), .05);
}

.adm-chip.activo {
    background: var(--gtk-primary, #696cff);
    border-color: var(--gtk-primary, #696cff);
    color: #fff;
}

.adm-chip-n {
    font-variant-numeric: tabular-nums;
    font-size: .68rem;
    padding: 0 .35rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, .07);
    min-width: 1.35rem;
    text-align: center;
}

.adm-chip.activo .adm-chip-n {
    background: rgba(255, 255, 255, .25);
}

html.dark-style .adm-chip-n {
    background: rgba(255, 255, 255, .1);
}

/* Chips que se quedan sin registros: visibles pero apagados. */
.adm-chip.vacio {
    opacity: .45;
}

/* ── Estado vacío de la tabla ────────────────────────────────── */
.adm-sin-datos {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--bs-secondary-color);
}

.adm-sin-datos .ti {
    font-size: 2.2rem;
    opacity: .35;
    display: block;
    margin-bottom: .5rem;
}

@media (max-width: 767.98px) {
    .adm-ident-nom { white-space: normal; }
    .adm-acciones  { justify-content: flex-start; }
}