/*
 * O design system do painel, em um arquivo (redesign da fase visual, 28/09/2026).
 *
 * As quatro regras da especificacao continuam sendo restricoes de CSS:
 *
 * 1. **layout fluido, nunca largura fixa.** O que ha e `min()`, `clamp()` e
 *    grade que se reorganiza. A unica largura "fixa" e a da barra lateral no
 *    desktop, e ela vira uma faixa rolavel abaixo de 900px;
 * 2. **nada depende de `:hover`.** `:hover` muda cor de fundo e mais nada.
 *    Nenhuma acao aparece ao passar o mouse;
 * 3. **nenhuma informacao some por largura.** Tabela vira cartao empilhado, e
 *    o rotulo da coluna vai junto via `data-rotulo`;
 * 4. **cor de estado e estado.** Sao quatro (ok, atencao, erro, desconhecido)
 *    e mais nenhuma. O acento (violeta) e cor de **interacao** — link, botao
 *    primario, foco, item ativo — e nunca diz estado.
 *
 * Organizacao: tokens -> base -> estrutura (barra lateral, conteudo, abas) ->
 * tipografia -> componentes (cartao, lista, tabela, marca, botao, campo) ->
 * estados de tela -> telas com forma propria (inicio, ajustes, personalidade,
 * entrada) -> movimento.
 *
 * O tema segue `prefers-color-scheme` e pode ser forcado por `data-tema` no
 * `<html>`. Claro e escuro sao os mesmos tokens com outros valores: nenhum
 * componente tem regra propria por tema.
 */

/* ================================================================== */
/* Tokens                                                              */
/* ================================================================== */

:root {
  color-scheme: light dark;

  /* Superficies, da mais funda a mais alta */
  --fundo: #f4f5f8;
  --superficie: #ffffff;
  --superficie-2: #f6f7f9;
  --superficie-3: #eceef3;
  --borda: #e3e6ec;
  --borda-forte: #cfd4dd;

  /* Texto, em tres forcas */
  --texto: #111624;
  --texto-2: #454d5e;
  --texto-fraco: #687083;

  /* Os quatro estados. Nao ha um quinto. */
  --ok: #157347;
  --ok-fundo: #e5f5ec;
  --atencao: #9a5b00;
  --atencao-fundo: #fdf1dc;
  --erro: #b42323;
  --erro-fundo: #fce8e8;
  --desconhecido: #4f5b76;
  --desconhecido-fundo: #eceff5;

  /* Interacao */
  --acento: #5b4fd6;
  --acento-forte: #4b3fc4;
  --acento-fundo: #efedfd;
  --acento-texto: #ffffff;
  --foco: #5b4fd6;

  /* Escala de espaco (4px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;
  --e10: 40px;
  --espaco: var(--e4);

  /* Raios */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 14px;
  --raio-pilula: 999px;

  /* Elevacao: pouca, e so onde ha camada */
  --sombra-1: 0 1px 2px rgb(17 22 36 / 5%);
  --sombra-2: 0 1px 2px rgb(17 22 36 / 6%), 0 4px 12px rgb(17 22 36 / 5%);
  --sombra-3: 0 12px 32px rgb(17 22 36 / 14%), 0 2px 6px rgb(17 22 36 / 8%);

  /* Tipografia: a do sistema (a CSP so aceita fonte do proprio painel, e o
     painel nao carrega fonte). Segoe UI Variable no Windows, SF no Mac. */
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "SF Pro Text", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "SF Pro Display", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Consolas", monospace;
  --t-1: 0.75rem; /* 12 */
  --t-2: 0.8125rem; /* 13 */
  --t-3: 0.875rem; /* 14 */
  --t-4: 0.9375rem; /* 15 */
  --t-5: 1.0625rem; /* 17 */
  --t-6: 1.25rem; /* 20 */
  --t-7: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); /* 22-28 */

  /* Alvo de toque: 40px com mouse, 44px com o dedo (abaixo). */
  --alvo: 40px;
  --lateral: 248px;
  --transicao: 140ms ease;
}

@media (pointer: coarse) {
  :root {
    --alvo: 44px;
  }
}

/* Escuro: os mesmos tokens, outros valores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #0b0d13;
    --superficie: #12151d;
    --superficie-2: #171b24;
    --superficie-3: #1f242f;
    --borda: #242a36;
    --borda-forte: #343b4a;
    --texto: #e9ecf2;
    --texto-2: #b3bac8;
    --texto-fraco: #8a93a5;
    --ok: #4cc98a;
    --ok-fundo: #10281d;
    --atencao: #f0b54f;
    --atencao-fundo: #2c2211;
    --erro: #f38686;
    --erro-fundo: #321718;
    --desconhecido: #a3aec8;
    --desconhecido-fundo: #1b2030;
    --acento: #9d93ff;
    --acento-forte: #b2aaff;
    --acento-fundo: #1f1c3d;
    --acento-texto: #0e0b26;
    --foco: #9d93ff;
    --sombra-1: 0 1px 2px rgb(0 0 0 / 40%);
    --sombra-2: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 16px rgb(0 0 0 / 28%);
    --sombra-3: 0 16px 40px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%);
  }
}

:root[data-tema="escuro"] {
  --fundo: #0b0d13;
  --superficie: #12151d;
  --superficie-2: #171b24;
  --superficie-3: #1f242f;
  --borda: #242a36;
  --borda-forte: #343b4a;
  --texto: #e9ecf2;
  --texto-2: #b3bac8;
  --texto-fraco: #8a93a5;
  --ok: #4cc98a;
  --ok-fundo: #10281d;
  --atencao: #f0b54f;
  --atencao-fundo: #2c2211;
  --erro: #f38686;
  --erro-fundo: #321718;
  --desconhecido: #a3aec8;
  --desconhecido-fundo: #1b2030;
  --acento: #9d93ff;
  --acento-forte: #b2aaff;
  --acento-fundo: #1f1c3d;
  --acento-texto: #0e0b26;
  --foco: #9d93ff;
  --sombra-1: 0 1px 2px rgb(0 0 0 / 40%);
  --sombra-2: 0 1px 2px rgb(0 0 0 / 40%), 0 6px 16px rgb(0 0 0 / 28%);
  --sombra-3: 0 16px 40px rgb(0 0 0 / 55%), 0 2px 6px rgb(0 0 0 / 40%);
}

:root[data-tema="claro"] {
  color-scheme: light;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
}

/*
 * Cor de destaque (Fase 14, #6 da paridade; decisao do dono de 29/09/2026).
 * Configuracao global `painel.acento`, lida ao abrir o painel; o violeta de
 * cima e o padrao. So os tokens de interacao mudam — estado continua com as
 * quatro cores de estado. Contraste conferido (WCAG AA, 4,5:1) contra o fundo
 * e a superficie, e do texto sobre o acento, nos dois temas.
 * Ordem das regras: claro, escuro pelo sistema, escuro forcado.
 */
