/* Appyon Payments Cockpit — Componentes */

/* ---------- Tipografia utilitária ---------- */
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.muted{ color:var(--text-3); }
.small{ font-size:12.5px; color:var(--text-3); }
.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- Botões ---------- */
.btn{ display:inline-flex; align-items:center; gap:7px; border-radius:var(--radius-sm); border:1px solid var(--hairline-strong); background:var(--panel); color:var(--text); font-size:13px; font-weight:600; padding:8px 14px; cursor:pointer; transition:background var(--motion-base) var(--ease-standard), border-color var(--motion-base) var(--ease-standard); white-space:nowrap; }
.btn svg{ width:15px; height:15px }
.btn:hover{ background:var(--panel-hover); }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-danger{ background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-sm{ padding:6px 10px; font-size:12px; }

/* ---------- Chips / badges ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--radius-pill); font-size:11.5px; font-weight:700; border:1px solid transparent; white-space:nowrap; text-decoration:none; }
.chip-good{ background:var(--good-bg); color:var(--good); border-color:var(--good-line); }
.chip-warn{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.chip-warn2{ background:var(--warn2-bg); color:var(--warn2); border-color:var(--warn2-line); }
.chip-bad{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.chip-ctx{ background:var(--ctx-bg); color:var(--ctx); border-color:var(--ctx-line); }
.chip-accent{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--hairline-strong); }
.chip-neutral{ background:var(--panel-hover); color:var(--text-2); border-color:var(--hairline-strong); }
.chip-lg{ padding:5px 12px; font-size:12.5px; }

.pr,.chip-prio{ display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; padding:3px 7px; border-radius:8px; font-size:10px; font-weight:700; border:1px solid transparent; line-height:1.25; }
#ckTable .pr{ padding:2px 5px; }
.pr b,.chip-prio b{ font-size:12px; }
.pr span,.chip-prio span{ font-weight:600; font-size:10px; opacity:.85; }
.pr-P0,.chip-prio[data-p="P0"]{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.pr-P1,.chip-prio[data-p="P1"]{ background:var(--warn2-bg); color:var(--warn2); border-color:var(--warn2-line); }
.pr-P2,.chip-prio[data-p="P2"]{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--hairline-strong); }
.pr-P3,.pr-P4,.chip-prio[data-p="P3"],.chip-prio[data-p="P4"]{ background:var(--good-bg); color:var(--good); border-color:var(--good-line); }

.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; flex:none; }
.dot-good{ background:var(--good); }
.dot-warn{ background:var(--warn); }
.dot-bad{ background:var(--bad); }
.dot-accent{ background:var(--accent-strong); }
.dot-muted{ background:var(--text-3); }
.status-txt{ display:inline-flex; align-items:center; font-size:13px; font-weight:600; }

/* ---------- Cards genéricos ---------- */
.card{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-4); }
.card-title{ font-size:14px; font-weight:700; display:flex; align-items:center; gap:8px; }
.card-title svg{ width:16px; height:16px; color:var(--text-2); }

