:root {
    --bg: #f4f6f8; --surface: #fff; --surface-2: #f8fafb; --text: #17201d; --muted: #6c7773;
    --border: #e2e8e5; --brand: #bb1f2b; --brand-dark: #921722; --accent: #f6c945; --success: #25875a;
    --warning: #b7791f; --danger: #b4232e; --info: #3169c6; --sidebar: #17201d; --sidebar-text: #d9e1de;
    --shadow-sm: 0 1px 2px rgba(16, 24, 20, .06); --shadow: 0 12px 32px rgba(16, 24, 20, .09);
    --radius: 14px; --radius-sm: 9px; --sidebar-width: 248px; --font: "DM Sans", sans-serif; --display: "Manrope", sans-serif;
}
[data-theme="dark"] { --bg:#101614; --surface:#18211e; --surface-2:#202b27; --text:#eff5f2; --muted:#9aaba4; --border:#2d3a35; --sidebar:#0b100e; --shadow:0 12px 32px rgba(0,0,0,.3); }
* { box-sizing: border-box; }
.ui-icon { display:block;flex:0 0 auto; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); }
body { font-size: 14px; line-height: 1.5; }
a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; transition: grid-template-columns .25s ease; }
.app-shell.is-collapsed { grid-template-columns: 76px 1fr; }
.sidebar { position: sticky; top: 0; height: 100vh; display:flex; flex-direction:column; overflow:hidden; background:var(--sidebar); color:var(--sidebar-text); border-right:1px solid rgba(255,255,255,.06); }
.brand { height:76px; display:flex; align-items:center; gap:11px; padding:0 18px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand__mark { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(145deg,var(--brand),#d83b47); color:#fff; font:800 20px var(--display); box-shadow:0 7px 18px rgba(187,31,43,.34); }
.brand__copy { display:flex; align-items:baseline; gap:5px; white-space:nowrap; } .brand__copy strong { color:#fff; font:800 15px var(--display); letter-spacing:.06em; } .brand__copy small { color:var(--accent); font-weight:700; font-size:10px; letter-spacing:.14em; }
.sidebar__toggle { margin-left:auto; color:#9aa9a3 !important; }
.nav-list { padding:18px 12px; display:flex; flex-direction:column; gap:4px; overflow:auto; }
.nav-item { min-height:44px; display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:10px; color:#aebbb6; font-weight:500; white-space:nowrap; transition:.18s ease; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; transform:translateX(2px); } .nav-item.is-active { color:#fff; background:linear-gradient(90deg,rgba(187,31,43,.28),rgba(187,31,43,.08)); box-shadow:inset 3px 0 var(--brand); }
.nav-item__icon { width:22px; text-align:center; font-size:17px; color:var(--accent); } .nav-item .badge { margin-left:auto; }
.sidebar__footer { margin-top:auto; display:flex; align-items:center; gap:10px; padding:17px 20px; border-top:1px solid rgba(255,255,255,.08); white-space:nowrap; }
.sidebar__footer-copy { font-size:12px; color:#c4ceca; display:flex; flex-direction:column; } .sidebar__footer-copy small { color:#73827c; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#5ad38a; box-shadow:0 0 0 4px rgba(90,211,138,.12); }
.is-collapsed .brand__copy,.is-collapsed .nav-item__label,.is-collapsed .nav-item .badge,.is-collapsed .sidebar__footer-copy { display:none; }
.is-collapsed .sidebar__toggle { display:none; } .is-collapsed .nav-item { justify-content:center; padding:10px; } .is-collapsed .sidebar__footer { justify-content:center; }
.main-area { min-width:0; }
.topbar { height:76px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 32px; background:color-mix(in srgb,var(--surface) 92%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.global-search { flex:1; max-width:620px; display:flex; align-items:center; gap:10px; padding:0 13px; height:42px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); color:var(--muted); }
.global-search input { flex:1; border:0; outline:0; background:transparent; color:var(--text); } kbd { padding:2px 7px; border:1px solid var(--border); border-radius:5px; background:var(--surface); font-size:11px; color:var(--muted); }
.topbar__actions { display:flex; align-items:center; gap:9px; }.icon-button { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; }.icon-button:hover { background:var(--surface-2); color:var(--text); }
.has-indicator { position:relative; }.has-indicator::after { content:""; position:absolute; top:8px; right:8px; width:6px; height:6px; border:2px solid var(--surface); border-radius:50%; background:var(--brand); }
.user-menu { display:flex; align-items:center; gap:10px; margin-left:4px; padding-left:13px; border-left:1px solid var(--border); }.avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#fbe8e9; color:var(--brand); font-weight:800; }.user-menu__copy { display:flex; flex-direction:column; min-width:115px; }.user-menu__copy strong { font-size:13px; }.user-menu__copy small { color:var(--muted); font-size:11px; text-transform:capitalize; }
.page-frame { padding:30px 32px 48px; max-width:1600px; margin:0 auto; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }.page-header h1 { margin:2px 0 5px; font:800 27px var(--display); letter-spacing:-.035em; }.page-header p { margin:0; color:var(--muted); }.eyebrow { color:var(--brand); font-size:12px; font-weight:700; letter-spacing:normal; text-transform:none; }
.breadcrumb { display:flex; gap:7px; color:var(--muted); font-size:12px; margin-bottom:10px; }/* A barra e um ::before do proprio item, entao dentro de um link ela herdava
   o sublinhado do hover e ficava clicavel junto. inline-block corta a heranca
   do text-decoration e pointer-events tira a barra da area de clique. */
.breadcrumb > *+*::before {
    content: "/";
    display: inline-block;
    margin-right: 7px;
    color: var(--border);
    text-decoration: none;
    pointer-events: none;
}
.page-actions { display:flex; align-items:center; gap:9px; }
.button { min-height:39px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 15px; border:1px solid var(--border); border-radius:9px; background:var(--surface); color:var(--text); font-weight:700; cursor:pointer; box-shadow:var(--shadow-sm); }.button:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(20,30,25,.09); }.button--primary { border-color:var(--brand); background:var(--brand); color:#fff; }.button--primary:hover { background:var(--brand-dark); }.button--ghost { box-shadow:none; background:transparent; }.button--danger { border-color:#f2c8cc; color:var(--danger); background:#fff8f8; }
.grid { display:grid; gap:18px; }.grid--stats { grid-template-columns:repeat(4,minmax(0,1fr)); }.grid--dashboard { grid-template-columns:repeat(12,minmax(0,1fr)); }.span-3 { grid-column:span 3; }.span-4 { grid-column:span 4; }.span-6 { grid-column:span 6; }.span-8 { grid-column:span 8; }.span-12 { grid-column:span 12; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }.card__header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid var(--border); }.card__header h2,.card__header h3 { margin:0; font:700 15px var(--display); }.card__body { padding:20px; }
.stat { padding:19px; position:relative; overflow:hidden; }.stat::after { content:""; position:absolute; right:-18px; top:-22px; width:72px; height:72px; border-radius:50%; background:color-mix(in srgb,var(--stat-color,var(--brand)) 10%,transparent); }.stat__top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; }.stat__icon { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:color-mix(in srgb,var(--stat-color,var(--brand)) 12%,transparent); color:var(--stat-color,var(--brand)); }.stat strong { display:block; margin-top:14px; font:800 25px var(--display); }.stat small { color:var(--muted); }
.badge { display:inline-flex; align-items:center; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:10px; font-weight:800; }.badge--success { background:#eaf7f0; color:var(--success); }.badge--warning { background:#fff5db; color:var(--warning); }.badge--danger { background:#fdebec; color:var(--danger); }.badge--info { background:#eaf1fc; color:var(--info); }
.table-wrap { overflow:auto; }.table { width:100%; border-collapse:collapse; }.table th { padding:11px 16px; background:var(--surface-2); color:var(--muted); font-size:12px; letter-spacing:normal; text-transform:none; text-align:left; white-space:nowrap; }.table td { padding:13px 16px; border-top:1px solid var(--border); vertical-align:middle; }.table tbody tr:hover { background:color-mix(in srgb,var(--surface-2) 70%,transparent); }
.person-cell { display:flex; align-items:center; gap:10px; }.person-cell .avatar { width:33px;height:33px;font-size:12px; }.person-cell span { display:flex;flex-direction:column; }.person-cell small { color:var(--muted); }
.person-heading { display:flex;align-items:center;gap:15px; }.avatar--large { width:58px;height:58px;font:800 22px var(--display); }.role-list { display:flex;gap:6px;flex-wrap:wrap; }.role-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }.role-option { display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:9px;cursor:pointer; }.role-option:has(input:checked) { border-color:var(--brand);background:rgba(187,31,43,.04); }.role-option span { display:flex;flex-direction:column; }.role-option small { color:var(--muted); }.detail-list { display:grid;gap:16px; }.detail-list>div { display:flex;flex-direction:column;gap:3px;padding-bottom:13px;border-bottom:1px solid var(--border); }.detail-list>div:last-child { border-bottom:0;padding-bottom:0; }.detail-list small { color:var(--muted); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }.field { display:flex; flex-direction:column; gap:6px; }.field--full { grid-column:1/-1; }.field label { font-size:12px; font-weight:700; }.input,.select,.textarea { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--border); border-radius:9px; outline:0; background:var(--surface); color:var(--text); }.textarea { min-height:110px; resize:vertical; }.input:focus,.select:focus,.textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(187,31,43,.09); }.field__hint { color:var(--muted); font-size:11px; }.field__error { color:var(--danger); font-size:11px; }
.input-group { display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;background:var(--surface);overflow:hidden; }.input-group span { padding:0 0 0 12px;color:var(--muted);font-weight:700; }.input-group .input { border:0;box-shadow:none; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:15px; }.toolbar__search { width:min(360px,100%); }.pagination { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-top:1px solid var(--border); color:var(--muted); }.pagination__pages { display:flex; gap:4px; }.pagination a,.pagination span { min-width:32px;height:32px;display:grid;place-items:center;border-radius:7px; }.pagination .is-active { background:var(--brand);color:#fff; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--border); }.tab { padding:11px 14px; color:var(--muted); font-weight:700; border-bottom:2px solid transparent; }.tab.is-active { color:var(--brand); border-color:var(--brand); }
.timeline { display:flex; flex-direction:column; }.timeline__item { position:relative; display:grid; grid-template-columns:28px 1fr; gap:10px; padding-bottom:19px; }.timeline__item:not(:last-child)::before { content:""; position:absolute; left:13px; top:28px; bottom:0; width:1px; background:var(--border); }.timeline__dot { width:27px;height:27px;display:grid;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--brand);font-size:10px;z-index:1; }.timeline__content strong { display:block;font-size:13px; }.timeline__content small { color:var(--muted); }
.alert { display:flex; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); }.alert--success { border-color:#bde5ce;background:#f0faf5;color:var(--success); }.alert--danger { border-color:#f2c8cc;background:#fff6f7;color:var(--danger); }
.empty-state { padding:55px 25px; text-align:center; }.empty-state--compact { padding:50px 25px; }.empty-state__icon { width:45px;height:45px;display:grid;place-items:center;margin:0 auto 12px;border-radius:50%;background:#eaf7f0;color:var(--success);font-size:18px; }.empty-state__code { display:block;color:var(--brand);font:800 42px var(--display); }.empty-state h1,.empty-state h3 { margin:4px 0 5px;font-family:var(--display); }.empty-state p { margin:0 0 18px;color:var(--muted); }
.skeleton { min-height:14px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:skeleton 1.4s ease infinite; } @keyframes skeleton { to { background-position:-100% 0; } }
.modal,.drawer { position:fixed;inset:0;z-index:100;display:none; }.modal.is-open,.drawer.is-open { display:block; }.drawer__backdrop,.modal__backdrop { position:absolute;inset:0;background:rgba(7,12,10,.45);backdrop-filter:blur(2px); }.drawer__panel { position:absolute;top:0;right:0;width:min(420px,92vw);height:100%;background:var(--surface);box-shadow:var(--shadow);animation:slideIn .2s ease; }.drawer__panel header { display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--border); }.drawer__panel h2 { margin:0;font:800 20px var(--display); } @keyframes slideIn { from { transform:translateX(30px);opacity:0; } }
.modal__panel { position:relative;width:min(560px,92vw);margin:10vh auto;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow); }.offcanvas { position:fixed;inset:0 auto 0 0;transform:translateX(-100%);transition:.2s; }.offcanvas.is-open { transform:none; }.uploader { display:grid;place-items:center;min-height:130px;padding:20px;border:1.5px dashed var(--border);border-radius:var(--radius);color:var(--muted);background:var(--surface-2); }
.chart-placeholder { min-height:210px;display:flex;align-items:flex-end;gap:10px;padding-top:22px; }.chart-placeholder span { flex:1;min-height:20px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--brand),#e06a73);opacity:.83; }
.toast-region { position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px; }.toast { padding:12px 15px;border-radius:9px;background:var(--sidebar);color:#fff;box-shadow:var(--shadow); }
.filter-grid { display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding-top:14px;border-top:1px solid var(--border); }.filter-grid.is-visible { display:grid; }
.compact-list { display:grid;gap:9px;margin-bottom:14px; }.compact-list>div { display:flex;flex-direction:column;padding:10px 12px;border-radius:9px;background:var(--surface-2); }.compact-list small { color:var(--muted); }.stack-form,.split-forms form { display:grid;gap:10px; }.split-forms { display:grid;grid-template-columns:1fr 1fr;gap:12px; }.inline-form { display:flex;align-items:center;gap:9px;margin-top:12px; }.inline-form>* { min-width:0; } details { margin-top:12px; } summary { cursor:pointer;color:var(--brand);font-weight:700; }
.builder { display:grid;grid-template-columns:230px minmax(360px,1fr) 300px;gap:16px;align-items:start; }.builder__palette,.builder__settings { position:sticky;top:94px; }.field-palette { display:grid;grid-template-columns:1fr 1fr;gap:7px; }.builder-field { padding:9px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--text);text-align:left;cursor:pointer;font-size:12px; }.builder-field:hover { border-color:var(--brand);color:var(--brand); }.builder-item { display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;padding:13px;margin-bottom:9px;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer; }.builder-item.is-selected { border-color:var(--brand);box-shadow:0 0 0 3px rgba(187,31,43,.08); }.builder-item div { display:flex;flex-direction:column; }.builder-item small,.builder-item__handle { color:var(--muted); }
.capture-page { min-height:100vh;background:linear-gradient(145deg,#f5f7f6,#fbeff0);padding:40px 16px; }.capture-shell { width:min(780px,100%);margin:auto;background:#fff;border:1px solid #e2e8e5;border-radius:20px;box-shadow:0 24px 70px rgba(20,30,25,.12);padding:clamp(24px,5vw,48px); }.capture-header { display:flex;align-items:flex-start;gap:16px;margin-bottom:28px; }.capture-header h1 { margin:2px 0 6px;font:800 30px var(--display); }.capture-header p { margin:0;color:var(--muted); }.capture-form { display:flex;flex-wrap:wrap; }.capture-field { flex:0 0 calc(var(--field-width) - 12px); }.capture-form .field--full { flex-basis:100%; }.choice-list { display:flex;flex-wrap:wrap;gap:12px; }.consent { display:flex;gap:9px;font-weight:500!important; }.button--large { min-height:50px;width:100%;font-size:16px; }.capture-shell footer { margin-top:24px;text-align:center;color:var(--muted);font-size:11px; }
.login-page { min-height:100vh;background:#eef2f0;padding:clamp(16px,4vw,48px);display:grid;place-items:center; }.login-shell { width:min(1080px,100%);min-height:min(720px,calc(100vh - 64px));display:grid;grid-template-columns:minmax(360px,.92fr) minmax(440px,1.08fr);overflow:hidden;border:1px solid rgba(23,32,29,.08);border-radius:24px;background:#fff;box-shadow:0 30px 90px rgba(17,29,24,.16); }.login-panel { position:relative; }.login-panel--brand { display:flex;flex-direction:column;padding:52px;background:linear-gradient(145deg,#111b18 0%,#1d312a 65%,#263c34 100%);color:#fff;overflow:hidden; }.login-panel--brand::before { content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(246,201,69,.12);border-radius:50%;right:-300px;top:-180px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018); }.login-panel--brand::after { content:"";position:absolute;width:190px;height:190px;border-radius:50%;left:-95px;bottom:80px;background:rgba(187,31,43,.18);filter:blur(2px); }.login-brand { position:relative;z-index:1;display:flex;align-items:center;gap:12px; }.login-brand>span:last-child { display:flex;align-items:baseline;gap:6px; }.login-brand strong { font:800 17px var(--display);letter-spacing:.08em; }.login-brand small { color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.13em; }.login-message { position:relative;z-index:1;margin:auto 0;max-width:430px; }.login-message .eyebrow { color:var(--accent); }.login-message h1 { margin:15px 0 18px;font:800 clamp(35px,4vw,52px)/1.07 var(--display);letter-spacing:-.045em; }.login-message p { margin:0;color:#b9c8c2;font-size:16px;line-height:1.7; }.login-security { position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:15px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.055); }.login-security>span { width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:rgba(90,211,138,.13);color:#6ce09b;font-weight:800; }.login-security p { display:flex;flex-direction:column;margin:0; }.login-security small { color:#91a49c; }.login-panel--form { display:grid;place-items:center;padding:clamp(35px,6vw,78px); }.login-form-wrap { width:min(410px,100%); }.login-form-wrap h2 { margin:7px 0 7px;font:800 30px var(--display);letter-spacing:-.035em; }.login-intro { margin:0 0 27px;color:var(--muted); }.login-form-wrap>.alert { margin-bottom:18px; }.login-form { display:grid;gap:18px; }.login-input { height:48px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:#fff;transition:.18s; }.login-input:focus-within { border-color:var(--brand);box-shadow:0 0 0 3px rgba(187,31,43,.09); }.login-input>span { color:#8b9993;font-weight:800; }.login-input input { flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--text); }.login-password-toggle { border:0;background:transparent;color:var(--brand);font-size:11px;font-weight:800;cursor:pointer; }.login-options { display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--muted);font-size:12px; }.login-options label { display:flex;align-items:center;gap:7px; }.login-options a { color:var(--brand);font-weight:700; }.login-submit { width:100%;min-height:50px;justify-content:space-between;padding-inline:19px; }.login-footer { margin-top:36px;padding-top:20px;border-top:1px solid var(--border);color:var(--muted);font-size:11px;text-align:center; }.login-mobile-brand { display:none;align-items:center;gap:10px;margin-bottom:30px;font-family:var(--display); }.logout-form { display:flex; }
@media(max-width:1200px){.builder{grid-template-columns:200px 1fr}.builder__settings{grid-column:1/-1;position:static}.filter-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:1100px){.grid--stats{grid-template-columns:repeat(2,1fr)}.span-3,.span-4{grid-column:span 6}.span-8{grid-column:span 12}.app-shell{grid-template-columns:76px 1fr}.brand__copy,.nav-item__label,.nav-item .badge,.sidebar__footer-copy,.sidebar__toggle{display:none}.nav-item{justify-content:center}}
@media (max-width:720px){.app-shell{display:block}.sidebar{position:fixed;z-index:80;width:248px;transform:translateX(-100%);transition:.2s}.app-shell.is-mobile-open .sidebar{transform:none}.topbar{padding:0 16px}.global-search kbd,.user-menu__copy{display:none}.page-frame{padding:22px 16px}.page-header{flex-direction:column}.grid--stats{grid-template-columns:1fr}.grid--dashboard{display:block}.grid--dashboard>*{margin-bottom:16px}.form-grid,.role-grid,.filter-grid,.split-forms{grid-template-columns:1fr}.field--full{grid-column:auto}.builder{display:block}.builder>*{margin-bottom:14px}.builder__palette{position:static}.inline-form{align-items:stretch;flex-direction:column}.capture-field{flex-basis:100%}}
@media(max-width:820px){.login-page{padding:0;background:#fff}.login-shell{min-height:100vh;display:block;border:0;border-radius:0;box-shadow:none}.login-panel--brand{display:none}.login-panel--form{min-height:100vh;padding:34px 24px}.login-mobile-brand{display:flex}.login-form-wrap h2{font-size:27px}.login-footer{margin-top:28px}}

/* AMACE — identidade visual oficial */
:root,
[data-theme="dark"] {
    --bg:#fbf8f7; --surface:#fff; --surface-2:#f9f0f0; --text:#1f1e1a; --muted:#767676;
    --border:#ece2e0; --brand:#cd212a; --brand-dark:#a81a21; --accent:#fcce45; --success:#00b102;
    --warning:#a86500; --danger:#a81a21; --info:#0045c0; --sidebar:#fff; --sidebar-text:#1f1e1a;
    --shadow-sm:0 2px 7px rgba(40,24,21,.045); --shadow:0 18px 48px rgba(66,32,26,.11);
    --font:"Quicksand",sans-serif; --display:"Quicksand",sans-serif;
    --field:#f8f0f0;
}
body { letter-spacing:-.005em; }
.sidebar { border-right-color:var(--border); box-shadow:5px 0 24px rgba(57,26,21,.035); }
.brand { height:76px; gap:9px; padding-inline:15px 12px; border-bottom-color:var(--border); }
.brand__logo-wrap { width:136px; height:44px; flex:0 0 136px; display:flex; align-items:center; overflow:hidden; transition:width .22s,flex-basis .22s; }
.brand__logo { width:136px; height:auto; display:block; }
.brand__product,.login-brand>span,.login-mobile-brand>span { padding:3px 7px; border-radius:999px; background:var(--brand); color:#fff; font-size:9px; font-weight:800; letter-spacing:.12em; }
.sidebar__toggle { color:#716b69!important; }
.nav-item { color:#5f5957; border-radius:11px; }
.nav-item:hover { background:#fff1f0; color:#1f1e1a; transform:translateX(2px); }
.nav-item.is-active { color:#1f1e1a; background:#ffe9e7; box-shadow:none; }
.nav-item__icon { color:var(--brand); }
.nav-item:nth-child(4n+2) .nav-item__icon { color:#1f1e1a; }
.nav-item:nth-child(4n+3) .nav-item__icon { color:#00b102; }
.nav-item:nth-child(4n+4) .nav-item__icon { color:#d99e00; }
.sidebar__footer { border-top-color:var(--border); }
.sidebar__footer-copy { color:#4e4947; }.sidebar__footer-copy small { color:#8a8380; }
.is-collapsed .brand__logo-wrap { width:43px; flex-basis:43px; }
.is-collapsed .brand__logo { width:136px; max-width:none; }
.is-collapsed .brand__product { display:none; }
.topbar { background:rgba(255,255,255,.94); }
.global-search { background:#fffaf9; }
.page-frame { background:radial-gradient(circle at 96% 0,#fff0ed 0,transparent 250px); }
.page-header h1 { color:#1f1e1a; }
.button { border-radius:8px; }
.button--primary { border-color:var(--accent); background:var(--accent); color:#1f1e1a; box-shadow:none; }
.button--primary:hover { border-color:#f2b900; background:#f2b900; color:#1f1e1a; }
.card { border-radius:12px; }
.grid--stats .stat:nth-child(4n+1) { --stat-color:#cd212a; }
.grid--stats .stat:nth-child(4n+2) { --stat-color:#00b102; }
.grid--stats .stat:nth-child(4n+3) { --stat-color:#0045c0; }
.grid--stats .stat:nth-child(4n+4) { --stat-color:#d99e00; }
.chart-placeholder span { background:linear-gradient(180deg,#cd212a,#e8636a); }
.pagination .is-active { background:var(--brand); }
.input:focus,.select:focus,.textarea:focus,.login-input:focus-within { border-color:var(--brand); box-shadow:0 0 0 3px rgba(205,33,42,.10); }
.capture-page { position:relative; overflow:hidden; background:#fff4f3; }
.capture-page::before,.capture-page::after { content:""; position:fixed; border-radius:50%; pointer-events:none; }
.capture-page::before { width:360px;height:360px;right:-130px;top:-160px;border:1px solid rgba(242,31,43,.12);box-shadow:0 0 0 50px rgba(23,75,199,.035),0 0 0 110px rgba(8,173,32,.025); }
.capture-page::after { width:230px;height:230px;left:-90px;bottom:-100px;background:rgba(255,202,57,.22); }
.capture-shell { position:relative;z-index:1;border-color:#f0dbd7;box-shadow:0 24px 70px rgba(83,39,30,.11); }
.capture-header { flex-direction:column; }
.capture-header .brand__logo { width:170px; }
.login-page { background:#fff4f3; }
.login-shell { border-color:#f0dedb;box-shadow:0 30px 90px rgba(78,34,27,.14); }
.login-panel--brand { background:#fff4f3;color:#1f1e1a; }
.login-panel--brand::before { border-color:rgba(23,75,199,.13);box-shadow:0 0 0 70px rgba(242,31,43,.035),0 0 0 150px rgba(8,173,32,.025); }
.login-panel--brand::after { background:rgba(255,202,57,.55); }
.login-brand { flex-wrap:wrap;gap:9px; }
.login-brand__logo { width:190px;height:auto;display:block; }
.login-message .eyebrow { color:var(--brand); }
.login-message h1 { color:#1f1e1a; }
.login-message p { color:#6d6562; }
.login-security { border-color:#eedbd7;background:rgba(255,255,255,.7); }
.login-security>span { background:#e8f8eb;color:#00b102; }
.login-security small { color:#7c7471; }
.login-mobile-brand img { width:150px;height:auto; }
.login-submit { color:#1f1e1a; }
@media (max-width:1100px) {
    .brand__logo-wrap { width:43px;flex-basis:43px; }
    .brand__logo { width:136px;max-width:none; }
    .brand__product { display:none; }
}
@media (max-width:820px) { .login-page { background:#fff; } }

/* Navegação expansível e sessão */
.sidebar { overflow:visible; }
.nav-list { min-height:0; }
.sidebar__toggle { flex:0 0 34px; width:34px; height:34px; display:grid!important; border:1px solid var(--border); background:#fff; color:#1f1e1a!important; font-size:23px; line-height:1; box-shadow:var(--shadow-sm); }
.sidebar__toggle:hover { background:#fff1f0; color:var(--brand)!important; }
.sidebar__icon-collapsed { display:none; }
.is-collapsed .sidebar__icon-expanded { display:none; }
.is-collapsed .sidebar__icon-collapsed { display:block; }
.is-collapsed .sidebar__toggle { position:absolute; top:20px; right:-17px; z-index:3; border-radius:50%; box-shadow:0 5px 16px rgba(49,24,20,.14); }
.logout-button { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #f2c7c5; border-radius:9px; background:#fff5f4; color:var(--brand); font-weight:700; cursor:pointer; }
.logout-button:hover { background:#ffe9e7; border-color:#efa9a6; }
.logout-button .ui-icon { flex:0 0 auto; }
.mobile-menu-toggle,.sidebar-backdrop { display:none; }
@media (min-width:721px) and (max-width:1100px) {
    .app-shell { grid-template-columns:var(--sidebar-width) 1fr; }
    .app-shell.is-collapsed { grid-template-columns:76px 1fr; }
    .app-shell:not(.is-collapsed) .brand__logo-wrap { width:136px;flex-basis:136px; }
    .app-shell:not(.is-collapsed) .brand__product { display:inline-flex; }
    .app-shell:not(.is-collapsed) .nav-item { justify-content:flex-start; }
    .app-shell:not(.is-collapsed) .nav-item__label { display:inline; }
    .app-shell:not(.is-collapsed) .nav-item .badge { display:inline-flex; }
    .app-shell:not(.is-collapsed) .sidebar__footer-copy { display:flex; }
}
@media (max-width:720px) {
    .mobile-menu-toggle { display:grid;flex:0 0 38px;border:1px solid var(--border);background:#fff; }
    .app-shell.is-mobile-open .sidebar-backdrop { display:block; }
    .sidebar-backdrop { position:fixed;inset:0;z-index:70;border:0;background:rgba(23,17,15,.36);backdrop-filter:blur(2px); }
    .app-shell.is-mobile-open .sidebar { box-shadow:16px 0 40px rgba(45,22,18,.2); }
    .sidebar .sidebar__toggle { position:static;margin-left:auto; }
    .sidebar .brand__logo-wrap { width:136px;flex-basis:136px; }
    .sidebar .brand__product { display:inline-flex; }
    .sidebar .nav-item { justify-content:flex-start; }
    .sidebar .nav-item__label { display:inline; }
    .sidebar .nav-item .badge { display:inline-flex; }
    .sidebar .sidebar__footer-copy { display:flex; }
    .topbar { gap:10px; }
    .logout-button { width:38px;padding:0;justify-content:center; }
    .logout-button span:last-child { display:none; }
}

/* Sprint 04 — operação */
.operational-pending { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px; }
.operational-pending>a { display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2); }
.operational-pending>a>span:last-child { display:flex;flex-direction:column;min-width:0; }
.operational-pending small { color:var(--muted); }
.audit-data { max-width:440px;max-height:210px;overflow:auto;white-space:pre-wrap;word-break:break-word;padding:12px;border-radius:8px;background:#201d1c;color:#f9f4f2;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.table form.inline-form { margin:0;min-width:300px; }
.table form.inline-form .input { min-width:140px; }
/* O tamanho fixo do marcador deixava o card com 320px mesmo quando o
   conteudo era menor, sobrando um vazio no rodape. Com "auto" o navegador
   guarda a altura real ja medida e usa ela no lugar do chute. */
.grid--dashboard > .card { content-visibility:auto; contain-intrinsic-size:auto 320px; }
@media(max-width:1100px){.operational-pending{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.operational-pending{grid-template-columns:1fr}.table form.inline-form{min-width:230px;flex-direction:column}}

/* Sprint 05 — Communication Center */
.module-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:18px;padding:5px;border:1px solid var(--border);border-radius:11px;background:var(--surface)}.module-tabs a{white-space:nowrap;padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:700}.module-tabs a:hover{background:var(--surface-2);color:var(--text)}.provider-grid{display:flex;flex-wrap:wrap;gap:9px}.template-editor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.automation-canvas{min-height:360px;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:18px 18px}.automation-flow{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.flow-node{padding:10px 13px;border:1px solid #f0cfd1;border-radius:8px;background:#fdf2f2;color:#cd212a;font-weight:700}.flow-node--trigger{border-color:#f0b8b5;background:#fff0ef;color:var(--brand)}.flow-arrow{font-size:20px;color:var(--muted)}

/* Sprint 07 — Portal de Autoatendimento */
.portal-page{margin:0;background:#fbf8f7;color:var(--text)}.portal-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.portal-sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 16px;border-right:1px solid var(--border);background:#fff}.portal-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;color:var(--text);font-weight:800}.portal-brand img{width:125px}.portal-brand span{padding:3px 7px;border-radius:999px;background:#cd212a;color:#fff;font-size:9px}.portal-nav{display:flex;flex:1;flex-direction:column;gap:5px}.portal-nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;color:var(--muted);font-weight:600}.portal-nav a:hover,.portal-nav a.is-active{background:#ffe9e7;color:var(--brand)}.portal-main{min-width:0}.portal-topbar{min-height:70px;display:flex;align-items:center;justify-content:flex-end;padding:12px 28px;border-bottom:1px solid var(--border);background:#fff}.portal-topbar>div{display:flex;flex-direction:column;text-align:right}.portal-topbar small{color:var(--muted)}.portal-content{max-width:1240px;margin:auto;padding:30px}.portal-hero-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.portal-hero-grid .card{display:flex;min-height:130px;flex-direction:column;padding:20px}.portal-hero-grid strong{margin:auto 0 4px;font-size:24px}.portal-hero-grid small,.portal-hero-grid span{color:var(--muted)}
@media(max-width:900px){.portal-shell{grid-template-columns:80px 1fr}.portal-brand img{width:46px;object-fit:cover;object-position:left}.portal-brand span,.portal-nav span{display:none}.portal-nav a{justify-content:center}.portal-hero-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.portal-shell{display:block}.portal-sidebar{position:fixed;z-index:90;left:-270px;width:240px;transition:left .2s}.portal-menu-open .portal-sidebar{left:0}.portal-topbar{justify-content:space-between;padding:10px 16px}.portal-content{padding:20px 14px}.portal-hero-grid{grid-template-columns:1fr}.portal-brand img{width:125px}.portal-brand span,.portal-nav span{display:inline}.portal-nav a{justify-content:flex-start}}

/* Sprint 08 — Business Intelligence */
.bi-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;padding:12px 15px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}.bi-toolbar>span{color:var(--muted);font-size:12px}.bi-chart{height:260px;display:flex;align-items:flex-end;gap:5px}.bi-chart>div{flex:1;min-width:4px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#cd212a,#e8636a)}.bi-funnel{display:flex;flex-direction:column;align-items:center;gap:7px}.bi-funnel>div{display:flex;justify-content:space-between;padding:12px 15px;border-radius:8px;background:linear-gradient(90deg,#cd212a,#fcce45);color:#1f1e1a}.bi-funnel>div:nth-child(even){background:linear-gradient(90deg,#1f1e1a,#4a473f);color:#fff}@media(max-width:720px){.bi-toolbar{align-items:flex-start;flex-direction:column}.bi-toolbar .page-actions{overflow:auto;width:100%}}

/* Sprint 09 — Integration Hub */
.connector-marketplace{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.connector-card{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}.connector-card>div{display:flex;flex:1;min-width:0;flex-direction:column}.connector-card small{color:var(--muted)}.integration-console{min-height:360px;margin:0;padding:18px;overflow:auto;border-radius:10px;background:#1f1e1a;color:#d8ffd9;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}@media(max-width:1000px){.connector-marketplace{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.connector-marketplace{grid-template-columns:1fr}}

/* ===== Botoes: sem "levantar" no hover, apenas troca de cor =====
   O .button:hover original fazia translateY(-1px) + sombra, e era o UNICO
   feedback de hover das variantes ghost/danger. Trocado por cor em cada uma. */
.button {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.button:hover, .button:focus-visible {
    transform: none;
    box-shadow: var(--shadow-sm);
}
.button:hover {
    background: var(--surface-2);
    border-color: #e3d6d4;
}
.button--primary:hover {
    border-color: #f2b900;
    background: #f2b900;
    color: #1f1e1a;
    box-shadow: none;
}
.button--ghost:hover {
    border-color: transparent;
    background: #fff1f0;
    box-shadow: none;
}
.button--danger:hover {
    border-color: #eab0b5;
    background: #fff0f1;
    color: var(--danger);
}

/* ===== AMACE — login em card único (sem coluna de apresentação) ===== */
.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(20px, 5vw, 56px);
    background: #f9f0f0;
}
.login-shell {
    width: min(452px, 100%);
    min-height: 0;
    display: block;
    border: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 24px rgba(149, 157, 165, .2);
    overflow: hidden;
}
.login-panel--brand { display: none; }
.login-panel--form {
    display: block;
    padding: clamp(32px, 6vw, 48px);
}
.login-form-wrap { width: 100%; }

/* logo no topo do card, sempre visível */
.login-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    font-family: var(--display);
}
/* o PNG tem 109/1000 de area transparente a esquerda; a margem negativa
   alinha a borda VISUAL da logo com o texto abaixo (168px * -0.109) */
.login-mobile-brand img { width: 168px; height: auto; display: block; margin-left: -18.3px; }

.login-form-wrap h2 {
    margin: 0 0 6px;
    font: 700 27px/1.2 var(--display);
    letter-spacing: -.02em;
    color: var(--text);
}
.login-intro { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.55; }

.login-form { display: grid; gap: 17px; }
.login-form label { font-weight: 600; }
/* o .field global usa gap 6px; nas telas de login o rotulo respira mais.
   Escopado de proposito: nao mexe nos formularios do resto do CRM. */
.login-form .field { gap: 10px; }
.login-input { border-radius: 10px; }
.login-input:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
}
.login-options a { color: var(--brand); font-weight: 600; }
.login-password-toggle { color: var(--brand); font-weight: 700; }

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: 12px 20px;
    border: 2px solid #fcce45;
    border-radius: 10px;
    background: #fcce45;
    color: #1f1e1a;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}
.login-submit { transition: background-color .15s ease, border-color .15s ease; }
/* sem "levantar" no hover: so a troca de cor */
.login-submit:hover { background: #f7c22e; border-color: #f7c22e; box-shadow: none; transform: none; }

.login-footer { margin-top: 30px; }

@media (max-width: 520px) {
    .login-page { padding: 0; background: #fff; }
    .login-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
    .login-panel--form { min-height: 100vh; padding: 36px 22px; }
}

/* checkbox "Manter conectado" — custom, alinhado ao centro do texto */
.login-options label {
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    line-height: 1.25;
}
.login-options label:hover { color: var(--text); }
.login-options input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #ded3d1;
    border-radius: 6px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.login-options input[type="checkbox"]:hover { border-color: #eaa9ac; }
.login-options input[type="checkbox"]:checked {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
}
.login-options input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .18);
}

/* bloco de link sozinho (ex.: "voltar para o login") */
.login-options--single { justify-content: flex-start; margin-bottom: 4px; }
.login-options--single a { display: inline-flex; align-items: center; gap: 6px; }
.login-options--single a .ui-icon { flex: 0 0 auto; }

/* ===== Campos com label flutuante (telas de login) =====
   O label vem DEPOIS do input no HTML para o seletor "+" funcionar, e é
   posicionado por cima. Em foco ou preenchido, sobe e senta na borda.
   O input precisa de placeholder=" " para :placeholder-shown responder. */
.login-form .field { gap: 0; }
.login-form .login-input {
    position: relative;
    height: 52px;
    padding: 0 14px;
}
.login-form .login-input > input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 14px;
}
.login-form .login-input > label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: top .2s ease, left .2s ease, font-size .2s ease, color .2s ease, padding .2s ease;
}
.login-form .login-input > input:focus + label,
.login-form .login-input > input:not(:placeholder-shown) + label,
.login-form .login-input > input:-webkit-autofill + label {
    top: 0;
    left: 10px;
    padding: 0 6px;
    background: #fff;
    color: var(--brand);
    font-size: 11px;
    font-weight: 600;
}
/* preenchido mas sem foco: o rotulo fica discreto */
.login-form .login-input > input:not(:focus):not(:placeholder-shown) + label {
    color: var(--muted);
}
/* espaco extra entre campos: o rotulo flutuante ocupa a borda de cima */
.login-form { gap: 22px; }

/* botao de mostrar/ocultar senha: olho aberto x olho cortado */
.login-form .login-password-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: -6px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.login-form .login-password-toggle:hover { background: #fff1f0; color: var(--brand); }
.login-form .login-password-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .18);
}
.login-form .login-password-toggle .pw-icon { display: none; line-height: 0; }
.login-form .login-password-toggle .pw-icon--show { display: inline-flex; }
.login-form .login-password-toggle.is-visible .pw-icon--show { display: none; }
.login-form .login-password-toggle.is-visible .pw-icon--hide { display: inline-flex; }
.login-form .login-password-toggle.is-visible { color: var(--brand); }

/* ===== Sidebar e cards: limpeza visual =====
   Icones da sidebar no azul da logo AMACE no lugar do preto. */
.nav-item:nth-child(4n+2) .nav-item__icon { color: #0045c0; }

/* cards de estatistica sem o circulo decorativo atras do icone */
.stat::after { content: none; }

/* ===== Acoes do cabecalho de pagina =====
   O .select global tem width:100% e min-height 42px, enquanto o .button tem 39px:
   dentro do flex isso encolhia o botao (quebrando o texto em duas linhas) e
   deixava os dois com alturas diferentes. */
.page-actions .button,
.page-actions .select {
    flex: 0 0 auto;
    min-height: 42px;
    white-space: nowrap;
}
.page-actions .select {
    width: auto;
    padding: 9px 38px 9px 14px;
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    /* seta propria no lugar da nativa do sistema */
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.page-actions .select:hover { border-color: #eaa9ac; }
.page-actions .select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
}

/* sem o pontinho de notificacao no sino */
.has-indicator::after { content: none; }

/* acoes de linha (Editar/Excluir) coladas na direita da tabela */
.table th:last-child,
.table td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}
.table td:last-child .page-actions { justify-content: flex-end; }
/* botao so-icone (lixeira) fica quadrado, sem o padding de botao com texto */
.table td .button--danger {
    width: 38px;
    padding-inline: 0;
}

/* respiro entre a navegacao (breadcrumb) e o titulo da pagina */
.breadcrumb { margin-bottom: 32px; }

/* pagina de erro: centralizada na area util, sem o card branco */
.error-page {
    display: grid;
    place-content: center;
    justify-items: center;
    min-height: calc(100vh - 210px);
    padding: 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.error-page h1 { margin: 4px 0 6px; }

/* a .sidebar e flex column: sem isto o bloco da logo encolhe (58px em vez de
   76px) e a linha dele deixa de bater com a borda da topbar */
.brand { flex: 0 0 76px; }

/* botao Sair no rodape da sidebar: a lista de menu cresce e empurra ele pra baixo */
.nav-list { flex: 1 1 auto; }
.sidebar__logout {
    flex: 0 0 auto;
    padding: 14px 15px 18px;
    border-top: 1px solid var(--border);
}
.sidebar__logout .logout-form { width: 100%; }
.sidebar__logout .logout-button { width: 100%; justify-content: center; }

/* bloco do usuario na topbar: texto alinhado a direita, avatar depois dele.
   Escopado em .user-menu porque o .avatar tambem e usado nas tabelas de pessoas,
   onde a inicial identifica cada registro. */
.user-menu__copy { text-align: right; }
.user-menu .avatar--default {
    background: #f1e7e5;
    color: #a89b98;
    overflow: hidden;
}
.user-menu .avatar--default svg {
    width: 116%;
    height: 116%;
    display: block;
    /* Silhueta maior que o circulo de proposito: os ombros vazam e sao
       aparados pela borda, como nos avatares padrao do Instagram/X.
       O translateY e percentual da altura DO SVG, entao ao aumentar a
       escala o deslocamento precisa cair para a composicao nao subir. */
    transform: translateY(12%);
}

/* o .user-menu__copy tem min-width:115px; com o texto alinhado a direita isso
   abria um vao entre o avatar e as palavras. A caixa passa a abracar o texto. */
.user-menu__copy { min-width: 0; }

/* ===== Campos de formulario com rotulo flutuante (mesmo desenho do login) =====
   A classe .field--float e posta pelo JS; sem ela o formulario segue com o
   rotulo acima do campo, que e o comportamento antigo. */
.field--float {
    position: relative;
    gap: 0;
}
.field--float > label {
    position: absolute;
    z-index: 1;
    top: 24px; /* meio do controle (48px), nao do campo: a dica nao desloca */
    left: 13px;
    transform: translateY(-50%);
    padding: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    transition: top .2s ease, left .2s ease, font-size .2s ease, color .2s ease, padding .2s ease;
}
/* textarea: o rotulo descansa no topo, nao no meio da caixa */
.field--float-top > label {
    top: 16px;
    transform: none;
}
.field--float > .input,
.field--float > .select,
.field--float > .input-group > .input {
    min-height: 48px;
}
.field--float > .textarea { padding-top: 16px; }

.field--float.is-focus > label,
.field--float.is-filled > label,
.field--float.is-up > label {
    top: 0;
    left: 10px;
    padding: 0 6px;
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    transform: translateY(-50%);
}
.field--float.is-focus > label { color: var(--brand); }

/* ===== Select estilizado em todo o CRM =====
   Substitui a seta e a fonte nativas do sistema, que destoavam do resto.
   Antes isso valia so no .page-actions; agora vale em qualquer formulario. */
.select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.select:hover { border-color: #eaa9ac; }
.select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
    outline: none;
}
.select:disabled {
    background-color: var(--surface-2);
    color: var(--muted);
    cursor: not-allowed;
}

/* campos numericos sem as setinhas de incremento do navegador */
input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ===== Select customizado: lista propria, estilizavel ===== */
.select-ui { position: relative; }
.select-ui__native {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}
.select-ui__trigger {
    width: 100%;
    text-align: left;
    font-weight: 500;
}
.select-ui__trigger[aria-expanded="true"] {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
}
.select-ui__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 260px;
    margin: 0;
    padding: 6px;
    overflow: auto;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 20px 24px rgba(149, 157, 165, .2);
}
.select-ui__option {
    padding: 9px 11px;
    border-radius: 7px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
}
.select-ui__option:hover,
.select-ui__option.is-active { background: #fff1f0; }
.select-ui__option.is-selected {
    background: #ffe9e7;
    color: var(--brand);
    font-weight: 700;
}
/* o campo agora tem o wrapper no meio: mantem a altura do controle */
.field--float > .select-ui > .select { min-height: 48px; }
.page-actions .select-ui { flex: 0 0 auto; }
.page-actions .select-ui__trigger { min-height: 42px; }

/* seta do select como elemento, para girar ao abrir */
.select-ui__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-right: 12px;
    background-image: none;
}
.select-ui__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-ui__chevron {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--muted);
    transition: transform .2s ease;
}
.select-ui__chevron svg { width: 16px; height: 16px; display: block; }
.select-ui__trigger[aria-expanded="true"] .select-ui__chevron { transform: rotate(180deg); }

/* ===== Campos de lista como chips ===== */
.tagbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.tagbox:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
}
.tagbox__source {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.tagbox__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 11px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.tagbox__chip button {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    background: none;
    color: currentColor;
    opacity: .45;
    cursor: pointer;
    transition: opacity .15s ease, color .15s ease;
}
.tagbox__chip button svg { width: 12px; height: 12px; display: block; }
.tagbox__chip button:hover { opacity: 1; color: var(--brand); }
.tagbox__input {
    flex: 1;
    min-width: 120px;
    padding: 4px 2px;
    border: 0;
    outline: 0;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

/* form-grid em 6 colunas: campo normal ocupa metade (3), campo "terco" ocupa 2.
   Antes eram 2 colunas fixas, o que impedia tres campos na mesma linha. */
.form-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.form-grid > .field { grid-column: span 3; }
.form-grid > .field--full { grid-column: 1 / -1; }
.form-grid > .field--third { grid-column: span 2; }
@media (max-width: 900px) {
    .form-grid > .field--third { grid-column: span 3; }
}
@media (max-width: 720px) {
    .form-grid > .field,
    .form-grid > .field--third,
    .form-grid > .field--full { grid-column: 1 / -1; }
}

/* lista de sugestoes do campo de chips (selects multiplos) */
.tagbox-wrap { position: relative; }
.tagbox__menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 220px;
    padding: 6px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 20px 24px rgba(149, 157, 165, .2);
}
.tagbox__opt {
    display: block;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.tagbox__opt:hover { background: #fff1f0; }
.tagbox__input:disabled { cursor: not-allowed; }

/* acoes do formulario: Salvar e Excluir lado a lado */
.form-actions {
    display: flex;
    gap: 8px;
}
.form-actions > .button { flex: 1 1 auto; justify-content: center; }
.form-actions > form { flex: 0 0 auto; display: flex; }
.form-actions > form > .button { justify-content: center; }
@media (max-width: 520px) {
    .form-actions { flex-direction: column; }
    .form-actions > form,
    .form-actions > form > .button { width: 100%; }
}

/* pill do Resumo com a largura do proprio texto.
   O .detail-list>div e flex column, e o align-items padrao (stretch) esticava
   o badge pela coluna inteira. */
.detail-list > div { align-items: flex-start; }
.detail-list > div > .badge { align-self: flex-start; }

/* pill clicavel (arquivar/desarquivar) */
.badge--toggle {
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: filter .15s ease, box-shadow .15s ease;
}
.badge--toggle:hover { filter: brightness(.95); }
.badge--toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .18);
}

/* ===== Correcoes ===== */

/* 1. seta dupla no dashboard: ".page-actions .select" (2 classes) vencia o
   ".select-ui__trigger" (1 classe) e reaplicava a seta de background */
.page-actions .select-ui__trigger {
    background-image: none;
    padding-right: 12px;
}

/* 2. sidebar descolando ao rolar: no grid, o item era esticado ate a altura
   total da pagina, e um sticky do tamanho do container nao tem para onde
   grudar. Com align-items:start ele volta a ter 100vh e cola. */
.app-shell { align-items: start; }

/* 5. toasts no canto inferior direito */
.toast-region { max-width: min(380px, calc(100vw - 40px)); }
.toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    box-shadow: 0 20px 24px rgba(149, 157, 165, .28);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    animation: toast-entra .22s ease;
}
/* mesmas cores dos alertas antigos: o toast inteiro assume o tom da mensagem */
.toast--success { border-color: #bde5ce; background: #f0faf5; color: var(--success); }
.toast--danger { border-color: #f2c8cc; background: #fff6f7; color: var(--danger); }
.toast.is-saindo { animation: toast-sai .22s ease forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-sai { to { opacity: 0; transform: translateY(10px); } }

/* o quadro da sidebar ja fica fixo; o que ainda rolava era a lista de menu por
   dentro (mais itens do que altura). overscroll-behavior impede que esse scroll
   "vaze" para a pagina e vice-versa. */
.nav-list {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* Campos de formulario com fundo proprio, para nao se confundirem com o card */
.input,.select,.textarea{background:var(--field);}
.input-group{background:var(--field);}
.input:focus,.select:focus,.textarea:focus{background:var(--surface);}

/* A lista do select agora mora no <body> para nao ser recortada pelos cards.
   Position fixed porque as coordenadas vem do getBoundingClientRect do gatilho. */
.select-ui__list--flutuante{position:fixed;box-sizing:border-box;top:auto;left:auto;right:auto;bottom:auto;z-index:1000;}

/* Detalhes da auditoria: dentro da celula "Detalhes" o bloco ficava com uns
   poucos caracteres por linha. Vira um painel ancorado a celula, largo o
   bastante para o conteudo respirar, sem alterar a largura da tabela. */
.table td:has(> details) { position: relative; }
.table details[open] > summary { font-weight: 700; }
.table details > .audit-data {
    position: absolute;
    z-index: 30;
    top: calc(100% - 6px);
    right: 16px;
    width: min(720px, 60vw);
    max-width: none;
    margin: 0;
    text-align: left;
    box-shadow: 0 18px 40px rgba(40, 24, 21, .22);
}
@media (max-width: 900px) {
    .table details > .audit-data { position: static; width: auto; box-shadow: none; }
}

/* ===== Contas: prestação de contas ===== */
.grid--kpi { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.kpi { padding:18px 20px; display:flex; flex-direction:column; gap:4px; }
.kpi small { color:var(--muted); font-size:12px; font-weight:600; }
.kpi strong { font:800 24px/1.2 var(--display); letter-spacing:-.02em; }
.kpi span { color:var(--muted); font-size:12px; }
.kpi--success strong { color:var(--success); }
.kpi--warning strong { color:var(--warning); }
.kpi--danger strong { color:var(--danger); }

.form-grid--filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}
.form-grid--filtros > .field { flex: 1 1 140px; min-width: 0; }
.form-grid--filtros > .filtros-acoes { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 640px) {
    .form-grid--filtros > .field { flex-basis: 100%; }
    .form-grid--filtros > .filtros-acoes { margin-left: 0; }
}

.barras { display:grid; gap:16px; }
.barra__topo { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:13px; }
.barra__trilho { height:8px; border-radius:20px; background:var(--surface-2); overflow:hidden; }
.barra__trilho span { display:block; height:100%; border-radius:20px; background:var(--brand); }
.barra small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }

/* Formulário em sobreposição: a lista continua atrás, como referência */
.modal { position:fixed; inset:0; z-index:120; display:none; }
.modal[aria-hidden="false"] { display:grid; place-items:center; padding:24px; }
.modal__backdrop { position:absolute; inset:0; background:rgba(31,30,26,.45); }
.modal__panel { position:relative; z-index:1; width:min(760px,100%); max-height:calc(100vh - 48px); overflow:auto; box-shadow:var(--shadow); }
.filtros-acoes { display:flex; flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.filtros-acoes .button { flex:0 0 auto; }

/* ===== Paginação (mesmo desenho do painel Altrn) =====
   Contagem à esquerda, setas e números à direita, sem caixas: só o ativo
   ganha fundo. Vale para todas as listagens do CRM. */
.pagination { align-items:center; justify-content:space-between; gap:4px; padding:22px 16px; border-top:1px solid var(--border); }
.pagination > span:first-child { flex-shrink:0; margin-right:auto; padding-right:16px; color:var(--muted); font-size:12px; font-weight:500; }
.pagination__pages { display:flex; align-items:center; gap:2px; }
.pagination__pages a,
.pagination__pages span {
    min-width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 6px;
    border:0;
    border-radius:8px;
    color:var(--text);
    font-size:13px;
    font-weight:500;
    text-decoration:none;
    transition:background-color .12s ease;
}
.pagination__pages a:hover { background:var(--surface-2); }
.pagination__pages .is-active,
.pagination__pages a.is-active:hover { background:var(--brand); color:#fff; cursor:default; }
.pagination__reticencias { color:var(--muted); opacity:.6; user-select:none; }
.pagination__seta { color:var(--text); }
.pagination__seta svg { width:16px; height:16px; display:block; }
.pagination__seta.is-inativa { opacity:.25; pointer-events:none; }

/* Caminho de navegação: os níveis anteriores são clicáveis */
.breadcrumb a { color:inherit; text-decoration:none; border-radius:5px; transition:color .15s ease; }
.breadcrumb a:hover { color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb a:focus-visible { outline:2px solid rgba(205,33,42,.35); outline-offset:2px; }

/* ===== Ajustes globais de acabamento ===== */

/* Avatar: a letra ficava colada no topo do circulo. Centralizar por
   line-height igual a altura nao depende do flex se comportar. */
.avatar { display: block; text-align: center; line-height: 36px; }
.avatar--large { line-height: 58px; }

/* Botoes sem sombra: a borda ja separa do fundo */
.button { box-shadow: none; }
.button:hover { box-shadow: none; }

/* Checkbox padrao do CRM, o mesmo do "manter conectado" do login */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #ded3d1;
    border-radius: 6px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:hover { border-color: #eaa9ac; }
input[type="checkbox"]:checked {
    border-color: var(--brand);
    background-color: var(--brand);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.4l3 3 6-6'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible { outline: 3px solid rgba(205,33,42,.28); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
.table .avatar, .user-menu .avatar { width:33px; height:33px; line-height:33px; }

/* ===== Formulários em linha (anexos, observações, relacionamentos) =====
   Os campos de texto tinham width:100% e engoliam a linha: o select ficava
   com uns 40px e o botão quebrava o texto em duas linhas. */
.inline-form { flex-wrap: wrap; }
.inline-form > .input { flex: 1 1 180px; width: auto; }
.inline-form > .select,
.inline-form > .select-ui { flex: 0 0 auto; width: auto; min-width: 170px; }
.inline-form > .select-ui > .select-ui__trigger { min-width: 170px; }
.inline-form > .button { flex: 0 0 auto; white-space: nowrap; }

/* Campo de arquivo: o botão nativo vinha com a fonte do sistema */
.input[type="file"] {
    display: block;
    padding: 4px 12px;
    line-height: 32px;
    color: var(--muted);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}
.input[type="file"]::file-selector-button {
    margin: 0 12px 0 0;
    padding: 6px 13px;
    line-height: 1.35;
    vertical-align: middle;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
.input[type="file"]::file-selector-button:hover { border-color: var(--brand); color: var(--brand); }

/* ===== Setas de <details> =====
   O triângulo nativo destoava do chevron dos dropdowns. Mesmo desenho,
   girando 90° ao abrir. */
summary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
    transform: rotate(-90deg);      /* fechado: aponta para a direita */
    transition: transform .2s ease;
}
details[open] > summary::before { transform: rotate(0deg); }  /* aberto: para baixo */

/* ===== Botão que liga e desliga =====
   Para uma escolha binária avulsa: clicar acende, clicar de novo apaga.
   O checkbox segue no DOM (invisível), então o formulário não muda. */
.chip-toggle { display: inline-flex; cursor: pointer; }
.chip-toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-toggle__corpo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 14px;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip-toggle__corpo::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transition: opacity .15s ease;
}
.chip-toggle:hover .chip-toggle__corpo { border-color: #eaa9ac; color: var(--text); }
.chip-toggle__input:checked + .chip-toggle__corpo {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}
.chip-toggle__input:checked + .chip-toggle__corpo::before { opacity: 1; }
.chip-toggle__input:focus-visible + .chip-toggle__corpo { outline: 3px solid rgba(205,33,42,.28); outline-offset: 2px; }

/* Botão solto dentro de um form-grid ocupa a linha inteira: sozinho numa
   coluna estreita ele quebrava o texto em duas linhas. */
.form-grid > .button { grid-column: 1 / -1; width: 100%; }

/* ===== Vincular relacionamento =====
   Em vez de escolher o tipo num dropdown e confirmar, cada tipo é um botão:
   escolhe a pessoa e clica no vínculo desejado. */
.vinculo-form { display: grid; gap: 12px; margin-top: 12px; }
.vinculo-form > .select,
.vinculo-form > .select-ui { width: 100%; }
.vinculo-tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.vinculo-tipos .button {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
}
.vinculo-tipos .button:hover { border-color: var(--brand); color: var(--brand); }

/* Formulário de endereço: logradouro ocupa a linha, o resto fica 50/50.
   Sem isso os seis campos disputavam uma coluna cada e ficavam minúsculos. */
/* Todo formulario que abre dentro de um <details> comeca com o mesmo
   respiro logo abaixo do titulo do bloco. */
.endereco-form,
details > .split-forms,
details > .inline-form { margin-top: 14px; }
.endereco-form > .input { grid-column: span 3; }
.endereco-form > .input[name="street"] { grid-column: 1 / -1; }

/* os formulários dentro de <details> precisam respirar depois do resumo */
details > form { margin-top: 12px; }

/* ===== Painel lateral: saída animada =====
   Só existia a entrada; ao fechar, o painel sumia de uma vez. */
.drawer__backdrop { animation: drawerFundoEntra .2s ease; }
.drawer.is-saindo .drawer__panel { animation: drawerSai .18s ease forwards; }
.drawer.is-saindo .drawer__backdrop { animation: drawerFundoSai .18s ease forwards; }
@keyframes drawerSai { to { transform: translateX(100%); opacity: .6; } }
@keyframes drawerFundoEntra { from { opacity: 0; } }
@keyframes drawerFundoSai { to { opacity: 0; } }

/* ===== Foto de perfil clicável ===== */
.avatar-form { display: inline-flex; }
.avatar--editavel { position: relative; overflow: hidden; cursor: pointer; }
.avatar__imagem { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__acao {
    position: absolute;
    inset: auto 0 0 0;
    padding: 3px 0 4px;
    background: rgba(31, 30, 26, .62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .02em;
    opacity: 0;
    transition: opacity .15s ease;
}
.avatar--editavel:hover .avatar__acao,
.avatar--editavel:focus-within .avatar__acao { opacity: 1; }

/* Rótulo com caixa de seleção: alinha a caixa com o texto e dá respiro.
   Antes o checkbox subia acima da linha por causa do vertical-align padrão. */
label:has(> input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 14px 0 4px;
    line-height: 1.35;
    cursor: pointer;
}
/* dentro de listas e formulários em linha não precisa da margem extra */
.inline-form label:has(> input[type="checkbox"]),
.role-option label:has(> input[type="checkbox"]),
.login-options label:has(> input[type="checkbox"]),
.input-group--chip label:has(> input[type="checkbox"]) { margin: 0; }

/* Barra de rolagem da navegação: a lista rola, mas sem a barra à vista */
.sidebar, .nav-list {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* Edge antigo */
}
.sidebar::-webkit-scrollbar,
.nav-list::-webkit-scrollbar { width: 0; height: 0; }

/* Botão de opção no mesmo desenho da caixa de seleção */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #ded3d1;
    border-radius: 50%;
    background-color: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="radio"]:hover { border-color: #eaa9ac; }
input[type="radio"]:checked {
    border-color: var(--brand);
    border-width: 5px;              /* o miolo é a própria borda */
}
input[type="radio"]:focus-visible { outline: 3px solid rgba(205,33,42,.28); outline-offset: 2px; }
label:has(> input[type="radio"]) {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1.35;
    cursor: pointer;
}

/* ===== Campo de arquivo em português =====
   O texto "Choose File / No file chosen" vem do navegador e não aceita
   tradução por CSS. Escondemos o controle nativo e desenhamos o nosso. */
.arquivo-campo { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; cursor: pointer; }
.arquivo-campo > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.arquivo-campo__botao {
    flex: 0 0 auto;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    transition: border-color .15s ease, color .15s ease;
}
.arquivo-campo:hover .arquivo-campo__botao { border-color: var(--brand); color: var(--brand); }
.arquivo-campo__nome {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 13px;
}
.arquivo-campo__nome.tem-arquivo { color: var(--text); font-weight: 600; }

/* Campo de arquivo mantém o rótulo acima: flutuante cobriria o nome do arquivo */
.field--arquivo > label {
    position: static;
    transform: none;
    padding: 0;
    margin-bottom: 6px;
    background: none;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

/* ===== Biblioteca de mídias ===== */
.midia-grade {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
}
@media (max-width: 1400px) { .midia-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .midia-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .midia-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.midia-item {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
    transition: border-color .18s ease, transform .18s ease;
}
.midia-item:hover { border-color: var(--brand); }
.midia-item:focus-visible { outline: 3px solid rgba(205,33,42,.28); outline-offset: 2px; }
.midia-item__imagem { width: 100%; height: 100%; object-fit: cover; display: block; }
.midia-item__icone {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
}
.midia-item__tipo {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 2;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(31, 30, 26, .55);
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .01em;
    opacity: 0;
    transition: opacity .16s ease;
}
.midia-item__nome {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 18px 9px 8px;
    background: linear-gradient(to top, rgba(31,30,26,.78), rgba(31,30,26,0));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transition: opacity .16s ease;
}
/* nome e etiqueta so aparecem ao passar o mouse ou focar */
.midia-item:hover .midia-item__tipo,
.midia-item:hover .midia-item__nome,
.midia-item:focus-visible .midia-item__tipo,
.midia-item:focus-visible .midia-item__nome { opacity: 1; }

/* painel de detalhe */
.midia-detalhe { display: grid; gap: 16px; padding: 20px; overflow: auto; }
.midia-previa {
    display: grid;
    place-items: center;
    min-height: 190px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}
.midia-previa img,
.midia-previa video { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; }
.midia-dados { display: grid; gap: 10px; margin: 0; }
.midia-dados > div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border); }
.midia-dados > div:last-child { border-bottom: 0; padding-bottom: 0; }
.midia-dados dt { color: var(--muted); font-size: 12px; }
.midia-dados dd { margin: 0; font-size: 13px; font-weight: 600; text-align: right; word-break: break-word; }

/* Painel lateral rolável: cabeçalho fixo, conteúdo com rolagem própria */
.drawer__panel { display: flex; flex-direction: column; }
.drawer__panel > header { flex: 0 0 auto; }
.drawer__panel > .midia-detalhe,
.drawer__panel > .card__body,
.drawer__panel > .empty-state { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Ações do filtro ocupam o que sobrou da linha e ficam à direita.
   Quando os campos já preenchem a linha toda, caem na seguinte alinhadas
   do mesmo jeito. */
.form-grid--filtros > .filtros-acoes { justify-content: flex-end; align-items: center; }

/* Botoes do filtro com a mesma altura dos campos: com 39px eles ficavam
   alinhados pela base, mas visivelmente mais baixos que os inputs. */
.form-grid--filtros > .filtros-acoes .button { min-height: 48px; }

/* Indicadores do Integration Hub: a view usa rótulo e valor empilhados */
.stat__label { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
.stat__value { display: block; margin-top: 4px; font: 800 24px/1.2 var(--display); letter-spacing: -.02em; }

/* Lista compacta com item clicável: a regra original só alcançava
   ".compact-list > div", e aqui há um <a> no meio — sem isso o rótulo e o
   valor ficavam colados na mesma linha. */
.compact-list > a { display: block; color: inherit; text-decoration: none; }
.compact-list > a > div,
.compact-list > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--surface-2);
    transition: background-color .15s ease;
}
.compact-list > a:hover > div { background: #fff1f0; }

/* ===== Mídia em tela cheia (modelo da biblioteca do Altrn) =====
   Prévia grande à esquerda, dados e edição à direita, rolagem só na coluna
   da direita para a imagem ficar sempre à vista. */
.modal--midia .modal__panel { width: min(1120px, 100%); max-height: calc(100vh - 48px); overflow: hidden; }
.modal--midia .card__header { padding: 16px 20px; }
.modal--midia .card__header h2 {
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 60px);
}
.modal--midia .midia-detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.9fr);
    /* A linha precisa poder encolher; sem isso ela cresce ate o conteudo,
       as colunas herdam essa altura e a rolagem da direita nunca acontece. */
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    max-height: calc(100vh - 130px);
}
.modal--midia .midia-previa {
    min-height: 0;
    padding: 28px;
    border: 0;
    border-radius: 0;
    background: var(--surface-2);
}
.modal--midia .midia-previa img,
.modal--midia .midia-previa video { max-height: calc(100vh - 200px); max-width: 100%; }
.modal--midia .midia-lado {
    /* Coluna em flex para o rodape de acoes poder ser empurrado ate a base
       com margin-top:auto, em vez de ficar grudado no ultimo campo. */
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Sem min-height:0 a coluna cresce ate o conteudo e o overflow nunca
       entra em acao — era o que deixava o rodape fora de alcance. */
    min-height: 0;
    padding: 22px;
    overflow-y: auto;
    border-left: 1px solid var(--border);
}
.midia-acoes {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}
.midia-acoes form { display: inline-flex; }

/* No modal da galeria as acoes sao texto puro, como na Altrn: sem caixa,
   sem borda e sem sombra — o que pesa a leitura ao lado da imagem.
   Endereço | Salvar | Abrir | Excluir vivem na mesma linha, no rodapé. */
.midia-acoes {
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}
.midia-acoes .button {
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
    font-weight: 600;
}
.midia-acoes .button:hover { text-decoration: underline; }

/* As barras separadoras entram entre os itens, nunca antes do primeiro. */
.midia-acoes > *:not(:first-child)::before {
    content: "|";
    margin-right: 12px;
    color: var(--border);
    font-weight: 400;
}
.midia-acoes > form:not(:first-child) { align-items: center; }

/* Numa coluna flex que rola, os filhos encolhem em vez de transbordar;
   travar o encolhimento e o que faz a rolagem acontecer de verdade. */
.modal--midia .midia-lado > * { flex-shrink: 0; }

.midia-acao--neutra { color: var(--text); }
.midia-acoes .button--danger { color: var(--danger); background: transparent; }

/* ===== Setas de navegação da galeria =====
   Ficam presas às laterais do painel, fora da área de leitura, para percorrer
   os arquivos sem fechar e reabrir o modal. */
.midia-seta {
    /* Fixas nas bordas da tela, e nao dentro do painel: assim o painel
       continua recortando o proprio conteudo e a coluna da direita rola. */
    position: fixed;
    top: 50%;
    z-index: 3;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.midia-seta:hover { border-color: var(--brand); color: var(--brand); }
.midia-seta--anterior { left: 24px; }
.midia-seta--proxima { right: 24px; }

@media (max-width: 900px) {
    .midia-seta--anterior { left: 8px; }
    .midia-seta--proxima { right: 8px; }
}

@media (max-width: 900px) {
    .modal--midia .midia-detalhe { grid-template-columns: 1fr; max-height: calc(100vh - 120px); overflow-y: auto; }
    .modal--midia .midia-lado { border-left: 0; border-top: 1px solid var(--border); }
    .modal--midia .midia-previa { min-height: 240px; }
}

/* A marca leva ao painel */
.brand__link { display: inline-flex; align-items: center; border-radius: 8px; }
.brand__link:focus-visible { outline: 3px solid rgba(205,33,42,.28); outline-offset: 3px; }
.brand__link:hover { opacity: .85; }


/* ===== WhatsApp dentro do campo de telefone =====
   Reaproveita o .input-group: o container é que tem a borda e o fundo do
   campo, o input fica sem borda e o botão senta na ponta direita, dentro.
   Assim a coluna do telefone tem as mesmas duas linhas da de e-mail e os
   botões "Adicionar" terminam na mesma altura. */
.input-group--chip {
    gap: 8px;
    /* as medidas do campo ficam aqui, para o conjunto ter exatamente a
       mesma altura e o mesmo fundo dos campos vizinhos */
    min-height: 42px;
    padding: 0 6px 0 0;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--field);
}
.input-group--chip > .input {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.input-group--chip > .input:focus { background: transparent; box-shadow: none; }
.input-group--chip:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(205, 33, 42, .10);
}
.chip-toggle--dentro { flex: 0 0 auto; }
.chip-toggle--dentro .chip-toggle__corpo {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 12px;
}

/* ===== Timeline recolhida =====
   Depois de cinco registros a lista fica longa demais para uma ficha. Os
   demais somem e um véu do branco para o transparente cobre o último visível,
   dando a noção de que a lista continua. */
.timeline--recolhida { position: relative; }
.timeline--recolhida .timeline__item.is-oculto { display: none; }
.timeline--recolhida::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 72px;
    background: linear-gradient(to bottom, transparent, var(--surface));
    pointer-events: none;
}
.timeline-mais {
    display: flex;
    justify-content: center;
    /* acima do véu: sem isso o gradiente opaco cobria a metade de baixo
       do botão e ele aparecia cortado */
    position: relative;
    z-index: 1;
    margin-top: 6px;
}
.timeline-mais .button { min-width: 200px; justify-content: center; }

/* ===== Ações na lista de doações =====
   Confirmar é um clique só; estornar abre a justificativa, que é obrigatória
   e vai para aprovação da Diretoria. */
.doacao-acoes { white-space: nowrap; text-align: right; }
.doacao-acoes .button { padding: 6px 12px; min-height: 32px; font-size: 13px; }
.doacao-acoes details { margin: 0; }
.doacao-acoes details > summary { font-size: 13px; }
/* O formulario abre dentro da propria celula e faz a linha crescer. Flutuar
   nao funciona aqui: .table-wrap tem overflow:auto e recorta qualquer coisa
   que passe da borda da tabela. */
.doacao-acoes details[open] > form {
    width: 260px;
    margin: 10px 0 4px auto;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    text-align: left;
    white-space: normal;
}
.doacao-acoes details[open] > form .button { width: 100%; margin-top: 10px; }
.doacao-acoes details[open] > form .field { margin: 0; }

/* ===== Mudar a situação de uma assinatura =====
   O seletor e o botão dividem a linha; o rótulo flutuante do padrão do site
   entra sozinho pelo script, então aqui só resolvemos a largura. */
.assinatura-acao {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.assinatura-acao .field { min-width: 150px; margin: 0; }
/* O seletor com rótulo flutuante tem 48px; o botão padrão, 39px. Igualamos
   pelo maior para os dois terminarem na mesma linha de base. */
.assinatura-acao .button {
    flex: 0 0 auto;
    min-height: 48px;
}

/* ===== Estado de um gateway =====
   Duas colunas de rótulo e valor, para ler a situação de relance. */
.gateway-estado { display: grid; gap: 10px; margin: 0; }
.gateway-estado > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--surface-2);
}
.gateway-estado dt { margin: 0; color: var(--muted); font-size: 13px; }
.gateway-estado dd { margin: 0; font-size: 13px; font-weight: 700; }
.gateway-estado dd.is-ok { color: var(--success); }
.gateway-estado dd.is-off { color: var(--muted); }

/* ===== Ranking (Top Campanhas) =====
   Fica dentro de .compact-list, cuja regra geral empilha os filhos em coluna —
   era por isso que a posição aparecia acima do nome. Aqui a linha volta a ser
   horizontal: posição à esquerda, nome e contagem ao lado. */
/* Qualificado com .compact-list porque a regra geral dessa lista
   (.compact-list>div) tem especificidade maior que uma classe sozinha e
   continuava empilhando os filhos em coluna. */
.compact-list > .rank-item,
.rank-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}
.rank-item__pos {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
.rank-item__corpo { min-width: 0; flex: 1; }
.rank-item__corpo > strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Estatísticas do site =====
   Listas com barra proporcional (o maior valor define 100%) e um gráfico de
   colunas simples para a série diária. Sem biblioteca de gráfico: são barras
   de CSS, que bastam para leitura de tendência. */
.variacao { font-weight: 700; }
.variacao--sobe { color: var(--success); }
.variacao--desce { color: var(--danger); }

.stats-lista { display: grid; gap: 12px; }
.stats-lista__topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 5px;
    font-size: 13px;
}
.stats-lista__topo > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
}
.stats-lista__topo > strong { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.stats-lista__trilho { height: 5px; border-radius: 99px; background: var(--border); }
.stats-lista__trilho > span {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--brand);
    transition: width .4s ease;
}

.serie-barras {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 140px;
}
.serie-barras__coluna { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.serie-barras__barra {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--brand);
    opacity: .85;
    transition: opacity .15s ease;
}
.serie-barras__coluna:hover .serie-barras__barra { opacity: 1; }

.bloco-codigo {
    margin: 12px 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
    overflow-x: auto;
    white-space: pre;
}

/* ===== Menu do usuário (topo à direita) =====
   O "Sair" morava num botão vermelho no pé da barra lateral, competindo em
   destaque com os itens de navegação. Aqui ele vira o que costuma ser: uma
   opção dentro do menu da própria conta. */
.user-menu { position: relative; }
.user-menu__gatilho {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}
.user-menu__gatilho:hover { background: var(--surface-2); }
.user-menu__seta { display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.user-menu__gatilho[aria-expanded="true"] .user-menu__seta { transform: rotate(180deg); }

.user-menu__painel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    min-width: 220px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow);
    animation: userMenuEntra .16s ease;
}
.user-menu__painel[hidden] { display: none; }
@keyframes userMenuEntra { from { opacity: 0; transform: translateY(-4px); } }

.user-menu__email {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    word-break: break-all;
}
.user-menu__sair {
    width: 100%;
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    padding: 0 8px;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.user-menu__sair:hover { background: #fff1f2; color: var(--danger); }

/* Ação secundária dentro do menu da conta (trocar foto) */
.user-menu__acao {
    width: 100%;
    min-height: 36px;
    margin-bottom: 4px;
    padding: 0 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}
.user-menu__acao:hover { background: var(--surface-2); }

/* ===== Foto dentro do avatar =====
   Sem isto a imagem entra no tamanho original e estoura o círculo: o avatar é
   um grid de 36px, mas a img não tinha nenhuma restrição. object-fit recorta
   pelo centro, então retrato ou paisagem preenchem igual, sem distorcer. */
.avatar { overflow: hidden; }
.avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: inherit;
}
.avatar--large > img { border-radius: inherit; }

/* Rodapé de lista curta: só a contagem, alinhada à esquerda.
   Onde não há páginas, a barra de paginação inteira é ruído. */
.lista-rodape {
    padding: 14px 20px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
}

/* O card se estica para acompanhar a altura do vizinho na mesma linha do grid,
   então o rodapé ficava grudado na tabela com um vazio embaixo. Em coluna
   flex, margin-top:auto o empurra para a base do card. */
.card:has(> .lista-rodape) {
    display: flex;
    flex-direction: column;
}
.card > .lista-rodape { margin-top: auto; }