/* ============================================================================
 * admin.css — el panel de administración de la plataforma.
 *
 * Solo variables del tema (style.css): así el tema claro y el oscuro salen sin reglas propias.
 * Botones y campos de al menos 44 px de alto. El estado de una cuenta va con icono y texto, nunca
 * solo con color.
 * ========================================================================== */

/* La entrada de la barra lateral, abierta: barra a la izquierda además del color */
.sidebar-footer-btn.active {
    background: var(--secondary-hover);
    border-left: 3px solid var(--primary-color);
}
.sidebar-footer-btn.active i { color: var(--text-accent); }

.adm {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
}

.adm-cabecera { margin-bottom: 1rem; }
.adm-titulo {
    margin: 0 0 0.3rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 700;
}
.adm-titulo:focus { outline: none; }
.adm-titulo:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 4px; }
.adm-sub { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.adm-pestanas { margin-bottom: 0.5rem; }
.adm-estado { min-height: 1.2rem; margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.adm-cargando, .adm-vacio { color: var(--text-muted); }
.adm-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--danger-color);
    border-radius: var(--border-radius-sm);
}

/* ---- Resumen ---- */

.adm-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}
.adm-cifra {
    padding: 1rem;
    background: rgba(var(--shade), 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
}
.adm-cifra dt { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.adm-cifra dd { margin: 0.3rem 0 0; font-size: 1.6rem; font-weight: 700; }

/* ---- Filtros ---- */

.adm-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.adm-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.adm-campo-buscar { flex: 1 1 18rem; }
.adm-campo label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.adm-campo input,
.adm-campo select {
    min-height: 2.75rem;
    padding: 0 0.7rem;
    max-width: 100%;
    box-sizing: border-box;
    background: rgba(var(--shade), 0.25);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
}
.adm-campo input:focus-visible,
.adm-campo select:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 1px; }

/* ---- Tablas ---- */

/* La tabla se desplaza dentro de su caja: a 320 px la página no gana scroll horizontal. */
.adm-tabla-caja { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: var(--border-radius-sm); }
.adm-tabla { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.adm-tabla th, .adm-tabla td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--glass-border);
}
.adm-tabla thead th { font-size: 0.78rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; }
.adm-tabla tbody tr:last-child th, .adm-tabla tbody tr:last-child td { border-bottom: none; }
.adm-cuenta { font-weight: 400; min-width: 12rem; }
.adm-nombre { display: block; font-weight: 600; }
.adm-correo { display: block; color: var(--text-muted); font-size: 0.8rem; word-break: break-all; }

.adm-estado-cuenta { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.adm-estado-activo i { color: var(--success-color); }
.adm-estado-suspendido { font-weight: 700; }
.adm-estado-suspendido i { color: var(--danger-color); }

.adm-gestionar { min-height: 2.75rem; white-space: nowrap; }
.adm-gestionar:focus-visible,
.adm-paginacion button:focus-visible,
.adm-acciones button:focus-visible,
.adm-modal-pie button:focus-visible { outline: 2px solid var(--text-accent); outline-offset: 2px; }

.adm-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: 0.86rem;
}
.adm-paginacion button { min-height: 2.75rem; }
.adm-paginacion button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Ficha de una cuenta ---- */

.adm-modal-caja {
    width: auto;
    max-width: 32rem;
    height: auto;
    max-height: 85vh;
    overflow-y: auto;
    display: block;
    padding: 1.5rem;
}
.adm-modal-titulo { margin: 0 0 1rem; font-size: 1.15rem; word-break: break-word; }
.adm-ficha { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.adm-ficha div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.adm-ficha dt { min-width: 7rem; color: var(--text-muted); font-size: 0.85rem; }
.adm-ficha dd { margin: 0; font-size: 0.9rem; word-break: break-all; }
.adm-nota { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 1rem; }
.adm-acciones { display: flex; flex-direction: column; gap: 0.5rem; }
.adm-acciones button {
    width: 100%;
    min-height: 2.75rem;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
    text-align: left;
}
.adm-modal-pie { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.adm-modal-pie button { min-height: 2.75rem; }