/* ============================================================
   NexiaFit — Base, layout e componentes
   Especificidade baixa (:where) para o projeto continuar fácil
   de sobrescrever. Propriedades lógicas em todo lugar.
   ============================================================ */

/* ---------- Reset enxuto ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }
:where(img, picture, svg, video) { display: block; max-inline-size: 100%; height: auto; }
:where(input, button, textarea, select) { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; }
:where(a) { color: inherit; }
:where(td, .celula-principal, .fila, .linha-tempo, .lateral) a { text-decoration: none; }
:where(td, .celula-principal, .fila, .linha-tempo) a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Base ---------- */
:where(html) { scroll-behavior: smooth; }
body {
  margin: 0;
  min-block-size: 100dvh;
  font-family: var(--fonte);
  font-size: var(--t-md);
  line-height: var(--altura-normal);
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

:where(h1, h2, h3, h4) {
  font-family: var(--fonte-titulo);
  line-height: var(--altura-apertada);
  font-weight: var(--peso-alto);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
:where(p, li) { text-wrap: pretty; }

/* ---------- Utilitário de fluxo (ritmo vertical) ---------- */
:where(.fluxo > * + *) { margin-block-start: var(--fluxo); }

/* ---------- Foco visível e bonito ---------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--volt-600);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---------- Acessibilidade ---------- */
.pular-para-conteudo {
  position: absolute; inset-inline-start: var(--e-xs); inset-block-start: var(--e-xs);
  z-index: 100; padding: var(--e-xs) var(--e-md);
  background: var(--marca); color: var(--sobre-marca);
  border-radius: var(--r-sm); font-weight: var(--peso-forte);
  transform: translateY(-160%);
  transition: transform var(--mov-base) var(--curva);
}
.pular-para-conteudo:focus { transform: none; }

.so-leitor {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Estrutura do painel
   ============================================================ */
.app {
  display: grid;
  grid-template-columns: 1fr;
  min-block-size: 100dvh;
}
/* Sem isto, um item de grid nunca encolhe abaixo do conteúdo:
   uma tabela larga empurraria a página inteira em vez de rolar dentro do cartão. */
:where(.app, .colunas, .grade-kpi, .campos, .divisoes, .grade-semana) > * { min-inline-size: 0; }
:where(.cartao, .tabela-rolagem) { min-inline-size: 0; }
@media (min-width: 60rem) {
  .app {
    grid-template-columns: var(--lateral-largura) 1fr;
    /* pinta a faixa da lateral em toda a altura, já que a barra é sticky */
    background: linear-gradient(to right, var(--lateral-fundo) 0 var(--lateral-largura), transparent var(--lateral-largura) 100%);
  }
}

/* ---------- Barra lateral ---------- */
.lateral {
  background: var(--lateral-fundo);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  gap: var(--e-xs);
  padding: var(--e-md) var(--e-sm);
  border-inline-end: 1px solid var(--lateral-borda);
}
@media (max-width: 59.99rem) {
  .lateral {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    inline-size: min(17rem, 84vw); z-index: 60;
    transform: translateX(-102%);
    transition: transform var(--mov-base) var(--curva);
    overflow-y: auto;
    box-shadow: var(--s-3);
  }
  .lateral[data-aberta="1"] { transform: none; }
}
@media (min-width: 60rem) {
  .lateral { position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto; }
}

.lateral__marca {
  display: flex; align-items: center; gap: var(--e-xs);
  padding: var(--e-xs) var(--e-xs) var(--e-md);
  color: var(--gray-0);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-alto);
  font-size: var(--t-lg);
  letter-spacing: -0.02em;
}
.lateral__marca .ponto {
  inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%;
  background: var(--marca); box-shadow: 0 0 0 4px color-mix(in oklab, var(--volt-400) 22%, transparent);
}
.lateral__grupo {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  color: var(--gray-500); font-weight: var(--peso-forte);
  padding: var(--e-sm) var(--e-xs) var(--e-2xs);
}
.lateral__item {
  display: flex; align-items: center; gap: var(--e-xs);
  padding: var(--e-xs) var(--e-sm);
  min-block-size: var(--toque-min);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--lateral-texto);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva);
}
.lateral__item:hover { background: var(--lateral-ativo); color: var(--gray-0); }
.lateral__item[aria-current="page"] {
  background: var(--lateral-ativo); color: var(--gray-0);
  box-shadow: inset 3px 0 0 var(--marca);
}
.lateral__item svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; opacity: .85; }
.lateral__item[aria-current="page"] svg { opacity: 1; color: var(--marca); }
.lateral__rodape { margin-block-start: auto; padding: var(--e-sm) var(--e-xs) 0; border-block-start: 1px solid #ffffff14; }

.veu {
  position: fixed; inset: 0; z-index: 55;
  background: rgb(0 0 0 / .5);
  backdrop-filter: blur(2px);
  border: 0;
}
.veu[hidden] { display: none; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; inset-block-start: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--e-sm);
  min-block-size: var(--topo-altura);
  padding-inline: var(--e-md);
  background: color-mix(in oklab, var(--superficie) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--borda);
}
.topo__titulo { font-size: var(--t-lg); font-weight: var(--peso-alto); font-family: var(--fonte-titulo); }
.topo__acoes { margin-inline-start: auto; display: flex; align-items: center; gap: var(--e-xs); }

