/* =====================================================================
   AquaSmart — sistema visual
   ---------------------------------------------------------------------
   Usa somente tokens de tokens.css. Organização:

     1. Base                    9. Diálogos e notificações
     2. Estrutura (shells)     10. Painel de monitoramento
     3. Navegação              11. Dispositivos e configuração
     4. Cabeçalho da página    12. Conta, ajustes, histórico, log
     5. Botões                 13. Bloqueio por PIN e leitor de QR
     6. Formulários            14. Administração
     7. Cartões e grades       15. Etiquetas e impressão
     8. Estados e dados        16. Movimento reduzido

   Regra de ouro: um componente, uma aparência. Página nenhuma desenha o
   próprio botão, o próprio campo ou o próprio cartão.
   ===================================================================== */

/* =============================================================== 1. Base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte);
  font-size: var(--texto-md);
  line-height: var(--linha-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

img, svg, video { max-width: 100%; }

a { color: var(--cor-primaria); }
a:hover { color: var(--cor-primaria-escura); }

:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 2px;
  border-radius: var(--raio-pequeno);
}

::selection { background: var(--cor-primaria-media); }

h1, h2, h3, h4 {
  margin: 0 0 var(--esp-3);
  font-family: var(--fonte-titulo);
  line-height: var(--linha-apertada);
  font-weight: var(--peso-forte);
  letter-spacing: -0.01em;
  color: var(--cor-texto);
}

h1 { font-size: var(--texto-2xl); font-weight: var(--peso-destaque); letter-spacing: -0.025em; }
h2 { font-size: var(--texto-lg); }
h3 { font-size: var(--texto-md); }

p { margin: 0 0 var(--esp-4); }

code, .mono {
  font-family: var(--fonte-mono);
  font-size: .92em;
  font-variant-ligatures: none;
}

code {
  padding: 1px 6px;
  border-radius: var(--raio-pequeno);
  background: var(--cor-superficie-3);
}

.suave { color: var(--cor-texto-suave); font-size: var(--texto-sm); }
.fraco { color: var(--cor-texto-fraco); }
.numero { font-variant-numeric: tabular-nums; }
.contents { display: contents; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: fixed;
  top: var(--esp-3);
  left: var(--esp-3);
  z-index: 3000;
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--raio-botao);
  background: var(--cor-primaria);
  color: var(--cor-texto-invertido);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--transicao);
}
.pular:focus { transform: none; }

/* ======================================================== 2. Estrutura */

/* ---- 2.1 Aplicativo (conta logada): menu lateral + conteúdo ---------- */

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell__corpo {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.pagina {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-8) var(--esp-10) var(--esp-12);
}

/* Menu lateral fixo a partir de 1024 px, a não ser que o menu esteja
   recolhido. Recolhido = gaveta, barra superior e abas inferiores, como no
   celular (09/10/2026): é o caso do tablet, inclusive deitado, e de quem
   escolhe "Recolhido" no próprio menu. Quem decide é o tema.js, que marca
   <html data-menu="recolhido"> antes de a página aparecer; o aquasmart.js
   segue a mesma marca. Sem JavaScript, vale só a largura. */
@media (min-width: 1024px) {
  html:not([data-menu="recolhido"]) .app-shell {
    display: grid;
    grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
    background: linear-gradient(90deg, var(--cor-lateral-fundo) var(--largura-lateral), transparent var(--largura-lateral));
  }
}

/* O conteúdo reserva a altura das barras fixas de baixo: rodapé no
   computador; rodapé e abas de acesso rápido com o menu recolhido. */
.app .app-shell__corpo {
  padding-bottom: calc(var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
}

html[data-menu="recolhido"] .app .app-shell__corpo {
  padding-bottom: calc(var(--altura-acesso-rapido) + var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 1023px) {
  .app .app-shell__corpo {
    padding-bottom: calc(var(--altura-acesso-rapido) + var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
  }
  .pagina { padding: var(--esp-6) var(--esp-6) var(--esp-10); }
}

@media (max-width: 599px) {
  .pagina { padding: var(--esp-5) var(--esp-4) var(--esp-8); }
}

/* ---- 2.2 Site público ----------------------------------------------- */

.site .pagina {
  max-width: var(--largura-site);
  padding-top: var(--esp-10);
}

.site .pagina--inicio {
  max-width: none;
  padding: 0;
}

/* ---- 2.3 Foco: acesso, cadastro, PIN — tela dividida ---------------- */

.foco {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cor-superficie);
}

.foco__marca { display: none; }

.foco__conteudo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--esp-5) var(--esp-5) var(--esp-6);
}

.foco__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--altura-controle);
}

.foco__caixa {
  width: 100%;
  max-width: 460px;
  margin: auto;
  padding: var(--esp-10) 0;
}

.foco__caixa > h1 {
  font-size: var(--texto-2xl);
  margin-bottom: var(--esp-2);
}