:root[data-acento="azul"] { --acento: #1f5fd1; --acento-forte: #184db0; --acento-fundo: #e8f0fd; --acento-texto: #ffffff; --foco: #1f5fd1; }
:root[data-acento="verde-agua"] { --acento: #0b7a70; --acento-forte: #08635b; --acento-fundo: #e2f4f1; --acento-texto: #ffffff; --foco: #0b7a70; }
:root[data-acento="rosa"] { --acento: #c02d78; --acento-forte: #a02465; --acento-fundo: #fbe8f1; --acento-texto: #ffffff; --foco: #c02d78; }
:root[data-acento="laranja"] { --acento: #b24a06; --acento-forte: #923b05; --acento-fundo: #fdefe4; --acento-texto: #ffffff; --foco: #b24a06; }

@media (prefers-color-scheme: dark) {
  :root[data-acento="azul"]:not([data-tema="claro"]) { --acento: #7fb0ff; --acento-forte: #a3c6ff; --acento-fundo: #14223d; --acento-texto: #07142b; --foco: #7fb0ff; }
  :root[data-acento="verde-agua"]:not([data-tema="claro"]) { --acento: #4fd1c1; --acento-forte: #7fe0d4; --acento-fundo: #0f2e2a; --acento-texto: #03201c; --foco: #4fd1c1; }
  :root[data-acento="rosa"]:not([data-tema="claro"]) { --acento: #ff8cc3; --acento-forte: #ffb0d6; --acento-fundo: #3a1629; --acento-texto: #2a0617; --foco: #ff8cc3; }
  :root[data-acento="laranja"]:not([data-tema="claro"]) { --acento: #ffa964; --acento-forte: #ffc494; --acento-fundo: #3a220f; --acento-texto: #2a1204; --foco: #ffa964; }
}

:root[data-tema="escuro"][data-acento="azul"] { --acento: #7fb0ff; --acento-forte: #a3c6ff; --acento-fundo: #14223d; --acento-texto: #07142b; --foco: #7fb0ff; }
:root[data-tema="escuro"][data-acento="verde-agua"] { --acento: #4fd1c1; --acento-forte: #7fe0d4; --acento-fundo: #0f2e2a; --acento-texto: #03201c; --foco: #4fd1c1; }
:root[data-tema="escuro"][data-acento="rosa"] { --acento: #ff8cc3; --acento-forte: #ffb0d6; --acento-fundo: #3a1629; --acento-texto: #2a0617; --foco: #ff8cc3; }
:root[data-tema="escuro"][data-acento="laranja"] { --acento: #ffa964; --acento-forte: #ffc494; --acento-fundo: #3a220f; --acento-texto: #2a1204; --foco: #ffa964; }

/* ================================================================== */
/* Base                                                                */
/* ================================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-3);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--acento);
  text-decoration: none;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

::selection {
  background: var(--acento-fundo);
}

/* ================================================================== */
/* Estrutura                                                           */
/* ================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100dvh;
}

/* --- barra lateral ------------------------------------------------ */

.lateral {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
  background: var(--superficie);
  border-right: 1px solid var(--borda);
  padding: var(--e5) var(--e3) var(--e4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 10px var(--e5);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: var(--t-5);
  letter-spacing: -0.015em;
  color: var(--texto);
}

/* O simbolo: um "E" desenhado pelo CSS, sem imagem nem fonte. */
.marca-simbolo {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(145deg, var(--acento), color-mix(in srgb, var(--acento) 55%, #0b0d13));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--acento) 32%, transparent);
}

.marca-simbolo::after {
  content: "E";
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.marca-sub {
  font-family: var(--fonte);
  font-weight: 500;
  font-size: var(--t-1);
  color: var(--texto-fraco);
  letter-spacing: 0.02em;
  margin-left: -2px;
  align-self: flex-end;
  padding-bottom: 3px;
}

.lateral a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: var(--alvo);
  padding: 0 12px;
  border-radius: var(--raio);
  color: var(--texto-2);
  font-weight: 500;
  font-size: var(--t-3);
  text-decoration: none;
  transition: background var(--transicao), color var(--transicao);
}

/* O icone de cada area: mascara SVG pintada com a cor do texto. Data URI
   passa na CSP (`img-src 'self' data:`); nada vem de fora. */
.lateral a::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icone, none) center / 18px 18px no-repeat;
  mask: var(--icone, none) center / 18px 18px no-repeat;
  opacity: 0.9;
}

.lateral a[href="/"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 10.5 12 3.5l8.5 7V20a1 1 0 0 1-1 1H15v-6H9v6H4.5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
.lateral a[href="/grupos"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3 20c.6-3.4 3-5.5 6-5.5s5.4 2.1 6 5.5'/%3E%3Cpath d='M16 4.9a3 3 0 0 1 0 6M18 14.8c1.8.6 3 2.4 3.3 5.2'/%3E%3C/svg%3E");
}
.lateral a[href="/moderacao"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
}
.lateral a[href="/pessoas"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20.5c.9-4 3.8-6.3 7.5-6.3s6.6 2.3 7.5 6.3'/%3E%3C/svg%3E");
}
.lateral a[href="/operacao"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5-6.5 5 13L17 12h4'/%3E%3C/svg%3E");
}
.lateral a[href="/financeiro"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2.5'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E");
}
.lateral a[href="/configuracoes"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");
}
.lateral a[href="#tema"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4a8 8 0 0 0 0 16z' fill='black'/%3E%3C/svg%3E");
}
.lateral a[href="#sair"] {
  --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='m10 8-4 4 4 4M6 12h10'/%3E%3C/svg%3E");
}

.lateral a:hover {
  background: var(--superficie-3);
  color: var(--texto);
  text-decoration: none;
}

.lateral a[aria-current="page"] {
  background: var(--acento-fundo);
  color: var(--acento);
  font-weight: 600;
}

.lateral .grupo-de-links {
  margin-top: auto;
  padding-top: var(--e3);
  border-top: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lateral .grupo-de-links a[href="#sair"] {
  color: var(--texto-fraco);
}

/* --- conteudo ----------------------------------------------------- */

.conteudo {
  padding: clamp(20px, 3.2vw, 40px) clamp(16px, 3.6vw, 48px) 64px;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  /* Na tela larga, a coluna fica no centro da area, e nao encostada na
     barra lateral com um vazio do outro lado. */
  margin-inline: auto;
}

@media (max-width: 900px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .lateral {
    position: sticky;
    top: 0;
    z-index: 5;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: none;
    border-bottom: 1px solid var(--borda);
    padding: var(--e2) var(--e3);
    gap: 4px;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--superficie) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
  }
  .lateral::-webkit-scrollbar {
    display: none;
  }
  /* A faixa rola: a borda direita esmaece para dizer isso. */
  .lateral {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    padding-right: 28px;
  }
  .marca {
    padding: 0 10px 0 2px;
    white-space: nowrap;
  }
  .marca-sub {
    display: none;
  }
  .lateral a {
    white-space: nowrap;
    padding: 0 12px;
    flex: none;
  }
  .lateral .grupo-de-links {
    margin: 0;
    padding: 0 0 0 4px;
    border-top: none;
    border-left: 1px solid var(--borda);
    flex-direction: row;
  }
}

/* --- abas (paginas do grupo, subareas) ------------------------------ */

.abas {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--e6);
  border-bottom: 1px solid var(--borda);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.abas::-webkit-scrollbar {
  display: none;
}

/* Quando as abas nao cabem, a borda direita esmaece: da para rolar. */
@media (max-width: 1180px) {
  .abas {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
  }
}

.abas .aba {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  padding: 0 14px;
  color: var(--texto-fraco);
  font-weight: 500;
  font-size: var(--t-3);
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--raio-p) var(--raio-p) 0 0;
  transition: color var(--transicao), background var(--transicao);
}

.abas .aba:hover {
  color: var(--texto);
  background: var(--superficie-3);
  text-decoration: none;
}

.abas .aba[aria-current="page"] {
  color: var(--texto);
  font-weight: 600;
}

.abas .aba[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 10px -1px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--acento);
}

/* ================================================================== */
/* Tipografia                                                          */
/* ================================================================== */

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  color: var(--texto);
  text-wrap: balance;
}

h1 {
  font-size: var(--t-7);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: -0.022em;
}

h2 {
  font-size: var(--t-4);
  font-weight: 650;
  margin: var(--e8) 0 var(--e3);
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--t-3);
  font-weight: 650;
  margin: var(--e5) 0 var(--e2);
}

p {
  margin: 0 0 var(--e3);
}

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

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  word-break: break-all;
}

/* O cabecalho da pagina: titulo e o que a tela controla. */
.cabecalho-da-pagina {
  margin-bottom: var(--e6);
}

.cabecalho-da-pagina > p {
  color: var(--texto-2);
  font-size: var(--t-3);
  max-width: 72ch;
  margin: 0;
}

.cabecalho-da-pagina + h2,
.cabecalho-da-pagina + section > h2:first-child {
  margin-top: var(--e2);
}

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

/* --- cartao ------------------------------------------------------- */

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-bottom: var(--e3);
  box-shadow: var(--sombra-1);
}

/* --- marca de estado ---------------------------------------------- */

/* `desconhecido` tem cor propria: "nao consegui verificar" nao e nem verde
   nem vermelho (especificacao, secao 12.1). */
.marca-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--superficie-3);
  color: var(--texto-2);
}

.marca-estado::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.marca-ok {
  background: var(--ok-fundo);
  color: var(--ok);
}
.marca-atencao,
.marca-degradado {
  background: var(--atencao-fundo);
  color: var(--atencao);
}
.marca-erro,
.marca-fora {
  background: var(--erro-fundo);
  color: var(--erro);
}
.marca-desconhecido {
  background: var(--desconhecido-fundo);
  color: var(--desconhecido);
}
/* Neutro e neutro: nem atencao, nem estado. */
.marca-neutro {
  background: var(--superficie-3);
  color: var(--texto-2);
}

/* --- listas: um cartao, linhas separadas por fio -------------------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

/* Lista sem item nao desenha cartao vazio: quem diz "vazia" e o texto. */
.lista:empty {
  display: none;
}

.linha {
  padding: 14px var(--e5);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  min-height: 56px;
  transition: background var(--transicao);
}

.linha + .linha {
  border-top: 1px solid var(--borda);
}

.lista > .linha:hover {
  background: var(--superficie-2);
}

.linha .principal {
  font-weight: 600;
  color: var(--texto);
  flex: 1 1 18ch;
  min-width: 0;
}

.linha .secundario {
  color: var(--texto-fraco);
  font-size: var(--t-2);
}

.linha > a {
  font-weight: 600;
  font-size: var(--t-2);
}

.linha.fraco {
  color: var(--texto-fraco);
  font-size: var(--t-2);
  min-height: 44px;
  background: var(--superficie-2);
}

.linha .formulario,
.linha form {
  max-width: none;
}

/* Formulario direto numa linha: campo e botao lado a lado, a direita. */
.linha > .formulario {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin-left: auto;
}

.linha > .formulario .acoes {
  margin: 0;
}

.linha > .formulario > input,
.linha > .formulario > select {
  inline-size: clamp(8rem, 16vw, 14rem);
}

.linha > .formulario > textarea {
  inline-size: clamp(12rem, 28vw, 24rem);
  min-height: var(--alvo);
}

@media (max-width: 760px) {
  .linha > .formulario {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .linha > .formulario > input,
  .linha > .formulario > select,
  .linha > .formulario > textarea {
    inline-size: auto;
    flex: 1 1 auto;
  }
}

/* Linha com botoes: os botoes ficam juntos, a direita, quando cabem. */
.linha > button,
.linha > .acoes {
  margin-top: 0;
}

/* --- tabela: uma grade de linhas dentro de um cartao ------------------ */

/*
 * Nenhuma funcionalidade depende de tabela larga (especificacao, secao 19.1):
 * cada celula carrega o proprio rotulo em `data-rotulo`, e abaixo de 700px a
 * linha empilha com o rotulo visivel. Nada de scroll horizontal, nada de
 * coluna escondida.
 */
.tabela {
  display: grid;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}

.tabela .cabecalho {
  display: grid;
  grid-template-columns: var(--colunas, 1fr);
  gap: var(--e4);
  padding: 10px var(--e5);
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borda);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-fraco);
}

.tabela .registro {
  display: grid;
  grid-template-columns: var(--colunas, 1fr);
  gap: 4px var(--e4);
  padding: 14px var(--e5);
  align-items: center;
  transition: background var(--transicao);
}

.tabela .registro + .registro {
  border-top: 1px solid var(--borda);
}

.tabela .registro:hover {
  background: var(--superficie-2);
}

.tabela .celula {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tabela .celula > a:first-child {
  color: var(--texto);
  font-weight: 600;
}

.tabela .celula > a:first-child:hover {
  color: var(--acento);
}

/*
 * Dentro de uma celula, o texto secundario vai para a **linha de baixo**:
 * `assinaturas.avisar` seguido da descricao colava as duas palavras, e no
 * cartao empilhado do celular isso vira uma frase sem comeco.
 */
.tabela .celula > .secundario,
.tabela .celula > .marca-estado {
  display: flex;
  margin-top: 3px;
}

.tabela .celula > .secundario {
  color: var(--texto-fraco);
  font-size: var(--t-2);
}

.tabela .celula > .marca-estado {
  width: fit-content;
}

@media (max-width: 700px) {
  .tabela .cabecalho {
    display: none;
  }
  .tabela .registro {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .tabela .celula[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    color: var(--texto-fraco);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
}

/* --- indicadores ---------------------------------------------------- */

.indicadores {
  display: grid;
  /* `auto-fit` + `minmax`: 4 colunas viram 2 e depois 1, sem media query. */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e3);
}

.indicadores .cartao {
  margin: 0;
}

.indicador {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 112px;
  justify-content: flex-end;
}

.indicador .valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  order: -1;
  margin-bottom: auto;
}

/* Um numero que nao pode ser lido mostra "—", e nunca "0". Zero e um valor. */
.indicador .valor.vazio {
  color: var(--texto-fraco);
}

.indicador .rotulo {
  font-size: var(--t-2);
  color: var(--texto-fraco);
}

.indicador .rotulo:first-of-type {
  color: var(--texto-2);
  font-weight: 500;
}

/* --- botoes ---------------------------------------------------------- */

button,
.botao {
  font: inherit;
  font-size: var(--t-3);
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--alvo);
  padding: 0 16px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--sombra-1);
  transition: background var(--transicao), border-color var(--transicao), box-shadow var(--transicao), transform 80ms ease;
}

button:hover:not(:disabled),
.botao:hover {
  background: var(--superficie-2);
  border-color: color-mix(in srgb, var(--texto) 25%, var(--borda-forte));
  text-decoration: none;
}

button:active:not(:disabled) {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

button.primario {
  background: var(--acento);
  border-color: transparent;
  color: var(--acento-texto);
  font-weight: 600;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--acento) 40%, transparent), inset 0 1px 0 rgb(255 255 255 / 14%);
}

button.primario:hover:not(:disabled) {
  background: var(--acento-forte);
  border-color: transparent;
}

/* Acao destrutiva nunca e o botao primario (especificacao, secao 18). */
button.destrutivo {
  border-color: color-mix(in srgb, var(--erro) 45%, var(--borda-forte));
  color: var(--erro);
  background: var(--superficie);
}

button.destrutivo:hover:not(:disabled) {
  background: var(--erro-fundo);
  border-color: var(--erro);
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e3);
}

/* --- campos ------------------------------------------------------------ */

label {
  display: block;
  font-size: var(--t-2);
  font-weight: 600;
  color: var(--texto-2);
  margin-bottom: 6px;
}

input,
select,
textarea {
  font: inherit;
  font-size: var(--t-3);
  width: 100%;
  min-height: var(--alvo);
  padding: 8px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  box-shadow: inset 0 1px 1px rgb(17 22 36 / 3%);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

input::placeholder,
textarea::placeholder {
  color: var(--texto-fraco);
}

input:hover,
select:hover,
textarea:hover {
  border-color: color-mix(in srgb, var(--texto) 28%, var(--borda-forte));
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}

input:disabled,
select:disabled,
textarea:disabled {
  background: var(--superficie-2);
  color: var(--texto-fraco);
}

textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.6;
}

.campo {
  margin-bottom: var(--e4);
}

.campo > p.fraco {
  font-size: var(--t-2);
  margin: 6px 0 0;
}

.campo .erro-do-campo,
.erro-do-campo {
  color: var(--erro);
  font-size: var(--t-2);
  font-weight: 500;
  margin-top: 6px;
}

.formulario {
  max-width: 56ch;
}

/* O filtro da lista de grupos: os campos lado a lado, quando cabem. */
.formulario.filtro {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: var(--e3);
  align-items: end;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e4);
  margin-bottom: var(--e5);
  box-shadow: var(--sombra-1);
}

.formulario.filtro .campo {
  margin: 0;
}

.formulario.filtro > label {
  margin: 0;
  grid-row: 1;
}
.formulario.filtro > label:nth-of-type(1),
.formulario.filtro > input {
  grid-column: 1;
}
.formulario.filtro > label:nth-of-type(2),
.formulario.filtro > select {
  grid-column: 2;
}
.formulario.filtro > input,
.formulario.filtro > select,
.formulario.filtro > button {
  grid-row: 2;
}
.formulario.filtro > button {
  grid-column: 3;
}

.formulario.filtro .acoes {
  margin: 0;
}

@media (max-width: 700px) {
  .formulario.filtro {
    grid-template-columns: minmax(0, 1fr);
  }
  .formulario.filtro > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

/* ================================================================== */
/* Os sete estados de tela                                             */
/* ================================================================== */

/* carregando: esqueleto com a forma do conteudo, nunca spinner centralizado */
.esqueleto {
  background: linear-gradient(90deg, var(--superficie-3) 25%, var(--borda) 37%, var(--superficie-3) 63%);
  background-size: 400% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: var(--raio);
  height: 56px;
  margin-bottom: var(--e2);
}

@keyframes brilho {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.estado-de-tela {
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e8) var(--e6);
  background: var(--superficie);
  text-align: center;
  box-shadow: var(--sombra-1);
}

.estado-de-tela .titulo {
  font-family: var(--fonte-titulo);
  font-weight: 650;
  font-size: var(--t-4);
  margin-bottom: 4px;
}

.estado-de-tela p {
  max-width: 60ch;
  margin-inline: auto;
}

.estado-de-tela .acoes {
  justify-content: center;
}

.estado-de-tela.vazio {
  border-style: dashed;
  border-color: var(--borda-forte);
  background: transparent;
  box-shadow: none;
}

.estado-de-tela.indisponivel {
  border-color: color-mix(in srgb, var(--desconhecido) 35%, var(--borda));
  background: var(--desconhecido-fundo);
}

.estado-de-tela.erro {
  border-color: color-mix(in srgb, var(--erro) 35%, var(--borda));
  background: var(--erro-fundo);
}

.estado-de-tela.negado {
  border-color: color-mix(in srgb, var(--atencao) 35%, var(--borda));
  background: var(--atencao-fundo);
}

/* "Parcialmente disponivel": o estado que o V1 nao tem e que mais acontece. */
.lacunas {
  border: 1px solid color-mix(in srgb, var(--desconhecido) 30%, var(--borda));
  background: var(--desconhecido-fundo);
  padding: 10px var(--e4);
  border-radius: var(--raio);
  margin-bottom: var(--e3);
  font-size: var(--t-2);
  color: var(--texto-2);
}

/* O aviso depois de uma acao: "Feito." ou o motivo. */
.aviso-flutuante {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: 12px var(--e4) 12px 14px;
  box-shadow: var(--sombra-3);
  max-width: min(calc(100vw - 32px), 46ch);
  z-index: 10;
  font-weight: 500;
  animation: surgir 180ms ease-out;
}

.aviso-flutuante::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 4px var(--ok-fundo);
  flex: none;
}

.aviso-flutuante.ruim::before {
  background: var(--erro);
  box-shadow: 0 0 0 4px var(--erro-fundo);
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* A reautenticacao: a caixa que pede a senha antes de uma acao sensivel. */
.reautenticacao {
  border: 1px solid color-mix(in srgb, var(--atencao) 40%, var(--borda));
  background: var(--atencao-fundo);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-block: 0 var(--e6);
  max-width: 60ch;
}

.reautenticacao p {
  font-weight: 500;
}

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}

.pular-para-conteudo:focus {
  left: 12px;
  top: 12px;
  z-index: 20;
  background: var(--superficie);
  padding: 10px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-2);
}