/* ---------- Filtros ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-bottom:var(--space-4); }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; }
select,.input{ background:var(--input-bg); border:1px solid var(--input-border); color:var(--text); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; min-height:36px; }
select:focus,.input:focus{ border-color:var(--input-focus); }
.search-input{ display:flex; align-items:center; gap:8px; background:var(--input-bg); border:1px solid var(--input-border); border-radius:var(--radius-sm); padding:0 10px; min-height:36px; flex:1; min-width:220px; }
.search-input svg{ width:15px; height:15px; color:var(--text-3); flex:none; }
.search-input input{ border:0; background:transparent; outline:0; color:var(--text); font-size:13px; flex:1; min-width:0; }

/* ---------- Segmented (pill filter buttons) ---------- */
.pillbar{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.pillbtn{ border:1px solid var(--hairline-strong); background:var(--panel); border-radius:var(--radius-md); padding:10px 16px; cursor:pointer; display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:120px; }
.pillbtn b{ font-size:15px; }
.pillbtn span{ font-size:11.5px; color:var(--text-3); }
.pillbtn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.pillbtn[aria-pressed="true"] span{ color:#e4ecff; }

/* ---------- Tabelas ---------- */
/* ux-final.md H1: sem indicador de scroll horizontal, usuário não percebia que havia mais
   colunas fora da área visível (frentes.html/fontes.html/auditoria.html e qualquer .table-wrap
   estreito). Fix puro CSS (sem JS, funciona em conteúdo populado dinamicamente): sombras de
   scroll que só aparecem no lado em que ainda há conteúdo fora da viewport — técnica clássica de
   2 backgrounds "local" (cobrem a sombra "scroll" enquanto o conteúdo correspondente não rolou
   até a borda) + scrollbar sempre visível (fina) como reforço para quem prefere reduced-motion. */
.table-wrap{
  overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--hairline);
  scrollbar-width:thin; scrollbar-color:var(--hairline-strong) transparent;
  background-repeat:no-repeat;
  background-size:24px 100%, 24px 100%, 10px 100%, 10px 100%;
  background-position:0 0, 100% 0, 0 0, 100% 0;
  background-attachment:local, local, scroll, scroll;
  background-image:
    linear-gradient(to right, var(--panel) 30%, transparent),
    linear-gradient(to left, var(--panel) 30%, transparent),
    linear-gradient(to right, var(--hairline-strong), transparent),
    linear-gradient(to left, var(--hairline-strong), transparent);
}
.table-wrap::-webkit-scrollbar{ height:8px; }
.table-wrap::-webkit-scrollbar-thumb{ background:var(--hairline-strong); border-radius:4px; }
.table-wrap::-webkit-scrollbar-track{ background:transparent; }
table.tbl{ width:100%; border-collapse:collapse; min-width:640px; }
table.tbl thead th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); font-weight:700; background:var(--table-head-bg); padding:8px 8px; border-bottom:1px solid var(--hairline-strong); white-space:nowrap; }
#ckTable thead th{ padding:8px 6px; font-size:9.5px; }
table.tbl thead th.num{ text-align:right; }
table.tbl tbody td{ padding:8px 8px; border-bottom:1px solid var(--hairline); font-size:13px; vertical-align:middle; }
#ckTable tbody td{ padding:6px; }
table.tbl tbody td.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
table.tbl tbody tr:last-child td{ border-bottom:0; }
table.tbl tbody tr:hover{ background:var(--panel-hover); }
table.tbl tbody tr.alt{ background:var(--row-alt); }
table.tbl tbody tr.row-critical{ background:var(--bad-bg); }
table.tbl td:first-child,table.tbl th:first-child{ min-width:220px; }
#ckTable td:first-child,#ckTable th:first-child{ min-width:170px; max-width:185px; }
table.tbl.no-min,table.tbl.no-min td,table.tbl.no-min th{ min-width:0; }
table.tbl.no-min{ table-layout:auto; }
.cell-title{ display:flex; align-items:center; gap:10px; min-width:0; }
.cell-title .ic{ width:30px; height:30px; border-radius:9px; background:var(--panel-hover); display:flex; align-items:center; justify-content:center; flex:none; }
.cell-title .ic svg{ width:15px; height:15px; color:var(--text-2); }
.cell-title .txt b{ display:block; font-size:13.5px; font-weight:700; }
.cell-title .txt span{ display:block; font-size:11.5px; color:var(--text-3); }
.progress{ height:6px; border-radius:99px; background:var(--panel-hover); overflow:hidden; width:100%; min-width:90px; }
.progress b{ display:block; height:100%; background:var(--accent); border-radius:99px; }