.foco__caixa > .foco__subtitulo {
  margin: 0 0 var(--esp-8);
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

.foco__caixa > .card,
.foco__caixa > .card--plano {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* Rodapé das telas de acesso: fixo no pé da janela, como nas demais.
   O estilo da barra está em 2.4; aqui só a reserva de espaço. */
.foco__conteudo {
  padding-bottom: calc(var(--esp-6) + var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
}

@media (min-width: 1024px) {
  .foco {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .foco__marca {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--esp-10);
    padding: var(--esp-12) clamp(40px, 5vw, 80px);
    overflow: hidden;
    background:
      radial-gradient(700px 420px at 100% 0%, rgba(77, 163, 255, .28), transparent 60%),
      radial-gradient(600px 400px at 0% 100%, rgba(42, 159, 214, .22), transparent 60%),
      linear-gradient(160deg, #0b1b33 0%, #0e2a52 55%, #0b3d73 100%);
    color: #e7eef8;
  }

  .foco__marca .marca { color: #ffffff; }
  .foco__marca .marca small { color: #9fb6d6; }

  .foco__mensagem h2 {
    max-width: 16ch;
    margin: 0 0 var(--esp-4);
    color: #ffffff;
    font-size: var(--texto-25);
    font-weight: var(--peso-destaque);
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .foco__mensagem p {
    max-width: 44ch;
    margin: 0;
    color: #b8c9e0;
    font-size: var(--texto-ml);
  }

  .foco__lista {
    display: grid;
    gap: var(--esp-4);
    margin: var(--esp-8) 0 0;
    padding: 0;
    list-style: none;
  }

  .foco__lista li {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    color: #dbe6f5;
    font-size: var(--texto-md);
  }

  .foco__lista svg {
    flex: none;
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: var(--raio-botao);
    background: rgba(255, 255, 255, .08);
    color: #7cc4ff;
  }

  .foco__onda {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 180px;
    pointer-events: none;
    opacity: .5;
  }

  .foco__creditos {
    position: relative;
    margin: 0;
    color: #7f95b5;
    font-size: var(--texto-xs);
  }

  .foco__conteudo {
    padding: var(--esp-8) clamp(32px, 5vw, 72px);
    padding-bottom: calc(var(--esp-8) + var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
  }
  .foco__topo .marca { visibility: hidden; }
}

/* ---- 2.4 Rodapé ----------------------------------------------------- */

/* Fixo no pé da janela em TODAS as telas, com altura de 48 px: não rola
   com o conteúdo (AGENTS.md 2.8; reforçado em 09/10/2026). Cada layout
   reserva essa altura embaixo — sem a reserva, o último elemento da
   página ficaria escondido atrás da barra.
     .rodape             aplicativo (conta logada)
     .foco__rodape       acesso, cadastro e PIN
     .site-rodape__base  site público: só a linha final vira barra; o resto
                         do rodapé completo continua no fim da página. */
.rodape,
.foco__rodape,
.site-rodape__base {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 44;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  gap: 0 var(--esp-6);
  height: calc(var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
  margin: 0;
  padding: 0 var(--esp-6) var(--area-segura-inferior, env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  border-top: 1px solid var(--cor-borda);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-2s);
  line-height: 16px;
}

.rodape p,
.site-rodape__base p { margin: 0; }
.rodape a { color: var(--cor-texto-suave); text-decoration: none; }
.rodape a:hover { color: var(--cor-primaria); }

.foco__rodape { justify-content: center; text-align: center; }

/* Acesso no computador: a tela é dividida em duas colunas, e o rodapé fica
   só sob a do formulário, sem cobrir a marca à esquerda. */
@media (min-width: 1024px) {
  .foco__rodape { left: 50%; }
}

/* No computador, o rodapé do aplicativo começa depois do menu lateral (o
   fim do menu tem a conta e o botão de sair) e alinha o texto com a
   largura máxima do conteúdo. 100% aqui é a largura da janela. */
@media (min-width: 1024px) {
  html:not([data-menu="recolhido"]) .app .rodape {
    left: var(--largura-lateral);
    padding-inline: max(var(--esp-10),
      calc((100% - var(--largura-lateral) - var(--largura-conteudo)) / 2 + var(--esp-10)));
  }
}

.site-rodape__base {
  padding-inline: max(var(--esp-6), calc((100% - var(--largura-site)) / 2 + var(--esp-6)));
}
.site { padding-bottom: calc(var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px))); }

/* Celular e app móvel: crédito inteiro em uma linha; links continuam no menu. */
.rodape--compacto {
  justify-content: center;
  flex-wrap: nowrap;
  padding-inline: var(--esp-4);
  font-size: var(--texto-rodape-mobile);
  text-align: center;
  white-space: nowrap;
}
.rodape--compacto .rodape__links,
.rodape--compacto.site-rodape__base p + p { display: none; }

@media (max-width: 599px) {
  .rodape,
  .foco__rodape,
  .site-rodape__base {
    justify-content: center;
    padding-inline: var(--esp-4);
    font-size: var(--texto-rodape-mobile);
    text-align: center;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
  .rodape__links,
  .site-rodape__base p + p { display: none; }
}

/* ======================================================== 3. Navegação */

/* ---- 3.1 Marca ------------------------------------------------------ */

.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
  color: var(--cor-texto);
  font-family: var(--fonte-titulo);
  font-size: var(--texto-ml);
  font-weight: var(--peso-destaque);
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1.1;
}

.marca:hover { color: inherit; }

.marca__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--gradiente-marca);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(10, 102, 194, .32), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.marca__texto { display: grid; gap: 2px; }

.marca__texto small {
  color: var(--cor-texto-suave);
  font-family: var(--fonte);
  font-size: 11px;
  font-weight: var(--peso-medio);
  letter-spacing: .02em;
}

.ambiente {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--esp-2);
  border-radius: var(--raio-pilula);
  background: var(--cor-aviso-clara);
  color: var(--cor-aviso);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---- 3.2 Menu lateral (desktop) / gaveta (celular) ------------------ */

.lateral {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(300px, 86vw);
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(77, 163, 255, .14), transparent 70%),
    linear-gradient(180deg, var(--cor-lateral-fundo-2) 0%, var(--cor-lateral-fundo) 42%);
  color: var(--cor-lateral-texto);
  transform: translateX(-104%);
  transition: transform var(--transicao-lenta), visibility 0s linear 260ms;
  visibility: hidden;
}

.menu-aberto .lateral {
  transform: none;
  visibility: visible;
  transition: transform var(--transicao-lenta);
  box-shadow: var(--sombra-elevada);
}

.lateral__fundo {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--cor-ux-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao-lenta);
}

.menu-aberto .lateral__fundo { opacity: 1; pointer-events: auto; }
.menu-aberto { overflow: hidden; }

@media (min-width: 1024px) {
  html:not([data-menu="recolhido"]) .app .lateral {
    position: sticky;
    top: 0;
    z-index: 20;
    width: auto;
    height: 100vh;
    height: 100dvh;
    transform: none;
    visibility: visible;
    transition: none;
    border-right: 1px solid var(--cor-lateral-borda);
  }
  html:not([data-menu="recolhido"]) .app .lateral__fundo,
  html:not([data-menu="recolhido"]) .app .lateral__fechar { display: none; }
  html:not([data-menu="recolhido"]) .app.menu-aberto { overflow: auto; }
}

.lateral__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: 76px;
  padding: var(--esp-4) var(--esp-4) var(--esp-4) var(--esp-5);
}

.lateral .marca { color: #ffffff; }
.lateral .marca__texto small { color: var(--cor-lateral-suave); }
.lateral .ambiente { background: rgba(240, 172, 74, .16); color: #f6c27a; }

.lateral__fechar {
  color: var(--cor-lateral-texto) !important;
  border-color: var(--cor-lateral-borda) !important;
  background: transparent !important;
}

/* Quando o menu não cabe na altura da tela, ele rola inteiro — e não só a
   lista de páginas, que encolhia até esconder itens em notebook baixo e no
   celular deitado (09/10/2026, junto da escolha do menu). Em tela alta a
   lista cresce e mantém ferramentas e conta no pé, como antes. */
.lateral {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .15) transparent;
}

.lateral__navegacao {
  flex: 1 0 auto;
  padding: var(--esp-2) var(--esp-3) var(--esp-4);
}

/* A escolha entre menu fixo e recolhido só muda algo a partir de 1024 px. */
@media (max-width: 1023px) {
  [data-preferencia-menu] { display: none; }
}

.lateral__grupo {
  margin: var(--esp-4) var(--esp-3) var(--esp-2);
  color: var(--cor-lateral-suave);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lateral__grupo:first-child { margin-top: var(--esp-1); }

.lateral__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  min-height: var(--altura-controle);
  padding: 0 var(--esp-3);
  border: 0;
  border-radius: var(--raio-botao);
  background: transparent;
  color: rgba(231, 238, 248, .86);
  font: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.lateral__item svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cor-lateral-suave);
  transition: color var(--transicao);
}

.lateral__item:hover {
  background: rgba(255, 255, 255, .06);
  color: #ffffff;
}

.lateral__item:hover svg { color: #cfe3fb; }

.lateral__item[aria-current="page"] {
  background: var(--cor-lateral-ativo);
  color: var(--cor-lateral-ativo-texto);
  font-weight: var(--peso-forte);
}

.lateral__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--cor-lateral-destaque);
}

.lateral__item[aria-current="page"] svg { color: var(--cor-lateral-destaque); }

.lateral__item:focus-visible { outline-color: var(--cor-lateral-destaque); }

.lateral__item[aria-pressed="true"] { color: #ffffff; }
.lateral__item[aria-pressed="true"] svg { color: #6ee7a8; }
.lateral__item:disabled { opacity: .55; cursor: wait; }

.lateral__ferramentas {
  display: grid;
  gap: 2px;
  padding: var(--esp-3);
  border-top: 1px solid var(--cor-lateral-borda);
}

/* Aparência e Menu num submenu fechado (09/10/2026): mudam pouco e ocupavam
   o pé do menu. O título é um item do menu, com a seta dos detalhes. */
.lateral__submenu > summary { list-style: none; }
.lateral__submenu > summary::-webkit-details-marker { display: none; }

.lateral__submenu > summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  background: currentColor;
  -webkit-mask: var(--icone-seta-baixo-mascara) center / 18px no-repeat;
  mask: var(--icone-seta-baixo-mascara) center / 18px no-repeat;
  transition: transform var(--transicao);
}

.lateral__submenu[open] > summary { color: #ffffff; }
.lateral__submenu[open] > summary::after { transform: rotate(180deg); }
.lateral__submenu-corpo { padding: 0 0 var(--esp-2); }

.lateral__submenu-nota {
  margin: var(--esp-3) var(--esp-3) 0;
  color: var(--cor-lateral-suave);
  font-size: 11px;
}

.lateral__conta {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4) var(--esp-4);
  border-top: 1px solid var(--cor-lateral-borda);
}

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-pilula);
  background: linear-gradient(135deg, #3d8fe0, #1f5fae);
  color: #ffffff;
  font-size: var(--texto-sm);
  font-weight: var(--peso-destaque);
  text-transform: uppercase;
}

.lateral__usuario {
  flex: 1;
  min-width: 0;
  display: grid;
  line-height: 1.3;
}

.lateral__usuario span {
  color: var(--cor-lateral-suave);
  font-size: 11px;
}

.lateral__usuario strong {
  overflow: hidden;
  color: #ffffff;
  font-size: var(--texto-2s);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lateral__sair {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--raio-botao);
  color: var(--cor-lateral-suave);
  transition: background var(--transicao), color var(--transicao);
}

.lateral__sair:hover { background: rgba(240, 102, 94, .14); color: #ff9b95; }

/* Aparência (Auto / Claro / Escuro), dentro do menu escuro */
.aparencia {
  min-width: 0;
  margin: var(--esp-2) 0 0;
  padding: 0;
  border: 0;
}

.aparencia legend {
  margin: 0 0 var(--esp-2);
  padding: 0 var(--esp-3);
  color: var(--cor-lateral-suave);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.aparencia__opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: var(--raio-botao);
  background: rgba(255, 255, 255, .06);
}

.aparencia__opcoes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cor-lateral-suave);
  font: inherit;
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}

.aparencia__opcoes button:hover { color: #ffffff; }

.aparencia__opcoes button[aria-pressed="true"] {
  background: rgba(255, 255, 255, .14);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.aparencia p {
  margin: var(--esp-2) var(--esp-3) 0;
  color: var(--cor-lateral-suave);
  font-size: 11px;
}

/* Aparência fora do menu (rodapé do site): mesmas formas, cores claras */
.aparencia--clara legend { padding: 0; color: var(--cor-texto-suave); }
.aparencia--clara .aparencia__opcoes { background: var(--cor-superficie-3); }
.aparencia--clara .aparencia__opcoes button { color: var(--cor-texto-suave); }
.aparencia--clara .aparencia__opcoes button:hover { color: var(--cor-texto); }
.aparencia--clara .aparencia__opcoes button[aria-pressed="true"] {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: var(--sombra-xs);
}

/* ---- 3.3 Barra superior do celular --------------------------------- */

.barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  height: var(--altura-barra);
  padding: 0 var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  background: color-mix(in srgb, var(--cor-superficie) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.barra .marca { flex: 1; font-size: var(--texto-md); }
.barra .marca__icone { width: 34px; height: 34px; border-radius: 10px; }

@media (max-width: 399px) {
  .barra .ambiente { display: none; }
}

@media (min-width: 1024px) {
  html:not([data-menu="recolhido"]) .app .barra { display: none; }
}

/* ---- 3.4 Acesso rápido (abas inferiores no celular) ---------------- */

/* Fica logo acima do rodapé fixo; quem cuida da área segura do iPhone
   (a faixa do gesto de início) é o rodapé, que está embaixo de tudo. */
.acesso-rapido {
  position: fixed;
  right: 0;
  bottom: calc(var(--altura-rodape) + var(--area-segura-inferior, env(safe-area-inset-bottom, 0px)));
  left: 0;
  z-index: 45;
  height: var(--altura-acesso-rapido);
  border-top: 1px solid var(--cor-borda);
  background: color-mix(in srgb, var(--cor-superficie) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.acesso-rapido__lista {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: var(--altura-acesso-rapido);
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--esp-2);
}

.acesso-rapido__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--cor-texto-fraco);
  font: inherit;
  font-size: 11px;
  font-weight: var(--peso-forte);
  text-decoration: none;
  cursor: pointer;
}

.acesso-rapido__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acesso-rapido__icone {
  width: 24px;
  height: 24px;
  padding: 0;
  transition: transform var(--transicao);
}

.acesso-rapido__item[aria-current="page"] { color: var(--cor-primaria); }

.acesso-rapido__item[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--cor-primaria);
  transform: translateX(-50%);
}

.acesso-rapido__item:active .acesso-rapido__icone { transform: scale(.9); }

@media (min-width: 1024px) {
  html:not([data-menu="recolhido"]) .acesso-rapido { display: none; }
}

/* ---- 3.5 Topo do site público -------------------------------------- */

.site-topo {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid transparent;
  background: color-mix(in srgb, var(--cor-fundo) 80%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  transition: border-color var(--transicao), background var(--transicao);
}

.site-topo--rolado {
  border-bottom-color: var(--cor-borda);
  background: color-mix(in srgb, var(--cor-superficie) 90%, transparent);
}

.site-topo__interno {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  max-width: var(--largura-site);
  height: 72px;
  margin: 0 auto;
  padding: 0 var(--esp-6);
}

.site-topo__navegacao {
  display: none;
  align-items: center;
  gap: var(--esp-1);
}

.site-topo__link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--esp-3);
  border-radius: var(--raio-botao);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: color var(--transicao), background var(--transicao);
}

.site-topo__link:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
.site-topo__link[aria-current="page"] { color: var(--cor-texto); font-weight: var(--peso-forte); }

.site-topo__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
}