/* ================================================================== */
/* Telas com forma propria                                             */
/* ================================================================== */

/* --- inicio: a frase de estado, a primeira coisa da primeira tela ---- */

.estado-geral {
  --cor-do-estado: var(--desconhecido);
  position: relative;
  padding: var(--e6) var(--e6) var(--e6) calc(var(--e6) + 22px);
  border-radius: var(--raio-g);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cor-do-estado) 12%, transparent), transparent 60%),
    var(--superficie);
  border-color: color-mix(in srgb, var(--cor-do-estado) 28%, var(--borda));
  box-shadow: var(--sombra-2);
  margin-bottom: var(--e2);
}

.estado-geral::before {
  content: "";
  position: absolute;
  left: var(--e6);
  top: calc(var(--e6) + 0.55em);
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--cor-do-estado);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--cor-do-estado) 20%, transparent);
}

.estado-geral .frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 4px;
}

.estado-geral .fraco {
  margin: 0;
  color: var(--texto-2);
}

.estado-ok {
  --cor-do-estado: var(--ok);
}
.estado-degradado {
  --cor-do-estado: var(--atencao);
}
.estado-fora {
  --cor-do-estado: var(--erro);
}
.estado-desconhecido {
  --cor-do-estado: var(--desconhecido);
}

/* --- ajustes: o valor, de onde ele vem, e o controle --------------- */

.ajuste {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  align-items: center;
}