/* ---------- Cockpit — inputs e colunas especiais ---------- */
.ck-unit{ display:inline-flex; align-items:center; gap:4px; }
.ck-unit input.ck-in{ width:64px; text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; background:var(--input-bg); border:1px solid var(--input-border); border-radius:7px; padding:5px 6px; color:var(--text); font-size:12.5px; }
#ckTable .ck-unit input.ck-in{ width:52px; padding:4px 5px; font-size:12px; }
.ck-unit input.ck-in.invalid{ border-color:var(--bad); }
.ck-unit i{ font-style:normal; color:var(--text-3); font-size:10.5px; }
#ckTable .ck-unit{ gap:2px; }
#ckTable td{ white-space:nowrap; }
#ckTable .kpi-cell,#ckTable .ck-read{ white-space:normal; }
.ck-err{ display:block; color:var(--bad); font-size:10.5px; margin-top:2px; }
.ck-health{ display:flex; flex-direction:column; gap:2px; }
.ck-health b{ font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; padding:1px 5px; border-radius:6px; width:fit-content; border:1px solid transparent; }
.ck-health span{ font-size:10px; color:var(--text-2); }
.ck-health.empty{ color:var(--text-3); }
.lv-Crítico,.lv-Ruim{ background:var(--bad-bg); color:var(--bad); border-color:var(--bad-line); }
.lv-Atenção{ background:var(--warn-bg); color:var(--warn); border-color:var(--warn-line); }
.lv-Bom,.lv-Excelente{ background:var(--good-bg); color:var(--good); border-color:var(--good-line); }
.lv-ctx,.lv-CONTEXTUAL{ background:var(--ctx-bg); color:var(--ctx); border-color:var(--ctx-line); }
.lv-SEM,.lv-none{ background:var(--panel-hover); color:var(--text-3); border-color:var(--hairline-strong); }
.tr-up{ color:var(--good); } .tr-down{ color:var(--bad); } .tr-flat{ color:var(--text-2); }
.tr-invalid,.tr-incomparable,.tr-nodata,.tr-contextual{ color:var(--warn); }
.ck-delta{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-weight:700; }
.ck-gap{ font-size:10px; color:var(--text-2); margin-top:2px; }
.gap-hit{ color:var(--good); font-weight:700; }
.gap-late{ color:var(--bad); font-weight:700; }
.gap-open{ color:var(--text-2); }
.gap-none{ color:var(--text-3); }
.ck-read{ font-size:11px; color:var(--text-3); margin-top:2px; max-width:190px; white-space:normal; }
.kpi-cell{ min-width:190px; max-width:210px; }
#ckTable .kpi-cell{ min-width:170px; max-width:185px; }
#ckTable .kpi-cell .kpi-name a{ font-size:12px; }
.kpi-cell .kpi-name a{ font-weight:700; text-decoration:none; color:var(--text); }
.kpi-cell .kpi-name a:hover{ color:var(--accent-strong); }
.ck-prio{ display:inline-flex; }
.ck-prio.empty{ color:var(--text-3); }
.ck-badge{ font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:middle; }
.ck-badge.mtd{ background:var(--warn-bg); color:var(--warn); }
.ck-badge.fut{ background:var(--panel-hover); color:var(--text-3); }
#ckTable .ck-detail{ padding:4px 6px; font-size:10.5px; }
.ck-detail{ border:1px solid var(--hairline-strong); background:var(--panel-hover); color:var(--accent-strong); border-radius:7px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
button.ck-detail:hover{ background:var(--accent-soft); }

/* Cards de KPI mobile do cockpit */
.ck-cards{ display:none; flex-direction:column; gap:var(--space-3); }
.ck-card{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-4); }
.ck-card-head{ display:flex; align-items:center; justify-content:space-between; }
.ck-card-name{ font-weight:700; text-decoration:none; color:var(--text); }
.ck-card-inputs{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2); margin:var(--space-3) 0; min-width:0; }
.ck-card-inputs label{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--text-3); }
.ck-card-facts{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-2); border-top:1px solid var(--hairline); padding-top:var(--space-3); min-width:0; }
.ck-card-facts .lab{ display:block; font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.ck-card-act{ margin-top:var(--space-3); text-align:right; }
@media (max-width:900px){ .table-wrap.ck-table-wrap{ display:none; } .ck-cards{ display:flex; } }

/* ---------- Tabs ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:2px 12px; border-bottom:1px solid var(--hairline); margin-bottom:var(--space-4); }
.tabs button{ border:0; background:transparent; color:var(--text-3); font-weight:700; font-size:11.5px; padding:10px 2px; white-space:nowrap; cursor:pointer; border-bottom:2px solid transparent; }
.tabs button[aria-selected="true"]{ color:var(--accent-strong); border-color:var(--accent-strong); }
.tabpanel{ display:none; }
.tabpanel.active{ display:block; }

/* ---------- Drawer / detalhe lateral ---------- */
.drawer-close{ border:0; background:var(--panel-hover); width:28px; height:28px; border-radius:8px; color:var(--text-2); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.drawer-close svg{ width:14px; height:14px; }

/* ---------- Notices / listas de texto ---------- */
.notice{ background:var(--panel-hover); border:1px solid var(--hairline-strong); border-radius:var(--radius-sm); padding:var(--space-3) var(--space-4); font-size:13px; color:var(--text-2); }
/* Banner de erro/offline global (item 70) — nunca deixar falha de API parecer "dataset vazio" */
.notice-error{ background:var(--bad-bg); border-color:var(--bad-line); color:var(--bad); margin-bottom:var(--space-4); }
.notice-warn{ background:var(--warn-bg); border-color:var(--warn-line); color:var(--warn); margin-bottom:var(--space-4); }
.kv-list{ display:flex; flex-direction:column; gap:var(--space-3); }
.kv-item{ display:flex; justify-content:space-between; gap:var(--space-3); align-items:flex-start; }
.kv-item b{ font-size:13px; }
.kv-item .val{ text-align:right; }
.ordered-list{ margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.numbered-steps{ display:flex; flex-direction:column; gap:var(--space-3); min-width:0; }
.numbered-steps .step{ display:flex; gap:var(--space-3); align-items:flex-start; min-width:0; }
.numbered-steps .n{ width:24px; height:24px; border-radius:50%; background:var(--accent-soft); color:var(--accent-strong); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex:none; }
/* P1-5: sem min-width:0 no filho flex, o texto longo (título/por quê/dependência) empurra a
   largura da página inteira no mobile (287px de overflow medido em 320px); chips de frentes
   relacionadas precisam quebrar linha, não estourar */
.numbered-steps .step > div{ flex:1 1 auto; min-width:0; }
.numbered-steps .step p{ overflow-wrap:anywhere; }
.numbered-steps .step > div > div{ display:flex; flex-wrap:wrap; }
/* Causa raiz real do P1-5: um único chip de frente com título longo (ex.: 83 caracteres) não
   encolhe num flex item mesmo com flex-wrap no pai (.chip herda white-space:nowrap global) —
   sem isso o item força scrollWidth do container inteiro (271px medido em 375px de viewport). */
.numbered-steps .step .chip{ white-space:normal; overflow-wrap:anywhere; max-width:100%; }

/* ---------- Toggle (switches desabilitados de settings) ---------- */
.toggle{ position:relative; width:38px; height:22px; border-radius:99px; background:var(--panel-hover); border:1px solid var(--hairline-strong); flex:none; cursor:pointer; }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-3); transition:transform var(--motion-base); }
.toggle[aria-checked="true"]{ background:var(--accent); border-color:var(--accent); }
.toggle[aria-checked="true"]::after{ transform:translateX(16px); background:#fff; }
.toggle[disabled]{ opacity:.55; cursor:not-allowed; }
.settings-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) 0; border-bottom:1px solid var(--hairline); }
.settings-row:last-child{ border-bottom:0; }
.settings-row .txt b{ display:block; font-size:13.5px; }
.settings-row .txt span{ display:block; font-size:12px; color:var(--text-3); margin-top:2px; }
.settings-row select,.settings-row .input{ min-width:170px; }
.settings-group{ margin-bottom:var(--space-3); }
.settings-group h3{ display:flex; align-items:center; gap:8px; font-size:14px; margin:0 0 2px; }
.settings-group h3 svg{ width:16px; height:16px; color:var(--accent-strong); }
.settings-group .subtitle{ margin:0 0 var(--space-2); font-size:12px; color:var(--text-3); }
.settings-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); align-items:start; min-width:0; }
.settings-grid > *{ min-width:0; }
@media (max-width:1180px){ .settings-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .settings-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:var(--space-7) var(--space-4); color:var(--text-3); }
.empty-state svg{ width:36px; height:36px; margin-bottom:var(--space-3); opacity:.6; }
.empty-state b{ display:block; color:var(--text-2); font-size:14px; margin-bottom:4px; }

