@charset "UTF-8";
/* ============================================================
   GARON Controle — visual herdado da base (camadas antigas) com o
   tema da Garon no FINAL do arquivo (preto, branco e vermelho).
   ============================================================ */
:root, [data-theme="light"] {
  --fundo: #F5F2FA;
  --superficie: #FFFFFF;
  --superficie-2: #FAF8FD;
  --realce: #F0EBF7;
  --texto: #1E1630;
  --suave: #6E6880;
  --linha: #E6E1EE;
  --linha-forte: #CFC7DD;

  --marinho: #2A1B47;
  --azul: #7151AA;
  --azul-forte: #593D8C;
  --azul-suave: #EFE9F8;
  --dourado: #F39A1C;
  --dourado-texto: #8A4B00;
  --dourado-suave: #FFF0DB;
  --areia: linear-gradient(115deg, #F39A1C 0%, #F7B955 45%, #7151AA 100%);
  --verde: #2E9E6A;
  --verde-suave: #E3F5EC;
  --roxo: #2F7FC1;
  --roxo-suave: #E4F0FA;
  --perigo: #D2453B;
  --perigo-suave: #FDECEA;

  --botao: #7151AA;
  --botao-hover: #593D8C;
  --botao-texto: #FFFFFF;
  --marca: #7151AA;
  --sombra: 0 1px 2px rgba(30, 18, 52, .05), 0 6px 20px rgba(30, 18, 52, .06);
  --sombra-alta: 0 20px 60px rgba(30, 18, 52, .22);
  --raio: 10px;
  --raio-grande: 16px;
  color-scheme: light;
}

[data-theme="dark"] {
  --fundo: #120D1C;
  --superficie: #1C152B;
  --superficie-2: #241B37;
  --realce: #2C2143;
  --texto: #ECE7F5;
  --suave: #A49BB8;
  --linha: #30264A;
  --linha-forte: #47386B;

  --azul: #B79BEA;
  --azul-forte: #CDB8F3;
  --azul-suave: #33255A;
  --dourado: #F7A63A;
  --dourado-texto: #F9BE6B;
  --dourado-suave: #3D2A12;
  --verde: #4CC38A;
  --verde-suave: #16372A;
  --roxo: #7DB8EA;
  --roxo-suave: #1B3350;
  --perigo: #F07067;
  --perigo-suave: #3D1F22;

  --botao: #B79BEA;
  --botao-hover: #CDB8F3;
  --botao-texto: #120D1C;
  --marca: #C5ADF0;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --sombra-alta: 0 20px 60px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  font-family: "Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-forte); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 4px; }
small { display: block; color: var(--suave); font-size: 0.8125rem; }
code { font-size: 1rem; background: var(--realce); padding: 0.15em 0.45em; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------- barra superior ---------- */
.topo {
  position: sticky; top: 0; z-index: 30;
  height: 60px; display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem 0 1.25rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
}
.topo::before { /* faixa areia do cartão */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--areia);
}
.marca { display: flex; align-items: baseline; gap: 0.5rem; text-decoration: none; }
.marca:hover { text-decoration: none; }
.marca-nome { font-family: "Montserrat Alternates", "Figtree", sans-serif; font-style: italic; font-weight: 500; font-size: 1.375rem; color: var(--marca); letter-spacing: -0.01em; }
.marca-sub { font-size: 0.8125rem; color: var(--dourado-texto); font-weight: 600; }
.topo-direita { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.botao-tema {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 64px; height: 32px; padding: 0 8px; border-radius: 999px; cursor: pointer;
  background: var(--realce); border: 1px solid var(--linha);
}
.botao-tema::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--superficie); box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s ease;
}
[data-theme="dark"] .botao-tema::before { transform: translateX(32px); background: var(--azul-suave); }
.botao-tema svg { position: relative; width: 16px; height: 16px; fill: none; stroke: var(--suave); stroke-width: 1.8; stroke-linecap: round; }
[data-theme="light"] .ico-sol, :root:not([data-theme]) .ico-sol { stroke: var(--dourado-texto); }
[data-theme="dark"] .ico-lua { stroke: var(--dourado); fill: var(--dourado); }
.rotulo-tema-claro, .rotulo-tema-escuro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.menu-usuario { position: relative; }
.menu-usuario summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.3rem 0.5rem 0.3rem 0.3rem; border-radius: 999px; }
.menu-usuario summary::-webkit-details-marker { display: none; }
.menu-usuario summary:hover { background: var(--realce); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--marinho); color: var(--dourado); font-weight: 700; font-size: 0.8125rem;
}
[data-theme="dark"] .avatar { background: var(--dourado); color: var(--marinho); }
.quem { line-height: 1.2; }
.quem b { display: block; font-size: 0.875rem; font-weight: 600; }
.quem small { font-size: 0.75rem; }
.menu-suspenso {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; padding: 0.4rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-alta);
}
.menu-suspenso a { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--texto); }
.menu-suspenso a:hover { background: var(--realce); text-decoration: none; }
.menu-suspenso .sair { color: var(--perigo); border-top: 1px solid var(--linha); border-radius: 0 0 8px 8px; margin-top: 0.25rem; }
.menu-suspenso .icone { width: 18px; height: 18px; }

.abrir-menu { display: none; background: none; border: 0; padding: 6px; cursor: pointer; flex-direction: column; gap: 4px; }
.abrir-menu span { display: block; width: 20px; height: 2px; background: var(--texto); border-radius: 2px; }

/* ---------- estrutura ---------- */
.estrutura { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: calc(100vh - 60px); }
.lateral { padding: 1rem 0.75rem; position: sticky; top: 60px; height: calc(100vh - 60px); display: flex; flex-direction: column; overflow-y: auto; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--texto); font-weight: 500;
}
.lateral nav a:hover { background: var(--realce); text-decoration: none; color: var(--texto); }
.lateral nav a.ativo { background: var(--azul-suave); color: var(--azul); font-weight: 600; }
.lateral nav a span { flex: 1; }
.icone { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lateral nav a:not(.ativo) .icone { color: var(--suave); }
.grupo-menu { font-size: 0.75rem; color: var(--suave); font-weight: 600; padding: 1.25rem 0.75rem 0.4rem; }
.contador {
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--dourado); color: var(--marinho); font-size: 0.75rem; font-weight: 700;
}
.versao { margin-top: auto; font-size: 0.75rem; color: var(--suave); padding: 0.75rem; }

.conteudo {
  background: var(--superficie); margin: 0.75rem 0.75rem 0.75rem 0; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem;
  border-radius: var(--raio-grande); box-shadow: var(--sombra); border: 1px solid var(--linha);
  min-width: 0;
}
.conteudo > * { max-width: 1100px; }
.conteudo.conteudo-largo > * { max-width: none; }
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0 0 1.5rem; letter-spacing: -0.015em; }
h2 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 0.85rem; }
h3 { font-size: 1rem; margin: 0; font-weight: 600; }

/* ---------- mensagens ---------- */
.flash { padding: 0.8rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; display: flex; gap: 0.6rem; align-items: flex-start; }
.flash::before { content: ""; width: 4px; align-self: stretch; border-radius: 4px; flex: none; }
.flash.ok { background: var(--verde-suave); } .flash.ok::before { background: var(--verde); }
.flash.erro { background: var(--perigo-suave); } .flash.erro::before { background: var(--perigo); }
.flash.alerta { background: var(--dourado-suave); } .flash.alerta::before { background: var(--dourado); }
.vazio { color: var(--suave); padding: 1.25rem; background: var(--superficie-2); border: 1px dashed var(--linha-forte); border-radius: var(--raio); }
.descricao { color: var(--suave); max-width: 46rem; margin: 0 0 1.25rem; }
.dica { color: var(--suave); font-size: 0.8125rem; margin: -0.25rem 0 0.75rem; }
.nota { font-size: 0.8125rem; color: var(--suave); }

/* ---------- blocos e resumo ---------- */
.bloco { margin: 0 0 2.25rem; }
.bloco.destaque { background: var(--dourado-suave); border-radius: var(--raio-grande); padding: 1.25rem 1.25rem 0.5rem; }
.bloco.destaque h2 { color: var(--dourado-texto); }

.resumo { list-style: none; padding: 0; margin: 0 0 2.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; }
.resumo a {
  display: block; padding: 1rem 1.15rem; border-radius: var(--raio); color: var(--suave); text-decoration: none;
  background: var(--superficie-2); border: 1px solid var(--linha); height: 100%;
}
.resumo a:hover { border-color: var(--azul); text-decoration: none; color: var(--suave); }
.resumo strong { display: block; font-size: 1.875rem; font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; line-height: 1.15; }
.resumo li:first-child strong { color: var(--azul); }

.compromissos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.compromissos a {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: center; padding: 0.7rem 1rem;
  border-radius: var(--raio); border: 1px solid var(--linha); color: var(--texto); background: var(--superficie);
}
.compromissos a:hover { border-color: var(--azul); text-decoration: none; }
.compromissos .quando { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 0.875rem; }
.compromissos .quando b { display: block; color: var(--texto); }
.compromissos .oque { font-weight: 600; }
.compromissos .oque small { font-weight: 500; }

/* ---------- tabelas (estilo quadro) ---------- */
.tabela-rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin-bottom: 0.75rem; }
.tabela th { text-align: left; font-size: 0.8125rem; font-weight: 600; color: var(--suave); background: var(--superficie-2); padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela tr.inativo td { color: var(--suave); opacity: .7; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acoes { white-space: nowrap; text-align: right; }
.acoes form { display: inline; margin-left: 0.6rem; }
.acoes a { margin-left: 0.6rem; }
.arquivo { word-break: break-all; }

.competencia { margin-bottom: 2rem; }
.competencia h2 { color: var(--azul); display: flex; align-items: center; gap: 0.5rem; text-transform: capitalize; }
.competencia h2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--azul); }
.competencia .tabela { border-left: 4px solid var(--azul); }
.competencia:nth-of-type(even) h2 { color: var(--dourado-texto); }
.competencia:nth-of-type(even) h2::before { background: var(--dourado); }
.competencia:nth-of-type(even) .tabela { border-left-color: var(--dourado); }

/* ---------- selos (status) ---------- */
.selo { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; white-space: nowrap; color: #fff; }
.selo-aberto { background: var(--dourado); color: #2A1B47; }
.selo-em_andamento { background: #7151AA; }
.selo-respondido { background: #2F7FC1; }
.selo-concluido { background: #2E9E6A; }
.selo-novo { background: var(--marinho); }
[data-theme="dark"] .selo-novo { background: var(--dourado); color: #2A1B47; }
.selo-inativo { background: var(--perigo); }
.selo-interna { background: #7151AA; }
.selo-externa { background: var(--dourado); color: #2A1B47; }

/* ---------- formulários ---------- */
.formulario { display: flex; flex-direction: column; gap: 1rem; }
.formulario.estreito { max-width: 26rem; }
.formulario.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 1.25rem; }
.formulario .largo { grid-column: 1 / -1; }
label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--suave); }
label.caixa { flex-direction: row; align-items: center; gap: 0.5rem; color: var(--texto); font-weight: 500; white-space: nowrap; }
input, select, textarea {
  font: inherit; font-size: 0.9375rem; color: var(--texto);
  font-weight: 400; padding: 0.6rem 0.75rem; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--superficie); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--azul); }
input[type=file] { padding: 0.45rem; background: var(--superficie-2); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
fieldset { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.75rem 1rem 1rem; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
legend { font-size: 0.8125rem; font-weight: 700; color: var(--texto); padding: 0 0.35rem; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tres-colunas { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: inherit; font-weight: 600; font-size: 0.9375rem;
  background: var(--botao); color: var(--botao-texto); border: 1px solid transparent; border-radius: 8px;
  padding: 0.6rem 1.15rem; cursor: pointer; text-decoration: none; transition: background .15s;
}
.botao:hover { background: var(--botao-hover); color: var(--botao-texto); text-decoration: none; }
.botao:disabled { opacity: .45; cursor: not-allowed; }
.botao.secundario { background: var(--superficie); color: var(--texto); border-color: var(--linha-forte); }
.botao.secundario:hover { background: var(--realce); color: var(--texto); }
.botao.pequeno { font-size: 0.8125rem; padding: 0.3rem 0.8rem; }
.botao.icone { width: 38px; padding: 0.6rem 0; font-size: 1.15rem; line-height: 1; }
.botao.perigo-suave { background: var(--perigo-suave); color: var(--perigo); }
.botao.perigo-suave:hover { background: var(--perigo); color: #fff; }
.link, .link-perigo { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; color: var(--azul); }
.link:hover, .link-perigo:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-perigo { color: var(--perigo); }
.linha-botoes { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

.painel-envio { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 1.5rem; }
.painel-envio summary { cursor: pointer; padding: 0.85rem 1.1rem; font-weight: 600; color: var(--azul); list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.painel-envio summary::-webkit-details-marker { display: none; }
.painel-envio summary::before { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--botao); color: var(--botao-texto); font-weight: 700; }
.painel-envio[open] summary::before { content: "–"; }
.painel-envio[open] summary { border-bottom: 1px solid var(--linha); }
.painel-envio form { padding: 1.1rem; }

.filtros { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; }
.filtros select, .filtros input { width: auto; min-width: 11rem; }

/* abas e cadastros simples (Configurações) */
.abas { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--linha); margin-bottom: 1.5rem; }
.abas a { padding: 0.6rem 1rem; color: var(--suave); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.abas a:hover { color: var(--texto); text-decoration: none; }
.abas a.ativa { color: var(--azul); border-bottom-color: var(--azul); }
.linha-adicionar { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; max-width: 46rem; }
.linha-adicionar input[name=nome] { flex: 1; min-width: 14rem; }
.lista-cadastro { list-style: none; padding: 0; margin: 0; max-width: 46rem; border: 1px solid var(--linha); border-radius: var(--raio); }
.lista-cadastro li { display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--linha); }
.lista-cadastro li:last-child { border-bottom: 0; }
.lista-cadastro li.inativo { opacity: .55; }
.editar-inline { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.editar-inline input[name=nome] { border-color: transparent; background: transparent; padding: 0.4rem 0.5rem; }
.editar-inline input[name=nome]:hover { border-color: var(--linha); }
.editar-inline input[name=nome]:focus { border-color: var(--azul); background: var(--superficie); }
.lista-cadastro .info { color: var(--suave); font-size: 0.8125rem; white-space: nowrap; }
.dias-semana { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-block; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--texto); font-weight: 600; cursor: pointer; }
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
[data-theme="dark"] .chip input:checked + span { color: var(--marinho); }
.chip input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- avisos ---------- */
.aviso { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.25rem; margin-bottom: 0.85rem; max-width: 48rem; }
.aviso.fixado { border-left: 4px solid var(--dourado); }
.aviso time { display: block; font-size: 0.8125rem; color: var(--suave); margin: 0.15rem 0 0.5rem; }
.aviso p { margin: 0; }
.aviso .acoes { text-align: left; margin-top: 0.75rem; }
.aviso .acoes form:first-child { margin-left: 0; }

/* ---------- solicitações ---------- */
.meta-chamado { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; color: var(--suave); margin: -0.75rem 0 1.5rem; font-size: 0.875rem; }
.conversa { list-style: none; padding: 0; margin: 0 0 2rem; max-width: 48rem; }
.msg { border-radius: 14px; padding: 0.85rem 1.1rem; margin-bottom: 0.75rem; border: 1px solid var(--linha); }
.msg-cliente { background: var(--superficie-2); margin-right: 3rem; border-top-left-radius: 4px; }
.msg-equipe { background: var(--azul-suave); border-color: transparent; margin-left: 3rem; border-top-right-radius: 4px; }
.msg header { font-size: 0.8125rem; color: var(--suave); }
.msg header strong { color: var(--texto); }
.msg time { margin-left: 0.4rem; }
.msg p { margin: 0.35rem 0 0; }
.anexo { display: inline-block; margin-top: 0.5rem; font-size: 0.875rem; }
.lista-simples { list-style: none; padding: 0; margin: 0; }
.lista-simples li { padding: 0.6rem 0; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.5rem; margin: 0 0 1.5rem; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; }

.credencial { background: var(--verde-suave); border-radius: var(--raio); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.credencial p { margin: 0 0 0.5rem; }
.credencial dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; }
.credencial dd { margin: 0; font-weight: 600; }

.versao-bloco { margin-bottom: 2rem; max-width: 48rem; }
.versao-bloco h2 { display: flex; flex-direction: column; }
.versao-bloco h2 small { font-weight: 500; }
.versao-bloco ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }

/* ============================================================
   Agenda
   ============================================================ */
.agenda-barra { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.agenda-nav, .agenda-filtros { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.agenda-periodo { font-size: 1.0625rem; margin: 0 0.5rem; }
.ir-para { width: auto; height: 40px; padding: 0 0.6rem; }
.agenda-nav .botao { height: 40px; padding-top: 0; padding-bottom: 0; }
.agenda-filtros select { height: 40px; padding-top: 0; padding-bottom: 0; }
.agenda-filtros select { width: auto; min-width: 10rem; }

.calendario {
  --altura-slot: 26px;
  display: grid;
  grid-template-columns: 58px repeat(var(--colunas), minmax(120px, 1fr));
  grid-template-rows: auto 1fr;
  border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: auto; max-height: calc(100vh - 230px);
  background: var(--superficie); user-select: none;
}
.cal-canto, .cal-dia-titulo { position: sticky; top: 0; z-index: 5; background: var(--superficie); border-bottom: 1px solid var(--linha); }
.cal-canto { left: 0; z-index: 6; }
.cal-dia-titulo { padding: 0.6rem 0.5rem; text-align: center; border-left: 1px solid var(--linha); }
.cal-dia-titulo span { display: block; font-size: 0.75rem; color: var(--suave); font-weight: 600; text-transform: capitalize; }
.cal-dia-titulo b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 1.125rem; }
.cal-dia-titulo.hoje b { background: var(--azul); color: var(--botao-texto); }
.cal-horas { position: sticky; left: 0; z-index: 4; background: var(--superficie); }
.cal-hora { height: var(--altura-slot); font-size: 0.6875rem; color: var(--suave); text-align: right; padding-right: 8px; transform: translateY(-0.5em); font-variant-numeric: tabular-nums; }
.cal-coluna { position: relative; border-left: 1px solid var(--linha); }
.cal-coluna.hoje { background: color-mix(in srgb, var(--azul-suave) 35%, transparent); }
.cal-coluna.passado { background: var(--superficie-2); }
.cal-slot { height: var(--altura-slot); border-top: 1px dashed color-mix(in srgb, var(--linha) 70%, transparent); }
.cal-slot.cheia { border-top: 1px solid var(--linha); }
[data-editavel="1"] .cal-coluna:not(.passado) .cal-slot { cursor: cell; }
[data-editavel="1"] .cal-coluna:not(.passado) .cal-slot:hover { background: var(--realce); }
.cal-slot.selecionado { background: var(--azul-suave) !important; box-shadow: inset 3px 0 0 var(--azul); }

.cal-evento {
  position: absolute; z-index: 2; overflow: hidden; text-align: left; cursor: pointer;
  font: inherit; font-size: 0.75rem; line-height: 1.25; color: var(--texto);
  padding: 4px 7px; border-radius: 7px; border: 0; border-left: 3px solid var(--azul);
  background: var(--azul-suave); box-shadow: 0 1px 2px rgba(30, 18, 52,.08);
}
.cal-evento b { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento span { display: block; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-evento.curto { display: flex; gap: 0.4rem; align-items: center; }
.cal-evento.externa { border-left-color: var(--dourado); background: var(--dourado-suave); }
.cal-evento:hover { filter: brightness(0.97); box-shadow: 0 3px 10px rgba(30, 18, 52,.15); }
[data-theme="dark"] .cal-evento:hover { filter: brightness(1.15); }
.cal-agora { position: absolute; left: 0; right: 0; height: 2px; background: var(--perigo); z-index: 3; pointer-events: none; }
.cal-agora::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); }

/* diálogos */
.dialogo { border: 0; padding: 0; border-radius: var(--raio-grande); background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-alta); width: min(440px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); }
.dialogo.largo { width: min(680px, calc(100vw - 2rem)); }
.dialogo::backdrop { background: rgba(18, 12, 30, .45); backdrop-filter: blur(2px); }
.dialogo[open] { animation: surgir .16s ease-out; }
@keyframes surgir { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.dialogo-corpo { padding: 1.25rem 1.5rem 1.5rem; }
.dialogo-corpo > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; gap: 1rem; }
.dialogo-corpo > header h2 { margin: 0; font-size: 1.25rem; }
.dialogo h2[data-campo="titulo"] { font-size: 1.25rem; margin: 0.25rem 0 1rem; }
.fechar { background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--suave); cursor: pointer; width: 34px; height: 34px; border-radius: 8px; margin-left: auto; }
.fechar:hover { background: var(--realce); color: var(--texto); }
.descricao-evento { white-space: pre-line; color: var(--suave); margin: 0 0 1rem; }

.segmentado { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 4px; border-radius: 12px; background: var(--realce); }
.segmentado label { cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; }
.segmentado span { display: block; text-align: center; padding: 0.55rem; border-radius: 9px; color: var(--texto); font-weight: 700; font-size: 0.9375rem; }
.segmentado span small { display: inline; font-weight: 500; margin-left: 0.25rem; }
.segmentado input:checked + span { background: var(--superficie); box-shadow: 0 1px 3px rgba(30, 18, 52,.15); color: var(--azul); }
.segmentado input[value=externa]:checked + span { color: var(--dourado-texto); }
.segmentado input:focus-visible + span { outline: 2px solid var(--azul); }

.atalhos-duracao { display: flex; gap: 0.4rem; margin-top: -0.4rem; flex-wrap: wrap; }
.chip-botao { font: inherit; font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); cursor: pointer; }
.chip-botao:hover { border-color: var(--azul); color: var(--azul); }

.pessoas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.15rem 0.75rem; max-height: 220px; overflow-y: auto; }
.pessoas .grupo { grid-column: 1 / -1; font-size: 0.75rem; font-weight: 700; color: var(--suave); padding-top: 0.4rem; }
.pessoa { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--texto); padding: 0.3rem 0.4rem; border-radius: 6px; cursor: pointer; }
.pessoa:hover { background: var(--realce); }
.pessoa span { flex: 1; min-width: 0; }
.pessoa span small { display: inline; }
.pessoa .ocupado:empty { display: none; }
.pessoa .ocupado { flex-basis: 100%; padding-left: 1.55rem; margin-top: -0.15rem; font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--perigo); white-space: nowrap; }
.pessoa.indisponivel span { color: var(--suave); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--perigo) 60%, transparent); }
.busca-pessoas { padding: 0.45rem 0.7rem; }
.aviso-local { margin: -0.5rem 0 0; font-size: 0.8125rem; font-weight: 600; color: var(--perigo); }
.status-disponibilidade { font-size: 0.8125rem; font-weight: 600; color: var(--suave); margin-left: auto; }
.status-disponibilidade.bom { color: var(--verde); }
.status-disponibilidade.ruim { color: var(--perigo); }

/* ============================================================
   Login / instalação / atualização — inspirado no cartão
   ============================================================ */
.tela-entrada { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.entrada-tema { position: fixed; top: 1rem; right: 1rem; }
.entrada {
  display: grid; grid-template-columns: 1fr 1fr; width: min(880px, 100%);
  background: var(--superficie); border-radius: 20px; overflow: hidden; box-shadow: var(--sombra-alta); border: 1px solid var(--linha);
}
.entrada-marca { display: flex; flex-direction: column; min-height: 460px; }
.faixa-areia { background: var(--areia); padding: 2.5rem 2.25rem 1.75rem; flex: 1.1; display: flex; flex-direction: column; justify-content: flex-end; }
.entrada-nome { font-family: "Montserrat Alternates", "Figtree", sans-serif; font-style: italic; font-weight: 500; font-size: 2.4rem; line-height: 1.05; color: #7151AA; margin: 0; letter-spacing: -0.01em; }
.faixa-areia hr { border: 0; height: 3px; background: #7151AA; margin: 0.9rem 0 0.6rem; border-radius: 2px; }
.entrada-sub { font-family: "Montserrat Alternates", "Figtree", sans-serif; font-style: italic; font-size: 1.25rem; color: #7151AA; margin: 0; }
.faixa-marinho { background: #2A1B47; color: #F39A1C; padding: 1.75rem 2.25rem; flex: 1; display: flex; align-items: center; }
.faixa-marinho p { margin: 0; font-size: 1.0625rem; line-height: 1.5; max-width: 22rem; }
.caixa-entrada { padding: 2.5rem 2.25rem; display: flex; flex-direction: column; justify-content: center; }
.caixa-entrada h1 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.caixa-entrada .nota-topo, .caixa-entrada > p { color: var(--suave); margin: 0 0 1.25rem; }
.caixa-entrada form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.caixa-entrada .botao { width: 100%; padding: 0.7rem; }
.caixa-entrada .linha-botoes .botao { width: auto; }
.historico { margin-top: 1.5rem; font-size: 0.875rem; }
.historico summary { cursor: pointer; color: var(--suave); }

/* ---------- telas menores ---------- */
@media (max-width: 900px) {
  .abrir-menu { display: inline-flex; }
  .quem { display: none; }
  .estrutura { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; top: 60px; left: 0; bottom: 0; width: 260px; z-index: 25; height: auto;
    background: var(--superficie); border-right: 1px solid var(--linha); box-shadow: var(--sombra-alta);
    transform: translateX(-105%); transition: transform .2s ease;
  }
  .menu-aberto .lateral { transform: none; }
  .conteudo { margin: 0.5rem; }
  .compromissos a { grid-template-columns: 1fr; gap: 0.25rem; }
  .msg-cliente { margin-right: 0; } .msg-equipe { margin-left: 0; }
  .entrada { grid-template-columns: 1fr; }
  .entrada-marca { min-height: 0; }
  .faixa-areia { padding: 1.75rem; } .faixa-marinho { padding: 1.25rem 1.75rem; }
  .entrada-nome { font-size: 1.9rem; }
  .tres-colunas, .duas-colunas { grid-template-columns: 1fr 1fr; }
  .tres-colunas label:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .marca-sub { display: none; }
  .tabela { display: block; overflow-x: auto; }
  .tabela th, .tabela td { white-space: nowrap; }
  .duas-colunas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { transition: none !important; animation: none !important; } }

/* ============================================================
   1.2.0 — sino, tarefas, solicitação com responsável e reunião
   ============================================================ */
.menu-sino { position: relative; }
.menu-sino summary { list-style: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--suave); }
.menu-sino summary::-webkit-details-marker { display: none; }
.menu-sino summary:hover, .menu-sino[open] summary { background: var(--realce); color: var(--texto); }
.menu-sino .icone { width: 22px; height: 22px; }
.sino-contador {
  position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--perigo); color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--superficie);
}
.painel-notificacoes { width: min(380px, calc(100vw - 2rem)); padding: 0; overflow: hidden; }
.painel-notificacoes header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--linha); }
.painel-notificacoes header .link { font-size: 0.8125rem; }
.painel-notificacoes .nota { padding: 1rem; margin: 0; }
.menu-suspenso a.notif { display: block; border-radius: 0; padding: 0.7rem 1rem 0.7rem 1.4rem; border-bottom: 1px solid var(--linha); position: relative; }
.notif b { display: block; font-size: 0.875rem; }
.notif span { display: block; font-size: 0.8125rem; color: var(--suave); line-height: 1.35; }
.notif time { display: block; font-size: 0.6875rem; color: var(--suave); margin-top: 0.2rem; }
.notif.nao-lida { background: color-mix(in srgb, var(--azul-suave) 60%, transparent); }
.notif.nao-lida::before { content: ""; position: absolute; left: 0.6rem; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--azul); }
.menu-suspenso a.ver-todas { justify-content: center; color: var(--azul); font-weight: 600; border-radius: 0; }

.lista-notificacoes { list-style: none; margin: 0; padding: 0; max-width: 48rem; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.lista-notificacoes li { border-bottom: 1px solid var(--linha); }
.lista-notificacoes li:last-child { border-bottom: 0; }
.lista-notificacoes a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; padding: 0.85rem 1.1rem; color: var(--texto); }
.lista-notificacoes a:hover { background: var(--superficie-2); text-decoration: none; }
.lista-notificacoes span { grid-column: 1; color: var(--suave); font-size: 0.875rem; }
.lista-notificacoes time { grid-column: 2; grid-row: 1; font-size: 0.75rem; color: var(--suave); white-space: nowrap; }
.lista-notificacoes .nao-lida a { background: color-mix(in srgb, var(--azul-suave) 55%, transparent); box-shadow: inset 3px 0 0 var(--azul); }

.contador-aba { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 0.75rem; background: var(--realce); color: var(--suave); margin-left: 0.3rem; }
.abas a.ativa .contador-aba { background: var(--azul); color: var(--botao-texto); }

.lista-tarefas { display: grid; gap: 0.5rem; max-width: 60rem; }
.tarefa { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: 1rem; align-items: center; padding: 0.85rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio); color: var(--texto); background: var(--superficie); }
.tarefa:hover { border-color: var(--azul); text-decoration: none; box-shadow: var(--sombra); }
.tarefa-num { font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }
.tarefa-corpo b { display: block; }
.tarefa-fim { text-align: right; }
.tarefa-fim small { margin-top: 0.25rem; }

/* solicitação: conteúdo + histórico ao lado */
.conteudo:has(.chamado-grade) > * { max-width: none; }
.chamado-grade { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; }
.chamado-principal { min-width: 0; max-width: 52rem; }
.chamado-historico { position: sticky; top: 80px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1rem 1.1rem; max-height: calc(100vh - 110px); overflow-y: auto; }
.chamado-historico h2 { font-size: 0.9375rem; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { position: relative; padding: 0 0 0.9rem 1.1rem; border-left: 2px solid var(--linha); margin-left: 4px; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--linha-forte); }
.linha-tempo li:last-child { border-left-color: transparent; }
.linha-tempo time { display: block; font-size: 0.75rem; color: var(--suave); }
.linha-tempo p { margin: 0.1rem 0 0; font-size: 0.8125rem; line-height: 1.4; }
.linha-tempo .acao-aberta::before { border-color: var(--azul); }
.linha-tempo .acao-aceita::before, .linha-tempo .acao-reuniao_confirmada::before, .linha-tempo .acao-agenda_criada::before { border-color: var(--verde); background: var(--verde); }
.linha-tempo .acao-encaminhada::before, .linha-tempo .acao-reuniao_sugerida::before, .linha-tempo .acao-agenda_alterada::before, .linha-tempo .acao-agenda_remarcada::before { border-color: var(--dourado); background: var(--dourado); }
.linha-tempo .acao-agenda_cancelada::before, .linha-tempo .acao-agenda_saiu::before { border-color: var(--perigo); }
.linha-tempo.larga { max-width: 48rem; }
.linha-tempo.larga p { font-size: 0.875rem; }
.linha-tempo .dia { border-left: 0; padding: 0.5rem 0 0.6rem; margin: 0; font-weight: 700; font-size: 0.8125rem; color: var(--suave); text-transform: capitalize; }
.linha-tempo .dia::before { display: none; }

.cartao-responsavel { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1.1rem; border: 1px solid var(--linha); border-radius: var(--raio); margin-bottom: 0.75rem; }
.cartao-responsavel small { font-weight: 600; }
.cartao-reuniao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border-left: 4px solid var(--dourado); background: var(--dourado-suave); }
.cartao-reuniao.estado-confirmada { border-left-color: var(--verde); background: var(--verde-suave); }
.cartao-reuniao.estado-cancelada { border-left-color: var(--perigo); background: var(--perigo-suave); }
.reuniao-topo { display: flex; gap: 0.85rem; align-items: center; }
.reuniao-topo > div { flex: 1; }
.reuniao-topo small { font-weight: 700; }
.reuniao-topo strong { display: block; font-size: 1.0625rem; text-transform: capitalize; }
.reuniao-topo span { color: var(--suave); font-size: 0.875rem; }
.reuniao-icone { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie); color: var(--dourado-texto); flex: none; }
.estado-confirmada .reuniao-icone { color: var(--verde); }
.cartao-reuniao .nota { margin: 0.6rem 0 0; }

.painel-acao { border: 2px solid var(--azul); border-radius: var(--raio-grande); padding: 1.25rem 1.35rem; margin-bottom: 1.75rem; background: var(--superficie); box-shadow: 0 0 0 4px var(--azul-suave); }
.painel-acao h2 { color: var(--azul); }
.disponibilidade { background: var(--superficie-2); border-radius: var(--raio); padding: 0.85rem 1rem; }
.disponibilidade h3 { font-size: 0.875rem; margin-bottom: 0.4rem; }
.disponibilidade h3::first-letter { text-transform: uppercase; }
.disp-ok { color: var(--verde); font-weight: 700; margin: 0; }
.disp-conflito { color: var(--perigo); font-weight: 700; margin: 0.25rem 0; }
.disp-conflito.pequeno { font-size: 0.8125rem; }
.lista-conflitos { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.lista-conflitos li { background: var(--superficie); border: 1px solid var(--linha); border-left: 3px solid var(--perigo); border-radius: 8px; padding: 0.5rem 0.75rem; }
.decisao { gap: 0.5rem; }
.opcao { flex-direction: row; align-items: flex-start; gap: 0.6rem; font-weight: 500; color: var(--texto); padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.opcao:hover { background: var(--realce); }
.opcao:has(input:checked) { border-color: var(--azul); background: var(--azul-suave); }
.opcao:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.opcao input { margin-top: 0.25rem; }
.sub { margin: 0.1rem 0 0.4rem 1.9rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sub.tres-colunas { display: grid; }
.resolver { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio); }
.resolver .sub { margin-left: 1.9rem; }
.formulario .largo, .grade-reuniao .largo, .tres-colunas .largo, .sub .largo { grid-column: 1 / -1; }

/* interruptor "Pedir uma reunião" */
.bloco-reuniao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.85rem 1rem; background: var(--superficie); }
.interruptor { flex-direction: row; align-items: center; gap: 0.7rem; color: var(--texto); font-size: 0.9375rem; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; }
.interruptor .trilho { width: 40px; height: 22px; border-radius: 999px; background: var(--linha-forte); position: relative; transition: background .15s; flex: none; }
.interruptor .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.interruptor input:checked + .trilho { background: var(--azul); }
.interruptor input:checked + .trilho::after { transform: translateX(18px); }
.interruptor input:focus-visible + .trilho { outline: 2px solid var(--azul); outline-offset: 2px; }
.grade-reuniao { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1rem; margin-top: 0.85rem; }
.grade-reuniao .nota { margin: 0; }

@media (max-width: 1100px) {
  .chamado-grade { grid-template-columns: 1fr; }
  .chamado-historico { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .tarefa { grid-template-columns: 1fr; gap: 0.35rem; }
  .tarefa-fim { text-align: left; }
}
.formulario > .botao, .formulario > .linha-botoes { align-self: flex-start; }

/* ============================================================
   1.3.0 — identidade com o logo: topo branco com logo,
   menu lateral marinho com destaques dourados
   ============================================================ */
:root, [data-theme="light"] {
  --fundo: #F5F2FA;
  --azul: #7151AA;            /* azul do logo */
  --azul-forte: #593D8C;
  --azul-suave: #EFE9F8;
  --botao: #7151AA;
  --botao-hover: #593D8C;
  --lateral: #2A1B47;
  --lateral-texto: #E4DAF5;
  --lateral-suave: #BBA9DC;
  --lateral-hover: rgba(255, 255, 255, .06);
  --lateral-ativo: rgba(255, 255, 255, .10);
}
[data-theme="dark"] {
  --fundo: #100B19;
  --azul: #B79BEA;
  --azul-forte: #CDB8F3;
  --azul-suave: #33255A;
  --botao: #B79BEA;
  --botao-hover: #CDB8F3;
  --lateral: #0C0813;
  --lateral-texto: #C9BFDC;
  --lateral-suave: #8474A6;
  --lateral-hover: rgba(255, 255, 255, .05);
  --lateral-ativo: rgba(183, 155, 234, .14);
}

/* logo: versão certa para cada tema */
.logo { display: block; height: auto; }
.logo-escuro { display: none; }
[data-theme="dark"] .logo-claro { display: none; }
[data-theme="dark"] .logo-escuro { display: block; }

.topo { height: 64px; box-shadow: 0 1px 0 var(--linha); border-bottom: 0; }
.topo .marca { align-items: center; gap: 0.75rem; }
.topo .logo-horizontal { height: 38px; width: auto; }
.marca-sis {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--marinho);
  background: var(--dourado); border-radius: 6px; padding: 0.1rem 0.45rem; line-height: 1.4;
}
[data-theme="dark"] .marca-sis { color: #2A1B47; }

/* menu lateral marinho */
.estrutura { grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.lateral { background: var(--lateral); top: 64px; height: calc(100vh - 64px); padding: 1.1rem 0.75rem 0.75rem; }
.lateral nav a { color: var(--lateral-texto); font-weight: 500; position: relative; }
.lateral nav a:not(.ativo) .icone { color: var(--lateral-suave); }
.lateral nav a:hover { background: var(--lateral-hover); color: #fff; }
.lateral nav a:hover .icone { color: #fff; }
.lateral nav a.ativo { background: var(--lateral-ativo); color: #fff; font-weight: 600; }
.lateral nav a.ativo::before { content: ""; position: absolute; left: -0.75rem; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--dourado); }
.lateral nav a.ativo .icone { color: var(--dourado); }
.grupo-menu { color: var(--lateral-suave); letter-spacing: 0.02em; }
.lateral .versao { color: var(--lateral-suave); }
.lateral .versao:hover { color: #fff; }
.contador { box-shadow: 0 0 0 2px var(--lateral); }

.conteudo { margin: 1rem 1rem 1rem 1rem; border-radius: 18px; }
h1 { color: var(--texto); }
.conteudo > h1::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--dourado); margin-top: 0.6rem; }

/* botões e realces com o azul do logo */
.resumo a, .resumo-item { position: relative; overflow: hidden; }
.resumo li:first-child a::before, .resumo li:first-child .resumo-item::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--dourado); }

/* faixa de aviso (escolha do restaurante) */
.faixa-aviso {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; padding: 0.8rem 1.1rem; margin-bottom: 1.25rem;
  border-radius: var(--raio); background: var(--dourado-suave); border: 1px solid color-mix(in srgb, var(--dourado) 55%, transparent); color: var(--texto);
}
.faixa-aviso:hover { text-decoration: none; color: var(--texto); border-color: var(--dourado); }
.faixa-aviso span { color: var(--suave); font-size: 0.875rem; }

/* ---------- tela de entrada: só logo e nome ---------- */
.tela-entrada {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(243, 154, 28, .22), transparent 70%),
    radial-gradient(700px 500px at 100% 110%, rgba(113, 81, 170, .12), transparent 70%),
    var(--fundo);
}
.entrada-centro { width: min(380px, 100%); display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.entrada-logo { display: flex; justify-content: center; margin-bottom: 0.5rem; }
.entrada-logo .logo-completo { width: min(300px, 80vw); }
.entrada-sis { font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--texto); margin: 0.5rem 0 1.75rem; }
.entrada-sis::before, .entrada-sis::after { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--dourado); vertical-align: middle; margin: 0 0.7rem; border-radius: 2px; }
.entrada-centro > .flash, .entrada-centro > form, .entrada-centro > h1, .entrada-centro > p:not(.entrada-sis), .entrada-centro > ul, .entrada-centro > .linha-botoes, .entrada-centro > details { text-align: left; }
.form-entrada, .entrada-centro > form {
  display: flex; flex-direction: column; gap: 1rem; background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 16px; padding: 1.5rem; box-shadow: var(--sombra);
}
.entrada-centro .botao { width: 100%; padding: 0.75rem; }
.entrada-centro .linha-botoes .botao { width: auto; }
.entrada-centro h1 { font-size: 1.25rem; }

/* ---------- almoço ---------- */
.escolha-almoco { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.cartao-escolha { cursor: pointer; }
.cartao-escolha input { position: absolute; opacity: 0; }
.cartao-escolha > span {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem; text-align: center; height: 100%;
  padding: 1.1rem 0.9rem; border-radius: 14px; border: 2px solid var(--linha); background: var(--superficie); color: var(--texto); transition: border-color .15s, background .15s;
}
.cartao-escolha .emoji { font-size: 1.8rem; line-height: 1; margin-bottom: 0.3rem; }
.cartao-escolha strong { font-size: 1rem; }
.cartao-escolha:hover > span { border-color: var(--linha-forte); }
.cartao-escolha input:checked + span { border-color: var(--azul); background: var(--azul-suave); }
.cartao-escolha input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.cartao-escolha input:disabled + span { opacity: .5; cursor: not-allowed; }
.form-almoco { display: flex; flex-direction: column; gap: 1rem; }
.cardapio-escolha { display: flex; flex-direction: column; gap: 0.75rem; }
.cardapio-escolha fieldset { gap: 0.2rem; }
.item-cardapio { flex-direction: row; align-items: center; gap: 0.6rem; font-weight: 500; color: var(--texto); padding: 0.45rem 0.55rem; border-radius: 8px; cursor: pointer; }
.item-cardapio:hover { background: var(--realce); }
.item-cardapio:has(input:checked) { background: var(--azul-suave); }
.item-cardapio span { flex: 1; }
.item-cardapio em { font-style: normal; color: var(--suave); font-size: 0.8125rem; }
.cartao-almoco { border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.25rem; max-width: 46rem; }
.nome-rest { font-size: 1.25rem !important; }
.resumo-item { display: block; padding: 1rem 1.15rem; border-radius: var(--raio); background: var(--superficie-2); border: 1px solid var(--linha); color: var(--suave); height: 100%; }
.resumo-item small { font-weight: 600; }

.cartoes-restaurante { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.75rem; max-width: 60rem; }
.cartao-restaurante {
  font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem;
  padding: 1rem 1.1rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto);
}
.cartao-restaurante:hover { border-color: var(--azul); box-shadow: var(--sombra); }
.cartao-restaurante strong { font-size: 1.0625rem; }
.cartao-restaurante .escolher { margin-top: 0.6rem; color: var(--azul); font-weight: 700; font-size: 0.875rem; }
.rest-icone { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--dourado-suave); font-size: 1.15rem; margin-bottom: 0.3rem; flex: none; }

.cardapio-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.6rem; margin-bottom: 1.5rem; }
.dia-cardapio { border: 1px solid var(--linha); border-radius: 12px; padding: 0.8rem 0.9rem; background: var(--superficie); min-width: 0; }
.dia-cardapio.hoje { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.dia-cardapio h3 { text-transform: capitalize; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.dia-cardapio h3 span { color: var(--suave); font-weight: 500; font-size: 0.8125rem; }
.dia-cardapio .cat { font-size: 0.6875rem; font-weight: 700; color: var(--dourado-texto); margin: 0.55rem 0 0.15rem; letter-spacing: 0.02em; }
.dia-cardapio ul { list-style: none; margin: 0; padding: 0; }
.dia-cardapio li { font-size: 0.875rem; padding: 0.15rem 0; display: flex; justify-content: space-between; gap: 0.3rem; align-items: flex-start; }
.dia-cardapio li em { font-style: normal; color: var(--suave); font-size: 0.75rem; }
.dia-cardapio li form { display: inline; }
.tag-semanal { font-style: normal; font-size: 0.625rem; font-weight: 700; color: var(--azul); background: var(--azul-suave); border-radius: 4px; padding: 0 0.3rem; vertical-align: middle; }
.remover { background: none; border: 0; color: var(--suave); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0.2rem; border-radius: 4px; }
.remover:hover { color: var(--perigo); background: var(--perigo-suave); }

.duas-colunas-largas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }
.painel-envio.aberto-fixo { padding: 1.1rem 1.2rem; }
.painel-envio.aberto-fixo h2 { color: var(--azul); }
.estreito-max { max-width: 32rem; margin-top: 1.5rem; }
.passos { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: 0.4rem; font-size: 0.875rem; color: var(--suave); }
.passos b { color: var(--azul); }
.cabeca-restaurante { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; margin: -0.5rem 0 1rem; }
.cabeca-restaurante .meta-chamado { margin: 0; }

.grade-restaurantes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.cartao-gestao { border: 1px solid var(--linha); border-radius: 16px; padding: 1.1rem 1.2rem; background: var(--superficie); display: flex; flex-direction: column; gap: 0.9rem; }
.cartao-gestao.inativo { opacity: .6; }
.cartao-gestao header { display: flex; gap: 0.75rem; align-items: center; }
.cartao-gestao header > div { flex: 1; min-width: 0; }
.cartao-gestao h2 { margin: 0; font-size: 1.0625rem; }
.cartao-gestao h2 a { color: var(--texto); }
.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; }
.numeros div { background: var(--superficie-2); border-radius: 10px; padding: 0.5rem 0.7rem; }
.numeros dt { font-size: 0.75rem; color: var(--suave); font-weight: 600; text-transform: capitalize; }
.numeros dd { margin: 0; font-weight: 700; }
.alerta-txt { color: var(--dourado-texto); }
.cartao-gestao footer form { display: inline; }
.permissoes { border-top: 1px dashed var(--linha); padding-top: 0.75rem; }
.permissoes .interruptor small { display: block; font-weight: 400; }

@media (max-width: 900px) {
  .lateral { top: 64px; background: var(--lateral); }
  .marca-sis { display: none; }
  .topo .logo-horizontal { height: 30px; }
  .conteudo { margin: 0.5rem; }
}
@media (max-width: 560px) {
  .escolha-almoco { grid-template-columns: 1fr; }
}
/* menu lateral ocupa a altura toda mesmo em páginas longas */
@media (min-width: 901px) {
  .estrutura { background: linear-gradient(to right, var(--lateral) 240px, transparent 240px); }
}

/* 1.4.0 — menu lateral sempre visível e nunca sobreposto */
@media (min-width: 901px) {
  .lateral { position: sticky; z-index: 20; grid-column: 1; grid-row: 1; }
  .conteudo { grid-column: 2; grid-row: 1; min-width: 0; }
  .calendario { isolation: isolate; }     /* cabeçalhos fixos da agenda ficam dentro do calendário */
}
html, body { overflow-x: clip; }

/* ============================================================
   1.4.0 — tarefas, bandeiras, painel de prazos, relatórios
   ============================================================ */
:root, [data-theme="light"] { --bandeira-vermelha: #D93B30; --bandeira-amarela: #E3A01B; --bandeira-verde: #2E9E6A; }
[data-theme="dark"] { --bandeira-vermelha: #F2665C; --bandeira-amarela: #F7A63A; --bandeira-verde: #4CC38A; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mt { margin-top: 1.75rem; }
.cor-verde { color: var(--verde) !important; } .cor-ambar { color: var(--dourado-texto) !important; } .cor-vermelho { color: var(--perigo) !important; }

.bandeira { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; font-weight: 700; vertical-align: middle; }
.bandeira svg { width: 18px; height: 18px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.bandeira-vermelha { color: var(--bandeira-vermelha); } .bandeira-amarela { color: var(--bandeira-amarela); } .bandeira-verde { color: var(--bandeira-verde); }
.tarefa-detalhe-topo .bandeira { padding: 0.25rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }

.barra-tarefas { display: flex; justify-content: flex-end; gap: 0.75rem; align-items: center; margin: -0.5rem 0 0.5rem; flex-wrap: wrap; }
.filtros.sem-margem { margin: 0; margin-right: auto; }
.contador-aba.alerta { background: var(--dourado); color: #2A1B47; }

.grupo-tarefas { margin-bottom: 1.5rem; }
.grupo-tarefas h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.grupo-tarefas h2 span { font-size: 0.75rem; color: var(--suave); background: var(--realce); border-radius: 999px; padding: 0 0.5rem; }
.grupo-vencida h2 { color: var(--perigo); }
.grupo-hoje h2 { color: var(--dourado-texto); }
.lista-tarefas2 { display: grid; gap: 0.45rem; max-width: 60rem; }

.tarefa-cartao {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center;
  padding: 0.7rem 0.95rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie);
  border-left: 4px solid var(--linha-forte); transition: box-shadow .15s, border-color .15s;
}
.tarefa-cartao:hover { box-shadow: var(--sombra); }
.tarefa-cartao.com-bandeira-vermelha { border-left-color: var(--bandeira-vermelha); }
.tarefa-cartao.com-bandeira-amarela { border-left-color: var(--bandeira-amarela); }
.tarefa-cartao.com-bandeira-verde { border-left-color: var(--bandeira-verde); }
.tarefa-cartao.sit-concluida-prazo, .tarefa-cartao.sit-concluida-atraso, .tarefa-cartao.sit-concluida, .tarefa-cartao.sit-cancelada { opacity: .8; }
.tarefa-cartao.sit-concluida-prazo .tarefa-titulo b, .tarefa-cartao.sit-concluida-atraso .tarefa-titulo b { text-decoration: line-through; text-decoration-color: var(--linha-forte); }
.tarefa-corpo { min-width: 0; color: var(--texto); }
.tarefa-corpo:hover { text-decoration: none; color: var(--texto); }
.tarefa-corpo:hover b { color: var(--azul); }
.tarefa-titulo { display: flex; align-items: center; gap: 0.4rem; }
.tarefa-titulo b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarefa-meta { display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-size: 0.8125rem; color: var(--suave); }
.tarefa-situacao { display: flex; align-items: center; gap: 0.4rem; }
.check-concluir { margin: 0; }
.bolinha {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha-forte); background: var(--superficie);
  display: grid; place-items: center; cursor: pointer; padding: 0; color: transparent; transition: all .15s;
}
.bolinha svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
button.bolinha:hover { border-color: var(--verde); color: var(--verde); background: var(--verde-suave); }
.bolinha.feita { background: var(--verde); border-color: var(--verde); color: #fff; cursor: default; }
.bolinha.vazia { cursor: default; border-style: dashed; }

.chip-sit { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; background: var(--realce); color: var(--suave); }
.chip-vencida { background: var(--perigo-suave); color: var(--perigo); }
.chip-hoje { background: var(--dourado-suave); color: var(--dourado-texto); }
.chip-amanha { background: var(--dourado-suave); color: var(--dourado-texto); }
.chip-no-prazo { background: var(--azul-suave); color: var(--azul); }
.chip-concluida-prazo { background: var(--verde-suave); color: var(--verde); }
.chip-concluida-atraso { background: var(--dourado-suave); color: var(--dourado-texto); }
.sorriso { flex: none; vertical-align: middle; }

/* detalhe */
.tarefa-detalhe { border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.25rem 1.35rem; margin-bottom: 1.5rem; }
.tarefa-detalhe-topo { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tarefa-detalhe-titulo { font-size: 1.375rem; margin: 0.75rem 0 1rem; }
.tarefa-descricao { white-space: pre-line; background: var(--superficie-2); border-radius: var(--raio); padding: 0.85rem 1rem; }
.selo-prazo-ok { display: flex; gap: 0.9rem; align-items: center; background: var(--verde-suave); border-radius: 14px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
.selo-prazo-ok b { display: block; color: var(--verde); font-size: 1.0625rem; }
.selo-prazo-ok span { color: var(--suave); font-size: 0.875rem; }
.botao-concluir { background: var(--verde); }
.botao-concluir:hover { background: #24835A; }
.botao-concluir svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tarefa-detalhe .linha-botoes form { margin: 0; }

/* formulário de tarefa */
.segmentado.pequeno { max-width: 260px; }
.segmentado.pequeno span { padding: 0.35rem; font-size: 0.875rem; }
.prazo-resumo { align-self: end; margin: 0 0 0.6rem; font-weight: 600; color: var(--azul); }
.bandeiras-escolha { gap: 0.25rem; }
.bandeiras-escolha label { flex-direction: row; align-items: center; gap: 0.55rem; padding: 0.4rem 0.6rem; border-radius: 8px; color: var(--texto); font-weight: 500; cursor: pointer; }
.bandeiras-escolha label:hover { background: var(--realce); }
.bandeiras-escolha label:has(input:checked) { background: var(--azul-suave); }
.bandeiras-escolha small { display: inline; font-weight: 400; }

/* comemoração */
.dialogo.parabens { width: min(400px, calc(100vw - 2rem)); overflow: visible; }
.parabens .dialogo-corpo { text-align: center; padding: 2rem 1.75rem 1.75rem; position: relative; }
.parabens h2 { font-size: 1.5rem; margin: 0.9rem 0 0.4rem; color: var(--verde); }
.parabens p { color: var(--suave); margin: 0 0 1.25rem; }
.sorriso-grande { display: block; margin: 0 auto; animation: pulinho .7s cubic-bezier(.3, 1.6, .5, 1) both; filter: drop-shadow(0 8px 18px rgba(224, 132, 20, .35)); }
@keyframes pulinho { from { transform: scale(.3) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.confete { position: absolute; left: 50%; top: 90px; width: 0; height: 0; pointer-events: none; }
.confete i { position: absolute; width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; animation: confete 1.3s ease-out var(--d) forwards; }
@keyframes confete { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 220px)) rotate(var(--r)); } }

/* KPIs e barras */
.kpis { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.kpis li { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 0.85rem 1rem; }
.kpis span { display: block; font-size: 0.8125rem; color: var(--suave); font-weight: 600; }
.kpis strong { display: block; font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpis small { font-size: 0.75rem; }
.kpis .kpi-destaque { background: var(--marinho); border-color: var(--marinho); }
.kpis .kpi-destaque span, .kpis .kpi-destaque small { color: #CFC2E6; }
.kpis .kpi-destaque strong { color: var(--dourado); }
.kpis.compacto { margin: 0; grid-template-columns: repeat(2, 1fr); }
.kpis.compacto strong { font-size: 1.5rem; }

.barra-pilha { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--realce); min-width: 120px; }
.barra-pilha i, .legenda-barras i { display: block; height: 100%; }
.b-ok { background: var(--verde); } .b-atraso { background: var(--dourado); } .b-vencida { background: var(--perigo); } .b-aberta { background: color-mix(in srgb, var(--azul) 35%, var(--realce)); }
.legenda-barras { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: center; font-size: 0.75rem; color: var(--suave); margin: 0.6rem 0 0; }
.legenda-barras i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -0.6rem; }
.tabela-desempenho .barra-celula { width: 40%; }

/* painel da tela inicial */
.painel-dash { border: 1px solid var(--linha); border-radius: 18px; padding: 1.25rem 1.35rem; margin-bottom: 2rem; background: linear-gradient(135deg, var(--superficie) 60%, color-mix(in srgb, var(--dourado-suave) 70%, var(--superficie))); }
.dash-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.dash-topo h2 { margin: 0; }
.dash-topo .nota { margin: 0.15rem 0 0; }
.dash-grade { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; margin-bottom: 1.25rem; }
.dash-anel {
  --p: 0; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--verde) calc(var(--p) * 1%), var(--realce) 0);
}
.dash-anel > div { width: 116px; height: 116px; border-radius: 50%; background: var(--superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dash-anel strong { font-size: 1.9rem; line-height: 1; }
.dash-anel span { font-size: 0.6875rem; color: var(--suave); font-weight: 600; max-width: 80px; margin-top: 0.2rem; }
.dash-pessoas { display: grid; gap: 0.35rem; }
.dash-pessoa { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 3.2rem; gap: 0.85rem; align-items: center; padding: 0.35rem 0.5rem; border-radius: 8px; color: var(--texto); }
.dash-pessoa:hover { background: var(--realce); text-decoration: none; color: var(--texto); }
.dp-nome { font-weight: 600; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.3rem; }
.dp-taxa { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.titulo-com-acao { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.titulo-com-acao h2 { margin: 0; }
.titulo-com-acao .botao { margin-left: auto; }

.campo-inline { flex-direction: row; align-items: center; gap: 0.4rem; }
.campo-inline input { width: auto; }
.tipo-hist { font-size: 0.75rem; font-weight: 700; color: var(--azul); background: var(--azul-suave); padding: 0.15rem 0.5rem; border-radius: 6px; white-space: nowrap; }
.so-impressao { display: none; }

@media (max-width: 700px) {
  .dash-grade { grid-template-columns: 1fr; justify-items: center; }
  .dash-pessoa { grid-template-columns: 1fr 3rem; }
  .dash-pessoa .barra-pilha { grid-column: 1 / -1; grid-row: 2; }
  .tarefa-cartao { grid-template-columns: auto 1fr; }
  .tarefa-situacao { grid-column: 2; }
}

/* impressão dos relatórios */
@media print {
  .topo, .lateral, .nao-imprimir, .faixa-aviso, .flash, dialog { display: none !important; }
  .estrutura { display: block; background: none !important; }
  .conteudo { margin: 0; border: 0; box-shadow: none; padding: 0; }
  .so-impressao { display: block; color: #555; }
  body { background: #fff; }
  .barra-pilha, .b-ok, .b-atraso, .b-vencida, .b-aberta, .kpis .kpi-destaque { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* escolher várias pessoas para a tarefa */
.para-quem legend small { display: inline; font-weight: 500; color: var(--suave); }
.chips-pessoas { display: flex; flex-wrap: wrap; gap: 0.4rem; max-height: 170px; overflow-y: auto; padding: 0.1rem; }
.chips-pessoas .chip span { font-weight: 600; font-size: 0.875rem; padding: 0.35rem 0.8rem; }
.chips-pessoas .chip span small { display: inline; font-weight: 500; opacity: .8; }
.chips-pessoas .chip input:checked + span small { color: inherit; }

/* ============================================================
   1.5.0 — Concord (conversas da equipe)
   ============================================================ */
.conteudo.conteudo-app { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.conteudo.conteudo-app > * { max-width: none; }
.conteudo.conteudo-app > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.conteudo.conteudo-app > .flash { margin: 0.75rem 0.75rem 0; }
.concord {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 230px; grid-template-rows: minmax(0, 1fr); flex: none;
  height: calc(100vh - 64px - 2rem - 2px); height: calc(100dvh - 64px - 2rem - 2px); min-height: 480px;
}
html:has(.concord), body:has(.concord) { overflow: hidden; }   /* a página não rola: só as listas e as mensagens */
@media (max-width: 900px), (max-height: 560px) { html:has(.concord), body:has(.concord) { overflow: auto; } }
.concord.sem-membros { grid-template-columns: 250px minmax(0, 1fr) 0; }
.concord.sem-membros .cc-membros { display: none; }

/* lateral de canais */
.cc-lateral { background: var(--superficie-2); border-right: 1px solid var(--linha); display: flex; flex-direction: column; min-height: 0; }
.cc-marca { display: flex; align-items: center; gap: 0.65rem; padding: 0.9rem 1rem 0.7rem; }
.cc-marca b { display: block; font-size: 1.0625rem; letter-spacing: -0.01em; }
.cc-marca small { color: var(--suave); font-size: 0.75rem; }
.cc-logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--marinho); color: var(--dourado); flex: none; }
.cc-logo svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .cc-logo { background: var(--dourado); color: var(--marinho); }
.cc-busca { margin: 0 0.75rem 0.5rem; width: calc(100% - 1.5rem); padding: 0.45rem 0.7rem; font-size: 0.875rem; }
.cc-rolagem { flex: 1; overflow-y: auto; padding: 0 0.5rem 0.75rem; }
.cc-grupo { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0.5rem 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--suave); }
.cc-mais { background: none; border: 0; color: var(--suave); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.1rem 0.35rem; border-radius: 6px; text-decoration: none; }
.cc-mais:hover { background: var(--realce); color: var(--texto); text-decoration: none; }
.cc-lista { display: flex; flex-direction: column; gap: 1px; }
.cc-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.55rem; border-radius: 8px; color: var(--suave); font-weight: 500; text-decoration: none; min-width: 0; }
.cc-item:hover { background: var(--realce); color: var(--texto); text-decoration: none; }
.cc-item.ativo { background: var(--azul-suave); color: var(--texto); font-weight: 600; }
.cc-item.nao-lido { color: var(--texto); font-weight: 700; }
.cc-item.arquivado { opacity: .6; }
.cc-item small { font-size: 0.6875rem; }
.cc-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-hash { color: var(--suave); font-weight: 700; font-size: 1.05rem; width: 16px; text-align: center; flex: none; }
.cc-badge { min-width: 20px; height: 18px; border-radius: 999px; background: var(--perigo); color: #fff; font-size: 0.6875rem; display: grid; place-items: center; padding: 0 5px; }
.cc-nada { font-size: 0.8125rem; color: var(--suave); padding: 0.3rem 0.55rem; margin: 0; }
.cc-supervisao-link { margin: 0.5rem 0.75rem 0.75rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--marinho); color: var(--dourado); font-weight: 600; font-size: 0.875rem; text-align: center; }
.cc-supervisao-link:hover { color: #fff; text-decoration: none; }

/* avatares e presença */
.cc-av { --cor: #7151AA; position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--cor); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.875rem; flex: none; }
.cc-av.mini { width: 30px; height: 30px; font-size: 0.6875rem; }
.cc-status { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--linha-forte); box-shadow: 0 0 0 2px var(--superficie-2); }
.cc-status.on { background: #2EB872; }

/* área principal */
.cc-principal { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--superficie); }
.cc-topo { display: flex; align-items: center; gap: 0.75rem; padding: 0 1rem; height: 54px; border-bottom: 1px solid var(--linha); flex: none; }
.cc-titulo { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; flex: 1; }
.cc-titulo b { font-size: 1.0625rem; white-space: nowrap; }
.cc-desc { color: var(--suave); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid var(--linha); padding-left: 0.6rem; margin-left: 0.3rem; }
.cc-desc:empty { display: none; }
.cc-acesso { font-size: 0.75rem; font-weight: 600; color: var(--suave); background: var(--realce); border-radius: 999px; padding: 0.15rem 0.6rem; white-space: nowrap; }
.cc-btn-membros, .cc-voltar { background: none; border: 0; color: var(--suave); cursor: pointer; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; }
.cc-btn-membros:hover, .cc-voltar:hover { background: var(--realce); color: var(--texto); }
.cc-btn-membros svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.cc-voltar { display: none; font-size: 1.5rem; }
.cc-faixa-sup { background: var(--marinho); color: var(--dourado); font-size: 0.8125rem; font-weight: 600; padding: 0.5rem 1rem; flex: none; }

.cc-mensagens { flex: 1; overflow-y: auto; padding: 0.5rem 0 1rem; scroll-behavior: auto; }
.cc-vazio-inicial, .cc-inicio { padding: 2rem 1.25rem 1rem; color: var(--suave); }
.cc-vazio-inicial b, .cc-inicio b { display: block; font-size: 1.25rem; color: var(--texto); margin-bottom: 0.25rem; }
.cc-carregar { text-align: center; padding: 0.75rem; }
.cc-carregar button { font: inherit; font-size: 0.8125rem; background: var(--realce); border: 0; border-radius: 999px; padding: 0.35rem 0.9rem; cursor: pointer; color: var(--texto); }
.cc-dia { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 1rem 0.35rem; color: var(--suave); font-size: 0.75rem; font-weight: 700; text-transform: capitalize; }
.cc-dia::before, .cc-dia::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.cc-msg { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 0.8rem; padding: 0.45rem 1rem 0.2rem; }
.cc-msg.junto { padding-top: 0.05rem; }
.cc-msg:hover { background: color-mix(in srgb, var(--realce) 65%, transparent); }
.cc-msg .cc-av { margin-top: 2px; }
.cc-hora-lado { font-size: 0.625rem; color: var(--suave); text-align: right; padding-top: 0.25rem; visibility: hidden; font-variant-numeric: tabular-nums; }
.cc-msg:hover .cc-hora-lado { visibility: visible; }
.cc-cab { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; }
.cc-cab b { font-size: 0.9375rem; }
.cc-cargo { font-size: 0.6875rem; font-weight: 600; color: var(--suave); background: var(--realce); border-radius: 4px; padding: 0 0.35rem; }
.cc-cab time { font-size: 0.75rem; color: var(--suave); }
.cc-texto { font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; }
.cc-texto.grande { font-size: 2rem; line-height: 1.2; }
.cc-texto code { font-size: 0.85em; padding: 0.1em 0.35em; }
.cc-mencao { background: var(--azul-suave); color: var(--azul); border-radius: 4px; padding: 0 0.15rem; font-weight: 600; }
.cc-mencao.eu { background: var(--dourado-suave); color: var(--dourado-texto); }
.cc-citacao { display: block; font-size: 0.8125rem; color: var(--suave); margin-bottom: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--linha-forte); padding-left: 0.5rem; }
.cc-citacao:hover { color: var(--texto); text-decoration: none; }
.cc-imagem { display: inline-block; margin-top: 0.35rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--linha); max-width: min(380px, 100%); }
.cc-imagem img { display: block; max-width: 100%; max-height: 300px; object-fit: contain; background: var(--superficie-2); }
.cc-baixar { display: block; font-size: 0.75rem; margin-top: 0.2rem; }
.cc-arquivo { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 0.35rem; padding: 0.6rem 0.85rem; border-radius: 10px; border: 1px solid var(--linha); background: var(--superficie-2); color: var(--texto); max-width: 380px; }
.cc-arquivo:hover { border-color: var(--azul); text-decoration: none; color: var(--texto); }
.cc-arquivo b { display: block; font-size: 0.875rem; color: var(--azul); word-break: break-all; }
.cc-arquivo small { font-size: 0.75rem; }
.cc-arq-icone { font-size: 1.6rem; }
.cc-reacoes { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.3rem; }
.cc-reacao { font: inherit; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.5rem; border-radius: 8px; border: 1px solid var(--linha); background: var(--superficie-2); cursor: pointer; color: var(--texto); }
.cc-reacao b { font-size: 0.75rem; }
.cc-reacao.minha { border-color: var(--azul); background: var(--azul-suave); }
.cc-reacao:hover { border-color: var(--linha-forte); }
.cc-acoes { position: absolute; top: -12px; right: 1rem; display: none; gap: 2px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 8px; padding: 2px; box-shadow: var(--sombra); }
.cc-msg:hover .cc-acoes { display: flex; }
.cc-acoes button { width: 30px; height: 28px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-size: 1rem; color: var(--texto); }
.cc-acoes button:hover { background: var(--realce); }
.cc-reacao-rapida { position: absolute; z-index: 40; display: flex; gap: 2px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; padding: 4px; box-shadow: var(--sombra-alta); }
.cc-reacao-rapida button { width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; font-size: 1.25rem; cursor: pointer; }
.cc-reacao-rapida button:hover { background: var(--realce); transform: scale(1.12); }

/* escrever */
.cc-compor { position: relative; padding: 0 1rem 0.6rem; flex: none; }
.cc-respondendo, .cc-anexo-escolhido { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--suave); background: var(--superficie-2); border: 1px solid var(--linha); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0.4rem 0.75rem; }
.cc-respondendo i { font-style: normal; }
.cc-respondendo button, .cc-anexo-escolhido button { background: none; border: 0; font-size: 1.1rem; color: var(--suave); cursor: pointer; }
.cc-caixa { display: flex; align-items: flex-end; gap: 0.35rem; background: var(--superficie-2); border: 1px solid var(--linha-forte); border-radius: 12px; padding: 0.35rem; }
.cc-caixa:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.cc-caixa textarea { flex: 1; border: 0; background: transparent; resize: none; padding: 0.45rem 0.4rem; max-height: 180px; box-shadow: none; line-height: 1.4; }
.cc-caixa textarea:focus { box-shadow: none; outline: none; }
.cc-icone-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 1.15rem; color: var(--suave); flex: none; padding: 0; }
.cc-icone-btn:hover { background: var(--realce); color: var(--texto); }
.cc-icone-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cc-enviar { width: 38px; height: 36px; border: 0; border-radius: 9px; background: var(--botao); color: var(--botao-texto); display: grid; place-items: center; cursor: pointer; flex: none; }
.cc-enviar:hover { background: var(--botao-hover); }
.cc-enviar:disabled { opacity: .5; }
.cc-enviar svg { width: 18px; height: 18px; fill: currentColor; }
.cc-dica { font-size: 0.6875rem; color: var(--suave); margin: 0.35rem 0.25rem 0; }
.cc-somente-leitura { margin: 0 1rem 0.9rem; padding: 0.75rem 1rem; border-radius: 10px; background: var(--superficie-2); border: 1px dashed var(--linha-forte); color: var(--suave); font-size: 0.875rem; text-align: center; flex: none; }
.cc-emojis { position: absolute; right: 1rem; bottom: calc(100% - 0.25rem); width: 330px; max-width: calc(100% - 2rem); background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: var(--sombra-alta); z-index: 30; overflow: hidden; }
.cc-emojis nav { display: flex; gap: 2px; padding: 0.35rem; border-bottom: 1px solid var(--linha); background: var(--superficie-2); }
.cc-emojis nav button { flex: 1; border: 0; background: none; font-size: 1.1rem; padding: 0.3rem; border-radius: 8px; cursor: pointer; opacity: .55; }
.cc-emojis nav button.ativa, .cc-emojis nav button:hover { opacity: 1; background: var(--realce); }
.cc-emoji-grade { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 0.4rem; max-height: 230px; overflow-y: auto; }
.cc-emoji-grade p { grid-column: 1 / -1; margin: 0.2rem 0.2rem 0.3rem; font-size: 0.6875rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: 0.04em; }
.cc-emoji-grade button { border: 0; background: none; font-size: 1.35rem; padding: 0.25rem 0; border-radius: 8px; cursor: pointer; }
.cc-emoji-grade button:hover { background: var(--realce); transform: scale(1.15); }

/* participantes */
.cc-membros { background: var(--superficie-2); border-left: 1px solid var(--linha); overflow-y: auto; padding: 0.9rem 0.6rem; }
.cc-acesso-info { font-size: 0.75rem; color: var(--suave); margin: 0 0.4rem 0.5rem; }
.cc-membros-tit { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--suave); margin: 0.9rem 0.4rem 0.35rem; }
.cc-membro { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.4rem; border-radius: 8px; }
.cc-membro:hover { background: var(--realce); }
.cc-membro.off { opacity: .55; }
.cc-membro > span:nth-child(2) { flex: 1; min-width: 0; }
.cc-membro b { display: block; font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-membro small { font-size: 0.6875rem; }
.cc-dm-rapida { visibility: hidden; border: 0; background: none; cursor: pointer; font-size: 0.95rem; padding: 0.2rem; border-radius: 6px; }
.cc-membro:hover .cc-dm-rapida { visibility: visible; }
.cc-pessoas { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; margin-top: 0.75rem; }
.cc-pessoa { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border: 0; background: none; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--texto); }
.cc-pessoa:hover { background: var(--realce); }
.cc-pessoa b { display: block; font-size: 0.9375rem; }
.cc-pessoa small { font-size: 0.75rem; }
.tabela-concord td:last-child { min-width: 320px; }

@media (max-width: 1150px) {
  .concord { grid-template-columns: 230px minmax(0, 1fr) 0; }
  .concord { position: relative; }
  .concord .cc-membros { display: none; }
  .concord.mostrar-membros .cc-membros { display: block; position: absolute; right: 0; top: 54px; bottom: 0; width: 250px; z-index: 6; box-shadow: var(--sombra-alta); }
}
@media (max-width: 900px) {
  .concord { grid-template-columns: 1fr; height: calc(100vh - 64px - 1rem); }
  .concord .cc-principal { display: none; }
  .concord.com-conversa .cc-lateral { display: none; }
  .concord.com-conversa .cc-principal { display: flex; }
  .cc-voltar { display: grid; }
  .cc-desc, .cc-acesso { display: none; }
}
/* celular: conteúdo ocupa a largura toda (o menu lateral abre por cima) */
@media (max-width: 900px) {
  .estrutura { grid-template-columns: minmax(0, 1fr); background: none; }
  .conteudo { grid-column: 1; }
  .cc-dica { display: none; }
  .cc-cargo { display: none; }
}
.abas { overflow-x: auto; scrollbar-width: thin; }
.abas a { white-space: nowrap; }

/* ============================================================
   1.6.0 — Agendamentos (submenu), reserva de salas, lembretes e ícones
   ============================================================ */
/* ícones dentro de botões, abas e títulos */
.botao .icone { width: 18px; height: 18px; margin-left: -0.15rem; }
.botao.pequeno .icone { width: 15px; height: 15px; }
h1 { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.conteudo > h1::after { flex-basis: 100%; max-width: 44px; margin-top: 0.1rem; }
.h1-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); flex: none; }
.h1-icone .icone { width: 24px; height: 24px; stroke-width: 1.8; }
h2 .icone { width: 18px; height: 18px; vertical-align: -3px; color: var(--azul); }
.titulo-com-acao { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.titulo-com-acao h2 { margin: 0; }
.abas-icones a { display: inline-flex; align-items: center; gap: 0.45rem; }
.abas-icones .icone { width: 18px; height: 18px; }
.dica .icone { width: 14px; height: 14px; vertical-align: -2px; }
.ficha dt .icone { width: 15px; height: 15px; vertical-align: -2px; margin-right: 0.2rem; }
legend .icone { width: 16px; height: 16px; vertical-align: -3px; }
legend small { display: inline; font-weight: 500; color: var(--suave); }
.vazio-icone { display: flex; gap: 1rem; align-items: center; }
.vazio-icone > .icone { width: 42px; height: 42px; color: var(--azul); flex: none; padding: 9px; border-radius: 12px; background: var(--azul-suave); box-sizing: content-box; }
.vazio-icone b { color: var(--texto); }
.vazio-icone p { margin: 0.2rem 0 0; }

/* submenu Agendamentos */
.menu-grupo { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a.menu-pai .seta { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; margin-left: auto; transition: transform .15s; opacity: .7; }
.menu-grupo.aberto .menu-pai .seta { transform: rotate(90deg); }
.lateral nav a.menu-pai.no-grupo { color: #fff; }
.lateral nav a.menu-pai.no-grupo .icone { color: var(--dourado); }
.submenu { display: none; flex-direction: column; gap: 2px; margin: 0 0 0.25rem 1.15rem; padding-left: 0.6rem; border-left: 1px solid rgba(255, 255, 255, .12); }
.menu-grupo.aberto .submenu, .menu-grupo:hover .submenu, .menu-grupo:focus-within .submenu { display: flex; }
.lateral nav .submenu a { padding: 0.42rem 0.65rem; font-size: 0.875rem; }
.lateral nav .submenu a .icone { width: 17px; height: 17px; }
.lateral nav .submenu a.ativo::before { left: -0.68rem; }

/* reserva: cartões das salas */
.salas-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.sala-cartao { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); color: var(--texto); transition: border-color .15s, box-shadow .15s; }
.sala-cartao:hover { border-color: var(--azul); text-decoration: none; color: var(--texto); }
.sala-cartao.ativa { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-suave); }
.sala-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--dourado-suave); color: var(--dourado-texto); flex: none; }
.sala-icone .icone { width: 22px; height: 22px; }
.sala-icone.pequeno { width: 30px; height: 30px; border-radius: 9px; display: inline-grid; vertical-align: middle; }
.sala-icone.pequeno .icone { width: 17px; height: 17px; }
.sala-cartao.ativa .sala-icone { background: var(--azul); color: #fff; }
.sala-info b { display: block; }
.sala-info small { display: block; font-size: 0.75rem; }
.sala-info .livre { color: var(--verde); font-weight: 700; }
.sala-info .ocupada { color: var(--perigo); font-weight: 700; }

.reserva-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.leg-livre, .leg-ocupado { font-weight: 700; padding: 0 0.35rem; border-radius: 4px; }
.leg-livre { background: var(--verde-suave); color: var(--verde); }
.leg-ocupado { background: var(--realce); color: var(--texto); }
.cal-reserva .cal-coluna:not(.passado) .cal-slot { cursor: not-allowed; }
.cal-reserva .cal-slot.livre { cursor: cell !important; background: color-mix(in srgb, var(--verde-suave) 45%, transparent); }
.cal-reserva .cal-slot.livre:hover { background: var(--verde-suave) !important; box-shadow: inset 3px 0 0 var(--verde); }
.cal-reserva .cal-slot.selecionado { background: var(--azul-suave) !important; box-shadow: inset 3px 0 0 var(--azul); }
.cal-reserva .cal-dia-titulo small { display: block; font-size: 0.6875rem; font-weight: 700; margin-top: 0.15rem; }
.cal-reserva .cal-dia-titulo small.tem-livre { color: var(--verde); }
.cal-reserva .cal-dia-titulo small.sem-livre { color: var(--perigo); }
.cal-evento.ocupacao { --cor: #7151AA; background: color-mix(in srgb, var(--cor) 14%, var(--superficie)); border-left-color: var(--cor); }
.cal-evento.ocupacao .por { font-weight: 600; color: var(--cor); }
.cal-evento.ocupacao.minha { box-shadow: 0 0 0 2px var(--dourado) inset, 0 1px 2px rgba(30, 18, 52,.08); }
.cal-evento.reserva { border-left-style: dashed; }

.painel-lateral { border: 1px solid var(--linha); border-radius: 14px; padding: 0.9rem 1rem; margin-bottom: 0.9rem; background: var(--superficie); }
.painel-lateral h2 { font-size: 0.9375rem; display: flex; align-items: center; gap: 0.45rem; }
.livres-dia { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; padding: 0.35rem 0; border-bottom: 1px dashed var(--linha); }
.livres-dia:last-child { border-bottom: 0; }
.livres-rotulo { width: 100%; font-size: 0.75rem; font-weight: 700; color: var(--suave); text-transform: capitalize; }
.chip-livre { font: inherit; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--verde) 40%, transparent); background: var(--verde-suave); color: var(--verde); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip-livre:hover { background: var(--verde); color: #fff; }
.chip-livre.lotado { border-color: transparent; background: var(--perigo-suave); color: var(--perigo); cursor: default; }
.lista-reservas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.lista-reservas li { display: flex; gap: 0.6rem; align-items: flex-start; }
.lista-reservas b { display: block; font-size: 0.875rem; }
.lista-reservas small { display: block; font-size: 0.75rem; }
.av-mini { --cor: #7151AA; width: 30px; height: 30px; border-radius: 50%; background: var(--cor); color: #fff; font-size: 0.6875rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.chip.fixo span { background: var(--azul); border-color: var(--azul); color: #fff; opacity: .85; }
.chip.indisponivel span { text-decoration: line-through; opacity: .55; }
.ocupado-chip { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--perigo); }

/* lembretes */
.lembretes-dia { margin-bottom: 1.5rem; max-width: 52rem; }
.lembretes-dia h2 { display: flex; align-items: baseline; gap: 0.6rem; }
.lembretes-dia h2 small { font-weight: 500; }
.lembretes-dia.hoje .dia-rotulo { color: var(--azul); }
.lista-lembretes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.lembrete { display: grid; grid-template-columns: 4.2rem auto 1fr auto; gap: 0.85rem; align-items: center; padding: 0.75rem 0.95rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); border-left: 4px solid var(--azul); }
.lembrete.origem-reserva { border-left-color: var(--dourado); }
.lembrete.origem-solicitacao { border-left-color: var(--roxo); }
.lembrete-hora b { display: block; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.lembrete-hora small { font-size: 0.75rem; }
.lembrete-icone { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); }
.origem-reserva .lembrete-icone { background: var(--dourado-suave); color: var(--dourado-texto); }
.origem-solicitacao .lembrete-icone { background: var(--roxo-suave); color: var(--roxo); }
.lembrete-icone .icone { width: 20px; height: 20px; }
.lembrete-corpo b { display: block; }
.lembrete-meta { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.8125rem; color: var(--suave); }
.lembrete-meta span, .lembrete-corpo small { display: inline-flex; align-items: center; gap: 0.25rem; }
.lembrete-meta .icone, .lembrete-corpo small .icone { width: 14px; height: 14px; }

@media (max-width: 1100px) { .reserva-layout { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .lembrete { grid-template-columns: auto 1fr; }
  .lembrete-icone { display: none; }
  .lembrete > .botao { grid-column: 1 / -1; justify-self: start; }
}
/* traço dourado abaixo do título (largura total, desenho de 44px) */
.conteudo > h1::after { flex: 0 0 100%; max-width: none !important; width: auto; height: 4px; background: linear-gradient(to right, var(--dourado) 44px, transparent 44px) !important; border-radius: 4px; margin-top: 0.15rem; }

/* ============================================================
   1.7.0 — Romaneio (entregas do motoboy)
   ============================================================ */
.form-entrega { max-width: 60rem; gap: 1.1rem; }
.cartao-form { border: 1px solid var(--linha); border-radius: 16px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; background: var(--superficie); }
.cartao-form h2 { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.grade-end { display: grid; grid-template-columns: 9rem 1fr 1fr 6rem; gap: 0.75rem 0.9rem; }
.grade-end .col-2 { grid-column: span 2; }
.grade-end small { font-weight: 500; }
.endereco-resumo { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--azul-suave); }
.endereco-resumo > span:nth-child(2) { flex: 1; font-weight: 600; }
.end-icone { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie); color: var(--azul); flex: none; }
.end-icone .icone { width: 18px; height: 18px; }
.linha-opcoes { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.linha-opcoes .volumes { flex-direction: row; align-items: center; gap: 0.5rem; }
.linha-opcoes .volumes input { width: 5rem; }

.aviso-whatsapp { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; margin-bottom: 1.25rem; background: #E7F8EE; border: 1px solid #A8E2C0; max-width: 60rem; }
[data-theme="dark"] .aviso-whatsapp { background: #123526; border-color: #1F6B45; }
.aviso-whatsapp > div { flex: 1; }
.aviso-whatsapp p { margin: 0.15rem 0 0; color: var(--suave); font-size: 0.875rem; }
.wa-icone { width: 46px; height: 46px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; flex: none; }
.wa-icone svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.6; }
.botao.botao-whatsapp { background: #1FA855; color: #fff; }
.botao.botao-whatsapp:hover { background: #178A45; color: #fff; }

.entrega-detalhe { border: 1px solid var(--linha); border-radius: 18px; padding: 1.25rem 1.35rem; max-width: 60rem; border-left: 5px solid var(--dourado); }
.entrega-detalhe.status-entregue { border-left-color: var(--verde); }
.entrega-detalhe.status-nao_entregue, .entrega-detalhe.status-cancelada { border-left-color: var(--perigo); }
.entrega-detalhe.status-coletado { border-left-color: var(--azul); }
.entrega-detalhe h2 { margin: 0.5rem 0 0.15rem; font-size: 1.35rem; }
.num-entrega { font-weight: 800; color: var(--suave); margin-right: 0.3rem; }
.entrega-detalhe .ficha { margin-top: 1rem; }
.entrega-detalhe .linha-botoes form { margin: 0; }

.lista-entregas { display: grid; gap: 0.5rem; max-width: 62rem; }
.entrega-linha { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.75rem 0.95rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); color: var(--texto); border-left: 4px solid var(--dourado); }
.entrega-linha:hover { box-shadow: var(--sombra); text-decoration: none; color: var(--texto); }
.entrega-linha.status-entregue { border-left-color: var(--verde); opacity: .85; }
.entrega-linha.status-coletado { border-left-color: var(--azul); }
.entrega-linha.status-nao_entregue, .entrega-linha.status-cancelada { border-left-color: var(--perigo); opacity: .75; }
.entrega-linha.urgente { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--perigo) 45%, transparent); }
.entrega-ordem { font-weight: 800; font-size: 1.15rem; text-align: center; color: var(--azul); line-height: 1.1; }
.entrega-ordem small { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: capitalize; color: var(--suave); }
.entrega-corpo b { display: block; }
.entrega-corpo small { display: block; font-size: 0.8125rem; }
.entrega-fim { text-align: right; }

/* tela do motoboy (celular primeiro) */
.moto-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 1rem; }
.moto-dia { display: flex; align-items: center; gap: 0.6rem; }
.moto-dia > div { text-align: center; min-width: 6.5rem; }
.moto-dia b { display: block; font-size: 1.15rem; text-transform: capitalize; }
.moto-placar { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.moto-placar span { background: var(--realce); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.875rem; }
.moto-placar .ok { background: var(--verde-suave); color: var(--verde); }
.moto-placar .ruim { background: var(--perigo-suave); color: var(--perigo); }
.moto-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; max-width: 46rem; }
.moto-card { border: 1px solid var(--linha); border-radius: 18px; padding: 1rem 1.1rem; background: var(--superficie); border-left: 6px solid var(--dourado); }
.moto-card.status-coletado { border-left-color: var(--azul); }
.moto-card.status-entregue { border-left-color: var(--verde); opacity: .7; }
.moto-card.status-nao_entregue { border-left-color: var(--perigo); opacity: .7; }
.moto-card.urgente { box-shadow: 0 0 0 2px color-mix(in srgb, var(--perigo) 40%, transparent); }
.moto-cab { display: flex; align-items: center; gap: 0.75rem; }
.moto-num { width: 36px; height: 36px; border-radius: 50%; background: var(--marinho); color: var(--dourado); display: grid; place-items: center; font-weight: 800; flex: none; }
.status-entregue .moto-num { background: var(--verde); color: #fff; }
.moto-titulo { flex: 1; min-width: 0; }
.moto-titulo b { display: block; font-size: 1.05rem; }
.moto-titulo small { font-size: 0.8125rem; }
.moto-end { font-size: 1rem; font-weight: 600; margin: 0.75rem 0 0.6rem; }
.moto-atalhos { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.moto-info { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.3rem 0.4rem; margin: 0 0 0.75rem; font-size: 0.9375rem; }
.moto-info dd { margin: 0; }
.moto-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; border-top: 1px dashed var(--linha); padding-top: 0.75rem; }
.moto-acoes form { margin: 0; }
.botao.grande { padding: 0.8rem 1.2rem; font-size: 1rem; }
.botao.botao-ok { background: var(--verde); color: #fff; }
.botao.botao-ok:hover { background: #24835A; }
.moto-form { flex: 1 1 100%; }
.moto-form summary { list-style: none; display: inline-flex; cursor: pointer; }
.moto-form summary::-webkit-details-marker { display: none; }
.moto-form[open] summary { margin-bottom: 0.6rem; }
.moto-form .formulario { background: var(--superficie-2); border-radius: 12px; padding: 0.85rem; }
.moto-ordem { margin-left: auto !important; display: flex; gap: 0.3rem; }

@media (max-width: 760px) {
  .grade-4 { grid-template-columns: 1fr 1fr; }
  .grade-end { grid-template-columns: 1fr 1fr; }
  .entrega-linha { grid-template-columns: 2.6rem 1fr; }
  .entrega-fim { grid-column: 2; text-align: left; }
  .aviso-whatsapp { flex-wrap: wrap; }
  .moto-ordem { margin-left: 0 !important; }
}
.moto-ordem .botao, .agenda-nav .botao.icone, .moto-dia .botao.icone, .filtros .botao.icone { height: 38px; min-width: 38px; padding: 0; line-height: 1; }

/* ============================================================
   1.8.0 — Telegram, conversa com o motoboy e app instalável
   ============================================================ */
.tg-icone { width: 44px; height: 44px; border-radius: 50%; background: #229ED9; color: #fff; display: grid; place-items: center; flex: none; }
.tg-icone svg { width: 24px; height: 24px; margin-left: -2px; }
.tg-icone.pequeno { width: 22px; height: 22px; display: inline-grid; vertical-align: middle; }
.tg-icone.pequeno svg { width: 13px; height: 13px; }
.aviso-telegram { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 16px; margin-bottom: 1.25rem; background: var(--dourado-suave); border: 1px solid color-mix(in srgb, var(--dourado) 50%, transparent); max-width: 60rem; }
.aviso-telegram.ok { background: #E6F4FB; border-color: #A9D8EF; }
[data-theme="dark"] .aviso-telegram.ok { background: #10314A; border-color: #1F5F86; }
.aviso-telegram p { margin: 0.15rem 0 0; color: var(--suave); font-size: 0.875rem; }
.status-bot { display: flex; gap: 0.9rem; align-items: center; padding: 0.85rem 1rem; border-radius: 14px; background: var(--superficie-2); border: 1px solid var(--linha); margin-bottom: 1.25rem; max-width: 46rem; }
.status-bot.ok { background: #E6F4FB; border-color: #A9D8EF; }
[data-theme="dark"] .status-bot.ok { background: #10314A; border-color: #1F5F86; }
.status-bot b { display: block; }
.status-bot small { font-size: 0.8125rem; color: var(--suave); }
.status-bot:not(.ok) .tg-icone { filter: grayscale(1); opacity: .6; }

.moto-conexoes { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.cartao-telegram { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border-radius: 16px; background: #229ED9; color: #fff; flex: 1 1 100%; max-width: 46rem; box-shadow: 0 6px 18px rgba(34, 158, 217, .3); }
.cartao-telegram:hover { color: #fff; text-decoration: none; background: #1B8BC1; }
.cartao-telegram .tg-icone { background: #fff; color: #229ED9; }
.cartao-telegram b { display: block; font-size: 1.05rem; }
.cartao-telegram small { color: #E3F3FB; font-size: 0.8125rem; }
.chip-conectado { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: #1B8BC1; background: #E6F4FB; border-radius: 999px; padding: 0.3rem 0.75rem 0.3rem 0.35rem; }
[data-theme="dark"] .chip-conectado { background: #10314A; color: #7CC8EE; }
.dica-ios { font-size: 0.875rem; background: var(--azul-suave); border-radius: 12px; padding: 0.6rem 0.85rem; margin-bottom: 1rem; max-width: 46rem; }

/* conversa recepção ↔ motoboy */
.conversa-motoboy { display: grid; grid-template-columns: 270px minmax(0, 1fr); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; height: calc(100vh - 320px); min-height: 420px; max-width: 70rem; }
.conversa-motoboy.so-thread { grid-template-columns: 1fr; height: 460px; max-width: 46rem; }
.conv-lista { background: var(--superficie-2); border-right: 1px solid var(--linha); overflow-y: auto; padding: 0.5rem; }
.conv-item { width: 100%; display: flex; gap: 0.6rem; align-items: flex-start; text-align: left; padding: 0.6rem; border: 0; background: none; border-radius: 10px; cursor: pointer; font: inherit; color: var(--texto); }
.conv-item:hover { background: var(--realce); }
.conv-item.ativo { background: var(--azul-suave); }
.conv-item > span:nth-child(2) { flex: 1; min-width: 0; }
.conv-item b { display: block; }
.conv-item small { display: block; font-size: 0.75rem; }
.conv-ultima { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto) !important; opacity: .75; }
.conv-principal { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); }
.conv-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--linha); }
.conv-topo .nota { margin: 0; }
.conv-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.45rem; background: color-mix(in srgb, var(--superficie-2) 60%, var(--superficie)); }
.conv-msg { display: flex; }
.conv-msg.minha { justify-content: flex-end; }
.conv-balao { max-width: 75%; padding: 0.5rem 0.75rem; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 1px 1px rgba(30, 18, 52, .04); }
.conv-msg.minha .conv-balao { background: var(--azul-suave); border-color: transparent; border-bottom-right-radius: 4px; }
.conv-msg.outra .conv-balao { border-bottom-left-radius: 4px; }
.conv-balao b { display: block; font-size: 0.75rem; color: var(--dourado-texto); }
.conv-balao p { margin: 0.1rem 0; overflow-wrap: anywhere; }
.conv-balao img { display: block; max-width: 240px; max-height: 240px; border-radius: 10px; margin-top: 0.3rem; }
.conv-balao time { display: block; text-align: right; font-size: 0.6875rem; color: var(--suave); }
.conv-ref { display: inline-block; font-size: 0.75rem; font-weight: 600; background: var(--dourado-suave); color: var(--dourado-texto); border-radius: 6px; padding: 0 0.35rem; margin-bottom: 0.15rem; }
.conv-form { display: flex; gap: 0.5rem; padding: 0.65rem; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.conv-form select { flex: 0 0 auto; width: auto; max-width: 16rem; }
.conv-form textarea { flex: 1; min-width: 12rem; resize: none; }
.conv-dica { margin: 0; padding: 0 1rem 0.65rem; }
.moto-conversa { margin-top: 2rem; }
@media (max-width: 760px) {
  .conversa-motoboy { grid-template-columns: 1fr; height: auto; }
  .conv-lista { max-height: 180px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .conv-msgs { height: 55vh; }
}
.cartao-telegram small b { display: inline; font-size: inherit; }

/* ============================================================
   1.9.0 — CRM e Follow-up
   ============================================================ */
.crm-barra { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.crm-resumo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crm-resumo li { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 0.45rem 0.85rem; }
.crm-resumo li.alerta { background: var(--dourado-suave); border-color: color-mix(in srgb, var(--dourado) 50%, transparent); }
.crm-resumo small { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: 0.03em; }
.crm-resumo b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.alternar-visao { display: inline-flex; background: var(--realce); border-radius: 10px; padding: 3px; }
.alternar-visao a { padding: 0.4rem 0.8rem; border-radius: 8px; color: var(--suave); font-weight: 600; font-size: 0.875rem; }
.alternar-visao a.ativa { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(30, 18, 52,.12); }
.alternar-visao a:hover { text-decoration: none; color: var(--texto); }

/* kanban */
.conteudo:has(.kanban) > * { max-width: none; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(205px, 1fr); gap: 0.75rem; overflow-x: auto; padding-bottom: 0.75rem; align-items: start; min-height: 60vh; }
.kb-coluna { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 290px); min-height: 200px; border-top: 4px solid var(--cor-etapa); }
.kb-cab { padding: 0.7rem 0.85rem 0.55rem; border-bottom: 1px solid var(--linha); }
.kb-cab > div { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.kb-cab b { font-size: 0.9375rem; }
.kb-cab small { font-weight: 700; color: var(--suave); }
.kb-cab > span { font-size: 0.75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.kb-lista { padding: 0.55rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; flex: 1; min-height: 80px; border-radius: 0 0 14px 14px; transition: background .15s; }
.kb-lista.sobre { background: var(--azul-suave); }
.kb-vazio { text-align: center; color: var(--suave); font-size: 0.8125rem; padding: 1rem 0.5rem; border: 2px dashed var(--linha-forte); border-radius: 10px; margin: 0; }
.kb-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: 11px; padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; box-shadow: 0 1px 2px rgba(30, 18, 52,.06); cursor: grab; border-left: 3px solid transparent; transition: box-shadow .15s, transform .15s; }
.kb-cartao[draggable="false"] { cursor: default; }
.kb-cartao:hover { box-shadow: 0 6px 16px rgba(30, 18, 52,.12); }
.kb-cartao.arrastando { opacity: .45; transform: rotate(1.5deg); }
.kb-cartao.temp-quente { border-left-color: #E8590C; }
.kb-cartao.temp-fria { border-left-color: #74A9D8; }
.kb-cartao.parado { background: linear-gradient(to right, color-mix(in srgb, var(--dourado-suave) 70%, var(--superficie)), var(--superficie)); }
.kb-titulo { font-weight: 700; color: var(--texto); line-height: 1.25; }
.kb-titulo:hover { color: var(--azul); }
.kb-org { font-size: 0.8125rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-valor { font-weight: 800; font-variant-numeric: tabular-nums; }
.kb-valor small { font-weight: 500; color: var(--suave); font-size: 0.75rem; }
.kb-rodape { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; margin-top: 0.25rem; }
.kb-prox { font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 6px; background: var(--azul-suave); color: var(--azul); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-prox.hoje { background: var(--verde-suave); color: var(--verde); }
.kb-prox.atrasada { background: var(--perigo-suave); color: var(--perigo); }
.kb-prox.sem { background: var(--dourado-suave); color: var(--dourado-texto); }
.kb-meta { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; font-size: 0.875rem; }
.kb-meta .av-mini { width: 24px; height: 24px; font-size: 0.625rem; }
.kb-dias { font-size: 0.6875rem; font-weight: 800; color: var(--dourado-texto); }
.kb-destinos { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 1.5rem 1.25rem 260px; background: linear-gradient(to top, rgba(18, 12, 30,.35), transparent); pointer-events: none; }
.kb-destino { pointer-events: auto; border-radius: 16px; padding: 1.1rem; text-align: center; font-weight: 800; font-size: 1.1rem; border: 3px dashed; backdrop-filter: blur(4px); transition: transform .15s; }
.kb-destino.ganho { background: rgba(46,158,106,.18); border-color: var(--verde); color: var(--verde); }
.kb-destino.perdido { background: rgba(210,69,59,.15); border-color: var(--perigo); color: var(--perigo); }
.kb-destino.sobre { transform: scale(1.03); background: var(--superficie); }

/* formulários do CRM */
.cartao-form legend { font-size: 0.9375rem; }
.grade-campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 0.9rem; }
.grade-campos .col-2 { grid-column: span 2; }
.rotulo-campo { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--suave); margin-bottom: 0.35rem; }
.segmentado.tres { grid-template-columns: repeat(3, 1fr); }
.segmentado input:disabled + span { opacity: .4; }
.tipos-atividade { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tipos-atividade .chip span { font-size: 0.8125rem; padding: 0.3rem 0.7rem; }
.destaque-proximo { border-color: color-mix(in srgb, var(--azul) 40%, var(--linha)); background: color-mix(in srgb, var(--azul-suave) 35%, var(--superficie)); }
.crm-acesso { flex: 1 1 100%; }
.crm-acesso select { max-width: 32rem; }

/* negócio */
.festa-ganho { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 16px; margin-bottom: 1rem; background: linear-gradient(120deg, #E3F5EC, #FFF0DB); border: 1px solid #A8E2C0; }
[data-theme="dark"] .festa-ganho { background: linear-gradient(120deg, #16372A, #3D2A12); border-color: #1F6B45; }
.festa-ganho .trofeu { font-size: 2.6rem; animation: pulo .8s ease-out 2; }
@keyframes pulo { 50% { transform: translateY(-8px) scale(1.1); } }
.festa-ganho p { margin: 0.15rem 0 0; }
.negocio-topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin: -0.75rem 0 1rem; }
.negocio-valor { font-size: 1.6rem; font-weight: 800; margin: 0.2rem 0 0; font-variant-numeric: tabular-nums; }
.negocio-valor small { font-size: 0.9rem; font-weight: 500; color: var(--suave); }
.negocio-valor span { font-size: 0.95rem; font-weight: 600; color: var(--suave); }
.negocio-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.negocio-acoes form { margin: 0; }
.botao.botao-ganho { background: var(--verde); color: #fff; }
.botao.botao-ganho:hover { background: #24835A; color: #fff; }
.botao.botao-perdido { background: var(--perigo-suave); color: var(--perigo); }
.botao.botao-perdido:hover { background: var(--perigo); color: #fff; }
.selo-grande { font-weight: 800; padding: 0.45rem 0.9rem; border-radius: 10px; }
.selo-grande.ganho { background: var(--verde-suave); color: var(--verde); }
.selo-grande.perdido { background: var(--perigo-suave); color: var(--perigo); }
.etapas-trilha { display: flex; margin-bottom: 1.25rem; overflow-x: auto; }
.etapas-trilha form { flex: 1; min-width: 120px; margin: 0; }
.etapas-trilha button { width: 100%; font: inherit; border: 0; cursor: pointer; padding: 0.55rem 0.5rem 0.55rem 1.4rem; background: var(--realce); color: var(--suave); text-align: left;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); margin-right: -10px; }
.etapas-trilha form:first-child button { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 0.8rem; border-radius: 10px 0 0 10px; }
.etapas-trilha button b { display: block; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etapas-trilha button small { font-size: 0.6875rem; }
.etapas-trilha .feita button { background: color-mix(in srgb, var(--cor-etapa) 30%, var(--superficie)); color: var(--texto); }
.etapas-trilha .atual button { background: var(--cor-etapa); color: #fff; }
.etapas-trilha button:not(:disabled):hover { filter: brightness(.95); }
.etapas-trilha button:disabled { cursor: default; }
.negocio-grade { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.negocio-lado .painel-lateral p { margin: 0 0 0.5rem; }
.negocio-lado .painel-lateral p small { display: block; }
.ficha.compacta { grid-template-columns: max-content 1fr; gap: 0.3rem 0.8rem; font-size: 0.875rem; margin: 0; }
.contato-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; }
.largo-total { width: 100%; }
.lista-atividades { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.lista-atividades.grande { max-width: 60rem; }
.atividade { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.75rem; align-items: start; padding: 0.75rem 0.9rem; border: 1px solid var(--linha); border-radius: 13px; background: var(--superficie); border-left: 4px solid var(--azul); }
.atividade.hoje { border-left-color: var(--verde); }
.atividade.atrasada { border-left-color: var(--perigo); background: color-mix(in srgb, var(--perigo-suave) 40%, var(--superficie)); }
.atividade.feita { border-left-color: var(--linha-forte); opacity: .8; }
.at-icone { font-size: 1.35rem; line-height: 1; width: 2.4rem; height: 2.4rem; border-radius: 10px; display: grid; place-items: center; background: var(--realce); }
.at-corpo b { display: block; }
.at-corpo small { font-size: 0.8125rem; }
.at-corpo p { margin: 0.3rem 0 0; font-size: 0.875rem; }
.at-corpo .resultado { color: var(--suave); font-style: italic; }
.at-acoes { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: flex-start; justify-content: flex-end; }
.at-acoes form { margin: 0; }
.adiar select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.8125rem; }
.concluir { grid-column: 1 / -1; }
.atividade .concluir { grid-column: auto; }
.concluir summary { list-style: none; cursor: pointer; }
.concluir summary::-webkit-details-marker { display: none; }
.concluir[open] { grid-column: 1 / -1; }
.concluir .formulario { margin-top: 0.6rem; background: var(--superficie-2); border-radius: 12px; padding: 0.85rem; }
.dia-sep { font-size: 0.8125rem; font-weight: 800; color: var(--suave); padding: 0.75rem 0 0.1rem; text-transform: capitalize; }
.nota-rapida { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 1rem; }
.nota-rapida textarea { flex: 1; }
.nota-texto { background: var(--dourado-suave); border-radius: 8px; padding: 0.35rem 0.55rem; }

/* painel */
.kpi-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.kpi { border: 1px solid var(--linha); border-radius: 14px; padding: 0.85rem 1rem; background: var(--superficie); display: flex; flex-direction: column; gap: 0.15rem; }
.kpi small { font-size: 0.75rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: 0.03em; }
.kpi b { font-size: 1.55rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi span { font-size: 0.8125rem; color: var(--suave); }
.kpi.principal { background: var(--marinho); color: #fff; border-color: var(--marinho); }
.kpi.principal small, .kpi.principal span { color: #E4DAF5; }
.kpi.principal b { color: var(--dourado); }
.kpi.alerta { background: var(--dourado-suave); border-color: color-mix(in srgb, var(--dourado) 50%, transparent); }
.kpi .meta { height: 8px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin-top: 0.35rem; }
.kpi .meta i { display: block; height: 100%; background: var(--dourado); border-radius: 999px; }
.dash-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dash-card { border: 1px solid var(--linha); border-radius: 16px; padding: 1rem 1.1rem; background: var(--superficie); min-width: 0; }
.dash-card.largo { grid-column: 1 / -1; }
.dash-card h2 { font-size: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }
.dash-card h2 small { font-weight: 500; color: var(--suave); font-size: 0.75rem; }
.funil { display: grid; gap: 0.4rem; }
.funil-linha { display: grid; grid-template-columns: 9.5rem 1fr 6.5rem; gap: 0.6rem; align-items: center; color: var(--texto); }
.funil-linha:hover { text-decoration: none; }
.funil-nome { font-size: 0.8125rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.funil-nome small { display: inline; margin-left: 0.3rem; }
.funil-barra { background: var(--realce); border-radius: 8px; height: 28px; overflow: hidden; }
.funil-barra i { display: flex; align-items: center; height: 100%; color: #fff; font-style: normal; font-weight: 800; font-size: 0.8125rem; padding-left: 0.5rem; border-radius: 8px; min-width: 26px; }
.funil-valor { text-align: right; font-weight: 700; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.colunas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.35rem; align-items: end; height: 210px; }
.col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 0.15rem; min-width: 0; }
.col-valor { font-size: 0.625rem; color: var(--suave); white-space: nowrap; }
.col-barra { width: 100%; max-width: 30px; flex: 1; display: flex; align-items: flex-end; }
.col-barra i { display: block; width: 100%; background: linear-gradient(to top, var(--azul), color-mix(in srgb, var(--azul) 60%, #fff)); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.col-mes { font-size: 0.625rem; color: var(--suave); }
.col-gp { font-size: 0.625rem; }
.barra-h { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto auto; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; font-size: 0.8125rem; }
.barra-h > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h-trilho { background: var(--realce); border-radius: 6px; height: 12px; overflow: hidden; }
.barra-h-trilho i { display: block; height: 100%; background: var(--perigo); border-radius: 6px; }
.barra-h.verde .barra-h-trilho i { background: var(--verde); }
.barra-h small { color: var(--suave); }
.tabela.compacta td, .tabela.compacta th { padding: 0.45rem 0.6rem; font-size: 0.8125rem; }
.linha-alerta td { color: var(--perigo); }
.cor-verde { color: var(--verde); }
.cor-vermelho { color: var(--perigo); }
.mt { margin-top: 1.25rem; }
.etapas-config input[type=color] { width: 40px; height: 34px; padding: 2px; }

@media (max-width: 1100px) {
  .kpi-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grade, .negocio-grade { grid-template-columns: 1fr; }
  .grade-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-destinos { padding-left: 1.5rem; }
}
@media (max-width: 640px) {
  .grade-campos { grid-template-columns: 1fr; }
  .grade-campos .col-2 { grid-column: auto; }
  .atividade { grid-template-columns: 2.4rem 1fr; }
  .at-acoes { grid-column: 1 / -1; justify-content: flex-start; }
  .funil-linha { grid-template-columns: 6rem 1fr 5rem; }
  .colunas { gap: 0.15rem; }
  .col-valor { display: none; }
}
.kb-marca { border: 2px dashed var(--azul); border-radius: 11px; background: var(--azul-suave); flex: none; }
.kb-cartao.arrastando { opacity: .35; }
.kb-valor small, .negocio-valor small, .kpi span small { display: inline; }
.dash-grade { align-items: start; }
.kpi span b { font-size: inherit; line-height: inherit; }

/* ============================================================
   2.0.0 — Reuniões online, convidados externos e lembrete 15 min
   ============================================================ */
.bloco-online { border-color: color-mix(in srgb, var(--azul) 45%, var(--linha)); background: color-mix(in srgb, var(--azul-suave) 40%, var(--superficie)); }
.linha-link { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.linha-link input { flex: 1; min-width: 14rem; }
.cartao-integracao .integracao-ok { display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--verde-suave); max-width: 40rem; }
.integracao-ok > div { flex: 1; }
.integracao-ok b, .integracao-ok small { display: block; }
.prov-icone { font-size: 1.6rem; }
.botao-prov.prov-google { border-color: #34A853; }
.botao-prov.prov-microsoft { border-color: #6264A7; }
.botao.desativado { opacity: .55; cursor: not-allowed; }
.alerta-navegador { margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); max-width: 40rem; }
.alerta-navegador p { margin: 0 0 0.6rem; }
.copiar-campo { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.copiar-campo code { padding: 0.45rem 0.7rem; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 8px; overflow-wrap: anywhere; }
/* página da reunião */
.reuniao-cartao { border: 1px solid var(--linha); border-radius: 18px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; max-width: 52rem; background: linear-gradient(135deg, var(--superficie), var(--azul-suave)); }
.reuniao-cartao.estado-agora { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.reuniao-cartao.estado-cancelada { opacity: .6; }
.reuniao-quando { display: flex; gap: 1rem; align-items: center; }
.reuniao-icone-grande { font-size: 2.6rem; }
.reuniao-quando b { display: block; font-size: 1.15rem; }
.reuniao-quando small { display: block; color: var(--suave); }
.reuniao-contagem { display: inline-block; margin-top: 0.35rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.reuniao-entrar { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1rem; }
.botao.botao-entrar { background: #1FA855; color: #fff; }
.botao.botao-entrar:hover { background: #178A45; color: #fff; }
.link-texto { margin: 0.5rem 0 0; overflow-wrap: anywhere; }
.duas-colunas-largas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 52rem; }
.lista-simples { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.lista-simples li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; }
/* aviso flutuante de reunião */
.avisos-reuniao { position: fixed; right: 1rem; bottom: 1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(380px, calc(100vw - 2rem)); }
.aviso-reuniao { position: relative; display: flex; gap: 0.75rem; padding: 0.9rem 2.2rem 0.9rem 0.95rem; border-radius: 16px; background: var(--marinho); color: #fff; box-shadow: 0 14px 34px rgba(18, 12, 30,.35); animation: entra-aviso .35s ease-out; }
@keyframes entra-aviso { from { transform: translateY(20px); opacity: 0; } }
.aviso-reuniao .ar-icone { font-size: 1.8rem; line-height: 1; }
.aviso-reuniao b { display: block; color: var(--dourado); }
.aviso-reuniao span { display: block; font-weight: 600; }
.aviso-reuniao small { display: block; color: #E4DAF5; }
.ar-botoes { display: flex; gap: 0.4rem; margin-top: 0.55rem; flex-wrap: wrap; }
.ar-botoes .botao.secundario { background: rgba(255,255,255,.12); color: #fff; border-color: transparent; }
.ar-fechar { position: absolute; top: 0.4rem; right: 0.5rem; background: none; border: 0; color: #E4DAF5; font-size: 1.3rem; cursor: pointer; }
.ar-permitir { position: absolute; left: 0; right: 0; bottom: -2rem; background: none; border: 0; color: var(--azul); font: inherit; font-size: 0.75rem; cursor: pointer; text-align: right; }
@media (max-width: 760px) { .duas-colunas-largas { grid-template-columns: 1fr; } }

/* ============================================================
   2.0.1 — CRM / Follow-Up na página inicial e gráfico em linha
   ============================================================ */
.crm-inicio { margin-bottom: 2rem; }
.crm-inicio-topo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.crm-inicio-topo h2 { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; }
.crm-inicio-topo h2 .icone { width: 22px; height: 22px; color: var(--azul); }
.crm-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; }
.crm-cartao { --fundo: #7151AA; --texto: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: 14px; overflow: hidden;
  background: var(--fundo); color: var(--texto); box-shadow: 0 6px 16px rgba(30, 18, 52,.14); transition: transform .15s, box-shadow .15s; min-height: 170px; }
.crm-cartao:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(30, 18, 52,.2); text-decoration: none; color: var(--texto); }
.crm-cartao .cc-nome { font-size: 1.05rem; font-weight: 600; padding: 1rem 0.6rem 0.2rem; line-height: 1.25; min-height: 3.4rem; display: flex; align-items: center; }
.crm-cartao .cc-num { font-size: 2.4rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.crm-cartao .cc-valor { font-size: 0.8125rem; opacity: .85; padding-bottom: 0.75rem; }
.crm-cartao .cc-ver { margin-top: auto; width: 100%; padding: 0.55rem; font-weight: 800; background: rgba(0,0,0,.1); }
.crm-cartao .cc-ver b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: currentColor; margin-left: 0.25rem; }
.crm-cartao .cc-ver b { color: var(--fundo); background: var(--texto); font-size: 0.75rem; }
.crm-cartao.total { --fundo: var(--superficie); --texto: var(--texto); border: 1px solid var(--linha); }
.crm-cartao.total .cc-ver { background: var(--realce); }
.crm-cartao.total .cc-ver b { color: var(--superficie); background: var(--texto); }
.crm-buscador { margin-top: 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.75rem 1rem; align-items: end; padding: 1rem 1.15rem 1.15rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 2px 6px rgba(30, 18, 52,.05); }
.crm-buscador h3 { grid-column: 1 / -1; margin: 0; font-size: 1.15rem; }
.crm-buscador-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crm-buscador .botao { white-space: nowrap; }
.bt-buscar { background: #3FA9D6; color: #fff; } .bt-buscar:hover { background: #2D93BF; color: #fff; }
.bt-limpar { background: var(--perigo); color: #fff; } .bt-limpar:hover { background: #B6372E; color: #fff; text-decoration: none; }
.bt-exportar { background: var(--verde); color: #fff; } .bt-exportar:hover { background: #24835A; color: #fff; text-decoration: none; }
.crm-grafico, .dash-linha { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1rem 1.1rem; }
.dash-linha { margin-bottom: 1rem; }
.crm-grafico-topo { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.crm-grafico-topo h2 { margin: 0; }
.alternar-visao.pequeno a { padding: 0.25rem 0.65rem; font-size: 0.8125rem; }
.grafico-linhas { width: 100%; height: auto; display: block; }
.gl-grade { stroke: var(--linha); stroke-width: 1; }
.gl-eixo { fill: var(--suave); font-size: 13px; font-family: inherit; }
.gl-linha { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.gl-area { opacity: .08; }
.gl-ponto { stroke: var(--superficie); stroke-width: 2.5; cursor: pointer; transition: r .15s; }
.gl-ponto:hover { r: 8; }
.gl-legenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center; margin-top: 0.4rem; font-size: 0.875rem; }
.gl-legenda i { display: inline-block; width: 22px; height: 4px; border-radius: 4px; vertical-align: middle; margin-right: 0.4rem; }
@media (max-width: 900px) { .crm-buscador { grid-template-columns: 1fr 1fr; } .crm-buscador-botoes { grid-column: 1 / -1; } }
@media (max-width: 560px) { .crm-buscador { grid-template-columns: 1fr; } .crm-cartoes { grid-template-columns: 1fr 1fr; } }
.crm-cartoes { grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 0.7rem; }
.crm-cartao .cc-nome { font-size: 0.95rem; padding: 0.85rem 0.5rem 0.15rem; overflow-wrap: anywhere; justify-content: center; }
.crm-cartao .cc-num { font-size: 2.15rem; }
.crm-cartao .cc-valor { font-size: 0.75rem; padding-left: 0.3rem; padding-right: 0.3rem; }
.crm-cartao.total .cc-ver b { color: #fff; background: var(--azul); }
.crm-cartao .cc-nome { align-self: stretch; text-align: center; hyphens: auto; }
.crm-cartao .cc-nome { display: block; min-height: 3.6rem; padding: 0.9rem 0.45rem 0.1rem; line-height: 1.2; }
.crm-cartao .cc-nome { white-space: normal; overflow: visible; text-overflow: clip; flex: none; }
.crm-buscador h3 small { font-weight: 500; font-size: 0.8125rem; margin-left: 0.4rem; }
.filtro-ativo { background: var(--azul-suave); border-radius: 10px; padding: 0.5rem 0.85rem; font-size: 0.875rem; margin: 0 0 0.9rem; }
.crm-inicio + .crm-barra { margin-top: 0.5rem; }

/* 2.0.3 — submenus abrem e fecham com clique (não mais ao passar o mouse) */
.menu-grupo:hover .submenu, .menu-grupo:focus-within .submenu { display: none; }
.menu-grupo.aberto .submenu { display: flex; }
.lateral nav .menu-pai { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.6rem 0.8rem; border: 0; border-radius: 10px; background: none; font: inherit;
  font-weight: 500; color: var(--lateral-texto); text-align: left; cursor: pointer; position: relative; }
.lateral nav .menu-pai span { flex: 1; }
.lateral nav .menu-pai .icone { color: var(--lateral-suave); }
.lateral nav .menu-pai:hover { background: var(--lateral-hover); color: #fff; }
.lateral nav .menu-pai:hover .icone { color: #fff; }
.lateral nav .menu-pai:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.lateral nav .menu-pai .seta { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; margin-left: auto; transition: transform .2s; opacity: .7; }
.menu-grupo.aberto .menu-pai .seta { transform: rotate(90deg); }
.lateral nav .menu-pai.no-grupo { color: #fff; }
.lateral nav .menu-pai.no-grupo .icone { color: var(--dourado); }
.menu-grupo .submenu { animation: abre-submenu .18s ease-out; }
@keyframes abre-submenu { from { opacity: 0; transform: translateY(-4px); } }

/* ============================================================
   3.0.0 — Dragão: cores do logo (roxo, laranja e preto),
   logo único nos dois temas e fundo em estilo mangá
   (retícula de pontos + linhas de ação) nas áreas brancas
   ============================================================ */
:root, [data-theme="light"] {
  --lateral: #5B3F96;
  --lateral-texto: #EFE8FA;
  --lateral-suave: #C9B8E8;
  --lateral-hover: rgba(255, 255, 255, .10);
  --lateral-ativo: rgba(20, 12, 36, .28);
  --preto: #17111F;
  --manga-reticula: none;
  --manga-linhas: none;
}
[data-theme="dark"] {
  --lateral: #1A1128;
  --lateral-texto: #D9CFEA;
  --lateral-suave: #8E7FAE;
  --lateral-hover: rgba(255, 255, 255, .06);
  --lateral-ativo: rgba(183, 155, 234, .16);
  --preto: #08050D;
  --manga-reticula: none;
  --manga-linhas: none;
}

/* logo: um arquivo só, com contorno preto, serve nos dois temas */
.logo, [data-theme="dark"] .logo { display: block; }
.topo .logo-horizontal { height: 44px; width: auto; }
.entrada-logo .logo-completo { width: min(320px, 82vw); filter: drop-shadow(0 6px 14px rgba(30, 18, 52, .18)); }

/* topo: faixa laranja → roxo e traço preto de quadrinho */
.topo::before { height: 4px; background: linear-gradient(90deg, #F39A1C 0%, #F39A1C 38%, #7151AA 100%); }
.topo { box-shadow: 0 2px 0 var(--preto); }

/* fundo mangá onde o sistema é branco: topo, área de conteúdo, caixas de diálogo e tela de entrada */
.topo {
  background-color: var(--superficie);
  background-image: var(--manga-linhas);
  background-repeat: no-repeat; background-position: right -40px top -260px; background-size: 520px auto;
}
.conteudo {
  background-color: var(--superficie);
  background-image: var(--manga-linhas), var(--manga-reticula);
  background-repeat: no-repeat, no-repeat;
  background-position: right top, left bottom;
  background-size: min(640px, 70%) auto, min(420px, 60%) auto;
}
.conteudo.conteudo-app { background-image: none; }
.dialogo {
  background-image: var(--manga-reticula);
  background-repeat: no-repeat; background-position: left bottom; background-size: 240px auto;
}
.tela-entrada {
  background:
    var(--manga-linhas) right top / min(720px, 90vw) auto no-repeat,
    var(--manga-reticula) left bottom / min(520px, 80vw) auto no-repeat,
    radial-gradient(900px 420px at 50% -10%, rgba(243, 154, 28, .20), transparent 70%),
    radial-gradient(700px 500px at 100% 110%, rgba(113, 81, 170, .18), transparent 70%),
    var(--fundo);
}
.form-entrada, .entrada-centro > form { border: 2px solid var(--preto); box-shadow: 6px 6px 0 var(--preto); }
.entrada-sis { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.9375rem; }

/* menu lateral roxo do logo, com retícula clara no rodapé */
.lateral {
  background-color: var(--lateral);
  background-image: none;
  background-repeat: no-repeat; background-position: left bottom; background-size: 260px auto;
}
.lateral nav a.ativo::before { background: #F39A1C; }
.lateral nav a.ativo .icone { color: #F7B955; }
.contador { box-shadow: 0 0 0 2px var(--lateral); }
@media (max-width: 900px) {
  .topo .logo-horizontal { height: 36px; }
  .lateral { background-color: var(--lateral); }
}
.entrada-logo { margin-bottom: 1.75rem; }

/* ============================================================
   1.1 — Escola: alunos, matrículas, entrada e saída,
   frequência (diário de classe) e notas por conceito
   ============================================================ */
.barra-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.barra-acoes .descricao, .barra-acoes h2 { margin: 0; }
.barra-acoes .botao .icone { width: 16px; height: 16px; }
.resumo-escola { margin-bottom: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.filtros.compacto { margin: 0; }
.perigo-txt { color: var(--perigo); }
.em-linha { display: inline; }
.lista-simples { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.4rem; }

/* foto do aluno */
.aluno-foto { width: 56px; height: 70px; border-radius: 10px; object-fit: cover; flex: none; background: var(--realce); border: 2px solid var(--preto); display: block; }
.aluno-foto.sem-foto { display: grid; place-items: center; font-weight: 700; color: var(--azul); background: var(--azul-suave); border-style: dashed; border-color: var(--linha-forte); }
.aluno-foto.mini { width: 34px; height: 34px; border-radius: 50%; border-width: 1px; font-size: 0.75rem; }
.aluno-foto.grande { width: 132px; height: 165px; border-radius: 14px; font-size: 2.25rem; box-shadow: 5px 5px 0 var(--preto); }
.aluno-foto.previa { width: 100%; height: 100%; border: 0; border-radius: 0; }
.aluno-linha { display: flex; align-items: center; gap: 0.6rem; color: var(--texto); font-weight: 600; }
.aluno-linha small { font-weight: 400; }

/* lista de alunos em cartões */
.grade-alunos { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.75rem; }
.cartao-aluno { display: flex; gap: 0.85rem; padding: 0.8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--texto); transition: border-color .12s, transform .12s; }
.cartao-aluno:hover { border-color: var(--azul); text-decoration: none; color: var(--texto); transform: translateY(-1px); }
.cartao-aluno.inativo { opacity: .6; }
.cartao-aluno b { display: block; line-height: 1.25; }
.cartao-aluno .marcas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }
.cartao-aluno .selo, .ficha-linha .selo { font-size: 0.6875rem; }
.aluno-escolhido { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie-2); }
.aluno-escolhido > div { flex: 1; }

/* ficha do aluno */
.ficha-aluno { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.75rem; }
.ficha-dados { flex: 1 1 18rem; min-width: 0; }
.ficha-dados h2 { margin: 0 0 0.35rem; }
.ficha-linha { display: flex; flex-wrap: wrap; gap: 0.5rem 0.85rem; align-items: center; margin: 0 0 0.5rem; }
.ficha-linha.suave { color: var(--suave); }
.ficha-linha .ra { font-weight: 700; font-variant-numeric: tabular-nums; background: var(--preto); color: #fff; padding: 0.15rem 0.6rem; border-radius: 6px; letter-spacing: 0.04em; }
.ficha-dados .linha-botoes { margin-top: 0.9rem; }
.ficha-indicadores { display: flex; gap: 0.75rem; }
.indicador { min-width: 8.5rem; padding: 0.85rem 1rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); text-align: center; }
.indicador b { display: block; font-size: 1.75rem; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--verde); }
.indicador.baixo b { color: var(--perigo); }
.indicador span { display: block; font-size: 0.8125rem; color: var(--suave); font-weight: 600; }
.botao-entrada { background: var(--verde); border-color: var(--verde); color: #fff; }
.botao-saida { background: var(--dourado); border-color: var(--dourado); color: #2A1B47; }
.botao-entrada:hover, .botao-saida:hover { filter: brightness(.94); }
.barra-freq { display: inline-block; width: 90px; height: 8px; border-radius: 8px; background: var(--realce); overflow: hidden; vertical-align: middle; }
.barra-freq i { display: block; height: 100%; width: var(--p); background: var(--verde); border-radius: 8px; }
.barra-freq.baixo i { background: var(--perigo); }
.par-ponto { display: inline-block; margin-right: 1rem; font-variant-numeric: tabular-nums; }
.ajuste-ponto { margin-top: 1rem; }
.ajuste-ponto summary { cursor: pointer; color: var(--azul); font-weight: 600; margin-bottom: 0.75rem; }

/* registro: foto e digital */
.registro-aluno summary .selo { margin-left: 0.5rem; font-size: 0.6875rem; }
.consentimento { display: grid; gap: 0.85rem; max-width: 46rem; }
.consentimento p { margin: 0; }
.consentimento .botao { justify-self: start; }
.registro-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; }
.registro-bloco h3 { margin: 0 0 0.75rem; font-size: 1.0625rem; }
.camera { display: grid; gap: 0.75rem; }
.camera-quadro { width: 200px; aspect-ratio: 4 / 5; border: 2px solid var(--preto); border-radius: 14px; overflow: hidden; background: var(--realce); display: grid; place-items: center; box-shadow: 5px 5px 0 var(--preto); }
.camera-quadro video, .camera-quadro canvas { width: 100%; height: 100%; object-fit: cover; }
.camera-quadro video { transform: scaleX(-1); }
.camera-vazia { color: var(--suave); font-size: 0.875rem; }
.digital-status { display: flex; gap: 0.85rem; align-items: center; padding: 0.85rem 1rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio); margin-bottom: 0.85rem; }
.digital-status.ok { border-style: solid; border-color: var(--verde); background: var(--verde-suave); }
.digital-icone { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); flex: none; }
.digital-status.ok .digital-icone { background: var(--verde); color: #fff; }
.digital-icone svg, .ponto-dedo svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* conceitos */
.conceito { --cc: var(--azul); display: inline-flex; align-items: center; gap: 0.4rem; min-width: 2.1rem; justify-content: center; padding: 0.15rem 0.55rem; border-radius: 8px; background: var(--cc); color: #fff; font-weight: 700; font-size: 0.875rem; line-height: 1.5; }
.conceito small { display: inline; color: inherit; font-weight: 500; opacity: .92; }
.conceito.vazio-c { background: var(--realce); color: var(--suave); }
.indicador .conceito { font-size: 1.25rem; padding: 0.2rem 0.8rem; }
.legenda-conceitos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center; font-size: 0.8125rem; color: var(--suave); margin: 0.85rem 0 1.25rem; }
.lancar-notas { display: grid; gap: 0.5rem; }
.linha-nota { display: grid; grid-template-columns: minmax(12rem, 1.1fr) auto minmax(12rem, 1.4fr); gap: 0.75rem 1rem; align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.escolha-conceito { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.escolha-conceito label { --cc: var(--suave); cursor: pointer; margin: 0; }
.escolha-conceito input { position: absolute; opacity: 0; pointer-events: none; }
.escolha-conceito span { display: grid; place-items: center; min-width: 2.6rem; height: 2.3rem; padding: 0 0.5rem; border-radius: 9px; border: 2px solid var(--cc); color: var(--cc); font-weight: 700; background: var(--superficie); transition: background .1s, color .1s; }
.escolha-conceito input:checked + span { background: var(--cc); color: #fff; box-shadow: 3px 3px 0 var(--preto); }
.escolha-conceito input:focus-visible + span { outline: 2px solid var(--azul); outline-offset: 2px; }
.escolha-conceito label.sem span { border-style: dashed; border-color: var(--linha-forte); color: var(--suave); }
.escolha-conceito label.sem input:checked + span { background: var(--realce); color: var(--suave); box-shadow: none; }
.lancar-notas > .linha-botoes { margin-top: 0.75rem; }
.lista-conceitos { display: grid; gap: 0.5rem; }
.linha-conceito { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; padding: 0.7rem 0.8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.linha-conceito.inativo { opacity: .6; }
.linha-conceito label { margin: 0; font-size: 0.8125rem; display: grid; gap: 0.2rem; width: 5.5rem; }
.linha-conceito label:nth-of-type(2) { width: 10rem; }
.linha-conceito label.cresce { flex: 1 1 14rem; width: auto; }
.linha-conceito input[type=color] { padding: 2px; height: 2.4rem; }
.como-fazer summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.como-fazer ol { padding-left: 1.2rem; display: grid; gap: 0.4rem; }

/* diário de classe */
.titulo-diario { margin: 0 0 0.75rem; }
.titulo-diario small { display: inline; font-weight: 500; margin-left: 0.5rem; }
.tabela.diario th.dia, .tabela.diario td.dia { text-align: center; padding: 0.4rem 0.2rem; min-width: 2.3rem; }
.tabela.diario th.dia small { font-weight: 500; }
.tabela.diario td.dia { font-weight: 700; }
.tabela.diario td.dia.p { color: var(--verde); background: var(--verde-suave); }
.tabela.diario td.dia.f { color: var(--perigo); background: var(--perigo-suave); }
.tabela.diario td.dia.fora { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--realce) 5px 7px); }

/* tela de entrada e saída */
.ponto { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); gap: 1.5rem; align-items: start; }
.ponto-painel { display: grid; gap: 1.1rem; }
.ponto-relogio { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.ponto-relogio b { font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ponto-relogio span { color: var(--suave); font-weight: 600; text-transform: capitalize; }
.ponto-resultado { min-height: 13.5rem; display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; border: 3px solid var(--preto); border-radius: 18px; background: var(--superficie-2); box-shadow: 7px 7px 0 var(--preto); }
.ponto-resultado b { display: block; font-size: 1.5rem; line-height: 1.2; }
.ponto-resultado div > span { display: block; color: var(--suave); }
.ponto-espera { display: grid; justify-items: center; text-align: center; gap: 0.3rem; width: 100%; }
.ponto-dedo { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--azul-suave); color: var(--azul); margin-bottom: 0.4rem; }
.ponto-dedo svg { width: 42px; height: 42px; }
.ponto-tipo { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; font-weight: 700; }
.ponto-resultado.ok-entrada { background: var(--verde-suave); border-color: var(--verde); box-shadow: 7px 7px 0 var(--verde); animation: surgir .18s ease-out; }
.ponto-resultado.ok-entrada .ponto-tipo { color: var(--verde); }
.ponto-resultado.ok-saida { background: var(--dourado-suave); border-color: var(--dourado); box-shadow: 7px 7px 0 var(--dourado); animation: surgir .18s ease-out; }
.ponto-resultado.ok-saida .ponto-tipo { color: var(--dourado-texto); }
.ponto-resultado.erro { background: var(--perigo-suave); border-color: var(--perigo); box-shadow: 7px 7px 0 var(--perigo); }
.ponto-resultado.erro .ponto-tipo { color: var(--perigo); }
.ponto-resultado.erro b { font-size: 1.1875rem; }
.ponto-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ponto-form input { flex: 1 1 12rem; font-size: 1.75rem; font-weight: 700; letter-spacing: 0.12em; text-align: center; padding: 0.7rem; font-variant-numeric: tabular-nums; }
.ponto-botao { font-size: 1.125rem; padding: 0.9rem 1.5rem; flex: 1 1 14rem; box-shadow: 4px 4px 0 var(--preto); }
.ponto-sugestoes { display: grid; gap: 0.35rem; margin-top: 0.5rem; }
.ponto-sugestoes button { display: flex; align-items: center; gap: 0.7rem; text-align: left; padding: 0.5rem 0.7rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit; }
.ponto-sugestoes button:hover { border-color: var(--azul); }
.ponto-hoje { border: 1px solid var(--linha); border-radius: var(--raio-grande); background: var(--superficie); padding: 1rem; }
.ponto-hoje header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.ponto-hoje h2 { margin: 0; }
.ponto-hoje ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; max-height: 60vh; overflow-y: auto; }
.ponto-hoje li { display: flex; align-items: center; gap: 0.6rem; }
.ponto-hoje li > span:nth-child(2) { flex: 1; min-width: 0; }
.ponto-hoje li .selo { font-size: 0.6875rem; white-space: nowrap; }
.ponto-hoje .ver-todas { display: block; margin-top: 0.85rem; font-size: 0.875rem; }

@media (max-width: 900px) {
  .ponto { grid-template-columns: 1fr; }
  .linha-nota { grid-template-columns: 1fr; }
  .ficha-indicadores { width: 100%; }
  .indicador { flex: 1; }
  .aluno-foto.grande { width: 104px; height: 130px; }
}
@media print {
  .topo, .lateral, .filtros, .abas, .avisos-reuniao, .nota, .conteudo > h1 .h1-icone { display: none !important; }
  .estrutura { display: block; }
  .conteudo { margin: 0; padding: 0; border: 0; box-shadow: none; background: #fff !important; }
  .tabela.diario { font-size: 10px; }
  .tabela.diario td, .tabela.diario th { border: 1px solid #999; }
}
.indicador .conceito { display: inline-flex; color: #fff; font-weight: 700; }

/* ============================================================
   1.2 — Professores e equipe, salas, vagas e Painel de aulas
   ============================================================ */
.indicador b.neutro { color: var(--azul); }
.aluno-foto.bolha { width: 42px; height: 42px; border-radius: 50%; border-width: 2px; font-size: 0.8125rem; }
.aluno-foto.circulo { width: 84px; height: 84px; border-radius: 50%; border-width: 3px; font-size: 1.5rem; }
.aluno-foto.circulo.grande-c { width: 112px; height: 112px; font-size: 2rem; box-shadow: 5px 5px 0 var(--preto); }
.bolhas { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.bolhas a { display: block; border-radius: 50%; transition: transform .12s; }
.bolhas a:hover { transform: scale(1.12); }
.bolha-vaga { width: 42px; height: 42px; border-radius: 50%; border: 2px dashed var(--linha-forte); background: var(--superficie-2); }
.vagas { display: inline-block; font-size: 0.6875rem; font-weight: 700; padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--verde-suave); color: var(--verde); white-space: nowrap; }
.vagas.poucas { background: var(--dourado-suave); color: var(--dourado-texto); }
.vagas.lotada { background: var(--perigo-suave); color: var(--perigo); }
.vagas.sem-limite { background: var(--realce); color: var(--suave); }
.ocupacao { display: inline-block; width: 70px; height: 7px; border-radius: 7px; background: var(--realce); overflow: hidden; vertical-align: middle; }
.ocupacao i { display: block; height: 100%; width: var(--p); background: var(--azul); border-radius: 7px; }

/* salas */
.grade-salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.cartao-sala { border: 1px solid var(--linha); border-radius: var(--raio-grande); background: var(--superficie); padding: 1rem; }
.cartao-sala.nova { border-style: dashed; background: var(--superficie-2); }
.cartao-sala.inativo { opacity: .6; }
.form-sala { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; margin-bottom: 0.75rem; }
.form-sala label { margin: 0; font-size: 0.8125rem; display: grid; gap: 0.2rem; flex: 1 1 8rem; }
.form-sala label:nth-of-type(2) { flex: 0 0 8.5rem; }
.form-sala label.cresce { flex: 1 1 100%; }
.uso-sala { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.uso-sala li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; padding-top: 0.5rem; border-top: 1px dashed var(--linha); font-size: 0.875rem; }
.uso-sala li > span:nth-child(2) { flex: 1 1 100%; color: var(--suave); }
.uso-sala small { display: inline; }

/* escolha de professor, dias e vagas na matrícula */
.escolha-turma { display: grid; gap: 0.85rem; margin-bottom: 1rem; }
.filtro-prof { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtro-prof button { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; }
.filtro-prof button:first-child { padding-left: 0.8rem; }
.filtro-prof button.ativo { background: var(--azul); border-color: var(--azul); color: var(--botao-texto); }
.grade-vagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 0.65rem; }
.cartao-vaga { position: relative; display: grid; gap: 0.5rem; padding: 0.8rem; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--superficie); cursor: pointer; margin: 0; transition: border-color .12s, box-shadow .12s; }
.cartao-vaga[hidden] { display: none; }
.cartao-vaga input { position: absolute; opacity: 0; pointer-events: none; }
.cartao-vaga:hover { border-color: var(--azul); }
.cartao-vaga:has(input:checked) { border-color: var(--preto); box-shadow: 4px 4px 0 var(--preto); background: var(--azul-suave); }
.cartao-vaga:has(input:focus-visible) { outline: 2px solid var(--azul); outline-offset: 2px; }
.cartao-vaga.cheia { opacity: .55; cursor: not-allowed; }
.cv-topo { display: flex; align-items: center; gap: 0.55rem; }
.cv-topo b { display: block; line-height: 1.2; }
.cv-dias { display: flex; gap: 0.2rem; }
.cv-dias i { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: 6px; font-style: normal; font-size: 0.75rem; font-weight: 700; background: var(--realce); color: var(--linha-forte); }
.cv-dias i.sim { background: var(--dourado); color: #2A1B47; }
.cv-hora { font-weight: 600; font-size: 0.875rem; }
.cv-vagas { display: flex; align-items: center; gap: 0.4rem; }
.cv-vagas small { display: inline; }

/* cartelas (professor e aluno) */
.cartela-prof { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.75rem; }
.slot-aula { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.8rem; background: var(--superficie); }
.slot-aula header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.slot-aula p { margin: 0.2rem 0 0.6rem; color: var(--suave); font-size: 0.875rem; }
.cartela-aluno { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.ca-dia { border: 1px solid var(--linha); border-radius: var(--raio); padding: 0.6rem; background: var(--superficie-2); min-height: 6.5rem; }
.ca-dia.tem { background: var(--superficie); border-color: var(--azul); }
.ca-dia.hoje h3 { color: var(--dourado-texto); }
.ca-dia h3 { margin: 0 0 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); }
.ca-aula { display: flex; gap: 0.5rem; align-items: flex-start; }
.ca-aula b { display: block; font-size: 0.875rem; }
.ca-livre { color: var(--linha-forte); }

/* painel de aulas */
.quadro { display: grid; gap: 1.25rem; }
.q-kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.75rem; }
.q-kpis li { border: 2px solid var(--preto); border-radius: 14px; padding: 0.8rem 1rem; background: var(--superficie); box-shadow: 4px 4px 0 var(--preto); display: grid; justify-items: start; gap: 0.1rem; }
.q-kpis b { font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.q-kpis span { font-size: 0.8125rem; font-weight: 600; color: var(--suave); }
.q-kpis li.bom b { color: var(--verde); } .q-kpis li.alerta b { color: var(--perigo); }
.q-kpis li:first-child { background: var(--azul); border-color: var(--preto); } .q-kpis li:first-child b, .q-kpis li:first-child span { color: #fff; }
.q-anel { --p: 0; width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--dourado) calc(var(--p) * 1%), var(--realce) 0); }
.q-anel b { font-size: 0.8125rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; }
.q-profs { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }
.q-prof { display: grid; justify-items: center; gap: 0.2rem; width: 8.5rem; padding: 0.75rem 0.4rem; border: 2px solid transparent; border-radius: 16px; background: none; color: var(--texto); font: inherit; cursor: pointer; text-align: center; transition: transform .15s, background .15s; }
.q-prof:hover { background: var(--realce); transform: translateY(-2px); }
.q-prof b { line-height: 1.2; }
.q-foto { position: relative; display: block; }
.q-conta { position: absolute; right: -4px; bottom: -2px; min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 999px; display: grid; place-items: center; background: var(--dourado); color: #2A1B47; font-style: normal; font-weight: 700; font-size: 0.8125rem; border: 2px solid var(--preto); }
.q-prof.ativo { border-color: var(--preto); background: var(--azul-suave); box-shadow: 4px 4px 0 var(--preto); }
.q-prof.ativo .aluno-foto { border-color: var(--dourado); }
.com-selecao .q-prof:not(.ativo) { opacity: .55; }
.com-selecao .q-prof:not(.ativo):hover { opacity: 1; }
.q-painel { border: 2px solid var(--preto); border-radius: 18px; background: var(--superficie); box-shadow: 6px 6px 0 var(--preto); padding: 1.1rem; }
.q-painel.entrou { animation: q-abrir .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes q-abrir { from { opacity: 0; transform: translateY(-10px) scale(.98); } }
.q-painel.entrou .q-aula { animation: q-abrir .4s backwards; }
.q-painel.entrou .q-dia:nth-child(2) .q-aula { animation-delay: .05s; } .q-painel.entrou .q-dia:nth-child(3) .q-aula { animation-delay: .1s; }
.q-painel.entrou .q-dia:nth-child(4) .q-aula { animation-delay: .15s; } .q-painel.entrou .q-dia:nth-child(5) .q-aula { animation-delay: .2s; } .q-painel.entrou .q-dia:nth-child(n+6) .q-aula { animation-delay: .25s; }
.q-cab { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.q-cab h2 { margin: 0; font-size: 1.375rem; } .q-cab p { margin: 0; color: var(--suave); }
.q-alunos-prof { flex: 1 1 16rem; padding-left: 1.25rem; border-left: 3px solid var(--dourado); }
.q-alunos-prof > span { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); margin-bottom: 0.35rem; }
.q-cartela { display: grid; grid-template-columns: repeat(var(--colunas), minmax(9.5rem, 1fr)); gap: 0.6rem; overflow-x: auto; padding-bottom: 0.25rem; }
.q-dia { background: var(--superficie-2); border-radius: 12px; padding: 0.6rem; display: grid; gap: 0.5rem; align-content: start; min-height: 9rem; }
.q-dia h3 { margin: 0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--suave); text-align: center; padding-bottom: 0.4rem; border-bottom: 2px solid var(--linha); }
.q-dia.hoje h3 { color: #2A1B47; background: var(--dourado); border-radius: 6px; padding: 0.25rem; border-bottom: 0; }
.q-dia.vazio { opacity: .6; }
.q-folga { margin: 0; text-align: center; color: var(--linha-forte); font-size: 0.8125rem; padding-top: 1.5rem; }
.q-aula { border: 1px solid var(--linha); border-left: 4px solid var(--azul); border-radius: 10px; background: var(--superficie); padding: 0.55rem 0.6rem; display: grid; gap: 0.35rem; }
.q-aula.lotada { border-left-color: var(--perigo); }
.q-aula header { display: flex; justify-content: space-between; align-items: center; gap: 0.3rem; }
.q-aula header b { font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .q-aula header small { display: inline; font-weight: 500; }
.q-aula p { margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; }
.q-aula .bolha, .q-aula .bolha-vaga { width: 34px; height: 34px; font-size: 0.6875rem; }
.q-aula .ocupacao { width: 100%; }
.q-num { text-align: right; }
.q-vagas h2 small { display: inline; font-weight: 500; margin-left: 0.4rem; }
.q-tabela-vagas th.hoje { color: var(--dourado-texto); }
.q-tabela-vagas td { vertical-align: top; }
.q-chip { display: block; margin: 0.15rem 0; padding: 0.2rem 0.5rem; border-radius: 8px; font-size: 0.75rem; background: var(--verde-suave); color: var(--verde); font-weight: 600; white-space: nowrap; }
.q-chip b { color: var(--texto); }
.q-chip.poucas { background: var(--dourado-suave); color: var(--dourado-texto); }
.q-chip.lotada { background: var(--perigo-suave); color: var(--perigo); }

/* segunda tela (TV / monitor): sem menu, letras maiores */
.quadro-tela { background: var(--manga-linhas) right top / 760px auto no-repeat, var(--manga-reticula) left bottom / 520px auto no-repeat, var(--fundo); min-height: 100vh; }
.qt-topo { display: flex; align-items: center; gap: 1.25rem; padding: 0.9rem 1.75rem; background: var(--superficie); border-bottom: 3px solid var(--preto); }
.qt-topo .logo { height: 54px; width: auto; }
.qt-topo h1 { margin: 0; font-size: 1.625rem; }
.qt-relogio { margin-left: auto; font-weight: 700; text-transform: capitalize; font-variant-numeric: tabular-nums; }
.qt-corpo { padding: 1.5rem 1.75rem 2rem; }
.quadro-tela .quadro { font-size: 1.0625rem; }
.quadro-tela .q-prof { width: 10rem; }
.quadro-tela .aluno-foto.circulo { width: 100px; height: 100px; }
.quadro-tela .q-aula .bolha, .quadro-tela .q-aula .bolha-vaga { width: 44px; height: 44px; }

@media (max-width: 900px) {
  .q-cartela { grid-template-columns: repeat(var(--colunas), 11rem); }
  .q-alunos-prof { border-left: 0; padding-left: 0; }
  .q-prof { width: 6.8rem; }
  .aluno-foto.circulo { width: 68px; height: 68px; }
}
@media print { .q-profs, .barra-acoes .linha-botoes { display: none !important; } .q-painel[hidden] { display: block !important; box-shadow: none; break-inside: avoid; margin-bottom: 1rem; } }

/* ============================================================
   1.3 — Administração: financeiro, material e estoque, documentos,
   vendas (BI) e desenhos de mangá no fundo
   ============================================================ */
:root, [data-theme="light"] { --manga-desenhos: none; }
[data-theme="dark"] { --manga-desenhos: none; }
/* desenhos de mangá bem claros no fundo das telas (fora da barra lateral) */
body { background-image: var(--manga-desenhos); background-size: 560px auto; background-attachment: fixed; }
.conteudo {
  background-image: var(--manga-linhas), var(--manga-reticula), var(--manga-desenhos);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: right top, left bottom, 40px 30px;
  background-size: min(640px, 70%) auto, min(420px, 60%) auto, 620px auto;
}
.conteudo.conteudo-app { background-image: none; }
.tela-entrada {
  background:
    var(--manga-linhas) right top / min(720px, 90vw) auto no-repeat,
    var(--manga-reticula) left bottom / min(520px, 80vw) auto no-repeat,
    var(--manga-desenhos) 20px 20px / 560px auto repeat,
    radial-gradient(900px 420px at 50% -10%, rgba(243, 154, 28, .20), transparent 70%),
    radial-gradient(700px 500px at 100% 110%, rgba(113, 81, 170, .18), transparent 70%),
    var(--fundo);
}
.quadro-tela { background: var(--manga-linhas) right top / 760px auto no-repeat, var(--manga-reticula) left bottom / 520px auto no-repeat, var(--manga-desenhos) 0 0 / 620px auto repeat, var(--fundo); }
/* os blocos com texto e tabelas ficam opacos, para a leitura não disputar com o desenho */
.tabela-rolagem, .painel-envio, .q-kpis li, .bi-cartao { background-color: var(--superficie); }

.lateral .grupo-menu { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, .14); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; }

/* indicadores com valores em dinheiro */
.fin-kpis b { font-size: 1.5rem; }
.fin-kpis li:first-child { background: var(--superficie); } .fin-kpis li:first-child b { color: var(--texto); } .fin-kpis li:first-child span { color: var(--suave); }
.grade-fin { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.6rem; }
.cartao-fin { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 0.85rem; border: 1px solid var(--linha); border-left: 5px solid var(--verde); border-radius: var(--raio); background: var(--superficie); color: var(--texto); }
.cartao-fin:hover { text-decoration: none; color: var(--texto); border-color: var(--azul); border-left-color: var(--verde); }
.cartao-fin.atraso { border-left-color: var(--perigo); background: color-mix(in srgb, var(--perigo-suave) 55%, var(--superficie)); }
.cartao-fin.atraso:hover { border-left-color: var(--perigo); }
.cartao-fin b { line-height: 1.25; }
.fin-linha { display: block; font-size: 0.8125rem; margin-top: 0.2rem; }
.fin-linha .selo { font-size: 0.6875rem; }

/* alerta de pagamento na tela de ponto */
.ponto-resultado.com-pendencia { flex-wrap: wrap; border-color: var(--perigo); box-shadow: 7px 7px 0 var(--perigo); }
.ponto-pendencia { flex: 1 1 100%; margin: 0; padding: 0.6rem 0.9rem; border-radius: 10px; background: var(--perigo); color: #fff; font-weight: 700; font-size: 1.0625rem; }

/* material e estoque */
.estoque { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.estoque.baixo { color: var(--perigo); }
.form-mov { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.form-mov select { width: 10.5rem; } .form-mov input[type=number] { width: 4.8rem; } .form-mov input:not([type]) { width: 11rem; }
.form-mov select, .form-mov input { padding: 0.35rem 0.5rem; font-size: 0.8125rem; }
.entrega { display: grid; gap: 1rem; max-width: 52rem; }
.entrega h2 { margin: 0.5rem 0 0; font-size: 1.0625rem; }
.grade-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.5rem; }
.item-entrega { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.6rem 0.75rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.item-entrega:has(input:not([value="0"]):valid:not(:placeholder-shown)) { border-color: var(--linha); }
.item-entrega.sem { opacity: .5; }
.item-entrega input { width: 4.6rem; text-align: center; font-weight: 700; font-size: 1.0625rem; }
.assinatura { display: grid; gap: 0.6rem; }
.assinatura canvas { width: min(100%, 640px); aspect-ratio: 640 / 220; border: 2px solid var(--preto); border-radius: 12px; background: #fff; box-shadow: 5px 5px 0 var(--preto); touch-action: none; cursor: crosshair; }
.assinatura .botao { justify-self: start; font-size: 1.0625rem; padding: 0.8rem 1.4rem; }

/* documentos do aluno */
.lista-docs { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.lista-docs li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0.8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); }
.lista-docs li.falta { border-color: var(--perigo); background: color-mix(in srgb, var(--perigo-suave) 55%, var(--superficie)); }
.doc-marca { width: 1.7rem; height: 1.7rem; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--realce); color: var(--suave); }
.lista-docs li.ok .doc-marca { background: var(--verde); color: #fff; } .lista-docs li.falta .doc-marca { background: var(--perigo); color: #fff; }
.doc-corpo { flex: 1; min-width: 0; } .doc-corpo > small { display: inline; }
.doc-arquivo { display: block; margin-top: 0.3rem; font-size: 0.875rem; } .doc-arquivo small { display: inline; } .doc-arquivo .icone { width: 14px; height: 14px; vertical-align: -2px; }
.form-doc { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 0.85rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio); background: var(--superficie-2); }
.form-doc label { margin: 0; display: grid; gap: 0.2rem; font-size: 0.8125rem; flex: 1 1 13rem; }
.linha-tipo .caixa { width: auto; display: flex; align-items: center; gap: 0.35rem; padding-bottom: 0.55rem; }

/* painel de vendas (BI) */
.bi-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.bi-cartao { border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1rem 1.1rem; min-width: 0; }
.bi-cartao.bi-largo { grid-column: 1 / -1; }
.bi-cartao h2 { margin: 0 0 0.9rem; font-size: 1.0625rem; } .bi-cartao h2 small { display: inline; font-weight: 500; margin-left: 0.35rem; }
.bi-colunas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.4rem; height: 13rem; align-items: end; }
.bi-col { display: grid; grid-template-rows: 1.3rem 1fr 1.4rem; height: 100%; justify-items: center; color: var(--suave); text-decoration: none; }
.bi-col:hover { text-decoration: none; }
.bi-col i { align-self: end; width: 70%; min-height: 3px; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--azul) 55%, var(--superficie)); border: 2px solid var(--preto); border-bottom: 0; transition: background .12s; }
.bi-col:hover i { background: var(--azul); }
.bi-col.atual i { background: var(--dourado); }
.bi-valor { font-weight: 700; color: var(--texto); font-size: 0.875rem; }
.bi-rotulo { font-size: 0.6875rem; border-top: 2px solid var(--preto); width: 100%; text-align: center; padding-top: 0.2rem; white-space: nowrap; }
.bi-col.atual .bi-rotulo { color: var(--texto); font-weight: 700; }
.bi-barras, .bi-vendedores { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.55rem; }
.bi-barras li { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr 2rem 2.6rem; gap: 0.6rem; align-items: center; font-size: 0.875rem; }
.bi-barras small { display: inline; text-align: right; }
.bi-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-barra { display: block; height: 14px; border-radius: 7px; background: var(--realce); overflow: hidden; }
.bi-barra i { display: block; height: 100%; background: var(--azul); border-radius: 7px; }
.bi-barra.meta i { background: var(--dourado); } .bi-barra.meta.batida i { background: var(--verde); }
.bi-vendedores li { display: flex; gap: 0.7rem; align-items: center; }
.bi-vendedores li > div { flex: 1; min-width: 0; display: grid; gap: 0.2rem; }
.form-metas input { max-width: 9rem; }
.linha-escola { background: var(--azul-suave); }

@media (max-width: 900px) {
  .bi-grade { grid-template-columns: 1fr; }
  .bi-colunas { gap: 0.2rem; } .bi-rotulo { font-size: 0.5625rem; }
  .bi-barras li { grid-template-columns: minmax(5rem, 8rem) 1fr 1.6rem 2.4rem; }
}

/* ============================================================
   1.4 — formulários alinhados, botão Voltar, procura de aluno,
   troca de turma em rodas, estoques, ponto profissional e notas
   ============================================================ */
/* formulários: quatro colunas iguais (nada de campo espremido) e campos alinhados pela base */
.grade-end { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem 1rem; align-items: end; }
.grade-end .col-2 { grid-column: span 2; }
.formulario.grade { align-items: end; row-gap: 1.35rem; }
.grade-end > label, .formulario.grade > label, .form-doc > label { position: relative; min-width: 0; }
.grade-end input, .grade-end select, .formulario.grade > label > input, .formulario.grade > label > select { width: 100%; min-width: 0; }
/* a dica que vem depois do campo fica "pendurada" embaixo, sem empurrar o campo para cima */
.grade-end > label > :is(input, select) + small, .formulario.grade > label > :is(input, select) + small { position: absolute; top: 100%; left: 0; margin-top: 2px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.formulario.grade > fieldset, .formulario.grade > .largo { align-self: stretch; }
.formulario.grade > label.interruptor, .formulario.grade > label.opcao { align-self: center; }
@media (max-width: 900px) { .grade-end { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grade-end { grid-template-columns: 1fr; } .grade-end .col-2 { grid-column: auto; } }

/* botão Voltar ao lado do título */
h1 .voltar { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.4rem 0.85rem 0.4rem 0.55rem; border-radius: 999px; border: 2px solid var(--preto); background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0; cursor: pointer; box-shadow: 3px 3px 0 var(--preto); transition: transform .1s, box-shadow .1s; }
h1 .voltar:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--preto); }
h1 .voltar svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.conteudo.conteudo-app > h1 .voltar { display: none; }
@media print { h1 .voltar { display: none; } }

/* campo de procura de aluno */
.busca-aluno { position: relative; max-width: 34rem; }
.busca-aluno > input[type=search] { width: 100%; }
.ba-lista { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--superficie); border: 2px solid var(--preto); border-radius: 12px; box-shadow: 5px 5px 0 var(--preto); padding: 0.3rem; display: grid; gap: 0.15rem; max-height: 21rem; overflow-y: auto; }
.ba-lista[hidden] { display: none; }
.ba-lista button, .ba-escolhido { display: flex; align-items: center; gap: 0.65rem; text-align: left; padding: 0.45rem 0.6rem; border: 0; border-radius: 9px; background: none; color: var(--texto); font: inherit; cursor: pointer; width: 100%; }
.ba-lista button:hover, .ba-lista button.foco { background: var(--azul-suave); }
.ba-lista b, .ba-escolhido b { display: block; line-height: 1.2; }
.ba-escolhido { border: 1px solid var(--linha-forte); background: var(--superficie-2); cursor: default; }
.ba-escolhido[hidden] { display: none; }
.ba-escolhido > span { flex: 1; min-width: 0; }
.ba-escolhido .link { width: auto; }
.ponto-campo { flex: 1 1 14rem; max-width: none; }
.ponto-campo > input[type=search] { font-size: 1.5rem; font-weight: 700; text-align: center; padding: 0.75rem; }
.dialogo .busca-aluno { max-width: none; } .dialogo .ba-lista { position: static; box-shadow: none; margin-top: 4px; }

/* trocar de turma: cada turma é uma roda com os alunos em volta */
.rodas-aviso { position: sticky; top: 72px; z-index: 5; margin: 0 0 1rem; padding: 0.6rem 1rem; border-radius: 10px; background: var(--azul); color: #fff; font-weight: 600; }
.rodas-aviso.erro { background: var(--perigo); }
.rodas { display: flex; flex-wrap: wrap; gap: 2.5rem 2rem; justify-content: center; padding: 1.5rem 0.5rem 2.5rem; }
.roda { --tam: 21rem; --raio: calc(var(--tam) / 2 - 2.1rem); position: relative; width: var(--tam); height: var(--tam); border-radius: 50%; border: 3px dashed var(--linha-forte); background: radial-gradient(circle, var(--superficie) 0 46%, var(--superficie-2) 46% 100%); transition: border-color .15s, transform .15s, box-shadow .15s; flex: none; }
.roda-centro { position: absolute; inset: 24%; border-radius: 50%; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.1rem; padding: 0.4rem; background: var(--superficie); border: 2px solid var(--preto); box-shadow: 4px 4px 0 var(--preto); overflow: hidden; }
.roda-centro b { font-size: 0.8125rem; line-height: 1.15; } .roda-centro small { font-size: 0.6875rem; line-height: 1.2; } .roda-centro > span { font-size: 0.75rem; font-weight: 700; }
.roda-centro .aluno-foto.bolha { width: 34px; height: 34px; }
.roda-aluno, .roda-vaga { --a: calc(360deg / var(--n) * var(--i) - 90deg); position: absolute; left: 50%; top: 50%; width: 3.6rem; margin: -1.8rem 0 0 -1.8rem; transform: rotate(var(--a)) translate(var(--raio)) rotate(calc(-1 * var(--a))); }
.roda-aluno { display: grid; justify-items: center; gap: 0; padding: 0; border: 0; background: none; color: var(--texto); font: inherit; cursor: grab; touch-action: manipulation; }
.roda-aluno .aluno-foto.bolha { width: 3.1rem; height: 3.1rem; border-width: 3px; transition: transform .12s, border-color .12s, box-shadow .12s; pointer-events: none; }
.roda-aluno span { font-size: 0.6875rem; font-weight: 700; background: var(--superficie); border-radius: 6px; padding: 0 0.3rem; max-width: 4.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: -0.3rem; position: relative; border: 1px solid var(--linha); }
.roda-aluno:hover .aluno-foto, .roda-aluno:focus-visible .aluno-foto { transform: scale(1.12); border-color: var(--dourado); }
.roda-aluno.selecionado .aluno-foto { transform: scale(1.18); border-color: var(--dourado); box-shadow: 0 0 0 5px color-mix(in srgb, var(--dourado) 45%, transparent); }
.roda-aluno.arrastando { opacity: .35; }
.roda-vaga { height: 3.1rem; width: 3.1rem; margin: -1.55rem 0 0 -1.55rem; border-radius: 50%; border: 2px dashed var(--linha-forte); background: var(--superficie); }
.rodas.escolhendo .roda:not(.lotada) { border-color: var(--azul); border-style: solid; }
.rodas.escolhendo .roda.lotada { opacity: .5; }
.roda.alvo { transform: scale(1.04); border-color: var(--dourado) !important; box-shadow: 0 0 0 8px color-mix(in srgb, var(--dourado) 30%, transparent); }
.roda.lotada { border-color: var(--perigo); }
@media (max-width: 560px) { .roda { --tam: 18.5rem; } .roda-aluno, .roda-vaga { width: 3.1rem; margin-left: -1.55rem; } .roda-aluno .aluno-foto.bolha { width: 2.7rem; height: 2.7rem; } }

/* entrega de material sem digital */
.sem-digital { border-style: dashed; background: var(--superficie-2); }
.sem-digital .botao { align-self: flex-start; font-size: 1.0625rem; padding: 0.75rem 1.3rem; }
.assinatura-opcional summary { cursor: pointer; color: var(--azul); font-weight: 600; margin-bottom: 0.6rem; }
.assinatura .botao { display: none; }

/* financeiro: resumo */
.fin-formas li { grid-template-columns: minmax(8rem, 13rem) 1fr 6.5rem 3.6rem; }

/* ponto da equipe: gráfico de presença e espelho */
.grafico-ponto { margin-top: 1rem; }
.gp-barras { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.25rem; height: 11rem; align-items: end; }
.gp-dia { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.gp-dia > span { font-size: 0.6875rem; color: var(--suave); border-top: 2px solid var(--preto); width: 100%; text-align: center; padding-top: 2px; order: 9; }
.gp-dia > b { font-size: 0.6875rem; }
.gp-barra { display: block; width: 70%; min-height: 0; border-radius: 5px 5px 0 0; background: var(--verde); border: 2px solid var(--preto); border-bottom: 0; }
.gp-barra[style*="height:0%"] { border: 0; }
.gp-meta { position: absolute; left: 6%; right: 6%; margin-bottom: 1.25rem; border-top: 2px dashed var(--texto); opacity: .55; z-index: 1; }
.gp-dia.atraso .gp-barra, .gp-leg.atraso { background: var(--dourado); }
.gp-dia.extra .gp-barra, .gp-leg.extra { background: #2F7FC1; }
.gp-dia.sem_saida .gp-barra, .gp-leg.sem_saida { background: repeating-linear-gradient(135deg, var(--perigo) 0 5px, var(--perigo-suave) 5px 10px); min-height: 1.2rem; }
.gp-dia.fora_escala .gp-barra, .gp-leg.fora_escala { background: var(--azul); }
.gp-dia.falta .gp-barra, .gp-leg.falta, .gp-falta { background: var(--perigo-suave); border-color: var(--perigo); border-style: dashed; }
.gp-dia.folga > span { color: var(--linha-forte); }
.gp-falta { display: block; width: 70%; border: 2px dashed var(--perigo); border-radius: 5px 5px 0 0; order: -1; }
.gp-leg { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 3px; background: var(--verde); border: 1px solid var(--preto); vertical-align: -2px; }
.mini-dias { display: flex; gap: 2px; margin-top: 0.3rem; flex-wrap: wrap; max-width: 15rem; }
.mini-dias i { width: 7px; height: 12px; border-radius: 2px; background: var(--realce); }
.mini-dias i.ok { background: var(--verde); } .mini-dias i.atraso { background: var(--dourado); } .mini-dias i.falta, .mini-dias i.sem_saida { background: var(--perigo); } .mini-dias i.extra { background: #2F7FC1; } .mini-dias i.fora_escala { background: var(--azul); }
.tabela.espelho tr.folga td { color: var(--linha-forte); }
.tabela.espelho tfoot td { background: var(--realce); }
.espelho-assinaturas { display: none; }
.espelho-cab .filtros { margin-top: 0.75rem; }
@media print {
  .espelho-assinaturas { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.5rem; text-align: center; font-size: 0.8125rem; }
  .espelho-assinaturas span { border-top: 1px solid #000; padding-top: 0.3rem; }
  .q-kpis li { box-shadow: none; } .espelho-cab .filtros { display: none; }
}

/* notas: quadro da turma e evolução */
.quadro-notas .col-av { text-align: center; min-width: 5.5rem; }
.quadro-notas th.col-av a { display: block; color: var(--texto); font-weight: 600; font-size: 0.8125rem; line-height: 1.25; }
.quadro-notas td.fora { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--realce) 5px 7px); }
.quadro-notas .tem-obs { font-style: normal; font-size: 0.75rem; margin-left: 0.2rem; }
.quadro-notas .col-ind { white-space: nowrap; }
.mais-ind { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px dashed var(--linha-forte); color: var(--suave); font-weight: 700; }
.mais-ind:hover { border-color: var(--azul); color: var(--azul); text-decoration: none; }
.evolucao { display: flex; gap: 0.6rem; align-items: flex-end; height: 9rem; overflow-x: auto; padding-bottom: 0.2rem; }
.ev-ponto { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; height: 100%; min-width: 2.6rem; gap: 2px; }
.ev-ponto i { align-self: end; width: 1.5rem; border-radius: 6px 6px 0 0; border: 2px solid var(--preto); border-bottom: 0; min-height: 6px; }
.ev-ponto b { font-size: 0.75rem; } .ev-ponto span { font-size: 0.6875rem; color: var(--suave); border-top: 2px solid var(--preto); width: 100%; text-align: center; }

/* ============================================================
   1.5 — WhatsApp: contatos recebidos para ação no CRM
   ============================================================ */
.wa-lista { display: grid; gap: 0.6rem; }
.wa-cartao { display: flex; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid var(--linha); border-left: 5px solid var(--linha-forte); border-radius: var(--raio); background: var(--superficie); }
.wa-cartao.novo { border-left-color: #25D366; }
.wa-cartao.aberto { border-color: var(--preto); box-shadow: 4px 4px 0 var(--preto); }
.wa-avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #073B1C; font-weight: 700; border: 2px solid var(--preto); }
.wa-corpo { flex: 1; min-width: 0; display: grid; gap: 0.4rem; }
.wa-corpo header { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: center; }
.wa-corpo header b { font-size: 1.0625rem; }
.wa-numero { font-variant-numeric: tabular-nums; font-weight: 700; background: var(--preto); color: #fff; padding: 0.1rem 0.55rem; border-radius: 6px; font-size: 0.875rem; }
.wa-corpo header time { margin-left: auto; font-size: 0.8125rem; color: var(--suave); }
.wa-corpo header .selo { font-size: 0.6875rem; }
.wa-quem, .wa-msg { margin: 0; }
.wa-quem a.vagas:hover { text-decoration: none; filter: brightness(.95); }
.wa-quem .vagas { font-size: 0.75rem; padding: 0.2rem 0.65rem; }
.wa-msg { color: var(--suave); font-style: italic; }
.wa-conversa { list-style: none; margin: 0; padding: 0.6rem 0.75rem; display: grid; gap: 0.4rem; background: var(--superficie-2); border-radius: 10px; max-height: 16rem; overflow-y: auto; }
.wa-conversa li { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px 10px 10px 2px; padding: 0.4rem 0.65rem; justify-self: start; max-width: 90%; }
.wa-conversa time { display: block; font-size: 0.6875rem; color: var(--suave); }
@media (max-width: 560px) { .wa-corpo header time { margin-left: 0; flex-basis: 100%; } }
.fin-kpis { margin-bottom: 1.1rem; }

/* 1.6 — WhatsApp: identificar número à mão */
.wa-identificar { border: 2px solid var(--preto); border-radius: 16px; background: var(--superficie); box-shadow: 5px 5px 0 var(--preto); padding: 1rem 1.15rem 1.15rem; margin-bottom: 1.25rem; }
.wa-identificar h2 { margin: 0 0 0.2rem; font-size: 1.1875rem; }
.wa-identificar .nota { margin: 0 0 0.85rem; }
.wa-campos { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.wa-campos label { margin: 0; flex: 1 1 13rem; }
.wa-campos label.cresce { flex: 2 1 18rem; }
.wa-campos label small { display: inline; font-weight: 500; }
.wa-campos input[name=numero] { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-campos .botao { padding: 0.7rem 1.4rem; font-size: 1rem; }
.wa-nome { display: flex; gap: 0.5rem; flex-wrap: wrap; } .wa-nome input { max-width: 18rem; }

/* ============================================================
   1.7 — Categoria do aluno e grade de horários
   ============================================================ */
.cat-selo { --cat: var(--suave); display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: color-mix(in srgb, var(--cat) 14%, var(--superficie)); color: color-mix(in srgb, var(--cat) 75%, var(--texto)); border: 1px solid color-mix(in srgb, var(--cat) 45%, transparent); white-space: nowrap; vertical-align: middle; }
.cat-selo.sem { background: var(--superficie-2); color: var(--suave); border-style: dashed; border-color: var(--linha-forte); }
.ficha-linha .cat-selo { margin-left: 0.25rem; }
.resumo-cat { border-left: 4px solid var(--cat) !important; }

.conteudo:has(.gh-area) > * { max-width: none; }
.gh-ferramentas { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.gh-cats { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.gh-cats button { --cat: var(--azul); font: inherit; font-size: 0.875rem; font-weight: 700; padding: 0.35rem 0.8rem; border-radius: 999px; border: 2px solid color-mix(in srgb, var(--cat) 50%, transparent); background: var(--superficie); color: var(--texto); cursor: pointer; }
.gh-cats button.ativo { background: var(--cat); border-color: var(--cat); color: #fff; }
.gh-procura { max-width: 17rem; }
.gh-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
.gh-rolagem { overflow-x: auto; min-width: 0; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); }
.gh-tabela { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
.gh-tabela th, .gh-tabela td { border-bottom: 1px solid var(--linha); border-right: 1px solid var(--linha); vertical-align: top; padding: 0.4rem; }
.gh-tabela thead th { position: sticky; top: 0; z-index: 2; background: var(--marinho, #2A1B47); color: #fff; font-size: 0.875rem; padding: 0.55rem 0.4rem; text-align: center; }
.gh-tabela thead th.hoje { background: var(--dourado); color: #241400; }
.gh-tabela td.hoje { background: color-mix(in srgb, var(--dourado-suave) 45%, var(--superficie)); }
.gh-hora { width: 4.2rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 800; background: var(--superficie-2); position: sticky; left: 0; z-index: 1; }
.gh-tabela thead .gh-hora { z-index: 3; }
.gh-tabela td { min-width: 10rem; }
.gh-livre { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--linha) 45%, transparent) 8px 9px); }
.gh-nova { display: block; text-align: center; font-size: 0.75rem; color: var(--suave); padding: 0.5rem 0; opacity: 0; transition: opacity .15s; }
.gh-livre:hover .gh-nova, .gh-nova:focus-visible { opacity: 1; }
.gh-turma { --cat: var(--azul); border: 2px solid var(--linha-forte); border-top: 5px solid var(--cat); border-radius: 11px; background: var(--superficie); padding: 0.4rem 0.45rem 0.5rem; display: grid; gap: 0.35rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gh-turma + .gh-turma { margin-top: 0.4rem; }
.gh-turma header { display: flex; gap: 0.4rem; align-items: center; }
.gh-turma header > div { flex: 1; min-width: 0; display: grid; }
.gh-turma header b { font-size: 0.8125rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-turma header small { font-size: 0.6875rem; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-turma .funcionario-foto.mini, .gh-turma .mini { width: 26px; height: 26px; flex: none; font-size: 0.625rem; }
.gh-ocup { font-size: 0.6875rem; font-weight: 800; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 6px; padding: 0 0.3rem; flex: none; font-variant-numeric: tabular-nums; }
.gh-turma.lotada .gh-ocup { background: var(--perigo-suave); color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 40%, transparent); }
.gh-turma-cat { font-size: 0.6875rem; font-weight: 700; color: color-mix(in srgb, var(--cat) 75%, var(--texto)); }
.gh-alunos { display: flex; flex-wrap: wrap; gap: 0.25rem; min-height: 1.8rem; align-content: flex-start; }
.gh-vazia { font-size: 0.6875rem; color: var(--suave); border: 1px dashed var(--linha-forte); border-radius: 7px; padding: 0.25rem 0.4rem; width: 100%; text-align: center; }
.gh-aluno { --cat: var(--suave); display: inline-flex; align-items: center; gap: 0.2rem; font: inherit; font-size: 0.75rem; font-weight: 700; line-height: 1.2; padding: 0.2rem 0.45rem 0.2rem 0.3rem; border-radius: 7px; border: 1px solid color-mix(in srgb, var(--cat) 45%, var(--linha)); border-left: 4px solid var(--cat); background: color-mix(in srgb, var(--cat) 10%, var(--superficie)); color: var(--texto); cursor: grab; touch-action: manipulation; max-width: 100%; user-select: none; transition: opacity .15s, transform .12s, box-shadow .12s; }
.gh-aluno i { font-style: normal; font-size: 0.75rem; }
.gh-aluno span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-aluno:hover { box-shadow: 0 2px 6px rgba(30, 18, 52, .15); }
.gh-aluno.selecionado { box-shadow: 0 0 0 3px var(--dourado); transform: scale(1.05); }
.gh-aluno.arrastando { opacity: .35; }
.gh-aluno.apagado { opacity: .2; }
.gh-aluno.achado { box-shadow: 0 0 0 3px var(--azul); }
.gh-area.escolhendo .gh-turma:not(.lotada) { border-style: dashed; border-color: var(--azul); }
.gh-turma.alvo { border-color: var(--dourado) !important; border-style: solid !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--dourado) 35%, transparent); transform: scale(1.02); }
.gh-area.escolhendo .gh-turma.lotada { opacity: .55; }
.gh-sub { font-size: 1rem; margin: 1rem 0.75rem 0.5rem; }
.gh-soltas { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.5rem; padding: 0 0.75rem 0.75rem; }
.gh-soltas .gh-turma + .gh-turma { margin-top: 0; }
.gh-lateral { order: -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 1.25rem; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 0.75rem 0.9rem; }
.gh-bandeja { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.gh-legenda { border-left: 1px solid var(--linha); padding-left: 1.1rem; max-width: 19rem; }
.gh-lateral h2 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.4rem; }
.gh-lateral .nota { margin: 0; font-size: 0.75rem; }
.gh-sem { border: 2px dashed var(--linha-forte); border-radius: 10px; padding: 0.45rem; min-height: 2.6rem; max-height: 8.5rem; overflow-y: auto; }
.gh-legenda { display: grid; gap: 0.3rem; align-content: start; }
.gh-legenda h3 { margin: 0; font-size: 0.875rem; }
.gh-legenda p { margin: 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.gh-legenda small { color: var(--suave); }
.botao.pequeno { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }
.gh-dialogo { border: 2px solid var(--preto, #111); border-radius: 16px; padding: 1.1rem 1.2rem; max-width: 24rem; width: calc(100% - 2rem); background: var(--superficie); color: var(--texto); }
.gh-dialogo::backdrop { background: rgba(18, 12, 30, .45); }
.gh-dialogo h2 { margin: 0 0 0.8rem; font-size: 1.0625rem; }
.gh-dc-opcoes { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.gh-dc-opcoes button { --cat: var(--suave); font: inherit; font-weight: 700; text-align: left; padding: 0.6rem 0.8rem; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--cat) 45%, var(--linha)); background: color-mix(in srgb, var(--cat) 10%, var(--superficie)); color: var(--texto); cursor: pointer; }
.gh-dc-opcoes button.ativo { border-color: var(--cat); box-shadow: inset 0 0 0 2px var(--cat); }
.gh-dialogo .linha-botoes { justify-content: space-between; align-items: center; }
@media (max-width: 760px) { .gh-lateral { grid-template-columns: 1fr; } .gh-legenda { border-left: 0; padding-left: 0; border-top: 1px solid var(--linha); padding-top: 0.6rem; max-width: none; } }
@media (max-width: 560px) { .gh-procura { max-width: none; width: 100%; } }
@media print { .gh-lateral, .gh-ferramentas, .abas, .barra-acoes, .gh-nova { display: none !important; } .gh-area { display: block; } .gh-rolagem { overflow: visible; border: 0; } }

/* 1.7 — Pipeline: aula experimental fixada no card, presença, lead rápido */
.kb-cab .kb-lead { margin-top: 0.45rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; font: inherit; font-size: 0.8125rem; font-weight: 700; padding: 0.35rem; border-radius: 8px; border: 2px dashed var(--linha-forte); background: var(--superficie); color: var(--azul); cursor: pointer; }
.kb-cab .kb-lead:hover { border-color: var(--azul); }
.kb-cab .kb-lead svg { width: 15px; height: 15px; }
.kb-exp { margin: 0.25rem 0 0.1rem; padding: 0.45rem 0.55rem; border-radius: 9px; background: var(--roxo-suave); border: 1px solid color-mix(in srgb, var(--roxo) 35%, transparent); display: grid; gap: 0.15rem; font-size: 0.75rem; }
.kb-exp.exp-presente { background: var(--verde-suave); border-color: color-mix(in srgb, var(--verde) 40%, transparent); }
.kb-exp.exp-faltou { background: var(--perigo-suave); border-color: color-mix(in srgb, var(--perigo) 40%, transparent); }
.kb-exp-tit { font-weight: 800; color: var(--texto); }
.kb-exp-tit .hoje { background: var(--dourado); color: #241400; border-radius: 5px; padding: 0 0.3rem; font-size: 0.6875rem; }
.kb-exp-quando { font-weight: 600; color: var(--texto); }
.kb-exp-quem { display: flex; gap: 0.3rem; align-items: center; flex-wrap: wrap; color: var(--suave); }
.kb-presenca { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.2rem; }
.kb-presenca button.veio, .kb-presenca button.faltou { font: inherit; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.55rem; border-radius: 7px; cursor: pointer; border: 2px solid; background: var(--superficie); }
.kb-presenca button.veio { color: var(--verde); border-color: var(--verde); }
.kb-presenca button.faltou { color: var(--perigo); border-color: var(--perigo); }
.kb-presenca button.veio:hover { background: var(--verde); color: #fff; }
.kb-presenca button.faltou:hover { background: var(--perigo); color: #fff; }
.kb-presenca .link { font-size: 0.75rem; }
.kb-presenca small { color: var(--suave); }
.pres-presente { color: var(--verde); } .pres-faltou { color: var(--perigo); }
.kb-exp-agendar { font: inherit; font-size: 0.75rem; font-weight: 800; margin-top: 0.25rem; padding: 0.4rem; border-radius: 8px; border: 2px dashed var(--roxo); background: var(--roxo-suave); color: var(--roxo); cursor: pointer; }
.kb-acoes { display: flex; gap: 0.4rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.kb-acoes:empty { display: none; }
.kb-wa { font-size: 0.75rem; font-weight: 700; color: #128C4A; }
.kb-mover { font-size: 0.75rem; padding: 0.2rem 0.3rem; max-width: 9rem; border-radius: 6px; display: none; }
@media (hover: none), (max-width: 760px) { .kb-mover { display: inline-block; } }
.kb-toast { position: fixed; z-index: 90; top: 1rem; left: 50%; transform: translateX(-50%); max-width: min(34rem, calc(100% - 2rem)); box-shadow: var(--sombra-alta); }
.erro-form { color: var(--perigo); background: var(--perigo-suave); border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0; font-weight: 600; }
.exp-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.5rem; margin-bottom: 0.6rem; }
.exp-cartao { display: grid; gap: 0.15rem; padding: 0.55rem 0.7rem; border: 2px solid var(--linha); border-radius: 11px; background: var(--superficie); cursor: pointer; margin: 0; font-weight: 400; }
.exp-cartao input { position: absolute; opacity: 0; pointer-events: none; }
.exp-cartao b { font-size: 0.875rem; } .exp-cartao small { font-size: 0.75rem; color: var(--suave); display: flex; gap: 0.3rem; flex-wrap: wrap; align-items: center; }
.exp-cartao:hover { border-color: var(--azul); }
.exp-cartao.marcado { border-color: var(--azul); box-shadow: inset 0 0 0 1px var(--azul); background: var(--azul-suave); }
.exp-cartao.cheia { opacity: .5; cursor: not-allowed; }
.exp-cartao.outro { border-style: dashed; }
.exp-datas { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.6rem; font-size: 0.8125rem; color: var(--suave); }
.exp-datas button { font: inherit; font-size: 0.8125rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 999px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); cursor: pointer; }
.exp-datas button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.exp-valor { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.exp-valor label:first-child { max-width: 10rem; margin: 0; }
.exp-valor input[name=valor] { font-size: 1.125rem; font-weight: 800; }
.exp-valor input:disabled { opacity: .45; }
.gh-exp { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 800; padding: 0.15rem 0.4rem; border-radius: 7px; border: 1px dashed var(--roxo); background: var(--roxo-suave); color: var(--roxo); text-decoration: none; }
.gh-exp small { font-weight: 600; opacity: .8; }
.gh-exp.exp-presente { border-color: var(--verde); background: var(--verde-suave); color: var(--verde); }
.gh-exp.exp-faltou { border-color: var(--perigo); background: var(--perigo-suave); color: var(--perigo); text-decoration: line-through; }
.gh-exps { background: var(--superficie); border: 1px solid var(--linha); border-left: 5px solid var(--roxo); border-radius: 14px; padding: 0.75rem 0.9rem; margin-bottom: 0.85rem; }
.gh-exps h2 { margin: 0 0 0.5rem; font-size: 1rem; display: flex; gap: 0.4rem; align-items: center; }
.gh-exps-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.gh-exp-item { display: grid; gap: 0.15rem; padding: 0.5rem 0.65rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie-2); font-size: 0.8125rem; }
.gh-exp-item.hoje { border-color: var(--dourado); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dourado) 35%, transparent); }
.gh-exp-item small { color: var(--suave); }
.gh-exp-item .kb-presenca a { font-size: 0.75rem; margin-left: auto; }
.gh-turma header b { overflow-wrap: anywhere; }
.crm-painel-dobra { margin-bottom: 1rem; }
.crm-painel-dobra > summary { cursor: pointer; font-weight: 700; color: var(--azul); padding: 0.5rem 0.75rem; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--superficie); width: fit-content; list-style: none; }
.crm-painel-dobra > summary::-webkit-details-marker { display: none; }
.crm-painel-dobra[open] > summary { margin-bottom: 0.75rem; }
.negocio-exp { display: block; font-size: 0.875rem; margin: 0.4rem 0; }

/* 1.7 — Robô do WhatsApp (QR code) */
.robo-wa { border: 2px solid var(--preto, #111); border-radius: 16px; background: var(--superficie); box-shadow: 5px 5px 0 var(--preto, #111); padding: 1rem 1.15rem; margin-bottom: 1.25rem; display: grid; gap: 0.75rem; }
.robo-topo { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: flex-start; }
.robo-topo h2 { margin: 0; font-size: 1.1875rem; } .robo-topo h2 small { font-size: 0.8125rem; color: var(--suave); font-weight: 500; }
.robo-linha { margin: 0.35rem 0 0; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.robo-selo { font-size: 0.8125rem; font-weight: 800; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linha-forte); }
.robo-selo.est-conectado { background: var(--verde-suave); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 45%, transparent); }
.robo-selo.est-qr { background: var(--dourado-suave); color: var(--dourado-texto); border-color: var(--dourado); }
.robo-selo.est-desconectado { background: var(--perigo-suave); color: var(--perigo); }
.robo-corpo { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }
.robo-qr { display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }
.robo-qr[hidden] { display: none; }
.robo-qr img { width: 260px; height: 260px; background: #fff; padding: 8px; border-radius: 12px; border: 2px solid var(--preto, #111); image-rendering: pixelated; }
.robo-qr ol { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; max-width: 22rem; }
.robo-texto { margin: 0; color: var(--suave); max-width: 52rem; }
.robo-instalar summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.robo-instalar ol { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.robo-wa.acabou-conectar { animation: robo-ok 1.2s ease 2; }
@keyframes robo-ok { 50% { box-shadow: 5px 5px 0 var(--verde); border-color: var(--verde); } }

/* 1.7 — Dashboard */
.dash-ola { margin-top: -0.5rem; }
.dash-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-items: start; }
.dash-duas .bloco { margin: 0; }
.dash-duas h2 { display: flex; align-items: center; gap: 0.4rem; }
.dash-aulas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dash-aulas li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.dash-aulas li.agora { border-color: var(--verde); box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 30%, transparent); }
.dash-aulas li.passou { opacity: .6; }
.dash-hora { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.2rem; display: grid; }
.dash-hora b { font-size: 0.625rem; color: var(--verde); text-transform: uppercase; }
.dash-turma { flex: 1; min-width: 0; display: grid; } .dash-turma small { color: var(--suave); font-size: 0.75rem; }
.dash-exps { grid-template-columns: 1fr; }
.dash-duas { margin-bottom: 1.5rem; }

/* 1.8 — agendar aula experimental pela grade */
.gh-ferramentas .linha-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
[data-exp-modo].ativo { background: var(--perigo); border-color: var(--perigo); }
.gh-area.modo-exp .gh-turma:not(.lotada) { cursor: pointer; border-color: var(--roxo); border-style: dashed; }
.gh-area.modo-exp .gh-turma:not(.lotada):hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--roxo) 30%, transparent); transform: scale(1.02); }
.gh-area.modo-exp .gh-turma.lotada { opacity: .5; }
.gh-area.modo-exp .gh-aluno { pointer-events: none; }
#dlg-gh-exp .aluno-escolhido { margin-bottom: 0.75rem; }

/* 1.9 — horários pré-definidos da aula experimental */
.exp-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--suave); }
.exp-slots[hidden] { display: none; }
.exp-slot { margin: 0; cursor: pointer; }
.exp-slot input { position: absolute; opacity: 0; pointer-events: none; }
.exp-slot span { display: inline-block; font-size: 0.875rem; font-weight: 700; padding: 0.4rem 0.8rem; border-radius: 999px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); }
.exp-slot.ativo span, .exp-slot input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.exp-slot input:focus-visible + span { outline: 2px solid var(--dourado); outline-offset: 2px; }
.exp-hora-turma { margin: 0; align-self: end; font-weight: 700; padding-bottom: 0.6rem; }

/* 1.10 — grade: salas diferentes no mesmo horário lado a lado (kanban por sala) */
.gh-lado { display: grid; grid-template-columns: repeat(var(--n), minmax(9.5rem, 1fr)); gap: 0.4rem; align-items: start; }
.gh-lado .gh-turma + .gh-turma { margin-top: 0; }
.gh-nsalas { display: block; font-size: 0.625rem; font-weight: 600; opacity: .8; }
.gh-sala { font-size: 0.6875rem; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; background: var(--superficie-2); border-radius: 6px; padding: 0.1rem 0.4rem; justify-self: start; }

/* 1.11 — horários padrão */
.gh-hora small { display: block; font-size: 0.6875rem; font-weight: 600; color: var(--suave); }
.gh-hora small.fora { color: var(--perigo); font-size: 0.625rem; }

/* 1.12 — duplicar turma */
.duplicar-turma { margin: 0.5rem 0 1rem; padding: 0.75rem 0.9rem; border: 2px dashed var(--linha-forte); border-radius: 12px; background: var(--superficie-2); }
.duplicar-turma label { margin: 0; }
.duplicar-turma small { display: block; font-weight: 500; color: var(--suave); }

/* 1.12 — Backup e dados */
.bk-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.bk-cartao { margin: 0; display: grid; gap: 0.6rem; }
.bk-cartao h2 { margin: 0; }
.bk-cartao .descricao { margin: 0; }
.bk-perigo { border-color: color-mix(in srgb, var(--perigo) 45%, var(--linha)); }
.bk-grupos { display: grid; gap: 0.35rem; }
.bk-grupos .caixa { margin: 0; font-weight: 500; }
.bk-grupos small { color: var(--suave); }
.bk-tudo { border-top: 1px dashed var(--linha-forte); padding-top: 0.4rem; }
.bk-perigo { grid-column: 1 / -1; }   /* 1.83: limpar dados ocupa a largura toda (9 grupos) */
.bk-cartao { min-width: 0; } .bk-cartao > * { min-width: 0; }
.bk-perigo .bk-grupos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 34rem), 1fr)); column-gap: 1.5rem; }
.bk-perigo .bk-tudo { grid-column: 1 / -1; }
.bk-perigo .formulario { max-width: 46rem; }
.bk-restaurar { display: inline-block; }
.bk-restaurar[open] form { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.bk-restaurar input { max-width: 10rem; }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }

/* 1.12 — matrícula: primeiro o dia, depois horários e salas */
.mat-dias { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.6rem; }
.mat-passo { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--dourado); color: #241400; font-weight: 800; display: grid; place-items: center; }
.mat-dias button { display: grid; justify-items: center; min-width: 4.6rem; padding: 0.45rem 0.7rem; border-radius: 12px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); font: inherit; cursor: pointer; line-height: 1.2; }
.mat-dias button b { font-size: 1rem; }
.mat-dias button small { font-size: 0.6875rem; color: var(--suave); }
.mat-dias button.sem { opacity: .5; }
.mat-dias button:hover { border-color: var(--azul); }
.mat-dias button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.mat-dias button.ativo small { color: #EDE6FA; }
.filtro-prof[hidden], .grade-vagas[hidden] { display: none; }
.mat-dica, .mat-vazio { margin: 0.2rem 0 0.6rem; }

/* 1.12 — nome da unidade ao lado do logo (mesmo estilo das letras do Dragão: laranja, bem grosso, contorno preto) */
.marca-unidade { font-family: "Arial Black", "Arial Bold", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em; color: #F39A1C; line-height: 1; white-space: nowrap;
  font-size: 1.25rem; -webkit-text-stroke: 0; text-shadow: -2px -2px 0 #111, 2px -2px 0 #111, -2px 2px 0 #111, 2px 2px 0 #111, 0 -2px 0 #111, 0 2px 0 #111, -2px 0 0 #111, 2px 0 0 #111, 3px 3px 0 #111; }
.topo .marca .marca-unidade { align-self: center; }
.entrada-logo { flex-direction: column; align-items: center; gap: 0.6rem; }
.entrada-logo .marca-unidade { font-size: 1.9rem; text-shadow: -3px -3px 0 #111, 3px -3px 0 #111, -3px 3px 0 #111, 3px 3px 0 #111, 0 -3px 0 #111, 0 3px 0 #111, -3px 0 0 #111, 3px 0 0 #111, 4px 4px 0 #111; }
@media (max-width: 560px) { .topo .marca .marca-unidade { font-size: 0.9rem; } }
@media (max-width: 380px) { .topo .marca .marca-unidade { display: none; } }
.unidade-form { margin-bottom: 1rem; }
.cartao-vaga .cv-hora { order: -1; font-size: 1.0625rem; font-weight: 800; color: var(--texto); }

/* 1.13 — matrícula em mais de um dia */
.mat-escolhidas { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--verde-suave); color: var(--verde); font-weight: 700; }
.mat-escolhidas[hidden] { display: none; }
.mat-dias button.tem { box-shadow: inset 0 -4px 0 var(--verde); }

/* 1.16 — status fixo de matriculado na ficha */
.status-matriculado { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1rem; border-radius: 10px; font-weight: 800; background: var(--verde-suave); color: var(--verde); border: 2px solid var(--verde); cursor: default; }

/* 1.17 — grade: filtro por dia e janela com os alunos da turma */
.gh-dias { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; font-weight: 700; font-size: 0.875rem; }
.gh-dias button { font: inherit; font-size: 0.8125rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); cursor: pointer; }
.gh-dias button.ativo { background: var(--marinho, #2A1B47); border-color: var(--marinho, #2A1B47); color: #fff; }
.gh-tabela [data-dia][hidden] { display: none; }
.gh-turma { cursor: pointer; }
.gh-turma:hover { box-shadow: 0 4px 14px rgba(30, 18, 52, .12); }
.gh-turma-dlg { max-width: 56rem; }
.gh-turma-dlg header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.gh-turma-dlg header h2 { margin: 0; }
.gh-turma-dlg header .nota { margin: 0.2rem 0 0; }
.gh-gt-lista { max-height: 60vh; overflow: auto; margin: 0.75rem 0; }
.gh-gt-lista .aluno-linha { display: flex; align-items: center; gap: 0.5rem; }
.gh-gt-lista .aluno-linha small { display: block; color: var(--suave); }
.gh-gt-lista td:last-child, .gh-gt-lista td:nth-child(4) { white-space: nowrap; }

/* 1.18 — Pipeline: dia da semana antes do horário */
.exp-dias { margin-bottom: 0.4rem; }
.exp-cartoes[hidden], .exp-cartao[hidden] { display: none; }
.exp-cartao b { font-size: 0.9375rem; }

/* 1.19 — Info atualizações */
.info-topo { display: flex; gap: 1rem 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.info-versao { display: grid; justify-items: center; padding: 0.7rem 1.2rem; border: 2px solid var(--preto, #111); border-radius: 14px; background: var(--superficie); box-shadow: 4px 4px 0 var(--preto, #111); }
.info-versao small { font-size: 0.75rem; color: var(--suave); }
.info-versao b { font-size: 1.75rem; color: var(--azul); line-height: 1.1; }
.info-versao span { font-size: 0.75rem; color: var(--suave); }
.info-topo .descricao { flex: 1; min-width: 16rem; margin: 0; }
.info-bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 1rem; }
.info-bloco.atual { border: 2px solid var(--azul); }
.info-bloco h2 { display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: baseline; font-size: 1.125rem; margin: 0 0 0.5rem; }
.info-bloco h2 small { font-size: 0.8125rem; color: var(--suave); font-weight: 500; }
.info-tag { background: var(--dourado); color: #241400; border-radius: 8px; padding: 0.1rem 0.5rem; font-size: 0.875rem; }
.info-imagens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.75rem; margin-top: 0.75rem; }
.info-imagens figure { margin: 0; display: grid; gap: 0.3rem; }
.info-imagens button { padding: 0; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; background: var(--superficie-2); cursor: zoom-in; aspect-ratio: 16 / 10; }
.info-imagens img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .2s; }
.info-imagens button:hover img { transform: scale(1.03); }
.info-imagens figcaption { font-size: 0.8125rem; color: var(--suave); }
.info-zoom { border: 0; border-radius: 14px; padding: 0.75rem; max-width: min(96vw, 1300px); max-height: 94vh; background: var(--superficie); }
.info-zoom::backdrop { background: rgba(18, 12, 30, .7); }
.info-zoom img { max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 8px; }
.info-zoom p { margin: 0.5rem 0 0; text-align: center; font-weight: 700; }
.info-zoom form { display: flex; justify-content: flex-end; }

/* 1.20 — chamada na janela da turma */
.gh-chamada { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-top: 0.75rem; font-weight: 700; font-size: 0.875rem; }
.gh-chamada button { font: inherit; font-size: 0.8125rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); cursor: pointer; }
.gh-chamada button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.gh-gt-resumo { margin: 0.4rem 0 0; font-size: 0.875rem; color: var(--suave); }
.pres-ok { color: var(--verde); font-weight: 800; } .pres-falta { color: var(--perigo); font-weight: 800; }
.gh-pres { white-space: nowrap; }
.gh-pres small { display: block; color: var(--suave); font-size: 0.6875rem; }
.pres-bts { display: inline-flex; gap: 0.3rem; align-items: center; }
.pres-bts button.veio, .pres-bts button.faltou { font: inherit; font-size: 0.75rem; font-weight: 800; padding: 0.25rem 0.55rem; border-radius: 7px; cursor: pointer; border: 2px solid; background: var(--superficie); }
.pres-bts .veio { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 50%, transparent); }
.pres-bts .faltou { color: var(--perigo); border-color: color-mix(in srgb, var(--perigo) 50%, transparent); }
.pres-bts .veio.on { background: var(--verde); border-color: var(--verde); color: #fff; }
.pres-bts .faltou.on { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.pres-bts .link { font-size: 0.75rem; }
#dlg-gh-turma { width: min(96vw, 74rem); max-width: 74rem; }
.gh-gt-lista td:last-child { white-space: nowrap; }
.gh-gt-lista td:nth-child(6) { white-space: normal; min-width: 8rem; }

/* 1.22 — gráfico de idade por categoria (cores validadas p/ daltonismo; escuro tem seus próprios tons) */
:root { --gi-kids: #F5C400; --gi-infantil: #8FD400; --gi-juvenil: #FF7A00; --gi-sem: #8A8499; }
[data-theme="dark"] { --gi-kids: #FFD60A; --gi-infantil: #A6E22E; --gi-juvenil: #FF8C1A; --gi-sem: #9A93AB; }
.gi-bloco { margin-top: 1rem; }
.gi-caixa { position: relative; }
.gi-legenda { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.8125rem; color: var(--texto); margin-bottom: 0.4rem; }
.gi-legenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gi-legenda i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.gi-legenda i.gi-kids { background: var(--gi-kids); } .gi-legenda i.gi-infantil { background: var(--gi-infantil); } .gi-legenda i.gi-juvenil { background: var(--gi-juvenil); }
.gi-legenda i.gi-sem { background: repeating-linear-gradient(90deg, var(--gi-sem) 0 4px, transparent 4px 7px); }
.gi-leg-faixa { color: var(--suave); }
.gi-area { position: relative; }
.gi-svg { width: 100%; height: auto; display: block; overflow: visible; }
.gi-svg .gi-grade { stroke: var(--linha); stroke-width: 1; }
.gi-svg .gi-eixo { fill: var(--suave); font-size: 11px; }
.gi-svg .gi-linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gi-svg .gi-linha.gi-kids, .gi-svg .gi-ponto.gi-kids { stroke: var(--gi-kids); } .gi-svg .gi-ponto.gi-kids { fill: var(--gi-kids); }
.gi-svg .gi-linha.gi-infantil, .gi-svg .gi-ponto.gi-infantil { stroke: var(--gi-infantil); } .gi-svg .gi-ponto.gi-infantil { fill: var(--gi-infantil); }
.gi-svg .gi-linha.gi-juvenil, .gi-svg .gi-ponto.gi-juvenil { stroke: var(--gi-juvenil); } .gi-svg .gi-ponto.gi-juvenil { fill: var(--gi-juvenil); }
.gi-svg .gi-linha.gi-sem { stroke: var(--gi-sem); stroke-dasharray: 5 4; } .gi-svg .gi-ponto.gi-sem { fill: var(--gi-sem); stroke: var(--gi-sem); }
.gi-svg .gi-ponto { stroke-width: 2; paint-order: stroke; stroke: var(--superficie) !important; }
.gi-svg .gi-faixa { opacity: 0.07; }
.gi-svg .gi-faixa.gi-kids { fill: var(--gi-kids); } .gi-svg .gi-faixa.gi-infantil { fill: var(--gi-infantil); } .gi-svg .gi-faixa.gi-juvenil { fill: var(--gi-juvenil); }
.gi-svg .gi-faixa-txt { fill: var(--suave); font-size: 10.5px; font-weight: 600; }
.gi-svg .gi-rotulo { fill: var(--texto); font-size: 12px; font-weight: 700; }
.gi-svg .gi-marca.gi-kids { fill: var(--gi-kids); } .gi-svg .gi-marca.gi-infantil { fill: var(--gi-infantil); } .gi-svg .gi-marca.gi-juvenil { fill: var(--gi-juvenil); } .gi-svg .gi-marca.gi-sem { fill: var(--gi-sem); }
.gi-svg .gi-hit { fill: transparent; cursor: crosshair; }
.gi-svg .gi-cruz { stroke: var(--linha-forte); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.gi-tip { position: absolute; top: 1.5rem; z-index: 5; min-width: 9rem; background: var(--superficie); color: var(--texto); border: 1px solid var(--linha-forte); border-radius: 8px; padding: 0.4rem 0.6rem; box-shadow: var(--sombra); font-size: 0.75rem; display: grid; gap: 0.1rem; pointer-events: none; }
.gi-tip[hidden] { display: none; }
.gi-tabela { margin-top: 0.5rem; font-size: 0.875rem; }
.gi-tabela summary { cursor: pointer; color: var(--azul); font-weight: 600; }

/* 1.23 — aula experimental em "Aulas de hoje" */
.dash-exp { display: inline-block; margin-top: 0.2rem; font-size: 0.75rem; font-weight: 700; color: var(--roxo); background: var(--roxo-suave); border: 1px dashed var(--roxo); border-radius: 6px; padding: 0.05rem 0.4rem; }
.dash-aulas li.dash-exp-solta { border-style: dashed; border-color: var(--roxo); background: var(--roxo-suave); }
.dash-exp-ic { width: 26px; text-align: center; font-size: 1.1rem; }
.dash-exp-pres { font-size: 1rem; }

/* 1.24 — gráfico no topo do Dashboard, sempre em fundo claro (também no tema escuro) */
.gi-bloco, [data-theme="dark"] .gi-bloco {
  --superficie: #FFFFFF; --superficie-2: #FAF8FD; --texto: #1E1630; --suave: #6E6880; --linha: #E6E1EE; --linha-forte: #CFC7DD; --azul: #7151AA;
  --gi-kids: #F5C400; --gi-infantil: #8FD400; --gi-juvenil: #FF7A00; --gi-sem: #8A8499;
  background: #FFFFFF; color: #1E1630; border: 1px solid #E6E1EE; border-radius: 16px; padding: 1rem 1.15rem; margin: 0 0 1.25rem; box-shadow: 0 1px 2px rgba(30, 18, 52, .05), 0 6px 20px rgba(30, 18, 52, .06);
}
.gi-bloco h2 { color: #1E1630; }
.gi-bloco .botao.secundario { background: #FFFFFF; color: #1E1630; border-color: #CFC7DD; }

/* 1.25 — gráfico em colunas */
.gi-svg .gi-coluna { stroke: var(--superficie); stroke-width: 1; }
.gi-svg .gi-coluna.gi-kids { fill: var(--gi-kids); } .gi-svg .gi-coluna.gi-infantil { fill: var(--gi-infantil); } .gi-svg .gi-coluna.gi-juvenil { fill: var(--gi-juvenil); }
.gi-svg .gi-coluna.gi-sem { fill: var(--gi-sem); }
.gi-svg .gi-valor { fill: var(--texto); font-size: 11px; font-weight: 700; }
.gi-svg .gi-base { stroke: var(--linha-forte); }
.gi-svg .gi-cruz { display: none; }
.gi-svg .gi-hit:hover { fill: rgba(113, 81, 170, .06); }
.gi-legenda i { width: 12px; height: 12px; border-radius: 3px; }
.gi-legenda i.gi-sem { background: var(--gi-sem); }

/* ============================================================
   1.26/1.27/1.28 — Mascote na tela de entrada, inteiro e sem encostar na janela de login (à direita em telas largas, acima no celular)
   ============================================================ */
.mascote-login { --m: 230px; display: flex; flex-direction: column; align-items: stretch; text-align: left; }
.mascote-palco { width: var(--m); align-self: center; margin: 0 0 0.9rem; pointer-events: none; }
.mascote-palco img { display: block; width: 100%; height: auto; animation: mascote-flutua 3.2s ease-in-out infinite; }
.mascote-corpo { filter: drop-shadow(0 10px 10px rgba(20, 12, 40, .18)); }
@keyframes mascote-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .mascote-palco img { animation: none; } }
@media (max-width: 420px) { .mascote-login { --m: 190px; } }
@media (max-height: 760px) { .tela-entrada .entrada-logo { margin-bottom: 0.75rem; } .tela-entrada .entrada-logo .logo-completo { width: min(230px, 70vw); } .mascote-login { --m: 170px; } }
[data-theme="dark"] .mascote-corpo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .55)) drop-shadow(0 10px 12px rgba(0, 0, 0, .5)); }
/* 1.28 — telas largas: mascote do lado direito da janela de login (sem encostar nela); telas estreitas: continua acima */
@media (min-width: 960px) {
  .mascote-login { position: relative; }
  .mascote-palco { --m: 270px; position: absolute; left: calc(100% + 1.75rem); top: 50%; transform: translateY(-50%); margin: 0; }
}
@media (min-width: 960px) and (max-height: 760px) { .mascote-palco { --m: 230px; } }

/* 1.26 — gráfico compacto no Dashboard + janela "Ver detalhes" com filtros (sempre em fundo claro, como o bloco) */
.gi-bloco .titulo-com-acao .linha-botoes { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }
.gi-compacto .gi-svg { max-height: 210px; }
.gi-compacto .gi-legenda { margin-bottom: 0.2rem; }
.gi-dialogo, [data-theme="dark"] .gi-dialogo {
  --superficie: #FFFFFF; --superficie-2: #FAF8FD; --texto: #1E1630; --suave: #6E6880; --linha: #E6E1EE; --linha-forte: #CFC7DD; --azul: #7151AA;
  --gi-kids: #F5C400; --gi-infantil: #8FD400; --gi-juvenil: #FF7A00; --gi-sem: #8A8499;
  background-color: #FFFFFF; color: #1E1630; width: min(980px, calc(100vw - 1.5rem));
}
.gi-dialogo .dialogo-corpo { max-height: calc(100vh - 2rem); overflow: auto; }
.gi-dialogo header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.6rem; }
.gi-dialogo header h2 { margin: 0; color: #1E1630; }
.gi-dialogo input, .gi-dialogo select { background: #FFFFFF; color: #1E1630; border-color: #CFC7DD; }
.gi-dialogo .botao.secundario { background: #FFFFFF; color: #1E1630; border-color: #CFC7DD; }
.gi-filtros { display: grid; gap: 0.55rem; padding: 0.75rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2); margin-bottom: 0.9rem; }
.gi-dialogo .dialogo-corpo, .atualizou-dialogo .dialogo-corpo { text-align: left; }
.gi-f-grupo { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.gi-f-tit { font-size: 0.75rem; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: 0.06em; width: 7.5rem; }
.gi-filtros .gi-chip { flex-direction: row; margin: 0; }
.gi-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border: 1px solid var(--linha-forte); border-radius: 999px; background: #FFFFFF; font-size: 0.8125rem; font-weight: 600; cursor: pointer; user-select: none; }
.gi-chip input { position: absolute; opacity: 0; pointer-events: none; }
.gi-chip i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.gi-chip i.gi-kids { background: var(--gi-kids); } .gi-chip i.gi-infantil { background: var(--gi-infantil); } .gi-chip i.gi-juvenil { background: var(--gi-juvenil); } .gi-chip i.gi-sem { background: var(--gi-sem); }
.gi-chip:has(input:checked) { background: #7151AA; border-color: #7151AA; color: #FFFFFF; }
.gi-chip:has(input:checked) i { box-shadow: 0 0 0 2px #FFFFFF; }
.gi-chip:has(input:focus-visible) { outline: 2px solid #F39A1C; outline-offset: 2px; }
.gi-f-linha { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end; }
.gi-f-linha label { display: grid; gap: 0.2rem; font-size: 0.75rem; font-weight: 700; color: var(--suave); }
.gi-f-linha select { min-width: 9rem; max-width: 16rem; }
.gi-f-idade span { display: flex; gap: 0.3rem; } .gi-f-idade input { width: 4.2rem; }
.gi-resumo { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.gi-resumo > div { flex: 1 1 7rem; border: 1px solid var(--linha); border-radius: 10px; padding: 0.45rem 0.7rem; display: grid; background: #FFFFFF; }
.gi-resumo b { font-size: 1.35rem; line-height: 1.1; color: #1E1630; } .gi-resumo span { font-size: 0.75rem; color: var(--suave); }
.gi-resumo .gi-r-kids { border-left: 4px solid var(--gi-kids); } .gi-resumo .gi-r-infantil { border-left: 4px solid var(--gi-infantil); }
.gi-resumo .gi-r-juvenil { border-left: 4px solid var(--gi-juvenil); } .gi-resumo .gi-r-sem { border-left: 4px solid var(--gi-sem); }
.gi-resultado { position: relative; min-height: 8rem; transition: opacity .15s; }
.gi-resultado.gi-carregando { opacity: 0.45; }
.gi-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.6rem; margin-top: 0.75rem; }
.gi-lista { border: 1px solid var(--linha); border-radius: 10px; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.gi-lista summary { cursor: pointer; font-weight: 700; }
.gi-lista ul { margin: 0.4rem 0 0; padding-left: 1.1rem; max-height: 12rem; overflow: auto; }
.gi-lista small { color: var(--suave); }
.gi-dialogo .contador { box-shadow: none; }
@media (max-width: 600px) { .gi-f-tit { width: 100%; } .gi-f-linha label, .gi-f-linha select { width: 100%; max-width: none; } }

/* 1.26 — janela "O sistema foi atualizado" (uma vez por pessoa a cada versão) */
.atualizou-dialogo { width: min(620px, calc(100vw - 1.5rem)); }
.atualizou-dialogo .dialogo-corpo { max-height: calc(100vh - 2rem); overflow: auto; }
.atualizou-topo { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--dourado); }
.atualizou-topo h2 { margin: 0; text-align: left; }
.atualizou-topo > div { flex: 1; text-align: left; }
.atualizou-topo .nota { margin: 0.15rem 0 0; }
.atualizou-ic { font-size: 2rem; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--roxo-suave); flex: none; }
.atualizou-versao { margin-bottom: 0.75rem; }
.atualizou-versao h3 { font-size: 1rem; margin: 0 0 0.35rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.atualizou-versao h3 small { color: var(--suave); font-weight: 500; }
.atualizou-versao ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.2rem; font-size: 0.9375rem; }
.atualizou-imgs { display: flex; gap: 0.5rem; margin-top: 0.5rem; overflow-x: auto; }
.atualizou-imgs img { height: 110px; width: auto; border-radius: 8px; border: 1px solid var(--linha); }
.atualizou-botoes { justify-content: flex-end; margin-top: 0.5rem; }

/* 1.29 — Verificação do servidor */
.verif-lista { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.verif-lista li { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.8rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); }
.verif-lista li > span { font-size: 1.1rem; line-height: 1.4; }
.verif-lista li div { display: grid; gap: 0.1rem; }
.verif-lista small { color: var(--suave); font-size: 0.8125rem; }
.verif-lista li.verif-erro { border-color: var(--perigo); border-left-width: 4px; }
.verif-lista li.verif-aviso { border-left: 4px solid var(--dourado); }

/* 1.31 — confirmação de e-mail e "Esqueci minha senha" */
.link-esqueci { display: block; text-align: center; font-size: 0.875rem; font-weight: 600; margin-top: -0.25rem; }
.form-entrada h1 { font-size: 1.25rem; margin: 0; }
.form-entrada .nota { margin: 0; }
.entrada-msg { text-align: left; }
.entrada-msg p { margin: 0; }
.aguarda-email { display: block; color: var(--dourado); font-weight: 600; }

/* 1.33 — dragãozinho no lugar do troféu (negócio fechado) */
.ic-dragao { display: inline-block; height: 1.3em; width: auto; vertical-align: -0.3em; }
.festa-ganho .trofeu .ic-dragao { height: 2.6rem; vertical-align: middle; }
.selo .ic-dragao { height: 1.25em; vertical-align: -0.35em; margin-right: 0.1em; }

/* 1.33 — Dados da escola */
.ed-form .largo-2 { grid-column: span 2; }
.ed-assinatura { border: 1px solid var(--linha); border-radius: 12px; padding: 0.75rem 1rem 1rem; }
.ed-assinatura legend { font-weight: 700; padding: 0 0.3rem; }
.ed-ass-linha { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; }
.ed-ass-previa { width: 320px; max-width: 100%; display: grid; justify-items: center; gap: 0.15rem; padding: 0.5rem 0.75rem; border-radius: 10px;
  background: #FFFFFF; border: 1px dashed #CFC7DD; color: #1E1630; }
.ed-ass-previa img { max-width: 100%; max-height: 110px; margin-bottom: -18px; position: relative; }
.ed-ass-previa.vazia span { color: #8A8499; font-size: 0.875rem; padding: 2.2rem 0 0.4rem; }
.ed-ass-traco { display: block; width: 100%; border-top: 1.5px solid #1E1630; }
.ed-ass-previa small { font-size: 0.75rem; color: #6E6880; }
@media (max-width: 700px) { .ed-form .largo-2 { grid-column: auto; } }

/* 1.33 — Pipeline: Perdidos */
.perdidos-dialogo { width: min(820px, calc(100vw - 1.5rem)); }
.perdidos-dialogo .dialogo-corpo { max-height: calc(100vh - 2rem); overflow: auto; }
.perdidos-dialogo header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.perdidos-dialogo header h2 { margin: 0; }
.perd-busca { width: 100%; margin: 0.5rem 0 0.75rem; }
.perd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.perd-lista > li { border: 1px solid var(--linha); border-left: 4px solid var(--perigo); border-radius: 10px; padding: 0.6rem 0.8rem; background: var(--superficie); }
.perd-topo { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.perd-topo small { display: block; color: var(--suave); }
.perd-motivo { margin-top: 0.15rem; }
.perd-hist { margin-top: 0.4rem; font-size: 0.875rem; }
.perd-hist summary { cursor: pointer; color: var(--azul); font-weight: 600; }
.perd-hist ol { margin: 0.4rem 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.perd-hist ol small { display: block; color: var(--suave); font-size: 0.75rem; }

/* 1.36 — Financeiro: visão geral (recebido × gastos), a receber, gastos */
.fin-kpis { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.fin-vence7 { margin-top: 0.9rem; display: block; line-height: 1.6; }
.fin-grafico { margin-top: 0.9rem; }
.fin-legenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; margin-bottom: 0.3rem; }
.fin-legenda span { display: inline-flex; gap: 0.35rem; align-items: center; }
.fin-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fin-legenda i.rec { background: #2E9E6A; } .fin-legenda i.gas { background: #E8930C; } .fin-legenda i.res { background: #7151AA; height: 3px; }
.fin-svg { width: 100%; height: auto; display: block; }
.fin-svg .fin-grade { stroke: var(--linha); stroke-width: 1; }
.fin-svg .fin-eixo { fill: var(--suave); font-size: 11px; }
.fin-svg .fin-rec { fill: #2E9E6A; } .fin-svg .fin-gas { fill: #E8930C; }
.fin-svg .fin-res { fill: none; stroke: #7151AA; stroke-width: 2; stroke-linejoin: round; }
[data-theme="dark"] .fin-svg .fin-res { stroke: #9B7FD6; }
.fin-cats .bi-barra i { background: #E8930C; }
.fin-tipo { display: flex; gap: 0.4rem; margin: 0.25rem 0 0.9rem; }
.fin-tipo button { flex: 1; border: 1.5px solid var(--linha-forte); background: var(--superficie); color: var(--texto); border-radius: 10px; padding: 0.55rem; font-weight: 700; cursor: pointer; }
.fin-tipo button.ativo { background: #7151AA; border-color: #7151AA; color: #fff; }
.fin-cats li { grid-template-columns: minmax(7rem, 12rem) 1fr auto 5.5rem; }
.fin-cats b { white-space: nowrap; }
.fin-cats small { color: var(--suave); font-size: 0.75rem; }
@media (max-width: 700px) { .fin-cats li { grid-template-columns: 1fr auto; } .fin-cats .bi-barra { grid-column: 1 / -1; } }

/* 1.39 — Pipeline: matriculados do mês */
.mat-lista > li { border-left-color: var(--verde); }
.mat-dir { display: grid; justify-items: end; gap: 0.2rem; white-space: nowrap; }
.mat-mes-nav { margin: 0.5rem 0 0.75rem; }

/* 1.40 — gastos recorrentes */
.fin-rec { background: var(--superficie-2, #FAF8FD); border: 1px dashed var(--linha-forte); border-radius: 10px; padding: 0.5rem 0.7rem; }
.fin-recs { margin: 0.6rem 0 0.9rem; border: 1px solid var(--linha); border-radius: 12px; padding: 0.55rem 0.8rem; background: var(--superficie); }
.fin-recs summary { cursor: pointer; font-weight: 700; }
.fin-recs summary small { color: var(--suave); font-weight: 500; }
.fin-rec-valor { display: inline-flex; gap: 0.3rem; align-items: center; }
.fin-rec-valor input { width: 6.5rem; text-align: right; padding: 0.25rem 0.4rem; }
.fin-rec { display: flex !important; gap: 0.5rem; align-items: flex-start; white-space: normal; }
.fin-rec small { display: block; color: var(--suave); font-weight: 500; }

/* 1.43: campo obrigatório */
.obrig { color: #d64545; font-weight: 700; }

/* 1.44: QR code do robô do WhatsApp em pop-up */
.qr-dialogo { width: min(420px, calc(100vw - 2rem)); }
.qr-caixa { display: grid; place-items: center; min-height: 316px; margin: 0.5rem 0 1rem; }
.qr-caixa img { width: 300px; height: 300px; max-width: 100%; background: #fff; padding: 8px; border-radius: 12px; border: 2px solid var(--preto, #111); image-rendering: pixelated; }
.qr-caixa img[hidden], .qr-espera[hidden], .qr-passos[hidden] { display: none; }
.qr-espera { text-align: center; max-width: 18rem; }
.qr-icone { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.qr-dialogo[data-estado="iniciando"] .qr-icone, .qr-dialogo[data-estado="desconectado"] .qr-icone, .qr-dialogo[data-estado="qr"] .qr-icone { animation: girar 1.4s linear infinite; display: inline-block; }
.qr-passos { margin: 0 0 0.75rem; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
@keyframes girar { to { transform: rotate(360deg); } }

/* 1.45: frequência por aluno */
.freq-achados { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.5rem; }
.freq-achados li a { display: flex; padding: 0.6rem 0.75rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.freq-achados li a:hover { border-color: var(--roxo, #7151AA); }
.freq-aluno-topo { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.freq-aluno-topo .resumo { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; list-style: none; padding: 0; }
.freq-aluno-topo .resumo li { display: flex; flex-direction: column; min-width: 5rem; }
.freq-aluno-topo .resumo strong { font-size: 1.6rem; line-height: 1.1; }

/* 1.47: Frequência — lista de alunos dinâmica */
.fa-barra { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin: 0.25rem 0 0.5rem; }
.fa-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fa-chips button { font: inherit; font-size: 0.875rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.fa-chips button b { margin-left: 0.3rem; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--superficie-2, #f3f0f8); color: var(--suave); }
.fa-chips button:hover { border-color: var(--azul); }
.fa-chips button.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }
.fa-chips button.ativo b { background: rgba(255, 255, 255, .25); color: #fff; }
.fa-ordem { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--suave); margin: 0; white-space: nowrap; }
.fa-ordem select { width: auto; }
.fa-contagem { margin: 0 0 0.75rem; color: var(--suave); font-size: 0.875rem; }
.fa-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; align-items: start; }
.fa-card { --cor: var(--azul); display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); border-left: 5px solid var(--cor); color: var(--texto); text-decoration: none; box-shadow: 0 1px 2px rgba(20, 12, 40, .05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.fa-card:hover, .fa-card:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(20, 12, 40, .12); text-decoration: none; color: var(--texto); }
.fa-card[hidden] { display: none; }
.fa-anima .fa-card { animation: fa-surge .35s ease-out both; animation-delay: calc(var(--i, 0) * 25ms); }
@keyframes fa-surge { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .fa-anima .fa-card { animation: none; } .fa-card:hover { transform: none; } }
.fa-ok { --cor: #2E9E6A; } .fa-cem { --cor: #F39A1C; } .fa-baixa { --cor: #D64545; } .fa-sem { --cor: #A8A2B5; }
.fa-anel { flex: none; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--cor) calc(var(--p) * 1%), var(--linha) 0); }
.fa-anel span { width: 52px; height: 52px; border-radius: 50%; background: var(--superficie); display: grid; place-items: center; font-weight: 800; font-size: 0.95rem; color: var(--cor); }
.fa-info { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; flex: 1; }
.fa-nome { display: flex; gap: 0.6rem; align-items: center; min-width: 0; }
.fa-nome > span { display: flex; flex-direction: column; min-width: 0; }
.fa-nome b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-nome small { color: var(--suave); font-size: 0.8rem; }
.fa-turmas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fa-turmas i { font-style: normal; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0.1rem 0.5rem; border-radius: 6px; background: var(--azul-suave, #efe9fa); color: var(--azul); }
.fa-nums { font-size: 0.82rem; color: var(--suave); }
.fa-nums b { color: var(--texto); }
.fa-pontos { display: flex; gap: 4px; }
.fa-pontos i { width: 10px; height: 10px; border-radius: 50%; background: #2E9E6A; }
.fa-pontos i.f { background: #D64545; }
@media (max-width: 520px) { .fa-grade { grid-template-columns: 1fr; } .fa-barra { flex-direction: column; align-items: stretch; } }
[data-theme="dark"] .fa-chips button.ativo { color: #1E1630; }
[data-theme="dark"] .fa-chips button.ativo b { color: #1E1630; background: rgba(255, 255, 255, .4); }

/* 1.50: Faturamento (boletos Asaas) */
.selo-cancelado { background: #8A8499; }
.fat-botao { background: #2E9E6A; border-color: #2E9E6A; }
.fat-teste { background: #FFF4DB; border: 1px solid #F3C66B; color: #6B4A00; }
[data-theme="dark"] .fat-teste { background: #3A2E14; border-color: #7A5B1C; color: #F6D79A; }
.fat-topo { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fat-topo .filtros { margin: 0; }
.fat-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.85rem; margin-bottom: 1rem; }
.fat-kpi { --cor: var(--azul); position: relative; display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 1.1rem 1rem 1.25rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); color: var(--texto); text-decoration: none; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.fat-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--cor); }
.fat-kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 12, 40, .1); text-decoration: none; color: var(--texto); }
.fat-kpi b { font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.01em; }
.fat-kpi span { color: var(--suave); font-size: 0.9rem; }
.fat-kpi small { color: var(--cor); font-weight: 700; font-size: 0.8rem; }
.fat-kpi .fat-ic { position: absolute; right: 0.9rem; top: 0.8rem; font-size: 1.3rem; opacity: .85; }
.fat-kpi.pago { --cor: #2E9E6A; } .fat-kpi.aberto { --cor: #E8930C; } .fat-kpi.vencido { --cor: #D2453B; }
.fat-paineis { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 0.85rem; margin-bottom: 1rem; }
.fat-paineis .bloco { margin: 0; }
.fat-paineis h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.fat-donut-linha { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.fat-donut { width: 132px; height: 132px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(#2E9E6A 0 var(--a), #E8930C var(--a) var(--b), #D2453B var(--b) 100%); }
.fat-donut span { width: 94px; height: 94px; border-radius: 50%; background: var(--superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fat-donut b { font-size: 1.45rem; } .fat-donut small { font-size: 0.7rem; color: var(--suave); }
.fat-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.9rem; }
.fat-legenda li { display: flex; align-items: center; gap: 0.5rem; }
.fat-legenda b { margin-left: auto; padding-left: 0.75rem; }
.fat-legenda i { width: 11px; height: 11px; border-radius: 3px; } .fat-legenda i.pago { background: #2E9E6A; } .fat-legenda i.aberto { background: #E8930C; } .fat-legenda i.vencido { background: #D2453B; } .fat-legenda i.cancelado { background: #8A8499; }
.fat-mini ul { list-style: none; margin: 0; padding: 0; }
.fat-mini li + li { border-top: 1px solid var(--linha); }
.fat-mini li a { display: flex; gap: 0.75rem; justify-content: space-between; align-items: center; padding: 0.5rem 0.2rem; color: var(--texto); text-decoration: none; }
.fat-mini li a:hover { background: var(--superficie-2, #faf8fd); }
.fat-mini li span { display: flex; flex-direction: column; min-width: 0; } .fat-mini li small { color: var(--suave); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fat-mini em { font-style: normal; font-weight: 800; white-space: nowrap; } .fat-mini em.ok { color: #2E9E6A; }
.fat-lista-topo { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.fa-chips a { font-size: 0.875rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); text-decoration: none; }
.fa-chips a b { margin-left: 0.3rem; font-size: 0.75rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--superficie-2, #f3f0f8); color: var(--suave); }
.fa-chips a.ativo { background: var(--azul); border-color: var(--azul); color: #fff; } .fa-chips a.ativo b { background: rgba(255,255,255,.25); color: #fff; }
[data-theme="dark"] .fa-chips a.ativo, [data-theme="dark"] .fa-chips a.ativo b { color: #1E1630; }
.fat-busca { max-width: 320px; }
.fat-tabela td small { display: block; color: var(--suave); font-size: 0.78rem; }
.fat-tabela tr.fat-vencido td:first-child { box-shadow: inset 4px 0 0 #D2453B; }
.fat-tabela tr.fat-pago td:first-child { box-shadow: inset 4px 0 0 #2E9E6A; }
.fat-tabela tr.fat-cancelado { opacity: .6; }
.fat-sel-barra { position: sticky; bottom: 0.75rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: #2A1B47; color: #fff; box-shadow: 0 8px 20px rgba(20,12,40,.25); }
.fat-sel-barra[hidden] { display: none; }
@media (max-width: 1100px) { .fat-paineis { grid-template-columns: 1fr 1fr; } .fat-donut-bloco { grid-column: 1 / -1; } }
@media (max-width: 700px) { .fat-paineis { grid-template-columns: 1fr; } }
/* configuração */
.fat-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.fat-st { display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--superficie); }
.fat-st > span { font-size: 1.4rem; } .fat-st div { display: flex; flex-direction: column; } .fat-st small { color: var(--suave); }
.fat-st.ok { border-color: #8FD3B0; } .fat-st.falta { border-style: dashed; } .fat-st.teste { border-color: #F3C66B; } .fat-st.prod { border-color: #2E9E6A; }
.fat-passos { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; }
/* cobrança */
.cob-passos { list-style: none; display: flex; gap: 0.5rem; margin: 0 0 1rem; padding: 0; flex-wrap: wrap; }
.cob-passos li { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem 0.35rem 0.35rem; border-radius: 999px; background: var(--superficie); border: 1px solid var(--linha); color: var(--suave); font-weight: 600; font-size: 0.9rem; }
.cob-passos li b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--linha); color: var(--texto); font-size: 0.8rem; }
.cob-passos li.atual { color: var(--texto); border-color: var(--azul); } .cob-passos li.atual b { background: var(--azul); color: #fff; }
.cob-passos li.feito b { background: #2E9E6A; color: #fff; }
.cob-busca { position: relative; }
.cob-busca-campo { display: flex; flex-direction: column; gap: 0.35rem; font-weight: 700; }
.cob-busca-campo input { font-size: 1.05rem; padding: 0.8rem 1rem; }
.cob-resultados { margin-top: 0.5rem; display: grid; gap: 0.4rem; }
.cob-res { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie); color: var(--texto); text-decoration: none; }
.cob-res:hover, .cob-res:focus-visible { border-color: var(--azul); background: var(--superficie-2, #faf8fd); text-decoration: none; }
.cob-res > span { display: flex; flex-direction: column; flex: 1; min-width: 0; } .cob-res small { color: var(--suave); }
.cob-res i { font-style: normal; color: var(--azul); font-weight: 700; font-size: 0.85rem; white-space: nowrap; }
.cob-cab { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.cob-cab .aluno-linha small { display: block; }
.cob-selo { font-weight: 700; font-size: 0.85rem; padding: 0.35rem 0.8rem; border-radius: 999px; }
.cob-selo.ok { background: #E6F6EE; color: #1F7A50; } .cob-selo.falta { background: #FDECEA; color: #B4352D; }
[data-theme="dark"] .cob-selo.ok { background: #183B2B; color: #8FE0B7; } [data-theme="dark"] .cob-selo.falta { background: #45201C; color: #F5A39B; }
.cob-pagador h2, .cob-itens h2 { font-size: 1.1rem; margin: 0.25rem 0 0.75rem; } .cob-pagador h2 small { font-weight: 500; color: var(--suave); font-size: 0.85rem; }
label.com-erro input { border-color: #D2453B; box-shadow: 0 0 0 3px rgba(210, 69, 59, .12); }
.erro-campo { color: #D2453B; font-weight: 600; }
.cob-lista { display: grid; gap: 0.45rem; margin-bottom: 0.75rem; }
.cob-item { display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 12px; border: 1px solid var(--linha); background: var(--superficie); cursor: pointer; }
.cob-item:has(input:checked) { border-color: var(--azul); background: var(--azul-suave, #efe9fa); }
.cob-item input { width: 18px; height: 18px; flex: none; }
.cob-item-txt { flex: 1; display: flex; flex-direction: column; } .cob-item-txt small { color: var(--suave); }
.cob-item-valor { font-weight: 800; white-space: nowrap; }
.cob-item.vencida { border-left: 4px solid #D2453B; }
.cob-linha-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: 1rem; }
.cob-novo-venc { display: flex !important; flex-direction: row !important; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--suave); margin: 0; }
.cob-novo-venc input { width: auto; }
.cob-avulsa { border: 1px dashed var(--linha-forte); border-radius: 12px; padding: 0.6rem 0.9rem; margin-bottom: 1rem; }
.cob-avulsa summary { list-style: none; cursor: pointer; } .cob-avulsa summary::-webkit-details-marker { display: none; }
.cob-avulsa .formulario { margin-top: 0.75rem; }
.cob-total { position: sticky; bottom: 0.75rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-radius: 14px; background: #2A1B47; color: #fff; box-shadow: 0 8px 20px rgba(20,12,40,.25); }
.cob-total .botao { background: #F39A1C; border-color: #F39A1C; color: #1E1630; }
.ed-unidade small .logo { height: 26px; width: auto; vertical-align: middle; margin: 0 0.4rem; }
.ed-unidade small .marca-unidade { font-size: 0.95rem; vertical-align: middle; }
/* 1.50: cartões das telas de faturamento */
.fat-paineis > .bloco, .fat-lista, .cob-busca, .cob-pagador, .cob-itens, .fat-acoes, .fat-config fieldset { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1rem 1.15rem; min-width: 0; box-shadow: 0 1px 2px rgba(20, 12, 40, .04); }
.fat-paineis h2 small, .fat-lista h2 small { display: block; font-weight: 500; color: var(--suave); font-size: 0.8rem; }
.fat-legenda li { white-space: nowrap; }
.fat-mini li a > span { flex: 1; }
.cob-busca, .cob-pagador, .cob-itens { margin-bottom: 1rem; }
.fat-config fieldset { margin: 0 0 1rem; }
.fat-config fieldset legend { font-weight: 700; padding: 0 0.4rem; }
.cob-lista .cob-item { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left; font-weight: 400; margin: 0; }
.fat-tabela td:nth-child(3) { min-width: 190px; }
.cob-pagador [data-cob-cep-st] { margin-top: 0.85rem; }
/* 1.50: nome da unidade mais leve e elegante (menor, contorno fino) */
.marca-unidade { font-family: "Inter", "Segoe UI", Arial, sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.08em; color: #F39A1C;
  text-shadow: none; -webkit-text-stroke: 0.6px #1E1630; paint-order: stroke fill; }
.entrada-logo .marca-unidade { font-size: 1.25rem; text-shadow: none; -webkit-text-stroke: 0.8px #1E1630; }
[data-theme="dark"] .marca-unidade { -webkit-text-stroke: 0; }
@media (max-width: 560px) { .topo .marca .marca-unidade { font-size: 0.78rem; } }
/* 1.51: fotos da Cobrança — círculo perfeito, pequeno e alinhado (minimalista) */
.aluno-foto.cob-foto { width: 40px !important; height: 40px !important; min-width: 40px; flex: 0 0 40px; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--linha); box-shadow: none; object-fit: cover; padding: 0;
  display: inline-grid; place-items: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; background: var(--superficie-2, #f3f0f8); color: var(--suave); }
.aluno-foto.cob-foto.sem-foto { border-style: solid; }
.cob-res, .cob-aluno { align-items: center; }
.cob-aluno { display: flex; gap: 0.75rem; }
.cob-aluno > span { display: flex; flex-direction: column; line-height: 1.25; }
.cob-res { gap: 0.85rem; }
/* 1.51: forma de pagamento na ficha do aluno */
.pag-bloco { border: 1px solid var(--linha); border-radius: var(--raio-grande); background: var(--superficie); padding: 0.9rem 1.1rem; }
.pag-linha { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.pag-atual { display: flex; gap: 0.8rem; align-items: center; }
.pag-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; background: var(--superficie-2, #f3f0f8); flex: none; }
.pag-atual small { display: block; color: var(--suave); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.pag-atual b { font-size: 1.1rem; } .pag-atual .nota { display: block; margin: 0.15rem 0 0; }
.pag-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.pag-form select { width: auto; }
.pag-cancelar { flex-direction: row !important; align-items: center; gap: 0.4rem; margin: 0; }
.pag-cancelar[hidden] { display: none !important; }
/* 1.51: prévia do nome da unidade em Dados da escola (não invade os campos de baixo) */
.ed-unidade { min-width: 0; }
.ed-prev { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.15rem; padding: 0.45rem 0.8rem; border: 1px solid var(--linha); border-radius: 10px; background: var(--superficie); max-width: 100%; overflow: hidden; align-self: flex-start; }
.ed-prev .logo { height: 26px !important; width: auto !important; max-width: none; flex: none; position: static; }
.ed-prev .marca-unidade { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 1.52: nome da unidade em vetor — mesma nitidez do logo (contorno por trás da letra) */
@font-face { font-family: "DragaoUnidade"; src: url("fonts/inter-800.woff") format("woff"); font-weight: 800; font-style: normal; font-display: swap; }
.unidade-svg { display: inline-block; width: auto; height: 1.2rem; overflow: visible; vertical-align: middle; flex: none; }
.unidade-svg.marca-unidade { -webkit-text-stroke: 0; text-shadow: none; font-size: inherit; letter-spacing: 0; }
.unidade-svg text { font-family: "DragaoUnidade", "Segoe UI", Arial, sans-serif; font-weight: 800; fill: #F39A1C; stroke: #1E1630; stroke-width: 3px; }
.topo .marca .unidade-svg { height: 1.25rem; align-self: center; }
.entrada-logo .unidade-svg { height: 1.9rem; }
[data-theme="dark"] .unidade-svg text { stroke: #0E0A18; }
.ed-prev .unidade-svg { height: 1.05rem; }
@media (max-width: 560px) { .topo .marca .unidade-svg { height: 0.95rem; } }
@media (max-width: 380px) { .topo .marca .unidade-svg { display: none; } }
/* 1.54: consulta de boletos */
.bq-form { display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(120px, 1fr)) auto; gap: 0.6rem 0.75rem; align-items: end; padding: 1rem 1.1rem; margin-bottom: 0.75rem;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); }
.bq-busca input { font-size: 1rem; }
.bq-bts { display: flex; gap: 0.5rem; }
@media (max-width: 1000px) { .bq-form { grid-template-columns: 1fr 1fr; } .bq-busca, .bq-bts { grid-column: 1 / -1; } }
.bq-resumo { color: var(--suave); font-size: 0.9rem; margin: 0 0 0.6rem; }
.bq-lista { display: grid; gap: 0.5rem; }
.bq-item { --cor: #E8930C; background: var(--superficie); border: 1px solid var(--linha); border-left: 5px solid var(--cor); border-radius: 14px; }
.bq-pago { --cor: #2E9E6A; } .bq-vencido { --cor: #D2453B; } .bq-cancelado { --cor: #8A8499; }
.bq-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 82px minmax(0, 1fr) 110px 110px 104px; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; }
.bq-item summary::-webkit-details-marker { display: none; }
.bq-item summary:hover { background: var(--superficie-2, #faf8fd); border-radius: 0 13px 13px 0; }
.bq-item[open] summary { border-bottom: 1px solid var(--linha); }
.bq-num { font-family: "Consolas", monospace; font-size: 0.85rem; color: var(--suave); }
.bq-quem { display: flex; flex-direction: column; min-width: 0; } .bq-quem small { color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-venc small { display: block; color: var(--suave); font-size: 0.72rem; }
.bq-valor { font-weight: 800; text-align: right; }
.bq-item .selo { justify-self: end; }
.bq-det { padding: 0.9rem 1rem 1rem; display: grid; gap: 0.9rem; }
.bq-det dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem 1.25rem; }
.bq-det dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); font-weight: 700; }
.bq-det dd { margin: 0.1rem 0 0; font-size: 0.92rem; }
.bq-mono { font-family: "Consolas", monospace; font-size: 0.85rem; word-break: break-all; }
.bq-acoes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.botao.perigo { background: #D2453B; border-color: #D2453B; color: #fff; }
@media (max-width: 760px) { .bq-item summary { grid-template-columns: 1fr auto; } .bq-num, .bq-venc { display: none; } }
/* 1.54: destaque dos nomes de alunos (busca da Cobrança e listas) mais legível no claro e no escuro */
.cob-res { transition: background .12s, border-color .12s, box-shadow .12s; }
.cob-res b { color: var(--texto); }
.cob-res:hover, .cob-res:focus-visible, .cob-res.sel { background: #F3EEFC; border-color: #7151AA; box-shadow: inset 4px 0 0 #7151AA; outline: none; }
.cob-res:hover b, .cob-res:focus-visible b, .cob-res.sel b { color: #2A1B47; }
.cob-res:hover small, .cob-res:focus-visible small, .cob-res.sel small { color: #4A4060; }
.cob-res:hover i, .cob-res:focus-visible i, .cob-res.sel i { color: #5B3E96; }
[data-theme="dark"] .cob-res:hover, [data-theme="dark"] .cob-res:focus-visible, [data-theme="dark"] .cob-res.sel { background: #3A2D5C; border-color: #B79BEA; box-shadow: inset 4px 0 0 #F39A1C; }
[data-theme="dark"] .cob-res:hover b, [data-theme="dark"] .cob-res:focus-visible b, [data-theme="dark"] .cob-res.sel b { color: #FFFFFF; }
[data-theme="dark"] .cob-res:hover small, [data-theme="dark"] .cob-res:focus-visible small, [data-theme="dark"] .cob-res.sel small { color: #E4DAF5; }
[data-theme="dark"] .cob-res:hover i, [data-theme="dark"] .cob-res:focus-visible i, [data-theme="dark"] .cob-res.sel i { color: #F7B955; }
.aluno-linha:hover b, .aluno-linha:hover span { color: var(--texto); }
.bq-form { display: flex !important; flex-wrap: wrap; }
.bq-form > label { flex: 1 1 130px; margin: 0; }
.bq-form > .bq-busca { flex: 3 1 300px; }
.bq-form .bq-bts { flex: 0 0 auto; align-self: flex-end; }
.bq-form .bq-bts .botao { white-space: nowrap; }
.bq-form > label:not(.bq-busca) { max-width: 190px; }
/* 1.57: Controle de cobrança */
.ccb-kpis .fat-kpi.ativo { box-shadow: 0 0 0 2px var(--cor) inset, 0 8px 18px rgba(20,12,40,.08); }
.ccb-alerta { color: #D2453B !important; }
.ccb-barra { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; margin: 0 0 0.85rem; }
.ccb-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 0.85rem; }
@media (max-width: 520px) { .ccb-lista { grid-template-columns: 1fr; } }
.ccb-card { background: var(--superficie); border: 1px solid var(--linha); border-left: 5px solid #E8930C; border-radius: 16px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ccb-card.ccb-atraso { border-left-color: #D2453B; }
.ccb-card[hidden] { display: none; }
.ccb-cab { display: flex; gap: 0.75rem; align-items: flex-start; justify-content: space-between; }
.ccb-cab .aluno-linha small { display: block; color: var(--suave); font-size: 0.8rem; }
.ccb-total { text-align: right; white-space: nowrap; } .ccb-total b { display: block; font-size: 1.2rem; } .ccb-total small { color: var(--suave); font-size: 0.78rem; }
.ccb-atraso .ccb-total b { color: #D2453B; } [data-theme="dark"] .ccb-atraso .ccb-total b { color: #F5877E; }
.ccb-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.ccb-itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--superficie-2, #faf8fd); font-size: 0.9rem; }
.ccb-itens li small { display: block; color: var(--suave); font-size: 0.78rem; }
.ccb-itens li b { white-space: nowrap; }
.ccb-ultimo { margin: 0; font-size: 0.84rem; color: var(--suave); padding: 0.45rem 0.6rem; border-radius: 10px; background: #FFF6E5; }
.ccb-ultimo.vencida { background: #FDECEA; color: #8E2A23; }
[data-theme="dark"] .ccb-ultimo { background: #3A2E14; color: #F6D79A; } [data-theme="dark"] .ccb-ultimo.vencida { background: #45201C; color: #F5A39B; }
.ccb-acoes { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ccb-wpp { background: #25D366; border-color: #25D366; color: #0B3D1E; }
.ccb-pagos td small { display: block; color: var(--suave); }
/* 1.58: nomes dos alunos com mais contraste (claro e escuro) — chips da Grade, busca e seleção */
.gh-aluno { background: color-mix(in srgb, var(--cat) 14%, #FFFFFF); color: #1E1433; border-color: color-mix(in srgb, var(--cat) 60%, #FFFFFF); }
.gh-aluno span { font-weight: 700; letter-spacing: .005em; }
.gh-aluno:hover { background: color-mix(in srgb, var(--cat) 24%, #FFFFFF); box-shadow: 0 2px 8px rgba(30, 18, 52, .22); }
.gh-aluno.achado { background: #FFE066; color: #1A1030; border-color: #1A1030; border-left-color: var(--cat); box-shadow: 0 0 0 2px #1A1030, 0 0 0 5px rgba(255, 196, 0, .55); position: relative; z-index: 2; }
.gh-aluno.selecionado { background: #2A1B47; color: #FFFFFF; border-color: #2A1B47; border-left-color: var(--cat); box-shadow: 0 0 0 3px #F3A712; }
.gh-aluno.apagado { opacity: .28; filter: grayscale(.8); }
[data-theme="dark"] .gh-aluno { background: color-mix(in srgb, var(--cat) 26%, #1B1530); color: #FFFFFF; border-color: color-mix(in srgb, var(--cat) 65%, #1B1530); }
[data-theme="dark"] .gh-aluno:hover { background: color-mix(in srgb, var(--cat) 38%, #1B1530); box-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
[data-theme="dark"] .gh-aluno.achado { background: #FFD43B; color: #140C24; border-color: #FFFFFF; border-left-color: var(--cat); box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px rgba(255, 212, 59, .45); }
[data-theme="dark"] .gh-aluno.selecionado { background: #FFFFFF; color: #1A1030; border-color: #FFFFFF; border-left-color: var(--cat); box-shadow: 0 0 0 3px #F3A712; }
[data-theme="dark"] .gh-aluno.apagado { opacity: .3; }
a.aluno-linha { border-radius: 10px; padding: 0.2rem 0.45rem 0.2rem 0.25rem; margin-left: -0.25rem; transition: background .12s, box-shadow .12s; }
a.aluno-linha:hover, a.aluno-linha:focus-visible { outline: none; background: #F3EEFC; box-shadow: inset 4px 0 0 #7151AA; }
a.aluno-linha:hover, a.aluno-linha:hover span, a.aluno-linha:focus-visible { color: #2A1B47; }
[data-theme="dark"] a.aluno-linha:hover, [data-theme="dark"] a.aluno-linha:focus-visible { background: #3A2D5C; box-shadow: inset 4px 0 0 #F39A1C; }
[data-theme="dark"] a.aluno-linha:hover, [data-theme="dark"] a.aluno-linha:hover span, [data-theme="dark"] a.aluno-linha:focus-visible { color: #FFFFFF; }
/* 1.58: kits da matrícula no Estoque escolar */
.kit-linha td:first-child { box-shadow: inset 5px 0 0 var(--kit-cor); }
.kit-linha { background: color-mix(in srgb, var(--kit-cor) 7%, var(--superficie)); }
.kit-icone { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; margin-right: 0.45rem; border-radius: 50%; font-size: 1.05rem; vertical-align: middle; background: color-mix(in srgb, var(--kit-cor) 20%, var(--superficie)); border: 2px solid var(--kit-cor); }
.kit-selo { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #FFFFFF; background: var(--kit-cor); vertical-align: middle; }
[data-theme="dark"] .kit-linha { background: color-mix(in srgb, var(--kit-cor) 14%, var(--superficie)); }
.kit-linha td:first-child { min-width: 260px; }
.kit-linha td:first-child small { display: block; margin-top: 0.15rem; }
/* 1.59: cores de destaque dos nomes na Grade — Kids amarelo, Infantil verde-limão, Juvenil (Dragão) laranja */
.gh-area .gh-aluno[data-cat="kids"], .gh-area .gh-turma[data-cat="kids"], [data-ver-cat="kids"], .gh-dc-opcoes button[value="kids"] { --hl: #FFD60A; }
.gh-area .gh-aluno[data-cat="infantil"], .gh-area .gh-turma[data-cat="infantil"], [data-ver-cat="infantil"], .gh-dc-opcoes button[value="infantil"] { --hl: #B6F01F; }
.gh-area .gh-aluno[data-cat="juvenil"], .gh-area .gh-turma[data-cat="juvenil"], [data-ver-cat="juvenil"], .gh-dc-opcoes button[value="juvenil"] { --hl: #FF8C1A; }
.gh-aluno { --hl: #FFE066; }
.gh-aluno.achado, [data-theme="dark"] .gh-aluno.achado { background: var(--hl); color: #1A1030; }
/* 1.60: material removido (histórico mantido) */
.selo.mat-removido { background: #ECE7F4; color: #5A4C72; font-size: 0.68rem; }
[data-theme="dark"] .selo.mat-removido { background: #3A3150; color: #E4DAF5; }
.mat-removidos > summary { cursor: pointer; list-style: none; }
.mat-removidos > summary h2 { display: inline; }
.mat-removidos > summary::before { content: '▸ '; color: var(--suave); }
.mat-removidos[open] > summary::before { content: '▾ '; }
/* 1.61: tabela da demonstração */
.demo-tabela td { vertical-align: top; }
.demo-tabela td:first-child { white-space: nowrap; }
.demo-tabela td:nth-child(2) { white-space: nowrap; color: var(--suave); font-weight: 600; }
.demo-area span { font-size: 1.1rem; margin-right: 0.15rem; }
@media (max-width: 700px) { .demo-tabela td:first-child, .demo-tabela td:nth-child(2) { white-space: normal; } }
/* 1.62: carga da demonstração em etapas */
.demo-progresso { margin-top: 0.9rem; }
.demo-barra { height: 12px; border-radius: 999px; background: var(--linha); overflow: hidden; }
.demo-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7151AA, #F39A1C); transition: width .4s; }
.demo-progresso p { margin: 0.5rem 0 0; font-weight: 600; }
.demo-ciente { flex-direction: row !important; align-items: center; gap: 0.5rem; margin: 0 0 0.8rem; font-weight: 600; }
.demo-remover { border: 1px solid color-mix(in srgb, #D2453B 35%, var(--linha)); border-radius: 16px; padding: 1rem 1.2rem; }
.demo-aviso { display: block; }
/* 1.62: cores das categorias em todo o sistema — Kids amarelo, Infantil verde-limão, Juvenil (Dragão) laranja.
   Fundos claros pedem texto escuro: os selos usam a cor misturada com o texto, e os botões cheios usam texto escuro. */
.cat-selo { color: color-mix(in srgb, var(--cat) 45%, var(--texto)); background: color-mix(in srgb, var(--cat) 20%, var(--superficie)); border-color: color-mix(in srgb, var(--cat) 70%, transparent); }
.gh-turma-cat { color: color-mix(in srgb, var(--cat) 45%, var(--texto)); }
.gh-cats button.ativo { color: #1A1030; }
.kit-selo { color: #1A1030; }
.resumo-cat strong { color: color-mix(in srgb, var(--cat) 45%, var(--texto)); }
/* 1.62: anel de porcentagem (Vendas e metas, ponto) — o número cabe dentro, centralizado, mesmo passando de 100% */
.q-anel { width: 3.75rem; height: 3.75rem; flex: 0 0 auto; }
.q-kpis .q-anel b, .q-anel b { width: 2.95rem; height: 2.95rem; font-size: 0.8125rem; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: center; }
.q-kpis .q-anel.longo b, .q-anel.longo b { font-size: 0.6875rem; }
.q-anel.cheio { background: conic-gradient(var(--verde) 100%, var(--verde) 0); }
.q-anel.cheio b { color: var(--verde); }
.demo-notas { margin: 1rem 0; padding-left: 1.2rem; line-height: 1.6; } .demo-notas li { margin: 0.2rem 0; }
/* 1.63: histórico de versões (só texto) na Info atualizações */
.info-hist-topo { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; justify-content: space-between; }
.info-hist-topo h2 { margin: 0; }
.info-log { list-style: none; margin: 0.8rem 0 0; padding: 0; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; }
.info-log > li + li { border-top: 1px solid var(--linha); }
.info-log summary { cursor: pointer; padding: 0.55rem 0.8rem; font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.info-log summary:hover { background: var(--superficie-2); }
.info-log summary code { font-weight: 800; color: var(--primaria, #7151AA); min-width: 3.4rem; }
.info-log-data { color: var(--suave); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.info-log-banco { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; padding: 0.05rem 0.45rem; border-radius: 999px; background: #FFE9C7; color: #8A4B00; }
[data-theme="dark"] .info-log-banco { background: #4A3410; color: #FFD9A0; }
.info-log details > ul { margin: 0 0.8rem 0.4rem 2.2rem; font-size: 0.875rem; line-height: 1.5; }
.info-log-mig { margin: 0 0.8rem 0.7rem 2.2rem; font-size: 0.8rem; color: var(--suave); }
/* 1.64: Monitor de conexão */
.mon { display: flex; flex-direction: column; gap: 1.1rem; }
.mon-luz { width: 18px; height: 18px; border-radius: 50%; background: #A8A2B5; box-shadow: 0 0 0 4px rgba(168,162,181,.2); flex: 0 0 auto; transition: background .3s, box-shadow .3s; }
.mon-luz.grande { width: 46px; height: 46px; box-shadow: 0 0 0 8px rgba(168,162,181,.2); }
.mon-topo { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; border-radius: 18px; border: 2px solid var(--linha); background: var(--superficie); }
.mon-topo-txt { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.mon-topo-txt b { font-size: 1.45rem; line-height: 1.2; }
.mon-topo-txt span { color: var(--suave); }
.mon-proximo { text-align: right; display: flex; flex-direction: column; } .mon-proximo small { color: var(--suave); } .mon-proximo b { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.mon-topo.mon-ok { border-color: #2E9E6A; background: color-mix(in srgb, #2E9E6A 9%, var(--superficie)); }
.mon-topo.mon-ok .mon-luz { background: #22B36B; box-shadow: 0 0 0 8px rgba(34,179,107,.22), 0 0 24px rgba(34,179,107,.6); }
.mon-topo.mon-lento { border-color: #E8A10C; background: color-mix(in srgb, #F5C400 12%, var(--superficie)); }
.mon-topo.mon-lento .mon-luz { background: #F5B400; box-shadow: 0 0 0 8px rgba(245,180,0,.25), 0 0 24px rgba(245,180,0,.6); }
.mon-topo.mon-erro { border-color: #D2453B; background: color-mix(in srgb, #D2453B 11%, var(--superficie)); }
.mon-topo.mon-erro .mon-luz { background: #E5372B; box-shadow: 0 0 0 8px rgba(229,55,43,.25), 0 0 26px rgba(229,55,43,.7); animation: mon-pisca 1s infinite; }
@keyframes mon-pisca { 50% { opacity: .45; } }
.mon.testando .mon-proximo b::after { content: ' ⟳'; }
.mon-camadas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; }
.mon-camada { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--linha); background: var(--superficie); }
.mon-camada > div { flex: 1; display: flex; flex-direction: column; min-width: 0; } .mon-camada small { color: var(--suave); font-size: 0.78rem; }
.mon-ms { font-size: 0.8rem; font-weight: 700; color: var(--suave); text-align: right; font-variant-numeric: tabular-nums; max-width: 7.5rem; }
.mon-camada.ok .mon-luz { background: #22B36B; box-shadow: 0 0 0 4px rgba(34,179,107,.2); }
.mon-camada.lento .mon-luz { background: #F5B400; box-shadow: 0 0 0 4px rgba(245,180,0,.25); }
.mon-camada.erro { border-color: #D2453B; } .mon-camada.erro .mon-luz { background: #E5372B; box-shadow: 0 0 0 4px rgba(229,55,43,.25); } .mon-camada.erro .mon-ms { color: #D2453B; }
.mon-linha-topo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .mon-linha-topo h2 { margin: 0; } .mon-linha-topo small { color: var(--suave); }
.mon-barras { display: flex; gap: 3px; height: 38px; align-items: stretch; margin: 0.8rem 0 0.5rem; }
.mon-barras i { flex: 1; max-width: 16px; border-radius: 3px; background: #22B36B; } .mon-barras i.lento { background: #F5B400; } .mon-barras i.erro { background: #E5372B; }
.mon-legenda { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--suave); } .mon-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.3rem; background: #22B36B; } .mon-legenda i.lento { background: #F5B400; } .mon-legenda i.erro { background: #E5372B; }
.mon-controles { display: flex; flex-wrap: wrap; gap: 0.8rem 1.2rem; align-items: center; }
.mon-controles > label { flex-direction: row !important; align-items: center; gap: 0.5rem; margin: 0; }
.mon-tabela td small { display: block; color: var(--suave); }
.mon-tag { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; background: #FDE3E0; color: #9B2A22; } .mon-tag.lento { background: #FFF2C2; color: #7A5600; }
[data-theme="dark"] .mon-tag { background: #4A1F1C; color: #FFC9C3; } [data-theme="dark"] .mon-tag.lento { background: #4A3A0A; color: #FFE08A; }
.mon-acoes { margin-top: 0.8rem; align-items: center; }
@media (max-width: 600px) { .mon-topo { flex-wrap: wrap; } .mon-proximo { text-align: left; } }
.mon-camadas { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.mon-camada { flex-wrap: wrap; align-items: flex-start; }
.mon-camada .mon-luz { margin-top: 3px; }
.mon-ms { flex-basis: 100%; max-width: none; text-align: left; padding-left: calc(18px + 0.7rem); font-size: 0.85rem; }
/* 1.65: liga/desliga do monitor */
.mon-liga { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.2rem; border-radius: 16px; background: var(--superficie); border: 1px solid var(--linha); }
.mon-liga > div { display: flex; flex-direction: column; gap: 0.15rem; } .mon-liga b { font-size: 1.15rem; } .mon-liga small { color: var(--suave); }
.mon-switch { position: relative; flex: 0 0 auto; width: 74px; height: 40px; border-radius: 999px; border: 0; padding: 0; cursor: pointer; background: #B9B3C6; transition: background .2s; }
.mon-switch span { position: absolute; top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.mon-switch[aria-checked="true"] { background: #22B36B; } .mon-switch[aria-checked="true"] span { transform: translateX(34px); }
.mon-switch:focus-visible { outline: 3px solid #F39A1C; outline-offset: 2px; }
.mon-topo.mon-desligado { border-color: var(--linha); background: var(--superficie-2, var(--superficie)); }
.mon-topo.mon-desligado .mon-luz { background: #A8A2B5; box-shadow: 0 0 0 8px rgba(168,162,181,.18); }
.mon.mon-off .mon-camadas, .mon.mon-off .mon-linha { opacity: .55; }
/* 1.66: botão e barras do monitor menores e mais delicados */
.mon-liga { gap: 0.75rem; padding: 0.6rem 0.9rem; border-radius: 12px; }
.mon-liga b { font-size: 0.95rem; } .mon-liga small { font-size: 0.8rem; }
.mon-switch { width: 40px; height: 22px; background: #CFCAD9; }
.mon-switch span { top: 3px; left: 3px; width: 16px; height: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mon-switch[aria-checked="true"] { background: #2EB673; } .mon-switch[aria-checked="true"] span { transform: translateX(18px); }
.mon-barras { height: 16px; gap: 2px; margin: 0.6rem 0 0.4rem; align-items: center; }
.mon-barras i { max-width: 7px; height: 100%; border-radius: 2px; opacity: .85; }
.mon-barras i:hover { opacity: 1; transform: scaleY(1.25); }
.mon-legenda { font-size: 0.75rem; } .mon-legenda i { width: 8px; height: 8px; border-radius: 2px; }

/* 1.68 — Monitor: cor de cada conexão (filete no cartão) e gráfico de curvas */
.mon-camada { position: relative; overflow: hidden; }
.mon-camada::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 3px; border-radius: 0 0 3px 3px; background: var(--mon-cor, transparent); opacity: .75; }
.mon-graf-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; margin-top: 1.1rem; }
.mon-graf-topo h3 { margin: 0; font-size: 0.95rem; }
.mon-graf-leg { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.mon-graf-leg button { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: none; padding: 0.1rem 0; font: inherit; font-size: 0.78rem; color: var(--suave); cursor: pointer; }
.mon-graf-leg button i { width: 14px; height: 3px; border-radius: 2px; background: var(--mon-cor); }
.mon-graf-leg button[aria-pressed="false"] { opacity: .4; text-decoration: line-through; }
.mon-graf { position: relative; margin-top: 0.4rem; min-height: 150px; }
.mon-graf svg { display: block; overflow: visible; }
.mon-graf.vazio::after { content: 'O gráfico aparece depois dos primeiros testes.'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85rem; color: var(--suave); border: 1px dashed var(--linha); border-radius: 12px; }
.mon-graf .grade { stroke: var(--linha); stroke-width: 1; }
.mon-graf .rot { font-size: 10px; fill: var(--suave); font-variant-numeric: tabular-nums; }
.mon-graf .falhou { fill: #E5372B; opacity: .12; }
.mon-graf .cursor { stroke: var(--suave); stroke-width: 1; stroke-dasharray: 3 3; }
.mon-graf-dica { position: absolute; top: 4px; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 0.15rem; min-width: 190px; padding: 0.5rem 0.65rem; border-radius: 10px; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 6px 20px rgba(30,20,51,.14); font-size: 0.78rem; }
.mon-graf-dica[hidden] { display: none; }
.mon-graf-dica span { display: flex; align-items: center; gap: 0.4rem; } .mon-graf-dica i { width: 10px; height: 3px; border-radius: 2px; } .mon-graf-dica em { margin-left: auto; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 1.69 — Monitor: Force teste */
.mon-forca-bt { margin-left: auto; }
.mon-forca[hidden] { display: none; }
.mon-forca-sobre { margin: 0.4rem 0 0.9rem; font-size: 0.85rem; color: var(--suave); }
.mon-forca-rodando { margin: 0; padding: 0.9rem 1rem; border-radius: 12px; background: var(--superficie-2, var(--superficie)); border: 1px dashed var(--linha); color: var(--suave); }
.mon-forca-vered { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid var(--linha); margin-bottom: 0.7rem; }
.mon-forca-vered b { font-size: 1.02rem; } .mon-forca-vered em { font-style: normal; color: var(--suave); font-size: 0.85rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.mon-forca-vered .mon-luz { width: 14px; height: 14px; }
.mon-forca-vered.bom { border-color: #2E9E6A; background: color-mix(in srgb, #2E9E6A 8%, var(--superficie)); } .mon-forca-vered.bom .mon-luz { background: #22B36B; box-shadow: 0 0 0 4px rgba(34,179,107,.2); }
.mon-forca-vered.ok { border-color: #E8A10C; background: color-mix(in srgb, #F5C400 10%, var(--superficie)); } .mon-forca-vered.ok .mon-luz { background: #F5B400; box-shadow: 0 0 0 4px rgba(245,180,0,.25); }
.mon-forca-vered.pesado, .mon-forca-vered.erro { border-color: #D2453B; background: color-mix(in srgb, #D2453B 9%, var(--superficie)); } .mon-forca-vered.pesado .mon-luz, .mon-forca-vered.erro .mon-luz { background: #E5372B; box-shadow: 0 0 0 4px rgba(229,55,43,.22); }
.mon-forca-et { display: grid; grid-template-columns: 11rem 1fr 4.5rem 5.5rem; align-items: center; gap: 0.15rem 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--linha); font-size: 0.88rem; }
.mon-forca-et .nome { font-weight: 700; }
.mon-forca-et .barra { height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; } .mon-forca-et .barra i { display: block; height: 100%; border-radius: 99px; background: #F08A24; }
.mon-forca-et .tempo { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.mon-forca-et .nota { justify-self: start; padding: 0.05rem 0.5rem; border-radius: 99px; font-size: 0.74rem; font-weight: 700; background: #DDF3E7; color: #1D6B45; }
.mon-forca-et.ok .nota { background: #FFF2C2; color: #7A5600; } .mon-forca-et.pesado .nota, .mon-forca-et.erro .nota { background: #FDE3E0; color: #9B2A22; } .mon-forca-et.pulou .nota { background: var(--linha); color: var(--suave); }
.mon-forca-et.erro .barra i { background: #E5372B; }
.mon-forca-et small { grid-column: 1 / -1; color: var(--suave); font-size: 0.78rem; }
[data-theme="dark"] .mon-forca-et .nota { background: #173D2A; color: #9BE3BD; } [data-theme="dark"] .mon-forca-et.ok .nota { background: #4A3A0A; color: #FFE08A; } [data-theme="dark"] .mon-forca-et.pesado .nota, [data-theme="dark"] .mon-forca-et.erro .nota { background: #4A1F1C; color: #FFC9C3; }
.mon-forca-ant { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; } .mon-forca-ant small { color: var(--suave); }
.mon-forca-chip { padding: 0.1rem 0.55rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; background: #DDF3E7; color: #1D6B45; } .mon-forca-chip.ok { background: #FFF2C2; color: #7A5600; } .mon-forca-chip.pesado, .mon-forca-chip.erro { background: #FDE3E0; color: #9B2A22; }
@media (max-width: 600px) { .mon-forca-et { grid-template-columns: 1fr auto auto; } .mon-forca-et .barra { grid-column: 1 / -1; grid-row: 2; } .mon-forca-bt { margin-left: 0; } }
.mon-forca-vered b { flex: 1; min-width: 12rem; }
/* 1.69 — gráfico: botões Linha / Coluna */
.mon-graf-topo h3 { margin-right: auto; }
.mon-graf-tipo { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--superficie-2, var(--superficie)); border: 1px solid var(--linha); }
.mon-graf-tipo button { border: 0; background: none; font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--suave); padding: 0.18rem 0.75rem; border-radius: 999px; cursor: pointer; }
.mon-graf-tipo button[aria-pressed="true"] { background: var(--superficie); color: var(--texto, inherit); box-shadow: 0 1px 3px rgba(30,20,51,.15); }
.mon-graf-leg { flex-basis: 100%; }
.mon-graf-dica .tot { border-top: 1px solid var(--linha); margin-top: 0.15rem; padding-top: 0.2rem; font-weight: 700; }
.mon-linha-cima { margin: 0; } .mon-linha-cima .mon-barras { margin-top: 0.6rem; }

/* 1.72 — WhatsApp: endereço do robô (subdomínio) */
.robo-endereco { margin-top: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2, var(--superficie)); }
.robo-endereco h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.robo-endereco-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.8rem; margin: 0.6rem 0 0.4rem; }
.robo-endereco-campos label { flex: 1 1 260px; margin: 0; } .robo-endereco-campos label:nth-child(2) { flex: 0 1 140px; }
.robo-endereco-teste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.6rem; padding: 0.6rem 1rem; border-radius: 12px; border: 1px dashed var(--linha); }
.robo-endereco-teste a { word-break: break-all; }
/* 1.73 — campos da aplicação Node.js no passo a passo do robô */
.robo-campos { margin: 0.35rem 0 0.35rem 1.1rem; padding: 0; list-style: disc; font-size: 0.9rem; }
.robo-campos li { margin: 0.15rem 0; }

/* 1.75 — WhatsApp: identificar número, abas e busca */
.wa-num-linha { display: flex; gap: 0.4rem; } .wa-num-linha input { flex: 1; min-width: 0; }
.wa-dica { color: var(--perigo); font-weight: 600; min-height: 1em; }
.wa-abas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.75rem; }
.wa-aba { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.55rem 0.95rem; border-radius: 12px; border: 2px solid var(--linha-forte); background: var(--superficie); color: var(--texto); text-decoration: none; }
.wa-aba .n { font-weight: 800; font-variant-numeric: tabular-nums; padding: 0 0.45rem; border-radius: 999px; background: var(--superficie-2); }
.wa-aba small { color: var(--suave); font-size: 0.75rem; }
.wa-aba:hover { border-color: var(--azul); }
.wa-aba.ativa { border-color: var(--preto, #111); box-shadow: 3px 3px 0 var(--preto, #111); }
.wa-aba.tem .n { background: var(--perigo); color: #fff; }
.wa-busca { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.wa-busca input[type=search] { flex: 1 1 16rem; max-width: 28rem; }

/* 1.75 — Configuração do WhatsApp (suporte) */
.wc-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.wc-card { border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); padding: 1rem 1.15rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.wc-card > header { display: flex; gap: 0.75rem; align-items: flex-start; }
.wc-card > header h2 { margin: 0; font-size: 1.08rem; } .wc-card > header p { margin: 0.15rem 0 0; color: var(--suave); font-size: 0.85rem; }
.wc-ic { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: var(--superficie-2); }
.wc-form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; } .wc-form label { margin: 0; flex: 1 1 14rem; } .wc-form .wc-porta { flex: 0 1 7rem; }
.wc-teste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-radius: 12px; border: 1px dashed var(--linha-forte); }
.wc-teste a { word-break: break-all; font-weight: 700; } .wc-teste form { margin: 0; }
.wc-dados { margin: 0; display: grid; gap: 0.3rem; font-size: 0.86rem; }
.wc-dados div { display: flex; gap: 0.6rem; } .wc-dados dt { color: var(--suave); min-width: 9.5rem; } .wc-dados dd { margin: 0; font-weight: 600; }
.wc-passos { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; font-size: 0.9rem; }
.wc-cmds { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.wc-cmds li { display: grid; gap: 0.15rem; } .wc-cmds small { color: var(--suave); font-size: 0.78rem; }
.wc-cmd { display: flex; justify-content: space-between; gap: 0.6rem; align-items: center; width: 100%; padding: 0.45rem 0.65rem; border-radius: 10px; border: 1px solid var(--linha-forte); background: #1E1630; color: #E6E1EE; cursor: pointer; text-align: left; font: inherit; }
.wc-cmd code { background: none; color: inherit; font-size: 0.82rem; word-break: break-all; } .wc-cmd span { font-size: 0.72rem; color: #BFB2D9; white-space: nowrap; }
.wc-cmd:hover { border-color: var(--dourado); }
.wc-linha { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0; }
.wc-cuidado { border-color: color-mix(in srgb, var(--perigo) 40%, var(--linha)); }
.wc-cuidado form { margin: 0; }
/* 1.75 — Monitor: linha do WhatsApp */
.mon-wa { display: grid; gap: 0.5rem; }
.mon-wa[hidden] { display: none; }
.mon-wa-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; }
.mon-wa-cab b { font-size: 1rem; } .mon-wa-cab small { color: var(--suave); font-size: 0.8rem; } .mon-wa-cab a { margin-left: auto; font-size: 0.85rem; }
.mon-wa-cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.mon-wa-cards .mon-camada::before { background: #25A35A; }
.mon.mon-off .mon-wa { opacity: .55; }
/* 1.75 — ajustes finos */
.wa-con-meta span:empty { display: none; }
.wc-dados dd { min-width: 0; overflow-wrap: anywhere; } .wc-dados dd code { white-space: normal; overflow-wrap: anywhere; }
.wc-alerta { color: var(--perigo); }
.wc-form label small { display: inline; font-weight: 500; color: var(--suave); }

/* 1.75 — WhatsApp: painel de conexão com os botões no padrão do sistema */
.wa-con { --cor: #A8A2B5; }
.wa-con.est-conectado { --cor: #22B36B; } .wa-con.est-qr, .wa-con.est-iniciando { --cor: #F5B400; } .wa-con.est-desconectado, .wa-con.est-parado { --cor: #E5372B; }
.wa-con-status { display: flex; gap: 0.9rem; align-items: flex-start; }
.wa-con-luz { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 0.3rem; border-radius: 50%; background: var(--cor); box-shadow: 0 0 0 6px color-mix(in srgb, var(--cor) 22%, transparent); }
.wa-con.est-qr .wa-con-luz, .wa-con.est-parado .wa-con-luz, .wa-con.est-desconectado .wa-con-luz { animation: mon-pisca 1.4s infinite; }
.wa-con-txt { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wa-con-txt small { color: var(--suave); font-size: 0.78rem; font-weight: 700; }
.wa-con-txt b { font-size: 1.3rem; line-height: 1.2; }
.wa-con-txt > span { color: var(--suave); }
.wa-con-meta { font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.wa-con-meta [data-robo-numero] { font-weight: 700; color: var(--texto); }
.wa-con-acoes form { margin: 0; }
.wa-con-legenda { margin: 0; font-size: 0.8rem; }
.wa-ajuda { font-size: 0.88rem; }
.wa-ajuda summary { cursor: pointer; font-weight: 700; color: var(--azul); }
.wa-ajuda ul { margin: 0.5rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.wa-num { flex: 1 1 17rem !important; }
.wa-num-linha .botao { padding-inline: 0.8rem; white-space: nowrap; }
/* 1.77 — Identificar número: todas as caixas na mesma linha e na mesma altura */
.wa-identificar .wa-campos { display: grid; grid-template-columns: minmax(17rem, 1.25fr) minmax(11rem, 1fr) minmax(14rem, 1.6fr) auto; gap: 0.75rem; align-items: start; }
.wa-identificar .wa-campos > label { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; position: relative; min-width: 0; }
.wa-identificar .wa-rot { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.wa-identificar .wa-rot small { display: inline; font-weight: 500; color: var(--suave); }
.wa-identificar input { height: 3rem; box-sizing: border-box; margin: 0; }
.wa-identificar .wa-num-linha { display: flex; gap: 0.4rem; align-items: stretch; }
.wa-identificar .wa-num-linha .botao { height: 3rem; box-sizing: border-box; display: inline-flex; align-items: center; margin: 0; }
.wa-identificar .wa-dica { position: absolute; left: 0; top: 100%; margin-top: 0.2rem; font-size: 0.78rem; white-space: nowrap; }
.wa-identificar .wa-enviar { display: flex; flex-direction: column; gap: 0.35rem; }
.wa-identificar .wa-enviar::before { content: '\00a0'; line-height: 1.3; }
.wa-identificar .wa-enviar .botao { height: 3rem; box-sizing: border-box; margin: 0; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1100px) { .wa-identificar .wa-campos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .wa-identificar .wa-campos { grid-template-columns: 1fr; } .wa-identificar .wa-enviar::before { display: none; } .wa-identificar .wa-dica { position: static; } }
.wa-identificar .wa-enviar .botao, .wa-identificar .wa-num-linha .botao { transform: none !important; margin-top: 0 !important; top: auto; vertical-align: top; }
.wa-identificar .wa-enviar { justify-content: flex-start; }
@media (max-width: 1100px) { .wa-identificar .wa-campos { row-gap: 1.6rem; } }
@media (max-width: 640px) { .wa-identificar .wa-campos { row-gap: 0.75rem; } .wa-identificar .wa-dica { white-space: normal; } }
.wa-identificar .wa-rot, .wa-identificar .wa-enviar::before { height: 1.25rem; line-height: 1.25rem; display: block; }
.wa-identificar .wa-campos { padding-bottom: 1.1rem; } @media (max-width: 640px) { .wa-identificar .wa-campos { padding-bottom: 0; } }
/* 1.78 — formulários em grade: caixas alinhadas pelo topo (a dica embaixo de um campo não sobe mais a caixa) */
.formulario.grade { align-items: start; }
.formulario.grade > .linha-botoes, .formulario.grade > .botao { align-self: end; }
.tres-colunas .dois { grid-column: span 2; }   /* 1.78: campo de título longo ocupa 2 colunas e não quebra a linha */
/* 1.78 — grades de campos: caixas sempre alinhadas (pela base do título) e na mesma altura */
.grade-campos { align-items: end; }
.tres-colunas, .duas-colunas { align-items: start; }
.grade-campos input:not([type=checkbox]):not([type=radio]):not([type=file]), .grade-campos select { height: 2.75rem; box-sizing: border-box; }
@media (max-width: 560px) { .tres-colunas, .duas-colunas { grid-template-columns: 1fr; } .tres-colunas .dois { grid-column: auto; } }
/* 1.79 — WhatsApp: como os contatos entram (automático) */
.wa-auto { border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); padding: 1rem 1.15rem; margin-bottom: 1rem; }
.wa-auto h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.wa-auto-regras { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.6rem; }
.wa-auto-regras li { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--superficie-2); }
.wa-auto-ic { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; background: var(--superficie); font-size: 1.2rem; }
.wa-auto-regras div { display: flex; flex-direction: column; gap: 0.1rem; } .wa-auto-regras div small { color: var(--suave); }
.wa-auto-regras strong { font-size: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; line-height: 1.1; } .wa-auto-regras strong small { font-size: 0.7rem; color: var(--suave); font-weight: 600; }
.wa-auto .nota { margin: 0; }
.wa-registro > summary { font-weight: 700; }
/* 1.79 — Controle de cobrança: boletos emitidos do aluno + aviso do WhatsApp com PDF */
.ccb-boletos { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ccb-boletos > li { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 0.75rem; align-items: center; padding: 0.75rem 0.9rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.ccb-bol-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .ccb-bol-info small { color: var(--suave); font-variant-numeric: tabular-nums; }
.ccb-boletos .linha-botoes { grid-column: 1 / -1; margin: 0; }
.ccb-cancelar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; padding-top: 0.5rem; border-top: 1px dashed var(--linha); }
.ccb-cancelar[hidden] { display: none; }
.ccb-cancelar label { flex: 1 1 16rem; margin: 0; }
.cob-aluno[data-cc-bol] { cursor: pointer; }
.wa-boleto-aviso { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 60; max-width: min(36rem, calc(100vw - 2rem)); padding: 0.8rem 1rem; border-radius: 12px; background: #1E1630; color: #fff; font-size: 0.92rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.wa-boleto-aviso[hidden] { display: none; }
.wa-boleto-aviso.ok { background: #14532D; }
.wa-boleto-aviso.erro { background: #7F1D1D; }
.wa-boleto-aviso a { color: #fff; text-decoration: underline; font-weight: 700; }
/* 1.80 — contadores do menu ao vivo */
.contador[hidden] { display: none; }
.contador-exp { background: var(--azul); color: #fff; margin-left: 0.25rem; }
.contador.pulou { animation: contador-pulo .6s ease 2; }
@keyframes contador-pulo { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }
.crm-chegou { position: sticky; top: 4.5rem; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; padding: 0.7rem 1rem; border-radius: 12px; background: var(--dourado-suave); border: 1px solid var(--dourado); color: var(--dourado-texto); font-weight: 700; }
.crm-chegou[hidden] { display: none; }
/* 1.81 — Pipeline: topo organizado, busca simples e temperatura em botões */
.crm-barra { align-items: center; margin-bottom: 0.75rem; }
.crm-barra .crm-resumo li { min-height: 3.1rem; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
.crm-acoes { margin: 0; justify-content: flex-end; }
.crm-acoes .botao { height: 2.6rem; box-sizing: border-box; }
.crm-busca { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 1rem; }
.crm-busca input[type=search] { flex: 1 1 18rem; max-width: 30rem; height: 2.6rem; box-sizing: border-box; margin: 0; }
.crm-temps { display: inline-flex; gap: 0.35rem; padding: 3px; border-radius: 12px; background: var(--realce, var(--superficie-2)); }
.crm-temp { display: inline-flex; align-items: center; gap: 0.35rem; height: calc(2.6rem - 6px); padding: 0 0.85rem; border: 0; border-radius: 9px; background: transparent; color: var(--suave); font: inherit; font-weight: 700; font-size: 0.875rem; cursor: pointer; }
.crm-temp span { font-size: 1.05rem; }
.crm-temp:hover { color: var(--texto); }
.crm-temp.ativo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 3px rgba(30,18,52,.15); }
.crm-temp:focus-visible { outline: 3px solid var(--dourado); outline-offset: 1px; }
.crm-limpar { font-size: 0.875rem; }
.crm-busca .alternar-visao { margin-left: auto; height: 2.6rem; box-sizing: border-box; align-items: center; }
.crm-lista-filtros { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: -0.4rem 0 1rem; }
.crm-lista-filtros select { height: 2.6rem; box-sizing: border-box; width: auto; }
.kb-cartao[hidden] { display: none; }
@media (max-width: 700px) { .crm-busca input[type=search] { max-width: none; flex-basis: 100%; } .crm-temps { flex-wrap: wrap; } .crm-busca .alternar-visao { margin-left: 0; } .crm-acoes { justify-content: flex-start; } }
.crm-barra .crm-acoes { margin-left: auto; }
@media (max-width: 700px) {
  .crm-busca .crm-temps { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; box-sizing: border-box; }
  .crm-temp { justify-content: center; padding: 0 0.3rem; font-size: 0.8rem; gap: 0.2rem; }
  .crm-barra .crm-acoes { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .crm-barra .crm-acoes .botao { width: 100%; }
}
@media (max-width: 700px) {
  .crm-barra .crm-acoes { grid-auto-flow: dense; }
  .crm-barra .crm-acoes [data-abrir-matriculados] { grid-column: span 2; }
  .crm-barra .crm-acoes .botao { white-space: nowrap; }
}
/* 1.82 — Pipeline: cartão inteiro na cor da temperatura */
.kb-cartao.temp-quente { background: #FFF1E6; border-color: #F7C4A0; border-left-color: #E8590C; }
.kb-cartao.temp-morna  { background: #FFF9E6; border-color: #F3DFA2; border-left-color: #E8A10C; }
.kb-cartao.temp-fria   { background: #EAF3FC; border-color: #B9D5EF; border-left-color: #4A90D0; }
[data-theme="dark"] .kb-cartao.temp-quente { background: #3A2418; border-color: #6B3A1E; border-left-color: #F0782E; }
[data-theme="dark"] .kb-cartao.temp-morna  { background: #352D16; border-color: #5E4C1E; border-left-color: #E8A10C; }
[data-theme="dark"] .kb-cartao.temp-fria   { background: #172A3D; border-color: #284B6B; border-left-color: #5BA3E0; }
.temp-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.temp-legenda li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.75rem; align-items: baseline; padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--linha); border-left-width: 4px; }
.temp-legenda li span { color: var(--suave); font-size: 0.875rem; }
.temp-legenda .temp-quente { background: #FFF1E6; border-left-color: #E8590C; } .temp-legenda .temp-morna { background: #FFF9E6; border-left-color: #E8A10C; } .temp-legenda .temp-fria { background: #EAF3FC; border-left-color: #4A90D0; }
[data-theme="dark"] .temp-legenda .temp-quente { background: #3A2418; } [data-theme="dark"] .temp-legenda .temp-morna { background: #352D16; } [data-theme="dark"] .temp-legenda .temp-fria { background: #172A3D; }
.crm-temp[data-temp=quente].ativo { background: #FFF1E6; } .crm-temp[data-temp=morna].ativo { background: #FFF9E6; } .crm-temp[data-temp=fria].ativo { background: #EAF3FC; }
[data-theme="dark"] .crm-temp[data-temp=quente].ativo { background: #3A2418; } [data-theme="dark"] .crm-temp[data-temp=morna].ativo { background: #352D16; } [data-theme="dark"] .crm-temp[data-temp=fria].ativo { background: #172A3D; }
.formulario.temp-config { max-width: 40rem; } .temp-config label.caixa span { flex: 1; }

/* ===== Kit do sistema novo (base Dragão) ===== */
.usu-cargo { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 0.5rem 1.25rem; align-items: end; }
.usu-cargo label { margin: 0; }
.usu-cargo select { width: 100%; }
.usu-cargo .nota { margin: 0; padding-bottom: 0.7rem; }
@media (max-width: 640px) { .usu-cargo { grid-template-columns: 1fr; } .usu-cargo .nota { padding-bottom: 0; } }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid var(--linha); }
.lista-simples li:last-child { border-bottom: 0; }
.lista-simples time { color: var(--suave); font-size: 0.85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.formulario.grade > label.caixa { display: flex; align-items: center; gap: 0.5rem; }
.formulario.grade > label.caixa > input { width: auto; flex: none; }

/* ===== 0.01: Franquias e etapas da implantação ===== */
.tabela td > small, .tabela td > a + small { display: block; color: var(--suave); font-size: 0.8125rem; }
.fq-progresso { display: flex; align-items: center; gap: 0.6rem; min-width: 9rem; }
.fq-trilho { flex: 1; height: 10px; border-radius: 999px; background: var(--realce); overflow: hidden; }
.fq-trilho i { display: block; height: 100%; border-radius: 999px; background: var(--azul); transition: width .3s; }
.fq-progresso.completo .fq-trilho i { background: var(--verde); }
.fq-progresso small { color: var(--suave); font-size: 0.8125rem; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: right; }
.fq-tabela td:nth-child(3) { width: 14rem; }

.fq-ficha { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.25rem 1.4rem; box-shadow: var(--sombra); margin-bottom: 1.5rem; }
.fq-ficha-topo { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fq-ficha-topo .nota { margin: 0; }
.fq-dados { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.9rem 1.5rem; margin: 0; }
.fq-dados div { min-width: 0; }
.fq-dados dt { font-size: 0.75rem; font-weight: 600; color: var(--suave); text-transform: uppercase; letter-spacing: .03em; }
.fq-dados dd { margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.fq-obs { margin: 1rem 0 0; padding: 0.75rem 0.9rem; border-radius: var(--raio); background: var(--superficie-2); border-left: 4px solid var(--dourado); }
.fq-excluir { padding: 0 1.1rem 1.1rem; }
.fq-linha-endereco { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: 1rem 1.25rem; align-items: end; }
.fq-linha-endereco label { margin: 0; min-width: 0; }
.fq-linha-endereco input { width: 100%; }
@media (max-width: 640px) { .fq-linha-endereco { grid-template-columns: 1fr; } }

.fq-etapas-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.fq-etapas-topo h2 { margin: 0; }
.fq-etapas-topo .fq-progresso { width: min(22rem, 100%); }
.fq-etapas { list-style: none; margin: 0; padding: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: hidden; }
.fq-etapas li { position: relative; display: grid; grid-template-columns: 2.25rem 1fr auto; gap: 0.9rem; align-items: center; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--linha); }
.fq-etapas li:last-child { border-bottom: 0; }
/* linha vertical ligando as bolinhas */
.fq-etapas li::before { content: ""; position: absolute; left: calc(1.1rem + 1.125rem - 1px); top: 0; bottom: 0; width: 2px; background: var(--linha); z-index: 0; }
.fq-etapas li:first-child::before { top: 50%; }
.fq-etapas li:last-child::before { bottom: 50%; }
.fq-etapas li.feita::before { background: var(--verde); }
.fq-marca { position: relative; z-index: 1; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 0.875rem;
  background: var(--superficie); border: 2px solid var(--linha-forte); color: var(--suave); font-variant-numeric: tabular-nums; }
.fq-marca svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fq-etapas li.feita .fq-marca { background: var(--verde); border-color: var(--verde); color: #fff; }
.fq-etapas li.atual { background: var(--azul-suave); }
.fq-etapas li.atual .fq-marca { border-color: var(--azul); color: var(--azul); background: var(--superficie); box-shadow: 0 0 0 4px color-mix(in srgb, var(--azul) 18%, transparent); }
.fq-etapa-txt { min-width: 0; }
.fq-etapa-txt b { display: block; }
.fq-etapa-txt small { display: block; color: var(--suave); font-size: 0.8125rem; }
.fq-etapas li.pendente .fq-etapa-txt b { color: var(--suave); font-weight: 600; }
.fq-etapa-txt .fq-feito { color: var(--verde); font-weight: 600; }
.fq-etapa-txt .fq-etapa-obs { color: var(--texto); }
.fq-etapa-acao { display: flex; justify-content: flex-end; }
.fq-etapa-acao form { margin: 0; }
.fq-etapa-acao .botao { min-width: 6.5rem; }

.fq-painel-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow: hidden; }
.fq-painel-lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem); gap: 1rem; align-items: center; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--linha); }
.fq-painel-lista li:last-child { border-bottom: 0; }
.fq-painel-lista a { min-width: 0; color: var(--texto); }
.fq-painel-lista a b, .fq-painel-lista a small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fq-painel-lista a small { color: var(--suave); font-size: 0.8125rem; }

.fq-ordem { display: inline-flex; align-items: center; gap: 0.25rem; }
.fq-ordem span { min-width: 1.4rem; text-align: right; font-weight: 600; }
.fq-ordem form { margin: 0; display: inline; }
.fq-seta { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--linha); border-radius: 8px; background: var(--superficie); color: var(--texto); cursor: pointer; padding: 0; }
.fq-seta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fq-seta:hover:not(:disabled) { border-color: var(--azul); color: var(--azul); }
.fq-seta:disabled { opacity: .35; cursor: default; }

@media (max-width: 640px) {
  .fq-etapas li { grid-template-columns: 2.25rem 1fr; padding: 0.8rem 0.9rem; }
  .fq-etapas li::before { left: calc(0.9rem + 1.125rem - 1px); }
  .fq-etapa-acao { grid-column: 2; justify-content: flex-start; }
  .fq-painel-lista li { grid-template-columns: 1fr; gap: 0.4rem; }
  .fq-ficha { padding: 1rem; }
}
/* campos da mesma linha sempre com a mesma altura (texto, data e lista) */
.formulario.grade > label > :is(input:not([type=checkbox]):not([type=radio]), select),
.fq-linha-endereco input, .dialogo .formulario > label > :is(input:not([type=checkbox]), select) { height: 44px; box-sizing: border-box; }

/* ===== 0.02: Estoque geral e checklist de materiais ===== */
.fq-materiais { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 16rem) auto; gap: 1rem 1.5rem; align-items: center;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.fq-materiais h2 { margin: 0; font-size: 1.05rem; }
.fq-materiais .nota { margin: 0.15rem 0 0; }
.fq-materiais .botao { white-space: nowrap; }

.es-tabela .es-grupo td { background: var(--superficie-2); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--azul); padding-top: 0.5rem; padding-bottom: 0.5rem; }
.es-tabela tbody tr.es-grupo:hover td { background: var(--superficie-2); }
.es-qtd { display: inline-block; min-width: 2.4rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0.1rem 0.45rem; border-radius: 999px; }
.es-qtd.baixo { background: var(--dourado-suave); color: var(--dourado-texto); }
.es-qtd.falta { background: var(--perigo-suave); color: var(--perigo); }
.es-tabela td.num small { display: block; }
.es-falta-txt { color: var(--perigo) !important; font-weight: 600; }
.es-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.es-dupla label { margin: 0; min-width: 0; }
.es-dupla input { width: 100%; }
.es-mov { font-weight: 700; font-variant-numeric: tabular-nums; }
.es-mov.entrada { color: var(--verde); }
.es-mov.saida { color: var(--perigo); }
.dialogo .formulario > .es-dupla > label > input { height: 44px; box-sizing: border-box; }

.ck-impressao { display: none; }
.ck-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1rem 1.25rem; margin-bottom: 1rem; }
.ck-topo-txt { flex: 1 1 22rem; min-width: 0; }
.ck-topo-txt .descricao { margin: 0 0 0.6rem; }
.ck-progresso-geral { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ck-progresso-geral .fq-progresso { width: min(20rem, 100%); }
.ck-progresso-geral .fq-progresso small { display: none; }
.ck-topo-botoes { flex-wrap: nowrap; }
.ck-topo-botoes form { margin: 0; }

.ck-filtro { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border-radius: 999px; background: var(--realce); margin-bottom: 1rem; }
.ck-filtro button { border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--suave); padding: 0.4rem 0.95rem; border-radius: 999px; cursor: pointer; }
.ck-filtro button.ativo { background: var(--superficie); color: var(--azul); box-shadow: var(--sombra); }

.ck-grupo { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); margin-bottom: 1rem; overflow: hidden; }
.ck-grupo > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1.1rem; background: var(--superficie-2); border-bottom: 1px solid var(--linha); }
.ck-grupo > header h2 { margin: 0; font-size: 1rem; }
.ck-grupo > header h2 small { font-weight: 600; color: var(--suave); font-size: 0.8125rem; margin-left: 0.35rem; }
.ck-grupo.completo > header h2 small { color: var(--verde); }
.ck-grupo > header form { margin: 0; }
.ck-grupo > header .botao { min-width: 7.5rem; }
.ck-linha { display: grid; grid-template-columns: minmax(0, 1fr) 9.5rem 13rem; gap: 1rem; align-items: center; padding: 0.6rem 1.1rem; border-bottom: 1px solid var(--linha); transition: opacity .15s; }
.ck-linha:last-child { border-bottom: 0; }
.ck-linha.carregando { opacity: .45; pointer-events: none; }
.ck-linha.enviado { background: color-mix(in srgb, var(--verde) 7%, var(--superficie)); }
.ck-linha.zero .ck-nome b { color: var(--suave); font-weight: 600; }
.ck-nome { min-width: 0; }
.ck-nome b { display: block; }
.ck-nome small { display: block; color: var(--suave); font-size: 0.8125rem; }
.ck-nome .ck-falta { color: var(--perigo); font-weight: 600; }
.ck-qtd { display: flex; justify-content: center; }
.ck-form-qtd { display: inline-flex; align-items: stretch; margin: 0; border: 1px solid var(--linha-forte); border-radius: 10px; overflow: hidden; background: var(--superficie); height: 36px; }
.ck-form-qtd input { width: 3.4rem; height: 100%; border: 0; border-radius: 0; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; padding: 0; background: transparent; color: var(--texto); -moz-appearance: textfield; appearance: textfield; }
.ck-form-qtd input::-webkit-inner-spin-button, .ck-form-qtd input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ck-form-qtd input:focus { outline: none; background: var(--azul-suave); }
.ck-passo { width: 34px; border: 0; background: var(--superficie-2); color: var(--azul); font-size: 1.15rem; font-weight: 700; cursor: pointer; padding: 0; line-height: 1; }
.ck-passo:hover { background: var(--azul-suave); }
.ck-qtd-fixa { font-weight: 700; font-variant-numeric: tabular-nums; }
.ck-qtd-fixa small { color: var(--suave); font-weight: 500; }
.ck-acao { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; }
.ck-acao form { margin: 0; }
.ck-acao .botao { min-width: 6.5rem; }
.ck-ok { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--verde); font-weight: 600; font-size: 0.8125rem; white-space: nowrap; }
.ck-ok svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ck-aviso { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 50; max-width: min(36rem, calc(100vw - 2rem)); box-shadow: var(--sombra-alta); margin: 0; }

@media (max-width: 760px) {
  .fq-materiais { grid-template-columns: 1fr; }
  .fq-materiais .botao { justify-self: start; }
  .ck-linha { grid-template-columns: minmax(0, 1fr) auto; padding: 0.7rem 0.9rem; gap: 0.5rem 0.75rem; }
  .ck-qtd { justify-content: flex-end; }
  .ck-acao { grid-column: 1 / -1; justify-content: space-between; }
  .ck-acao .botao { flex: 1; }
  .ck-grupo > header { padding: 0.7rem 0.9rem; }
  .ck-topo-botoes { width: 100%; }
  .ck-topo-botoes > * { flex: 1; }
  .ck-topo-botoes .botao { width: 100%; }
  .es-dupla { grid-template-columns: 1fr; }
}

@media print {
  .ck-impressao { display: block; margin-bottom: 0.75rem; }
  .ck-impressao h2 { margin: 0 0 0.25rem; text-align: center; }
  .ck-topo, .ck-filtro, .ck-acao form, .ck-grupo > header form, .ck-passo, .ck-aviso, .conteudo > h1 { display: none !important; }
  .ck-grupo, .ck-linha[hidden], .ck-grupo[hidden] { display: block; }
  .ck-linha[hidden] { display: grid !important; }
  .ck-grupo[hidden] { display: block !important; }
  .ck-grupo { break-inside: avoid; border-radius: 0; box-shadow: none; }
  .ck-linha { grid-template-columns: 1fr 6rem 10rem; padding: 0.25rem 0.6rem; background: none !important; }
  .ck-form-qtd { border: 0; height: auto; }
  .ck-form-qtd input { width: auto; }
  .ck-linha.zero { display: none !important; }
}
.es-topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.es-topo .descricao { margin: 0; flex: 1 1 24rem; }
.es-topo .botao { white-space: nowrap; }
.ck-grupo > header h2 small { display: inline; }
@media (max-width: 760px) {
  .ck-linha:not(.enviado) .ck-acao form { flex: 1; }
  .ck-linha:not(.enviado) .ck-acao .botao { width: 100%; }
  .ck-topo-botoes { flex-wrap: nowrap; }
}

/* ===== 0.03: Etapas em quadrados e checklist em cartões ===== */
.dialogo .formulario > .es-dupla > label > select { height: 44px; box-sizing: border-box; width: 100%; }
.et-bloco { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.25rem 1.4rem 1rem; box-shadow: var(--sombra); }
.et-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.et-cabeca h2 { margin: 0; }
.et-contagem { color: var(--suave); font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.et-contagem b { color: var(--texto); }
.et-barra { height: 12px; border-radius: 999px; background: var(--realce); overflow: hidden; margin-bottom: 1.25rem; }
.et-barra i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--azul), color-mix(in srgb, var(--azul) 45%, var(--dourado))); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.et-barra.completo i { background: var(--verde); }
.et-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.85rem; }
.et-form { margin: 0; min-width: 0; }
.et-card { width: 100%; aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; gap: 0.4rem; text-align: left; font: inherit; color: var(--texto); cursor: pointer;
  padding: 0.8rem 0.85rem 0.75rem; border-radius: 16px; border: 1.5px solid var(--linha); background: var(--superficie-2);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .2s ease; position: relative; overflow: hidden; }
.et-card:hover { transform: translateY(-2px); box-shadow: var(--sombra); border-color: var(--linha-forte); }
.et-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 40%, transparent); outline-offset: 2px; }
.et-card.carregando { opacity: .5; pointer-events: none; }
.et-topo { display: flex; align-items: center; justify-content: space-between; }
.et-num { font-size: 0.8125rem; font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.et-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linha-forte); display: grid; place-items: center; background: var(--superficie); transition: all .2s; }
.et-check svg { width: 15px; height: 15px; fill: none; stroke: transparent; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.et-nome { font-weight: 700; font-size: 0.9375rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.et-rodape { display: flex; flex-direction: column; gap: 0.05rem; min-height: 2.35rem; justify-content: flex-end; }
.et-rodape small { font-size: 0.75rem; color: var(--suave); }
.et-data { font-weight: 700; font-size: 0.875rem; color: var(--verde); font-variant-numeric: tabular-nums; }
.et-card.atual { border-color: var(--azul); background: var(--azul-suave); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 14%, transparent); }
.et-card.atual .et-check { border-color: var(--azul); }
.et-card.atual .et-rodape small { color: var(--azul); font-weight: 600; }
.et-card.pendente .et-nome { color: var(--suave); }
.et-card.feita { border-color: color-mix(in srgb, var(--verde) 55%, var(--linha)); background: linear-gradient(160deg, var(--verde-suave), var(--superficie) 85%); }
.et-card.feita .et-check { background: var(--verde); border-color: var(--verde); }
.et-card.feita .et-check svg { stroke: #fff; }
.et-card.feita .et-num { color: var(--verde); }
.et-dica { margin: 0.9rem 0 0; }

.ck-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: 0.85rem; padding: 1rem 1.1rem 1.1rem; }
.ck-card { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.85rem; border-radius: 14px; border: 1.5px solid var(--linha); background: var(--superficie); transition: border-color .15s, box-shadow .15s, opacity .15s; min-width: 0; }
.ck-card:hover { box-shadow: var(--sombra); }
.ck-card.carregando { opacity: .5; pointer-events: none; }
.ck-card.zero { background: var(--superficie-2); }
.ck-card.zero .ck-ic { filter: grayscale(1); opacity: .55; }
.ck-card.falta { border-color: color-mix(in srgb, var(--perigo) 45%, var(--linha)); }
.ck-card.enviado { border-color: color-mix(in srgb, var(--verde) 55%, var(--linha)); background: linear-gradient(160deg, var(--verde-suave), var(--superficie) 80%); }
.ck-card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.ck-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.ck-ic .icone-item { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ck-ic.pequeno { width: 36px; height: 36px; border-radius: 10px; }
.ck-ic.pequeno .icone-item { width: 22px; height: 22px; }
.ck-ic.cor-1 { background: var(--azul-suave); color: var(--azul-forte); }
.ck-ic.cor-2 { background: var(--roxo-suave); color: var(--roxo); }
.ck-ic.cor-3 { background: var(--dourado-suave); color: var(--dourado-texto); }
.ck-ic.cor-4 { background: var(--verde-suave); color: var(--verde); }
.ck-selo { font-size: 0.6875rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--realce); color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.2rem; }
.ck-selo.falta { background: var(--perigo-suave); color: var(--perigo); }
.ck-selo.ok { background: var(--verde); color: #fff; }
.ck-selo svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ck-card-nome { font-size: 0.9375rem; line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ck-card-qtd { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 40px; }
.ck-card .ck-form-qtd { height: 40px; border-radius: 12px; }
.ck-card .ck-form-qtd input { width: 3.2rem; font-size: 1.05rem; }
.ck-card .ck-passo { width: 38px; display: grid; place-items: center; }
.ck-card .ck-passo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ck-un { font-size: 0.8125rem; color: var(--suave); }
.ck-card .ck-qtd-fixa { font-size: 1.15rem; }
.ck-quando { font-size: 0.75rem; color: var(--verde); font-weight: 600; text-align: right; }
.ck-card-acao form { margin: 0; }
.ck-card-acao .botao { width: 100%; }
.ck-grupo > header { flex-wrap: wrap; }
.ck-grupo > header h2 { margin-right: auto; }
.ck-unid { font-size: 0.8125rem; color: var(--suave); font-weight: 600; font-variant-numeric: tabular-nums; }
.es-item { display: flex; align-items: center; gap: 0.7rem; }
.es-item > span:last-child { min-width: 0; }
.es-item small { display: block; color: var(--suave); font-size: 0.8125rem; }

@media (max-width: 1280px) { .et-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .et-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .et-bloco { padding: 1rem; }
  .ck-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; padding: 0.75rem; }
  .ck-card { padding: 0.7rem; }
  .ck-ic { width: 44px; height: 44px; }
  .ck-ic .icone-item { width: 27px; height: 27px; }
  .ck-card .ck-passo { width: 32px; }
  .ck-card .ck-form-qtd input { width: 2.6rem; }
  .ck-un { display: none; }
}
@media print {
  .et-dica { display: none; }
  .ck-cards { grid-template-columns: repeat(4, 1fr); }
  .ck-card-acao, .ck-card .ck-passo { display: none !important; }
  .ck-card.zero { display: none !important; }
}

/* 0.03: marca d'água do dragão (desenho preto e branco) no canto da área de conteúdo */
.conteudo {
  background-image: none, var(--manga-linhas), var(--manga-reticula);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-attachment: fixed, scroll, scroll;
  background-position: right 2.5rem bottom 1.5rem, right top, left bottom;
  background-size: min(560px, 42vw) auto, min(640px, 70%) auto, min(420px, 60%) auto;
}
@media (max-width: 760px) { .conteudo { background-size: 78vw auto, min(640px, 70%) auto, min(420px, 60%) auto; background-position: right 0.5rem bottom 0.5rem, right top, left bottom; } }
[data-theme="dark"] .conteudo { background-image: none, var(--manga-linhas), var(--manga-reticula); }
@media print { .conteudo { background-image: none !important; } }
.ck-card .ck-qtd-fixa { white-space: nowrap; }
/* 0.03: botões do cartão um pouco menores; selo do estoque já desconta a quantidade escolhida */
.ck-card .ck-form-qtd { height: 34px; border-radius: 10px; }
.ck-card .ck-passo { width: 32px; }
.ck-card .ck-passo svg { width: 16px; height: 16px; }
.ck-card .ck-form-qtd input { width: 2.6rem; font-size: 1rem; }
.ck-card-acao .botao { padding: 0.35rem 0.7rem; font-size: 0.8125rem; min-height: 32px; }
.ck-card-qtd { min-height: 34px; }
.ck-selo.reservado { background: var(--verde-suave); color: var(--verde); }
.ck-selo { transition: background-color .2s, color .2s; }
@media (max-width: 760px) {
  .ck-card .ck-passo { width: 30px; }
  .ck-card .ck-form-qtd input { width: 2.3rem; }
}
.ck-card-topo { min-width: 0; }
@media (max-width: 760px) {
  .ck-card-topo { flex-wrap: wrap; gap: 0.4rem; }
  .ck-ic { width: 40px; height: 40px; border-radius: 12px; }
  .ck-ic .icone-item { width: 25px; height: 25px; }
  .ck-selo { font-size: 0.625rem; padding: 0.15rem 0.45rem; }
}

/* ===== 0.04: checklist no topo da ficha, filtro por categoria e botão verde da categoria completa ===== */
.fq-materiais { border-left: 4px solid var(--dourado); }
.fq-materiais-bts { display: flex; gap: 0.5rem; }
.fq-materiais-bts .botao { white-space: nowrap; }
.ck-filtro-cat { display: flex; flex-wrap: wrap; border-radius: 14px; gap: 0.3rem; }
.ck-filtro-cat button { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 10px; }
.ck-filtro-cat button small { font-weight: 600; font-size: 0.75rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.ck-filtro-ok { display: none; width: 16px; height: 16px; border-radius: 50%; background: var(--verde); place-items: center; }
.ck-filtro-ok svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ck-filtro-cat button.completo { color: var(--verde); }
.ck-filtro-cat button.completo .ck-filtro-ok { display: inline-grid; }
.ck-filtro-cat button.completo small { color: var(--verde); }
.ck-filtro-cat button.ativo.completo { background: var(--verde-suave); color: var(--verde); }
.ck-grupo > header .botao.completo, .ck-grupo > header .botao.completo:disabled { background: var(--verde); border-color: var(--verde); color: #fff; opacity: 1; display: inline-flex; align-items: center; gap: 0.3rem; justify-content: center; }
.ck-grupo > header .botao.completo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ck-grupo.completo { border-color: color-mix(in srgb, var(--verde) 45%, var(--linha)); }
.ck-grupo.completo > header { background: var(--verde-suave); }
.ck-topo-botoes .botao .icone { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .fq-materiais-bts { width: 100%; }
  .fq-materiais-bts .botao:first-child { flex: 1; }
  .ck-filtro-cat { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .ck-filtro-cat button { white-space: nowrap; }
}
/* 0.04: emblema do Dragão no título das telas de franquia, no quadrado laranja do logo */
.h1-icone.h1-dragao { background: #F39A1C; box-shadow: inset 0 0 0 2px #1E1630; }
.h1-icone.h1-dragao img { width: 32px; height: 32px; display: block; }
.ck-card .ck-qtd-fixa small { display: inline; margin-left: 0.15rem; }

/* ===== 0.05: festa da inauguração (dragão voando + confetes) ===== */
.festa-inauguracao { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(243, 154, 28, .28), rgba(30, 22, 48, .72) 70%); animation: festa-entra .35s ease both; }
.festa-inauguracao.saindo { animation: festa-sai .35s ease both; }
.festa-confetes { position: absolute; inset: 0; pointer-events: none; }
.festa-confetes i { position: absolute; top: -24px; border-radius: 2px; opacity: 0; animation-name: confete-cai; animation-timing-function: linear; animation-iteration-count: infinite; }
.festa-centro { position: relative; text-align: center; color: #fff; padding: 1rem 1.5rem 1.5rem; max-width: min(92vw, 30rem); }
.festa-centro h2 { margin: 0.25rem 0 0.35rem; font-size: clamp(1.6rem, 4vw, 2.3rem); color: #fff; text-shadow: 0 3px 0 #1E1630, 0 0 24px rgba(243, 154, 28, .6); letter-spacing: .01em; }
.festa-centro p { margin: 0 0 1.1rem; font-size: 1.05rem; color: #F5F2FA; }
.festa-centro .botao { min-width: 9rem; background: #F39A1C; border-color: #F39A1C; color: #1E1630; font-weight: 700; }
.festa-dragao { width: clamp(180px, 34vw, 280px); margin: 0 auto; animation: dragao-voa 2.4s ease-in-out infinite, dragao-chega .9s cubic-bezier(.2, 1.4, .4, 1) both; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); }
.festa-dragao img { width: 100%; height: auto; display: block; transform-origin: 50% 70%; animation: dragao-asas .5s ease-in-out infinite alternate; }
@keyframes dragao-chega { from { transform: translateY(70vh) scale(.4) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dragao-voa { 0%, 100% { translate: 0 0; rotate: -4deg; } 25% { translate: 14px -18px; rotate: 3deg; } 50% { translate: 0 -30px; rotate: 5deg; } 75% { translate: -14px -14px; rotate: -2deg; } }
@keyframes dragao-asas { from { transform: scale(1, 1); } to { transform: scale(1.04, .97); } }
@keyframes confete-cai { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--desvio), 108vh) rotate(var(--gira)); } }
@keyframes festa-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes festa-sai { to { opacity: 0; } }
/* 0.07: a festa sempre aparece animada (o Thiago quer festa), mesmo com "reduzir animações" ligado */
.festa-inauguracao canvas.festa-confetes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; }
.festa-centro { z-index: 1; }
.festa-inauguracao { background: radial-gradient(circle at 50% 42%, rgba(243, 154, 28, .35), rgba(30, 22, 48, .9) 62%); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.festa-centro h2 { text-shadow: 0 3px 0 #1E1630, 0 0 18px rgba(0, 0, 0, .45); }
.festa-centro p { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ===== 0.06: nome da franquia com a letra do logo Dragão (laranja com contorno escuro) ===== */
.conteudo > h1 .titulo-franquia { height: 2.15rem; max-width: 100%; }
.titulo-franquia text { stroke-width: 3.4px; }
.titulo-franquia.pequeno { height: 1.35rem; }
.ck-nome-franquia { display: inline-block; margin-bottom: 0.4rem; max-width: 100%; }
.ck-nome-franquia:hover { text-decoration: none; filter: brightness(1.05); }
.ck-nome-franquia .titulo-franquia { display: block; max-width: 100%; }
@media (max-width: 560px) { .conteudo > h1 .titulo-franquia { height: 1.6rem; } }

/* 0.06: filtro de categorias como botões de verdade (sem a faixa de fundo) */
.ck-filtro.ck-filtro-cat { background: none; padding: 0; gap: 0.5rem; border-radius: 0; }
.ck-filtro-cat button { background: var(--superficie); border: 1.5px solid var(--linha-forte); color: var(--texto); padding: 0.5rem 0.95rem; border-radius: 10px; box-shadow: 0 1px 2px rgba(30, 18, 52, .06); transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.ck-filtro-cat button:hover { border-color: var(--azul); color: var(--azul); }
.ck-filtro-cat button:active { transform: translateY(1px); }
.ck-filtro-cat button.ativo { background: var(--botao); border-color: var(--botao); color: var(--botao-texto); box-shadow: 0 3px 10px color-mix(in srgb, var(--botao) 35%, transparent); }
.ck-filtro-cat button.ativo small { color: inherit; opacity: .85; }
.ck-filtro-cat button.completo { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
.ck-filtro-cat button.ativo.completo { background: var(--verde); border-color: var(--verde); color: #fff; }
.ck-filtro-cat button.ativo.completo .ck-filtro-ok { background: #fff; }
.ck-filtro-cat button.ativo.completo .ck-filtro-ok svg { stroke: var(--verde); }
@media (max-width: 760px) { .ck-filtro.ck-filtro-cat { padding-bottom: 0.25rem; } }
/* 0.07: o dragão vem de longe, pequenininho, voando em zigue-zague até chegar no tamanho final; o texto aparece quando ele chega */
.festa-dragao { animation: dragao-voa 2.4s ease-in-out 2.6s infinite, dragao-vem 2.6s cubic-bezier(.35, .1, .25, 1) both; }
@keyframes dragao-vem {
  0%   { transform: translate(-34vw, -30vh) scale(.05) rotate(-14deg); opacity: 0; }
  8%   { opacity: 1; }
  30%  { transform: translate(22vw, -22vh) scale(.18) rotate(10deg); }
  55%  { transform: translate(-16vw, -10vh) scale(.42) rotate(-8deg); }
  78%  { transform: translate(8vw, -2vh) scale(.78) rotate(5deg); }
  92%  { transform: translate(0, 0) scale(1.08) rotate(-2deg); }
  100% { transform: none; opacity: 1; }
}
.festa-centro h2, .festa-centro p, .festa-centro .botao { animation: festa-texto .5s ease 2.3s both; }
@keyframes festa-texto { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===== 0.08: Dashboard, alerta de estoque, mapa das franquias, CEP e CNPJ ===== */
.resumo-painel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .resumo-painel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.resumo li.cartao-alerta a { border-color: color-mix(in srgb, var(--perigo) 55%, var(--linha)); background: var(--perigo-suave); color: var(--perigo); }
.resumo li.cartao-alerta strong { color: var(--perigo); }
.resumo li.cartao-ok a { border-color: color-mix(in srgb, var(--verde) 40%, var(--linha)); }
.resumo li.cartao-ok strong { color: var(--verde); }
.alerta-estoque { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem 1.1rem; align-items: start; margin: -1rem 0 2rem;
  padding: 1rem 1.15rem; border-radius: var(--raio-grande); background: var(--superficie); border: 1.5px solid color-mix(in srgb, var(--perigo) 50%, var(--linha)); box-shadow: var(--sombra); }
.alerta-estoque-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--perigo); color: #fff; font-weight: 800; font-size: 1.15rem; display: grid; place-items: center; animation: alerta-pulsa 1.8s ease-in-out infinite; }
@keyframes alerta-pulsa { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--perigo) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
.alerta-estoque b { display: block; color: var(--perigo); margin-bottom: 0.4rem; }
.alerta-estoque ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.45rem 1rem; }
.alerta-estoque li { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.alerta-estoque li > span:nth-child(2) { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alerta-estoque li em { font-style: normal; font-size: 0.8125rem; color: var(--perigo); white-space: nowrap; margin-left: auto; }
.alerta-estoque .ck-ic.pequeno { width: 30px; height: 30px; border-radius: 8px; }
.alerta-estoque .ck-ic.pequeno .icone-item { width: 19px; height: 19px; }
.alerta-estoque .nota { margin: 0.4rem 0 0; }
@media (max-width: 640px) { .alerta-estoque { grid-template-columns: auto 1fr; } .alerta-estoque > .botao { grid-column: 1 / -1; } }

.titulo-com-botao { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.titulo-com-botao h2, .titulo-com-botao .descricao { margin: 0; }
.bt-mapa { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.bt-mapa img { width: 18px; height: 20px; object-fit: contain; }

.dlg-mapa { width: min(1100px, calc(100vw - 2rem)); max-width: none; }
.dlg-mapa .dialogo-corpo { padding-bottom: 1.1rem; }
.mapa-topo { display: flex; align-items: center; gap: 0.5rem 1.25rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.mapa-legenda { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 600; }
.mapa-legenda .mapa-pino { width: 28px; height: 30px; }
.mapa-info { margin-left: auto; font-weight: 600; }
.mapa-area { position: relative; height: min(64vh, 560px); border-radius: 14px; overflow: hidden; border: 1px solid var(--linha); background: var(--superficie-2); }
.mapa-leaflet { position: absolute; inset: 0; }
.mapa-carregando { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.mapa-localizando { position: absolute; left: 50%; bottom: 0.75rem; transform: translateX(-50%); z-index: 500; margin: 0; background: var(--superficie); padding: 0.35rem 0.8rem; border-radius: 999px; box-shadow: var(--sombra); }
.mapa-ufs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }
.mapa-uf { font-size: 0.8125rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--realce); }
.mapa-uf em { font-style: normal; color: var(--dourado-texto); font-weight: 600; }
.mapa-marcador { background: none; border: 0; }
.mapa-pino { position: relative; display: block; width: 46px; height: 50px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); transition: transform .15s; }
.mapa-pino img { width: 100%; height: 100%; object-fit: contain; display: block; }
.mapa-marcador:hover .mapa-pino { transform: scale(1.15); }
.mapa-pino b { position: absolute; top: -4px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #F39A1C; color: #1E1630; border: 2px solid #1E1630;
  font-size: 13px; font-weight: 900; line-height: 16px; text-align: center; animation: pino-pula 1.2s ease-in-out infinite; }
.mapa-legenda .mapa-pino b { width: 15px; height: 15px; font-size: 10px; line-height: 11px; top: -4px; right: -6px; border-width: 1.5px; }
@keyframes pino-pula { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.mapa-pino.pausada { filter: grayscale(1) opacity(.6); }
.mapa-popup { display: grid; gap: 0.15rem; font-family: "Figtree", sans-serif; font-size: 0.8125rem; min-width: 11rem; }
.mapa-popup b { font-size: 0.9375rem; }
.mapa-st { font-weight: 700; }
.mapa-st.st-em_implantacao { color: #C26A00; }
.mapa-st.st-implantada { color: #2E9E6A; }
.mapa-popup a { margin-top: 0.25rem; font-weight: 700; }

.formulario.grade label > small.fq-busca { color: var(--suave); }
.fq-busca.buscando { color: var(--azul) !important; }
.fq-busca.ok { color: var(--verde) !important; font-weight: 600; }
.fq-busca.erro { color: var(--perigo) !important; font-weight: 600; }
.fq-preenchido { background: var(--verde-suave) !important; transition: background-color .4s; }

/* textos de ajuda do CEP e do CNPJ não empurram os campos (ficam embaixo, numa linha só) */
.fq-linha-endereco label { position: relative; }
.fq-linha-endereco label > small.fq-busca { position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.formulario.grade .fq-linha-endereco { row-gap: 1.35rem; margin-bottom: 0.35rem; }
@media (min-width: 1200px) { .formulario.grade .fq-linha-endereco { grid-template-columns: calc((100% - 3 * 1.25rem) / 4) 1fr; column-gap: 1.25rem; } }
/* 0.08: botão Nova franquia, janela de cadastro e campo CPF */
.fq-topo-bts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bt-nova-franquia { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; padding: 0.6rem 1.15rem; box-shadow: 0 4px 14px color-mix(in srgb, var(--botao) 35%, transparent); }
.bt-nova-franquia .icone { width: 18px; height: 18px; stroke-width: 2.6; }
.bt-nova-franquia:hover { transform: translateY(-1px); }
.dlg-nova-franquia { width: min(1100px, calc(100vw - 2rem)); }
.dlg-nova-franquia .dialogo-corpo { max-height: calc(100vh - 2rem); overflow-y: auto; }
.dlg-nova-franquia .nota { margin: -0.25rem 0 1rem; }
.formulario .opcional { font-weight: 400; color: var(--suave); font-size: 0.75rem; }
@media (min-width: 1200px) {
  .formulario.grade > .span2 { grid-column: span 2; }
  .formulario.grade > .span3 { grid-column: span 3; }
}
@media (max-width: 640px) { .fq-topo-bts { width: 100%; } .fq-topo-bts > * { flex: 1; justify-content: center; } }
.formulario label > .opcional { display: inline; margin: 0; }
.titulo-com-botao > .descricao { flex: 1 1 18rem; }
.fq-topo-bts .botao { height: 40px; padding-top: 0; padding-bottom: 0; font-size: 0.875rem; }
.fq-topo-bts .bt-mapa { font-weight: 600; }
.titulo-com-botao .bt-mapa { height: 36px; }
.fq-topo-bts .bt-mapa { height: 40px; }
/* 0.08: resumo por região no mapa */
.mapa-regioes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.85rem; }
.mapa-regiao { display: grid; gap: 0.15rem; text-align: left; font: inherit; color: var(--texto); background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 12px; padding: 0.6rem 0.75rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mapa-regiao:hover { border-color: var(--azul); }
.mapa-regiao.ativa { border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); }
.mapa-regiao.vazia { opacity: .5; cursor: default; }
.mr-nome { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--suave); }
.mapa-regiao strong { font-size: 1.5rem; line-height: 1.1; color: var(--azul); }
.mr-det { font-size: 0.75rem; color: var(--suave); }
.mr-det em { font-style: normal; color: var(--dourado-texto); font-weight: 600; }
.mr-barra { height: 5px; border-radius: 99px; background: var(--realce); overflow: hidden; margin-top: 0.2rem; }
.mr-barra i { display: block; height: 100%; background: linear-gradient(90deg, var(--azul), #F39A1C); border-radius: 99px; }
.mr-pct { font-size: 0.6875rem; color: var(--suave); }
.mapa-area { height: min(54vh, 480px); }
@media (max-width: 760px) { .mapa-regioes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dialogo.dlg-mapa { width: min(1100px, calc(100vw - 2rem)); }
.dialogo.dlg-nova-franquia { width: min(1100px, calc(100vw - 2rem)); }
.mr-nome { white-space: nowrap; }

/* ===== 0.10: lista para localizar franquia no mapa ===== */
.mapa-busca { margin: -0.25rem 0 0.75rem; }
.mapa-busca-campo { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.mapa-busca-campo span { font-weight: 700; font-size: 0.875rem; white-space: nowrap; }
.mapa-busca-campo select { flex: 1; height: 42px; max-width: 32rem; border: 1.5px solid var(--azul); border-radius: 10px; font-weight: 600; }
@media (max-width: 640px) { .mapa-busca-campo { flex-direction: column; align-items: stretch; gap: 0.3rem; } }
.dlg-mapa label.mapa-busca-campo { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; }
.dlg-mapa label.mapa-busca-campo span { margin: 0; }
@media (max-width: 640px) { .dlg-mapa label.mapa-busca-campo { flex-direction: column; align-items: stretch; } }
/* 0.11: o voo de entrada é feito pelo script (curva em S suave); depois de chegar, ele flutua de leve */
.festa-dragao { animation: none; opacity: 0; will-change: transform; }
.festa-dragao.chegou { opacity: 1; }
.festa-dragao-flutua { transform-origin: 50% 60%; }
.festa-dragao.chegou .festa-dragao-flutua { animation: dragao-voa 3.2s ease-in-out infinite; }
@keyframes dragao-voa { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 25% { transform: translate(10px, -12px) rotate(2deg); } 50% { transform: translate(0, -20px) rotate(4deg); } 75% { transform: translate(-10px, -10px) rotate(-1deg); } }
.festa-centro h2, .festa-centro p, .festa-centro .botao { animation: festa-texto .6s ease 3.2s both; }

/* 0.11 — endereço em campos separados: Número | Complemento | Bairro (mesma altura dos outros campos) */
.fq-linha-numero { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr 2fr; gap: 1rem 1.25rem; align-items: end; }
.fq-linha-numero label { margin: 0; min-width: 0; }
.fq-linha-numero input { width: 100%; height: 44px; box-sizing: border-box; }
@media (min-width: 1200px) { .formulario.grade .fq-linha-numero { grid-template-columns: calc((100% - 3 * 1.25rem) / 4) 1fr 1fr; column-gap: 1.25rem; } }
@media (max-width: 640px) { .fq-linha-numero { grid-template-columns: 7rem 1fr; } .fq-linha-numero label:last-child { grid-column: 1 / -1; } }

/* 0.11 — mapa: pesquisa Estado → Franquia lado a lado */
.dlg-mapa .mapa-busca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.6rem 1.25rem; max-width: 52rem; }
.dlg-mapa .mapa-busca-campo select { max-width: none; min-width: 0; }
.dlg-mapa .mapa-busca-campo select:disabled { border-color: var(--linha); opacity: .65; cursor: not-allowed; }
@media (max-width: 640px) { .dlg-mapa .mapa-busca { grid-template-columns: 1fr; } }

/* 0.11 — quadrados das etapas mais compactos (menos altura e espaço) */
.et-grade { gap: 0.6rem; }
.et-card { aspect-ratio: auto; min-height: 6.6rem; gap: 0.25rem; padding: 0.55rem 0.65rem 0.5rem; border-radius: 12px; }
.et-num { font-size: 0.75rem; }
.et-check { width: 20px; height: 20px; border-width: 1.5px; }
.et-check svg { width: 12px; height: 12px; }
.et-nome { font-size: 0.8125rem; line-height: 1.2; -webkit-line-clamp: 2; }
.et-rodape { min-height: 0; }
.et-data { font-size: 0.8125rem; }
.et-rodape small { font-size: 0.6875rem; }
@media (min-width: 1281px) { .et-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 0.11 — Estoque: ações da tabela como botões pequenos com ícone (mais fáceis de clicar) */
.es-acoes { white-space: nowrap; }
.es-acoes .es-acao { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; height: 32px; padding: 0 0.6rem; margin: 0 0 0 0.3rem;
  border: 1.5px solid var(--linha-forte); border-radius: 9px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 0.8125rem; font-weight: 600;
  text-decoration: none; cursor: pointer; vertical-align: middle; transition: background-color .15s, border-color .15s, color .15s; }
.es-acoes .es-acao svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-acoes .es-acao:hover { border-color: var(--azul); color: var(--azul); background: var(--azul-suave); }
.es-acoes .es-acao-entrada { background: var(--verde); border-color: var(--verde); color: #fff; }
.es-acoes .es-acao-entrada:hover { background: color-mix(in srgb, var(--verde) 85%, #000); border-color: transparent; color: #fff; }
.es-acoes .es-acao:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 40%, transparent); outline-offset: 2px; }
@media (max-width: 760px) { .es-acoes { white-space: normal; } .es-acoes .es-acao { margin: 0.2rem 0 0.2rem 0.3rem; } }

/* 0.12 — temas (categorias) em azul, como na folha de implantação; itens de serviço */
:root { --tema-azul: #1e7fe0; --tema-azul-suave: #e8f2fd; }
[data-theme="dark"] { --tema-azul: #5aa9ff; --tema-azul-suave: #142a42; }
.es-tabela .es-grupo td { color: var(--tema-azul); background: var(--tema-azul-suave); font-size: 0.8125rem; border-left: 3px solid var(--tema-azul); }
.es-tabela tbody tr.es-grupo:hover td { background: var(--tema-azul-suave); }
.ck-grupo > header { background: var(--tema-azul-suave); border-left: 4px solid var(--tema-azul); }
.ck-grupo > header h2 { color: var(--tema-azul); }
.ck-ic.cor-1, .ck-ic.cor-2, .ck-ic.cor-3, .ck-ic.cor-4 { background: var(--tema-azul-suave); color: var(--tema-azul); }
.es-servico { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--realce); color: var(--suave); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.ck-selo.servico { background: var(--realce); color: var(--suave); }

/* 0.13 — Importar dados (planilha de franqueados) */
.im-passo { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.35rem; border-radius: 50%; background: var(--tema-azul); color: #fff; font-size: 0.875rem; vertical-align: 2px; }
.im-dicas { margin: 0; padding-left: 1.1rem; color: var(--suave); font-size: 0.875rem; display: grid; gap: 0.25rem; }
.im-grade .bk-cartao .linha-botoes { margin-top: 0.25rem; }
.im-previa { display: grid; gap: 1rem; }
.im-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
.im-topo h2 { margin: 0 0 0.15rem; }
.im-topo .nota { margin: 0; }
.im-resumo { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.im-resumo li { display: flex; align-items: baseline; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 10px; border: 1px solid var(--linha); font-size: 0.875rem; color: var(--suave); }
.im-resumo strong { font-size: 1.15rem; color: var(--texto); }
.im-resumo .ok strong { color: var(--verde); } .im-resumo .existe strong { color: var(--dourado); } .im-resumo .erro strong { color: var(--perigo); }
.im-tabela td small { display: block; color: var(--suave); font-size: 0.75rem; }
.im-tabela td.im-res small { max-width: 22rem; white-space: normal; }
.im-tabela tr.im-erro td { background: color-mix(in srgb, var(--perigo) 6%, transparent); }
.im-aviso { margin: 0; padding: 0.7rem 0.9rem; border-radius: 10px; background: color-mix(in srgb, var(--perigo) 8%, transparent); color: var(--texto); font-size: 0.875rem; }
.im-confirma { display: grid; gap: 0.75rem; margin: 0; }
.im-mudou { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.1rem; font-size: 0.75rem; color: var(--suave); }
.im-mudou b { color: var(--texto); font-weight: 600; }
.im-mudou s { opacity: .7; }
.im-regra { margin: 0; }
.im-tabela tr.im-igual td { color: var(--suave); }
.im-novo { font-style: normal; font-size: 0.6875rem; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: .03em; margin-right: 0.15rem; }

/* ======================================================================
   GARON CONTROLE — tema da Garon Sistemas (0.03: visual leve)
   Branco e cinza bem claro, texto preto, vermelho #E01E2E só nos destaques.
   Tudo abaixo vence as camadas antigas da base. Use sempre as variáveis.
   ====================================================================== */
:root, [data-theme="light"] {
  --fundo: #F6F6F7;
  --superficie: #FFFFFF;
  --superficie-2: #FAFAFB;
  --realce: #F1F1F3;
  --texto: #0F0F12;
  --suave: #6B6B75;
  --linha: #ECECEF;
  --linha-forte: #DCDCE1;

  --vermelho: #E01E2E;
  --vermelho-forte: #BF1424;
  --vermelho-suave: #FFF0F1;
  --vermelho-linha: #FBD5D9;
  --marinho: #0F0F12;
  --azul: #D41A2A;            /* destaque (links, foco) = vermelho da marca */
  --azul-forte: #AE1220;
  --azul-suave: #FFF0F1;
  --dourado: #E8950E;         /* atenção (âmbar) */
  --dourado-texto: #8A5300;
  --dourado-suave: #FFF6E5;
  --verde: #12945B;
  --verde-suave: #E8F7EF;
  --roxo: #2F6FD0;
  --roxo-suave: #EBF2FD;
  --perigo: #C62B2B;
  --perigo-suave: #FDEEEE;

  --botao: #0F0F12;
  --botao-hover: #2A2A30;
  --botao-texto: #FFFFFF;
  --marca: #0F0F12;
  --preto: #0F0F12;
  --lateral: #FFFFFF;
  --sombra: 0 1px 2px rgba(15, 15, 18, .04), 0 2px 10px rgba(15, 15, 18, .04);
  --sombra-alta: 0 24px 64px rgba(15, 15, 18, .18);
  --raio: 10px;
  --raio-grande: 16px;
  --fonte-titulo: "Poppins", "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
[data-theme="dark"] {
  --fundo: #0C0C0E;
  --superficie: #141417;
  --superficie-2: #18181C;
  --realce: #1F1F24;
  --texto: #EDEDF0;
  --suave: #9898A3;
  --linha: #232328;
  --linha-forte: #303037;

  --vermelho: #FF3D4C;
  --vermelho-forte: #FF6A76;
  --vermelho-suave: #2A1215;
  --vermelho-linha: #4A1A20;
  --marinho: #EDEDF0;
  --azul: #FF5562;
  --azul-forte: #FF7A85;
  --azul-suave: #2A1215;
  --dourado: #F5A524;
  --dourado-texto: #F7BD5E;
  --dourado-suave: #2B200C;
  --verde: #3CCB86;
  --verde-suave: #0F261B;
  --roxo: #6EA3F5;
  --roxo-suave: #121F33;
  --perigo: #FF6B6B;
  --perigo-suave: #321515;

  --botao: #F2F2F4;
  --botao-hover: #FFFFFF;
  --botao-texto: #0F0F12;
  --marca: #FFFFFF;
  --preto: #000000;
  --lateral: #111114;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-alta: 0 24px 64px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---------- base ---------- */
body, [data-theme="dark"] body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; background: var(--fundo); background-image: none; color: var(--texto); }
h1, h2, h3 { font-family: var(--fonte-titulo); letter-spacing: -0.01em; }
h1 { font-weight: 600; font-size: 1.6rem; }
h2 { font-weight: 600; }
::selection { background: var(--vermelho); color: #fff; }
.num, .gc-kpis b, .gc-termos dd, .tabela td.num { font-variant-numeric: tabular-nums; }
.conteudo > h1::after { content: none !important; }
a { color: var(--azul); }

/* ---------- topo e menu: claros, com uma linha fina vermelha no alto ---------- */
.topo, [data-theme="dark"] .topo {
  background: color-mix(in srgb, var(--superficie) 88%, transparent); background-image: none;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linha); box-shadow: none; height: 64px; color: var(--texto);
}
.topo::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--vermelho) 0, var(--vermelho) 180px, transparent 60%); }
.topo .logo-horizontal { height: 34px; width: auto; display: block; }
.topo .logo-escuro { display: none; }
[data-theme="dark"] .topo .logo-claro { display: none; }
[data-theme="dark"] .topo .logo-escuro { display: block; }
.topo .marca { gap: 0.6rem; }
.topo .abrir-menu span { background: var(--texto); }
.topo .botao-tema { background: var(--realce); border-color: var(--linha); }
.topo .botao-tema::before { background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
[data-theme="dark"] .topo .botao-tema::before { background: var(--vermelho); }
.topo .botao-tema svg { stroke: var(--suave); }
[data-theme="light"] .topo .ico-sol, :root:not([data-theme]) .topo .ico-sol { stroke: #E8950E; }
[data-theme="dark"] .topo .ico-lua { stroke: #fff; fill: #fff; }
.topo .menu-sino summary, .topo .menu-sino summary .icone { color: var(--suave); }
.topo .menu-usuario summary:hover, .topo .menu-sino summary:hover { background: var(--realce); }
.topo .quem b { color: var(--texto); } .topo .quem small { color: var(--suave); }
.avatar, [data-theme="dark"] .avatar { background: var(--texto); color: var(--superficie); }
.sino-contador { background: var(--vermelho) !important; color: #fff !important; }

.lateral, [data-theme="dark"] .lateral { background: var(--lateral); background-image: none; border-right: 1px solid var(--linha); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (min-width: 901px) { .estrutura { background: none; } }
.lateral nav a { color: var(--texto); position: relative; border-radius: 10px; font-weight: 500; }
.lateral nav a:hover { background: var(--realce); color: var(--texto); }
.lateral nav a:not(.ativo) .icone { color: var(--suave); }
.lateral nav a.ativo { background: var(--vermelho-suave); color: var(--vermelho); font-weight: 600; }
.lateral nav a.ativo::before { content: ""; position: absolute; left: -0.75rem; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vermelho); }
.lateral nav a.ativo .icone { color: var(--vermelho); }
.lateral .grupo-menu { color: var(--suave); border-top: 1px solid var(--linha); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; }
.lateral .versao, .lateral a.versao { color: var(--suave); }
.contador, .lateral .contador { background: var(--vermelho); color: #fff; }
.lateral nav .menu-pai { color: var(--texto); }

.conteudo, [data-theme="dark"] .conteudo { background: var(--superficie); background-image: none; border: 1px solid var(--linha); box-shadow: var(--sombra); }
.conteudo > * { max-width: 1180px; }
.h1-icone { background: var(--vermelho-suave); color: var(--vermelho); border-radius: 12px; box-shadow: none; }
.conteudo > h1 { display: flex; align-items: center; gap: 0.85rem; }
.conteudo > h1 .voltar, .voltar { box-shadow: none !important; border: 1px solid var(--linha-forte) !important; background: var(--superficie) !important; color: var(--texto) !important; border-radius: 999px !important; height: 36px; padding: 0 0.9rem 0 0.6rem !important; font-family: "Inter", sans-serif; font-size: 0.875rem !important; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.voltar:hover { background: var(--realce) !important; }
.voltar svg { width: 16px; height: 16px; }

/* ---------- botões, campos, abas, selos ---------- */
.botao { border-radius: 10px; font-weight: 600; min-height: 42px; transition: background .15s, transform .1s, box-shadow .15s, border-color .15s; }
.botao:active { transform: translateY(1px); }
.botao.pequeno { min-height: 34px; font-size: 0.8125rem; padding: 0.35rem 0.8rem; }
.botao.secundario { background: var(--superficie); border-color: var(--linha-forte); color: var(--texto); }
.botao.secundario:hover { background: var(--realce); border-color: var(--linha-forte); }
.botao.perigo { background: var(--perigo); border-color: var(--perigo); color: #fff; }
.botao.perigo-suave { background: var(--perigo-suave); color: var(--perigo); }
.botao .icone { width: 18px; height: 18px; }
.botao.pequeno .icone { width: 16px; height: 16px; }
.botao:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.gc-bt-novo { background: var(--vermelho); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--vermelho) 22%, transparent); }
.gc-bt-novo:hover { background: var(--vermelho-forte); color: #fff; }
.gc-bt-novo .icone { stroke-width: 2.4; }
.gc-bt-perigo { color: var(--perigo) !important; }
.gc-bt-perigo:hover { background: var(--perigo-suave) !important; border-color: var(--vermelho-linha) !important; }
input, select, textarea { border-radius: 10px; min-height: 44px; border-color: var(--linha-forte); background: var(--superficie); color: var(--texto); }
textarea { min-height: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--vermelho); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vermelho) 14%, transparent); }
input[type=checkbox], input[type=radio] { accent-color: var(--vermelho); min-height: 0; }
input[type=file] { min-height: 44px; }
label { color: var(--suave); }
.abas { border-bottom: 1px solid var(--linha); gap: 0.15rem; margin-bottom: 1.5rem; }
.abas a { padding: 0.7rem 1rem; color: var(--suave); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.abas a:hover { color: var(--texto); }
.abas a.ativa { color: var(--texto); border-bottom-color: var(--vermelho); }
.contador-aba { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--realce); color: var(--suave); font-size: 0.72rem; font-weight: 700; }
.abas a.ativa .contador-aba { background: var(--vermelho); color: #fff; }
.contador-aba.alerta { background: var(--dourado); color: #111; }
.selo { border-radius: 999px; font-weight: 600; padding: 0.22rem 0.65rem; font-size: 0.72rem; }
.selo-aberto { background: var(--dourado-suave); color: var(--dourado-texto); }
.selo-em_andamento { background: var(--roxo-suave); color: var(--roxo); }
.selo-concluido { background: var(--verde-suave); color: var(--verde); }
.selo-inativo { background: var(--perigo-suave); color: var(--perigo); }
.selo-cancelado { background: var(--realce); color: var(--suave); }
.tabela { border-radius: 12px; border-color: var(--linha); }
.tabela th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--superficie-2); color: var(--suave); }
.tabela tfoot td { background: var(--superficie-2); border-top: 1px solid var(--linha); }
.tabela td > small { display: block; color: var(--suave); font-size: 0.78rem; }
.tabela .acoes { white-space: nowrap; text-align: right; }
.tabela .acoes > * + * { margin-left: 0.75rem; }
.gc-inline { display: inline; margin: 0; }
.flash { border-radius: 12px; }
.vazio { border-radius: 12px; }
.dialogo { border-radius: 18px; background-image: none; }
.dialogo::backdrop { background: rgba(15, 15, 18, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.gc-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
.titulo-com-botao { margin-bottom: 1.25rem; }
.info-tag { background: var(--vermelho) !important; color: #fff !important; }
.atualizou-topo { border-bottom-color: var(--vermelho) !important; }
.atualizou-ic { background: var(--vermelho-suave) !important; }
.menu-suspenso { background: var(--superficie); border-color: var(--linha); color: var(--texto); }

/* ---------- tela de entrada ---------- */
.tela-entrada, [data-theme="dark"] .tela-entrada {
  background:
    radial-gradient(700px 420px at 90% -10%, color-mix(in srgb, var(--vermelho) 12%, transparent), transparent 65%),
    radial-gradient(rgba(15, 15, 18, .06) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--fundo);
  color: var(--texto);
}
[data-theme="dark"] .tela-entrada { background: radial-gradient(700px 420px at 90% -10%, rgba(224, 30, 46, .18), transparent 65%), radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--fundo); }
.tela-entrada .entrada-logo .logo-completo { width: min(280px, 76vw); filter: none; }
.tela-entrada .entrada-logo .logo-escuro { display: none; }
[data-theme="dark"] .tela-entrada .entrada-logo .logo-claro { display: none; }
[data-theme="dark"] .tela-entrada .entrada-logo .logo-escuro { display: block; }
.tela-entrada .entrada-logo { margin-bottom: 1.5rem; }
.form-entrada, .entrada-centro > form { background: var(--superficie); color: var(--texto); border: 1px solid var(--linha); box-shadow: 0 24px 60px rgba(15, 15, 18, .10); border-radius: 18px; }
.form-entrada h1 { font-family: var(--fonte-titulo); font-size: 1.35rem; margin: 0; }
.gc-login { width: min(400px, 100%); margin: 0 auto; }
.gc-login .form-entrada { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem; }
.gc-login .form-entrada, .gc-login .form-entrada label, .gc-login .form-entrada .nota { text-align: left; }
.gc-login .botao { width: 100%; background: var(--vermelho); color: #fff; min-height: 46px; }
.gc-login .botao:hover { background: var(--vermelho-forte); }
.gc-login .link-esqueci { text-align: center; font-size: 0.875rem; }
.tela-entrada .entrada-tema .botao-tema { background: var(--realce); border-color: var(--linha); }

/* ---------- grade de formulário (4 colunas alinhadas) ---------- */
.gc-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem 1.1rem; align-items: end; }
.gc-grade.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gc-grade > * { min-width: 0; margin: 0; }
.gc-grade .c1 { grid-column: span 1; } .gc-grade .c2 { grid-column: span 2; } .gc-grade .c3 { grid-column: span 3; } .gc-grade .c4 { grid-column: 1 / -1; }
.gc-grade.g2 .c2 { grid-column: 1 / -1; }
.gc-grade label > input, .gc-grade label > select, .gc-grade label > .gc-moeda > input { width: 100%; height: 44px; }
.gc-grade label > textarea { width: 100%; }
.gc-grade [hidden] { display: none !important; }
.gc-ajuda-baixo { position: relative; }
.gc-ajuda-baixo > small.fq-busca { position: absolute; top: 100%; left: 0; right: -200%; margin-top: 4px; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--suave); }
.fq-busca.buscando { color: var(--azul) !important; } .fq-busca.ok { color: var(--verde) !important; font-weight: 600; } .fq-busca.erro { color: var(--perigo) !important; font-weight: 600; }
.fq-preenchido { background: var(--verde-suave) !important; transition: background-color .4s; }
.gc-sub { margin: 0.6rem 0 -0.5rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto); display: flex; align-items: center; gap: 0.6rem; }
.gc-sub::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.gc-pessoa { border: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.gc-opcao { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid var(--linha-forte); border-radius: 12px; cursor: pointer; color: var(--texto); background: var(--superficie); transition: border-color .15s, background .15s; }
.gc-opcao:has(input:checked) { border-color: var(--vermelho); background: var(--vermelho-suave); box-shadow: inset 0 0 0 1px var(--vermelho); }
.gc-opcao input[type=radio] { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; }
.gc-opcao > span { flex: 1; text-align: left; display: flex; flex-direction: column; } .gc-opcao b { font-size: 0.9375rem; } .gc-opcao small { font-weight: 400; }
.gc-check { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 0.6rem; color: var(--texto); font-weight: 500; min-height: 44px; }
.gc-check input[type=checkbox] { width: 20px; height: 20px; flex: none; margin: 0; padding: 0; }
.gc-check > span { flex: 1; }
.gc-moeda { position: relative; display: block; }
.gc-moeda::before { content: "R$"; position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--suave); font-weight: 600; pointer-events: none; }
.gc-moeda input { padding-left: 2.3rem; text-align: right; font-variant-numeric: tabular-nums; }
.gc-rodape-form, .formulario > .gc-rodape-form { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linha); align-self: stretch; }
.gc-cartao-form { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.5rem; margin-bottom: 1.5rem; }
.gc-dlg-grande { width: min(980px, calc(100vw - 2rem)); }
.gc-dlg-grande .dialogo-corpo { max-height: calc(100vh - 2rem); overflow-y: auto; padding: 1.5rem 1.75rem 1.75rem; }
.gc-dlg-grande .nota { margin: 0 0 1.25rem; }
.formulario .opcional { font-weight: 400; color: var(--suave); font-size: 0.75rem; display: inline; }
@media (max-width: 900px) { .gc-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gc-grade .c3, .gc-grade .c4 { grid-column: 1 / -1; } }
@media (max-width: 560px) { .gc-grade, .gc-grade.g2, .gc-pessoa { grid-template-columns: 1fr; } .gc-grade .c1, .gc-grade .c2, .gc-grade .c3 { grid-column: 1 / -1; } .gc-ajuda-baixo > small.fq-busca { right: 0; } }

/* ---------- cartões, ficha, trilha ---------- */
.gc-cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-grande); padding: 1.35rem 1.5rem; margin-bottom: 1.5rem; min-width: 0; }
.gc-cartao > h2, .gc-cartao .titulo-com-botao h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.02rem; margin: 0 0 0.9rem; }
.gc-cartao h2 .icone { width: 20px; height: 20px; color: var(--vermelho); }
.gc-cartao .titulo-com-botao { margin-bottom: 0.9rem; }
.gc-perigo { border-color: var(--vermelho-linha); }
.gc-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.gc-dupla > .gc-cartao { margin-bottom: 0; }
.gc-painel-colunas { margin-bottom: 1.25rem; }
@media (max-width: 900px) { .gc-dupla { grid-template-columns: 1fr; } }
.gc-h2 { font-size: 1.02rem; margin: 0 0 1rem; }
.gc-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--suave); margin: -0.75rem 0 1.25rem; }
.gc-trilha a { color: var(--suave); } .gc-trilha a:hover { color: var(--vermelho); }
.gc-trilha b { color: var(--texto); font-weight: 600; }

.gc-avatar { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; background: var(--texto); color: var(--superficie); font-weight: 700; font-size: 0.8rem; overflow: hidden; }
.gc-avatar.com-logo { background: #fff; border: 1px solid var(--linha); padding: 3px; }
.gc-avatar.com-logo img { width: 100%; height: 100%; object-fit: cover; object-position: left center; display: block; border-radius: 8px; }
.gc-avatar.quadrado { padding: 0; border: 0; }
.gc-avatar.quadrado img { object-fit: cover; object-position: center; border-radius: 0; }
.gc-avatar.grande { width: 72px; height: 72px; border-radius: 18px; font-size: 1.25rem; }
.gc-avatar.pequeno { width: 30px; height: 30px; border-radius: 9px; font-size: 0.68rem; }
.gc-avatar .icone { width: 22px; height: 22px; }
.gc-sigla { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; flex: none; font-family: var(--fonte-titulo); font-weight: 700; font-size: 0.8rem;
  background: var(--texto); color: var(--superficie); box-shadow: inset 0 -3px 0 var(--vermelho); }
.gc-sigla.grande { width: 72px; height: 72px; border-radius: 18px; font-size: 1.3rem; box-shadow: inset 0 -5px 0 var(--vermelho); }

.gc-tag { display: inline-flex; align-items: center; height: 22px; padding: 0 0.55rem; border-radius: 7px; font-size: 0.7rem; font-weight: 600; background: var(--realce); color: var(--suave); white-space: nowrap; vertical-align: middle; }
.gc-tag.tag-franqueadora { background: var(--vermelho-suave); color: var(--vermelho); }
.gc-tag.tag-unidade { background: var(--roxo-suave); color: var(--roxo); }
.gc-tag.tag-grupo { background: var(--dourado-suave); color: var(--dourado-texto); }
.gc-tag.tag-versao { background: var(--texto); color: var(--superficie); }
.gc-tag.tag-garon { background: var(--texto); color: var(--superficie); }

.gc-ficha { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--linha); border-radius: var(--raio-grande); margin-bottom: 1.25rem; background: var(--superficie); flex-wrap: wrap; position: relative; overflow: hidden; }
.gc-ficha::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vermelho); }
.gc-ficha-txt { flex: 1 1 16rem; min-width: 0; }
.gc-ficha-txt p { margin: 0.4rem 0 0.1rem; font-weight: 500; }
.gc-ficha-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.gc-ficha-acoes { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.gc-ficha-num { display: flex; gap: 0.5rem; margin: 0; flex-wrap: wrap; flex-basis: 100%; }
.gc-ficha-num div { flex: 1 1 8rem; padding: 0.65rem 0.9rem; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); }
.gc-ficha-num dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--suave); font-weight: 600; }
.gc-ficha-num dd { margin: 0.15rem 0 0; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.neg { color: var(--perigo) !important; }
.gc-troca-icone { margin: 0; }
.gc-troca-icone label { position: relative; cursor: pointer; display: block; }
.gc-troca-txt { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--texto); box-shadow: var(--sombra); }
.gc-troca-txt .icone { width: 14px; height: 14px; }
.gc-troca-icone label:hover .gc-troca-txt { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }

.gc-imagem-linha { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--linha); flex-wrap: wrap; }
.gc-imagem-previa { width: 56px; height: 56px; border-radius: 14px; border: 1px dashed var(--linha-forte); display: grid; place-items: center; overflow: hidden; background: #fff; flex: none; }
.gc-imagem-previa.logo { width: 130px; }
.gc-imagem-previa img { width: 100%; height: 100%; object-fit: contain; }
.gc-imagem-previa.icone img { object-fit: cover; }
.gc-imagem-previa small { font-size: 0.7rem; color: var(--suave); }
.gc-imagem-txt { flex: 1 1 8rem; } .gc-imagem-txt b { display: block; } .gc-imagem-txt small { display: block; }
.gc-imagem-linha label.botao { flex-direction: row; color: var(--texto); cursor: pointer; }

/* ---------- lista de clientes ---------- */
.gc-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.25rem; }
.gc-chips > a { display: inline-flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--linha-forte); color: var(--texto); font-weight: 500; font-size: 0.875rem; text-decoration: none !important; background: var(--superficie); }
.gc-chips > a small { display: inline; color: var(--suave); font-weight: 600; font-size: 0.75rem; }
.gc-chips > a:hover { background: var(--realce); }
.gc-chips > a.ativo { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.gc-chips > a.ativo small { color: inherit; opacity: .7; }
.gc-busca { margin-left: auto; position: relative; display: flex; align-items: center; }
.gc-busca .icone { position: absolute; left: 0.75rem; width: 18px; height: 18px; color: var(--suave); pointer-events: none; }
.gc-busca input { padding-left: 2.4rem; width: min(280px, 70vw); height: 40px; min-height: 40px; border-radius: 999px; }
@media (max-width: 640px) { .gc-busca { margin-left: 0; width: 100%; } .gc-busca input { width: 100%; } }
.gc-tabela-clientes tbody tr { cursor: pointer; }
.gc-tabela-clientes td:first-child { min-width: 16rem; }
.gc-tabela-clientes td, .gc-tabela-clientes th { white-space: nowrap; }
.gc-tabela-clientes td:first-child small { white-space: normal; }
@media (max-width: 1250px) { .gc-tabela-clientes th:nth-child(3), .gc-tabela-clientes td:nth-child(3), .gc-tabela-clientes th:nth-child(4), .gc-tabela-clientes td:nth-child(4), .gc-tabela-clientes th:nth-child(7), .gc-tabela-clientes td:nth-child(7) { display: none; } }
@media (max-width: 640px) { .gc-tabela-clientes th:nth-child(5), .gc-tabela-clientes td:nth-child(5), .gc-tabela-clientes th:nth-child(6), .gc-tabela-clientes td:nth-child(6) { display: none; } }
.gc-cliente-nome { display: flex; align-items: center; gap: 0.75rem; color: var(--texto); text-decoration: none !important; }
.gc-cliente-nome b { display: block; font-weight: 600; }
.gc-cliente-nome small { display: block; }
.gc-cliente-nome:hover b { color: var(--vermelho); }

/* ---------- cartões de contratação ---------- */
.gc-contratos { display: grid; gap: 1rem; margin-bottom: 1.5rem; }
.gc-contrato { border: 1px solid var(--linha); border-radius: var(--raio-grande); background: var(--superficie); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.gc-contrato:hover { box-shadow: var(--sombra); border-color: var(--linha-forte); }
.gc-contrato.cancelado { opacity: .6; }
.gc-contrato > header { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.25rem; }
.gc-contrato > header > div { flex: 1; min-width: 0; }
.gc-contrato h3 { font-size: 1.02rem; font-weight: 600; }
.gc-contrato h3 a { color: var(--texto); } .gc-contrato h3 a:hover { color: var(--vermelho); }
.gc-termos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0 1.25rem 1rem; }
.gc-termos div { background: var(--superficie-2); border-radius: 12px; padding: 0.7rem 0.9rem; border: 1px solid var(--linha); min-width: 0; }
.gc-termos dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--suave); font-weight: 700; }
.gc-termos dd { margin: 0.2rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.gc-termos dd small { display: inline; font-weight: 500; color: var(--suave); }
.gc-termos .perto { border-color: color-mix(in srgb, var(--dourado) 45%, var(--linha)); background: var(--dourado-suave); }
.gc-termos .atrasado { border-color: var(--vermelho-linha); background: var(--perigo-suave); }
.gc-contrato > footer { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.85rem 1.25rem; border-top: 1px solid var(--linha); background: var(--superficie-2); }
.gc-margem { margin-left: auto; font-size: 0.875rem; color: var(--suave); }
.gc-margem b { color: var(--verde); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .gc-termos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gc-termos { grid-template-columns: 1fr; } .gc-margem { margin-left: 0; width: 100%; } }
.gc-contratar { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; padding: 1.1rem 1.25rem; border: 1px dashed var(--linha-forte); border-radius: var(--raio-grande); background: var(--superficie-2); }
.gc-contratar label { flex: 1 1 18rem; margin: 0; }
.gc-contratar .botao { height: 44px; }
.gc-ligar { margin-top: 0.5rem; align-items: stretch; }
.gc-novo-cartao { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.25rem; border: 1px dashed var(--vermelho-linha); border-radius: var(--raio-grande); color: var(--texto); text-decoration: none !important; background: var(--vermelho-suave); }
.gc-novo-cartao .icone { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--vermelho); color: #fff; stroke-width: 2.4; }
.gc-novo-cartao b { display: block; } .gc-novo-cartao small { display: block; }
.gc-novo-cartao:hover b { color: var(--vermelho); }
.gc-faixa-marca, [data-theme="dark"] .gc-faixa-marca { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--raio-grande); background: var(--superficie-2); border: 1px solid var(--linha); color: var(--texto); text-decoration: none !important; }
.gc-faixa-marca b { display: block; } .gc-faixa-marca small { display: block; color: var(--suave); }
.gc-faixa-ir { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--vermelho); white-space: nowrap; }
.gc-faixa-marca:hover { border-color: var(--vermelho-linha); background: var(--vermelho-suave); color: var(--texto); }

/* listas em cartões (unidades, renovações, marcas) */
.gc-lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gc-lista-cartoes > li > a { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem; border: 1px solid var(--linha); border-radius: 12px; color: var(--texto); text-decoration: none !important; background: var(--superficie); transition: border-color .15s, background .15s; }
.gc-lista-cartoes > li > a:hover { border-color: var(--linha-forte); background: var(--superficie-2); }
.gc-lista-cartoes > li > a > span:not(.gc-avatar):not(.gc-data) { flex: 1; min-width: 0; }
.gc-lista-cartoes b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-lista-cartoes small { display: block; }
.gc-lista-cartoes em { font-style: normal; font-size: 0.8125rem; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-lista-cartoes .icone { width: 18px; height: 18px; color: var(--suave); }
.gc-lista-cartoes.compacta > li > a { padding: 0.6rem 0.75rem; }
.gc-lista-cartoes li.perto > a { border-color: color-mix(in srgb, var(--dourado) 45%, var(--linha)); }
.gc-lista-cartoes li.atrasado > a { border-color: var(--vermelho-linha); background: var(--perigo-suave); }
.gc-data { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; align-content: center; flex: none; background: var(--superficie-2); border: 1px solid var(--linha); line-height: 1; }
.gc-data b { font-family: var(--fonte-titulo); font-size: 1rem; }
.gc-data small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.perto .gc-data { background: var(--dourado-suave); border-color: transparent; color: var(--dourado-texto); }
.atrasado .gc-data { background: var(--vermelho); border-color: transparent; color: #fff; } .atrasado .gc-data small { color: #fff; }

/* ---------- marcas e árvore ---------- */
.gc-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.85rem; margin-bottom: 1.75rem; }
.gc-marca { display: flex; flex-direction: column; gap: 0.85rem; padding: 1rem; border: 1px solid var(--linha); border-radius: var(--raio-grande); background: var(--superficie); color: var(--texto); text-decoration: none !important; transition: border-color .15s, box-shadow .15s, transform .15s; }
.gc-marca:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); transform: translateY(-2px); color: var(--texto); }
.gc-marca.ativa { border-color: var(--vermelho); box-shadow: 0 0 0 1px var(--vermelho); }
.gc-marca-logo { height: 92px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 0.75rem; border: 1px solid var(--linha); overflow: hidden; }
.gc-marca-logo img { width: auto; height: auto; max-width: 100%; max-height: 68px; object-fit: contain; }
.gc-marca-logo b { font-family: var(--fonte-titulo); font-size: 1.6rem; color: #111; }
.gc-marca-nome b { display: block; font-family: var(--fonte-titulo); font-weight: 600; }
.gc-marca-nome small { display: block; }

.gc-arvore-bloco { margin-bottom: 2rem; }
.gc-arvore-barra { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.gc-arvore-barra h2 { margin: 0; display: flex; align-items: center; gap: 0.5rem; font-size: 1.05rem; }
.gc-arvore-barra h2 .icone { color: var(--vermelho); }
.gc-arvore { padding: 1.25rem; border: 1px solid var(--linha); border-radius: var(--raio-grande); overflow-x: auto;
  background: radial-gradient(color-mix(in srgb, var(--texto) 9%, transparent) 1px, transparent 1.3px) 0 0 / 20px 20px, var(--superficie-2); }
.gc-arvore ul { list-style: none; margin: 0; padding: 0; position: relative; }
.gc-arvore > ul { margin-left: 15px; padding-left: 1.6rem; max-width: 920px; }
.gc-arvore li { position: relative; padding-top: 0.6rem; }
.gc-arvore li > ul { margin-left: 15px; padding-left: 1.6rem; }
.gc-arvore ul > li::before { content: ""; position: absolute; left: -1.6rem; top: 0; bottom: 0; border-left: 2px solid var(--linha-forte); }
.gc-arvore ul > li:last-child::before { bottom: auto; height: calc(0.6rem + 26px); }
.gc-arvore ul > li::after { content: ""; position: absolute; left: -1.6rem; top: calc(0.6rem + 26px); width: 1.6rem; border-top: 2px solid var(--linha-forte); }
.gc-arvore li.fechado > ul, .gc-arvore.fechada > ul { display: none; }
.gc-no-linha { display: flex; align-items: center; gap: 0.4rem; }
.gc-no-linha.raiz { max-width: 960px; }
.gc-abre { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--linha-forte); background: var(--superficie); color: var(--texto); display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; position: relative; z-index: 1; transition: background .15s, transform .15s; }
.gc-abre .icone { width: 16px; height: 16px; transition: transform .18s; }
.gc-abre:hover { background: var(--vermelho-suave); border-color: var(--vermelho-linha); color: var(--vermelho); }
.gc-abre[aria-expanded="false"] .icone { transform: rotate(-90deg); }
.gc-abre.vazio { border: 0; background: none; cursor: default; width: 8px; }
.gc-no { flex: 1; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem 0.55rem 0.55rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); color: var(--texto); text-decoration: none !important; min-height: 52px; min-width: 0; transition: border-color .15s, box-shadow .15s, transform .12s; }
a.gc-no:hover { border-color: var(--vermelho); box-shadow: var(--sombra); transform: translateX(2px); color: var(--texto); }
.gc-no.inativo { opacity: .55; }
.gc-no-txt { flex: 1; min-width: 0; }
.gc-no-txt b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-no-txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-no-info { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.gc-no-info em { font-style: normal; font-size: 0.78rem; color: var(--suave); white-space: nowrap; font-variant-numeric: tabular-nums; }
.gc-no-raiz, [data-theme="dark"] .gc-no-raiz { padding: 0.75rem 1rem 0.75rem 0.75rem; background: var(--superficie); border: 1px solid var(--linha-forte); box-shadow: inset 3px 0 0 var(--vermelho); }
.gc-no-raiz .gc-no-txt b { font-family: var(--fonte-titulo); font-size: 1.12rem; }
.gc-no-sistema .gc-sigla { width: 38px; height: 38px; font-size: 0.78rem; }
.gc-no-cliente { min-height: 46px; padding: 0.45rem 0.75rem 0.45rem 0.5rem; }
.gc-no-cliente .selo { font-size: 0.68rem; }
@media (max-width: 640px) {
  .gc-no-info em, .gc-no-cliente .gc-online { display: none; }
  .gc-arvore > ul { margin-left: 8px; padding-left: 1.1rem; } .gc-arvore li > ul { margin-left: 8px; padding-left: 1.1rem; }
  .gc-arvore ul > li::before, .gc-arvore ul > li::after { left: -1.1rem; } .gc-arvore ul > li::after { width: 1.1rem; }
  .gc-no-cliente .selo { display: none; } .gc-no-raiz .botao { display: none; }
}

/* está no ar? */
.gc-online { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--suave); white-space: nowrap; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--realce); }
.gc-online i { width: 8px; height: 8px; border-radius: 50%; background: var(--linha-forte); }
.gc-online.ok { color: var(--verde); background: var(--verde-suave); } .gc-online.ok i { background: var(--verde); box-shadow: 0 0 0 3px color-mix(in srgb, var(--verde) 25%, transparent); }
.gc-online.fora { color: var(--perigo); background: var(--perigo-suave); } .gc-online.fora i { background: var(--perigo); }
.testando .gc-online i { animation: gc-pisca .8s ease-in-out infinite; }
@keyframes gc-pisca { 50% { opacity: .2; } }
.gc-bt-online { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- painel de controle ---------- */
.gc-painel-topo, [data-theme="dark"] .gc-painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.2rem 1.4rem; border-radius: var(--raio-grande); margin-bottom: 1rem;
  background: radial-gradient(420px 180px at 100% 0, color-mix(in srgb, var(--vermelho) 8%, transparent), transparent 70%), var(--superficie);
  border: 1px solid var(--linha); position: relative; color: var(--texto); }
.gc-painel-topo::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 16px 0 0 16px; background: var(--vermelho); }
.gc-painel-quem { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.gc-painel-quem h2 { margin: 0; font-size: 1.3rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; color: var(--texto); }
.gc-painel-quem p { margin: 0.2rem 0 0; color: var(--suave); }
.gc-painel-quem p a { color: var(--texto); font-weight: 600; }
.gc-painel-topo .linha-botoes { gap: 0.5rem; }
.gc-menu-acoes { position: relative; }
.gc-menu-acoes summary { list-style: none; cursor: pointer; }
.gc-menu-acoes summary::-webkit-details-marker { display: none; }
.gc-menu-acoes .menu-suspenso { right: 0; min-width: 210px; z-index: 20; }
.gc-menu-acoes .menu-suspenso form { margin: 0; }
.gc-menu-acoes .menu-suspenso button { width: 100%; text-align: left; background: none; border: 0; padding: 0.55rem 0.75rem; border-radius: 8px; font: inherit; color: var(--texto); cursor: pointer; }
.gc-menu-acoes .menu-suspenso button:hover { background: var(--realce); }

.gc-kpis { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; }
.gc-kpis li { min-width: 0; }
.gc-kpis li > a, .gc-kpis li:not(:has(> a)) { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.95rem 1.05rem; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); height: 100%; color: var(--texto); text-decoration: none !important; }
.gc-kpis li > a:hover { border-color: var(--linha-forte); box-shadow: var(--sombra); }
.gc-kpis span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--suave); font-weight: 700; }
.gc-kpis b { font-family: var(--fonte-titulo); font-size: 1.28rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.gc-kpis small { font-size: 0.78rem; }
.gc-kpis li.pos b { color: var(--verde); }
.gc-kpis li.neg:not(:has(> a)) { border-color: var(--vermelho-linha); background: var(--perigo-suave); }
.gc-kpis li.neg b { color: var(--perigo); }
.gc-kpis li.perto:not(:has(> a)) { border-color: color-mix(in srgb, var(--dourado) 45%, var(--linha)); background: var(--dourado-suave); }
@media (max-width: 1100px) { .gc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gc-kpis b { font-size: 1.08rem; } }
.gc-tabela-custos tfoot small { display: block; color: var(--suave); }
.gc-implantacao .gc-cartao { margin: 0; }
.gc-passos { list-style: none; counter-reset: p; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.75rem; }
.gc-passos li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; column-gap: 0.75rem; align-items: start; }
.gc-passos li::before { content: counter(p); grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; background: var(--vermelho-suave); color: var(--vermelho); display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; font-family: var(--fonte-titulo); }
.gc-passos b { display: block; } .gc-passos span { color: var(--suave); font-size: 0.875rem; }
.gc-marcar { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; padding-top: 1rem; border-top: 1px solid var(--linha); }
.gc-marcar label { flex: 1 1 10rem; margin: 0; }
.gc-marcar .botao { height: 44px; }
.gc-texto-alerta { color: var(--dourado-texto); }

/* ---------- dashboard ---------- */
.gc-boasvindas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.gc-boasvindas h2 { font-size: 1.3rem; margin: 0; }
.gc-boasvindas p { margin: 0.15rem 0 0; color: var(--suave); }
.gc-roteiro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.gc-roteiro li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.75rem; font-size: 0.875rem; padding: 0.5rem 0; border-bottom: 1px solid var(--linha); }
.gc-roteiro li:last-child { border-bottom: 0; }
.gc-roteiro b { font-weight: 600; }
.gc-roteiro b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho); margin-right: 0.5rem; vertical-align: middle; }
.gc-roteiro li.feito b::before { background: var(--verde); }
.gc-roteiro span { color: var(--suave); }
@media (max-width: 480px) { .gc-roteiro li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* janela de confirmação */
.gc-confirmar { width: min(400px, calc(100vw - 2rem)); text-align: center; }
.gc-confirmar .dialogo-corpo { padding: 1.75rem; }
.gc-confirmar h2 { margin: 0.75rem 0 0.4rem; }
.gc-confirmar p { color: var(--suave); margin: 0 0 1.25rem; }
.gc-confirmar .linha-botoes { justify-content: center; }
.gc-confirmar-ic { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--perigo-suave); color: var(--perigo); font-weight: 800; font-size: 1.5rem; font-family: var(--fonte-titulo); }

/* celular */
@media (max-width: 760px) {
  .conteudo { margin: 0; border-radius: 0; border-left: 0; border-right: 0; padding: 1.5rem 1rem 2.5rem; }
  .conteudo > h1 { flex-wrap: wrap; }
  .gc-ficha { padding: 1.1rem; gap: 0.9rem; }
  .gc-painel-topo { padding: 1.1rem; }
  .gc-cartao-form, .gc-cartao { padding: 1.1rem; }
}

/* botões discretos (Ligar e Desligar) */
.gc-bt-sutil { display: inline-flex; align-items: center; gap: 0.35rem; height: 34px; padding: 0 0.75rem; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--suave); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.gc-bt-sutil .icone { width: 16px; height: 16px; }
.gc-bt-sutil:hover { background: var(--realce); color: var(--texto); border-color: var(--linha); }
.gc-bt-sutil.perigo:hover { background: var(--perigo-suave); color: var(--perigo); border-color: var(--vermelho-linha); }
.gc-contratar .gc-bt-sutil { height: 44px; border-color: var(--linha-forte); background: var(--superficie); color: var(--texto); }
.gc-contratar .gc-bt-sutil:hover { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-suave); }
@media (max-width: 640px) { .gc-no-sistema .gc-no-info { display: none; } }

/* ======================================================================
   0.03 — VIDRO CINZA MODERNO + CORES QUE COMBINAM
   Cinza-azulado (estilo slate), painéis de vidro translúcido sobre um fundo
   com manchas de cor bem suaves. Logo da Garon com o fundo preto original.
   Botões coloridos: azul (ação principal), verde-água (abrir/ver), vermelho
   da marca (criar novo), âmbar e violeta em números e etiquetas.
   ====================================================================== */
:root, [data-theme="light"] {
  --fundo: #EDEFF3;
  --superficie: #FFFFFF;
  --superficie-2: #F7F8FA;
  --realce: #EEF1F5;
  --texto: #0F172A;
  --suave: #64748B;
  --linha: rgba(15, 23, 42, .08);
  --linha-forte: rgba(15, 23, 42, .15);
  --vidro: rgba(255, 255, 255, .58);
  --vidro-conteudo: rgba(255, 255, 255, .80);
  --vidro-borda: rgba(255, 255, 255, .75);

  --acao: #2563EB;            /* azul: salvar, painel de controle, ação principal */
  --acao-forte: #1D4ED8;
  --acao-suave: #EAF1FF;
  --ver: #0E9F8E;             /* verde-água: abrir sistema, ver, testar */
  --ver-forte: #0B8273;
  --ver-suave: #E3F7F4;
  --violeta: #7C3AED;
  --violeta-suave: #F1EBFE;
  --ambar: #D97706;
  --ambar-suave: #FEF3E2;
  --roxo: #2563EB; --roxo-suave: #EAF1FF;

  --botao: var(--acao);
  --botao-hover: var(--acao-forte);
  --botao-texto: #FFFFFF;
  --azul: #2563EB;            /* links e foco em azul; o vermelho fica para a marca e o "Novo" */
  --azul-forte: #1D4ED8;
  --azul-suave: #EAF1FF;
  --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .06);
}
[data-theme="dark"] {
  --fundo: #0B0F17;
  --superficie: #131925;
  --superficie-2: #171E2B;
  --realce: #1E2634;
  --texto: #E6EAF2;
  --suave: #94A0B4;
  --linha: rgba(255, 255, 255, .07);
  --linha-forte: rgba(255, 255, 255, .13);
  --vidro: rgba(23, 30, 43, .55);
  --vidro-conteudo: rgba(19, 25, 37, .78);
  --vidro-borda: rgba(255, 255, 255, .08);

  --acao: #4F8BFF; --acao-forte: #78A6FF; --acao-suave: #16243F;
  --ver: #2CC5B1; --ver-forte: #5AD8C7; --ver-suave: #0E2A28;
  --violeta: #A78BFA; --violeta-suave: #221A3A;
  --ambar: #F5A524; --ambar-suave: #2B200C;
  --roxo: #4F8BFF; --roxo-suave: #16243F;
  --botao: var(--acao); --botao-hover: var(--acao-forte); --botao-texto: #0B0F17;
  --azul: #78A6FF; --azul-forte: #9DBEFF; --azul-suave: #16243F;
}

/* fundo com manchas de cor bem suaves (é o que aparece através do vidro) */
body, [data-theme="dark"] body {
  background:
    radial-gradient(900px 620px at -5% -10%, rgba(37, 99, 235, .10), transparent 60%),
    radial-gradient(800px 560px at 105% -5%, rgba(224, 30, 46, .08), transparent 60%),
    radial-gradient(900px 700px at 50% 115%, rgba(14, 159, 142, .08), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background:
    radial-gradient(900px 620px at -5% -10%, rgba(79, 139, 255, .14), transparent 60%),
    radial-gradient(800px 560px at 105% -5%, rgba(255, 61, 76, .10), transparent 60%),
    radial-gradient(900px 700px at 50% 115%, rgba(44, 197, 177, .08), transparent 60%),
    var(--fundo);
  background-attachment: fixed;
}

/* topo e menu de vidro cinza */
.topo, [data-theme="dark"] .topo {
  background: var(--vidro); border-bottom: 1px solid var(--vidro-borda);
  box-shadow: 0 1px 0 var(--linha); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.topo::before { content: none; }
.lateral, [data-theme="dark"] .lateral {
  background: var(--vidro); border-right: 1px solid var(--vidro-borda);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.conteudo, [data-theme="dark"] .conteudo {
  background: var(--vidro-conteudo); border: 1px solid var(--vidro-borda); box-shadow: var(--sombra);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
/* logo da Garon com o fundo preto original, em selo arredondado */
.topo .logo-horizontal { height: 40px; border-radius: 10px; box-shadow: 0 2px 8px rgba(15, 23, 42, .18); }
.tela-entrada .entrada-logo .logo-completo { border-radius: 16px; box-shadow: 0 12px 32px rgba(15, 23, 42, .25); width: min(300px, 78vw); }

/* menu: item ativo em vidro branco, ícone vermelho da marca */
.lateral nav a { color: var(--texto); }
.lateral nav a:hover { background: rgba(255, 255, 255, .55); }
[data-theme="dark"] .lateral nav a:hover { background: rgba(255, 255, 255, .05); }
.lateral nav a.ativo { background: var(--superficie); color: var(--texto); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .06); }
[data-theme="dark"] .lateral nav a.ativo { background: rgba(255, 255, 255, .08); box-shadow: none; }
.lateral nav a.ativo::before { background: linear-gradient(180deg, var(--vermelho), #FF6B4A); }
.lateral nav a.ativo .icone { color: var(--vermelho); }
.topo .botao-tema { background: rgba(255, 255, 255, .6); border-color: var(--linha); }
[data-theme="dark"] .topo .botao-tema { background: rgba(255, 255, 255, .06); }
.avatar, [data-theme="dark"] .avatar { background: linear-gradient(135deg, var(--acao), var(--violeta)); color: #fff; }

/* botões coloridos */
.botao { background: var(--acao); color: #fff; border-color: transparent; box-shadow: 0 1px 2px rgba(15, 23, 42, .08); }
.botao:hover { background: var(--acao-forte); color: #fff; }
[data-theme="dark"] .botao { color: #0B0F17; } [data-theme="dark"] .botao:hover { color: #0B0F17; }
.botao.secundario { background: rgba(255, 255, 255, .85); color: var(--texto); border-color: var(--linha-forte); box-shadow: none; }
.botao.secundario:hover { background: #fff; border-color: var(--acao); color: var(--acao); }
[data-theme="dark"] .botao.secundario { background: rgba(255, 255, 255, .04); color: var(--texto); }
[data-theme="dark"] .botao.secundario:hover { background: rgba(255, 255, 255, .08); color: var(--azul); }
.botao.ver { background: var(--ver); } .botao.ver:hover { background: var(--ver-forte); }
.gc-bt-novo, [data-theme="dark"] .gc-bt-novo { background: linear-gradient(135deg, #E01E2E, #FF5A3D); color: #fff; box-shadow: 0 8px 20px rgba(224, 30, 46, .22); }
.gc-bt-novo:hover { background: linear-gradient(135deg, #C81827, #F04A2E); color: #fff; }
.gc-painel-topo .botao:not(.secundario) { background: var(--ver); color: #fff; }
.gc-painel-topo .botao:not(.secundario):hover { background: var(--ver-forte); }
.gc-contrato footer .botao.secundario:hover { border-color: var(--ver); color: var(--ver); }
.gc-login .botao { background: linear-gradient(135deg, #E01E2E, #FF5A3D); }
.gc-login .botao:hover { background: linear-gradient(135deg, #C81827, #F04A2E); }
input:focus, select:focus, textarea:focus { border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 16%, transparent); }
input[type=checkbox], input[type=radio] { accent-color: var(--acao); }
.gc-opcao:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); box-shadow: inset 0 0 0 1px var(--acao); }
.abas a.ativa { border-bottom-color: var(--acao); color: var(--texto); }
.abas a.ativa .contador-aba { background: var(--acao); color: #fff; }
.gc-chips > a.ativo { background: var(--acao); border-color: var(--acao); color: #fff; }
.gc-abre:hover { background: var(--acao-suave); border-color: var(--acao); color: var(--acao); }
a.gc-no:hover { border-color: var(--acao); }
.gc-marca.ativa { border-color: var(--acao); box-shadow: 0 0 0 1px var(--acao), var(--sombra); }
.gc-contratar .gc-bt-sutil:hover { border-color: var(--acao); color: var(--acao); background: var(--acao-suave); }
.gc-passos li::before { background: var(--acao-suave); color: var(--acao); }
.h1-icone { background: linear-gradient(135deg, var(--acao-suave), var(--violeta-suave)); color: var(--acao); }

/* cartões e vidro */
.gc-cartao, .gc-cartao-form, .gc-ficha, .gc-contrato, .gc-painel-topo, .gc-marca, .gc-kpis li > a, .gc-kpis li:not(:has(> a)), .tabela, .gc-no, .gc-lista-cartoes > li > a {
  background-color: var(--superficie); border-color: var(--linha);
}
.gc-ficha::before, .gc-painel-topo::before { background: linear-gradient(180deg, var(--vermelho), #FF6B4A); }
.gc-no-raiz { box-shadow: inset 3px 0 0 var(--vermelho); }
.gc-painel-topo, [data-theme="dark"] .gc-painel-topo { background: radial-gradient(460px 200px at 100% 0, color-mix(in srgb, var(--acao) 9%, transparent), transparent 70%), var(--superficie); }
.gc-arvore { background: radial-gradient(color-mix(in srgb, var(--texto) 8%, transparent) 1px, transparent 1.3px) 0 0 / 20px 20px, var(--superficie-2); }

/* números com uma corzinha cada (azul, violeta, verde, âmbar, verde-água) */
.gc-kpis li { --kc: var(--acao); }
.gc-kpis li:nth-child(2) { --kc: var(--violeta); }
.gc-kpis li:nth-child(3) { --kc: var(--verde); }
.gc-kpis li:nth-child(4) { --kc: var(--ambar); }
.gc-kpis li:nth-child(5) { --kc: var(--ver); }
.gc-kpis li > a, .gc-kpis li:not(:has(> a)) { position: relative; overflow: hidden; }
.gc-kpis li > a::before, .gc-kpis li:not(:has(> a))::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--kc); opacity: .85; }
.gc-kpis span { color: color-mix(in srgb, var(--kc) 70%, var(--suave)); }
.gc-termos div { border-left: 3px solid var(--acao); }
.gc-termos div:nth-child(2) { border-left-color: var(--violeta); }
.gc-termos div:nth-child(3) { border-left-color: var(--ver); }
.gc-termos div:nth-child(4) { border-left-color: var(--ambar); }

/* sigla de cada sistema numa cor (gc-cor-1 a 6) */
.gc-sigla { box-shadow: none; color: #fff; background: #334155; }
.gc-sigla.gc-cor-1 { background: linear-gradient(135deg, #2563EB, #4F8BFF); }
.gc-sigla.gc-cor-2 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.gc-sigla.gc-cor-3 { background: linear-gradient(135deg, #0E9F8E, #2CC5B1); }
.gc-sigla.gc-cor-4 { background: linear-gradient(135deg, #D97706, #F5A524); }
.gc-sigla.gc-cor-5 { background: linear-gradient(135deg, #E01E2E, #FF5A3D); }
.gc-sigla.gc-cor-6 { background: linear-gradient(135deg, #334155, #64748B); }
.gc-tag.tag-unidade { background: var(--violeta-suave); color: var(--violeta); }
.gc-tag.tag-versao, .gc-tag.tag-garon { background: var(--acao-suave); color: var(--acao); }
.gc-novo-cartao { border-color: color-mix(in srgb, var(--vermelho) 35%, transparent); }
.gc-novo-cartao .icone { background: linear-gradient(135deg, #E01E2E, #FF5A3D); }
.gc-faixa-ir { color: var(--acao); }
.gc-faixa-marca:hover { border-color: var(--acao); background: var(--acao-suave); }
.gc-roteiro b::before { background: var(--acao); }
.selo-em_andamento { background: var(--acao-suave); color: var(--acao); }

/* ícone do sistema = ícone da marca + sigla colorida no canto */
.gc-sis-ic { position: relative; width: 40px; height: 40px; flex: none; display: inline-block; }
.gc-sis-ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.gc-sis-ic .gc-sigla-mini { position: absolute; right: -6px; bottom: -5px; min-width: 22px; height: 18px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-size: 0.6rem; font-weight: 700; color: #fff; border: 2px solid var(--superficie); letter-spacing: 0.02em; }
.gc-sis-ic.grande { width: 72px; height: 72px; }
.gc-sis-ic.grande img { border-radius: 18px; }
.gc-sis-ic.grande .gc-sigla-mini { min-width: 30px; height: 24px; font-size: 0.75rem; border-radius: 8px; right: -8px; bottom: -6px; }
.gc-sigla-mini.gc-cor-1 { background: linear-gradient(135deg, #2563EB, #4F8BFF); } .gc-sigla-mini.gc-cor-2 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
.gc-sigla-mini.gc-cor-3 { background: linear-gradient(135deg, #0E9F8E, #2CC5B1); } .gc-sigla-mini.gc-cor-4 { background: linear-gradient(135deg, #D97706, #F5A524); }
.gc-sigla-mini.gc-cor-5 { background: linear-gradient(135deg, #E01E2E, #FF5A3D); } .gc-sigla-mini.gc-cor-6 { background: linear-gradient(135deg, #334155, #64748B); }
.gc-no-sistema .gc-sis-ic { width: 38px; height: 38px; }

/* nome da unidade em destaque no cadastro (letra cheia e grande) */
.gc-destaque-nome { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--acao-suave), var(--violeta-suave)); border: 1px solid var(--linha); }
.gc-destaque-nome .gc-avatar { width: 52px; height: 52px; border-radius: 14px; }
.gc-destaque-nome > div { flex: 1; min-width: 0; }
.gc-destaque-nome small { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--suave); }
.gc-destaque-nome strong { display: block; font-family: var(--fonte-titulo); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; color: var(--texto); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.gc-destaque-nome strong:empty::before { content: attr(data-vazio); color: var(--linha-forte); }
.gc-grade label.gc-nome-forte > input { font-family: var(--fonte-titulo); font-size: 1.1rem; font-weight: 700; height: 44px; }

/* ======================================================================
   0.04 — SUPORTE: quadro de chamados (pipeline) e conversa
   ====================================================================== */
.gc-filtros-linha { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.1rem; }
.gc-filtros-linha .gc-busca { margin-left: 0; }
.gc-filtros-linha select { width: auto; min-width: 12rem; height: 40px; min-height: 40px; }
.gc-quadro { display: grid; grid-template-columns: repeat(5, minmax(180px, 1fr)); gap: 0.7rem; overflow-x: auto; padding-bottom: 0.5rem; align-items: start; }
.conteudo:has(.gc-quadro) > * { max-width: none; }
.gc-coluna { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 16px; padding: 0.7rem; min-height: 320px; transition: background .15s, border-color .15s; --cc: var(--suave); }
.gc-coluna.col-novo { --cc: var(--vermelho); } .gc-coluna.col-atendimento { --cc: var(--acao); } .gc-coluna.col-aguardando { --cc: var(--ambar); }
.gc-coluna.col-resolvido { --cc: var(--verde); } .gc-coluna.col-fechado { --cc: var(--suave); }
.gc-coluna > header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.2rem 0.3rem 0.7rem; border-bottom: 2px solid var(--cc); margin-bottom: 0.7rem; }
.gc-coluna > header b { font-family: var(--fonte-titulo); font-size: 0.92rem; }
.gc-coluna > header small { flex-basis: 100%; font-size: 0.72rem; }
.gc-coluna.sobre { background: color-mix(in srgb, var(--cc) 8%, var(--superficie-2)); border-color: var(--cc); }
.gc-coluna-lista { display: flex; flex-direction: column; gap: 0.6rem; min-height: 240px; }
.gc-chamado { display: block; background: var(--superficie); border: 1px solid var(--linha); border-radius: 13px; padding: 0.7rem 0.8rem 0.75rem; color: var(--texto); text-decoration: none !important; cursor: grab; position: relative;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: box-shadow .15s, transform .12s, border-color .15s; border-left: 3px solid var(--linha-forte); }
.gc-chamado:hover { box-shadow: var(--sombra); border-color: var(--linha-forte); color: var(--texto); transform: translateY(-1px); }
.gc-chamado.prio-critico { border-left-color: var(--vermelho); } .gc-chamado.prio-importante { border-left-color: var(--ambar); } .gc-chamado.prio-comum { border-left-color: var(--acao); }
.gc-chamado.arrastando { opacity: .45; transform: rotate(1.5deg); }
.gc-chamado-topo { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.35rem; }
.gc-proto { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.72rem; color: var(--suave); font-weight: 600; }
.gc-nao-lidas { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--vermelho); color: #fff; font-size: 0.7rem; font-weight: 700; display: inline-grid; place-items: center; }
.gc-chamado-titulo { display: block; font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.gc-chamado-msg { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--suave); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-chamado-pe { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; min-width: 0; }
.gc-chamado-quem { font-size: 0.78rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-chamado-quem small { display: block; font-weight: 500; font-size: 0.7rem; overflow: hidden; text-overflow: ellipsis; }
.gc-desconhecido { background: var(--ver-suave) !important; color: var(--ver) !important; }
.gc-desconhecido .icone { width: 16px; height: 16px; }
.gc-avatar.grande.gc-desconhecido .icone { width: 32px; height: 32px; }
.gc-prio { display: inline-flex; align-items: center; height: 20px; padding: 0 0.5rem; border-radius: 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.gc-prio.prio-critico { background: var(--perigo-suave); color: var(--vermelho); }
.gc-prio.prio-importante { background: var(--ambar-suave); color: var(--ambar); }
.gc-prio.prio-comum { background: var(--acao-suave); color: var(--acao); }
.gc-prazo { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 600; color: var(--suave); }
.gc-prazo .icone { width: 14px; height: 14px; }
.gc-prazo.ok { color: var(--verde); } .gc-prazo.perto { color: var(--ambar); } .gc-prazo.atrasado { color: var(--vermelho); }
.gc-chamado .gc-prazo { margin-top: 0.55rem; }
.gc-etapa { display: inline-flex; align-items: center; height: 22px; padding: 0 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: var(--realce); color: var(--suave); }
.gc-etapa.et-novo { background: var(--perigo-suave); color: var(--vermelho); } .gc-etapa.et-atendimento { background: var(--acao-suave); color: var(--acao); }
.gc-etapa.et-aguardando { background: var(--ambar-suave); color: var(--ambar); } .gc-etapa.et-resolvido { background: var(--verde-suave); color: var(--verde); }
.gc-linha-clicavel { cursor: pointer; }
.gc-prioridades { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.gc-prioridades legend { font-size: 0.8125rem; font-weight: 600; color: var(--suave); padding: 0; margin-bottom: 0.35rem; }
.gc-prioridades .gc-opcao small { font-size: 0.72rem; }
.prio-op-critico:has(input:checked) { border-color: var(--vermelho); background: var(--perigo-suave); box-shadow: inset 0 0 0 1px var(--vermelho); }
.prio-op-importante:has(input:checked) { border-color: var(--ambar); background: var(--ambar-suave); box-shadow: inset 0 0 0 1px var(--ambar); }
.gc-grade.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gc-grade.g3 .c3 { grid-column: 1 / -1; }
.gc-lista-info { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.gc-lista-info li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--linha); font-size: 0.875rem; }
.gc-lista-info li span { color: var(--suave); }
@media (max-width: 900px) { .gc-prioridades, .gc-grade.g3 { grid-template-columns: 1fr; } }

/* página do chamado */
.gc-chamado-topo-pag .gc-painel-quem h2 { font-size: 1.2rem; }
.gc-chamado-topo-pag .gc-ficha-tags { margin-top: 0.45rem; }
.gc-chamado-grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .gc-chamado-grade { grid-template-columns: 1fr; } }
.gc-conversa { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.gc-msgs { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.8rem; max-height: 62vh; min-height: 260px; overflow-y: auto;
  background: radial-gradient(color-mix(in srgb, var(--texto) 5%, transparent) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--superficie-2); }
.gc-msg { max-width: 78%; display: flex; flex-direction: column; gap: 0.25rem; }
.gc-msg.cliente { align-self: flex-start; }
.gc-msg.equipe, .gc-msg.nota { align-self: flex-end; align-items: flex-end; }
.gc-bolha { padding: 0.65rem 0.85rem; border-radius: 14px; line-height: 1.45; font-size: 0.92rem; overflow-wrap: anywhere; }
.gc-msg.cliente .gc-bolha { background: var(--superficie); border: 1px solid var(--linha); border-bottom-left-radius: 4px; }
.gc-msg.equipe .gc-bolha { background: var(--acao); color: #fff; border-bottom-right-radius: 4px; }
[data-theme="dark"] .gc-msg.equipe .gc-bolha { color: #0B0F17; }
.gc-msg.nota .gc-bolha { background: var(--ambar-suave); color: var(--texto); border: 1px dashed var(--ambar); border-bottom-right-radius: 4px; }
.gc-msg small { font-size: 0.72rem; }
.gc-msg-sis { align-self: center; text-align: center; }
.gc-msg-sis span { display: inline-block; font-size: 0.72rem; color: var(--suave); background: var(--superficie); border: 1px solid var(--linha); padding: 0.2rem 0.65rem; border-radius: 999px; }
.gc-ok { color: var(--verde); font-weight: 600; } .gc-erro { color: var(--vermelho); font-weight: 600; cursor: help; }
.gc-responder { padding: 0.9rem 1rem 1rem; border-top: 1px solid var(--linha); display: grid; gap: 0.7rem; }
.gc-responder textarea { width: 100%; resize: vertical; }
.gc-responder-pe { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.gc-responder-pe .gc-check { min-height: 0; font-size: 0.85rem; }
.gc-responder-pe .gc-check small { display: inline; }
.gc-responder-pe select { width: auto; height: 40px; min-height: 40px; margin-left: auto; }
.gc-responder-pe .botao { height: 40px; min-height: 40px; }
.gc-chamado-lado .gc-cartao { margin-bottom: 1rem; padding: 1.1rem 1.2rem; }
.gc-chamado-lado .gc-grade { row-gap: 1.1rem; }
.gc-contratar.sem-borda { border: 0; padding: 0; background: none; }
.gc-atalhos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.gc-atalhos li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.55rem; border: 1px solid var(--linha); border-radius: 12px; }
.gc-atalhos li > span:not(.gc-sis-ic):not(.gc-sigla):not(.gc-atalhos-bts) { flex: 1; min-width: 0; }
.gc-atalhos b { display: block; font-size: 0.875rem; } .gc-atalhos small { display: block; font-size: 0.72rem; }
.gc-atalhos-bts { display: flex; gap: 0.1rem; }
.gc-atalhos-bts .gc-bt-sutil { width: 32px; padding: 0; justify-content: center; }
.gc-atalhos .gc-sis-ic, .gc-atalhos .gc-sigla { width: 34px; height: 34px; }

.gc-coluna > header { flex-wrap: nowrap; position: relative; padding-bottom: 2.1rem; }
.gc-coluna > header b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gc-coluna > header small { position: absolute; left: 0.3rem; right: 0.3rem; bottom: 0.55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-opcao.prio-op-comum:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); box-shadow: inset 0 0 0 1px var(--acao); }
.gc-opcao:not(:has(input:checked)) { background: var(--superficie); box-shadow: none; border-color: var(--linha-forte); }
@media (max-width: 760px) { .gc-quadro { grid-template-columns: repeat(5, 82vw); scroll-snap-type: x mandatory; } .gc-coluna { scroll-snap-align: start; } }

/* ======================================================================
   0.05 — FINANCEIRO: mês, barras, faturas e bloqueio remoto
   ====================================================================== */
.gc-mes-nav { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem; border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie); }
.gc-mes-nav b { font-family: var(--fonte-titulo); font-weight: 600; min-width: 10.5rem; text-align: center; }
.gc-mes-nav .gc-bt-sutil { width: 34px; padding: 0; justify-content: center; }
.gc-mes-nav a:first-child .icone { transform: rotate(180deg); }
.gc-dir { margin-left: auto; }
.gc-sem-margem { margin: 0; }
.gc-resumo-fin { font-size: 0.9rem; color: var(--suave); } .gc-resumo-fin b { color: var(--texto); font-variant-numeric: tabular-nums; }
.gc-barras { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.6rem; align-items: end; height: 200px; padding: 0.5rem 0.25rem 0; border-bottom: 1px solid var(--linha); }
.gc-barra-mes { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: 100%; justify-content: flex-end; }
.gc-barra-par { display: flex; align-items: flex-end; gap: 4px; height: calc(100% - 1.4rem); width: 100%; justify-content: center; }
.gc-barra-par i { display: block; width: min(22px, 40%); min-height: 2px; border-radius: 6px 6px 2px 2px; transition: height .3s; }
.gc-barra-par i.rec, .gc-legenda i.rec { background: linear-gradient(180deg, #4F8BFF, #2563EB); }
.gc-barra-par i.pag, .gc-legenda i.pag { background: linear-gradient(180deg, #FF8A7A, #E01E2E); opacity: .85; }
.gc-barra-mes small { font-size: 0.72rem; }
.gc-barra-mes.atual small { color: var(--texto); font-weight: 700; }
.gc-legenda { display: flex; gap: 1rem; margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--suave); }
.gc-legenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gc-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.gc-tabela-faturas td small.gc-erro { display: block; font-size: 0.74rem; }
.gc-bloqueio-ops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1.25rem; }
.gc-bloqueio-ops .gc-opcao small { font-size: 0.72rem; }
.gc-opcao.op-verde:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); box-shadow: inset 0 0 0 1px var(--verde); }
.gc-opcao.op-ambar:has(input:checked) { border-color: var(--ambar); background: var(--ambar-suave); box-shadow: inset 0 0 0 1px var(--ambar); }
.gc-opcao.op-vermelho:has(input:checked) { border-color: var(--vermelho); background: var(--perigo-suave); box-shadow: inset 0 0 0 1px var(--vermelho); }
.gc-bloqueio h2 .selo { margin-left: auto; }
.gc-campo-copiar { margin-bottom: 0.85rem; }
.gc-campo-copiar input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; background: var(--superficie-2); }
@media (max-width: 900px) { .gc-bloqueio-ops { grid-template-columns: 1fr; } .gc-dir { margin-left: 0; } }
.gc-pilha { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.gc-pilha > .gc-cartao { margin: 0; }
.gc-tabela-faturas td:first-child { min-width: 14rem; }

/* logo simétrico: bloco preto reto, da largura exata do menu lateral, com o logo centralizado */
.topo .logo-horizontal { border-radius: 0; box-shadow: none; height: 38px; }
.tela-entrada .entrada-logo .logo-completo { border-radius: 0; }
@media (min-width: 901px) {
  .topo { padding-left: 0; }
  .topo .marca { align-self: stretch; width: 240px; flex: none; margin: 0; background: #111111; display: flex; align-items: center; justify-content: center; gap: 0; border-right: 1px solid #111111; }
  .topo .marca .marca-unidade { display: none; }
}
@media (max-width: 900px) {
  .topo .marca { background: #111111; align-self: stretch; display: flex; align-items: center; padding: 0 0.75rem; margin: 0 auto 0 0; }
  .topo .logo-horizontal { height: 32px; }
}

/* 0.06 — standby (desativar → reativar ou excluir) */
.gc-standby h2 .icone { color: var(--ambar); }
.gc-standby.ligado { border-color: color-mix(in srgb, var(--ambar) 40%, var(--linha)); background: linear-gradient(135deg, var(--ambar-suave), var(--superficie) 60%); }
.gc-bt-sutil.ok:hover { background: var(--verde-suave); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
.gc-contrato.standby { opacity: 1; border-style: dashed; }
.gc-contrato.standby > header, .gc-contrato.standby .gc-termos { opacity: .6; }
.gc-confirmar-ic.suave { background: var(--ambar-suave); color: var(--ambar); }