.ajuste-texto {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ajuste-texto .principal {
  flex: none;
}

.ajuste-texto .chave {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--texto-fraco);
  opacity: 0.85;
}

.ajuste-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: var(--t-2);
  color: var(--texto-fraco);
}

.ajuste-estado .valor-do-ajuste {
  color: var(--texto);
  font-weight: 650;
  font-size: var(--t-3);
  font-variant-numeric: tabular-nums;
}

/* A origem do valor, com a mesma forma nas tres: a cor diz quem manda. */
.origem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  border-radius: var(--raio-pilula);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.origem-grupo {
  background: var(--acento-fundo);
  color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 25%, transparent);
}

.origem-global {
  background: var(--superficie-3);
  color: var(--texto-2);
  border-color: var(--borda-forte);
}

.origem-padrao {
  background: transparent;
  color: var(--texto-fraco);
  border-color: var(--borda);
  border-style: dashed;
}

.ajuste-controle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  grid-row: span 2;
  grid-column: 2;
}

.ajuste-controle .formulario {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: none;
}

.ajuste-controle .formulario .acoes {
  margin: 0;
}

.ajuste-controle input,
.ajuste-controle select {
  inline-size: clamp(7rem, 14vw, 13rem);
}

.ajuste-controle input[type="number"],
.ajuste-controle input[type="time"] {
  inline-size: 7.5rem;
}

/* O ajuste que o grupo sobrescreve: um fio na cor do acento. */
.ajuste.sobrescreve {
  box-shadow: inset 3px 0 0 var(--acento);
}

@media (max-width: 760px) {
  .ajuste {
    grid-template-columns: minmax(0, 1fr);
  }
  .ajuste-controle {
    grid-column: 1;
    grid-row: auto;
    justify-content: flex-start;
  }
  .ajuste-controle .formulario {
    flex: 1 1 100%;
  }
  .ajuste-controle input,
  .ajuste-controle select {
    inline-size: 100%;
  }
}

/* --- politicas do grupo: o que e, a esquerda; o controle, a direita --- */

.politica {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 24px;
  align-items: center;
}

.politica-texto {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.politica-texto .principal {
  flex: none;
}

.politica-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.politica-controle {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 380px;
}

.politica-controle .formulario {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: none;
}

.politica-controle textarea {
  min-height: 76px;
  inline-size: min(300px, 60vw);
  flex: 1 1 auto;
}

.politica-controle input[type="number"] {
  inline-size: 7rem;
}

/* O toque de recolher: dois horarios lado a lado, e os botoes embaixo. */
.politica-controle > div {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.politica-controle form:has(input[type="time"]) {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 6px 10px;
}

.politica-controle form:has(input[type="time"]) label {
  margin: 0;
}

.politica-controle form:has(input[type="time"]) button {
  grid-column: 1 / -1;
  justify-self: end;
}

@media (max-width: 760px) {
  .politica {
    grid-template-columns: minmax(0, 1fr);
  }
  .politica-controle {
    justify-content: flex-start;
    max-width: none;
  }
  .politica-controle > div {
    justify-items: start;
  }
}

/* --- lista compacta: muitas linhas curtas (os comandos do grupo) ------ */

.lista.compacta .linha {
  min-height: 44px;
  padding-block: 9px;
  gap: 4px 12px;
}

.lista.compacta .principal {
  flex: 0 0 15ch;
  font-family: var(--mono);
  font-size: var(--t-2);
  font-weight: 600;
}

/* --- inicio: o que precisa de atencao ---------------------------------- */

.lista.atencao .linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "marca titulo tempo ver"
    "marca detalhe tempo ver";
  gap: 2px 14px;
  align-items: center;
}

.lista.atencao .linha > .principal {
  grid-area: titulo;
}
.lista.atencao .linha > .marca-estado {
  grid-area: marca;
  align-self: start;
  margin-top: 1px;
}
.lista.atencao .linha > span:nth-of-type(3) {
  grid-area: detalhe;
}
.lista.atencao .linha > span:nth-of-type(4) {
  grid-area: tempo;
  white-space: nowrap;
}
.lista.atencao .linha > a {
  grid-area: ver;
}

.lista.atencao .linha.fraco {
  display: flex;
}

@media (max-width: 560px) {
  .lista.atencao .linha {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "marca ver"
      "titulo titulo"
      "detalhe detalhe"
      "tempo tempo";
  }
  .lista.atencao .linha > .marca-estado {
    justify-self: start;
  }
}

/* --- acao recolhida: o formulario da linha abre so quando se pede --- */

details.acao-recolhida > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  font-weight: 550;
  font-size: var(--t-2);
  color: var(--texto-2);
  transition: background var(--transicao), color var(--transicao);
}

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

details.acao-recolhida > summary::after {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transicao);
}

details.acao-recolhida > summary:hover {
  background: var(--superficie-2);
  color: var(--texto);
}

details.acao-recolhida[open] {
  flex-basis: 100%;
}

details.acao-recolhida[open] > summary {
  color: var(--texto);
}

details.acao-recolhida[open] > summary::after {
  transform: rotate(-135deg) translateY(-1px);
}

details.acao-recolhida .formulario {
  margin-top: var(--e3);
  padding: var(--e4);
  border-radius: var(--raio);
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  max-width: 60ch;
  animation: surgir 160ms ease-out;
}

/* --- grade de cartoes: acoes ou itens do mesmo peso, lado a lado ---- */

.grade-de-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--e4);
  align-items: start;
  margin-bottom: var(--e4);
}

.grade-de-cartoes > .bloco,
.grade-de-cartoes > .cartao {
  margin: 0;
}

.grade-de-cartoes .formulario {
  max-width: none;
}

/* --- segredos: um cartao por credencial (ADR 0043) ----------------- */

.credencial-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  flex-wrap: wrap;
}

.credencial-cabecalho h2 {
  margin: 0;
}

.credencial .lista {
  margin-block: var(--e3);
}

/* Impressao em cima, data embaixo; Remover a direita. O cartao e estreito
   (tres por linha no desktop), e em linha corrida a chave ocupava tres
   linhas. */
.credencial-chave {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
}

.credencial .lista .linha {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: var(--e3);
}

.credencial .resultado-do-teste .linha {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.credencial-servidor {
  overflow-wrap: anywhere;
}

.credencial-formulario {
  margin-top: var(--e3);
}

.aviso-do-cofre {
  margin-bottom: var(--e4);
  text-align: left;
}

.aviso-do-cofre p {
  margin-inline: 0;
}

.bloco-perigoso {
  border-color: color-mix(in srgb, var(--erro) 28%, var(--borda));
}

.cartao.plano > h2 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cartao.plano .formulario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 var(--e3);
}

.cartao.plano .formulario .campo:nth-of-type(1),
.cartao.plano .formulario .campo:nth-of-type(2) {
  grid-column: 1 / -1;
}

.cartao.plano .formulario .acoes {
  grid-column: 1 / -1;
  margin-top: 0;
}

.cartao.plano > button {
  margin-top: var(--e2);
}

/* --- blocos: um assunto por cartao (conteudo do grupo) --------------- */

.bloco {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e5);
  margin-bottom: var(--e4);
  box-shadow: var(--sombra-1);
  min-width: 0;
}

.bloco > h2,
.bloco > h3 {
  margin-top: 0;
}

.bloco > p.fraco {
  font-size: var(--t-2);
}

.bloco .lista {
  box-shadow: none;
  margin-bottom: var(--e4);
}

.bloco .formulario {
  max-width: none;
}

.bloco .formulario .campo,
.bloco .formulario .acoes {
  margin: 0;
}

.bloco-gatilhos .formulario {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: var(--e3);
  align-items: end;
}

.bloco-gatilhos textarea,
.bloco-avisos textarea {
  min-height: var(--alvo);
  height: var(--alvo);
  resize: vertical;
}

.bloco-avisos .formulario {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e3);
  align-items: end;
}

.bloco-avisos .formulario .campo:has(textarea) {
  grid-column: 1 / 4;
}

.bloco-avisos .formulario .acoes {
  grid-column: 4;
}

.bloco-avisos .formulario .acoes button {
  width: 100%;
}

.listas-do-grupo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: var(--e4);
  margin-bottom: var(--e4);
}

.listas-do-grupo .bloco {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.bloco-lista h3 {
  font-size: var(--t-3);
}

.bloco-lista .lista .linha {
  min-height: 44px;
  padding: 6px 8px 6px 14px;
}

.bloco-lista .formulario {
  display: flex;
  align-items: flex-end;
  gap: var(--e2);
  margin-top: auto;
}

.bloco-lista .formulario .campo {
  flex: 1 1 auto;
}

@media (max-width: 760px) {
  .bloco-gatilhos .formulario,
  .bloco-avisos .formulario {
    grid-template-columns: minmax(0, 1fr);
  }
  .bloco-avisos .formulario .campo:has(textarea),
  .bloco-avisos .formulario .acoes {
    grid-column: 1;
  }
}

/* --- personalidade: a voz editavel e as travas, sem confundir ------- */

.personalidade {
  display: grid;
  gap: var(--e5);
}

.no-ar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--texto-2);
  font-weight: 500;
}

.camadas {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--e5);
  align-items: start;
}

