/* Painel da plataforma — sistema visual
   Base: /root/refatoracao_v1/fase4/pesquisa-ux-referencias.md (paleta "Petróleo" para FAI e torre, índigo para o
   Maestro, Inter + Plus Jakarta Sans, 16 px, 44 px de toque, contraste AA conferido).
   Regras: nenhuma cor fora dos tokens; tema claro em :root, escuro pelo sistema (se a pessoa não escolheu) e pela
   escolha explícita; nada de estilo inline (a política de segurança da página proíbe). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fontes/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ tokens: claro */
:root {
  color-scheme: light;
  --fonte: "Inter", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fundo: #F8FAFC;
  --superficie: #FFFFFF;
  --superficie-2: #F1F5F9;
  --superficie-3: #E2E8F0;
  --borda: #E2E8F0;
  --borda-forte: #CBD5E1;
  --borda-campo: #7C8799;
  --texto: #0F172A;
  --texto-2: #475569;
  --texto-3: #64748B;

  --marca: #0D9488;
  --acao: #0F766E;
  --acao-hover: #115E59;
  --sobre-acao: #FFFFFF;
  --realce-fundo: #F0FDFA;
  --realce-texto: #115E59;
  --realce-borda: #99F6E4;
  --foco: #0F766E;
  --link: #0F766E;

  --ok: #166534;       --ok-icone: #16A34A;   --ok-fundo: #F0FDF4;   --ok-borda: #BBF7D0;
  --aviso: #92400E;    --aviso-icone: #B45309; --aviso-fundo: #FFFBEB; --aviso-borda: #FDE68A;
  --erro: #B91C1C;     --erro-solido: #DC2626; --erro-fundo: #FEF2F2;  --erro-borda: #FECACA;
  --info: #1D4ED8;     --info-icone: #2563EB;  --info-fundo: #EFF6FF;  --info-borda: #BFDBFE;
  --neutro: #475569;   --neutro-fundo: #F1F5F9; --neutro-borda: #E2E8F0;

  --lateral-fundo: #FFFFFF;
  --lateral-texto: #334155;
  --lateral-texto-2: #64748B;
  --lateral-borda: #E2E8F0;
  --lateral-hover: #F1F5F9;
  --lateral-ativo-fundo: #F0FDFA;
  --lateral-ativo-texto: #115E59;
  --lateral-ativo-barra: #0F766E;

  --grafico-1: #0F766E;
  --grafico-2: #94A3B8;
  --grafico-grade: #E2E8F0;

  --sombra-1: 0 1px 2px rgb(15 23 42 / .06);
  --sombra-2: 0 2px 8px rgb(15 23 42 / .08), 0 1px 2px rgb(15 23 42 / .06);
  --sombra-3: 0 12px 32px rgb(15 23 42 / .14), 0 2px 6px rgb(15 23 42 / .08);
  --veu: rgb(15 23 42 / .45);

  --r-1: 6px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-cheio: 9999px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 48px;
  --controle: 44px;
  --lateral-largura: 256px;
  --largura-max: 1280px;
  --largura-form: 720px;
  --topo-movel: 56px;
  --barra-baixo: 64px;
  --rapido: 160ms;
  --medio: 240ms;
}

/* Maestro: mesma casa, tom índigo (contraste conferido: 6,3:1 com branco) */
[data-produto="maestro"] {
  --marca: #6366F1;
  --acao: #4F46E5;
  --acao-hover: #4338CA;
  --realce-fundo: #EEF2FF;
  --realce-texto: #3730A3;
  --realce-borda: #C7D2FE;
  --foco: #4F46E5;
  --link: #4338CA;
  --lateral-ativo-fundo: #EEF2FF;
  --lateral-ativo-texto: #3730A3;
  --lateral-ativo-barra: #4F46E5;
  --grafico-1: #4F46E5;
}

/* torre: menu escuro nos dois temas, para nunca ser confundida com o painel de uma empresa */
.torre {
  --lateral-fundo: #0F172A;
  --lateral-texto: #CBD5E1;
  --lateral-texto-2: #94A3B8;
  --lateral-borda: #1E293B;
  --lateral-hover: #1E293B;
  --lateral-ativo-fundo: #134E4A;
  --lateral-ativo-texto: #F0FDFA;
  --lateral-ativo-barra: #2DD4BF;
}