.icone-btn {
  display: grid; place-items: center;
  inline-size: var(--toque-min); block-size: var(--toque-min);
  border-radius: var(--r-sm); color: var(--texto-2); cursor: pointer;
  transition: background var(--mov-rapido) var(--curva), color var(--mov-rapido) var(--curva);
}
.icone-btn:hover { background: var(--superficie-2); color: var(--texto); }
@media (min-width: 60rem) { .icone-btn--menu { display: none; } }

.conteudo {
  padding: var(--e-lg) var(--e-md) var(--e-2xl);
  max-inline-size: var(--conteudo-max);
  inline-size: 100%;
  margin-inline: auto;
}
@media (min-width: 48rem) { .conteudo { padding-inline: var(--e-lg); } }

/* ---------- Cabeçalho de página ---------- */
.pagina-cab {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-sm);
  margin-block-end: var(--e-lg);
}
.pagina-cab__texto { flex: 1 1 18rem; }
.pagina-cab p { color: var(--texto-2); font-size: var(--t-sm); margin-block-start: var(--e-2xs); }
.pagina-cab__acoes { display: flex; flex-wrap: wrap; gap: var(--e-xs); }
@media (max-width: 47.99rem) {
  .pagina-cab__acoes { inline-size: 100%; }
  .pagina-cab__acoes > * { flex: 1 1 auto; }
}

/* ============================================================
   Componentes
   ============================================================ */

/* ---------- Botão ---------- */
.btn {
  --btn-fundo: var(--superficie);
  --btn-texto: var(--texto);
  --btn-borda: var(--borda-forte);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2xs);
  min-block-size: var(--toque-min);
  padding-inline: var(--e-md);
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-borda);
  background: var(--btn-fundo);
  color: var(--btn-texto);
  font-size: var(--t-sm); font-weight: var(--peso-forte);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--mov-rapido) var(--curva),
              box-shadow var(--mov-rapido) var(--curva),
              background var(--mov-rapido) var(--curva),
              filter var(--mov-rapido) var(--curva);
}
.btn:hover { filter: brightness(.97); box-shadow: var(--s-1); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }

.btn--primario { --btn-fundo: var(--marca); --btn-texto: var(--sobre-marca); --btn-borda: var(--volt-500); }
.btn--primario:hover { filter: brightness(1.04); box-shadow: var(--s-2); }
.btn--escuro   { --btn-fundo: var(--gray-900); --btn-texto: var(--gray-0); --btn-borda: var(--gray-900); }
.btn--perigo   { --btn-fundo: var(--perigo-fundo); --btn-texto: var(--perigo-texto); --btn-borda: color-mix(in oklab, var(--perigo) 35%, transparent); }
.btn--fantasma { --btn-fundo: transparent; --btn-borda: transparent; --btn-texto: var(--texto-2); }
.btn--fantasma:hover { --btn-fundo: var(--superficie-2); --btn-texto: var(--texto); }
.btn--pequeno  { min-block-size: 2rem; padding-inline: var(--e-sm); font-size: var(--t-xs); border-radius: var(--r-xs); }
.btn--largo    { inline-size: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.btn[aria-busy="true"]::before {
  content: ""; inline-size: 0.9em; block-size: 0.9em; border-radius: 50%;
  border: 2px solid currentColor; border-block-start-color: transparent;
  animation: girar 700ms linear infinite;
}
@keyframes girar { to { transform: rotate(1turn); } }

/* ---------- Cartão ---------- */
.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--s-1);
  container-type: inline-size;
}
.cartao__cab {
  display: flex; align-items: center; gap: var(--e-sm); flex-wrap: wrap;
  padding: var(--e-md) var(--e-md) 0;
}
.cartao__cab h2, .cartao__cab h3 { font-size: var(--t-md); font-weight: var(--peso-alto); }
.cartao__cab .btn { margin-inline-start: auto; }
.cartao__corpo { padding: var(--e-md); }
.cartao__rodape { padding: var(--e-sm) var(--e-md); border-block-start: 1px solid var(--borda); color: var(--texto-2); font-size: var(--t-sm); }