/* Pedido do Junior em 21/10/2026: ENTRAR e CRIAR CONTA com 44 px e a mesma
   largura (duas colunas iguais, não a largura do texto). No celular só o
   ENTRAR aparece, com o contorno azul; a coluna vazia não pode sobrar. */
.site-topo__conta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--esp-2);
}

.site-topo__menu { display: inline-flex; }

@media (min-width: 900px) {
  .site-topo__navegacao { display: flex; }
  .site-topo .site-topo__menu { display: none; }
}

@media (max-width: 639px) {
  .site-topo .ambiente { display: none; }
}

@media (max-width: 519px) {
  .site-topo__interno { gap: var(--esp-3); padding: 0 var(--esp-4); height: 64px; }
  .site-topo__acoes .botao--opcional { display: none; }
}

/* Com ENTRAR e o sanduíche em 44 px, abaixo de 360 px o subtítulo da marca
   quebrava em duas linhas. Ali a marca fica só com o nome, como na barra do
   aplicativo. */
@media (max-width: 359px) {
  .site-topo .marca__texto small,
  .foco__topo .marca__texto small { display: none; }
}

/* Rodapé do site público */
.site-rodape {
  border-top: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
}

.site-rodape__interno {
  display: grid;
  gap: var(--esp-8);
  max-width: var(--largura-site);
  margin: 0 auto;
  padding: var(--esp-12) var(--esp-6) var(--esp-8);
}

.site-rodape__marca p {
  max-width: 36ch;
  margin: var(--esp-3) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.site-rodape__links {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-rodape__links strong {
  display: block;
  margin-bottom: var(--esp-1);
  font-size: var(--texto-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
}

.site-rodape__links a {
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  text-decoration: none;
}

.site-rodape__links a:hover { color: var(--cor-primaria); }

/* .site-rodape__base é a barra fixa do pé da janela: estilo em 2.4. */

@media (min-width: 768px) {
  .site-rodape__interno { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}

/* ---- 3.6 Banners do topo do conteúdo ------------------------------- */

.convite-app {
  border-bottom: 1px solid var(--cor-borda);
  background: linear-gradient(90deg, var(--cor-primaria-clara), var(--cor-superficie) 70%);
}

@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  .convite-app { display: none; }
}

.convite-app__interno {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-3) var(--esp-10);
}

.convite-app__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-botao);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  box-shadow: var(--sombra-xs);
}

.convite-app__texto {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: var(--texto-2s);
  color: var(--cor-texto-suave);
}

.convite-app__texto strong { color: var(--cor-texto); font-size: var(--texto-sm); }

.convite-app__acoes { display: flex; align-items: center; gap: var(--esp-2); }

@media (max-width: 1023px) {
  .convite-app__interno { padding: var(--esp-3) var(--esp-6); }
}

@media (max-width: 599px) {
  .convite-app__interno { flex-wrap: wrap; padding: var(--esp-3) var(--esp-4); }
  .convite-app__icone { display: none; }
  .convite-app__texto { flex-basis: calc(100% - 52px); }
  .convite-app__acoes { display: contents; }
  .convite-app__baixar { order: 3; width: 100%; }
}

.faixa-suporte {
  position: sticky;
  top: 0;
  z-index: 42;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-2) var(--esp-4);
  background: var(--cor-alerta);
  color: #ffffff;
  font-size: var(--texto-2s);
  font-weight: var(--peso-medio);
  text-align: center;
}

.faixa-suporte strong { font-weight: var(--peso-destaque); }

.faixa-suporte__sair {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--esp-3);
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  font-weight: var(--peso-forte);
  text-decoration: none;
}

.faixa-suporte__sair:hover { background: rgba(255, 255, 255, .28); color: #ffffff; }

/* Com o menu recolhido a barra superior aparece, e a faixa fica abaixo dela. */
html[data-menu="recolhido"] .app .faixa-suporte { top: var(--altura-barra); }

@media (max-width: 1023px) {
  .app .faixa-suporte { top: var(--altura-barra); }
}

/* =========================================== 4. Cabeçalho de cada página */

.cabecalho-pagina {
  display: grid;
  gap: var(--esp-3);
  margin-bottom: var(--esp-8);
}

.cabecalho-pagina__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-8);
}

.cabecalho-pagina__texto { min-width: 0; flex: 1 1 420px; }

.cabecalho-pagina h1 {
  margin: 0;
  overflow-wrap: anywhere;
}

.cabecalho-pagina__descricao {
  max-width: 72ch;
  margin: var(--esp-2) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-md);
}

.cabecalho-pagina__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-3);
}

.cabecalho-pagina__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}

.sobretitulo {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0 0 var(--esp-2);
  color: var(--cor-primaria);
  font-size: var(--texto-xs);
  font-weight: var(--peso-destaque);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.etiqueta-id {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  height: 28px;
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
}

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--texto-2s);
}

.migalhas li { display: inline-flex; align-items: center; min-width: 0; color: var(--cor-texto-suave); }

.migalhas li + li::before {
  content: "";
  width: 16px;
  height: 16px;
  margin: 0 var(--esp-1);
  background: var(--cor-texto-fraco);
  -webkit-mask: var(--icone-seta-direita) center / 14px no-repeat;
  mask: var(--icone-seta-direita) center / 14px no-repeat;
}

.migalhas a {
  color: var(--cor-texto-suave);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.migalhas a:hover { color: var(--cor-primaria); text-decoration: underline; text-underline-offset: 3px; }

.migalhas [aria-current="page"] {
  overflow: hidden;
  max-width: 40ch;
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .cabecalho-pagina { margin-bottom: var(--esp-6); }
  .cabecalho-pagina h1 { font-size: 26px; }
  .cabecalho-pagina__descricao { font-size: var(--texto-sm); }
  .cabecalho-pagina__acoes { width: 100%; }
  .cabecalho-pagina__acoes > .botao,
  .cabecalho-pagina__acoes > form { flex: 1 1 0; }
  .cabecalho-pagina__acoes > form .botao { width: 100%; }
  .cabecalho-pagina__acoes > .segmentado { display: grid; width: 100%; }
}

/* Título de seção dentro da página */
.secao { min-width: 0; }
.secao + .secao,
.pagina > * + .secao { margin-top: var(--esp-10); }

.secao__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
  margin-bottom: var(--esp-5);
}

.secao__cabecalho h2 { margin: 0; font-size: var(--texto-lg); }

.secao__cabecalho p {
  margin: var(--esp-1) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

@media (max-width: 599px) {
  .secao__cabecalho > .botao,
  .secao__cabecalho > a.botao { width: 100%; }
}

/* =========================================================== 5. Botões */

.botao {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-texto);
  --botao-borda: var(--cor-borda-forte);
  --botao-fundo-hover: var(--cor-superficie-2);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: 0;
  min-height: var(--altura-controle);
  padding: 10px var(--esp-5);
  border: 1px solid var(--botao-borda);
  border-radius: var(--raio-botao);
  background: var(--botao-fundo);
  color: var(--botao-texto);
  font-family: inherit;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}

.botao svg { flex: none; width: 18px; height: 18px; }

.botao:hover {
  background: var(--botao-fundo-hover);
  color: var(--botao-texto);
}

.botao:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }

.botao:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--cor-anel-foco);
}

.botao--primario {
  --botao-fundo: var(--cor-primaria);
  --botao-texto: var(--cor-texto-invertido);
  --botao-borda: var(--cor-primaria);
  --botao-fundo-hover: var(--cor-primaria-escura);
  box-shadow: var(--sombra-botao);
}

.botao--primario:hover { border-color: var(--cor-primaria-escura); }

.botao--secundario {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-texto);
  --botao-borda: var(--cor-borda-forte);
  --botao-fundo-hover: var(--cor-superficie-2);
  box-shadow: var(--sombra-xs);
}

.botao--secundario:hover { border-color: var(--cor-texto-fraco); }

.botao--suave {
  --botao-fundo: var(--cor-primaria-clara);
  --botao-texto: var(--cor-primaria-texto);
  --botao-borda: transparent;
  --botao-fundo-hover: var(--cor-primaria-media);
}

.botao--fantasma {
  --botao-fundo: transparent;
  --botao-texto: var(--cor-texto-suave);
  --botao-borda: transparent;
  --botao-fundo-hover: var(--cor-superficie-3);
}