/* ------------------------------------------------------------------ tokens: escuro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #111113; --superficie: #18191B; --superficie-2: #212225; --superficie-3: #2A2C30;
    --borda: #2E3135; --borda-forte: #3A3E44; --borda-campo: #696E77;
    --texto: #EDEEF0; --texto-2: #B0B4BA; --texto-3: #8B8F98;
    --marca: #14B8A6; --acao: #14B8A6; --acao-hover: #2DD4BF; --sobre-acao: #042F2E;
    --realce-fundo: #0D2D2A; --realce-texto: #5EEAD4; --realce-borda: #115E59; --foco: #2DD4BF; --link: #2DD4BF;
    --ok: #4ADE80; --ok-icone: #4ADE80; --ok-fundo: #132D21; --ok-borda: #14532D;
    --aviso: #FBBF24; --aviso-icone: #FBBF24; --aviso-fundo: #302008; --aviso-borda: #713F12;
    --erro: #F87171; --erro-solido: #DC2626; --erro-fundo: #3B1219; --erro-borda: #7F1D1D;
    --info: #60A5FA; --info-icone: #60A5FA; --info-fundo: #0D2847; --info-borda: #1E3A8A;
    --neutro: #B0B4BA; --neutro-fundo: #212225; --neutro-borda: #2E3135;
    --lateral-fundo: #141517; --lateral-texto: #D4D6DA; --lateral-texto-2: #8B8F98; --lateral-borda: #2E3135;
    --lateral-hover: #212225; --lateral-ativo-fundo: #0D2D2A; --lateral-ativo-texto: #5EEAD4; --lateral-ativo-barra: #2DD4BF;
    --grafico-1: #2DD4BF; --grafico-2: #6B7280; --grafico-grade: #2E3135;
    --sombra-1: none; --sombra-2: none; --sombra-3: 0 12px 32px rgb(0 0 0 / .5);
    --veu: rgb(0 0 0 / .6);
  }
  :root:not([data-theme="light"]) [data-produto="maestro"] {
    --marca: #818CF8; --acao: #818CF8; --acao-hover: #A5B4FC; --sobre-acao: #1E1B4B;
    --realce-fundo: #1E1B4B; --realce-texto: #C7D2FE; --realce-borda: #3730A3; --foco: #A5B4FC; --link: #A5B4FC;
    --lateral-ativo-fundo: #1E1B4B; --lateral-ativo-texto: #C7D2FE; --lateral-ativo-barra: #818CF8; --grafico-1: #818CF8;
  }
  :root:not([data-theme="light"]) .torre {
    --lateral-fundo: #0B0C0E; --lateral-borda: #1F2023; --lateral-hover: #1A1B1E;
    --lateral-ativo-fundo: #0D2D2A; --lateral-ativo-texto: #5EEAD4;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #111113; --superficie: #18191B; --superficie-2: #212225; --superficie-3: #2A2C30;
  --borda: #2E3135; --borda-forte: #3A3E44; --borda-campo: #696E77;
  --texto: #EDEEF0; --texto-2: #B0B4BA; --texto-3: #8B8F98;
  --marca: #14B8A6; --acao: #14B8A6; --acao-hover: #2DD4BF; --sobre-acao: #042F2E;
  --realce-fundo: #0D2D2A; --realce-texto: #5EEAD4; --realce-borda: #115E59; --foco: #2DD4BF; --link: #2DD4BF;
  --ok: #4ADE80; --ok-icone: #4ADE80; --ok-fundo: #132D21; --ok-borda: #14532D;
  --aviso: #FBBF24; --aviso-icone: #FBBF24; --aviso-fundo: #302008; --aviso-borda: #713F12;
  --erro: #F87171; --erro-solido: #DC2626; --erro-fundo: #3B1219; --erro-borda: #7F1D1D;
  --info: #60A5FA; --info-icone: #60A5FA; --info-fundo: #0D2847; --info-borda: #1E3A8A;
  --neutro: #B0B4BA; --neutro-fundo: #212225; --neutro-borda: #2E3135;
  --lateral-fundo: #141517; --lateral-texto: #D4D6DA; --lateral-texto-2: #8B8F98; --lateral-borda: #2E3135;
  --lateral-hover: #212225; --lateral-ativo-fundo: #0D2D2A; --lateral-ativo-texto: #5EEAD4; --lateral-ativo-barra: #2DD4BF;
  --grafico-1: #2DD4BF; --grafico-2: #6B7280; --grafico-grade: #2E3135;
  --sombra-1: none; --sombra-2: none; --sombra-3: 0 12px 32px rgb(0 0 0 / .5);
  --veu: rgb(0 0 0 / .6);
}
:root[data-theme="dark"] [data-produto="maestro"] {
  --marca: #818CF8; --acao: #818CF8; --acao-hover: #A5B4FC; --sobre-acao: #1E1B4B;
  --realce-fundo: #1E1B4B; --realce-texto: #C7D2FE; --realce-borda: #3730A3; --foco: #A5B4FC; --link: #A5B4FC;
  --lateral-ativo-fundo: #1E1B4B; --lateral-ativo-texto: #C7D2FE; --lateral-ativo-barra: #818CF8; --grafico-1: #818CF8;
}
:root[data-theme="dark"] .torre {
  --lateral-fundo: #0B0C0E; --lateral-borda: #1F2023; --lateral-hover: #1A1B1E;
  --lateral-ativo-fundo: #0D2D2A; --lateral-ativo-texto: #5EEAD4;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topo-movel) + 16px); }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--texto); margin: 0; text-wrap: balance; letter-spacing: 0; word-spacing: .06em; }
h1 { font-size: 30px; line-height: 36px; font-weight: 700; }
h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
h3 { font-size: 16px; line-height: 24px; font-weight: 700; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--realce-borda); color: var(--texto); }
.num, td.num, .indicador__valor, .tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--fonte-mono); font-size: 13px; }
.muted { color: var(--texto-2); }
.fraco { color: var(--texto-3); }
.pequeno { font-size: 14px; line-height: 20px; }
.legenda { font-size: 12px; line-height: 16px; color: var(--texto-3); }
.forte { font-weight: 600; }
.quebra { overflow-wrap: anywhere; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--acao); color: var(--sobre-acao); padding: 10px 14px; border-radius: var(--r-2); }
.pular:focus { top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

.icone { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icone--p { width: 16px; height: 16px; }
.icone--g { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ casca do aplicativo */
.app { min-height: 100vh; display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--lateral-fundo); color: var(--lateral-texto);
  border-right: 1px solid var(--lateral-borda);
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-4) var(--e-3) var(--e-3);
}
.lateral__marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 8px; color: var(--lateral-texto); text-decoration: none; }
.lateral__marca strong { font-family: var(--fonte-titulo); font-size: 17px; word-spacing: .08em; }
.lateral__marca > div > span { font-size: 12px; color: var(--lateral-texto-2); display: block; line-height: 14px; }
.veu-menu { display: none; }
.marca-simbolo { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--acao); color: var(--sobre-acao); font-family: var(--fonte-titulo); font-weight: 800; font-size: 14px; flex: none; }
.torre .marca-simbolo { background: #14B8A6; color: #042F2E; }
.selo-operador { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #042F2E; background: #5EEAD4; border-radius: var(--r-cheio); padding: 2px 8px; }

/* troca de espaço (empresa / torre / produto) — sem script: <details> */
.espaco { position: relative; }
.espaco > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--r-2); border: 1px solid var(--lateral-borda); min-height: var(--controle);
}
.espaco > summary::-webkit-details-marker { display: none; }
.espaco > summary:hover { background: var(--lateral-hover); }
.espaco__iniciais { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; background: var(--realce-fundo); color: var(--realce-texto); flex: none; }
.torre .espaco__iniciais { background: #134E4A; color: #CCFBF1; }
.espaco__nome { min-width: 0; flex: 1; line-height: 18px; }
.espaco__nome strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--lateral-texto); }
.espaco__nome span { display: block; font-size: 12px; color: var(--lateral-texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.espaco__lista {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda); border-radius: var(--r-3);
  box-shadow: var(--sombra-3); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.espaco__lista h4 { font-family: var(--fonte); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px 8px 4px; }
.espaco__lista a { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-2); color: var(--texto); text-decoration: none; min-height: 40px; }
.espaco__lista a:hover, .espaco__lista a[aria-current="true"] { background: var(--superficie-2); }
.espaco__lista small { color: var(--texto-3); display: block; font-size: 12px; line-height: 16px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--e-2); }
.nav__grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--lateral-texto-2); padding: 14px 10px 4px; font-weight: 600; }
.nav a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 10px;
  border-radius: var(--r-2); color: var(--lateral-texto); text-decoration: none; font-size: 15px; font-weight: 500;
}
.nav a:hover { background: var(--lateral-hover); }
.nav a[aria-current="page"] { background: var(--lateral-ativo-fundo); color: var(--lateral-ativo-texto); font-weight: 600; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lateral-ativo-barra); }
.nav .contador { margin-left: auto; }
.lateral__rodape { margin-top: auto; border-top: 1px solid var(--lateral-borda); padding-top: var(--e-3); display: flex; flex-direction: column; gap: 2px; }
.lateral__pessoa { display: flex; align-items: center; gap: 10px; padding: 6px 10px; }
.lateral__pessoa strong { font-size: 14px; display: block; line-height: 18px; color: var(--lateral-texto); }
.lateral__pessoa > div > span { font-size: 12px; color: var(--lateral-texto-2); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--superficie-3); color: var(--texto); flex: none; }
.torre .lateral .avatar { background: #1E293B; color: #E2E8F0; }
.lateral__fechar { display: none; }

.contador { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-cheio); background: var(--erro-solido); color: #FFFFFF; font-size: 12px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.contador--suave { background: var(--superficie-3); color: var(--texto); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.topo-movel { display: none; }
.barra-baixo { display: none; }
.conteudo { width: 100%; max-width: var(--largura-max); margin: 0 auto; padding: var(--e-7) var(--e-7) var(--e-9); display: flex; flex-direction: column; gap: var(--e-6); }
.conteudo--estreito { max-width: calc(var(--largura-form) + 64px); }
.rodape-pagina { color: var(--texto-3); font-size: 13px; text-align: center; padding: 0 var(--e-4) var(--e-7); }

/* faixa de operador / demonstração */
.faixa-topo { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; font-size: 14px; background: var(--aviso-fundo); color: var(--aviso); border-bottom: 1px solid var(--aviso-borda); text-align: center; }
.faixa-topo--operador { background: #0F172A; color: #E2E8F0; border-bottom-color: #1E293B; }
.faixa-topo a { color: inherit; font-weight: 600; }

/* ------------------------------------------------------------------ cabeçalho de página */
.cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
.cab__texto { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 72ch; }
.cab__texto p { color: var(--texto-2); }
.cab__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--texto-3); }
.trilha a { color: var(--texto-2); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.secao { display: flex; flex-direction: column; gap: var(--e-3); }
.secao__cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.secao__cab h2 { font-size: 18px; line-height: 26px; }
.secao__cab a { font-size: 14px; }

/* ------------------------------------------------------------------ botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--controle); padding: 0 16px; border-radius: var(--r-2);
  border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto);
  font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--rapido) ease-out, border-color var(--rapido) ease-out, box-shadow var(--rapido) ease-out;
}
.btn:hover { background: var(--superficie-2); border-color: var(--borda-campo); }
.btn--primario { background: var(--acao); border-color: var(--acao); color: var(--sobre-acao); box-shadow: var(--sombra-1); }
.btn--primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.btn--perigo { background: var(--erro-solido); border-color: var(--erro-solido); color: #FFFFFF; }
.btn--perigo:hover { background: #B91C1C; border-color: #B91C1C; }
.btn--perigo-suave { color: var(--erro); border-color: var(--erro-borda); background: var(--superficie); }
.btn--perigo-suave:hover { background: var(--erro-fundo); border-color: var(--erro); }
.btn--fantasma { border-color: transparent; background: transparent; color: var(--texto-2); }
.btn--fantasma:hover { background: var(--superficie-2); color: var(--texto); border-color: transparent; }
.btn--p { min-height: 36px; padding: 0 12px; font-size: 14px; }
.btn--largo { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.btn-link { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; cursor: pointer; font-weight: 500; }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.form-inline { display: inline; margin: 0; }

/* ------------------------------------------------------------------ selos (status) */
.selo {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  min-height: 24px; padding: 2px 10px; border-radius: var(--r-cheio); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; line-height: 18px;
}
.selo .icone { width: 14px; height: 14px; stroke-width: 2.2; }
.selo--ok { background: var(--ok-fundo); color: var(--ok); border-color: var(--ok-borda); }
.selo--aviso, .selo--atencao { background: var(--aviso-fundo); color: var(--aviso); border-color: var(--aviso-borda); }
.selo--erro { background: var(--erro-fundo); color: var(--erro); border-color: var(--erro-borda); }
.selo--info { background: var(--info-fundo); color: var(--info); border-color: var(--info-borda); }
.selo--neutro, .selo--pausado, .selo--implantacao { background: var(--neutro-fundo); color: var(--neutro); border-color: var(--neutro-borda); }
.selo--marca, .selo--teste { background: var(--realce-fundo); color: var(--realce-texto); border-color: var(--realce-borda); }
.ponto { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--texto-3); box-shadow: 0 0 0 4px var(--neutro-fundo); }
.ponto--ok { background: var(--ok-icone); box-shadow: 0 0 0 4px var(--ok-fundo); }
.ponto--atencao, .ponto--aviso { background: var(--aviso-icone); box-shadow: 0 0 0 4px var(--aviso-fundo); }
.ponto--erro { background: var(--erro-solido); box-shadow: 0 0 0 4px var(--erro-fundo); }
.ponto--teste { background: var(--marca); box-shadow: 0 0 0 4px var(--realce-fundo); }