/* ---------- Grade de KPIs ---------- */
.grade-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--e-sm);
}
.kpi {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  padding: var(--e-md);
  box-shadow: var(--s-1);
  display: flex; flex-direction: column; gap: var(--e-2xs);
  overflow: hidden;
  transition: box-shadow var(--mov-base) var(--curva), transform var(--mov-base) var(--curva);
}
a.kpi { text-decoration: none; }
a.kpi:hover { box-shadow: var(--s-2); transform: translateY(-2px); }
.kpi::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: var(--kpi-cor, var(--marca));
}
.kpi__rotulo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); font-weight: var(--peso-forte); }
.kpi__valor  { font-family: var(--fonte-titulo); font-size: var(--t-num); font-weight: var(--peso-alto); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__nota   { font-size: var(--t-xs); color: var(--texto-2); display: flex; align-items: center; gap: var(--e-2xs); }
.kpi__nota svg { inline-size: 1em; block-size: 1em; flex: none; }
.kpi--ok     { --kpi-cor: var(--ok); }
.kpi--aviso  { --kpi-cor: var(--aviso); }
.kpi--perigo { --kpi-cor: var(--perigo); }
.kpi--info   { --kpi-cor: var(--info); }

/* ---------- Selo / etiqueta ---------- */
.selo {
  display: inline-flex; align-items: center; gap: var(--e-3xs);
  padding: 0.15rem var(--e-xs);
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: var(--peso-forte);
  line-height: 1.6; white-space: nowrap;
  background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid transparent;
}
.selo--ok     { background: var(--ok-fundo);     color: var(--ok-texto); }
.selo--aviso  { background: var(--aviso-fundo);  color: var(--aviso-texto); }
.selo--perigo { background: var(--perigo-fundo); color: var(--perigo-texto); }
.selo--info   { background: var(--info-fundo);   color: var(--info-texto); }
.selo--marca  { background: var(--marca-suave);  color: var(--marca-texto); }
.selo__ponto  { inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: currentColor; }

/* ---------- Formulário ---------- */
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--e-sm) var(--e-md);
}
.campo { display: flex; flex-direction: column; gap: var(--e-2xs); min-inline-size: 0; }
.campo--largo { grid-column: 1 / -1; }
.campo > label, .rotulo {
  font-size: var(--t-xs); font-weight: var(--peso-forte);
  color: var(--texto-2); letter-spacing: .01em;
}
.campo__dica { font-size: var(--t-xs); color: var(--texto-3); }
.campo__erro { font-size: var(--t-xs); color: var(--perigo-texto); font-weight: var(--peso-medio); }

:where(input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
       input[type="date"], input[type="time"], input[type="number"], input[type="search"],
       select, textarea) {
  inline-size: 100%;
  min-block-size: var(--toque-min);
  padding: var(--e-xs) var(--e-sm);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-sm);
  color: var(--texto);
  font-size: var(--t-sm);
  transition: border-color var(--mov-rapido) var(--curva), box-shadow var(--mov-rapido) var(--curva);
}
textarea { min-block-size: 5rem; padding-block: var(--e-xs); resize: vertical; }
:where(input, select, textarea):focus {
  outline: none;
  border-color: var(--volt-600);
  box-shadow: var(--s-foco);
}
:where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--perigo);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--perigo) 22%, transparent);
}
:where(input, select, textarea):disabled { background: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--e-xl);
}
.marcador { display: flex; align-items: center; gap: var(--e-xs); min-block-size: var(--toque-min); font-size: var(--t-sm); cursor: pointer; }
.marcador input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--volt-600); flex: none; }