/* ---------- Pagination ---------- */
.pagination{ display:flex; align-items:center; gap:6px; margin-top:var(--space-3); flex-wrap:wrap; }
.pagination button{ border:1px solid var(--hairline-strong); background:var(--panel); color:var(--text-2); width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:12.5px; }
.pagination button[aria-current="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }

/* Sombra apenas em elevação real */
.elevated{ box-shadow:var(--shadow-2); }

/* ---------- Overlay / popover / modal de busca ---------- */
.scrim{ position:fixed; inset:0; background:var(--overlay); z-index:var(--z-overlay); opacity:0; pointer-events:none; transition:opacity var(--motion-base) var(--ease-standard); }
.scrim.show{ opacity:1; pointer-events:auto; }
.nav-burger{ display:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--hairline-strong); background:var(--panel); align-items:center; justify-content:center; cursor:pointer; color:var(--text-2); flex:none; }
.nav-burger svg{ width:17px; height:17px; }
/* Mesmo limiar de shell.css (sidebar colapsável 901–1280px, drawer ≤1280px) — ver P1-4 */
@media (max-width:1280px){ .nav-burger{ display:flex; } }

.popover{ position:absolute; top:calc(100% + 8px); right:0; min-width:280px; max-width:360px; background:var(--menu-bg); border:1px solid var(--hairline-strong); border-radius:var(--radius-md); box-shadow:var(--menu-shadow); padding:var(--space-3); z-index:var(--z-menu); display:none; }
.popover.show{ display:block; }
.popover h4{ margin:0 0 var(--space-2); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.popover .item{ padding:8px 6px; border-radius:8px; font-size:13px; }
.popover .item:hover{ background:var(--panel-hover); }
.popover .empty{ padding:12px 6px; font-size:13px; color:var(--text-3); text-align:center; }
.pop-wrap{ position:relative; }

.search-modal{ position:fixed; inset:0; z-index:var(--z-drawer); display:none; align-items:flex-start; justify-content:center; padding-top:12vh; }
.search-modal.show{ display:flex; }
.search-modal .box{ width:min(620px,92vw); background:var(--panel); border:1px solid var(--hairline-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; }
.search-modal .box-input{ display:flex; align-items:center; gap:10px; padding:var(--space-4); border-bottom:1px solid var(--hairline); }
.search-modal .box-input svg{ width:18px; height:18px; color:var(--text-3); }
.search-modal .box-input input{ flex:1; border:0; background:transparent; outline:0; font-size:15px; color:var(--text); }
.search-modal .results{ max-height:52vh; overflow-y:auto; padding:var(--space-2); }
.search-modal .result{ display:flex; flex-direction:column; padding:10px 12px; border-radius:9px; cursor:pointer; text-decoration:none; color:var(--text); }
.search-modal .result:hover,.search-modal .result.active{ background:var(--panel-hover); }
.search-modal .result b{ font-size:13.5px; }
.search-modal .result span{ font-size:11.5px; color:var(--text-3); }
.search-modal .empty{ padding:var(--space-6) var(--space-4); text-align:center; color:var(--text-3); font-size:13px; }
.search-modal .search-group-label{ padding:10px 12px 4px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }

.month-pop{ padding:var(--space-3); }
.month-pop input[type="month"]{ width:100%; }

/* ---------- Cockpit: cards "precisa de atenção" ---------- */
/* auto-fit em vez de repeat(4,...) fixo — com 1-2 KPIs em P0/P1 (estado comum) não sobra 75% de
   largura vazia parecendo painel quebrado (L1 do ux-audit) */
.attention-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); justify-content:flex-start; gap:var(--space-3); min-width:0; }
.att-card{ border:1px solid var(--hairline-strong); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); background:var(--panel-hover); }
.att-card .head{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.att-card .head .ic{ width:26px; height:26px; border-radius:8px; background:var(--panel); display:flex; align-items:center; justify-content:center; flex:none; }
.att-card .head .ic svg{ width:14px; height:14px; color:var(--text-2); }
.att-card .head b{ font-size:12.5px; font-weight:700; flex:1; min-width:0; }
.att-card .val{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.att-card .val .d{ font-size:12px; font-weight:700; }
.att-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:11.5px; color:var(--text-2); }
@media (max-width:640px){ .attention-grid{ grid-template-columns:minmax(0,1fr); } }

.alert-item{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--hairline); font-size:12.5px; }
.alert-item:last-child{ border-bottom:0; }
.alert-item .dot{ margin-top:5px; }
.alert-item .t{ color:var(--text-3); font-size:11px; margin-top:2px; }
.pf-item{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hairline); }
.pf-item:last-child{ border-bottom:0; }
.pf-item .n{ width:20px; height:20px; border-radius:6px; background:var(--panel-hover); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--text-2); flex:none; }
.pf-item .txt{ flex:1; min-width:0; }
.pf-item .txt b{ display:block; font-size:12.5px; }
.pf-item .txt span{ display:block; font-size:11px; color:var(--text-3); }