/* ------------------------------------------------------------------ cartões e grades */
.cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-3); box-shadow: var(--sombra-1); padding: var(--e-5); display: flex; flex-direction: column; gap: var(--e-3); min-width: 0; }
.cartao--plano { box-shadow: none; }
.cartao--sem-espaco { padding: 0; gap: 0; overflow: hidden; }
.cartao--destaque { border-color: var(--realce-borda); background: linear-gradient(180deg, var(--realce-fundo), var(--superficie) 70%); }
.cartao__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }
.cartao__cab h3 { font-size: 16px; }
.cartao__cab p { color: var(--texto-2); font-size: 14px; }
.cartao__rodape { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; border-top: 1px solid var(--borda); padding-top: var(--e-3); margin-top: auto; }
a.cartao { color: inherit; text-decoration: none; transition: border-color var(--rapido), box-shadow var(--rapido); }
a.cartao:hover { border-color: var(--borda-campo); box-shadow: var(--sombra-2); }
.grade { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.colunas { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.pilha { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.pilha--p { gap: var(--e-2); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.entre { justify-content: space-between; }

/* indicadores */
.indicador { display: flex; flex-direction: column; gap: 4px; }
.indicador__rotulo { font-size: 14px; color: var(--texto-2); display: flex; align-items: center; gap: 8px; }
.indicador__valor { font-family: var(--fonte-titulo); font-size: 32px; line-height: 40px; font-weight: 700; }
.indicador__valor small { font-size: 16px; font-weight: 600; color: var(--texto-2); letter-spacing: 0; }
.indicador__detalhe { font-size: 13px; color: var(--texto-3); }
.variacao { font-size: 13px; font-weight: 600; }
.variacao--sobe { color: var(--ok); }
.variacao--desce { color: var(--erro); }

/* status grande do assistente */
.estado-assistente { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.estado-assistente__icone { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--ok-fundo); color: var(--ok-icone); flex: none; }
.estado-assistente__icone--pausado { background: var(--aviso-fundo); color: var(--aviso-icone); }
.estado-assistente__icone--encerrado { background: var(--neutro-fundo); color: var(--neutro); }
.estado-assistente__icone--implantacao { background: var(--info-fundo); color: var(--info-icone); }
.estado-assistente h2 { font-size: 20px; }

/* lista "precisa de você" e listas de linhas */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista > li { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-top: 1px solid var(--borda); min-width: 0; }
.lista > li:first-child { border-top: 0; padding-top: 0; }
.lista > li:last-child { padding-bottom: 0; }
.lista--cartao > li { padding: var(--e-3) var(--e-5); }
.lista--cartao > li:first-child { padding-top: var(--e-3); }
.lista--cartao > li:last-child { padding-bottom: var(--e-3); }
.lista__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lista__corpo strong { font-weight: 600; overflow-wrap: anywhere; }
.lista__corpo span { font-size: 14px; color: var(--texto-2); }
.lista__icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--superficie-2); color: var(--texto-2); }
.lista__icone--aviso { background: var(--aviso-fundo); color: var(--aviso-icone); }
.lista__icone--erro { background: var(--erro-fundo); color: var(--erro-solido); }
.lista__icone--ok { background: var(--ok-fundo); color: var(--ok-icone); }
.lista__icone--info { background: var(--info-fundo); color: var(--info-icone); }
.lista__icone--marca { background: var(--realce-fundo); color: var(--realce-texto); }
.tudo-em-dia { display: flex; align-items: center; gap: var(--e-3); color: var(--ok); font-weight: 600; }

/* linha do tempo (atividade) */
.tempo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tempo li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--e-3); align-items: start; padding: 10px 0; position: relative; }
.tempo li::before { content: ""; position: absolute; left: 7px; top: 26px; bottom: -10px; width: 2px; background: var(--borda); }
.tempo li:last-child::before { display: none; }
.tempo .ponto { margin-top: 6px; width: 8px; height: 8px; margin-left: 4px; box-shadow: none; }
.tempo time { font-size: 13px; color: var(--texto-3); white-space: nowrap; }
.tempo a { color: var(--texto); text-decoration: none; }
.tempo a:hover { text-decoration: underline; }