/* ---------- Barra de filtros ---------- */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e-xs); align-items: end;
  margin-block-end: var(--e-md);
}
.filtros .campo { flex: 1 1 12rem; }
.filtros .campo--busca { flex: 2 1 20rem; }
@media (max-width: 47.99rem) {
  .filtros { flex-direction: column; align-items: stretch; }
  .filtros .campo, .filtros .campo--busca { flex: none; inline-size: 100%; }
}
.contador-resultado { font-size: var(--t-sm); color: var(--texto-2); font-weight: var(--peso-medio); }
.contador-resultado b { color: var(--texto); font-variant-numeric: tabular-nums; }

/* ---------- Tabela ---------- */
.tabela-rolagem {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* sombra nas bordas indicando que rola */
  background:
    linear-gradient(to right, var(--superficie) 30%, transparent) left / 24px 100% no-repeat,
    linear-gradient(to left,  var(--superficie) 30%, transparent) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(13 15 13 / .16), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(13 15 13 / .16), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
table { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); }
:where(th, td) { padding: var(--e-sm) var(--e-sm); text-align: start; vertical-align: middle; }
thead th {
  position: sticky; inset-block-start: 0; z-index: 1;
  background: var(--superficie-2);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-3); font-weight: var(--peso-forte); white-space: nowrap;
  border-block-end: 1px solid var(--borda);
}
tbody tr { border-block-end: 1px solid var(--borda); }
tbody tr:last-child { border-block-end: 0; }
tbody tr:hover { background: var(--superficie-2); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.acoes { text-align: end; white-space: nowrap; }
.celula-principal { display: flex; align-items: center; gap: var(--e-xs); min-inline-size: 0; }
.celula-principal strong { font-weight: var(--peso-forte); }
.celula-sub { display: block; font-size: var(--t-xs); color: var(--texto-3); }

/* ---------- Avatar ---------- */
.avatar {
  display: grid; place-items: center; flex: none;
  inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%;
  background: var(--marca-suave); color: var(--marca-texto);
  font-weight: var(--peso-alto); font-size: var(--t-xs);
  font-family: var(--fonte-titulo); letter-spacing: .02em;
  overflow: hidden;
}
.avatar--g { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--t-md); }
.avatar--gg { inline-size: 5rem; block-size: 5rem; font-size: var(--t-xl); }
.avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* ---------- Estado vazio ---------- */
.vazio {
  display: grid; place-items: center; gap: var(--e-xs);
  padding: var(--e-xl) var(--e-md);
  text-align: center;
  color: var(--texto-2);
}
.vazio__icone {
  display: grid; place-items: center;
  inline-size: 3rem; block-size: 3rem; border-radius: var(--r-md);
  background: var(--superficie-2); color: var(--texto-3);
}
.vazio h3 { font-size: var(--t-md); color: var(--texto); }
.vazio p { font-size: var(--t-sm); max-inline-size: 36ch; }

/* ---------- Aviso em faixa ---------- */
.faixa {
  display: flex; gap: var(--e-xs); align-items: start;
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  background: var(--info-fundo); color: var(--info-texto);
  border: 1px solid color-mix(in oklab, var(--info) 25%, transparent);
}
.faixa--ok     { background: var(--ok-fundo);     color: var(--ok-texto);     border-color: color-mix(in oklab, var(--ok) 25%, transparent); }
.faixa--aviso  { background: var(--aviso-fundo);  color: var(--aviso-texto);  border-color: color-mix(in oklab, var(--aviso) 25%, transparent); }
.faixa--perigo { background: var(--perigo-fundo); color: var(--perigo-texto); border-color: color-mix(in oklab, var(--perigo) 25%, transparent); }
.faixa svg { flex: none; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .15rem; }

/* ---------- Modal ---------- */
dialog.modal {
  inline-size: min(46rem, calc(100vw - 2rem));
  max-block-size: min(90dvh, 60rem);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: var(--s-3);
  overflow: hidden;
}
dialog.modal--estreito { inline-size: min(30rem, calc(100vw - 2rem)); }
dialog.modal::backdrop { background: rgb(9 11 9 / .55); backdrop-filter: blur(3px); }
dialog.modal[open] { animation: modal-entra var(--mov-base) var(--curva); }
@keyframes modal-entra {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: none; }
}
.modal__cab {
  display: flex; align-items: center; gap: var(--e-sm);
  padding: var(--e-md);
  border-block-end: 1px solid var(--borda);
}
.modal__cab h2 { font-size: var(--t-lg); }
.modal__cab .icone-btn { margin-inline-start: auto; }
.modal__corpo { padding: var(--e-md); overflow-y: auto; max-block-size: calc(90dvh - 9rem); }
.modal__rodape {
  display: flex; gap: var(--e-xs); justify-content: end; flex-wrap: wrap;
  padding: var(--e-md); border-block-start: 1px solid var(--borda);
  background: var(--superficie-2);
}
@media (max-width: 30rem) {
  .modal__rodape { flex-direction: column-reverse; }
  .modal__rodape .btn { inline-size: 100%; }
}