.botao--fantasma:hover { color: var(--cor-texto); }

.botao--perigo {
  --botao-fundo: var(--cor-alerta);
  --botao-texto: #ffffff;
  --botao-borda: var(--cor-alerta);
  --botao-fundo-hover: var(--cor-alerta-escura);
}

:root[data-tema="escuro"] .botao--perigo { --botao-texto: #1a0a0a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .botao--perigo { --botao-texto: #1a0a0a; }
}

.botao--perigo-contorno {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-alerta);
  --botao-borda: color-mix(in srgb, var(--cor-alerta) 45%, transparent);
  --botao-fundo-hover: var(--cor-alerta-clara);
}

/* Contorno azul: ação secundária que precisa parecer botão sem disputar com
   o primário ao lado. Pedido do Junior em 21/10/2026, para o ENTRAR do topo
   (um botão sem borda parecia texto solto); vale também para o INÍCIO/SAIR
   do topo das telas de acesso. */
.botao--contorno {
  --botao-fundo: var(--cor-superficie);
  --botao-texto: var(--cor-primaria-texto);
  --botao-borda: var(--cor-primaria);
  --botao-fundo-hover: var(--cor-primaria-clara);
}

.botao--contorno:hover { color: var(--cor-primaria-texto); }

.botao--pequeno {
  min-height: var(--altura-controle-pequeno);
  padding: 6px var(--esp-3);
  font-size: var(--texto-2s);
}

.botao--pequeno svg { width: 16px; height: 16px; }

.botao--icone {
  width: var(--altura-controle);
  padding: 0;
  flex: none;
}

.botao--icone.botao--pequeno { width: var(--altura-controle-pequeno); }

.botao--bloco { width: 100%; }

.botao:disabled,
.botao[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.botao[aria-busy="true"] { cursor: progress; }

.botao__contador {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, .22);
  font-size: 11px;
}

/* Grupos de ações.
   .acoes          alinhadas à direita; no celular, empilhadas com a
                   principal (a última) em cima e largura total.
   .acoes--iguais  colunas de largura idêntica, também no celular.
   .acoes--inicio  alinhadas à esquerda. */
.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-3);
}

.acoes > .botao,
.acoes > form > .botao { min-width: 132px; }

.acoes--inicio { justify-content: flex-start; }
.acoes--entre { justify-content: space-between; }
.acoes--topo { margin-top: var(--esp-6); }

.acoes--iguais {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: stretch;
}

.acoes--iguais > .botao,
.acoes--iguais > form > .botao,
.acoes--iguais > .contents > .botao { width: 100%; min-width: 0; }

@media (max-width: 599px) {
  .acoes:not(.acoes--iguais) {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .acoes:not(.acoes--iguais) > .botao,
  .acoes:not(.acoes--iguais) > form,
  .acoes:not(.acoes--iguais) > form > .botao { width: 100%; }
}

/* Controle segmentado (filtros, períodos) */
.segmentado {
  display: inline-grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie-3);
}

.segmentado__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-width: 0;
  height: 34px;
  padding: 0 var(--esp-4);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cor-texto-suave);
  font: inherit;
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), box-shadow var(--transicao);
}

.segmentado__item:hover { color: var(--cor-texto); }

.segmentado__item[aria-pressed="true"],
.segmentado__item[aria-current="page"] {
  background: var(--cor-superficie);
  color: var(--cor-texto);
  box-shadow: 0 1px 3px rgba(15, 29, 50, .12), 0 0 0 1px var(--cor-borda);
}

.segmentado__item svg { width: 16px; height: 16px; }

.segmentado--bloco { display: grid; width: 100%; }

/* Link de texto com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-primaria);
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  text-decoration: none;
}

.link-seta::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icone-seta-direita) center / 16px no-repeat;
  mask: var(--icone-seta-direita) center / 16px no-repeat;
  transition: transform var(--transicao);
}

.link-seta:hover::after { transform: translateX(2px); }

/* ====================================================== 6. Formulários */

.formulario {
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}

.formulario > .acoes { margin-top: var(--esp-2); }

.campos {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
}

/* As colunas dos campos dependem da largura do CARTÃO, não da tela: o
   mesmo formulário fica em uma coluna na lateral e em três no centro. */
@container (min-width: 520px) {
  .campos--2,
  .campos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (min-width: 760px) {
  .campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.campo {
  display: block;
  min-width: 0;
  margin: 0;
}

.campo__rotulo {
  display: block;
  margin-bottom: 6px;
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

.campo__obrigatorio {
  margin-left: 2px;
  color: var(--cor-alerta);
}

.campo__entrada {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--altura-controle);
  padding: 0 14px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-campo);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: var(--texto-md);
  line-height: 1.4;
  box-shadow: var(--sombra-xs);
  transition: border-color var(--transicao), box-shadow var(--transicao), background var(--transicao);
}

.campo__entrada::placeholder { color: var(--cor-texto-fraco); opacity: 1; }

.campo__entrada:hover:not(:disabled) { border-color: var(--cor-texto-fraco); }

.campo__entrada:focus,
.campo__entrada:focus-visible {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-anel-foco);
}

.campo__entrada:disabled {
  background: var(--cor-superficie-2);
  color: var(--cor-texto-fraco);
  cursor: not-allowed;
}

.campo__entrada[aria-invalid="true"],
.campo__entrada:user-invalid {
  border-color: var(--cor-alerta);
}

.campo__entrada[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-alerta) 25%, transparent); }

textarea.campo__entrada {
  height: auto;
  min-height: 112px;
  padding: 12px 14px;
  resize: vertical;
}

select.campo__entrada {
  padding-right: 40px;
  background-image: var(--icone-seta-baixo);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 18px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.campo__entrada[type="file"] {
  display: flex;
  align-items: center;
  height: auto;
  min-height: var(--altura-controle);
  padding: 5px;
  border-style: dashed;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  cursor: pointer;
}

.campo__entrada[type="file"]::file-selector-button {
  height: 32px;
  margin-right: var(--esp-3);
  padding: 0 var(--esp-3);
  border: 1px solid var(--cor-borda-forte);
  border-radius: 8px;
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  cursor: pointer;
}

.campo__entrada[type="file"]::file-selector-button:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

.campo__entrada[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.campo__ajuda,
.campo__erro {
  display: block;
  margin-top: 6px;
  font-size: var(--texto-2s);
  line-height: 1.45;
}

.campo__ajuda { color: var(--cor-texto-suave); }
.campo__erro { color: var(--cor-alerta); font-weight: var(--peso-medio); }
.campo__erro:empty { display: none; }

/* Campo com ícone à esquerda e, opcionalmente, o olho à direita */
.campo--icone {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}

.campo--icone > .campo__rotulo { grid-area: 1 / 1; }
.campo--icone > .campo__entrada { grid-area: 2 / 1; padding-left: 42px; }
.campo--icone.campo--olho > .campo__entrada { padding-right: 48px; }
.campo--icone > .campo__ajuda,
.campo--icone > .campo__erro { grid-area: 3 / 1; }

.campo__icone {
  z-index: 1;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: start;
  width: 18px;
  height: 18px;
  margin-left: 14px;
  color: var(--cor-texto-fraco);
  pointer-events: none;
  transition: color var(--transicao);
}

.campo--icone .campo__entrada:focus ~ .campo__icone { color: var(--cor-primaria); }

.campo__olho {
  z-index: 1;
  grid-area: 2 / 1;
  align-self: center;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

.campo__olho:hover { color: var(--cor-primaria); background: var(--cor-superficie-3); }

/* PIN: dígitos largos e espaçados */
.campo__entrada--pin {
  font-family: var(--fonte-mono);
  font-size: var(--texto-lg);
  letter-spacing: .5em;
}

.campo__entrada--pin::placeholder { letter-spacing: .3em; }

/* Caixa de marcar */
.marcar {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--esp-3);
  min-height: var(--altura-controle);
  padding: 11px 0;
  cursor: pointer;
}

.marcar__caixa {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--cor-primaria);
  cursor: pointer;
}

.marcar__texto {
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

.marcar__ajuda {
  grid-column: 2;
  margin-top: 2px;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
}

.marcar__caixa[aria-invalid="true"] { outline: 2px solid var(--cor-alerta); outline-offset: 2px; }

.marcar--destaque {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-botao);
  background: var(--cor-superficie-2);
}

.formulario-canal { min-width: 0; margin: 0; padding: 0; border: 0; }
.formulario-canal:disabled { opacity: .6; }

/* Links de apoio sob o botão principal */
.links-apoio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--esp-1) var(--esp-4);
  margin-top: var(--esp-6);
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
}

.links-apoio__item {
  display: inline-flex;
  align-items: center;
  min-height: var(--altura-controle);
  color: var(--cor-primaria);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  text-decoration: none;
}

.links-apoio__item:hover { text-decoration: underline; text-underline-offset: 3px; }

.linha-opcoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--esp-4);
}

.linha-opcoes .marcar { flex: 1 1 220px; }

.separador-texto {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: var(--esp-6) 0;
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.formulario > .separador-texto { margin: 0; }

.separador-texto::before,
.separador-texto::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda); }

/* ================================================ 7. Cartões e grades */

.card {
  min-width: 0;
  container-type: inline-size;
  padding: var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-card);
}

.card > h2,
.card__cabecalho h2 {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-ml);
}

.card > h2 + .suave,
.card > h2 + p { margin-top: 0; }

.card > :last-child { margin-bottom: 0; }

.card__cabecalho,
.card__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.card__cabecalho > div { min-width: 0; flex: 1 1 220px; }