@media (max-width: 1080px) {
  .camadas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.camada {
  border-radius: var(--raio-g);
  padding: var(--e5);
  border: 1px solid var(--borda);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  min-width: 0;
}

.camada > h2 {
  margin-top: 0;
}

.camada-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.camada-editavel {
  border-color: color-mix(in srgb, var(--acento) 30%, var(--borda));
}

.camada-editavel .camada-rotulo {
  color: var(--acento);
}

.camada-editavel .formulario {
  max-width: none;
}

.camada-editavel textarea {
  min-height: 320px;
  font-size: var(--t-3);
}

.camada-protegida {
  background: var(--superficie-2);
  border-style: dashed;
  border-color: var(--borda-forte);
  box-shadow: none;
}

.camada-protegida .camada-rotulo {
  color: var(--texto-fraco);
}

/* O cadeado: mascara SVG, como os icones da barra lateral. */
.camada-protegida .camada-rotulo::before {
  content: "";
  inline-size: 12px;
  block-size: 12px;
  background-color: currentColor;
  -webkit-mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.camada-protegida pre.mono {
  background: var(--superficie);
  border: 1px solid var(--borda);
  color: var(--texto-2);
  user-select: text;
}

.referencia summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--texto-2);
  min-height: var(--alvo);
  display: flex;
  align-items: center;
}

/* ================================================================== */
/* Entrada (login)                                                     */
/* ================================================================== */

.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--e4);
  background:
    radial-gradient(60rem 30rem at 50% -10%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%),
    var(--fundo);
}

.entrada .caixa {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 18px;
  padding: clamp(24px, 5vw, 36px);
  width: min(400px, 100%);
  box-shadow: var(--sombra-3);
}

.entrada .marca {
  padding: 0 0 var(--e6);
}

.entrada h1 {
  font-size: var(--t-6);
}

.entrada .acoes button {
  width: 100%;
}

/* ================================================================== */
/* Pecas especificas                                                   */
/* ================================================================== */

/* O QR do pareamento: quadrado, e nunca maior que a tela. */
img.qr {
  inline-size: min(18rem, 100%);
  block-size: auto;
  background: #ffffff;
  padding: calc(var(--espaco) / 2);
  border-radius: var(--raio);
  border: 1px solid var(--borda);
}

/* Texto longo que quebra, e nao estoura a largura. */
pre.mono {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  padding: var(--e4);
  border-radius: var(--raio);
  font-size: 0.8rem;
  line-height: 1.6;
  margin: 0 0 var(--e3);
  max-height: 28rem;
  overflow-y: auto;
}

/* ================================================================== */
/* Movimento                                                           */
/* ================================================================== */

/* Rolagem suave (19/10/2026): ancoras e "voltar ao topo". A troca de pagina
   pede rolagem instantanea pelo script, e a atualizacao automatica nao rola. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Movimento reduzido desliga, e nao encurta: uma transicao de 0,01ms em
   toda propriedade ainda e transicao (e numa aba que nao desenha, fica presa
   no comeco). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* A biblioteca de midia (Fase 14): a previa cabe na linha, e o audio ocupa a largura no celular. */
.previa-da-midia {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--superficie-2);
  flex: 0 0 auto;
}

.lista-da-biblioteca audio {
  max-width: 100%;
}

/* ================================================================== */
/* A grande revisao (19/10/2026)                                       */
/* ================================================================== */
/*
 * Um sistema novo por cima do de cima, que continua valendo para o que ele
 * nao redesenha. As regras da especificacao ficam: as quatro cores de estado
 * sao as unicas cores de estado, o acento e so interacao, nada depende de
 * :hover para existir, e nenhuma informacao some por largura. O movimento
 * some inteiro com "reduzir movimento" (regra global da secao de movimento).
 *
 * Organizacao: tokens -> casco (barra lateral, barra do topo, conteudo,
 * gaveta) -> componentes (icone, avatar, cartao, chave, avisos, busca) ->
 * graficos -> telas (inicio, grupos, grupo) -> movimento.
 */

/* --- tokens ---------------------------------------------------------- */

:root {
  --raio-p: 8px;
  --raio: 12px;
  --raio-g: 18px;
  --raio-xg: 24px;
  --lateral: 264px;
  --lateral-recolhida: 76px;
  --topo: 64px;
  --largura-maxima: 1360px;
  --gutter: clamp(16px, 3vw, 40px);

  --fundo: #f4f5fa;
  --superficie: #ffffff;
  --superficie-2: #f7f8fc;
  --superficie-3: #eef0f6;
  --borda: #e4e7ef;
  --borda-forte: #d3d8e3;
  --texto: #0f1424;
  --texto-2: #464f63;
  --texto-fraco: #6b7489;

  --brilho-1: color-mix(in srgb, var(--acento) 12%, transparent);
  --brilho-2: color-mix(in srgb, #06b6d4 8%, transparent);
  --relevo: inset 0 1px 0 rgb(255 255 255 / 80%);
  --sombra-cartao: 0 1px 2px rgb(15 20 36 / 4%), 0 6px 20px rgb(15 20 36 / 6%);
  --sombra-erguida: 0 4px 10px rgb(15 20 36 / 6%), 0 18px 40px rgb(15 20 36 / 12%);
  --sombra-flutuante: 0 24px 64px rgb(15 20 36 / 22%), 0 4px 12px rgb(15 20 36 / 10%);
  --vidro: color-mix(in srgb, var(--superficie) 82%, transparent);
  --mola: cubic-bezier(0.2, 0.75, 0.2, 1);
  --suave: cubic-bezier(0.4, 0, 0.2, 1);

  --fatia-0: var(--acento);
  --fatia-1: #06b6d4;
  --fatia-2: #f59e0b;
  --fatia-3: #ec4899;
  --fatia-4: #10b981;
  --fatia-5: #94a3b8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #06080e;
    --superficie: #0d111b;
    --superficie-2: #121827;
    --superficie-3: #192133;
    --borda: rgb(255 255 255 / 7%);
    --borda-forte: rgb(255 255 255 / 13%);
    --texto: #eef1f8;
    --texto-2: #aab3c7;
    --texto-fraco: #7b859b;
    --brilho-1: color-mix(in srgb, var(--acento) 26%, transparent);
    --brilho-2: color-mix(in srgb, #06b6d4 13%, transparent);
    --relevo: inset 0 1px 0 rgb(255 255 255 / 5%);
    --sombra-cartao: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 26%);
    --sombra-erguida: 0 4px 12px rgb(0 0 0 / 45%), 0 22px 48px rgb(0 0 0 / 40%);
    --sombra-flutuante: 0 30px 80px rgb(0 0 0 / 60%), 0 6px 16px rgb(0 0 0 / 40%);
  }
}

:root[data-tema="escuro"] {
  --fundo: #06080e;
  --superficie: #0d111b;
  --superficie-2: #121827;
  --superficie-3: #192133;
  --borda: rgb(255 255 255 / 7%);
  --borda-forte: rgb(255 255 255 / 13%);
  --texto: #eef1f8;
  --texto-2: #aab3c7;
  --texto-fraco: #7b859b;
  --brilho-1: color-mix(in srgb, var(--acento) 26%, transparent);
  --brilho-2: color-mix(in srgb, #06b6d4 13%, transparent);
  --relevo: inset 0 1px 0 rgb(255 255 255 / 5%);
  --sombra-cartao: 0 1px 2px rgb(0 0 0 / 40%), 0 10px 30px rgb(0 0 0 / 26%);
  --sombra-erguida: 0 4px 12px rgb(0 0 0 / 45%), 0 22px 48px rgb(0 0 0 / 40%);
  --sombra-flutuante: 0 30px 80px rgb(0 0 0 / 60%), 0 6px 16px rgb(0 0 0 / 40%);
}

/* --- base ---------------------------------------------------------- */

body {
  background:
    radial-gradient(1200px 680px at 8% -14%, var(--brilho-1), transparent 62%),
    radial-gradient(1000px 560px at 108% -4%, var(--brilho-2), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
  font-size: 0.9rem;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--borda-forte) transparent;
}

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

svg.icone {
  inline-size: 18px;
  block-size: 18px;
  flex: none;
}

kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--borda-forte);
  border-bottom-width: 2px;
  background: var(--superficie-2);
  color: var(--texto-2);
  line-height: 1.3;
}

/* --- o casco --------------------------------------------------------- */

.app {
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  transition: grid-template-columns 280ms var(--suave);
}

.app.recolhida {
  grid-template-columns: var(--lateral-recolhida) minmax(0, 1fr);
}

/* A barra lateral: vidro, secoes, icones de verdade (svg) no lugar das mascaras. */
.lateral {
  background: var(--vidro);
  backdrop-filter: saturate(1.6) blur(16px);
  border-right: 1px solid var(--borda);
  padding: 18px 12px 14px;
  gap: 0;
  overflow-x: hidden;
}

.lateral a::before,
.lateral a[aria-current="page"]::before {
  content: none;
  display: none;
}

.marca {
  gap: 12px;
  padding: 2px 8px 22px;
  font-size: 1.2rem;
  white-space: nowrap;
}

.marca-simbolo {
  inline-size: 38px;
  block-size: 38px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 25%, rgb(255 255 255 / 45%), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--acento) 75%, #06b6d4), var(--acento) 50%, color-mix(in srgb, var(--acento) 55%, #000));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--acento) 45%, transparent), inset 0 1px 0 rgb(255 255 255 / 30%);
}

.marca-simbolo::after {
  font-size: 17px;
}

.marca-nome {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.secao-da-barra {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}

.titulo-da-secao {
  padding: 6px 12px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-fraco);
  white-space: nowrap;
}

.lateral a {
  position: relative;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 11px;
  color: var(--texto-2);
  font-weight: 550;
  white-space: nowrap;
  transition: background 160ms ease, color 160ms ease, transform 200ms var(--mola);
}

.lateral a:hover {
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  color: var(--texto);
  transform: translateX(2px);
}

.lateral a[aria-current="page"] {
  color: var(--texto);
  font-weight: 650;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 22%, transparent), color-mix(in srgb, var(--acento) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 26%, transparent);
}

.lateral a[aria-current="page"] svg.icone {
  color: var(--acento);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento) 60%, transparent));
}

