/* Usuários, configurações, perfil, busca, login e instalador — visual aprovado
   (02/11/2026): cartões de 20px, avatares coloridos, chips e estados vazios. */

.av { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; color: #fff;
    font: 600 12px var(--font-sans); letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); user-select: none; }
.av-lg { width: 48px; height: 48px; font-size: 15px; }
.av-xl { width: 72px; height: 72px; font: 700 1.4rem var(--font-display); }
.pill .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.card { border-radius: var(--r-lg); }
.card > .card-header:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--surface-2); }
.sec-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sec-head h2 { font: 650 1rem var(--font-sans); margin: 0; letter-spacing: -.01em; }
.sec-head .ms-auto { margin-left: auto; }
.sec-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: 15px; background: var(--brand-soft); color: var(--brand-text); }
.sec-ico.teal { background: var(--teal-bg); color: var(--teal); } .sec-ico.ok { background: var(--ok-bg); color: var(--ok); }
.sec-ico.warn { background: var(--warn-bg); color: var(--warn); } .sec-ico.info { background: var(--info-bg); color: var(--info); }
.sec-ico.bad { background: var(--bad-bg); color: var(--bad); }

/* Estado vazio caprichado */
.app-content .empty-state .icon, .auth-card .empty-state .icon { width: 64px; height: 64px; border-radius: 20px; border: 0; font-size: 1.6rem; position: relative;
    background: linear-gradient(135deg, var(--brand-soft), color-mix(in srgb, var(--teal-bg) 80%, var(--surface))); color: var(--brand-text);
    box-shadow: 0 12px 28px -16px rgba(var(--brand-rgb), .7); }
.app-content .empty-state .icon::after, .auth-card .empty-state .icon::after { content: ''; position: absolute; inset: -6px; border-radius: 24px; border: 1px dashed var(--border-strong); }
.empty-state h3 { font: 700 1.15rem var(--font-display); }

/* ---------- Usuários ---------- */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.user-card { display: grid; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
    transition: transform .22s var(--ease-out), box-shadow .22s; min-width: 0; }
.user-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.user-card.is-muted { opacity: .62; }
.user-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.user-top b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-top small { display: block; color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-top .av { position: relative; }
.user-top .av.on::after { content: ''; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.user-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.stat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: var(--bg-subtle); color: var(--text-muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
a.stat-chip:hover { color: var(--brand-text); background: var(--brand-soft); }
.user-acts { display: flex; gap: 6px; padding-top: 12px; border-top: 1px dashed var(--border); }
.user-acts .btn { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: .35rem; }
.user-acts form { flex: 1; display: flex; } .user-acts form .btn { flex: 1; }
.user-new { display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; min-height: 180px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg);
    color: var(--text-muted); text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.user-new:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }
.user-new i { font-size: 1.5rem; }
.role-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.role-cards label { margin: 0; cursor: pointer; }
.role-cards input { position: absolute; opacity: 0; pointer-events: none; }
.role-cards .rc { display: grid; gap: 4px; height: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s; }
.role-cards .rc b { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.role-cards .rc small { color: var(--text-muted); font-size: 12px; line-height: 1.35; }
.role-cards input:checked + .rc { border-color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 60%, var(--surface)); box-shadow: 0 0 0 3px var(--brand-soft); }
.role-cards input:focus-visible + .rc { outline: 2px solid var(--brand); outline-offset: 2px; }
.check-list .form-check { display: flex; align-items: center; gap: 10px; padding: .45rem .6rem .45rem 2rem; }
.check-list .av { width: 26px; height: 26px; font-size: 10px; }

/* ---------- Configurações ---------- */
.tabs-chips .chip-tab { border-radius: 99px; }
.logo-preview { border-radius: var(--r-md); min-height: 120px; background: repeating-conic-gradient(var(--bg-subtle) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; }
.brand-swatch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); }
.brand-swatch input[type=color] { width: 44px; height: 44px; padding: 3px; border-radius: 12px; flex: none; }
.mig-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 6px; max-height: 340px; overflow: auto; }
.mig-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 12.5px; }
.mig-list li .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mig-list li.pend { background: var(--warn-bg); color: var(--warn); }
.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-list li { display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--border); font-size: 13px; }
.mail-list li:first-child { border-top: 0; }
.kv-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.kv-row:first-child { border-top: 0; }
.kv-row span:first-child { color: var(--text-muted); }