/* ---------- KPIs — grade de cards + detalhe ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); align-content:start; }
@media (max-width:1180px){ .kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .kpi-grid{ grid-template-columns:minmax(0,1fr); } }
.kpi-card{ background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-4); cursor:pointer; display:flex; flex-direction:column; gap:6px; }
.kpi-card:hover,.kpi-card.active{ border-color:var(--accent); }
.kpi-card .head{ display:flex; align-items:center; gap:8px; }
.kpi-card .head .ic{ width:30px; height:30px; border-radius:9px; background:var(--panel-hover); display:flex; align-items:center; justify-content:center; flex:none; }
.kpi-card .head .ic svg{ width:15px; height:15px; color:var(--accent-strong); }
.kpi-card .name{ font-size:13.5px; font-weight:700; flex:1 1 auto; min-width:0; white-space:normal; overflow-wrap:anywhere; }
.kpi-card .head [data-ic="arrow"]{ flex:none; }
.kpi-card .head-cat{ display:flex; align-items:center; gap:8px; margin-top:2px; }
.kpi-card .head-cat .chip{ margin-left:38px; }
.kpi-card .val{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:700; display:flex; align-items:center; gap:8px; }
.kpi-card .val .d{ font-size:12px; font-weight:700; }
.kpi-card .meta{ font-size:11.5px; color:var(--text-3); }
.kpi-card .def{ font-size:12px; color:var(--text-2); }
.kpi-card .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }

.kpi-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:10px; }
.kpi-detail-head h2{ margin:0 0 3px; font-size:16px; }
.kpi-detail-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; background:var(--panel-hover); border-radius:var(--radius-md); margin-bottom:12px; }
.kpi-detail-stats div{ display:flex; flex-direction:column; gap:2px; }
.kpi-detail-stats b{ font-family:var(--font-mono); font-size:16px; }
.kpi-detail-stats span{ font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.kd-section{ margin-bottom:14px; }
.kd-section h4{ display:flex; align-items:center; gap:6px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin:0 0 6px; }
.kd-section h4 svg{ width:13px; height:13px; }
/* QA final (docs/UX_QA_final.md): faltava aqui o overflow-wrap:anywhere que .numbered-steps .step p,
   .kpi-card .name e .au-card-grid > div já usam neste mesmo arquivo — texto de Fontes/Fontes
   externas com URL sem espaço (ex. adyen.com/en_GB/knowledge-hub/payment-acceptance-rate) estourava
   ~45px a página inteira em 320px, na aba Sources do detalhe de KPI. Não afeta texto normal (só
   entra em ação quando uma palavra isolada não cabe). */