/* ---------- Avisos flutuantes ---------- */
.avisos {
  position: fixed; inset-block-end: var(--e-md); inset-inline: var(--e-md) auto;
  z-index: 90; display: flex; flex-direction: column; gap: var(--e-xs);
  max-inline-size: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}
@media (min-width: 48rem) { .avisos { inset-inline: auto var(--e-md); } }
.aviso-flutuante {
  pointer-events: auto;
  display: flex; align-items: start; gap: var(--e-xs);
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--r-md);
  background: var(--gray-900); color: var(--gray-0);
  box-shadow: var(--s-3);
  font-size: var(--t-sm); font-weight: var(--peso-medio);
  animation: aviso-entra var(--mov-base) var(--curva);
  border-inline-start: 3px solid var(--marca);
}
.aviso-flutuante--ok     { border-inline-start-color: var(--ok); }
.aviso-flutuante--erro   { border-inline-start-color: var(--perigo); }
.aviso-flutuante--saindo { animation: aviso-sai var(--mov-base) var(--curva-saida) forwards; }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes aviso-sai   { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* ---------- Abas ---------- */
.abas {
  display: flex; gap: var(--e-2xs);
  overflow-x: auto; scrollbar-width: none;
  border-block-end: 1px solid var(--borda);
  margin-block-end: var(--e-md);
}
.abas::-webkit-scrollbar { display: none; }
.aba {
  padding: var(--e-xs) var(--e-sm);
  min-block-size: var(--toque-min);
  font-size: var(--t-sm); font-weight: var(--peso-forte);
  color: var(--texto-3); cursor: pointer; white-space: nowrap;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: color var(--mov-rapido) var(--curva), border-color var(--mov-rapido) var(--curva);
}
.aba:hover { color: var(--texto); }
.aba[aria-selected="true"] { color: var(--texto); border-block-end-color: var(--marca); }

/* ---------- Barra de progresso ---------- */
.barra {
  display: block;                     /* usada também como <span> dentro de botão */
  block-size: .5rem; inline-size: 100%;
  background: var(--superficie-2); border-radius: var(--r-pill); overflow: hidden;
}
.barra__preenche {
  display: block;
  block-size: 100%; border-radius: inherit;
  background: var(--barra-cor, var(--marca));
  transition: inline-size var(--mov-calmo) var(--curva);
}

/* ---------- Lista de definição (ficha) ---------- */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--e-sm) var(--e-md);
}
.ficha div { min-inline-size: 0; }
.ficha dt { font-size: var(--t-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: .06em; font-weight: var(--peso-forte); }
.ficha dd { margin: 0; font-size: var(--t-sm); font-weight: var(--peso-medio); }

/* ---------- Colunas responsivas genéricas ---------- */
.colunas {
  display: grid; gap: var(--e-md);
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.colunas--2-1 { grid-template-columns: 1fr; }
@media (min-width: 64rem) { .colunas--2-1 { grid-template-columns: 2fr 1fr; } }

/* ---------- Gráfico de barras (CSS puro) ---------- */
.grafico {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: var(--e-xs);
  block-size: 11rem;
  padding-block-start: var(--e-md);
}
.grafico__col { display: flex; flex-direction: column; justify-content: end; align-items: center; gap: var(--e-2xs); block-size: 100%; min-inline-size: 0; }
.grafico__barra {
  inline-size: 100%; max-inline-size: 3rem;
  background: linear-gradient(180deg, var(--volt-300), var(--volt-500));
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  min-block-size: 2px;
  animation: sobe var(--mov-calmo) var(--curva) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.grafico__barra--perigo { background: linear-gradient(180deg, var(--per-400), var(--per-600)); }
@keyframes sobe { from { block-size: 0; opacity: .2; } }
.grafico__rot { font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.grafico__val { font-size: var(--t-xs); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }

/* ---------- Impressão ---------- */
@media print {
  .lateral, .topo, .pagina-cab__acoes, .btn, .avisos { display: none !important; }
  .app { grid-template-columns: 1fr; }
  .conteudo { padding: 0; max-inline-size: none; }
  .cartao { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

/* ---------- Variação entre avaliações ---------- */
.delta { font-size: var(--t-xs); font-weight: var(--peso-forte); }
.delta--bom    { color: var(--ok-texto); }
.delta--ruim   { color: var(--perigo-texto); }
.delta--neutro { color: var(--texto-3); }

/* ---------- Ação indisponível ---------- */
:where([aria-disabled="true"]) { pointer-events: none; opacity: .5; }

/* ---------- Primeiros passos (sistema recém-instalado) ---------- */
.passos { display: grid; gap: var(--e-sm); padding: 0; margin: 0; list-style: none; }
.passo {
  display: flex; flex-wrap: wrap; gap: var(--e-sm); align-items: center;
  padding: var(--e-sm); border: 1px solid var(--borda); border-radius: var(--r-md);
}
.passo--feito { opacity: .6; }
.passo__texto { flex: 1 1 14rem; min-inline-size: 0; }
.passo .btn, .passo .selo { margin-inline-start: auto; }
/* No celular o botão desce e ocupa a linha inteira, em vez de espremer o texto. */
@media (max-width: 34rem) {
  .passo__texto { flex: 1 1 100%; }
  .passo .btn { flex: 1 1 100%; margin-inline-start: 0; }
}

/* ---------- Indicadores de gestão ---------- */

/* Barras pareadas: duas séries por período (ex.: entram × saem) */
.barras-par {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: var(--e-xs);
  block-size: 10rem; padding-block-start: var(--e-md);
}
.barras-par__col { display: flex; flex-direction: column; align-items: center; gap: var(--e-2xs); block-size: 100%; min-inline-size: 0; }
.barras-par__duo { flex: 1; display: flex; align-items: end; gap: 3px; inline-size: 100%; justify-content: center; }
.barras-par__duo i {
  display: block; inline-size: clamp(6px, 40%, 14px); border-radius: 3px 3px 0 0; min-block-size: 2px;
  animation: sobe var(--mov-calmo) var(--curva) backwards;
}
.barras-par__duo i.a { background: linear-gradient(180deg, var(--volt-300), var(--volt-500)); }
.barras-par__duo i.b { background: linear-gradient(180deg, var(--per-400), var(--per-600)); }
.barras-par__rot { font-size: var(--t-xs); color: var(--texto-3); white-space: nowrap; }
.legenda { display: flex; gap: var(--e-md); flex-wrap: wrap; font-size: var(--t-xs); color: var(--texto-2); }
.legenda i { display: inline-block; inline-size: .7rem; block-size: .7rem; border-radius: 3px; vertical-align: -1px; margin-inline-end: var(--e-3xs); }

/* Barra empilhada horizontal por período */
.pilha { display: grid; gap: var(--e-xs); }
.pilha__linha { display: grid; grid-template-columns: 3rem 1fr 6rem; gap: var(--e-xs); align-items: center; font-size: var(--t-xs); }
.pilha__trilho { display: flex; block-size: 1.1rem; border-radius: var(--r-xs); overflow: hidden; background: var(--superficie-2); }
.pilha__trilho i { display: block; block-size: 100%; }
.pilha__trilho i.a { background: var(--volt-400); }
.pilha__trilho i.b { background: var(--inf-400); }
.pilha__total { text-align: end; font-variant-numeric: tabular-nums; font-weight: var(--peso-forte); }

/* Mapa de calor dia × hora */
.mapa-calor { display: grid; gap: 3px; grid-template-columns: 2.6rem repeat(var(--horas, 17), 1fr); font-size: var(--t-xs); }
.mapa-calor__rotulo { color: var(--texto-3); display: flex; align-items: center; }
.mapa-calor__hora { color: var(--texto-3); text-align: center; }
.mapa-calor__celula {
  aspect-ratio: 1.4; border-radius: 3px;
  background: color-mix(in oklab, var(--volt-400) calc(var(--calor, 0) * 1%), var(--superficie-2));
}
.mapa-calor__celula[data-pico="1"] { outline: 2px solid var(--volt-600); outline-offset: -1px; }

/* Cartão de métrica com comparativo */
.metrica { display: flex; flex-direction: column; gap: var(--e-3xs); }
.metrica__delta { font-size: var(--t-xs); font-weight: var(--peso-forte); }
.metrica__delta--bom { color: var(--ok-texto); }
.metrica__delta--ruim { color: var(--perigo-texto); }
.metrica__delta--neutro { color: var(--texto-3); }