.lateral a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: 10px auto 10px -12px;
  inline-size: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--acento);
  box-shadow: 0 0 12px var(--acento);
}

.lateral .grupo-de-links {
  border-top: 1px solid var(--borda);
  padding-top: 12px;
  gap: 2px;
}

.cartao-do-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 4px;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--texto) 4%, transparent);
  border: 1px solid var(--borda);
  white-space: nowrap;
  overflow: hidden;
}

.usuario-dados {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.usuario-nome {
  font-weight: 650;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.usuario-papel {
  font-size: 0.72rem;
  color: var(--ok);
}

/* Recolhida: so os icones, o titulo vira dica. */
.app.recolhida .lateral {
  padding-inline: 12px;
}

.app.recolhida .lateral .rotulo,
.app.recolhida .titulo-da-secao,
.app.recolhida .marca-nome,
.app.recolhida .marca-sub,
.app.recolhida .usuario-dados {
  display: none;
}

.app.recolhida .lateral a {
  justify-content: center;
  padding: 0;
}

.app.recolhida .marca {
  justify-content: center;
  padding-inline: 0;
}

.app.recolhida .cartao-do-usuario {
  justify-content: center;
  padding: 8px 0;
}

.app.recolhida .secao-da-barra {
  margin-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--borda);
}

/* O conteudo: a barra do topo ocupa a coluna inteira; o resto e centrado. */
.conteudo {
  max-width: none;
  padding: 0 0 72px;
}

.conteudo > :not(.barra-do-topo) {
  max-width: var(--largura-maxima);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.conteudo > .barra-do-topo + * {
  padding-top: 28px;
}

/* --- a barra do topo --------------------------------------------------- */

.barra-do-topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--topo);
  margin: 0;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--fundo) 70%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--borda);
}

.topo-esquerda {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.trilha {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.trilha a {
  color: var(--texto-fraco);
  font-weight: 550;
}

.trilha a:hover {
  color: var(--texto);
  text-decoration: none;
}

.trilha-atual {
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
}

svg.trilha-divisa {
  inline-size: 14px;
  block-size: 14px;
  color: var(--texto-fraco);
}

.gatilho-da-busca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: min(360px, 34vw);
  min-height: 40px;
  padding: 0 8px 0 12px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: var(--vidro);
  color: var(--texto-fraco);
  font-weight: 500;
  cursor: text;
  box-shadow: var(--relevo);
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.gatilho-da-busca:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borda));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 12%, transparent);
  color: var(--texto-2);
  background: var(--vidro);
}

.gatilho-texto {
  flex: 1;
  text-align: left;
}

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topo-atualizado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  color: var(--texto-fraco);
  padding: 7px 12px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--borda);
  background: var(--vidro);
  white-space: nowrap;
}

.pulso {
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--ok);
  animation: pulso 2.4s ease-out infinite;
}

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

button.botao-icone {
  inline-size: 40px;
  min-height: 40px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  background: var(--vidro);
  border: 1px solid var(--borda);
  color: var(--texto-2);
}

button.botao-icone:hover:not(:disabled) {
  color: var(--texto);
  border-color: var(--borda-forte);
  background: var(--superficie);
}

button.icone-atualizar:active svg.icone {
  transform: rotate(-180deg);
}

button.botao-icone svg.icone {
  transition: transform 360ms var(--mola);
}

.so-celular {
  display: none !important;
}

/* --- celular: a barra lateral vira gaveta ------------------------------ */

@media (max-width: 900px) {
  .app,
  .app.recolhida {
    grid-template-columns: minmax(0, 1fr);
  }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    inline-size: min(300px, 86vw);
    height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 12px 14px;
    border-right: 1px solid var(--borda);
    border-bottom: none;
    background: var(--superficie);
    -webkit-mask-image: none;
    mask-image: none;
    transform: translateX(-104%);
    transition: transform 320ms var(--mola);
    box-shadow: var(--sombra-flutuante);
  }

  .menu-aberto .lateral {
    transform: none;
  }

  .lateral .rotulo,
  .titulo-da-secao,
  .marca-nome,
  .marca-sub,
  .usuario-dados {
    display: revert !important;
  }

  .lateral a {
    justify-content: flex-start !important;
    padding: 0 12px !important;
  }

  .lateral .grupo-de-links {
    margin-top: auto;
    flex-direction: column;
    border-left: none;
    padding: 12px 0 0;
    border-top: 1px solid var(--borda);
  }

  .veu-do-menu {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgb(0 0 0 / 45%);
    backdrop-filter: blur(3px);
    animation: aparece 200ms ease;
  }

  .so-celular {
    display: inline-grid !important;
  }

  .so-tela-grande,
  .gatilho-texto,
  .gatilho-da-busca kbd,
  .topo-atualizado {
    display: none !important;
  }

  .gatilho-da-busca {
    min-width: 0;
    inline-size: 40px;
    padding: 0;
    justify-content: center;
  }
}

/* --- componentes ------------------------------------------------------- */

h1 {
  font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  background: linear-gradient(115deg, var(--texto) 35%, color-mix(in srgb, var(--acento) 75%, var(--texto)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 14px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-fraco);
}

h2::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: linear-gradient(90deg, var(--borda-forte), transparent);
}

.cartao,
.lista,
.tabela,
.formulario.filtro {
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 97%, #fff), var(--superficie));
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra-cartao), var(--relevo);
}

.lista > .linha:hover,
.tabela .registro:hover {
  background: color-mix(in srgb, var(--acento) 6%, transparent);
}

.tabela .cabecalho {
  background: color-mix(in srgb, var(--texto) 3%, transparent);
}

.lista .linha > a:last-child {
  padding: 5px 13px;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--acento) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--acento) 24%, transparent);
  text-decoration: none;
  transition: background 160ms ease, transform 200ms var(--mola);
}

.lista .linha > a:last-child:hover {
  background: color-mix(in srgb, var(--acento) 22%, transparent);
  transform: translateX(2px);
}

.marca-estado {
  padding: 3px 10px 3px 9px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
}

.marca-estado::before {
  box-shadow: 0 0 8px currentColor;
}

button {
  border-radius: 11px;
  transition: background 160ms ease, border-color 160ms ease, transform 140ms var(--mola), box-shadow 180ms ease, color 160ms ease;
}

button:active:not(:disabled) {
  transform: scale(0.96);
}

button.primario {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 85%, #fff), var(--acento) 55%, var(--acento-forte));
  border-color: transparent;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--acento) 32%, transparent), inset 0 1px 0 rgb(255 255 255 / 25%);
}

button.primario:hover:not(:disabled) {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--acento) 44%, transparent), inset 0 1px 0 rgb(255 255 255 / 25%);
  transform: translateY(-1px);
}

input,
select,
textarea {
  border-radius: 11px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--acento) 70%, var(--borda));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent);
  outline: none;
}

/* O avatar: iniciais num quadrado de gradiente, a cor fixa por grupo/pessoa. */
.avatar {
  --cor-a: #6d5dfc;
  --cor-b: #06b6d4;
  inline-size: 40px;
  block-size: 40px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 25%);
  background: linear-gradient(135deg, var(--cor-a), var(--cor-b));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cor-a) 32%, transparent), inset 0 1px 0 rgb(255 255 255 / 28%);
}

.avatar-pequeno {
  inline-size: 30px;
  block-size: 30px;
  border-radius: 9px;
  font-size: 0.66rem;
}

.avatar-grande {
  inline-size: 76px;
  block-size: 76px;
  border-radius: 22px;
  font-size: 1.5rem;
}

.avatar[data-cor="1"] { --cor-a: #f43f5e; --cor-b: #fb923c; }
.avatar[data-cor="2"] { --cor-a: #10b981; --cor-b: #06b6d4; }
.avatar[data-cor="3"] { --cor-a: #f59e0b; --cor-b: #ef4444; }
.avatar[data-cor="4"] { --cor-a: #8b5cf6; --cor-b: #ec4899; }
.avatar[data-cor="5"] { --cor-a: #0ea5e9; --cor-b: #6366f1; }
.avatar[data-cor="6"] { --cor-a: #14b8a6; --cor-b: #84cc16; }
.avatar[data-cor="7"] { --cor-a: #e11d48; --cor-b: #8b5cf6; }

.com-avatar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* A chave de liga/desliga. */
button.interruptor {
  position: relative;
  inline-size: 50px;
  min-height: 28px;
  block-size: 28px;
  padding: 0;
  border: none;
  border-radius: var(--raio-pilula);
  background: transparent;
  box-shadow: none;
  flex: none;
}

.interruptor-trilho {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--superficie-3);
  box-shadow: inset 0 0 0 1px var(--borda-forte);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.interruptor-botao {
  position: absolute;
  inset: 3px auto 3px 3px;
  inline-size: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  transition: transform 260ms var(--mola);
}

button.interruptor.ligado .interruptor-trilho {
  background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 85%, #fff), var(--acento));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent), 0 4px 14px color-mix(in srgb, var(--acento) 40%, transparent);
}

button.interruptor.ligado .interruptor-botao {
  transform: translateX(22px);
}

button.interruptor:hover:not(:disabled) {
  background: transparent;
}

button.interruptor:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* Os avisos do canto: empilhados, entram deslizando. */
.pilha-de-avisos {
  position: fixed;
  inset: auto 24px 24px auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  inline-size: min(400px, calc(100vw - 32px));
  pointer-events: none;
}

.aviso-da-pilha {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 10px 14px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--superficie) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid color-mix(in srgb, var(--ok) 38%, var(--borda));
  box-shadow: var(--sombra-flutuante);
  animation: aviso-entra 420ms var(--mola);
}

.aviso-da-pilha.ruim {
  border-color: color-mix(in srgb, var(--erro) 45%, var(--borda));
}

svg.aviso-icone {
  inline-size: 22px;
  block-size: 22px;
  color: var(--ok);
}

.aviso-da-pilha.ruim svg.aviso-icone {
  color: var(--erro);
}

.aviso-texto {
  flex: 1;
  font-weight: 550;
}

button.aviso-fechar {
  inline-size: 30px;
  min-height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--texto-fraco);
}

@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* A busca global. */
.busca-global {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: min(14vh, 120px) 16px 16px;
}

.busca-fundo {
  position: absolute;
  inset: 0;
  background: rgb(4 6 12 / 55%);
  backdrop-filter: blur(6px);
  animation: aparece 180ms ease;
}

.busca-caixa {
  position: relative;
  inline-size: min(640px, 100%);
  border-radius: 20px;
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-flutuante);
  overflow: hidden;
  animation: caixa-entra 260ms var(--mola);
}

.busca-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--borda);
  color: var(--texto-fraco);
}

.busca-campo input {
  flex: 1;
  min-height: 52px;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  box-shadow: none !important;
  padding: 0;
}

.busca-resultados {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: min(56vh, 460px);
  overflow-y: auto;
}

.busca-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease;
}

.busca-item:hover,
.busca-item.selecionado {
  background: color-mix(in srgb, var(--acento) 12%, transparent);
}

.busca-icone {
  inline-size: 30px;
  block-size: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--superficie-3);
  color: var(--texto-2);
}