.card__cabecalho h2,
.card__cabecalho h3,
.card__titulo h2,
.card__titulo h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.card__descricao {
  margin: var(--esp-1) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.card__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.card__icone svg { width: 22px; height: 22px; }
.card__icone--perigo { background: var(--cor-alerta-clara); color: var(--cor-alerta); }
.card__icone--aviso { background: var(--cor-aviso-clara); color: var(--cor-aviso); }
.card__icone--sucesso { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }

.card__rodape {
  margin-top: var(--esp-6);
  padding-top: var(--esp-5);
  border-top: 1px solid var(--cor-borda);
}

.card--plano { box-shadow: none; }
.card--destaque { border-color: var(--cor-primaria-media); background: linear-gradient(180deg, var(--cor-primaria-clara), var(--cor-superficie) 70%); }

.card--perigo {
  border-color: color-mix(in srgb, var(--cor-alerta) 35%, var(--cor-borda));
}

.card--perigo .card__cabecalho h2 { color: var(--cor-alerta); }

@media (max-width: 599px) {
  .card { padding: var(--esp-5) var(--esp-4); border-radius: 14px; }
}

.pilha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-content: start;
}

.pilha > :is(h2, h3, p, .aviso) { margin-bottom: 0; }

.grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: start;
}

@media (min-width: 900px) {
  .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grade--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
}

.grade--estica { align-items: stretch; }

/* Em cartões vizinhos de mesma altura, as ações ficam todas no rodapé. */
.grade--estica > .card { display: flex; flex-direction: column; }
.grade--estica > .card > form:last-child,
.grade--estica > .card > .formulario:last-child { flex: 1; }
.grade--estica > .card > .acoes:last-child,
.grade--estica .formulario > .acoes:last-child { margin-top: auto; }
.grade--estica > .card > form.card__rodape:last-child { flex: none; margin-top: auto; }

/* Cartão que sobra sozinho na última linha ocupa a linha inteira. */
@media (min-width: 900px) {
  .grade--2 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Conteúdo principal com coluna lateral de apoio */
.layout-apoio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-6);
  align-items: start;
}

@media (min-width: 1180px) {
  .layout-apoio { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
}

/* Estado vazio */
.vazio {
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  padding: var(--esp-10) var(--esp-6);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
  text-align: center;
}

.vazio__icone {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--esp-2);
  border-radius: 16px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.vazio__icone svg { width: 26px; height: 26px; }
.vazio h2, .vazio h3 { margin: 0; font-size: var(--texto-ml); }
.vazio h1 { margin: 0; font-size: var(--texto-xl); }

.vazio p {
  max-width: 48ch;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.vazio .acoes { margin-top: var(--esp-4); justify-content: center; }

/* ================================================== 8. Estados e dados */

/* Selos */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 3px 10px;
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-3);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  white-space: nowrap;
}

.selo::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--raio-pilula);
  background: currentColor;
}

.selo--ok      { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.selo--falha   { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.selo--atencao { background: var(--cor-aviso-clara);   color: var(--cor-aviso); }
.selo--info    { background: var(--cor-info-clara);    color: var(--cor-info); }
.selo--neutro  { background: var(--cor-superficie-3);  color: var(--cor-texto-suave); }
.selo--sem-ponto::before { display: none; }

.selo--ok::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-sucesso) 22%, transparent); }

/* Avisos (mensagens em bloco) */
.aviso {
  --aviso-cor: var(--cor-info);
  --aviso-icone: var(--icone-info);
  position: relative;
  display: block;
  margin: 0 0 var(--esp-4);
  padding: 14px var(--esp-4) 14px 48px;
  border: 1px solid color-mix(in srgb, var(--aviso-cor) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--aviso-cor) 9%, var(--cor-superficie));
  color: var(--cor-texto);
  font-size: var(--texto-sm);
  line-height: 1.5;
}

.aviso::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 16px;
  width: 20px;
  height: 20px;
  background: var(--aviso-cor);
  -webkit-mask: var(--aviso-icone) center / contain no-repeat;
  mask: var(--aviso-icone) center / contain no-repeat;
}

.aviso strong { color: var(--cor-texto); }
.aviso h3 { margin: 0 0 var(--esp-2); font-size: var(--texto-sm); }

.aviso--erro    { --aviso-cor: var(--cor-alerta);  --aviso-icone: var(--icone-erro); }
.aviso--sucesso { --aviso-cor: var(--cor-sucesso); --aviso-icone: var(--icone-ok); }
.aviso--atencao { --aviso-cor: var(--cor-aviso);   --aviso-icone: var(--icone-alerta); }
.aviso--info    { --aviso-cor: var(--cor-info);    --aviso-icone: var(--icone-info); }

.aviso--operacao { font-size: var(--texto-md); border-width: 1.5px; }
.aviso--operacao #operacao-contagem {
  display: inline-block;
  margin-top: var(--esp-2);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

/* Faixa de estado (dentro de cartão) */
.faixa {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  padding: 10px var(--esp-3);
  border-radius: var(--raio-botao);
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  line-height: 1.35;
}

.faixa::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
}

.faixa--normal  { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.faixa--normal::before { -webkit-mask-image: var(--icone-ok); mask-image: var(--icone-ok); }
.faixa--alerta  { background: var(--cor-alerta-clara);  color: var(--cor-alerta); }
.faixa--alerta::before { -webkit-mask-image: var(--icone-alerta); mask-image: var(--icone-alerta); }
.faixa--atencao { background: var(--cor-aviso-clara);   color: var(--cor-aviso); }
.faixa--atencao::before { -webkit-mask-image: var(--icone-alerta); mask-image: var(--icone-alerta); }
.faixa--neutra  { background: var(--cor-superficie-3);  color: var(--cor-texto-suave); }

/* Linhas chave-valor */
.k {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
}

.k:last-child { border-bottom: 0; }
.k > span { min-width: 0; color: var(--cor-texto-suave); }
.k > span .suave { font-size: var(--texto-xs); }

.k b {
  min-width: 0;
  color: var(--cor-texto);
  font-weight: var(--peso-forte);
  text-align: right;
  overflow-wrap: anywhere;
}

.k b.mono { font-weight: var(--peso-medio); }

.dados { display: grid; align-content: start; }

/* Indicadores numéricos (cartões de resumo) */
.indicadores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-4);
}

@media (min-width: 900px) {
  .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.indicador {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-width: 0;
  padding: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-card);
  background: var(--cor-superficie);
  box-shadow: var(--sombra-card);
}

.indicador__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.indicador__icone svg { width: 22px; height: 22px; }