/* ---------- Perfil ---------- */
.profile-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 22px; border-radius: var(--r-lg); color: #fff;
    background: linear-gradient(120deg, #123259, #1e5f99 60%, #0f9b90); box-shadow: var(--shadow-md); }
.profile-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .18), transparent); }
.profile-hero .av-xl { box-shadow: 0 0 0 4px rgb(255 255 255 / .2); }
.profile-hero h2 { font: 700 1.5rem/1.1 var(--font-display); margin: 0 0 4px; color: #fff; letter-spacing: -.02em; }
.profile-hero p { margin: 0; color: rgb(255 255 255 / .8); font-size: .9rem; }
.profile-hero .pill { background: rgb(255 255 255 / .16); color: #fff; }
.switch-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); }
.switch-row .form-check { margin: 0 0 0 auto; padding: 0; min-height: 0; }
.switch-row .form-check-input { margin: 0; width: 2.6em; height: 1.4em; float: none; }
.switch-row b { display: block; font-weight: 600; font-size: .92rem; }
.switch-row small { display: block; color: var(--text-muted); font-size: 12px; }

/* ---------- Busca ---------- */
.search-box { position: relative; }
.search-box .form-control { min-height: 56px; border-radius: 16px; padding-left: 3rem; font-size: 1.05rem; box-shadow: var(--shadow-sm); }
.search-box > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 1.1rem; }
.search-box:focus-within > i { color: var(--brand-text); }
.res-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; }
.res-item { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background .15s; }
.res-item:hover { background: var(--surface-hover); color: var(--text); }
.res-item .min-w-0 { flex: 1; }
.res-item b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-item small { display: block; color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-item .go { color: var(--text-faint); transition: transform .2s var(--ease-out); }
.res-item:hover .go { transform: translateX(3px); color: var(--brand-text); }
.res-item mark { background: var(--warn-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
.search-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }

/* ---------- Login e instalador (layout auth do núcleo) ---------- */
.auth-card .card { border-radius: var(--r-xl); box-shadow: var(--shadow-lg); border-color: var(--border); }
.auth-card .auth-logo { width: 56px; height: 56px; border-radius: 17px; background: linear-gradient(135deg, #2a6db8, #0d7f76); color: #fff;
    box-shadow: 0 12px 26px -10px rgb(19 168 158 / .7); font-size: 1.5rem; }
.auth-card h1 { font: 700 1.75rem/1.15 var(--font-display); letter-spacing: -.02em; }
.auth-card .form-control { min-height: 48px; border-radius: 12px; }
.auth-card .btn-lg { min-height: 50px; border-radius: 14px; }
.auth-badge { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 17px; display: grid; place-items: center; font-size: 1.5rem; background: var(--brand-soft); color: var(--brand-text); }
.auth-badge.ok { background: var(--ok-bg); color: var(--ok); }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.inst-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.inst-checks .pill { font-size: 12px; padding: 5px 10px; }
.inst-step { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.inst-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--text); color: var(--bg); font: 600 12px var(--font-mono); }

@media (max-width: 767.98px) {
    .user-grid, .role-cards { grid-template-columns: minmax(0, 1fr); }
    .profile-hero { padding: 18px; }
    .profile-hero .av-xl { width: 60px; height: 60px; font-size: 1.15rem; }
    .res-item { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .user-card, .res-item .go { transition: none; }
    .user-card:hover { transform: none; }
}
.res-item.border-top-0 { border-top: 0; }