.busca-item.selecionado .busca-icone {
  background: color-mix(in srgb, var(--acento) 20%, transparent);
  color: var(--acento);
}

.busca-textos {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.busca-titulo {
  font-weight: 600;
}

.busca-detalhe {
  font-size: 0.76rem;
  color: var(--texto-fraco);
}

svg.busca-seta {
  color: var(--texto-fraco);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 120ms ease, transform 160ms var(--mola);
}

.busca-item.selecionado svg.busca-seta {
  opacity: 1;
  transform: none;
  color: var(--acento);
}

.busca-vazia {
  padding: 28px 20px;
  color: var(--texto-fraco);
  text-align: center;
  margin: 0;
}

.busca-rodape {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--borda);
  font-size: 0.74rem;
  color: var(--texto-fraco);
  background: var(--superficie-2);
}

.busca-rodape kbd {
  margin-right: 3px;
}

@keyframes caixa-entra {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

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

/* O voltar ao topo. */
.voltar-ao-topo {
  position: fixed;
  inset: auto 24px 24px auto;
  z-index: 20;
  inline-size: 46px;
  min-height: 46px;
  padding: 0;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--vidro);
  backdrop-filter: blur(14px);
  border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-erguida);
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  pointer-events: none;
  transition: opacity 220ms ease, transform 300ms var(--mola);
}

:root[data-rolado] .voltar-ao-topo {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pilha-de-avisos:not(:empty) ~ .voltar-ao-topo {
  opacity: 0;
  pointer-events: none;
}

/* As abas do grupo: pilulas num trilho de vidro. */
.abas {
  gap: 4px;
  padding: 5px;
  margin-bottom: 24px;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: var(--vidro);
  width: fit-content;
  max-width: 100%;
  box-shadow: var(--relevo);
}

.abas .aba {
  border-radius: 11px;
  min-height: 36px;
}

.abas .aba[aria-current="page"] {
  color: var(--texto);
  background: color-mix(in srgb, var(--acento) 16%, var(--superficie));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 30%, transparent), 0 6px 16px color-mix(in srgb, var(--acento) 18%, transparent);
}

.abas .aba[aria-current="page"]::after {
  display: none;
}

/* O carregando: um brilho que passa. */
.esqueleto {
  background: linear-gradient(100deg, var(--superficie-2) 30%, color-mix(in srgb, var(--superficie-3) 75%, var(--acento)) 50%, var(--superficie-2) 70%);
  background-size: 300% 100%;
  animation: brilho-que-passa 1.4s ease-in-out infinite;
  border-radius: 14px;
}

@keyframes brilho-que-passa {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* --- graficos ---------------------------------------------------------- */

.grade-de-graficos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.grade-de-graficos > .largo {
  grid-column: span 2;
}

@media (max-width: 1100px) {
  .grade-de-graficos {
    grid-template-columns: minmax(0, 1fr);
  }
  .grade-de-graficos > .largo {
    grid-column: auto;
  }
}

.cartao-de-grafico {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px;
  margin: 0;
}

.cartao-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cartao-cabecalho h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.cartao-destaque {
  font-size: 0.78rem;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.grafico-barras svg {
  display: block;
  inline-size: 100%;
  block-size: 170px;
  overflow: visible;
}

.grafico .grade {
  stroke: var(--borda);
  stroke-dasharray: 3 5;
  vector-effect: non-scaling-stroke;
}

.grafico .barra {
  transition: filter 160ms ease;
}

/* So destaca a barra apontada; nada aparece nem some por hover. */
.grafico-barras svg .barra:hover {
  filter: brightness(1.35) saturate(1.2);
}

.grafico .barra-topo { stop-color: color-mix(in srgb, var(--acento) 70%, var(--superficie)); }
.grafico .barra-base { stop-color: color-mix(in srgb, var(--acento) 25%, var(--superficie)); }
.grafico .atual-topo { stop-color: color-mix(in srgb, var(--acento) 80%, #06b6d4); }
.grafico .atual-base { stop-color: var(--acento); }

.grafico-eixo {
  position: relative;
  block-size: 18px;
  font-size: 0.7rem;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.grafico-eixo span {
  position: absolute;
  inset-inline-start: var(--posicao);
  transform: translateX(-50%);
  white-space: nowrap;
}

.grafico-tendencia {
  display: block;
  inline-size: 100%;
  block-size: 46px;
  overflow: visible;
}

.grafico-tendencia .traco {
  fill: none;
  stroke: var(--acento);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.grafico-tendencia .ponto {
  fill: var(--acento);
  stroke: var(--superficie);
  stroke-width: 2;
}

.grafico-tendencia .area-topo { stop-color: color-mix(in srgb, var(--acento) 35%, transparent); }
.grafico-tendencia .area-base { stop-color: transparent; }

.grafico-rosca {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.rosca-desenho {
  position: relative;
  inline-size: 150px;
  block-size: 150px;
  flex: none;
}

.rosca-desenho svg {
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-90deg);
}

.rosca-trilho {
  stroke: var(--superficie-3);
}

.rosca-fatia {
  transition: stroke-width 200ms var(--mola);
}

.rosca-fatia:hover {
  stroke-width: 6.5;
}

.fatia-0 { stroke: var(--fatia-0); background: var(--fatia-0); }
.fatia-1 { stroke: var(--fatia-1); background: var(--fatia-1); }
.fatia-2 { stroke: var(--fatia-2); background: var(--fatia-2); }
.fatia-3 { stroke: var(--fatia-3); background: var(--fatia-3); }
.fatia-4 { stroke: var(--fatia-4); background: var(--fatia-4); }
.fatia-5 { stroke: var(--fatia-5); background: var(--fatia-5); }

.rosca-centro {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.15;
}

.rosca-centro strong {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rosca-centro span {
  font-size: 0.7rem;
  color: var(--texto-fraco);
}

.rosca-legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  flex: 1;
  min-width: min(140px, 100%);
}

.rosca-legenda li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
}

.rosca-cor {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 3px;
  flex: none;
}

.rosca-rotulo {
  flex: 1;
  color: var(--texto-2);
}

.rosca-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.progresso {
  block-size: 6px;
  border-radius: var(--raio-pilula);
  background: var(--superficie-3);
  overflow: hidden;
}

.progresso > span {
  display: block;
  block-size: 100%;
  inline-size: var(--fracao);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 70%, #06b6d4), var(--acento));
  animation: enche 900ms var(--mola) both;
  transform-origin: left center;
}

.progresso-ok > span { background: linear-gradient(90deg, color-mix(in srgb, var(--ok) 70%, #06b6d4), var(--ok)); }
.progresso-atencao > span { background: var(--atencao); }
.progresso-erro > span { background: var(--erro); }

@keyframes enche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.ranking {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ranking-posicao {
  inline-size: 22px;
  text-align: center;
  font-weight: 800;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}

.ranking-posicao.primeiro {
  color: #f59e0b;
}

.ranking-dados {
  flex: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ranking-dados a,
.ranking-nome {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--texto);
}

.ranking-valor {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
}

/* --- inicio ------------------------------------------------------------ */

.boas-vindas {
  margin-bottom: 20px;
}

.boas-vindas-data {
  margin: 0 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.estado-geral {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 30px 30px 24px calc(30px + 26px);
  border-radius: var(--raio-xg);
  border-color: color-mix(in srgb, var(--cor-do-estado) 36%, var(--borda));
  background:
    radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--cor-do-estado) 16%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie) 97%, #fff), var(--superficie));
}

.estado-geral::before {
  left: 30px;
  top: calc(30px + 0.65em);
  animation: pulso-do-estado 2.6s ease-out infinite;
}

.estado-geral::after {
  content: "";
  position: absolute;
  inset: -70% -12% auto auto;
  inline-size: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cor-do-estado), transparent 65%);
  opacity: 0.18;
  z-index: -1;
}

@keyframes pulso-do-estado {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cor-do-estado) 55%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.estado-geral .frase {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.estado-servicos {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.servico {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  border: 1px solid var(--borda);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto-2);
}

.servico-ponto {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--desconhecido);
}

.servico-ok .servico-ponto { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.servico-degradado .servico-ponto { background: var(--atencao); box-shadow: 0 0 8px var(--atencao); }
.servico-fora .servico-ponto { background: var(--erro); box-shadow: 0 0 8px var(--erro); }

.indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .indicadores {
    grid-template-columns: minmax(0, 1fr);
  }
}

.indicador {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 20px 20px 16px;
  margin: 0;
  transition: transform 260ms var(--mola), box-shadow 220ms ease, border-color 220ms ease;
}

.indicador::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 2px;
  background: linear-gradient(90deg, var(--acento), color-mix(in srgb, var(--acento) 10%, #06b6d4));
}

.indicador:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-erguida), var(--relevo);
  border-color: color-mix(in srgb, var(--acento) 30%, var(--borda));
}

.indicador-icone {
  position: absolute;
  top: 18px;
  right: 18px;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--acento);
  background: color-mix(in srgb, var(--acento) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 24%, transparent);
}

.indicador-fora .indicador-icone { color: var(--erro); background: color-mix(in srgb, var(--erro) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--erro) 28%, transparent); }
.indicador-degradado .indicador-icone { color: var(--atencao); background: color-mix(in srgb, var(--atencao) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--atencao) 28%, transparent); }

.indicador .valor {
  font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.indicador .rotulo {
  font-size: 0.82rem;
  color: var(--texto-2);
}

.indicador .grafico-tendencia {
  margin-top: 10px;
  block-size: 38px;
}

.lista.atencao .linha {
  gap: 6px 14px;
}

.atencao-icone {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  flex: none;
}

.atencao-urgente .atencao-icone { color: var(--erro); background: var(--erro-fundo); }
.atencao-atencao .atencao-icone { color: var(--atencao); background: var(--atencao-fundo); }
.atencao-lembrete .atencao-icone { color: var(--texto-2); background: var(--superficie-3); }

.grade-de-saude {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.bloco-de-saude {
  position: relative;
  padding: 16px 16px 14px 18px;
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 97%, #fff), var(--superficie));
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao), var(--relevo);
  overflow: hidden;
}

.bloco-de-saude::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: 3px;
  background: var(--desconhecido);
}

.saude-ok::before { background: var(--ok); }
.saude-degradado::before { background: var(--atencao); }
.saude-fora::before { background: var(--erro); }

.bloco-de-saude-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bloco-de-saude-nome {
  font-weight: 700;
  text-transform: capitalize;
}

.bloco-de-saude-detalhe {
  margin: 8px 0 6px;
  color: var(--texto-2);
  font-size: 0.84rem;
}

.bloco-de-saude-quando {
  font-size: 0.72rem;
  color: var(--texto-fraco);
}

/* --- grupos ------------------------------------------------------------- */

.resumo-de-grupos,
.capa-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}

.pilula-de-numero {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--vidro);
  border: 1px solid var(--borda);
  box-shadow: var(--relevo);
}