.indicador--atencao .indicador__icone { background: var(--cor-aviso-clara); color: var(--cor-aviso); }
.indicador--sucesso .indicador__icone { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.indicador--alerta .indicador__icone { background: var(--cor-alerta-clara); color: var(--cor-alerta); }

.indicador__dados { display: grid; min-width: 0; }

.indicador__valor {
  font-family: var(--fonte-titulo);
  font-size: 28px;
  font-weight: var(--peso-destaque);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.indicador__rotulo {
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  font-weight: var(--peso-medio);
  line-height: 1.3;
}

/* Menu recolhido (celular e tablet): o resumo da conta encolhe para os
   dispositivos aparecerem antes — o painel é para monitorar (09/10/2026).
   Ícone, número e rótulo numa linha só, 46 px de altura: duas colunas no
   celular, quatro a partir de 768 px. Mesma marca do menu (tema.js). */
html[data-menu="recolhido"] .indicadores { gap: var(--esp-2); }
html[data-menu="recolhido"] .indicador { gap: var(--esp-2); padding: var(--esp-2); }
html[data-menu="recolhido"] .indicador__icone { width: 28px; height: 28px; border-radius: var(--raio-pequeno); }
html[data-menu="recolhido"] .indicador__icone svg { width: 16px; height: 16px; }
html[data-menu="recolhido"] .indicador__dados { display: flex; align-items: baseline; gap: var(--esp-1); }
html[data-menu="recolhido"] .indicador__valor { font-size: var(--texto-lg); }
html[data-menu="recolhido"] .indicador__rotulo {
  overflow: hidden;
  font-size: var(--texto-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 768px) {
  html[data-menu="recolhido"] .indicadores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Abaixo de 360 px o ícone sai para o rótulo caber inteiro. */
@media (max-width: 359px) {
  .indicador__icone { display: none; }
}

/* Detalhes recolhíveis */
.detalhes {
  border-top: 1px solid var(--cor-borda);
}

.detalhes > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  min-height: var(--altura-controle);
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  font-weight: var(--peso-forte);
  list-style: none;
  cursor: pointer;
}

.detalhes > summary::-webkit-details-marker { display: none; }

.detalhes > summary::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icone-seta-baixo-mascara) center / 18px no-repeat;
  mask: var(--icone-seta-baixo-mascara) center / 18px no-repeat;
  transition: transform var(--transicao);
}

.detalhes[open] > summary::after { transform: rotate(180deg); }
.detalhes > summary:hover { color: var(--cor-texto); }
/* Pedido do Junior em 11/10/2026: Desvincular este canal em vermelho. */
.detalhes--perigo > summary { color: var(--cor-alerta); }
.detalhes--perigo > summary:hover { color: var(--cor-alerta-escura); }
.detalhes__corpo { padding-bottom: var(--esp-2); }

/* Tabelas */
.tabela-caixa {
  overflow-x: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie);
  -webkit-overflow-scrolling: touch;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabela th,
.tabela td {
  padding: 12px var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: top;
}

.tabela thead th {
  position: sticky;
  top: 0;
  background: var(--cor-superficie-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td.mono { white-space: nowrap; }
.tabela .tabela__acoes { text-align: right; white-space: nowrap; }
.tabela .botao { white-space: nowrap; }
.tabela .acoes > .botao,
.tabela .acoes > form > .botao { min-width: 0; }
.tabela .tabela__acoes .acoes { flex-wrap: nowrap; justify-content: flex-end; }

/* Em telas estreitas a tabela vira lista de cartões rotulados */
@media (max-width: 767px) {
  .tabela--responsiva thead { display: none; }
  .tabela--responsiva,
  .tabela--responsiva tbody { display: block; }
  .tabela--responsiva tr {
    display: grid;
    gap: var(--esp-2);
    padding: var(--esp-4);
    border-bottom: 1px solid var(--cor-borda);
  }
  .tabela--responsiva tr:last-child { border-bottom: 0; }
  .tabela--responsiva td {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: var(--esp-3);
    padding: 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .tabela--responsiva td::before {
    content: attr(data-rotulo);
    color: var(--cor-texto-fraco);
    font-size: var(--texto-xs);
    font-weight: var(--peso-forte);
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .tabela--responsiva td.mono { white-space: normal; }
  .tabela--responsiva .tabela__acoes { grid-template-columns: minmax(0, 1fr); margin-top: var(--esp-2); }
  .tabela--responsiva .tabela__acoes::before { display: none; }
  .tabela--responsiva .tabela__acoes .acoes { flex-wrap: wrap; }
}

/* Rolagem horizontal só do bloco, nunca da página */
.rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Paginação */
.paginacao {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-5);
}

.paginacao > :first-child { justify-self: start; }
.paginacao > :last-child { justify-self: end; }

.paginacao__posicao {
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.paginacao .botao[aria-disabled="true"] { pointer-events: none; }

/* ========================================== 9. Diálogos e notificações */

.dialogo {
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--cor-texto);
}

.dialogo::backdrop {
  background: var(--cor-ux-overlay);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.dialogo[open] { animation: dialogo-entrar 200ms cubic-bezier(.2, .8, .3, 1); }
.dialogo[open]::backdrop { animation: aparecer 200ms ease; }

.dialogo__caixa {
  display: grid;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: var(--esp-8) var(--esp-8) var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: 20px;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-elevada);
}

.dialogo__icone {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--esp-5);
  border-radius: 14px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.dialogo__icone svg { width: 24px; height: 24px; }
.dialogo--sucesso .dialogo__icone { background: var(--cor-sucesso-clara); color: var(--cor-sucesso); }
.dialogo--erro .dialogo__icone,
.dialogo--perigo .dialogo__icone { background: var(--cor-alerta-clara); color: var(--cor-alerta); }
.dialogo--aviso .dialogo__icone { background: var(--cor-aviso-clara); color: var(--cor-aviso); }

.dialogo__titulo {
  margin: 0 0 var(--esp-2);
  font-size: var(--texto-lg);
  font-weight: var(--peso-destaque);
  letter-spacing: -0.015em;
}

.dialogo__texto {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
  line-height: 1.6;
  white-space: pre-line;
}

.dialogo__campo { margin-top: var(--esp-5); }

.dialogo__acoes {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
  margin-top: var(--esp-8);
}

.dialogo__acoes .botao { min-width: 128px; }

@media (max-width: 479px) {
  .dialogo__caixa { padding: var(--esp-6) var(--esp-5) var(--esp-5); }
  .dialogo__acoes { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
  .dialogo__acoes .botao { min-width: 0; }
}

/* Reserva para navegador sem <dialog>.showModal */
.dialogo--sem-modal[open] {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  width: 100%;
  max-height: none;
  background: var(--cor-ux-overlay);
}

.dialogo--sem-modal .dialogo__caixa { width: min(460px, calc(100vw - 32px)); }

/* Notificações flutuantes */
.notificacoes-flutuantes {
  position: fixed;
  top: var(--esp-5);
  right: var(--esp-5);
  z-index: 2100;
  display: grid;
  gap: var(--esp-3);
  width: min(400px, calc(100vw - 32px));
  pointer-events: none;
}

@media (max-width: 1023px) {
  .notificacoes-flutuantes {
    top: calc(var(--altura-barra) + var(--esp-3));
    right: 50%;
    transform: translateX(50%);
  }
  .site .notificacoes-flutuantes,
  .foco-pagina .notificacoes-flutuantes { top: var(--esp-4); }
}

/* Aplicativo com o menu recolhido em tela larga: a barra superior aparece,
   e os avisos descem para baixo dela. */
html[data-menu="recolhido"] .app .notificacoes-flutuantes {
  top: calc(var(--altura-barra) + var(--esp-3));
}

.notificacao {
  --notificacao-cor: var(--cor-info);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--esp-3);
  padding: 14px 10px 14px var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-elevada);
  pointer-events: auto;
  animation: notificacao-entrar 260ms cubic-bezier(.2, .8, .3, 1);
}

.notificacao--saindo { animation: notificacao-sair 180ms ease forwards; }
.notificacao--sucesso { --notificacao-cor: var(--cor-sucesso); }
.notificacao--erro { --notificacao-cor: var(--cor-alerta); }
.notificacao--aviso { --notificacao-cor: var(--cor-aviso); }

.notificacao__icone {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: var(--notificacao-cor);
  -webkit-mask: var(--icone-info) center / contain no-repeat;
  mask: var(--icone-info) center / contain no-repeat;
}

.notificacao--sucesso .notificacao__icone { -webkit-mask-image: var(--icone-ok); mask-image: var(--icone-ok); }
.notificacao--erro .notificacao__icone { -webkit-mask-image: var(--icone-erro); mask-image: var(--icone-erro); }
.notificacao--aviso .notificacao__icone { -webkit-mask-image: var(--icone-alerta); mask-image: var(--icone-alerta); }

.notificacao__titulo {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  line-height: 1.4;
}

.notificacao__texto {
  margin: 2px 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  line-height: 1.5;
}

.notificacao__fechar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px 0 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--cor-texto-fraco);
  cursor: pointer;
}

.notificacao__fechar:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }

@keyframes dialogo-entrar {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

@keyframes notificacao-entrar {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@keyframes notificacao-sair {
  to { opacity: 0; transform: translateY(-6px) scale(.98); }
}

/* ===================================== 10. Painel de monitoramento */

.painel-controles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-6);
  margin: var(--esp-8) 0 var(--esp-5);
}

.painel-controles h2 { margin: 0; font-size: var(--texto-lg); }

@media (max-width: 599px) {
  .painel-controles .segmentado { width: 100%; }
}

.reservatorios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--esp-5);
  align-items: stretch;
}

/* Regra do produto: todos os cartões do painel com a mesma altura. As
   linhas da grade são iguais (1fr) e cada cartão empurra detalhes e ações
   para o rodapé, então os botões ficam alinhados de ponta a ponta. Em uma
   coluna só (celular) isso só criaria espaço vazio, então não se aplica. */
@media (min-width: 640px) {
  .reservatorios,
  .grade--auto.grade--iguais { grid-auto-rows: 1fr; }
}

.reservatorio {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  overflow: hidden;
  padding: var(--esp-5);
}

.reservatorio::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: transparent;
}

.reservatorio--alerta { border-color: color-mix(in srgb, var(--cor-alerta) 35%, var(--cor-borda)); }
.reservatorio--alerta::before { background: var(--cor-alerta); }

.reservatorio__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
}

.reservatorio__identidade { min-width: 0; }

.reservatorio__tipo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--esp-1);
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-destaque);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reservatorio__tipo svg { width: 14px; height: 14px; color: var(--cor-primaria); }

.reservatorio__nome {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--texto-ml);
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.reservatorio__idade {
  margin: var(--esp-1) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}

.reservatorio__topo .selo { flex: none; }

.reservatorio__corpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-5);
  border-radius: 14px;
  background:
    radial-gradient(240px 140px at 100% 100%, color-mix(in srgb, var(--cor-agua) 14%, transparent), transparent 70%),
    var(--cor-superficie-2);
}

.reservatorio__numeros { min-width: 0; }