/* primeiros passos */
.passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-2); counter-reset: passo; }
.passos li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-2); border: 1px solid var(--borda); background: var(--superficie); }
.passos li.feito { background: var(--superficie-2); }
.passos li.feito .passos__titulo { text-decoration: line-through; color: var(--texto-3); }
.passos__marca { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--borda-campo); display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.passos li.feito .passos__marca { background: var(--ok-icone); border-color: var(--ok-icone); color: #FFFFFF; }
.progresso-texto { font-size: 14px; color: var(--texto-2); }

/* barras de progresso nativas (sem estilo inline) */
progress.barra { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--r-cheio); background: var(--superficie-3); overflow: hidden; display: block; }
progress.barra::-webkit-progress-bar { background: var(--superficie-3); border-radius: var(--r-cheio); }
progress.barra::-webkit-progress-value { background: var(--grafico-1); border-radius: var(--r-cheio); }
progress.barra::-moz-progress-bar { background: var(--grafico-1); border-radius: var(--r-cheio); }
progress.barra--aviso::-webkit-progress-value { background: var(--aviso-icone); }
progress.barra--aviso::-moz-progress-bar { background: var(--aviso-icone); }
progress.barra--erro::-webkit-progress-value { background: var(--erro-solido); }
progress.barra--erro::-moz-progress-bar { background: var(--erro-solido); }
progress.barra--ok::-webkit-progress-value { background: var(--ok-icone); }
progress.barra--ok::-moz-progress-bar { background: var(--ok-icone); }
.medidor { display: flex; flex-direction: column; gap: 6px; }
.medidor__rotulo { display: flex; justify-content: space-between; gap: var(--e-3); font-size: 14px; }
.medidor__rotulo span:last-child { color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* minigráfico */
.faisca { width: 120px; height: 32px; display: block; overflow: visible; }
.faisca polyline { fill: none; stroke: var(--grafico-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.faisca polygon { fill: var(--realce-fundo); stroke: none; }
.faisca circle { fill: var(--grafico-1); }
.faisca line { stroke: var(--grafico-grade); stroke-width: 1; }
.colunas-dia { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; height: 96px; }
.colunas-dia svg { width: 100%; height: 72px; display: block; }
.colunas-dia rect { fill: var(--grafico-1); }
.colunas-dia rect.vazia { fill: var(--superficie-3); }
.colunas-dia span { display: block; text-align: center; font-size: 11px; color: var(--texto-3); margin-top: 4px; }

/* ------------------------------------------------------------------ faixas de estado (banners) */
.faixa { display: flex; gap: var(--e-3); align-items: flex-start; padding: var(--e-3) var(--e-4); border-radius: var(--r-3); border: 1px solid var(--info-borda); background: var(--info-fundo); color: var(--texto); }
.faixa > .icone { color: var(--info-icone); margin-top: 2px; }
.faixa__corpo { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faixa__corpo strong { font-weight: 600; }
.faixa__corpo p { color: var(--texto-2); font-size: 15px; }
.faixa__acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; align-self: center; }
.faixa--aviso { background: var(--aviso-fundo); border-color: var(--aviso-borda); }
.faixa--aviso > .icone { color: var(--aviso-icone); }
.faixa--erro { background: var(--erro-fundo); border-color: var(--erro-borda); }
.faixa--erro > .icone { color: var(--erro-solido); }
.faixa--ok { background: var(--ok-fundo); border-color: var(--ok-borda); }
.faixa--ok > .icone { color: var(--ok-icone); }
.faixa--neutro { background: var(--superficie-2); border-color: var(--borda); }
.faixa--neutro > .icone { color: var(--texto-2); }

/* recado da ação anterior (sucesso some sozinho; os outros ficam) */
.recados { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.recado { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-3); background: var(--texto); color: var(--fundo); box-shadow: var(--sombra-3); font-size: 15px; }
.recado .icone { margin-top: 2px; }
.recado--ok .icone { color: #4ADE80; }
.recado--erro { background: var(--erro-solido); color: #FFFFFF; }
.recado--aviso { background: #92400E; color: #FFFFFF; }
.recado button { margin-left: auto; background: none; border: 0; color: inherit; opacity: .8; cursor: pointer; padding: 0 0 0 8px; font-size: 20px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .recado { animation: surge var(--medio) ease-out; }
  @keyframes surge { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ------------------------------------------------------------------ abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--borda); overflow-x: auto; scrollbar-width: none; }
.abas a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; min-height: var(--controle); color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { color: var(--realce-texto); border-bottom-color: var(--acao); }

/* ------------------------------------------------------------------ tabelas */
.tabela-caixa { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-3); background: var(--superficie); box-shadow: var(--sombra-1); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela th, .tabela td { padding: 12px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--borda); }
.tabela th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); background: var(--superficie-2); white-space: nowrap; height: 44px; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela td.num, .tabela th.num { text-align: right; white-space: nowrap; }
.tabela td.acoes { text-align: right; white-space: nowrap; }
.tabela .principal-celula { font-weight: 600; }
.tabela .principal-celula small { display: block; font-weight: 400; color: var(--texto-3); font-size: 13px; }
.tabela--densa th, .tabela--densa td { padding: 8px 12px; font-size: 14px; }
.tabela tfoot td { font-weight: 700; background: var(--superficie-2); border-top: 1px solid var(--borda-forte); }
.linha-inativa td { color: var(--texto-3); }

/* ------------------------------------------------------------------ formulários */
.form { display: flex; flex-direction: column; gap: var(--e-5); max-width: var(--largura-form); }
.form--largo { max-width: none; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .rotulo, fieldset > legend { font-weight: 600; font-size: 15px; color: var(--texto); }
.campo .opcional { font-weight: 400; color: var(--texto-3); }
.ajuda { font-size: 14px; color: var(--texto-2); }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: var(--controle); padding: 10px 12px; border-radius: var(--r-2);
  border: 1px solid var(--borda-campo); background: var(--superficie); color: var(--texto); font-size: 16px;
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
.entrada::placeholder { color: var(--texto-3); }
.entrada:hover { border-color: var(--texto-2); }
.entrada:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--realce-borda); }
textarea.entrada { min-height: 140px; resize: vertical; line-height: 1.55; }
textarea.entrada--grande { min-height: 360px; font-family: var(--fonte-mono); font-size: 14px; }
select.entrada { appearance: none; background-image: url("../img/seta-baixo.svg"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 40px; }
.entrada[aria-invalid="true"] { border-color: var(--erro); box-shadow: 0 0 0 3px var(--erro-fundo); }
.erro-campo { display: flex; gap: 6px; align-items: center; color: var(--erro); font-size: 14px; font-weight: 500; }
.dinheiro { position: relative; max-width: 260px; }
.dinheiro span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-2); font-weight: 600; }
.dinheiro .entrada { padding-left: 44px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.opcao { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--borda); border-radius: var(--r-2); background: var(--superficie); cursor: pointer; }
.opcao:hover { border-color: var(--borda-campo); }
.opcao:has(input:checked) { border-color: var(--acao); background: var(--realce-fundo); }
.opcao input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--acao); flex: none; }
.opcao strong { display: block; font-weight: 600; }
.opcao span { display: block; font-size: 14px; color: var(--texto-2); }
.opcao--desligada { opacity: .55; cursor: not-allowed; }
.opcoes { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.caixa-erros { border: 1px solid var(--erro-borda); background: var(--erro-fundo); border-radius: var(--r-3); padding: var(--e-3) var(--e-4); }
.caixa-erros strong { color: var(--erro); }
.acoes-form { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; padding-top: var(--e-2); }
.dic-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--e-2); align-items: center; }
.interruptor { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.interruptor input { width: 40px; height: 22px; accent-color: var(--acao); }

/* assistente de conexão (um campo por vez) */
.passo-a-passo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); counter-reset: n; }
.passo-a-passo li { counter-increment: n; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; }
.passo-a-passo li::before { content: counter(n); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--realce-fundo); color: var(--realce-texto); font-weight: 700; font-size: 14px; }
.etapas { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--texto-2); }
.etapas i { display: block; flex: 1; height: 4px; border-radius: 4px; background: var(--superficie-3); }
.etapas i.feita { background: var(--acao); }
.campo-segredo { position: relative; }
.campo-segredo .entrada { padding-right: 96px; font-family: var(--fonte-mono); letter-spacing: .02em; }
.campo-segredo button { position: absolute; right: 6px; top: 6px; bottom: 6px; }
.onde { border-left: 3px solid var(--realce-borda); padding: 6px 0 6px 12px; font-size: 14px; color: var(--texto-2); }
.onde strong { color: var(--texto); }
.cofre-nota { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--texto-2); }
.copiar { display: flex; gap: var(--e-2); align-items: stretch; }
.copiar .entrada { font-family: var(--fonte-mono); font-size: 14px; }