.kd-section p,.kd-section li{ font-size:13px; color:var(--text); line-height:1.5; overflow-wrap:anywhere; }
.kd-section ul{ margin:0; padding-left:1.1em; }
.formula-box{ background:var(--panel-hover); border-radius:var(--radius-sm); padding:10px 12px; font-family:var(--font-mono); font-size:12.5px; text-align:center; }
.kd-aside{ border-top:1px solid var(--hairline); margin-top:14px; padding-top:14px; display:flex; flex-direction:column; gap:12px; }
.kd-aside-card b{ display:block; font-size:12px; margin-bottom:6px; }
.kd-empty{ color:var(--text-3); font-size:13px; padding:40px 10px; text-align:center; }
.claims-table td{ font-size:12px; }

/* ---------- Mapa & Missão ---------- */
.flow-steps{ display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding-bottom:6px; }
.flow-step{ display:flex; flex-direction:column; align-items:center; text-align:center; min-width:88px; gap:6px; }
.flow-step .ic{ width:40px; height:40px; border-radius:12px; background:var(--panel-hover); border:1px solid var(--hairline-strong); display:flex; align-items:center; justify-content:center; color:var(--accent-strong); }
.flow-step .ic svg{ width:19px; height:19px; }
.flow-step b{ font-size:11.5px; }
.flow-step span{ font-size:10px; color:var(--text-3); display:block; max-width:90px; }
.flow-arrow{ display:flex; align-items:center; color:var(--text-3); padding-top:18px; flex:none; }
.flow-arrow svg{ width:16px; height:16px; }
.flow-layers{ display:flex; flex-direction:column; gap:6px; margin-top:14px; }
.flow-layer{ display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:var(--radius-sm); font-size:11.5px; font-weight:700; }
.flow-layer svg{ width:14px; height:14px; }
.flow-layer.l1{ background:var(--tile-blue-bg); color:#bcd4ff; }
.flow-layer.l2{ background:var(--tile-green-bg); color:#8fe9c9; }
.flow-layer.l3{ background:var(--tile-indigo-bg); color:#b9c3fb; }

.pillars-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--space-3); }
@media (max-width:1180px){ .pillars-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .pillars-grid{ grid-template-columns:minmax(0,1fr); } }
.pillar-card{ border:1px solid var(--hairline-strong); border-radius:var(--radius-md); padding:var(--space-4); background:var(--panel-hover); }
.pillar-card .ic{ width:32px; height:32px; border-radius:9px; background:var(--panel); display:flex; align-items:center; justify-content:center; margin-bottom:8px; color:var(--accent-strong); }
.pillar-card .ic svg{ width:16px; height:16px; }
.pillar-card b{ display:block; font-size:13.5px; margin-bottom:4px; }
.pillar-card p{ font-size:12px; color:var(--text-2); margin:0 0 8px; }
.pillar-card ul{ margin:0; padding-left:1.1em; font-size:11.5px; color:var(--text-3); }
.mapa-flow{ margin-bottom:16px; }
.mapa-flow h4{ font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin:0 0 8px; }
.mapa-flow .flow-step .ic{ width:30px; height:30px; }
.mapa-flow .flow-step b{ font-size:11px; max-width:90px; }
.mini-chart-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--space-3); min-width:0; }
@media (max-width:1180px){ .mini-chart-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .mini-chart-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mini-chart{ border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-3); min-width:0; }
.mini-chart .mc-head{ display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.mini-chart .mc-head b{ font-size:11.5px; }
.mini-chart .mc-val{ font-family:var(--font-mono); font-size:16px; font-weight:700; }
.mini-chart svg{ width:100%; height:36px; display:block; margin-top:4px; }
.mini-chart svg path{ fill:none; stroke:var(--accent-strong); stroke-width:1.6; }
.prose{ color:var(--text-2); font-size:13.5px; line-height:1.6; }
.prose h2,.prose h3,.prose h4{ color:var(--text); margin:0 0 8px; }
.prose p{ margin:0 0 10px; }
.prose ul,.prose ol{ padding-left:1.3em; margin:0 0 10px; }
.prose .version{ font-size:10px; background:var(--panel-hover); padding:2px 6px; border-radius:5px; margin-left:6px; }
.prose .section-title{ margin-bottom:10px; }

/* ---------- Frentes — cards em telas estreitas (≤768px vira cards, sem tabela) ---------- */
.fr-cards{ display:none; flex-direction:column; gap:12px; }
.fr-card{ border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-4); background:var(--panel); }
.fr-card .fr-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.fr-card .fr-card-head b{ font-size:13.5px; }
.fr-card .fr-card-head span{ display:block; font-size:11.5px; color:var(--text-3); margin-top:2px; }
.fr-card-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; margin:10px 0; }
.fr-card-grid label{ display:flex; flex-direction:column; gap:3px; font-size:10.5px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.fr-card-progress{ margin:8px 0; }
.fr-card-act{ display:flex; justify-content:flex-end; margin-top:8px; }
@media (max-width:768px){
  .fr-table-wrap{ display:none; }
  .fr-cards{ display:flex; }
}

/* ---------- Auditoria — cards em telas estreitas (P2-10) ---------- */
.au-cards{ display:none; flex-direction:column; gap:12px; min-width:0; }
.au-card{ border:1px solid var(--hairline); border-radius:var(--radius-md); padding:var(--space-4); background:var(--panel); min-width:0; }
.au-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
.au-card-head b{ font-size:13px; }
.au-card-head span{ display:block; font-size:11px; color:var(--text-3); margin-top:2px; }
.au-card-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 10px; margin-top:10px; font-size:12px; min-width:0; }
.au-card-grid > div{ min-width:0; overflow-wrap:anywhere; }
.au-card-grid label{ display:block; font-size:10px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:768px){
  .au-table-wrap{ display:none; }
  .au-cards{ display:flex; }
}