.reservatorio__rotulo {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.reservatorio__pct {
  margin: var(--esp-1) 0 0;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-25);
  font-weight: var(--peso-destaque);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.reservatorio__pct--vazio { color: var(--cor-texto-fraco); }

.reservatorio__litros {
  min-height: 22px;
  margin: var(--esp-2) 0 0;
  color: var(--cor-agua-forte);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}

.reservatorio--offline .reservatorio__pct,
.reservatorio--offline .reservatorio__litros { color: var(--cor-texto-fraco); }

.reservatorio__desenho { line-height: 0; }

/* Tanque ilustrado */
.ux-tanque { width: 92px; height: 120px; overflow: visible; }
.ux-tanque__casca { fill: var(--cor-superficie); stroke: var(--cor-borda-forte); stroke-width: 2; }
.ux-tanque__marca { stroke: var(--cor-borda-forte); stroke-width: 1.5; stroke-linecap: round; }
.ux-tanque__reflexo { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3; stroke-linecap: round; }
.ux-agua { transition: transform 700ms cubic-bezier(.2, .8, .3, 1); }
.ux-onda { fill: var(--cor-agua); animation: ux-onda 3.2s ease-in-out infinite alternate; }
.ux-onda--fundo { fill: var(--cor-agua-forte); opacity: .35; animation-duration: 4.4s; animation-direction: alternate-reverse; }
.ux-tanque rect.ux-onda { animation: none; }
.reservatorio--offline .ux-onda { fill: var(--cor-borda-forte); animation-play-state: paused; }
.reservatorio--offline .ux-onda--fundo { opacity: .2; }

@keyframes ux-onda {
  from { transform: translateX(-10px); }
  to { transform: translateX(10px); }
}

/* Ícone grande do módulo, no lugar do tanque */
.modulo-painel__desenho {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 20px;
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  box-shadow: var(--sombra-xs);
}

.modulo-painel__desenho svg { width: 48px; height: 48px; }
.reservatorio--offline .modulo-painel__desenho { color: var(--cor-texto-fraco); }

/* Pedido do Junior em 11/10/2026: duas medidas, sem repetir o horário do topo. */
.reservatorio__medidas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

.reservatorio__medidas > div {
  min-width: 0;
  padding: 10px var(--esp-3);
}

.reservatorio__medidas > div + div { border-left: 1px solid var(--cor-borda); }

.reservatorio__medidas dt {
  margin-bottom: 2px;
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.reservatorio__medidas dd {
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Gráfico do cartão */
.reservatorio__grafico {
  display: grid;
  gap: var(--esp-3);
}

.reservatorio__secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.reservatorio__secao h3 { margin: 0; font-size: var(--texto-sm); }

.reservatorio__secao span {
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
}

.reservatorio__modulos {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
}

.reservatorio__modulos svg { flex: none; width: 18px; height: 18px; }
/* Uma linha só: nome de canal longo vira reticências; o texto inteiro fica
   no título da linha e nos detalhes técnicos do card. */
.reservatorio__modulos span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reservatorio__modulos--falha { color: var(--cor-alerta); font-weight: var(--peso-forte); }
.reservatorio__modulos--falha svg { animation: modulo-falha-pulso 1s ease-in-out infinite; }

@keyframes modulo-falha-pulso { 50% { opacity: .3; } }

.reservatorio > .detalhes { margin-top: auto; }

.reservatorio__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}


.ux-atualizado .reservatorio__pct { animation: ux-destaque 900ms ease; }

@keyframes ux-destaque {
  from { color: var(--cor-agua-forte); }
  to { color: inherit; }
}

/* Gráfico (SVG gerado no servidor) */
.grafico-bloco {
  padding: var(--esp-3) var(--esp-3) var(--esp-2);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie);
}

.grafico {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}

.grafico:focus-visible { outline-offset: 4px; }

/* Gráfico grande: um desenho para tela larga e outro para estreita, para
   o texto dos eixos não ficar minúsculo no celular nem gigante no monitor. */
.grafico-responsivo__estreito { display: none; }
@media (max-width: 639px) {
  .grafico-responsivo__largo { display: none; }
  .grafico-responsivo__estreito { display: block; }
}

.grafico__legenda {
  margin: var(--esp-2) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}

.grafico__leitura {
  display: block;
  min-height: 24px;
  margin-top: var(--esp-2);
  color: var(--cor-primaria-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.grafico__leitura:empty::before {
  content: "Passe o dedo ou o mouse no gráfico para ver cada leitura";
  color: var(--cor-texto-fraco);
  font-weight: var(--peso-medio);
}

.grafico__cursor { stroke: var(--cor-primaria); stroke-width: 1; stroke-dasharray: 4 4; }
.grafico__ponto { fill: var(--cor-superficie); stroke: var(--cor-primaria); stroke-width: 2.5; }

/* Canais do módulo, com interruptor */
.canais { display: grid; }

.canal-manual {
  padding: var(--esp-2) 0;
  border-bottom: 1px solid var(--cor-borda);
}

.canal-manual:last-of-type { border-bottom: 0; }

.canal-manual__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--esp-2);
}

.canal-manual__nome { min-width: 0; }

.canal-manual__nome strong {
  display: block;
  overflow: hidden;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canal-manual__aviso {
  margin: 1px 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  line-height: 1.4;
}

.canal-manual__switch {
  position: relative;
  flex: none;
  width: 60px;
  height: var(--altura-controle);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.canal-manual__switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 48px;
  height: 28px;
  border: 1px solid var(--cor-borda-forte);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-3);
  transform: translateY(-50%);
  transition: background var(--transicao), border-color var(--transicao);
}

.canal-manual__switch span {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 22px;
  height: 22px;
  border-radius: var(--raio-pilula);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 29, 50, .3);
  transform: translateY(-50%);
  transition: transform var(--transicao);
}

.canal-manual__switch[aria-checked="true"]::before {
  border-color: var(--cor-sucesso);
  background: var(--cor-sucesso);
}

.canal-manual__switch[aria-checked="true"] span { transform: translate(18px, -50%); }

.canal-manual__switch:hover:not(:disabled)::before { border-color: var(--cor-primaria); }

.canal-manual__switch:focus-visible { outline: none; }
.canal-manual__switch:focus-visible::before { box-shadow: 0 0 0 3px var(--cor-anel-foco); }

.canal-manual__switch:disabled { opacity: .45; cursor: not-allowed; }

.canal-manual__automatico { min-width: 0; padding-inline: var(--esp-3); }

.canal-manual[aria-busy="true"] .canal-manual__switch { animation: ux-pendencia 800ms infinite alternate; }

@keyframes ux-pendencia { from { opacity: .45; } to { opacity: 1; } }

.canais__paginas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-align: center;
}

.canais__paginas:has(button:first-child:disabled):has(button:last-child:disabled) { display: none; }

.vazio-filtro { margin-top: var(--esp-4); }

/* ============================ 11. Dispositivos e configuração */

.dispositivo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.dispositivo__topo {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--esp-4);
  row-gap: 2px;
}

.dispositivo__topo > .card__icone { grid-row: 1 / span 2; }
.dispositivo__titulo { display: contents; }
.dispositivo__titulo h3 { grid-column: 2 / -1; }
.dispositivo__topo > .selo { grid-column: 3; grid-row: 1; justify-self: end; }

.dispositivo__titulo h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: var(--texto-md);
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dispositivo__tipo {
  margin: 0 0 2px;
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-destaque);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dispositivo__nota {
  flex: 1;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
}

.dispositivo .acoes--iguais { margin-top: auto; }

.lista-canais { display: grid; gap: var(--esp-2); }

.lista-canais__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie-2);
  font-size: var(--texto-sm);
}

/* Histórico de alterações em linha do tempo */
.linha-tempo {
  position: relative;
  display: grid;
  gap: var(--esp-4);
  margin: 0;
  padding: 0 0 0 var(--esp-6);
  list-style: none;
}

.linha-tempo::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--cor-borda);
}

.linha-tempo__item { position: relative; min-width: 0; }

.linha-tempo__item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(var(--esp-6) * -1 + 1px);
  width: 12px;
  height: 12px;
  border: 2px solid var(--cor-superficie);
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria);
  box-shadow: 0 0 0 1px var(--cor-primaria-media);
}

.linha-tempo__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

.linha-tempo__titulo time,
.linha-tempo__meta {
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
}

.linha-tempo__corpo {
  margin: var(--esp-1) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  overflow-wrap: anywhere;
}

.mudanca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
  font-size: var(--texto-2s);
}

.mudanca__de { color: var(--cor-texto-fraco); text-decoration: line-through; }
.mudanca__para { color: var(--cor-texto); font-weight: var(--peso-forte); }

/* ============================ 12. Conta, ajustes, histórico, log */

.ajuste__grupo {
  margin: var(--esp-6) 0 var(--esp-1);
}

.ajuste__grupo:first-child { margin-top: 0; }
.ajuste__grupo h2 { margin: 0; font-size: var(--texto-lg); }
.ajuste__grupo p { margin: var(--esp-1) 0 0; color: var(--cor-texto-suave); font-size: var(--texto-sm); }

.ajuste { display: flex; flex-direction: column; }
.ajuste > form { display: grid; gap: var(--esp-4); margin-top: auto; }
.ajuste__texto { margin: 0 0 var(--esp-4); color: var(--cor-texto-suave); font-size: var(--texto-sm); }

.ajuste .k { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.passos-calibracao {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: passo;
}

.passos-calibracao li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
  font-weight: var(--peso-medio);
}

.passos-calibracao li::before {
  counter-increment: passo;
  content: counter(passo);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--raio-pilula);
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
  font-size: var(--texto-xs);
  font-weight: var(--peso-destaque);
}

.passos-calibracao li + li::after { content: none; }

.operacoes { display: grid; }

.operacao {
  display: grid;
  gap: 2px;
  padding: var(--esp-3) 0;
  border-bottom: 1px solid var(--cor-borda);
  font-size: var(--texto-sm);
}

.operacao:first-child { padding-top: 0; }
.operacao:last-child { border-bottom: 0; }
.operacao strong { font-weight: var(--peso-forte); }
.operacao span { color: var(--cor-texto-suave); }
.operacao time { color: var(--cor-texto-fraco); font-size: var(--texto-xs); }

/* Conta: lista de aparelhos conectados */
.aparelho-lembrado {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
  background: var(--cor-superficie-2);
}

.aparelho-lembrado__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  overflow-wrap: anywhere;
}

.aparelho-lembrado__dados {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-1) var(--esp-5);
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-xs);
}

.aparelho-lembrado form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--esp-3);
}

@media (max-width: 479px) {
  .aparelho-lembrado form { grid-template-columns: minmax(0, 1fr); }
}

/* Log (cliente) */
.filtros {
  display: grid;
  gap: var(--esp-4);
  align-items: end;
}

@media (min-width: 900px) {
  .filtros { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
  .filtros--busca { grid-template-columns: minmax(0, 1fr) auto; }
  .filtros--4 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) auto; }
  .filtros .acoes { flex-wrap: nowrap; }
  .filtros .campo__ajuda { display: none; }
}

.registros { display: grid; gap: var(--esp-3); }

.registro {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: var(--cor-superficie);
  box-shadow: var(--sombra-xs);
}

.registro__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}

.registro__topo h2 {
  flex: 1;
  margin: 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
}

.registro__topo time {
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums;
}

.registro__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--esp-3) var(--esp-5);
  margin: 0;
}