/* cartões de conexão */
.conexao { flex-direction: row; align-items: flex-start; gap: var(--e-4); }
.conexao__logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borda); }
.conexao__corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.conexao__corpo h3 { font-size: 16px; }
.conexao__corpo p { font-size: 14px; color: var(--texto-2); }
.conexao__meta { font-size: 13px; color: var(--texto-3); }

/* ------------------------------------------------------------------ estado vazio */
.vazio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--e-3); padding: var(--e-8) var(--e-5); border: 1px dashed var(--borda-forte); border-radius: var(--r-3); background: var(--superficie); }
.vazio__icone { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--realce-fundo); color: var(--realce-texto); }
.vazio p { color: var(--texto-2); max-width: 52ch; }

/* ------------------------------------------------------------------ conversas */
.conversas { display: grid; grid-template-columns: 320px minmax(0, 1fr); border: 1px solid var(--borda); border-radius: var(--r-3); background: var(--superficie); overflow: hidden; min-height: 560px; box-shadow: var(--sombra-1); }
.conversas__lista { border-right: 1px solid var(--borda); overflow-y: auto; max-height: 72vh; }
.conversas__lista a { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--borda); color: var(--texto); text-decoration: none; }
.conversas__lista a:hover { background: var(--superficie-2); }
.conversas__lista a[aria-current="page"] { background: var(--realce-fundo); }
.conversas__lista .previa { font-size: 14px; color: var(--texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conversa { display: flex; flex-direction: column; min-width: 0; }
.conversa__cab { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.conversa__corpo { padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 64vh; background: var(--fundo); flex: 1; }
.conversa__rodape { padding: 12px 20px; border-top: 1px solid var(--borda); font-size: 14px; color: var(--texto-2); display: flex; gap: 8px; align-items: center; }
.dia { align-self: center; font-size: 12px; font-weight: 600; color: var(--texto-3); background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cheio); padding: 2px 10px; margin: 8px 0; }
.balao { max-width: min(78%, 620px); padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.balao__texto { white-space: pre-line; }
.balao small { display: block; margin-top: 4px; font-size: 12px; color: var(--texto-3); }
.balao--pessoa { align-self: flex-start; background: var(--superficie); border: 1px solid var(--borda); border-bottom-left-radius: 4px; }
.balao--assistente { align-self: flex-end; background: var(--realce-fundo); border: 1px solid var(--realce-borda); border-bottom-right-radius: 4px; }
.balao__anexo { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); background: var(--superficie-2); border-radius: var(--r-cheio); padding: 2px 10px; margin-bottom: 6px; }

/* ------------------------------------------------------------------ pedido de aprovação */
.pedido { gap: var(--e-4); }
.pedido__frase { font-size: 18px; line-height: 28px; font-weight: 600; font-family: var(--fonte-titulo); }
.itens { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 20px; margin: 0; }
.itens dt { color: var(--texto-2); font-size: 14px; }
.itens dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.prazo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--aviso); font-weight: 600; }
.garantia { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--texto-2); background: var(--superficie-2); border-radius: var(--r-2); padding: 10px 12px; }

