/* HOCA PLATAFORMA — identidade da HOCA Consultoria no tema escuro do painel.
   Tokens vêm do site hocaconsultoria.com.br (verdes, tinta, Jost + Inter); os cartões de vidro com brilho seguem o modelo de dashboard. */
:root {
  --tinta: #0E1110;
  --bg: #080B0A;
  --bg-2: #0D1110;
  --vidro: rgba(255, 255, 255, .045);
  --vidro-2: rgba(255, 255, 255, .075);
  --linha: rgba(255, 255, 255, .09);
  --linha-2: rgba(255, 255, 255, .05);
  --texto: #EEF2EF;
  --texto-2: #A9B3AD;
  --texto-3: #727C76;
  --verde: #57B89B;
  --verde-2: #74C7AE;
  --verde-profundo: #2F7D64;
  --creme: #F5F2EA;
  --perigo: #E27D5F;

  --st-COMPROVADO: #57B89B;
  --st-PARCIALMENTE_COMPROVADO: #B7D96B;
  --st-VALIDACAO: #7AA7F0;
  --st-DOCUMENTACAO_PENDENTE: #E8A94D;
  --st-RELATORIO_PENDENTE: #E27D5F;
  --st-LEGISLACAO_PENDENTE: #C47AB8;
  --st-SEM_LEITURA: #6C766F;

  --r: 38px;
  --r-md: 16px;
  --r-sm: 10px;
  --fonte-titulo: "Jost", system-ui, sans-serif;
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.22, .9, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  --lado: max(44px, calc((100vw - 2200px) / 2));   /* margem lateral: 44px; só centraliza em telas acima de 2200px */
  margin: 0; min-height: 100vh; color: var(--texto);
  font: 400 14px/1.55 var(--fonte); -webkit-font-smoothing: antialiased;
  background: #080B0A;
}
html { background: #080B0A; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--verde-2); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ───────── moldura e cabeçalho (como no modelo) ───────── */
.app-caixa {
  position: relative; isolation: isolate; width: 100%; min-height: 100vh; overflow: clip;
  background:
    radial-gradient(720px 520px at 102% 104%, rgba(47, 125, 100, .16), transparent 60%),
    linear-gradient(180deg, #0C100F, #080B0A);
}
/* ───────── luz verde do topo: vaga livre pelo alto da tela, crescendo, diminuindo e variando de intensidade ─────────
   Cada aspecto anda no SEU ritmo (períodos primos entre si: 83, 47, 31, 71 e 19 s) e por pontos irregulares, então a
   combinação quase nunca se repete e a luz não faz um vai-e-volta previsível. Só usa translate/scale/rotate/opacity. */
.app-caixa::before {
  content: ""; position: absolute; z-index: -1; top: -260px; left: 0; width: 940px; height: 520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(87, 184, 155, .31), rgba(87, 184, 155, .13) 52%, transparent);
  will-change: transform, translate, scale, rotate, opacity;
  animation:
    luz-x 83s cubic-bezier(.45, .05, .55, .95) infinite alternate,
    luz-y 47s cubic-bezier(.45, .05, .55, .95) infinite alternate,
    luz-tamanho 31s cubic-bezier(.45, .05, .55, .95) infinite alternate,
    luz-gira 71s cubic-bezier(.45, .05, .55, .95) infinite alternate,
    luz-brilho 19s cubic-bezier(.45, .05, .55, .95) infinite alternate;
}
/* No centro do cabeçalho a luz dá lugar ao conteúdo: um véu FIXO, da cor do fundo, fica por cima da luz e por baixo de tudo. Quando a luz passa
   por ali ela fica bem mais fraca (e parece menor); nas laterais continua plena. Não anima: o que anda é só a luz. */
.app-caixa::after {
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 640px; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 16, 15, 0) 16%, rgba(12, 16, 15, .2) 23%, rgba(12, 16, 15, .52) 30%, rgba(12, 16, 15, .8) 38%, rgba(12, 16, 15, .8) 62%, rgba(12, 16, 15, .52) 70%, rgba(12, 16, 15, .2) 77%, rgba(12, 16, 15, 0) 84%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
@keyframes luz-x { 0% { translate: -16vw 0; } 17% { translate: 34vw 0; } 31% { translate: 8vw 0; } 52% { translate: 78vw 0; } 69% { translate: 41vw 0; } 86% { translate: 88vw 0; } 100% { translate: 22vw 0; } }
/* vertical + forma: a luz também achata e estica (largura e altura variam sem acompanhar o tamanho geral) */
@keyframes luz-y { 0% { transform: translateY(-40px) scale(1.15, .85); } 22% { transform: translateY(70px) scale(.8, 1.1); } 41% { transform: translateY(-10px) scale(1.3, .78); } 63% { transform: translateY(105px) scale(.88, 1.05); } 82% { transform: translateY(20px) scale(1.22, .75); } 100% { transform: translateY(-60px) scale(.85, 1.08); } }
@keyframes luz-tamanho { 0% { scale: .6; } 20% { scale: 1.3; } 38% { scale: .85; } 61% { scale: 1.65; } 80% { scale: .7; } 100% { scale: 1.15; } }
@keyframes luz-gira { 0% { rotate: -12deg; } 35% { rotate: 9deg; } 68% { rotate: -5deg; } 100% { rotate: 14deg; } }
/* intensidade: cai quase a apagar e volta, em ritmo irregular */
@keyframes luz-brilho { 0% { opacity: .9; } 14% { opacity: .3; } 27% { opacity: 1; } 45% { opacity: .18; } 63% { opacity: .75; } 81% { opacity: .32; } 100% { opacity: 1; } }

.cabeca-app { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 56px); padding: 26px var(--lado) 0; }
.marca-topo { display: block; flex: none; width: 46px; height: 46px; }
.marca-topo i, .logo-verde {
  display: block; width: 100%; height: 100%; background: linear-gradient(140deg, #A4EBD3, #57B89B 42%, #2F7D64);
  -webkit-mask: url("../assets/logo-bloco.svg") center / contain no-repeat; mask: url("../assets/logo-bloco.svg") center / contain no-repeat;
}
.menu { display: flex; align-self: stretch; gap: clamp(22px, 2.8vw, 42px); }
.menu a {
  position: relative; display: flex; align-items: center; gap: 8px; height: 62px; padding: 0 2px; color: var(--texto-2);
  font: 400 15px var(--fonte); letter-spacing: 0; text-transform: none; text-decoration: none; transition: color .2s;
}
.menu a:hover { color: #fff; }
.menu a[aria-current="page"] { color: #fff; }
.menu { position: relative; }
.menu-indicador { position: absolute; bottom: 4px; left: 0; width: 0; height: 0; pointer-events: none; }
.menu-indicador .linha { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; border-radius: 2px; background: #fff; }
.menu-indicador .entalhe { /* a "parte preta": pequena meia-lua escura sob a linha; recolhe, viaja com a linha e expande na aba nova */
  position: absolute; top: 0; left: calc(50% - 9px); width: 18px; height: 7px; box-sizing: border-box; border: 1.5px solid #fff; border-top: 0; border-radius: 0 0 18px 18px;
  background: #0A0D0C; transform: scale(1); transform-origin: 50% 0;
}
.menu .contador { min-width: 21px; height: 21px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--verde); color: #04110c; font: 600 11px var(--fonte); }
.cabeca-direita { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.btn-icone, .usuario-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; border-radius: 13px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .17); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); transition: background .2s, border-color .2s;
}
.btn-icone { width: 40px; }
.btn-icone:hover, .usuario-chip:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.btn-icone svg { width: 18px; height: 18px; }
/* seletor de município no cabeçalho: ícone + nome; a lista desce ao passar o mouse (ou por clique/teclado) */
.mun-seletor { position: relative; }
.mun-seletor[hidden] { display: none; }
.btn-municipio { width: auto; gap: 9px; padding: 0 11px 0 12px; font-size: 14px; cursor: pointer; }
.btn-municipio .nome-mun { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-municipio .seta-mun { width: 15px; height: 15px; color: var(--texto-2); transition: transform .25s var(--ease), color .2s; }
.btn-municipio[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.btn-municipio[aria-expanded="true"] .seta-mun { transform: rotate(180deg); color: var(--verde-2); }
.mun-seletor .mun-lista { position: absolute; z-index: 60; top: calc(100% + 10px); right: 0; left: auto; width: min(320px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; transform-origin: top right; }
.mun-seletor .mun-lista[hidden] { display: none; }
.mun-seletor .mun-lista::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }            /* ponte invisível: o mouse desce do botão para a lista sem fechar */
.mun-seletor .mun-lista .item { padding: 11px 14px; }
.mun-seletor .mun-lista .item.destaque { margin-top: 0; }
.mun-seletor .mun-lista .sep { height: 1px; margin: 6px 10px; background: var(--linha-2); }
@media (max-width: 640px) { .btn-municipio { width: 40px; padding: 0; } .btn-municipio .nome-mun, .btn-municipio .seta-mun { display: none; } }
.btn-icone .ponto { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-2); box-shadow: 0 0 0 2px #0A0D0C, 0 0 12px var(--verde-2); animation: pulso 2s infinite; }
.usuario-chip { gap: 9px; padding: 0 11px 0 5px; max-width: 250px; justify-content: flex-start; }
.usuario-chip .avatar { width: 30px; height: 30px; display: grid; place-items: center; background: linear-gradient(140deg, #2F7D64, #74C7AE); color: #04110c; font: 600 13px var(--fonte-titulo); flex: none; }
.usuario-chip .nome { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.usuario-chip svg { width: 15px; height: 15px; color: var(--texto-2); flex: none; }

.menu-flutuante, .mun-lista { position: fixed; z-index: 60; min-width: 250px; max-width: calc(100vw - 24px); padding: 8px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(17, 21, 20, .97); backdrop-filter: blur(18px); box-shadow: 0 34px 90px -24px #000; animation: subir .2s var(--ease); }
.menu-flutuante .cab, .mun-lista .cab { padding: 12px 14px 8px; font: 500 10.5px var(--fonte); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.menu-flutuante .cab small, .mun-lista .cab small { display: block; margin-top: 3px; letter-spacing: .08em; color: var(--verde-2); }
.menu-flutuante .item, .mun-lista .item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: transparent; text-align: left; color: var(--texto-2); font-size: 14px; }
.menu-flutuante .item:hover, .mun-lista .item:hover, .mun-lista .item:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }
.menu-flutuante .item svg, .mun-lista .item svg { width: 18px; height: 18px; flex: none; color: var(--verde-2); }
.menu-flutuante .vazio-icone, .mun-lista .vazio-icone { width: 18px; flex: none; }
.menu-flutuante .item.destaque, .mun-lista .item.destaque { margin-top: 4px; color: var(--verde-2); font-weight: 500; }
.menu-flutuante .item.notif { align-items: flex-start; }
.menu-flutuante .notif .ponto-notif { margin-top: 6px; flex: none; }
.menu-flutuante .notif .corpo { display: flex; flex-direction: column; min-width: 0; }
.menu-flutuante .notif b { font: 500 13px var(--fonte-titulo); letter-spacing: .08em; color: #fff; }
.menu-flutuante .notif .corpo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-flutuante .notif small { color: var(--verde-2); font-size: 12px; }
.menu-flutuante .vazio-menu { margin: 0; padding: 4px 14px 12px; color: var(--texto-3); font-size: 13px; }
.menu-flutuante .separador { height: 1px; margin: 6px 10px; background: var(--linha-2); }
.menu-flutuante .item[aria-current="page"] { background: rgba(87, 184, 155, .12); color: #fff; }
.usuario-chip[aria-current="page"] { border-color: rgba(116, 199, 174, .55); background: rgba(87, 184, 155, .1); }
.menu-indicador { transition: opacity .25s; }
.menu.sem-aba .menu-indicador { opacity: 0; }                       /* Perfil, Configurações e Usuários não são abas */
html.sem-luz .app-caixa::before, html.sem-luz .app-caixa::after { display: none; }   /* preferência em Configurações */

/* ───────── banner animado: o vídeo de Teresina do topo do site da HOCA, em faixa baixa e largura total ───────── */
.banner-hero { position: relative; isolation: isolate; display: flex; align-items: center; height: clamp(136px, 13vw, 200px); margin-top: 0; overflow: hidden; background: transparent; color: #fff;
  /* bordas macias: o vídeo se dissolve no fundo do app em cima e embaixo, sem corte seco */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, .62) 20%, rgba(0, 0, 0, .92) 31%, #000 40%, #000 58%, rgba(0, 0, 0, .9) 69%, rgba(0, 0, 0, .55) 81%, rgba(0, 0, 0, .2) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .22) 9%, rgba(0, 0, 0, .62) 20%, rgba(0, 0, 0, .92) 31%, #000 40%, #000 58%, rgba(0, 0, 0, .9) 69%, rgba(0, 0, 0, .55) 81%, rgba(0, 0, 0, .2) 92%, transparent 100%); }
.banner-bg { position: absolute; inset: 0; z-index: -2; transform: scaleX(-1); }   /* espelhado, como no site: a ponte fica à direita */
.banner-bg img, .banner-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.banner-bg img { transform: scale(1.04); animation: kb 28s ease-in-out infinite alternate; }
.banner-bg video { opacity: 0; transition: opacity 1.2s var(--ease); }
.banner-bg video.playing { opacity: 1; }
@keyframes kb { to { transform: scale(1.12) translate3d(-1.4%, -1%, 0); } }
.banner-hero::before { /* escurece a esquerda para o texto ler; some para a direita (igual ao site) e volta a escurecer um pouco na ponta direita, para o título da guia */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(270deg, rgba(10, 14, 13, .55) 0%, rgba(10, 14, 13, .3) 20%, rgba(10, 14, 13, 0) 46%),
    linear-gradient(90deg, rgba(10, 14, 13, .88) 0%, rgba(10, 14, 13, .66) 34%, rgba(10, 14, 13, .26) 62%, rgba(10, 14, 13, .03) 86%, rgba(10, 14, 13, 0) 100%);
}
.banner-copy { padding: 0 var(--lado); }
/* título da guia em cima do banner, no lado direito, alinhado à direita (o da HOCA fica à esquerda) */
@property --laser-angulo { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes laser { to { --laser-angulo: 360deg; } }
/* painel de vidro: fundo translúcido que desfoca o vídeo atrás, borda fina de luz e um feixe "laser" verde que corre devagar pelo contorno */
.banner-pagina { position: relative; margin: 0 var(--lado) 0 auto; max-width: 42%; padding: 12px 24px 13px; text-align: right; border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 14px 44px -14px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(255, 255, 255, .09); }
.banner-pagina:empty { display: none; }
.banner-pagina::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--laser-angulo), rgba(116, 199, 174, .18) 0, rgba(116, 199, 174, .18) 52%, rgba(116, 199, 174, .45) 62%, #74C7AE 76%, #F2FFF9 85%, #74C7AE 92%, rgba(116, 199, 174, .3) 98%, rgba(116, 199, 174, .18) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 7px rgba(116, 199, 174, .9)); animation: laser 6s linear infinite; }
.banner-pagina { box-sizing: border-box; }
.banner-pagina.trocando { overflow: hidden; white-space: nowrap; }
.banner-pagina.laser-forte::before { animation: laser 1s cubic-bezier(.3, .6, .3, 1) 1; filter: drop-shadow(0 0 11px rgba(116, 199, 174, 1)); }   /* ao trocar de guia: uma volta rápida e mais brilhante */
html.sem-luz .banner-pagina::before { animation: none; --laser-angulo: 250deg; }            /* "Luz animada" desligada em Configurações: o feixe fica parado */
@media (prefers-reduced-motion: reduce) { .banner-pagina::before { animation: none; --laser-angulo: 250deg; } }
.banner-pagina .pequeno { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 6px; color: rgba(238, 242, 239, .78); font: 400 13px/1.35 var(--fonte); text-shadow: 0 1px 12px rgba(10, 14, 13, .8); }
.banner-pagina .titulo-pagina { margin: 0; font: 300 clamp(22px, 2.3vw, 34px)/1.08 var(--fonte-titulo); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(10, 14, 13, .7); overflow-wrap: anywhere; }

.banner-copy .rotulo { display: block; margin-bottom: 8px; }
.banner-titulo { margin: 0; font: 300 clamp(20px, 2.3vw, 34px)/1.1 var(--fonte-titulo); letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(10, 14, 13, .6); }
.banner-titulo em { font-style: normal; color: var(--verde-2); }

.principal { padding: 0 0 70px; min-width: 0; }
.rotulo { font: 500 11px/1.2 var(--fonte); letter-spacing: .22em; text-transform: uppercase; color: var(--verde); }
.nota-agenda { padding: 14px 16px; border-radius: 18px; background: var(--vidro); border: 1px solid var(--linha-2); font-size: 12.5px; color: var(--texto-2); }
.faixa-demo {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 18px; border-radius: 22px;
  background: rgba(232, 169, 77, .12); border: 1px solid rgba(232, 169, 77, .35); color: #F1C987; font-size: 12.5px;
}
.faixa-demo b { font: 600 10px var(--fonte); letter-spacing: .18em; text-transform: uppercase; }

.principal > .faixa-demo { margin: 22px var(--lado) 0; }
.conteudo-pagina { padding: 28px var(--lado) 0; }

/* ───────── saudação e faixa de contexto ───────── */
.saudacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 26px var(--lado) 22px; }
.saudacao-esq { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 28px; min-width: 0; flex: 1 1 auto; }
.saudacao .pequeno { display: block; margin-bottom: 8px; color: var(--texto-3); font: 400 14px var(--fonte); letter-spacing: 0; text-transform: none; }
.titulo-pagina { margin: 0; font: 300 clamp(32px, 3.2vw, 46px)/1.02 var(--fonte-titulo); letter-spacing: .01em; text-transform: uppercase; }
.saudacao .divisor { align-self: stretch; width: 1px; min-height: 66px; background: var(--linha); }
.mensagem { display: flex; align-items: center; gap: 14px; max-width: 320px; }
.icone-vidro {
  flex: none; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 21px; color: #D5F0E6;
  background: linear-gradient(145deg, rgba(190, 218, 207, .42), rgba(255, 255, 255, .05) 46%, rgba(0, 0, 0, .5)); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: 0 16px 32px -14px #000, inset 0 1px 0 rgba(255, 255, 255, .38);
}
.icone-vidro svg { width: 30px; height: 30px; }
.mensagem b { display: block; font: 400 19px/1.2 var(--fonte); color: #fff; }
.mensagem span { display: block; margin-top: 5px; color: var(--texto-3); font-size: 14px; line-height: 1.4; }
.acoes-saudacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px 24px; flex: none; }
.btn-circulo { display: inline-flex; align-items: center; gap: 12px; border: 0; background: none; color: #fff; font: 500 15px var(--fonte); }
.btn-circulo i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #0A0D0C; transition: transform .2s var(--ease); }
.btn-circulo i svg { width: 19px; height: 19px; }
.btn-circulo:hover i { transform: scale(1.08); }
.btn-circulo[disabled] { opacity: .45; pointer-events: none; }

.contexto { display: flex; align-items: center; gap: 22px; margin: 0 var(--lado); padding: 18px 0; border-top: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2); }
.tile-data { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 22px; line-height: 1.05; border: 1px solid rgba(255, 255, 255, .15); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.tile-data b { font: 300 27px var(--fonte-titulo); }
.tile-data small { color: var(--texto-2); font-size: 13px; text-transform: capitalize; }
.contexto-texto { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; min-width: 0; font: 300 clamp(19px, 1.9vw, 25px)/1.25 var(--fonte-titulo); color: var(--texto-2); }
.contexto-texto .mun { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: #fff; font: inherit; }
.contexto-texto .mun svg { width: 18px; height: 18px; color: var(--verde-2); }
.contexto-texto .meta b { color: #fff; font-weight: 400; }
.contexto-texto small { flex-basis: 100%; color: var(--texto-3); font: 400 13.5px var(--fonte); }
.setas { margin-left: auto; display: flex; gap: 12px; flex: none; }
.btn-seta { display: grid; place-items: center; width: 62px; height: 52px; border-radius: 19px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; transition: background .2s; }
.btn-seta svg { width: 20px; height: 20px; }
.btn-seta:hover:not([disabled]) { background: rgba(255, 255, 255, .09); }
.btn-seta[disabled] { opacity: .3; cursor: default; }

/* ───────── botões ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 26px; border-radius: 999px;
  border: 1px solid var(--linha); background: transparent; color: var(--texto);
  font: 500 11.5px var(--fonte); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  transition: transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, filter .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--vidro-2); border-color: rgba(255, 255, 255, .22); }
.btn:active { transform: translateY(1px); }
.btn.primario { border-color: transparent; color: #04110c; background: linear-gradient(180deg, #9ADBC6, #57B89B 55%, #3F9C82); box-shadow: 0 14px 34px -14px rgba(87, 184, 155, .9), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.primario:hover { filter: brightness(1.07); }
.btn.perigo { border-color: rgba(226, 125, 95, .45); color: #F3A88F; }
.btn.perigo:hover { background: rgba(226, 125, 95, .12); }
.btn.pequeno { height: 34px; padding: 0 16px; font-size: 10.5px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .giro, svg.giro { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ───────── telas de conta: Perfil, Configurações, Usuários (compactas: conteúdo de até ~1120 px, nada gigante) ───────── */
.saudacao-conta { padding-top: 16px; padding-bottom: 0; justify-content: flex-end; }
.saudacao-conta .pequeno { margin-bottom: 4px; font-size: 13px; }
.saudacao-conta .titulo-pagina { font-size: clamp(24px, 2.2vw, 32px); }
.conteudo-pagina.conta { padding-top: 18px; }
.conta .cartao.padding, .conta .lista-usuarios { border-radius: 22px; }
.conta .cartao.padding { padding: 18px 22px 20px; }
.conta .cartao.vazio { padding: 34px 22px; }
.conta .btn { height: 38px; padding: 0 18px; font-size: 10.5px; }
.conta .btn.pequeno, .conta .btn.pequeno svg + * { height: 32px; padding: 0 14px; font-size: 10px; }
.conta .btn svg { width: 14px; height: 14px; }
.conta .nota-agenda { margin-top: 12px; padding: 9px 13px; border-radius: 14px; font-size: 12.5px; }
.saudacao-conta .btn { height: 38px; padding: 0 20px; font-size: 10.5px; }
.conta .campo { margin-bottom: 12px; }
.conta .campo span { margin-bottom: 5px; font-size: 10px; }
.conta .campo input, .conta .campo select, .conta .campo .sel-botao { height: 38px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.grade-conta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }   /* cartões lado a lado com a mesma altura */
.cartao-conta { min-width: 0; display: flex; flex-direction: column; }
.cartao-conta > .acoes-cartao:last-child { margin-top: auto; padding-top: 14px; }
.conta .grade-conta + .cartao { margin-top: 16px; }
.conta .grade-conta + .grade-conta { margin-top: 16px; }
/* Dashboard/Matriz/Relatórios sem município: aviso centralizado, sem caixa, com respiro e um botão largo embaixo */
.sem-municipio { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; padding: 64px 12px 48px; text-align: center; }
.sem-municipio .icone-mini { width: 46px; height: 46px; border-radius: 15px; }
.sem-municipio .icone-mini svg { width: 22px; height: 22px; }
.sem-municipio h2 { margin: 6px 0 0; font: 300 clamp(20px, 1.9vw, 26px)/1.2 var(--fonte-titulo); letter-spacing: .02em; }
.sem-municipio p { margin: 0 0 14px; max-width: 520px; color: var(--texto-2); font-size: 14.5px; line-height: 1.6; }
.conta .sem-municipio .btn { min-width: min(320px, 100%); height: 46px; font-size: 11px; }
.resumo-agenda.resumo-3 { grid-template-columns: 1.7fr 1.1fr .8fr; gap: 10px; }          /* os três dados do WhatsApp numa linha só */
.cartao-whatsapp .resumo-3 dd { font-size: 13.5px; }
.cartao-email .opcoes { margin-top: 4px; }
.cabeca-cartao { display: flex; align-items: center; gap: 12px; min-height: 34px; margin-bottom: 6px; }
.cabeca-cartao .cartao-titulo { flex: 1; min-width: 0; margin: 0; font-size: 17px; letter-spacing: .01em; }
.icone-mini { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--vidro-2); border: 1px solid var(--linha); color: var(--verde-2); }
.icone-mini svg { width: 16px; height: 16px; }
.texto-suave { margin: 6px 0 0; color: var(--texto-2); font-size: 13px; line-height: 1.55; }
.texto-suave.pequeno { margin: 12px 0 0; font-size: 12px; color: var(--texto-3); }
.acoes-cartao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.perfil-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.perfil-topo .cartao-titulo { margin: 0 0 6px; font-size: 18px; overflow-wrap: anywhere; }
.usuario-chip .avatar, .avatar-lista, .avatar.grande, .avatar-botao, .foto-canvas { border-radius: 26%; }     /* padrão: quadrada de cantos arredondados */
.usuario-chip .avatar[data-forma="circular"], .avatar-lista[data-forma="circular"], .avatar.grande[data-forma="circular"], .avatar-botao[data-forma="circular"], .foto-canvas[data-forma="circular"] { border-radius: 50%; }   /* só quando a pessoa escolhe */
.com-foto { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }   /* foto de perfil no lugar das iniciais */
.avatar-botao { position: relative; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.avatar-botao:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 3px; }
.avatar-botao .selo-camera { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #0A0D0C; border: 1px solid var(--linha); color: var(--verde-2); transition: background .2s; }
.avatar-botao .selo-camera svg { width: 13px; height: 13px; }
.avatar-botao:hover .selo-camera { background: #16201C; }
.foto-vazio { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 4px 0; }
.foto-vazio .avatar.grande { width: 96px; height: 96px; font-size: 36px; }
.foto-editor { display: grid; justify-items: center; }
.foto-canvas { width: 240px; height: 240px; max-width: 100%; border: 1px solid var(--linha); background: #0A0D0C; touch-action: none; cursor: grab; box-shadow: 0 24px 60px -30px #000; }
.foto-canvas.arrastando { cursor: grabbing; }
.foto-canvas:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 4px; }
.foto-zoom { display: flex; align-items: center; gap: 12px; width: min(280px, 100%); margin-top: 14px; color: var(--texto-2); }
.foto-zoom svg { width: 17px; height: 17px; flex: none; }
.foto-zoom input { flex: 1; accent-color: var(--verde); }
.foto-outra { display: flex; justify-content: center; margin-top: 12px; }
.seletor-formato { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 10px; margin-top: 16px; }
.seletor-formato .rotulo { margin-right: 4px; }
.opcao-formato { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid var(--linha); background: transparent; color: var(--texto-2); font: 500 12.5px var(--fonte); transition: background .2s, border-color .2s, color .2s; }
.opcao-formato:hover { background: var(--vidro-2); }
.opcao-formato[aria-pressed="true"] { border-color: rgba(116, 199, 174, .6); background: rgba(87, 184, 155, .14); color: #fff; }
.amostra-formato { width: 14px; height: 14px; background: var(--verde-2); }
.amostra-formato.quadrada { border-radius: 26%; }
.amostra-formato.circular { border-radius: 50%; }
.avatar.grande { width: 56px; height: 56px; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, #2F7D64, #74C7AE); color: #04110c; font: 600 21px var(--fonte-titulo); box-shadow: 0 12px 28px -14px rgba(87, 184, 155, .8); }
.dados-conta { margin: 0; }
.dados-conta > div { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--linha-2); }
.dados-conta.com-acao > div { grid-template-columns: 124px minmax(0, 1fr) auto; }
.nao-informado { color: var(--texto-3); font-style: italic; }
.valor-mascarado { -webkit-user-select: none; user-select: none; letter-spacing: .02em; }
.valor-mascarado.revelado { color: var(--verde-2); }
.campo-mascarado { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.btn-olho { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; padding: 0; border-radius: 8px; border: 1px solid var(--linha); background: transparent; color: var(--texto-2); }
.btn-olho:hover { background: var(--vidro-2); color: #fff; }
.btn-olho svg { width: 14px; height: 14px; }
.alerta-perfil { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 6px 0 4px; border-color: rgba(232, 169, 77, .4); background: rgba(232, 169, 77, .1); color: #F1C987; }
input.codigo-confirmacao { font-size: 18px; letter-spacing: .3em; text-align: center; }
.dados-conta dt { font: 500 10px/1.6 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.dados-conta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.dados-conta dd small { display: block; margin-top: 2px; color: var(--texto-3); font-size: 12px; }
.dados-conta.compacto > div { padding: 8px 0; }
.dados-conta .mono, input.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .04em; }
.resumo-agenda { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin: 12px 0 4px; padding: 10px 0; border-top: 1px solid var(--linha-2); border-bottom: 1px solid var(--linha-2); }
.resumo-agenda dt { font: 500 10px/1.6 var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-3); }
.resumo-agenda dd { margin: 2px 0 0; font-size: 14px; }

.opcoes { margin-top: 6px; }
.linha-opcao { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--linha-2); }
.linha-opcao .texto { min-width: 0; }
.linha-opcao b { display: block; font-weight: 500; font-size: 14px; }
.linha-opcao small { display: block; margin-top: 2px; color: var(--texto-3); font-size: 12px; line-height: 1.5; }
.interruptor { position: relative; flex: none; margin-left: auto; width: 42px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .08); transition: background .22s, border-color .22s; }
.interruptor i { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #E9EEEB; box-shadow: 0 2px 6px rgba(0, 0, 0, .45); transition: transform .24s var(--ease); }
.interruptor[aria-checked="true"] { background: linear-gradient(180deg, #74C7AE, #3F9C82); border-color: transparent; }
.interruptor[aria-checked="true"] i { transform: translateX(18px); background: #fff; }
.interruptor:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 3px; }

.lista-usuarios, .lista-municipios { padding: 0; }
.lista-municipios { margin-top: 8px; }
.linha-usuario, .linha-municipio { display: grid; align-items: center; gap: 10px 14px; padding: 10px 18px; border-top: 1px solid var(--linha-2); }
.linha-usuario:first-child { border-top: 0; }
.linha-usuario { grid-template-columns: 36px minmax(0, 1.5fr) minmax(130px, 200px) 104px minmax(150px, 1fr) auto; }
.linha-usuario .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta .lista-usuarios + .cartao { margin-top: 16px; }
.linha-usuario .pill, .linha-municipio .pill { justify-self: start; }
.linha-municipio { grid-template-columns: 36px minmax(0, 1fr) 64px 104px auto auto; padding-left: 0; padding-right: 0; }
.avatar-lista, .icone-mun { width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.icone-mun { border-radius: 26%; }
.avatar-lista { background: linear-gradient(140deg, #2F7D64, #74C7AE); color: #04110c; font: 600 13px var(--fonte-titulo); }
.icone-mun { background: var(--vidro-2); border: 1px solid var(--linha); color: var(--verde-2); }
.icone-mun svg { width: 17px; height: 17px; }
.linha-usuario .dados, .linha-municipio .dados { min-width: 0; }
.linha-usuario .dados b, .linha-municipio .dados b { display: block; font-weight: 500; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-usuario .dados small, .linha-municipio .dados small { display: block; margin-top: 1px; color: var(--texto-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce { margin-left: 8px; font: 500 9.5px var(--fonte); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--verde-2); }
.linha-usuario .acesso { color: var(--texto-3); font-size: 12px; }
.linha-usuario.inativo .avatar-lista, .linha-usuario.inativo .dados, .linha-municipio.inativo .icone-mun, .linha-municipio.inativo .dados { opacity: .55; }
.link-pasta { display: inline-flex; align-items: center; gap: 5px; color: var(--verde-2); font-size: 12.5px; }
.link-pasta svg { width: 14px; height: 14px; }
.link-pasta:hover { text-decoration: underline; }
.vazio-interno { display: grid; justify-items: center; gap: 10px; padding: 22px 0 6px; color: var(--texto-2); font-size: 13px; text-align: center; }
.vazio-interno p { margin: 0; }
.cartao.vazio .giro-grande, .vazio-interno .giro-grande { width: 30px; height: 30px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid rgba(87, 184, 155, .2); border-top-color: var(--verde-2); animation: girar 1s linear infinite; }

.form-agenda { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 0 12px; align-items: end; margin-top: 12px; }
.form-agenda > .erro-form, .form-agenda > .previa-agenda, .form-agenda > .dica-agenda { grid-column: 1 / -1; }
.dica-agenda { margin-top: -2px; color: var(--texto-3); font-size: 12px; }
.hora-linha { display: flex; align-items: center; gap: 6px; }
.hora-linha select { flex: 1; min-width: 0; }
.hora-linha b { color: var(--texto-2); font-weight: 500; }
.previa-agenda { margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; background: rgba(87, 184, 155, .1); border: 1px solid rgba(87, 184, 155, .3); color: var(--verde-2); font-size: 12.5px; }
.link-registro { display: block; width: 100%; margin-top: 12px; padding: 8px; border: 0; background: none; color: var(--verde-2); font-size: 13px; text-align: center; cursor: pointer; }
.link-registro:hover { text-decoration: underline; }
.interruptor:disabled { opacity: .45; cursor: not-allowed; }
/* tela "Confirme o seu e-mail" */
.login .texto-suave { margin: 0 0 12px; font-size: 13px; line-height: 1.5; }
.confirmar-email input.codigo-confirmacao { width: 100%; }
.confirmar-email .campo small { display: block; color: var(--texto-3); }
.confirmar-email > .btn { margin-top: 8px; width: 100%; }

.cartao.login.registro { width: min(640px, 100%); }
/* cadastro: campos em linhas de 2–3 colunas, para o cartão ficar baixo e caber na tela */
.reg-linha { display: grid; gap: 0 10px; }
.reg-codigo { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.reg-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reg-contato { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); margin-top: 10px; }
.reg-acesso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dica-reg { display: block; margin: -4px 0 10px; color: var(--texto-3); font-size: 11.5px; line-height: 1.4; }
.login .reg-codigo input[data-form="codigo"] { font-size: 13px; letter-spacing: 0; padding: 0 10px; }
@media (max-width: 560px) {
  .reg-codigo, .reg-contato { grid-template-columns: 1fr; }
  .reg-tres, .reg-acesso { grid-template-columns: 1fr 1fr; }
  .reg-tres > :last-child { grid-column: 1 / -1; }
}
.principal > .faixa-perfil { margin: 16px var(--lado) 0; }
.faixa-perfil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-radius: 18px; background: rgba(87, 184, 155, .1); border: 1px solid rgba(87, 184, 155, .35); color: var(--texto); font-size: 13px; }
.faixa-perfil b { font: 600 10px var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--verde-2); }
.faixa-perfil .acoes { display: inline-flex; gap: 8px; margin-left: auto; }
.codigo-grande { margin: 14px 0; padding: 18px 12px; border-radius: 16px; border: 1px dashed rgba(116, 199, 174, .5); background: rgba(87, 184, 155, .08); font: 600 24px ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-align: center; color: #fff; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
.lista-codigos { margin-top: 6px; }
.linha-codigo { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha-2); }
.linha-codigo .dados b { display: block; font-weight: 500; font-size: 14px; }
.linha-codigo .dados small { display: block; margin-top: 1px; color: var(--texto-3); font-size: 12px; }
.campo-senha { display: flex; flex-wrap: wrap; gap: 10px; }
.campo-senha input { flex: 1 1 200px; min-width: 0; }
.campo-senha .btn { height: 46px; }
.grade-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grade-form-3 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .8fr); gap: 0 10px; }
.bloco-senha { margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--linha-2); }
.bloco-senha .texto-suave { margin: 8px 0 14px; font-size: 13px; }
.janela select, .campo select { color: var(--texto); }
/* endereço com CEP: CEP | número | complemento, linha de status, rua, e bairro | cidade | UF */
.grupo-endereco { margin-bottom: 4px; padding: 10px 12px 0; border: 1px solid var(--linha-2); border-radius: 14px; background: rgba(255, 255, 255, .02); }
.rotulo-grupo { display: block; margin-bottom: 8px; font: 500 10px var(--fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.grade-endereco { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(0, 1.5fr); gap: 0 10px; }
.grade-endereco > .inteira, .grade-endereco > .cep-status, .grade-endereco > .linha-cidade { grid-column: 1 / -1; }
.linha-cidade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 84px; gap: 0 10px; }
.cep-status { min-height: 17px; margin: -6px 0 8px; font-size: 12px; color: var(--texto-3); }
.cep-status:empty { min-height: 0; margin: 0; }                      /* sem mensagem, a linha some: nada de vão no meio do endereço */
.cep-status[data-estado="buscando"] { color: var(--texto-2); }
.cep-status[data-estado="ok"] { color: var(--verde-2); }
.cep-status[data-estado="erro"] { color: #F6B7A3; }
.cep-status[data-estado="aviso"] { color: #F1C987; }
.grade-endereco input[aria-busy="true"] { background-image: linear-gradient(90deg, transparent, rgba(116, 199, 174, .25), transparent); background-size: 200% 100%; animation: carregando 1s linear infinite; }
@keyframes carregando { to { background-position: -200% 0; } }
.janela select option { color: #111; }

/* ───────── cartões de vidro ───────── */
.cartao {
  position: relative; overflow: hidden; border-radius: 38px; border: 1px solid rgba(255, 255, 255, .11);
  background: linear-gradient(152deg, rgba(160, 186, 178, .22) 0%, rgba(44, 58, 54, .34) 26%, rgba(10, 14, 13, .94) 74%), #0A0E0D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -34px 70px -46px rgba(0, 0, 0, .9), 0 34px 70px -42px #000;
}
.cartao.padding { padding: 28px 30px; }
.cartao h2, .cartao h3 { margin: 0; }
.cartao-titulo { font: 300 26px/1.15 var(--fonte-titulo); letter-spacing: .01em; }
.cartao-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.chip-info { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); color: var(--texto-2); font: 400 13px var(--fonte); white-space: nowrap; }

.grade-cartoes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.72fr); gap: 18px; }
.grade-cartoes + .grade-cartoes { margin-top: 18px; }
.kpi { min-height: 230px; padding: 28px 30px; display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; text-align: left; font: inherit; color: inherit; width: 100%; }
button.kpi { cursor: pointer; transition: transform .25s var(--ease), border-color .25s; }
button.kpi:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); }
.kpi .kpi-rotulo { font: 300 22px/1.2 var(--fonte-titulo); letter-spacing: .01em; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.kpi-rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.kpi .kpi-numero { font: 300 clamp(54px, 5.4vw, 76px)/.95 var(--fonte-titulo); letter-spacing: -.02em; }
.kpi .kpi-numero small { margin-left: 8px; color: var(--texto-2); font-size: .3em; letter-spacing: 0; }
.kpi .kpi-nota { max-width: 11em; color: rgba(255, 255, 255, .8); font-size: 13px; line-height: 1.4; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
.kpi .kpi-nota small { display: block; margin-top: 6px; color: rgba(255, 255, 255, .62); font-size: 11.5px; }
.kpi .kpi-nota.dir { text-align: right; }
.kpi.luz::before { /* foco de luz: um cone verde saindo do canto, como o do modelo */
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: conic-gradient(from 0deg at calc(100% - 46px) 40px, transparent 0 200deg, var(--brilho, rgba(87, 184, 155, .92)) 211deg 239deg, transparent 250deg 360deg);
  filter: blur(15px); -webkit-mask-image: radial-gradient(circle at calc(100% - 46px) 40px, #000 0, #000 30%, transparent 64%); mask-image: radial-gradient(circle at calc(100% - 46px) 40px, #000 0, #000 30%, transparent 64%);
}
.kpi.luz::after { content: ""; position: absolute; z-index: -1; width: 150px; height: 150px; right: -29px; top: -35px; border-radius: 50%; background: radial-gradient(circle, #fff 0, rgba(255, 255, 255, .8) 12%, var(--brilho-2, rgba(160, 235, 210, .45)) 34%, transparent 66%); filter: blur(5px); }
.btn-luz { position: absolute; top: 22px; right: 26px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #0A0D0C; box-shadow: 0 0 26px rgba(255, 255, 255, .7); transition: transform .2s var(--ease); }
.btn-luz svg { width: 19px; height: 19px; }
.btn-luz:hover:not([disabled]) { transform: scale(1.1); }
.btn-luz[disabled] { opacity: .75; }
.kpi.ambar { --brilho: rgba(236, 170, 77, .95); --brilho-2: rgba(246, 205, 140, .5); }
.kpi.azul { --brilho: rgba(118, 196, 218, .9); --brilho-2: rgba(170, 225, 240, .5); }
/* A foto de fundo é a do PRÓPRIO município (variável --foto, posta pelo Dashboard); município sem foto fica só com o degradê verde, nunca com a foto de outra cidade. */
.kpi.foto { border-color: rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(5, 10, 8, .1) 20%, rgba(5, 10, 8, .86)), linear-gradient(112deg, rgba(47, 125, 100, .74), rgba(87, 184, 155, .14) 72%), linear-gradient(135deg, #18362d, #0d1a16); }
.kpi.foto.com-foto { background: linear-gradient(180deg, rgba(5, 10, 8, .1) 20%, rgba(5, 10, 8, .86)), linear-gradient(112deg, rgba(47, 125, 100, .74), rgba(87, 184, 155, .14) 72%), var(--foto) 70% 40% / cover; }
.foto-credito { position: absolute; top: 9px; right: 12px; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .62); text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
a.foto-credito:hover { color: #fff; text-decoration: underline; }
.kpi.foto .canelado { position: absolute; z-index: -1; inset: 0 52% 0 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 7px, rgba(0, 0, 0, .16) 7px 14px); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); mask-image: linear-gradient(90deg, #000 62%, transparent); backdrop-filter: blur(1.4px); }

/* status */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 13px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); font: 400 12px var(--fonte); white-space: nowrap; color: var(--texto); }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-3)); box-shadow: 0 0 10px var(--cor, transparent); flex: none; }
.pill.pequeno { height: 26px; font-size: 11.5px; padding: 0 12px 0 10px; }
.pill.cat { --cor: var(--verde-2); font: 500 11px var(--fonte); letter-spacing: .14em; text-transform: uppercase; }
.pill.alerta { --cor: var(--st-DOCUMENTACAO_PENDENTE); background: rgba(232, 169, 77, .1); border-color: rgba(232, 169, 77, .3); }
.pill.ok { --cor: var(--verde); background: rgba(87, 184, 155, .1); border-color: rgba(87, 184, 155, .3); }
.st-COMPROVADO { --cor: var(--st-COMPROVADO); } .st-PARCIALMENTE_COMPROVADO { --cor: var(--st-PARCIALMENTE_COMPROVADO); }
.st-VALIDACAO { --cor: var(--st-VALIDACAO); } .st-DOCUMENTACAO_PENDENTE { --cor: var(--st-DOCUMENTACAO_PENDENTE); }
.st-RELATORIO_PENDENTE { --cor: var(--st-RELATORIO_PENDENTE); } .st-LEGISLACAO_PENDENTE { --cor: var(--st-LEGISLACAO_PENDENTE); }
.st-SEM_LEITURA { --cor: var(--st-SEM_LEITURA); }

.barra-status { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); }
.barra-status span { background: var(--cor); min-width: 4px; transition: flex-grow .6s var(--ease); }
.legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; margin-top: 14px; }
.legenda button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; font-size: 13px; color: var(--texto-2); }
.legenda button:hover { background: var(--vidro-2); color: var(--texto); }
.legenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; box-shadow: 0 0 10px var(--cor); }
.legenda b { margin-left: auto; font: 400 17px var(--fonte-titulo); color: var(--texto); }

.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico text { font: 400 11px var(--fonte); fill: var(--texto-3); }
.grafico .eixo-x { font: 500 12px var(--fonte-titulo); fill: var(--texto-2); letter-spacing: .1em; }
.grafico .barra { transition: opacity .2s; }
.grafico g.coluna:hover .barra { opacity: .85; }
.grafico .minimo { stroke: rgba(255, 255, 255, .62); stroke-dasharray: 5 5; }
.grafico .rotulo-min { fill: #0b0f0d; font: 500 12px var(--fonte); }

/* ───────── progresso da leitura ───────── */
.leitura { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 18px; padding: 20px 28px; }
.leitura .giro-grande { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(87, 184, 155, .2); border-top-color: var(--verde-2); animation: girar 1s linear infinite; }
.leitura.parada .giro-grande { animation: none; border-color: rgba(232, 169, 77, .5); }
.leitura b { display: block; font: 400 17px var(--fonte-titulo); letter-spacing: .02em; }
.leitura small { color: var(--texto-2); }
.trilho { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); margin-top: 10px; overflow: hidden; }
.trilho span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde-profundo), var(--verde-2)); transition: width .6s var(--ease); }

/* ───────── painel dos blocos de critérios (o "Daily Timeline" do modelo) ───────── */
.painel-blocos { margin-top: 22px; padding: 34px 38px 26px; border-radius: 46px; border: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, #1A1D1C, #131615); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 40px 80px -50px #000; }
.painel-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-bottom: 28px; }
.painel-cab h2 { margin: 0; font: 300 30px var(--fonte-titulo); letter-spacing: .01em; }
.painel-cab .sep { width: 1px; height: 22px; background: var(--linha); }
.painel-cab .info { color: var(--texto-2); font-size: 14px; }
.link-sublinhado { margin-left: auto; padding: 0 0 2px; border: 0; border-bottom: 1px solid #fff; background: none; color: #fff; font: 400 15px var(--fonte); }
.link-sublinhado:hover { color: var(--verde-2); border-color: var(--verde-2); }
.grade-blocos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
/* cada critério: a letra e a barra de preenchimento (o bloco todo é um atalho para a Matriz filtrada) */
.bloco { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .07); text-align: left; color: inherit; cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: transform .2s var(--ease), border-color .2s, background .2s; }
.bloco:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .2); background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .035)); }
.bloco:focus-visible { outline: 2px solid var(--verde-2); outline-offset: 2px; }
.bloco-corpo { flex: 1; min-width: 0; }
.bloco-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bloco-linha h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.letra { position: relative; }
.letra .ponto-notif { position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; }
.letra { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(87, 184, 155, .5); background: rgba(87, 184, 155, .1); font: 300 24px var(--fonte-titulo); color: var(--verde-2); }
.bloco.atingiu .letra { background: var(--verde); color: #04110c; border-color: transparent; box-shadow: 0 0 24px -4px rgba(87, 184, 155, .8); }
.bloco h3 { font: 400 15px/1.35 var(--fonte-titulo); letter-spacing: .09em; text-transform: uppercase; }
.bloco-pontos { margin-left: auto; text-align: right; white-space: nowrap; font: 300 22px/1 var(--fonte-titulo); }
.regua { position: relative; height: 7px; margin: 9px 0 0; border-radius: 99px; background: rgba(255, 255, 255, .08); }
.regua .atual, .regua .pot { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; }
.regua .pot { background: repeating-linear-gradient(135deg, rgba(87, 184, 155, .5) 0 4px, rgba(87, 184, 155, .14) 4px 8px); }
.regua .atual { background: linear-gradient(90deg, var(--verde-profundo), var(--verde-2)); box-shadow: 0 0 14px rgba(116, 199, 174, .45); }
.regua .marca-min { position: absolute; top: -5px; bottom: -5px; width: 2px; background: rgba(255, 255, 255, .75); border-radius: 2px; }
.ponto-notif { width: 10px; height: 10px; border-radius: 50%; background: var(--verde-2); box-shadow: 0 0 0 0 rgba(116, 199, 174, .7); animation: pulso 2s infinite; justify-self: center; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(116, 199, 174, .6); } 70% { box-shadow: 0 0 0 9px rgba(116, 199, 174, 0); } 100% { box-shadow: 0 0 0 0 rgba(116, 199, 174, 0); } }

/* ───────── Dashboard, Matriz e Relatórios compactos (feedback: "informações muito grande"): cabeçalho, faixa do município, cartões e blocos ~35% menores ───────── */
@media (min-width: 901px) {
  .topo .saudacao { padding: 14px var(--lado) 12px; gap: 12px 24px; }
  .topo .mensagem { gap: 12px; max-width: 340px; }
  .topo .icone-vidro { width: 44px; height: 44px; border-radius: 14px; }
  .topo .icone-vidro svg { width: 20px; height: 20px; }
  .topo .mensagem b { font-size: 15.5px; }
  .topo .mensagem span { margin-top: 2px; font-size: 12.5px; line-height: 1.4; }
  .topo .acoes-saudacao { gap: 10px 18px; }
  .topo .btn-circulo { gap: 9px; font-size: 13px; }
  .topo .btn-circulo i { width: 32px; height: 32px; }
  .topo .btn-circulo i svg { width: 16px; height: 16px; }
  .topo .acoes-saudacao .btn { height: 38px; padding: 0 20px; font-size: 10.5px; }
  .topo .contexto { gap: 14px; padding: 10px 0; }
  .topo .tile-data { width: 48px; height: 48px; border-radius: 15px; }
  .topo .tile-data b { font-size: 19px; }
  .topo .tile-data small { font-size: 10.5px; }
  .topo .contexto-texto { gap: 2px 14px; font-size: clamp(16px, 1.35vw, 19px); }
  .topo .contexto-texto .mun svg { width: 15px; height: 15px; }
  .topo .contexto-texto small { font-size: 12.5px; }
  .topo .setas { gap: 8px; }
  .topo .btn-seta { width: 40px; height: 34px; border-radius: 12px; }
  .topo .btn-seta svg { width: 16px; height: 16px; }

  .principal[data-pagina="dashboard"] .conteudo-pagina { padding-top: 16px; }
  .principal[data-pagina="dashboard"] .cartao { border-radius: 24px; }
  .principal[data-pagina="dashboard"] .cartao.padding { padding: 16px 20px 18px; }
  .principal[data-pagina="dashboard"] .grade-cartoes { gap: 14px; }
  .principal[data-pagina="dashboard"] .grade-cartoes + .grade-cartoes { margin-top: 14px; }
  .principal[data-pagina="dashboard"] .cartao-titulo { font-size: 18px; }
  .principal[data-pagina="dashboard"] .cartao-cabeca { margin-bottom: 8px; gap: 8px 14px; }
  .principal[data-pagina="dashboard"] .chip-info { height: 26px; padding: 0 12px; font-size: 12px; }
  .principal[data-pagina="dashboard"] .pill { height: 24px; font-size: 11.5px; }
  .principal[data-pagina="dashboard"] .kpi { min-height: 150px; padding: 16px 20px; }
  .principal[data-pagina="dashboard"] .kpi .kpi-rotulo { font-size: 16px; }
  .principal[data-pagina="dashboard"] .kpi .kpi-numero { font-size: clamp(36px, 3.3vw, 48px); }
  .principal[data-pagina="dashboard"] .kpi .kpi-nota { font-size: 12px; max-width: 12em; }
  .principal[data-pagina="dashboard"] .kpi .kpi-nota small { margin-top: 3px; font-size: 11px; }
  .principal[data-pagina="dashboard"] .kpi.luz::before { background: conic-gradient(from 0deg at calc(100% - 32px) 28px, transparent 0 200deg, var(--brilho, rgba(87, 184, 155, .92)) 211deg 239deg, transparent 250deg 360deg);
    filter: blur(11px); -webkit-mask-image: radial-gradient(circle at calc(100% - 32px) 28px, #000 0, #000 24%, transparent 52%); mask-image: radial-gradient(circle at calc(100% - 32px) 28px, #000 0, #000 24%, transparent 52%); }
  .principal[data-pagina="dashboard"] .kpi.luz::after { width: 100px; height: 100px; right: -20px; top: -24px; }
  .principal[data-pagina="dashboard"] .btn-luz { top: 12px; right: 16px; width: 30px; height: 30px; box-shadow: 0 0 18px rgba(255, 255, 255, .7); }
  .principal[data-pagina="dashboard"] .btn-luz svg { width: 14px; height: 14px; }
  .principal[data-pagina="dashboard"] .barra-status { height: 12px; }
  .principal[data-pagina="dashboard"] .legenda { margin-top: 8px; gap: 0 18px; }
  .principal[data-pagina="dashboard"] .legenda button { padding: 3px 8px; font-size: 12.5px; }
  .principal[data-pagina="dashboard"] .legenda b { font-size: 15px; }
  .principal[data-pagina="dashboard"] .leitura { margin-bottom: 14px; padding: 14px 20px; }

  .principal[data-pagina="dashboard"] .painel-blocos { margin-top: 16px; padding: 20px 26px 16px; border-radius: 28px; }
  .principal[data-pagina="dashboard"] .painel-cab { margin-bottom: 16px; gap: 8px 16px; }
  .principal[data-pagina="dashboard"] .painel-cab h2 { font-size: 21px; }
  .principal[data-pagina="dashboard"] .painel-cab .info { font-size: 12.5px; }
  .principal[data-pagina="dashboard"] .grade-blocos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
  .principal[data-pagina="dashboard"] .bloco { gap: 12px; padding: 10px 14px 11px 10px; border-radius: 16px; }
  .principal[data-pagina="dashboard"] .letra { width: 36px; height: 36px; font-size: 17px; }
  .principal[data-pagina="dashboard"] .bloco h3 { font-size: 11.5px; letter-spacing: .07em; }
  .principal[data-pagina="dashboard"] .bloco-pontos { font-size: 18px; }
  .principal[data-pagina="dashboard"] .regua { height: 6px; margin-top: 8px; }
  .principal[data-pagina="dashboard"] .link-sublinhado { font-size: 13px; }
}

/* ───────── Matriz ───────── */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: transparent; color: var(--texto-2); font-size: 12.5px; }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-3)); }
.chip b { font-weight: 500; color: var(--texto-3); }
.chip:hover { background: var(--vidro-2); color: var(--texto); }
.chip[aria-pressed="true"] { background: rgba(87,184,155,.15); border-color: rgba(87,184,155,.45); color: #fff; }
.busca { margin-left: auto; position: relative; }
.busca input { height: 38px; width: min(280px, 100%); padding: 0 14px 0 38px; border-radius: 999px; border: 1px solid var(--linha); background: var(--vidro); }
.busca svg { position: absolute; left: 13px; top: 10px; width: 17px; height: 17px; color: var(--texto-3); }
.aviso-propostas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 20px; padding: 16px 22px; border-radius: var(--r-md); background: linear-gradient(100deg, rgba(87,184,155,.18), rgba(87,184,155,.05)); border: 1px solid rgba(87,184,155,.4); }
.aviso-propostas .ponto-notif { flex: none; }
.aviso-propostas p { margin: 0; flex: 1; min-width: 240px; }

.matriz-grupo { margin-bottom: 22px; overflow: visible; }
.grupo-cabeca { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 16px 22px; background: rgba(13,17,16,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); border-radius: var(--r) var(--r) 0 0; }
.grupo-cabeca h3 { font: 400 15px var(--fonte-titulo); letter-spacing: .09em; text-transform: uppercase; }
.grupo-cabeca .letra { width: 36px; height: 36px; font-size: 19px; }
.grupo-cabeca small { margin-left: auto; color: var(--texto-2); white-space: nowrap; }
.tabela-cab, .tabela-linha { display: grid; grid-template-columns: 26px 62px minmax(0, 1fr) 210px 120px 112px; gap: 14px; align-items: center; padding: 0 22px; }
.tabela-cab { height: 38px; font: 500 10px var(--fonte); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-3); }
.tabela-linha { width: 100%; min-height: 66px; padding-top: 11px; padding-bottom: 11px; border: 0; border-top: 1px solid var(--linha-2); background: transparent; text-align: left; transition: background .15s; }
.tabela-linha:hover { background: rgba(255,255,255,.04); }
.tabela-linha.aguardando { background: linear-gradient(90deg, rgba(87,184,155,.1), transparent 55%); }
.tabela-linha .cod { font: 500 14px var(--fonte-titulo); letter-spacing: .08em; }
.tabela-linha .req { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--texto); font-size: 13px; line-height: 1.45; }
.tabela-linha .req small { display: block; margin-top: 3px; color: var(--texto-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela-linha .pts { font: 300 18px var(--fonte-titulo); }
.tabela-linha .pts small { color: var(--texto-3); font-size: 12px; }
.tabela-linha .quando { color: var(--texto-3); font-size: 12px; }
.vazio { padding: 70px 24px; text-align: center; color: var(--texto-2); }
.vazio h3 { margin: 0 0 8px; font: 300 26px var(--fonte-titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--texto); }

/* ───────── janela (item da Matriz) ───────── */
.fundo-janela { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: clamp(12px, 4vh, 44px) 14px; overflow-y: auto; background: rgba(4, 7, 6, .72); backdrop-filter: blur(8px); animation: surgir .2s var(--ease); }
@keyframes surgir { from { opacity: 0; } }
.fundo-janela > .janela { margin: auto; }          /* janela baixa fica no meio da tela; a alta (que passa da tela) começa no topo e rola */
.janela { position: relative; width: min(1040px, 100%); border-radius: 28px; border: 1px solid var(--linha); background: linear-gradient(170deg, #121816, #0B0F0E); box-shadow: 0 50px 120px -30px #000; animation: subir .3s var(--ease); }
@keyframes subir { from { opacity: 0; transform: translateY(18px) scale(.985); } }
.janela.estreita { width: min(500px, 100%); border-radius: 22px; }
.janela.estreita.media { width: min(580px, 100%); }
/* janelas de formulário (estreitas) compactas: cabeçalho, campos, botões e textos menores */
.janela.estreita .janela-cabeca { gap: 12px; padding: 16px 22px 12px; }
.janela.estreita .janela-cabeca .rotulo { font-size: 10px; }
.janela.estreita .janela-cabeca h2 { margin-top: 3px; font-size: 18px; line-height: 1.3; }
.janela.estreita .janela-cabeca .fechar { width: 32px; height: 32px; }
.janela.estreita .janela-cabeca .fechar svg { width: 16px; height: 16px; }
.janela.estreita .janela-corpo { padding: 16px 22px 14px; }
.janela.estreita .janela-rodape { gap: 8px; padding: 12px 22px; }
.janela.estreita .btn { height: 36px; padding: 0 18px; font-size: 10.5px; }
.janela.estreita .btn.pequeno { height: 30px; padding: 0 12px; font-size: 10px; }
.janela.estreita .btn svg { width: 14px; height: 14px; }
.janela.estreita .campo { margin-bottom: 12px; }
.janela.estreita .campo span { margin-bottom: 5px; font-size: 10px; letter-spacing: .16em; }
.janela.estreita .campo input, .janela.estreita .campo select, .janela.estreita .campo .sel-botao { height: 38px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.janela.estreita .campo small { margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
.janela.estreita .campo-senha .btn { height: 38px; }
.janela.estreita .erro-form { margin-bottom: 12px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; }
/* edição manual de um item da Matriz */
.edicao-item { display: grid; gap: 4px; }
.faixa-edicao { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(87, 184, 155, .4); background: rgba(87, 184, 155, .08); color: var(--texto-2); font-size: 12.5px; line-height: 1.5; }
.faixa-edicao svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--verde-2); }
.faixa-edicao p { margin: 0; } .faixa-edicao b { color: var(--texto); font-weight: 500; }
.par-pontos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.par-pontos span { color: var(--texto-3); font-size: 12px; text-transform: none; letter-spacing: 0; margin: 0; }
.edicao-item textarea { width: 100%; min-height: 44px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); font: 400 13.5px/1.5 var(--fonte); resize: vertical; box-sizing: border-box; }
.edicao-item textarea:focus, .edicao-item input:focus, .edicao-item select:focus { outline: none; border-color: rgba(87, 184, 155, .6); }
.bloco-edicao { margin-top: 14px; }
.cabeca-edicao { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.cabeca-edicao h4 { margin: 0; }
.entradas-edicao { display: grid; gap: 8px; }
.entrada-edicao { padding: 8px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255, 255, 255, .025); display: grid; gap: 6px; }
.entrada-edicao.nova { border-color: rgba(87, 184, 155, .45); background: rgba(87, 184, 155, .05); }
.entrada-edicao.resolvido textarea { opacity: .6; text-decoration: line-through; }
.entrada-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.entrada-extra input[type="text"] { flex: 1 1 140px; min-width: 0; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); font-size: 12.5px; }
.marcar-resolvido { display: inline-flex; align-items: center; gap: 6px; color: var(--texto-2); font-size: 12.5px; cursor: pointer; }
.marcar-resolvido input { width: 16px; height: 16px; accent-color: var(--verde); }
.origem-manual { color: var(--texto-3); font-size: 11px; }
.vazio-edicao { margin: 4px 0; color: var(--texto-3); font-size: 12.5px; }
.resultados-doc { display: grid; gap: 4px; margin-top: 6px; }
.resultado-doc { display: grid; gap: 1px; padding: 7px 10px; text-align: left; border-radius: 10px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); cursor: pointer; }
.resultado-doc:hover { border-color: rgba(87, 184, 155, .5); }
.resultado-doc small, .doc-escolhido small { color: var(--texto-3); font-size: 11px; word-break: break-all; }
.docs-escolhidos { display: grid; gap: 6px; margin-top: 8px; }
.doc-escolhido { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(87, 184, 155, .45); background: rgba(87, 184, 155, .05); }
.doc-escolhido b { display: block; font-weight: 500; font-size: 13px; }
.dica-doc { display: block; margin-top: 8px; color: var(--texto-3); font-size: 11.5px; }
.selo-manual { margin-left: 8px; vertical-align: middle; border-color: rgba(118, 196, 218, .5); color: #9DD7E6; }
.historico small { display: block; margin-top: 2px; color: var(--texto-3); font-size: 11.5px; }
.historico .motivo-hist { font-style: italic; }
.edicao-item .campo input[type="search"] { width: 100%; }

/* janela "Gerar relatório": dois modelos para escolher (cartões de opção) */
.opcoes-relatorio { display: grid; gap: 10px; }
.opcao-relatorio { position: relative; display: flex; align-items: flex-start; gap: 13px; width: 100%; padding: 14px 15px; text-align: left; border-radius: 16px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto); cursor: pointer; transition: border-color .22s var(--ease), background .22s var(--ease), opacity .2s; }
.opcao-relatorio:hover { border-color: rgba(255, 255, 255, .22); background: var(--vidro-2); }
.opcao-relatorio.escolhido { border-color: rgba(87, 184, 155, .6); background: rgba(87, 184, 155, .09); }
.opcao-relatorio:focus-visible { outline: 2px solid rgba(87, 184, 155, .7); outline-offset: 2px; }
.opcao-relatorio .marca { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .34); color: transparent; transition: background .2s var(--ease), border-color .2s, color .2s; }
.opcao-relatorio .marca svg { width: 12px; height: 12px; stroke-width: 2.6; }
.opcao-relatorio.escolhido .marca { background: var(--verde); border-color: var(--verde); color: #06130e; }
.opcao-relatorio b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 500; }
.opcao-relatorio .selo { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(87, 184, 155, .45); color: var(--verde-2); font: 500 9.5px var(--fonte); letter-spacing: .1em; text-transform: uppercase; }
.opcao-relatorio p { margin: 5px 0 0; color: var(--texto-2); font-size: 12.5px; line-height: 1.5; }
.opcao-relatorio .estado { display: block; margin-top: 7px; color: var(--texto-3); font-size: 11.5px; }
.opcao-relatorio.bloqueado .estado { color: #ECAA4D; font-weight: 500; font-variant-numeric: tabular-nums; }
.opcao-relatorio.bloqueado { opacity: .82; }
.opcoes-relatorio + .nota-agenda { margin-top: 12px; }
/* lista de relatórios: a lixeira (só o administrador) aparece ao passar o mouse no cartão; a janela de confirmação */
.item-rel { position: relative; }
.item-rel[hidden] { display: none; }
.item-rel > .cartao-rel { height: 100%; }
.btn-apagar-rel { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--texto-3); opacity: 0; cursor: pointer; transition: opacity .2s var(--ease), color .2s, background .2s, border-color .2s; }
.btn-apagar-rel svg { width: 16px; height: 16px; }
.item-rel:hover .btn-apagar-rel, .btn-apagar-rel:focus-visible { opacity: 1; }
.btn-apagar-rel:hover, .btn-apagar-rel:focus-visible { color: #F0907A; background: rgba(226, 125, 95, .12); border-color: rgba(226, 125, 95, .4); }
@media (hover: none) { .btn-apagar-rel { opacity: .8; } }
.lista-apagar { display: grid; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.lista-apagar li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linha); background: var(--vidro); font-size: 13px; }
.lista-apagar li b { font-weight: 500; } .lista-apagar li span { color: var(--texto-3); }
.lista-apagar li.mais { justify-content: center; color: var(--texto-3); }
/* lista de relatórios: filtro por modelo e o selo do modelo em cada cartão */
.filtro-relatorios { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.filtro-relatorios .ficha { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--vidro); color: var(--texto-2); font-size: 12.5px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.filtro-relatorios .ficha b { font-weight: 500; color: var(--texto-3); }
.filtro-relatorios .ficha:hover { color: var(--texto); border-color: rgba(255, 255, 255, .22); }
.filtro-relatorios .ficha.ativa { color: var(--texto); border-color: rgba(87, 184, 155, .55); background: rgba(87, 184, 155, .1); }
.filtro-relatorios .ficha.ativa b { color: var(--verde-2); }
.cartao-rel .pilulas { display: flex; flex-wrap: wrap; gap: 6px; }
.pill.tipo-semanal { border-color: rgba(118, 196, 218, .5); color: #9DD7E6; }
.pill.tipo-semanal i { background: #76C4DA; }

/* caixinha de marcar do app (a nativa fica escondida, mas continua sendo ela que guarda o valor e recebe o teclado) */
.opcao-marcar { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--vidro); cursor: pointer; transition: border-color .22s var(--ease), background .22s var(--ease); }
.opcao-marcar:hover { border-color: rgba(255, 255, 255, .2); background: var(--vidro-2); }
.opcao-marcar:has(input:checked) { border-color: rgba(87, 184, 155, .55); background: rgba(87, 184, 155, .09); }
.opcao-marcar input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opcao-marcar .caixa-marca { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .34); color: transparent; transition: background .2s var(--ease), border-color .2s, color .2s, transform .2s var(--ease); }
.opcao-marcar .caixa-marca svg { width: 13px; height: 13px; stroke-width: 2.6; }
.opcao-marcar:hover .caixa-marca { border-color: rgba(255, 255, 255, .55); }
.opcao-marcar input:checked + .caixa-marca { background: var(--verde); border-color: var(--verde); color: #06130e; transform: scale(1.06); }
.opcao-marcar input:focus-visible + .caixa-marca { box-shadow: 0 0 0 3px rgba(87, 184, 155, .4); }
.opcao-marcar b { display: block; color: var(--texto); font-size: 14px; font-weight: 500; line-height: 1.35; }
.opcao-marcar small { display: block; margin-top: 3px; color: var(--texto-3); font-size: 12px; line-height: 1.45; }
.janela.estreita .nota-agenda { margin-top: 4px; padding: 9px 13px; border-radius: 14px; font-size: 12px; line-height: 1.5; }
.janela.estreita .texto-suave { font-size: 13px; }
.janela.estreita .dados-conta > div { padding: 7px 0; }
.janela.estreita .bloco-senha { margin-top: 6px; padding-top: 14px; }
.janela-cabeca { display: flex; align-items: flex-start; gap: 16px; padding: 26px 30px 20px; border-bottom: 1px solid var(--linha-2); }
.janela-cabeca h2 { margin: 6px 0 0; font: 400 21px/1.35 var(--fonte-titulo); letter-spacing: .01em; }
.janela-cabeca .fechar { margin-left: auto; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linha); background: transparent; display: grid; place-items: center; }
.janela-cabeca .fechar:hover { background: var(--vidro-2); }
.janela-cabeca .fechar svg { width: 18px; height: 18px; }
.janela-corpo { padding: 22px 30px 28px; }
.janela-rodape { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 18px 30px; border-top: 1px solid var(--linha-2); background: rgba(11,15,14,.94); backdrop-filter: blur(8px); border-radius: 0 0 28px 28px; }
.janela-rodape .texto { margin-right: auto; color: var(--texto-2); font-size: 12.5px; }
.meta-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.duas-colunas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; }
.bloco-texto h4 { margin: 0 0 10px; font: 500 10.5px var(--fonte); letter-spacing: .2em; text-transform: uppercase; color: var(--verde); }
.bloco-texto + .bloco-texto { margin-top: 22px; }
.bloco-texto p { margin: 0; color: var(--texto-2); }
.docs-exigidos { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.docs-exigidos li { position: relative; padding-left: 20px; color: var(--texto-2); font-size: 13px; }
.docs-exigidos li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3); }
.lista-info { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lista-info li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 13.5px; }
.lista-info li svg { width: 17px; height: 17px; margin-top: 2px; }
.lista-info.ok svg { color: var(--verde); } .lista-info.pend svg { color: var(--st-RELATORIO_PENDENTE); } .lista-info.aten svg { color: var(--st-DOCUMENTACAO_PENDENTE); } .lista-info.acao svg { color: var(--st-VALIDACAO); }
.lista-info li.resolvido { color: var(--texto-3); }
.lista-info li.resolvido .t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.lista-info small { display: block; color: var(--texto-3); font-size: 12px; }
.docs-lidos { display: flex; flex-direction: column; gap: 6px; }
.docs-lidos div { display: flex; gap: 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--vidro); font-size: 12.5px; }
.docs-lidos small { color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docs-lidos b { font-weight: 500; flex: none; }

.faixa-proposta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 22px; padding: 14px 18px; border-radius: var(--r-md); background: rgba(87,184,155,.12); border: 1px solid rgba(87,184,155,.4); }
.faixa-proposta p { margin: 0; flex: 1; min-width: 220px; }
.abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--vidro); border: 1px solid var(--linha-2); margin-bottom: 20px; }
.abas button { height: 34px; padding: 0 18px; border-radius: 999px; border: 0; background: transparent; color: var(--texto-2); font: 500 11px var(--fonte); letter-spacing: .13em; text-transform: uppercase; }
.abas button[aria-selected="true"] { background: rgba(87,184,155,.2); color: #fff; }

.diff { display: flex; flex-direction: column; gap: 14px; }
.diff-bloco { padding: 16px 18px; border-radius: var(--r-md); background: var(--vidro); border: 1px solid var(--linha-2); }
.diff-bloco h4 { margin: 0 0 12px; font: 500 10.5px var(--fonte); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-2); }
.de-para { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.de-para .seta { color: var(--texto-3); }
.de-para del { color: var(--texto-3); text-decoration-color: rgba(255,255,255,.3); }
.mudanca { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--linha-2); font-size: 13.5px; }
.mudanca:first-of-type { border-top: 0; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font: 600 9.5px var(--fonte); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.etiqueta.novo { background: rgba(87,184,155,.18); color: var(--verde-2); }
.etiqueta.reescrito { background: rgba(232,169,77,.16); color: #F1C987; }
.etiqueta.resolvido { background: rgba(122,167,240,.16); color: #A9C6F5; }
.etiqueta.reaberto { background: rgba(226,125,95,.16); color: #F3A88F; }
.mudanca del { display: block; color: var(--texto-3); margin-bottom: 3px; text-decoration-color: rgba(255,255,255,.28); }
.mudanca ins { text-decoration: none; }
.mudanca small { display: block; color: var(--texto-3); font-size: 12px; }
.nada-mudou { color: var(--texto-3); font-size: 13px; margin: 0; }
.campo-motivo { width: 100%; min-height: 76px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--linha); background: var(--vidro); resize: vertical; }
.historico { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--texto-2); }
.historico li { display: flex; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--vidro); }
.historico b { font: 500 12px var(--fonte-titulo); letter-spacing: .08em; color: var(--verde-2); min-width: 30px; }

/* ───────── relatórios ───────── */
.lista-relatorios { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.cartao-rel { padding: 22px; display: flex; flex-direction: column; gap: 14px; text-align: left; width: 100%; border: 1px solid var(--linha); transition: transform .25s var(--ease), border-color .25s; }
.cartao-rel:hover { transform: translateY(-3px); border-color: rgba(87,184,155,.5); }
.cartao-rel .versao { font: 300 38px/1 var(--fonte-titulo); }
.cartao-rel .versao small { font-size: 13px; letter-spacing: .15em; color: var(--texto-3); text-transform: uppercase; margin-left: 8px; }
.cartao-rel p { margin: 0; color: var(--texto-2); font-size: 13px; }
.barra-leitor { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: -8px 0 22px; padding: 12px 0; background: linear-gradient(180deg, #0A0D0C 70%, transparent); }
.barra-leitor .texto { margin-right: auto; color: var(--texto-2); font-size: 13px; }
.moldura-folha { padding: clamp(10px, 3vw, 36px); border-radius: var(--r); background: #1a1f1d; border: 1px solid var(--linha); overflow-x: auto; }

/* ───────── login, avisos ───────── */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login { width: min(400px, 100%); padding: 26px 26px 22px; border-radius: 24px; }
.login .marca { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 18px; }
.login .marca .logo-verde { width: 32px; height: 32px; flex: none; }
.login .marca b { display: block; font: 300 17px/1 var(--fonte-titulo); letter-spacing: .34em; }
.login .marca small { display: block; margin-top: 4px; font: 500 9px/1 var(--fonte); letter-spacing: .2em; color: var(--verde); text-transform: uppercase; }
.login h1 { margin: 0 0 4px; font: 300 24px/1.2 var(--fonte-titulo); letter-spacing: .04em; text-transform: uppercase; }
.login > p { margin: 0 0 14px; color: var(--texto-2); font-size: 13px; line-height: 1.5; }
.login > .erro-form { margin: 0 0 12px; padding: 8px 12px; font-size: 12.5px; }
.login .campo { margin-bottom: 10px; }
.login .campo span { margin-bottom: 5px; font-size: 10px; letter-spacing: .16em; }
.login .campo input, .login .campo select, .login .campo .sel-botao { height: 38px; padding: 0 12px; border-radius: 12px; font-size: 14px; }
.login .campo small { margin-top: 4px; font-size: 11.5px; line-height: 1.45; }
.login .btn { height: 40px; padding: 0 18px; font-size: 10.5px; }
.login .btn svg { width: 14px; height: 14px; }
.login .link-registro { margin-top: 6px; padding: 6px; font-size: 12.5px; }
.login .grupo-endereco { padding: 8px 10px 0; border-radius: 12px; }
.login .rotulo-grupo { margin-bottom: 6px; }
.login .cep-status { min-height: 15px; margin: -4px 0 6px; font-size: 11.5px; }
.login .cep-status:empty { min-height: 0; margin: 0; }
.login .nota-agenda { margin: 0 0 12px; padding: 8px 12px; border-radius: 12px; font-size: 12px; }
.login .grade-form-2 { gap: 0 10px; }
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; margin-bottom: 7px; font: 500 10.5px var(--fonte); letter-spacing: .18em; text-transform: uppercase; color: var(--texto-2); }
.campo input, .campo select, .campo .sel-botao { width: 100%; height: 46px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--linha); background: rgba(255,255,255,.04); }
.campo input, .campo textarea, .campo-motivo { transition: border-color .25s var(--ease), background .25s; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .campo-motivo:focus, .sel-botao:focus-visible, .sel-botao[aria-expanded="true"] {
  outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(87,184,155,.2);
  animation: acender-campo .4s var(--ease) both, brilho-campo 2.6s ease-in-out .4s infinite;           /* o brilho abre e depois respira devagar enquanto o campo está em uso */
}
@keyframes acender-campo { from { box-shadow: 0 0 0 0 rgba(87,184,155,0), 0 0 0 0 rgba(87,184,155,0); } }
@keyframes brilho-campo {
  0%, 100% { box-shadow: 0 0 0 3px rgba(87,184,155,.18), 0 0 12px rgba(87,184,155,.10); }
  50% { box-shadow: 0 0 0 4px rgba(87,184,155,.30), 0 0 24px rgba(87,184,155,.32); }
}

/* ---------- seletor (lista de escolha): ver public/js/seletor.js ---------- */
.sel { position: relative; width: 100%; }
.sel-nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.campo .sel-botao { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 12px; color: var(--texto); font-size: 14px; text-align: left; cursor: pointer; transition: border-color .25s var(--ease), background .25s; }
.sel-botao:hover:not(:disabled) { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); }
.sel-botao:disabled { opacity: .55; cursor: not-allowed; }
.sel-texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-texto.sel-vazio { color: var(--texto-3); }
.sel-seta { width: 16px; height: 16px; flex: none; color: var(--texto-2); transition: transform .28s var(--ease), color .2s; }
.sel-botao[aria-expanded="true"] .sel-seta { transform: rotate(180deg); color: var(--verde-2); }
.sel-lista { position: fixed; z-index: 70; box-sizing: border-box; padding: 6px; overflow-y: auto; scrollbar-width: thin; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(17, 21, 20, .98); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -18px #000, 0 0 0 1px rgba(87, 184, 155, .12); transform-origin: top center; animation: sel-abre .2s var(--ease) both; }
.sel-lista[data-lado="cima"] { transform-origin: bottom center; animation-name: sel-abre-cima; }
.sel-lista.fechando { animation: sel-fecha .14s ease-in both; pointer-events: none; }
.sel-opcao { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 10px; color: var(--texto-2); font-size: 14px; cursor: pointer; animation: sel-item .22s var(--ease) both; animation-delay: calc(var(--i, 0) * 16ms); }
.sel-opcao.ativo { background: rgba(255, 255, 255, .08); color: #fff; }
.sel-opcao[aria-selected="true"] { color: var(--verde-2); }
.sel-opcao svg { width: 15px; height: 15px; flex: none; color: var(--verde-2); }
.sel-opcao[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
@keyframes sel-abre { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
@keyframes sel-abre-cima { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes sel-fecha { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes sel-item { from { opacity: 0; transform: translateX(-6px); } }
.hora-linha .sel { flex: 1; min-width: 0; }
/* se algum <select> ficar sem o seletor (não deveria), a seta nativa ao menos não encosta na borda */
.campo select:not(.sel-nativo) { appearance: none; -webkit-appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9B3AD' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); }
@media (prefers-reduced-motion: reduce) { .campo input:focus, .campo textarea:focus, .campo-motivo:focus, .sel-botao:focus-visible, .sel-botao[aria-expanded="true"] { animation: none; } }
.campo small { display: block; margin-top: 6px; color: var(--texto-3); font-size: 12px; }
.erro-form { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: rgba(226,125,95,.12); border: 1px solid rgba(226,125,95,.4); color: #F6B7A3; font-size: 13px; }
.grade-form { display: grid; grid-template-columns: 1fr 120px; gap: 0 14px; }
.grade-form.grade-form-mun { grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr); }
.aviso-lista { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px 0 12px; }
.aviso-lista small { color: var(--texto-3); font-size: 11.5px; line-height: 1.45; }
.mun-previa { position: relative; height: 110px; margin: 0 0 10px; overflow: hidden; border-radius: 14px; border: 1px solid var(--linha-2); background: var(--vidro) var(--foto) center / cover; animation: sel-item .3s var(--ease) both; }
.mun-previa small { position: absolute; inset: auto 0 0 0; margin: 0; padding: 16px 10px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: rgba(255, 255, 255, .85); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast { padding: 12px 20px; border-radius: 999px; background: #E9F3EF; color: #07120d; font-size: 13.5px; font-weight: 500; box-shadow: 0 16px 40px -10px #000; animation: subir .3s var(--ease); }
.toast.erro { background: #F6D6CC; }
.carregando { display: grid; place-items: center; min-height: 50vh; color: var(--texto-2); gap: 14px; }

/* ───────── responsivo ───────── */
@media (max-width: 1240px) {
  .grade-cartoes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grade-cartoes > .cartao:nth-child(3) { grid-column: 1 / -1; }
  .tabela-cab, .tabela-linha { grid-template-columns: 26px 58px minmax(0, 1fr) 190px 100px; }
  .tabela-cab .c-quando, .tabela-linha .quando { display: none; }
}
@media (max-width: 1040px) {
  .grade-blocos { grid-template-columns: 1fr; }
  .duas-colunas { grid-template-columns: 1fr; }
  .cabeca-app, .saudacao { padding-left: 28px; padding-right: 28px; }
  .contexto { margin: 0 28px; } .conteudo-pagina { padding: 24px 28px 0; } .principal > .faixa-demo { margin: 20px 28px 0; }
  .painel-blocos { padding: 28px 24px 22px; }
}
@media (max-width: 1040px) { .linha-usuario { grid-template-columns: 36px minmax(0, 1fr) minmax(120px, 170px) 104px auto; } .linha-usuario .acesso { grid-column: 2 / -1; grid-row: 2; } }
@media (max-width: 900px) {
  .grade-conta { grid-template-columns: 1fr; }
  .cabeca-app { flex-wrap: wrap; row-gap: 6px; padding-top: 20px; }
  .menu { order: 3; flex: 1 0 100%; justify-content: space-around; gap: 6px; border-top: 1px solid var(--linha-2); }
  .menu a { height: 52px; }
  .banner-hero { margin-top: 0; height: 160px; align-items: flex-start; }
  .banner-copy { padding-top: 16px; }
  .banner-pagina { position: absolute; right: 0; bottom: 40px; max-width: 80%; margin: 0 16px 0 0; padding: 8px 16px 9px; border-radius: 14px; }          /* no celular o título da guia vai para o canto de baixo, à direita (acima da faixa que esmaece) */
  .banner-pagina .pequeno { display: none; }
  .usuario-chip { min-width: 0; padding: 0 8px; } .usuario-chip .nome, .usuario-chip > svg { display: none; }
  .saudacao { padding-top: 30px; } .mensagem { max-width: none; } .saudacao .divisor { display: none; }
  .acoes-saudacao { flex: 1 1 100%; justify-content: flex-start; }
  .contexto-texto { flex: 1 1 180px; }
  .tabela-cab { display: none; }
  .tabela-linha { grid-template-columns: 22px 52px minmax(0, 1fr); row-gap: 8px; }
  .tabela-linha .st, .tabela-linha .pts { grid-column: 3; }
  .tabela-linha .st { order: 4; } .tabela-linha .pts { order: 5; }
  .busca { margin-left: 0; width: 100%; } .busca input { width: 100%; }
}
@media (max-width: 640px) {
  .linha-usuario { grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "av dados edit" ". papel situacao" ". acesso acesso"; padding: 12px 16px; }
  .linha-usuario .avatar-lista { grid-area: av; } .linha-usuario .dados { grid-area: dados; } .linha-usuario .btn { grid-area: edit; }
  .linha-usuario .papel { grid-area: papel; justify-self: start; } .linha-usuario .situacao { grid-area: situacao; justify-self: end; }
  .linha-usuario .acesso { grid-area: acesso; }
  .linha-municipio { grid-template-columns: 36px minmax(0, 1fr); } .linha-municipio > :nth-child(n+3) { grid-column: 2; justify-self: start; }
  .dados-conta > div { grid-template-columns: 1fr; gap: 2px; } .grade-form-2, .grade-form-3, .form-agenda, .grade-form.grade-form-mun { grid-template-columns: 1fr; }
  .grade-endereco { grid-template-columns: 1fr 1fr; } .grade-endereco > label:first-child { grid-column: 1 / -1; } .linha-cidade { grid-template-columns: 1fr 1fr; } .linha-cidade > label:last-child { grid-column: 1 / -1; } .form-agenda .campo-salvar .btn { width: 100%; }
  .perfil-topo { align-items: flex-start; } .resumo-agenda, .resumo-agenda.resumo-3 { grid-template-columns: 1fr; gap: 8px; }
  .cabeca-app, .saudacao { padding-left: 18px; padding-right: 18px; }
  .contexto { margin: 0 18px; flex-wrap: wrap; } .setas { margin-left: 0; flex-basis: 100%; }
  .acoes-saudacao { gap: 14px; } .acoes-saudacao .btn.primario { flex: 1 1 100%; order: 2; } .acoes-saudacao .btn-circulo { order: 1; }
  .conteudo-pagina { padding: 20px 18px 0; } .principal > .faixa-demo { margin: 16px 18px 0; }
  .grade-cartoes { grid-template-columns: 1fr; } .grade-cartoes > .cartao:nth-child(3) { grid-column: auto; }
  .kpi { min-height: 190px; } .kpi, .cartao.padding { padding: 22px; }
  .legenda { grid-template-columns: 1fr; }
  .leitura { grid-template-columns: auto 1fr; } .leitura .btn { grid-column: 1 / -1; }
  .painel-blocos { padding: 24px 16px 18px; border-radius: 32px; }
  .janela-cabeca, .janela-corpo, .janela-rodape { padding-left: 18px; padding-right: 18px; }
}
@media (prefers-reduced-motion: reduce) { .menu-indicador, .menu-indicador * { transition: none !important; animation: none !important; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .banner-bg img { animation: none !important; } .app-caixa::before { animation: none !important; } }