.registro__dados dt {
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.registro__dados dd {
  margin: 2px 0 0;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
}

.registro > .detalhes { margin-top: -4px; }

/* Novidades em linha do tempo */
.notas {
  position: relative;
  display: grid;
  gap: var(--esp-5);
  max-width: 920px;
}

.nota {
  display: grid;
  gap: var(--esp-3);
}

.nota__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
}

.nota__versao {
  margin: 0;
  font-size: var(--texto-ml);
  font-weight: var(--peso-forte);
}

.nota__lista {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nota__lista li {
  position: relative;
  padding-left: var(--esp-6);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.nota__lista li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 16px;
  height: 16px;
  background: var(--cor-sucesso);
  -webkit-mask: var(--icone-ok) center / contain no-repeat;
  mask: var(--icone-ok) center / contain no-repeat;
}

/* Lista de problemas */
.lista-problemas {
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding-left: var(--esp-5);
}

/* ========================== 13. Bloqueio por PIN e leitor de QR */

.bloqueio {
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 520px;
  margin: var(--esp-6) auto 0;
  padding: var(--esp-10) var(--esp-8);
  text-align: center;
}

.bloqueio__icone {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--esp-5);
  border-radius: 20px;
  background: var(--gradiente-marca);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(10, 102, 194, .3);
}

.bloqueio__icone svg { width: 28px; height: 28px; }
.bloqueio__icone--alerta { background: linear-gradient(135deg, #f2706a, #c9302c); box-shadow: 0 10px 24px rgba(201, 48, 44, .28); }
.foco__caixa .card > .bloqueio__icone { margin-bottom: var(--esp-6); }
.foco__caixa .card > h1 { margin-bottom: var(--esp-2); }
.foco__caixa .card > .suave { margin-bottom: var(--esp-6); }

.bloqueio h2 { margin: 0 0 var(--esp-2); font-size: var(--texto-xl); font-weight: var(--peso-destaque); }

.bloqueio__texto {
  max-width: 40ch;
  margin: 0 0 var(--esp-6);
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.bloqueio form {
  display: grid;
  gap: var(--esp-5);
  width: 100%;
  max-width: 340px;
  text-align: left;
}

.bloqueio .campo__entrada--pin { text-align: center; padding-left: 48px; }

.bloqueio__rodape {
  margin: var(--esp-6) 0 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
}

@media (max-width: 599px) {
  .bloqueio { padding: var(--esp-8) var(--esp-5); }
}

/* Leitor de QR */
.leitor-qr {
  display: grid;
  gap: var(--esp-3);
  margin-bottom: var(--esp-6);
  padding: var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: 14px;
  background: var(--cor-superficie-2);
}

.leitor-qr__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}

.leitor-qr__ajuda {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.leitor-qr__ajuda svg {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  background: var(--cor-primaria-clara);
  color: var(--cor-primaria);
}

.leitor-qr__camera {
  display: grid;
  gap: var(--esp-3);
}

.leitor-qr__quadro {
  position: relative;
  width: 100%;
  max-height: 360px;
  overflow: hidden;
  border-radius: 14px;
  background: #000000;
  aspect-ratio: 4 / 3;
}

.leitor-qr__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leitor-qr__moldura {
  position: absolute;
  inset: 14%;
  border: 3px solid rgba(255, 255, 255, .9);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .35);
  pointer-events: none;
}

.leitor-qr__estado {
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-2s);
}

.leitor-qr__estado:empty { display: none; }
.leitor-qr__estado--erro { color: var(--cor-alerta); font-weight: var(--peso-medio); }

/* ===================================================== 14. Administração */

.atalhos-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--esp-5);
}

.atalho-admin {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
}

.atalho-admin__topo {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
}

.atalho-admin__topo h2 { margin: 0; font-size: var(--texto-md); }

.atalho-admin .dados { flex: 1; }

.atalho-admin__texto {
  flex: 1;
  margin: 0;
  color: var(--cor-texto-suave);
  font-size: var(--texto-sm);
}

.atalho-admin .botao { margin-top: auto; }

.versoes { display: grid; gap: var(--esp-3); }

.versao {
  display: grid;
  gap: var(--esp-3);
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: var(--cor-superficie-2);
}

.versao__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}

.versao__numero {
  font-family: var(--fonte-mono);
  font-size: var(--texto-ml);
  font-weight: var(--peso-destaque);
}

.versao__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--esp-3);
  margin: 0;
}

.versao__dados dt {
  color: var(--cor-texto-fraco);
  font-size: 11px;
  font-weight: var(--peso-forte);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.versao__dados dd { margin: 2px 0 0; font-size: var(--texto-2s); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.versao__notas { margin: 0; color: var(--cor-texto-suave); font-size: var(--texto-2s); }

.posse { display: grid; gap: var(--esp-3); }
.posse__conta { min-width: 0; overflow-wrap: anywhere; }

/* Diagnóstico */
.diagnostico-tabela { table-layout: fixed; }
.diagnostico-tabela th:nth-child(1) { width: 30%; }
.diagnostico-tabela th:nth-child(2) { width: 120px; }
.diagnostico-tabela td { overflow-wrap: anywhere; }

/* ============================================ 15. Etiquetas e impressão */

.etiquetas-acoes { margin-bottom: var(--esp-4); }

.etiquetas-escolha {
  max-height: 420px;
  margin-bottom: var(--esp-4);
  overflow-y: auto;
  border: 1px solid var(--cor-borda);
  border-radius: 12px;
}

.etiquetas-escolha__linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--altura-controle);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--cor-borda);
  cursor: pointer;
  transition: background var(--transicao);
}

.etiquetas-escolha__linha:last-child { border-bottom: 0; }
.etiquetas-escolha__linha:hover { background: var(--cor-superficie-2); }
.etiquetas-escolha__linha:focus-within { background: var(--cor-primaria-clara); }

.etiquetas-escolha__linha input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--cor-primaria);
}

.etiquetas-escolha__dados { display: grid; gap: 2px; min-width: 0; }
.etiquetas-escolha__dados span { color: var(--cor-texto-suave); font-size: var(--texto-2s); }
.etiquetas-confirmacao { margin-top: var(--esp-3); }

/* Folha medida em milímetros: o destino é papel, não tela. */
.folha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 95mm;
  margin: var(--esp-6) auto 0;
  padding: var(--esp-4);
  border-radius: 12px;
  background: var(--cor-impressao-fundo);
  box-shadow: var(--sombra-card);
  box-sizing: content-box;
}

@media (min-width: 800px) {
  .folha {
    grid-template-columns: repeat(2, 95mm);
    max-width: 190mm;
  }
}

.etq {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50mm;
  padding: 4mm;
  border: 1px dashed #c4ccd6;
  background: var(--cor-impressao-fundo);
  color: var(--cor-impressao-texto);
  break-inside: avoid;
  page-break-inside: avoid;
}

.etq__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5mm;
  font-size: 8pt;
  font-weight: var(--peso-forte);
  letter-spacing: .02em;
}

.etq__marca { color: #0a66c2; }
.etq__hw { color: var(--cor-impressao-suave); font-weight: var(--peso-normal); }
.etq[hidden] { display: none !important; }

.etq__usado {
  margin-left: 2mm;
  padding: 0 1.5mm;
  border-radius: var(--raio-pilula);
  background: #fef3e2;
  color: #b45309;
  font-size: 7pt;
}

.etq__corpo {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 2mm;
  box-sizing: border-box;
  min-height: 0;
  padding-top: 4mm;
}

.etq__qr-bloco {
  flex: 0 0 24mm;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24mm;
}

.etq__qr { width: 24mm; height: 24mm; }
.etq__qr svg { display: block; width: 100%; height: 100%; }

.etq__qr-legenda {
  width: 100%;
  margin-top: 1mm;
  color: var(--cor-impressao-texto);
  font-size: 7.5pt;
  font-weight: var(--peso-forte);
  line-height: 4mm;
  text-align: center;
  white-space: nowrap;
}

.etq__dados { flex: 1; min-width: 0; }

.etq__rotulo {
  height: 3mm;
  color: var(--cor-impressao-suave);
  font-size: 6pt;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.etq__valor {
  height: 4.5mm;
  overflow: hidden;
  font-size: 9pt;
  line-height: 4.5mm;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.etq__valor--destaque { font-size: 12pt; font-weight: var(--peso-forte); letter-spacing: .08em; }
.etq__valor--rede { font-size: 8pt; }
.etq__valor--menor { font-size: 7pt; }

@media print {
  @page { size: A4; margin: 8mm; }

  .barra,
  .lateral,
  .lateral__fundo,
  .site-topo,
  .site-rodape,
  .rodape,
  .foco__rodape,
  .acesso-rapido,
  .faixa-suporte,
  .convite-app,
  .cabecalho-pagina,
  .card,
  .nao-imprimir,
  .notificacoes-flutuantes,
  .dialogo,
  .pagina > p,
  .pagina > h1 {
    display: none !important;
  }

  body { background: var(--cor-impressao-fundo); }
  .app-shell { display: block; background: none; }
  .app .app-shell__corpo,
  .site { padding: 0; }

  .pagina {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .folha {
    width: 190mm;
    max-width: none;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    grid-template-columns: repeat(2, 95mm);
  }

  .etq {
    width: 95mm;
    height: auto;
    border: .25mm dashed #c4ccd6;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .etq__topo { display: none; }
  .etq__corpo { flex: 0 0 auto; padding-top: 0; }
}

/* ============================================ 16. Movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ux-onda,
  .reservatorio__modulos--falha svg { animation: none !important; }
}

/* ======================================================= Ícones (máscaras) */

:root {
  --icone-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --icone-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.8 2.8L16 9.8'/%3E%3C/svg%3E");
  --icone-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --icone-erro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E");
  --icone-seta-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --icone-seta-baixo-mascara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icone-seta-baixo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8a9e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}