.pilula-de-numero strong {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.pilula-de-numero span {
  font-size: 0.8rem;
  color: var(--texto-fraco);
}

.barra-de-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 18px;
}

.barra-de-filtro select {
  min-height: 42px;
}

.campo-com-icone {
  position: relative;
  flex: 1 1 280px;
  display: flex;
  align-items: center;
}

.campo-com-icone svg.icone {
  position: absolute;
  left: 13px;
  color: var(--texto-fraco);
  pointer-events: none;
}

.campo-com-icone input {
  inline-size: 100%;
  min-height: 42px;
  padding-left: 40px;
}

.alternador {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: var(--superficie-3);
}

.alternador button {
  inline-size: 36px;
  min-height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: var(--texto-fraco);
  border-radius: 9px;
}

.alternador button.ativo {
  background: var(--superficie);
  color: var(--acento);
  box-shadow: var(--sombra-cartao);
}

.grade-de-grupos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
}

.cartao-de-grupo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: var(--raio-g);
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie) 97%, #fff), var(--superficie));
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-cartao), var(--relevo);
  transition: transform 280ms var(--mola), box-shadow 240ms ease, border-color 240ms ease;
  animation: sobe-e-aparece 460ms var(--mola) both;
}

.cartao-de-grupo:nth-child(2) { animation-delay: 40ms; }
.cartao-de-grupo:nth-child(3) { animation-delay: 80ms; }
.cartao-de-grupo:nth-child(4) { animation-delay: 120ms; }
.cartao-de-grupo:nth-child(5) { animation-delay: 160ms; }
.cartao-de-grupo:nth-child(n + 6) { animation-delay: 200ms; }

.cartao-de-grupo:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-erguida), var(--relevo);
  border-color: color-mix(in srgb, var(--acento) 32%, var(--borda));
}

.cartao-de-grupo.inativo {
  opacity: 0.65;
}

.cartao-de-grupo-topo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cartao-de-grupo-nome {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cartao-de-grupo-nome a {
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* O link cobre o cartao: clicar em qualquer canto abre o grupo. */
.cartao-de-grupo-nome a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cartao-de-grupo-nome a:hover {
  text-decoration: none;
}

.cartao-de-grupo-nome .secundario,
.cartao-de-grupo .secundario {
  font-size: 0.76rem;
  color: var(--texto-fraco);
}

.cartao-de-grupo-metrica {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 16px;
}

.cartao-de-grupo-metrica strong {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.cartao-de-grupo-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}

.folga {
  flex: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.vazio-do-filtro {
  padding: 32px 0;
  text-align: center;
}

/* --- grupo -------------------------------------------------------------- */

.capa-do-grupo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px 24px;
  padding: 28px;
  margin-bottom: 8px;
  border-radius: var(--raio-xg);
  border: 1px solid var(--borda);
  background:
    radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--acento) 20%, transparent), transparent 60%),
    radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, #06b6d4 10%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie) 97%, #fff), var(--superficie));
  box-shadow: var(--sombra-cartao), var(--relevo);
}

.capa-do-grupo .cabecalho-da-pagina {
  margin-bottom: 4px;
}

.capa-do-grupo p {
  margin: 0;
}

.capa-texto {
  min-width: 0;
}

.capa-numeros {
  grid-column: 1 / -1;
  margin: 14px 0 0;
}

@media (max-width: 640px) {
  .capa-do-grupo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* As linhas de politica e de ajuste: a chave a direita, alinhada. */
.politica-controle,
.ajuste-controle {
  display: flex;
  align-items: center;
}

/* --- movimento ---------------------------------------------------------- */

.conteudo .indicadores > .indicador,
.conteudo .lista,
.conteudo .tabela,
.conteudo .estado-geral,
.conteudo .cartao-de-grafico,
.conteudo .bloco-de-saude,
.conteudo .capa-do-grupo {
  animation: sobe-e-aparece 460ms var(--mola) both;
}

.conteudo .indicadores > .indicador:nth-child(2),
.conteudo .grade-de-graficos > :nth-child(2) { animation-delay: 60ms; }
.conteudo .indicadores > .indicador:nth-child(3),
.conteudo .grade-de-graficos > :nth-child(3) { animation-delay: 120ms; }
.conteudo .indicadores > .indicador:nth-child(4),
.conteudo .grade-de-graficos > :nth-child(4) { animation-delay: 180ms; }

@keyframes sobe-e-aparece {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* --- ajustes da revisao: filtro, atencao, grade do grupo ------------------- */

/* A barra de filtro e flex: a grade antiga (campo e situacao em colunas fixas)
   escondia o segundo seletor atras do primeiro. */
.formulario.filtro.barra-de-filtro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.formulario.filtro.barra-de-filtro > select,
.formulario.filtro.barra-de-filtro > button,
.formulario.filtro.barra-de-filtro > label {
  grid-row: auto;
  grid-column: auto;
}

.formulario.filtro.barra-de-filtro > select {
  flex: 0 1 200px;
}

/* A lista de atencao em grade: icone | titulo e detalhe | quando | etiqueta | ver. */
.lista.atencao .linha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "icone titulo quando etiqueta ver"
    "icone detalhe detalhe detalhe ver";
  align-items: center;
  gap: 2px 14px;
}

.lista.atencao .linha > .atencao-icone { grid-area: icone; }
.lista.atencao .linha > .principal { grid-area: titulo; }
.lista.atencao .linha > .marca-estado { grid-area: etiqueta; justify-self: end; }
.lista.atencao .linha > .secundario:nth-of-type(4) { grid-area: detalhe; }
.lista.atencao .linha > .secundario:nth-of-type(5) { grid-area: quando; }
.lista.atencao .linha > a { grid-area: ver; }

.lista.atencao .linha.fraco {
  display: flex;
}

@media (max-width: 640px) {
  .lista.atencao .linha {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icone titulo etiqueta"
      "icone detalhe detalhe"
      "icone quando ver";
  }
}

/* No grupo, os tres cartoes de atividade lado a lado. */
.grade-de-graficos.tres-iguais > .largo {
  grid-column: auto;
}

/* O numero e o rotulo juntos, no alto; a linha de tendencia, quando ha, embaixo. */
.indicador {
  justify-content: flex-start;
  min-height: 132px;
}

.indicador .valor {
  margin-bottom: 4px;
}

.indicador .grafico-tendencia {
  margin-top: auto;
}

@media (max-width: 900px) {
  .menu-aberto .usuario-dados {
    display: flex !important;
  }
}

/* Tela larga: as pilulas que nao cabem descem de linha em vez de cortar. */
@media (min-width: 56.32em) {
  .abas {
    flex-wrap: wrap;
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 5px;
  }
}

/* Um formulario logo acima de um quadro, e uma nota logo abaixo de uma tabela, ganham respiro. */
.formulario + .estado-de-tela,
.formulario + .tabela-rolavel,
.formulario + .lista {
  margin-top: 20px;
}

.lista + p.fraco,
.tabela-rolavel + p.fraco {
  margin-top: 14px;
}