/* Métricas (v10.194): dashboards do app do dono. Só tokens do app (claro/escuro herdam). Escopo: #v-metricas. */
#v-metricas.wrapper{max-width:1120px}
#v-metricas .subtitle{max-width:60ch;margin-left:auto;margin-right:auto}

/* filtros */
.mx-filtros{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;margin:6px 0 10px;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.mx-f{display:flex;flex-direction:column;gap:4px;min-width:120px;flex:1 1 140px}
.mx-f label{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mx-f select,.mx-f input[type=date]{min-height:44px;width:100%}
.mx-chk{flex-direction:row;align-items:center;gap:8px;min-height:44px;font-size:13px;cursor:pointer;flex:1 1 220px}
.mx-chk input{width:20px;height:20px;accent-color:var(--accent)}
.mx-acoes{flex:0 0 auto;min-width:0}
.mx-meta{font-size:12.5px;color:var(--muted);margin:0 2px 10px}

/* abas das dashboards (rolam de lado no celular) */
.mx-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin:0 -2px 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.mx-tab{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid var(--border);background:var(--surface);color:var(--text-soft,var(--text));
  font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;white-space:nowrap;touch-action:manipulation}
.mx-tab:hover{border-color:var(--accent-line,var(--border-2))}
.mx-tab.on{background:var(--accent-2,var(--accent));border-color:var(--accent);color:var(--accent-ink,#06210f)}

/* KPIs */
.mx-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:2px 0 14px}
.mx-kpis.mini{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));margin:0 0 10px}
.mx-kpi{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 13px;background:var(--surface);border:1px solid var(--border);border-radius:13px;min-width:0}
.mx-kl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mx-kv{font-family:var(--f-display,inherit);font-size:23px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mx-kh{font-size:11.5px;color:var(--muted);line-height:1.3}
.mx-kpi.destaque{border-color:var(--accent-line,var(--accent));background:var(--accent-quiet,var(--surface))}
.mx-kpi.aviso{border-color:var(--gold-line,var(--border-2))}
.mx-kpi.aviso .mx-kv{color:var(--gold-soft,var(--text))}
.mx-kpi.ruim{border-color:var(--danger-line,var(--danger))}
.mx-kpi.ruim .mx-kv{color:var(--danger)}
.mx-d{position:absolute;top:9px;right:10px;font-size:11px;font-weight:800;padding:1px 7px;border-radius:9px;background:var(--surface-2)}
.mx-d.up{color:var(--accent)}.mx-d.down{color:var(--danger)}.mx-d.eq{color:var(--muted)}

/* cartões e grades */
.mx-card{margin:0 0 14px;padding:14px 15px;background:var(--surface);border:1px solid var(--border);border-radius:14px;min-width:0}
.mx-card h3{margin:0 0 2px;font-family:var(--f-display,inherit);font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.mx-sub{font-size:12.5px;color:var(--muted);margin:0 0 10px;line-height:1.4}
.mx-card h3+*{margin-top:8px}
.mx-grid2{display:grid;grid-template-columns:1fr;gap:0 14px}
.mx-grid3{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:760px){.mx-grid2{grid-template-columns:1fr 1fr}.mx-grid3{grid-template-columns:1fr 1fr 1fr}.mx-kpis{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}}
.mx-ch{position:relative;width:100%}
.mx-vazio{padding:18px 8px;text-align:center;color:var(--muted);font-size:13.5px}
.mx-nota{margin:0 0 12px;padding:10px 13px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;color:var(--text-soft,var(--text));line-height:1.45}
.mx-ok{padding:12px;border-radius:11px;background:var(--accent-quiet,var(--surface-2));color:var(--accent);font-weight:700;font-size:14px}
.mx-al{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.mx-al li{padding:9px 12px;border-radius:10px;background:var(--surface-2);border-left:3px solid var(--info,#5aa9ff);font-size:13.5px;line-height:1.4}
.mx-al li.aviso{border-left-color:var(--gold,#e8b44a)}.mx-al li.ruim{border-left-color:var(--danger)}

/* barras horizontais */
.mx-hb{display:flex;flex-direction:column;gap:8px}
.mx-hr{display:grid;grid-template-columns:minmax(80px,38%) 1fr auto;gap:8px;align-items:center;font-size:13px}
.mx-hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.mx-hbar{height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.mx-hbar>span{display:block;height:100%;border-radius:6px}
.mx-hv{font-variant-numeric:tabular-nums;font-weight:700;text-align:right;white-space:nowrap}
.mx-hv small{font-weight:500;color:var(--muted)}
@media(max-width:520px){.mx-hr{grid-template-columns:1fr auto}.mx-hbar{grid-column:1/-1;order:3}}

/* tabelas */
.mx-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mx-t{width:100%;border-collapse:collapse;font-size:13px}
.mx-t th{position:sticky;top:0;text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
.mx-t td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.mx-t tr:last-child td{border-bottom:0}
.mx-t .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mx-bar{display:flex;gap:8px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.mx-bar input[type=search]{flex:1 1 200px;min-height:44px}
.mx-gran{display:flex;gap:6px;margin:0 0 10px}
.mx-gran .btn{min-height:44px;padding:0 16px}

/* mapa de calor */
.mx-heat{overflow-x:auto;padding-bottom:4px}
.mx-hh,.mx-hrw{display:grid;grid-template-columns:34px repeat(24,minmax(14px,1fr));gap:2px;align-items:center;min-width:420px}
.mx-hh span{font-size:10px;color:var(--muted);text-align:center}
.mx-hd{font-size:11px;color:var(--muted)}
.mx-hrw{margin-top:2px}
.mx-hc{display:block;height:20px;border-radius:3px;background:var(--surface-2)}