/* Hubs de configuracion (Configuracion Copropiedad + Residentes): cabecera + tabs segmentados.
   Global (antes vivia inline en ConfiguracionCopropiedad.razor y no cargaba en /residentes-hub). */

.cfg-head { margin-bottom: 16px; }
.cfg-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--propia-text-h1); margin: 0; }
.cfg-sub { font-size: 13.5px; color: var(--propia-text-muted); margin: 4px 0 0; }

/* Control segmentado (pill) - mismo lenguaje que el toggle Tarjetas/Tabla */
.cfg-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 3px;
    background: var(--propia-bg-app);
    border: 1px solid var(--propia-border-card);
    border-radius: 12px;
    padding: 4px;
    margin: 0 0 18px;
    max-width: 100%;
}
.cfg-tab {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 0; cursor: pointer;
    padding: 8px 15px; font-size: 13px; font-weight: 600;
    color: var(--propia-text-secondary);
    border-radius: 9px; font-family: inherit; white-space: nowrap;
    transition: background .14s, color .14s, box-shadow .14s;
}
.cfg-tab i { font-size: 15px; opacity: .9; }
.cfg-tab:hover { color: var(--propia-text-body); background: var(--propia-bg-hover); }
.cfg-tab.on {
    background: var(--propia-bg-card);
    color: var(--propia-brand, var(--propia-primary));
    box-shadow: 0 1px 3px rgba(27, 42, 58, .12);
}
.cfg-tab.on i { opacity: 1; }

[data-bs-theme="dark"] .cfg-tabs { background: var(--propia-bg-card-soft); border-color: var(--propia-border-card); }
[data-bs-theme="dark"] .cfg-tab.on { background: var(--propia-bg-card); }

@media (max-width: 640px) {
    .cfg-tabs { display: flex; overflow-x: auto; flex-wrap: nowrap; }
}