/* ------------------------------------------------------------------ diálogo */
dialog.dialogo { border: 1px solid var(--borda); border-radius: var(--r-4); padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-3); }
dialog.dialogo::backdrop { background: var(--veu); }
.dialogo__corpo { padding: var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); }
.dialogo__corpo h2 { font-size: 20px; }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: var(--e-2); flex-wrap: wrap; padding: var(--e-4) var(--e-6); border-top: 1px solid var(--borda); background: var(--superficie-2); border-radius: 0 0 var(--r-4) var(--r-4); }
.confirmacao { border: 1px solid var(--erro-borda); border-radius: var(--r-3); background: var(--erro-fundo); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
details.revela > summary { cursor: pointer; list-style: none; }
details.revela > summary::-webkit-details-marker { display: none; }
details.revela[open] > summary { display: none; }
details.reserva > summary { cursor: pointer; font-weight: 600; color: var(--texto-2); }
details.reserva[open] > summary { margin-bottom: var(--e-3); }
.lista-termos { font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ descrição (chave: valor) */
.descricao { display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.descricao dt { color: var(--texto-2); font-size: 14px; }
.descricao dd { margin: 0; overflow-wrap: anywhere; }
.etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { font-size: 13px; padding: 2px 10px; border-radius: var(--r-cheio); background: var(--superficie-2); border: 1px solid var(--borda); color: var(--texto-2); }
.etiqueta--sim { background: var(--realce-fundo); border-color: var(--realce-borda); color: var(--realce-texto); }
.texto-perfil { white-space: pre-wrap; font-size: 15px; line-height: 1.65; max-width: 80ch; }

/* filtros e busca */
.filtros { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: flex-end; }
.filtros .campo { flex: 1 1 220px; }
.busca { position: relative; flex: 1 1 280px; }
.busca .icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.busca .entrada { padding-left: 40px; }
.indicador-carga { display: none; font-size: 14px; color: var(--texto-3); }
.htmx-request .indicador-carga, .htmx-request.indicador-carga { display: inline-flex; }

/* ------------------------------------------------------------------ telas públicas (entrar) */
.publico { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.publico__lado { background: #0F172A; color: #E2E8F0; padding: 48px; display: flex; flex-direction: column; gap: 56px; position: relative; overflow: hidden; }
.publico__mensagem { display: flex; flex-direction: column; gap: 20px; margin-block: auto; position: relative; z-index: 1; }
.publico__rodape { font-size: 13px; color: #94A3B8; position: relative; z-index: 1; }
.publico__lado::after { content: ""; position: absolute; inset: auto -120px -160px auto; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgb(20 184 166 / .35), transparent 70%); }
.publico__lado h1 { color: #FFFFFF; font-size: 34px; line-height: 42px; max-width: 18ch; }
.publico__lado p { color: #CBD5E1; max-width: 46ch; font-size: 17px; }
.publico__lado .lateral__marca { color: #FFFFFF; padding: 0; }
.publico__lado .lateral__marca > div > span { color: #94A3B8; }
.beneficios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.beneficios li { display: flex; gap: 12px; align-items: flex-start; color: #E2E8F0; }
.beneficios .icone { color: #5EEAD4; margin-top: 2px; }
.publico__form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--fundo); }
.publico__caixa { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: var(--e-5); }
.publico__caixa h2 { font-size: 26px; line-height: 34px; }
.personas { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.persona { display: flex; gap: 10px; align-items: center; width: 100%; height: 100%; text-align: left; padding: 10px 12px; color: var(--texto); border: 1px solid var(--borda); border-radius: var(--r-2); background: var(--superficie); cursor: pointer; min-height: 56px; }
.persona:hover { border-color: var(--acao); background: var(--realce-fundo); }
.persona strong { display: block; font-size: 15px; }
.persona > span > span { display: block; font-size: 13px; color: var(--texto-2); }
.divisor { display: flex; align-items: center; gap: 12px; color: var(--texto-3); font-size: 13px; }
.divisor::before, .divisor::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* ------------------------------------------------------------------ torre */
.semaforo { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.semaforo .selo { font-size: 14px; min-height: 30px; padding: 4px 12px; }
.robo { gap: var(--e-3); }
.robo--erro { border-color: var(--erro-borda); }
.robo--atencao { border-color: var(--aviso-borda); }
.robo .descricao { grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 6px 16px; font-size: 14px; }
.robo .nota { font-size: 13px; color: var(--texto-2); background: var(--superficie-2); border-radius: var(--r-2); padding: 8px 10px; }
.evento { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--e-3); align-items: start; }
.evento time { font-size: 14px; color: var(--texto-3); font-variant-numeric: tabular-nums; padding-top: 2px; }
.evento--visto { opacity: .6; }
.custo-barra { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(90px, max-content); gap: 12px; align-items: center; font-size: 14px; }
.desligado { opacity: .6; }

/* ------------------------------------------------------------------ utilidades */
.oculto-celular { display: initial; }
.so-celular { display: none; }
.centro { text-align: center; }
.direita { text-align: right; }
.sem-margem { margin: 0; }
.nowrap { white-space: nowrap; }
.largura-form { max-width: var(--largura-form); }
.separador { height: 1px; background: var(--borda); border: 0; margin: 0; }

/* ------------------------------------------------------------------ tablet: faixa estreita */
@media (max-width: 1100px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .app { grid-template-columns: 80px minmax(0, 1fr); }
  .lateral { padding: var(--e-3) 8px; align-items: stretch; }
  .lateral__marca > div, .espaco__nome, .espaco > summary > .icone, .nav__grupo, .lateral__pessoa > div { display: none; }
  .espaco > summary { justify-content: center; border: 0; padding: 6px; }
  .espaco__lista { width: 280px; right: auto; }
  .lateral__marca { justify-content: center; }
  .nav a { flex-direction: column; gap: 4px; font-size: 11px; text-align: center; padding: 8px 4px; line-height: 13px; min-height: 56px; justify-content: center; }
  .nav a[aria-current="page"]::before { left: -8px; }
  .nav a .contador { position: absolute; top: 2px; right: 6px; margin: 0; min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .lateral__pessoa { justify-content: center; }
  .conteudo { padding: var(--e-6); }
  .conversas { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ celular */
@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 24px; line-height: 32px; }
  .app { display: block; }
  .topo-movel {
    display: flex; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--topo-movel);
    align-items: center; gap: 10px; padding: 0 12px; background: var(--lateral-fundo); color: var(--lateral-texto);
    border-bottom: 1px solid var(--lateral-borda);
  }
  .topo-movel a { color: inherit; text-decoration: none; }
  .topo-movel__nome { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topo-movel__botao { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-2); color: inherit; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); height: 100%; z-index: 50;
    transform: translateX(-105%); transition: transform var(--medio) ease-out; box-shadow: var(--sombra-3);
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  }
  .lateral:target { transform: none; }
  .lateral:target + .veu-menu { display: block; }
  .veu-menu { display: none; position: fixed; inset: 0; z-index: 40; background: var(--veu); }
  .lateral__fechar { display: grid; position: absolute; right: 8px; top: calc(env(safe-area-inset-top, 0px) + 8px); width: 44px; height: 44px; place-items: center; color: var(--lateral-texto); border-radius: var(--r-2); }
  .conteudo { padding: var(--e-5) var(--e-4) calc(var(--barra-baixo) + 32px + env(safe-area-inset-bottom, 0px)); gap: var(--e-5); }
  .barra-baixo {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(var(--barra-baixo) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--superficie); border-top: 1px solid var(--borda);
  }
  .barra-baixo a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--texto-2); text-decoration: none; min-height: 44px; }
  .barra-baixo a[aria-current="page"] { color: var(--realce-texto); }
  .barra-baixo a[aria-current="page"] .icone { stroke-width: 2.2; }
  .barra-baixo .contador { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 18px; height: 18px; font-size: 11px; padding: 0 5px; }
  .recados { right: 16px; left: 16px; bottom: calc(var(--barra-baixo) + 16px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .cab { align-items: flex-start; }
  .cab__acoes { width: 100%; }
  .cab__acoes .btn { flex: 1; }
  .faixa-topo { font-size: 12px; padding: 6px 12px; gap: 4px 8px; line-height: 16px; }
  .faixa-topo .icone { display: none; }
  .faixa-topo .so-largo { display: none; }
  .estado-assistente { flex-wrap: nowrap; align-items: flex-start; }
  .estado-assistente__icone { width: 40px; height: 40px; border-radius: 12px; }
  .publico { grid-template-columns: minmax(0, 1fr); }
  .publico__lado { padding: 28px 20px; gap: 16px; }
  .publico__lado h1 { font-size: 24px; line-height: 32px; }
  .publico__lado .beneficios, .publico__lado p.oculto-celular { display: none; }
  .publico__form { padding: 28px 16px 48px; align-items: flex-start; }
  .oculto-celular { display: none !important; }
  .so-celular { display: initial; }
  .conversas { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .conversas--com-atual .conversas__lista { display: none; }
  .conversas:not(.conversas--com-atual) .conversa { display: none; }
  .conversas__lista { border-right: 0; max-height: none; }
  .conversa__corpo { max-height: none; }
  .balao { max-width: 88%; }
  .itens, .descricao, .robo .descricao { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .itens dd, .descricao dd { margin-bottom: 8px; }
  .dic-linha { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; border-bottom: 1px solid var(--borda); }
  .custo-barra { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .evento { grid-template-columns: minmax(0, 1fr); }
  .tabela--cartoes thead { display: none; }
  .tabela--cartoes, .tabela--cartoes tbody, .tabela--cartoes tr, .tabela--cartoes td { display: block; width: 100%; }
  .tabela--cartoes tr { padding: 12px 16px; border-bottom: 1px solid var(--borda); }
  .tabela--cartoes tbody tr:last-child { border-bottom: 0; }
  .tabela--cartoes td { border: 0; padding: 2px 0; text-align: left !important; }
  .tabela--cartoes td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--texto-3); font-size: 13px; }
  .tabela--cartoes td.principal-celula::before { content: none; }
  .tabela--cartoes td.acoes { padding-top: 8px; }
  .faixa { flex-wrap: wrap; }
  .faixa__acoes { width: 100%; }
}

@media (pointer: coarse) {
  .btn--p { min-height: 44px; }
}

@media print {
  .lateral, .topo-movel, .barra-baixo, .recados, .cab__acoes, .faixa-topo { display: none !important; }
  .app { display: block; }
  body { background: #FFFFFF; }
}

/* painel rápido dentro do Telegram (item 23) */
.rapido__topo { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.rapido__nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.rapido__nav a { padding: .4rem .75rem; border-radius: 999px; text-decoration: none; color: inherit; border: 1px solid var(--borda, #ccc); }
.rapido__nav a[aria-current="page"] { font-weight: 600; border-color: currentColor; }
.rapido__botao { display: flex; gap: .75rem; align-items: center; padding: 1rem; }
.rapido__botao span span { display: block; font-weight: normal; opacity: .8; }
.rapido .lista__link { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; padding: .5rem 0; }