/* ---------- Home — linha 90 DIAS + Plano da Semana (60/40) ---------- */
.row-6040{ display:grid; grid-template-columns:3fr 2fr; gap:var(--space-4); align-items:start; min-width:0; }
.row-6040 > *{ min-width:0; }
@media (max-width:1180px){ .row-6040{ grid-template-columns:minmax(0,1fr); } }

/* ---------- Home — marcos D30/D60/D90 (card "90 DIAS") ---------- */
.marco-row{ display:flex; flex-direction:column; gap:var(--space-3); }
.marco-item{ border:1px solid var(--hairline-strong); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); background:var(--panel-hover); }
.marco-item .head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.marco-item .head b{ font-size:13px; }
.marco-item .meta{ font-size:12px; color:var(--text-2); }
.marco-item .blockers{ margin-top:6px; font-size:11.5px; color:var(--bad); }

/* ---------- Home — Payments Health Check ---------- */
.hc-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--space-3); }
.hc-row{ display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid var(--hairline); }
.hc-row:last-child{ border-bottom:0; }
.hc-row input[type="checkbox"]{ width:16px; height:16px; margin-top:2px; flex:none; accent-color:var(--accent); }
.hc-row .txt{ flex:1; min-width:0; }
.hc-row .txt b{ display:block; font-size:13px; }
.hc-row .txt input.input{ margin-top:4px; width:100%; font-size:12px; padding:6px 8px; min-height:30px; }