/* Direção aprovada por Gabriel em 18/10/2026: superfície clara e lateral marinho.
   Camada transversal de apresentação. As regras de cada domínio não mudam. */
html.ff-sites {
  --ff-saas-accent: #2563eb;
  --ff-saas-canvas: #f6f8fc;
  --ff-saas-text: #0f1b33;
  --ff-saas-muted: #526581;
  --ff-saas-border: #dfe7f2;
  --ff-saas-selected: #edf3ff;
  --ff-saas-radius: 14px;
  --ff-nav-bg: #16305e;
  --ff-nav-selected: #284775;
}
html.ff-sites .lateral {
  background: var(--ff-nav-bg);
  color: #fff;
  border-right: 1px solid #16305e;
  box-shadow: none;
}
html.ff-sites .lateral .ff-barra-branca { stroke: #fff; }
html.ff-sites .lateral-marca { color: #fff; }
html.ff-sites .lateral .troca-alvo {
  background: #ffffff0d;
  color: #fff;
  border-color: #ffffff29;
}
html.ff-sites .lateral .loja-avatar { background: #ffffff1a; color: #fff; }
html.ff-sites .lateral .troca-seta { color: #c4d5ed; }
html.ff-sites .menu > a { color: #e1eafa; border-radius: 10px; }
html.ff-sites .menu > a:hover { color: #fff; background: #ffffff12; }
html.ff-sites .menu > a.ativo {
  color: #fff;
  background: var(--ff-nav-selected);
  box-shadow: inset 3px 0 #87b5ff;
}
html.ff-sites .menu .fase { color: #d3e0f5; border-color: #ffffff38; }
html.ff-sites .submenu { border-color: #ffffff30; }
html.ff-sites .lateral .ff-modulo-ferramentas { color:#c4d5ed; }
html.ff-sites .submenu a { color: #c9d8ee; }
html.ff-sites .submenu a:hover,
html.ff-sites .submenu a.ativo { background: #ffffff12; color: #fff; }
html.ff-sites .submenu-ponto { background: #9eb9df; }
html.ff-sites .lateral-pe { border-top-color: #ffffff26; }
html.ff-sites .lateral :is(.usuario-email, .lateral-casa, .lateral-casa a) { color: #c4d5ed; }
html.ff-sites .lateral .botao-sair { color: #e1eafa; border-color: #ffffff38; }
html.ff-sites .lateral :is(a,button):focus-visible { outline-color: #a8ccff; }
/* O seletor expandido é uma superfície branca, com texto escuro. */
html.ff-sites .lateral .troca-lista { background: #fff; color: #16305e; }
html.ff-sites .lateral .troca-lista .loja-avatar { color: #16305e; background: #edf3ff; }
html.ff-sites .palco,
html.ff-sites .conteudo { min-width: 0; }
html.ff-sites .conteudo > * { max-width: 100%; min-width: 0; }
html.ff-sites .ff-v22-dashboard {
  --v22-navy: #16305e;
  --v22-text: #0f1b33;
  --v22-muted: #526581;
  --v22-border: #dfe7f2;
  --v22-surface: #f6f8fc;
  padding: 0;
}
html.ff-sites .ff-v22-dashboard .ff-v22-heading { margin-bottom: 18px; }
html.ff-sites .ff-v22-dashboard .ff-v22-heading h1 { font-family: Archivo,system-ui,sans-serif; }
html.ff-sites .ff-v22-dashboard .ff-v22-eyebrow { display: none; }
html.ff-sites .ff-v22-dashboard .ff-v22-origin-demo {
  color: #526581;
  background: #edf3ff;
  border-color: #dfe7f2;
}
html.ff-sites .ff-v22-dashboard .ff-v22-kpis { gap: 16px; margin-bottom: 20px; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi { border-radius: 14px; padding: 18px; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi { container-type:normal; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi-number { container-type:inline-size; min-width:0; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi-head { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi-head { min-height: 30px; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi-number { min-height:34px; }
html.ff-sites .ff-v22-dashboard .ff-v22-comparison { min-height: 28px; }
html.ff-sites .ff-v22-dashboard .ff-v22-comparison:empty { visibility: hidden; }
html.ff-sites .ff-v22-kpis:not(:has(.ff-v22-comparison:not(:empty))) .ff-v22-comparison { min-height:0; margin:0; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi h2 { color: #16305e; font-size: 13px; }
html.ff-sites .ff-v22-dashboard .ff-v22-kpi-icon { width: 23px; height: 23px; background: transparent; border-radius: 0; }
html.ff-sites .ff-v22-dashboard .ff-v22-panel {
  overflow: visible;
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 2px 8px #16305e04;
}
html.ff-sites .ff-v22-dashboard .ff-v22-panel h2 { font-size: 16px; }
html.ff-sites .ff-v22-dashboard .ff-v22-panel-head p { font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-action { min-height: 44px; font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-panel-head .ff-v22-action { min-height: 44px; }
html.ff-sites .ff-v22-dashboard .ff-v22-panels { gap: 18px; }
html.ff-sites .ff-v22-dashboard .ff-v22-table-scroll {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y pinch-zoom;
  scrollbar-width: auto;
  scrollbar-color: #8ca5c5 #edf2fa;
  border-radius: 4px;
}
html.ff-sites .ff-v22-dashboard .ff-v22-table { font-size: 13px; }
html.ff-sites .ff-v22-dashboard .ff-v22-table thead th { font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-table tr > :first-child { min-width: 128px; }
.ff-table-hint { margin: 0 0 8px; font: 400 12px/1.5 Archivo,system-ui,sans-serif; color: #526581; }
.ff-table-hint[hidden] { display: none !important; }
.ff-table-region { min-width: 0; max-width: 100%; }
.ff-v22-selection:empty { display: none; }
.ff-v22-selection { color: #16305e; font-size: 13px; margin: 8px 0 !important; }
html.ff-sites .lateral .vp-menu-icon { filter: brightness(0) invert(1); }

/* A lateral compacta mantém os controles inteiros, sem texto quebrado no trilho. */
html.ff-sites .lateral { min-height:0; }
html.ff-sites .lateral .menu { min-height:0; min-width:0; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:#8ca5c5 transparent; }
html.ff-sites .lateral .menu > a { flex-shrink:0; }
html.ff-sites .lateral-pe { flex-shrink:0; min-width:0; }
html.ff-sites .lateral .rs-install { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; max-width:100%; color:#e1eafa; background:transparent; border:1px solid #ffffff38; }
html.ff-sites .rs-install svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
html.ff-sites .rs-install-label { min-width:0; }
@media(min-width:900px) and (max-width:1179.98px) {
  html.ff-sites .lateral .rs-install { width:44px; height:44px; padding:0; margin:0 auto; }
  html.ff-sites .lateral .rs-install-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
}
html.ff-sites .ff-v22-dashboard .ff-v22-donut-layout { gap: 20px; }
html.ff-sites .ff-v22-dashboard .ff-v22-donut-legend { font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-donut-legend li { font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-donut-legend small { font-size: 12px; }
html.ff-sites .ff-v22-dashboard .ff-v22-donut-total {
  font: 600 17px/1.4 Jost,Archivo,sans-serif;
  color: #16305e;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-top: 10px;
}
.ff-v22-donut-chart { min-width: 0; width: 100%; }
.ff-chart-pie-legend { display: grid; gap: 6px; margin: 6px 0 10px; }
.ff-chart-pie-key { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 4px 9px; padding: 8px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #16305e; font: 400 13px/1.4 Archivo,system-ui,sans-serif; text-align: left; cursor: pointer; }
.ff-chart-pie-key:is(:hover,[aria-pressed=true]) { background: #edf3ff; border-color: #dfe7f2; }
.ff-chart-pie-key strong { font-size: 13px; font-weight: 600; }
.ff-chart-pie-key small { grid-column: 2/4; color: #526581; font-size: 12px; font-variant-numeric: tabular-nums; }
.ff-chart-pie-swatch { width: 8px; height: 8px; border-radius: 50%; }
.ff-kpi-meter { display: grid; align-content:start; gap: 7px; margin-top: 12px; width: 100%; }
.ff-kpi-meter-label { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; color: #526581; font: 400 12px/1.4 Archivo,system-ui,sans-serif; }
.ff-kpi-meter-label { min-height: 28px; align-content: start; }
.ff-kpi-meter-label strong { color: #16305e; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ff-kpi-meter-track { position: relative; height: 8px; border-radius: 3px; background: #e5ebf5; }
.ff-kpi-meter-fill { display: block; height: 100%; border-radius: inherit; background: #2563eb; }
.ff-kpi-meter[data-tone="attention"] .ff-kpi-meter-fill { background: #ae6a10; }
.ff-kpi-meter[data-tone="critical"] .ff-kpi-meter-fill { background: #b3261e; }
.ff-kpi-meter[data-kind="neutral"] .ff-kpi-meter-track { background: #edf1f7; }
.ff-kpi-meter-marker { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #16305e; }
.ff-kpi-meter-status { color: #526581; font: 400 11px/1.45 Archivo,system-ui,sans-serif; }
html.ff-sites .ff-v22-dashboard .ff-chart { min-width: 0; max-width: 100%; }
html.ff-sites .ff-v22-dashboard .ff-chart-plot { width: 100%; max-width: 100%; overflow: hidden; touch-action: pan-y pinch-zoom; }
html.ff-sites .ff-v22-dashboard .ff-chart-table { border-top: 1px solid #edf0f5; margin-top: 8px; padding-top: 5px; font-size: 12px; color: #526581; }
html.ff-sites .ff-v22-dashboard .ff-chart-table summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: #16305e; }
html.ff-sites .ff-v22-dashboard .ff-chart-values p { padding: 7px 0; border-top: 1px solid #edf0f5; font-variant-numeric: tabular-nums; }
@media (min-width: 1180px) {
  html.ff-sites .ff-v22-vendas .ff-v22-panels { grid-template-columns: minmax(0, 1.65fr) minmax(290px, 1fr); }
  html.ff-sites .ff-v22-vendas .ff-v22-donut-layout { flex-direction: column; }
  html.ff-sites .ff-v22-vendas .ff-v22-donut-legend { width: 100%; max-width: none; }
}
@media (max-width: 899px) {
  html.ff-sites .conteudo { padding-bottom: calc(104px + env(safe-area-inset-bottom,0px)); }
  html.ff-sites .ff-v22-dashboard .ff-v22-kpis { gap: 10px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-kpi { padding: 14px 12px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-kpi h2 { font-size: 12px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-panel { padding: 16px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-panel h2 { font-size: 15px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-kpi-head { gap: 7px; }
  .ff-kpi-meter-label { min-height: 34px; font-size: 11px; }
}
@media (max-width: 430px) {
  html.ff-sites .ff-v22-dashboard .ff-v22-donut-layout { flex-direction: column; }
  html.ff-sites .ff-v22-dashboard .ff-v22-donut-legend { width: 100%; max-width: none; }
  html.ff-sites .ff-v22-dashboard .ff-v22-heading h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .ff-kpi-meter * { transition: none; animation: none; }
}
/* As seis linhas compartilham a altura do conteúdo real de cada fileira.
   Comparações longas não deslocam a barra de apenas um dos cartões. */
@supports (grid-template-rows: subgrid) {
  html.ff-sites .ff-v22-dashboard .ff-v22-kpis { --ff-kpi-gap:16px; column-gap:var(--ff-kpi-gap); row-gap:0; margin-bottom:4px; }
  html.ff-sites .ff-v22-dashboard .ff-v22-kpi { display:grid; grid-template-rows:subgrid; grid-row:span 6; row-gap:0; margin-bottom:var(--ff-kpi-gap); }
  @media (max-width:899px) { html.ff-sites .ff-v22-dashboard .ff-v22-kpis { --ff-kpi-gap:10px; } }
}