/* ==========================================================================
   Geoxvane — design system
   Superfície limpa, hierarquia por tipografia e espaço, cor só onde decide algo.
   Tudo é fluido: nada tem largura fixa que não caiba num celular.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root{
  /* superfícies */
  --superficie:#FFFFFF;
  --superficie-elevada:#FFFFFF;
  --superficie-afundada:#F5F5F7;
  --superficie-sutil:#FAFAFC;

  /* texto */
  --texto:#1D1D1F;
  --texto-sutil:#6E6E73;
  --texto-sutilissimo:#86868B;
  --texto-inverso:#FFFFFF;

  /* traços: separam sem pesar */
  --borda:rgba(0,0,0,.08);
  --borda-forte:rgba(0,0,0,.16);
  --borda-campo:rgba(0,0,0,.14);

  /* ação */
  --marca:#0071E3;
  --marca-hover:#0077ED;
  --marca-ativa:#0062C4;
  --marca-sutil:#F0F7FF;
  --marca-anel:rgba(0,113,227,.28);
  --selecionado:#F0F7FF;
  --selecionado-hover:#E3F0FF;

  /* estados */
  --sucesso-bg:#E8F8EC;  --sucesso-txt:#1D7F3A;  --sucesso-borda:#34C759;
  --atencao-bg:#FFF4E5;  --atencao-txt:#9A5B00;  --atencao-borda:#FF9500;
  --perigo-bg:#FFEEEC;   --perigo-txt:#C4271C;   --perigo-borda:#FF3B30;
  --info-bg:#F0F7FF;     --info-txt:#0062C4;
  --descoberta-bg:#F7F0FF; --descoberta-txt:#7B3FBF;
  --neutro:rgba(0,0,0,.05);
  --neutro-hover:rgba(0,0,0,.08);
  --neutro-forte:#1D1D1F;

  /* acentos usados por contexto e setor */
  --ac-azul:#DCEBFF;  --ac-verde:#D6F5DF;  --ac-laranja:#FFE9CC;
  --ac-roxo:#EEE0FF;  --ac-vermelho:#FFDEDB; --ac-teal:#D2F0F7; --ac-magenta:#FFDCF0;

  /* elevação: sombra é profundidade, não contorno */
  --sombra-1:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  --sombra-2:0 4px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
  --sombra-3:0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);

  /* forma */
  --r-p:8px; --r-m:12px; --r-g:16px; --r-xg:18px; --r-total:980px;

  /* espaço em escala de 4 */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px;

  /* respiro lateral do conteúdo; desce por faixa de tela nas media queries */
  --gutter:32px;

  --fonte:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fonte-titulo:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;
  --fonte-mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;

  --topo-h:56px;
  --lateral-w:248px;

  /* camadas: o que sobe e em que ordem. Número solto no meio do arquivo
     vira disputa que só aparece com a gaveta aberta, então mora aqui. */
  --z-conteudo:1;      /* coluna travada de tabela, marca de seleção */
  --z-sobreposto:5;    /* linha do "agora" na grade do dia */
  --z-flutuante:35;    /* barra de seleção que paira sobre a lista */
  --z-gaveta-fundo:39; /* véu escuro atrás da gaveta */
  --z-gaveta:40;       /* a gaveta da lateral */
  --z-topo:50;         /* a barra fixa do topo */
  --z-popover:60;      /* menus e painéis que saem de um botão */

  /* Movimento no padrão Apple: a curva sai rápido e freia devagar, ao
     contrário da curva do Material que estava aqui antes. Duas durações,
     não uma: 150ms pro que responde ao dedo (hover, foco, cor) e 220ms
     pro que se desloca (painel, modal, gaveta). */
  --ease:cubic-bezier(.28,0,.22,1);
  --transicao:150ms var(--ease);
  --transicao-base:220ms var(--ease);
}

[data-tema="escuro"]{
  --superficie:#1C1C1E;
  --superficie-elevada:#2C2C2E;
  --superficie-afundada:#000000;
  --superficie-sutil:#242426;
  --texto:#F5F5F7;
  --texto-sutil:#AEAEB2;
  --texto-sutilissimo:#8E8E93;
  --texto-inverso:#1C1C1E;
  --borda:rgba(255,255,255,.10);
  --borda-forte:rgba(255,255,255,.20);
  --borda-campo:rgba(255,255,255,.18);
  --marca:#0A84FF;
  --marca-hover:#3395FF;
  --marca-sutil:#0A2540;
  --selecionado:#0A2540;
  --selecionado-hover:#123457;
  --sucesso-bg:#12301C; --sucesso-txt:#5DD87C;
  --atencao-bg:#33260D; --atencao-txt:#FFB340;
  --perigo-bg:#3A1614;  --perigo-txt:#FF6961;
  --info-bg:#0A2540;    --info-txt:#5AB0FF;
  --descoberta-bg:#2A1B3D; --descoberta-txt:#C08CF5;
  --neutro:rgba(255,255,255,.08);
  --neutro-hover:rgba(255,255,255,.14);
  --neutro-forte:#F5F5F7;
}

/* ---------------------------------------------------------------- base -- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--superficie-afundada);color:var(--texto);
  /* -.022em é o tracking do SF Pro Text no corpo (17px/-0.374px na régua da
     Apple, mesma proporção aqui a 15px). O -.01em antigo deixava o texto
     ligeiramente mais solto do que o sistema pede. */
  font-family:var(--fonte);font-size:15px;line-height:1.47;letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--marca);text-decoration:none;transition:color var(--transicao)}
a:hover{color:var(--marca-hover)}

/* Foco de teclado visível em tudo que recebe foco, na mesma cor do sistema.
   :where() não soma especificidade, então quem já tem anel próprio (.btn,
   campo, chip de dia) continua mandando no seu. */
:where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--marca);outline-offset:2px;border-radius:var(--r-p);
}
img{max-width:100%}
::selection{background:var(--marca-anel)}

h1,h2,h3,h4,h5{margin:0;font-family:var(--fonte-titulo);color:var(--texto);font-weight:600}
h1{font-size:32px;line-height:1.1;letter-spacing:-.028em}
h2{font-size:26px;line-height:1.15;letter-spacing:-.024em}
h3{font-size:21px;line-height:1.2;letter-spacing:-.02em}
h4{font-size:17px;line-height:1.28;letter-spacing:-.016em}
h5{font-size:15px;line-height:1.32;letter-spacing:-.012em}
p{margin:0 0 var(--e2)}
small{font-size:13px}
hr{border:0;border-top:1px solid var(--borda);margin:var(--e5) 0}
code{font-family:var(--fonte-mono);font-size:13px;background:var(--neutro);padding:2px 6px;border-radius:6px}

.mono{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
.rotulo{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texto-sutilissimo);
}
.sutil{color:var(--texto-sutil)}
.sutilissimo{color:var(--texto-sutilissimo)}
.centro{text-align:center}
.direita{text-align:right}
.nowrap{white-space:nowrap}
.flex{display:flex;gap:var(--e2);align-items:center}
.flex-entre{display:flex;gap:var(--e2);align-items:center;justify-content:space-between}
.flex-fim{display:flex;gap:var(--e2);align-items:center;justify-content:flex-end}
.flex-topo{align-items:flex-start}
.wrap{flex-wrap:wrap}
.crescer{flex:1;min-width:0}
.mt0{margin-top:0}.mt8{margin-top:var(--e2)}.mt16{margin-top:var(--e4)}.mt24{margin-top:var(--e5)}
.mb0{margin-bottom:0}.mb8{margin-bottom:var(--e2)}.mb16{margin-bottom:var(--e4)}.mb24{margin-bottom:var(--e5)}
.esconder{display:none!important}

/* ------------------------------------------------------------ estrutura -- */
.topo{
  position:fixed;top:0;left:0;right:0;height:var(--topo-h);z-index:var(--z-topo);
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--borda);
  display:flex;align-items:center;gap:var(--e3);padding:0 var(--e4);
}
[data-tema="escuro"] .topo{background:rgba(28,28,30,.82)}

.topo .logo{display:flex;align-items:center;gap:var(--e2);flex:0 0 auto;min-height:40px;padding:0 4px}
.topo .logo:hover{opacity:.65}
.topo .logo img{width:auto;vertical-align:middle;transition:opacity var(--transicao)}
.topo .logo .marca-completa{height:18px;display:block}
.topo .logo .marca-simbolo{height:22px;display:none}
.topo .logo .logo-claro{display:none}
[data-tema="escuro"] .topo .logo .logo-escuro{display:none}
[data-tema="escuro"] .topo .logo .marca-completa.logo-claro{display:block}

.acoes-topo{display:flex;align-items:center;gap:var(--e1);flex:0 0 auto;margin-left:auto}
.topo .avatar{
  width:32px;height:32px;border-radius:50%;background:var(--marca);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 32px;letter-spacing:-.01em;
  text-decoration:none;
}
.abrir-menu{
  display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--texto);
  border-radius:var(--r-p);transition:background var(--transicao);
}
.abrir-menu:hover{background:var(--neutro)}

.area{display:flex;padding-top:var(--topo-h);min-height:100vh}

.lateral{
  width:var(--lateral-w);flex:0 0 var(--lateral-w);background:var(--superficie);
  border-right:1px solid var(--borda);position:sticky;top:var(--topo-h);
  height:calc(100vh - var(--topo-h));overflow-y:auto;display:flex;flex-direction:column;z-index:var(--z-gaveta);
}
.lateral .cab-modulo{padding:var(--e5) var(--e4) var(--e3)}
.lateral .cab-modulo .voltar{
  font-size:13px;color:var(--texto-sutilissimo);display:inline-flex;align-items:center;
  gap:3px;margin-bottom:var(--e3);transition:color var(--transicao);
}
.lateral .cab-modulo .voltar:hover{color:var(--texto)}
.lateral .cab-modulo .voltar{min-height:32px}
.lateral .cab-modulo .nome{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;letter-spacing:-.016em}
.lateral .cab-modulo .icone-mod{
  width:30px;height:30px;border-radius:var(--r-p);display:grid;place-items:center;
  background:var(--cor-mod,var(--marca-sutil));color:var(--cor-mod-txt,var(--marca));flex:0 0 30px;
}
/* ---------------------------------------------- seletor de estabelecimento --
   Um botão com as iniciais coloridas do lugar atual, que abre um popover com
   busca. Usado tanto solto no hub quanto dentro da lateral de um módulo —
   por isso fica fora de qualquer container flex/overflow pensado pra outro
   lugar, com posicionamento próprio (relative no wrapper, absolute no painel). */
.seletor-est{position:relative;display:inline-block;min-width:0}
.seletor-est-botao{
  display:inline-flex;align-items:center;gap:8px;height:36px;max-width:100%;
  background:var(--neutro);border:1px solid transparent;border-radius:var(--r-p);
  padding:0 10px 0 6px;cursor:pointer;font:inherit;font-weight:600;font-size:14px;color:var(--texto);
  transition:background var(--transicao);
}
.seletor-est-botao:hover{background:var(--neutro-hover)}
.seletor-est-botao .nome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seletor-est-botao svg{color:var(--texto-sutilissimo);flex:0 0 auto}
.seletor-est .icone{
  width:24px;height:24px;border-radius:7px;flex:0 0 24px;display:grid;place-items:center;
  background:var(--c,var(--marca));color:#fff;font-weight:700;font-size:11px;letter-spacing:-.01em;
}
.seletor-est-painel{
  position:absolute;top:calc(100% + 6px);left:0;z-index:var(--z-popover);width:280px;max-width:min(280px,90vw);
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  box-shadow:var(--sombra-2);padding:var(--e2);
}
/* herda largura/borda/fundo do estilo global de input[type=search]; só ajusta altura e espaçamento */
.seletor-est-busca{height:34px;margin-bottom:var(--e2)}
.seletor-est-painel ul{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}
.seletor-est-opcao{
  width:100%;display:flex;align-items:center;gap:10px;padding:8px;border:0;background:none;
  border-radius:var(--r-p);cursor:pointer;font:inherit;color:var(--texto);text-align:left;
  transition:background var(--transicao);
}
.seletor-est-opcao:hover{background:var(--neutro)}
.seletor-est-opcao.ativa{background:var(--selecionado)}
.seletor-est-opcao .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.seletor-est-opcao .nome{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seletor-est-opcao .tipo{font-size:12px;color:var(--texto-sutilissimo)}
.seletor-est-opcao svg{color:var(--marca);flex:0 0 auto}
.seletor-est-vazio{font-size:13px;color:var(--texto-sutilissimo);text-align:center;padding:var(--e3) 0;margin:0}

.seletor-local-lateral{padding:0 var(--e4) var(--e4)}
.seletor-local-lateral .rotulo-operando{
  display:block;font-size:11px;font-weight:600;color:var(--texto-sutilissimo);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;
}
.seletor-local-lateral .seletor-est,
.seletor-local-lateral .seletor-est-botao{width:100%}
/* a lateral tem overflow-y:auto, que corta transbordo horizontal também —
   sem isso o painel de 280px vazava pra fora dos 248px da lateral e ficava cortado */
.seletor-local-lateral .seletor-est-painel{width:100%;max-width:100%}

.lateral nav{padding:0 var(--e3) var(--e5);flex:1}
.lateral .secao{
  font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texto-sutilissimo);padding:var(--e5) var(--e2) var(--e2);
}
.lateral nav a{
  display:flex;align-items:center;gap:10px;padding:8px var(--e2);border-radius:var(--r-p);
  color:var(--texto-sutil);font-size:15px;font-weight:400;margin-bottom:2px;
  transition:background var(--transicao),color var(--transicao);
}
.lateral nav a:hover{background:var(--neutro);color:var(--texto)}
.lateral nav a.ativo{background:var(--selecionado);color:var(--marca);font-weight:500}
.lateral nav a svg{flex:0 0 17px;opacity:.85}
.lateral nav a.ativo svg{opacity:1}
.lateral .contador{
  margin-left:auto;background:var(--neutro);color:var(--texto-sutil);font-size:12px;
  font-weight:600;padding:1px 7px;border-radius:var(--r-total);font-variant-numeric:tabular-nums;
}
.lateral .contador.alerta{background:var(--perigo-borda);color:#fff}
.lateral .rodape-lat{padding:var(--e3) var(--e4) var(--e4);border-top:1px solid var(--borda)}

.principal{flex:1;min-width:0;padding:var(--e6) var(--gutter) var(--e7)}
.limite{max-width:1200px;margin:0 auto}
.limite-estreito{max-width:720px;margin:0 auto}

/* ------------------------------------------------- cabeçalho de página -- */
.cab-pagina{margin-bottom:var(--e6)}
.cab-pagina .caminho{
  font-size:13px;color:var(--texto-sutilissimo);margin-bottom:var(--e2);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.cab-pagina .sub{color:var(--texto-sutil);max-width:68ch;margin:var(--e2) 0 0;font-size:15px}

/* --------------------------------------------------------------- cartão -- */
.cartao{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:var(--e5);box-shadow:var(--sombra-1);
}
.cartao.limpo{box-shadow:none;border-color:transparent;background:var(--superficie-sutil)}
.cartao.topo-cor{border-top:3px solid var(--c,var(--marca))}

/* align-items:start em vez do stretch padrão do grid: dois cards lado a lado
   com quantidade de conteúdo bem diferente (ex.: dia livre x lista de alertas)
   não devem esticar o mais curto até virar metade de espaço em branco. */
.grade{display:grid;gap:var(--e4);align-items:start}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.grade.duas{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.grade.duas-inversa{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.grade.lista-form{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.grade.par{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

.pares{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--e2) var(--e4);align-items:baseline}
.pares.compacto{gap:6px var(--e3);font-size:14px}

/* -------------------------------------------------- cartão de ferramenta -- */
.ferramentas{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:var(--e4)}
.ferramenta{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  padding:var(--e5);display:flex;flex-direction:column;gap:var(--e3);color:var(--texto);
  box-shadow:var(--sombra-1);
  transition:box-shadow var(--transicao),transform var(--transicao),border-color var(--transicao);
}
.ferramenta:hover{box-shadow:var(--sombra-2);transform:translateY(-2px);border-color:var(--borda-forte);color:var(--texto)}
.ferramenta:active{transform:translateY(0)}
/* card de ferramenta carrega texto (descrição + números), então não vira
   faixa como o tile de arquivo — mas o ícone ganha o mesmo peso visual,
   pra grade de ferramenta e grade de arquivo lerem como o mesmo sistema */
.ferramenta .icone{
  width:52px;height:52px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--c-bg,var(--marca-sutil));color:var(--c-txt,var(--marca));
  transition:transform var(--transicao);
}
.ferramenta:hover .icone{transform:scale(1.06)}
.ferramenta h4{margin:0}
.ferramenta p{font-size:14px;color:var(--texto-sutil);margin:0;flex:1;line-height:1.45}
/* fileira de selinhos de resumo no rodapé de um cartão-link: começou só no
   card de ferramenta, o card de empresa usa a mesma fileira agora. Sem
   margem própria — quem empilha em coluna com gap (.ferramenta) já espaça
   sozinho; quem não empilha (.card-est-btn .txt) soma a própria margem. */
.pe{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------- cards de estabelecimento --
   grade compacta no painel do proprietário: achar o lugar certo é reconhecer
   cor + iniciais, não ler uma lista de texto */
.grade-est{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:var(--e3)}
.card-est{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  box-shadow:var(--sombra-1);overflow:hidden;
  transition:box-shadow var(--transicao),transform var(--transicao),border-color var(--transicao);
}
.card-est:hover{box-shadow:var(--sombra-2);transform:translateY(-2px);border-color:var(--borda-forte)}
/* mesma leitura dos tiles de arquivo: uma faixa de cor grande identifica o
   lugar de longe, o texto vem embaixo. Antes era um quadradinho de 38px
   numa linha de texto, que sumia no meio da página. */
.card-est-btn{
  width:100%;display:flex;flex-direction:column;align-items:stretch;padding:0;position:relative;
  background:none;border:0;cursor:pointer;font:inherit;color:var(--texto);text-align:left;
}
.card-est-btn .icone{
  height:76px;border-radius:calc(var(--r-g) - 1px) calc(var(--r-g) - 1px) 0 0;
  display:grid;place-items:center;
  background:var(--c,var(--marca));color:#fff;font-weight:700;font-size:26px;letter-spacing:-.02em;
}
.card-est-btn .txt{padding:var(--e3) var(--e4) var(--e4);min-width:0}
.card-est-btn .nome{display:block;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-est-btn .meta{display:block;font-size:13px;color:var(--texto-sutilissimo);margin-top:1px}
.card-est-btn .pe{margin-top:10px}
/* a seta vira um sinal discreto sobre a faixa, em vez de ocupar coluna */
.card-est-btn>svg{
  position:absolute;top:var(--e3);right:var(--e3);color:#fff;opacity:.72;
  transition:opacity var(--transicao),transform var(--transicao);
}
.card-est:hover .card-est-btn>svg{opacity:1;transform:translateX(2px)}
.card-est-novo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:139px;padding:var(--e4);color:var(--texto-sutil);border-style:dashed;box-shadow:none;font-size:13px;
}
.card-est-novo:hover{color:var(--marca);border-color:var(--marca)}

/* -------------------------------------------------------------- botões -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border:none;background:var(--neutro);color:var(--texto);
  border-radius:var(--r-p);padding:0 16px;height:36px;font-family:inherit;
  font-size:15px;font-weight:500;line-height:1;letter-spacing:-.01em;white-space:nowrap;
  transition:background var(--transicao),transform var(--transicao),opacity var(--transicao);
}
.btn:hover{background:var(--neutro-hover);color:var(--texto)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--marca-anel)}
.btn.primario{background:var(--marca);color:#fff}
.btn.primario:hover{background:var(--marca-hover);color:#fff}
.btn.primario:active{background:var(--marca-ativa)}
.btn.perigo{background:var(--perigo-borda);color:#fff}
.btn.perigo:hover{background:var(--perigo-borda);color:#fff;opacity:.88}
.btn.contorno{background:transparent;box-shadow:inset 0 0 0 1px var(--borda-forte)}
.btn.contorno:hover{background:var(--neutro)}
.btn.sutil,.btn.fantasma{background:transparent;color:var(--texto-sutil)}
.btn.sutil:hover,.btn.fantasma:hover{background:var(--neutro);color:var(--texto)}
.btn.pequeno{height:30px;padding:0 11px;font-size:14px;border-radius:7px}
.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn.bloco{width:100%}
.btn.grande{height:44px;padding:0 22px;font-size:15px}

/* ----------------------------------------------------- selo de estado -- */
.selo{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;
  letter-spacing:-.005em;padding:3px 9px;border-radius:var(--r-total);
  background:var(--neutro);color:var(--texto-sutil);white-space:nowrap;line-height:1.35;
}
.selo.sucesso{background:var(--sucesso-bg);color:var(--sucesso-txt)}
.selo.atencao{background:var(--atencao-bg);color:var(--atencao-txt)}
.selo.perigo{background:var(--perigo-bg);color:var(--perigo-txt)}
.selo.info{background:var(--info-bg);color:var(--info-txt)}
.selo.descoberta{background:var(--descoberta-bg);color:var(--descoberta-txt)}
.selo.forte{background:var(--neutro-forte);color:var(--texto-inverso)}
.selo.cor{background:var(--c-bg);color:var(--c-txt)}
.selo.contexto{background:var(--c);color:#fff}
.ponto{width:8px;height:8px;border-radius:50%;background:var(--c,var(--marca));display:inline-block;flex:0 0 8px}

/* --------------------------------------------------------- formulários -- */
label{
  display:block;font-size:14px;font-weight:500;color:var(--texto);
  margin-bottom:6px;letter-spacing:-.01em;
}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=tel],input[type=search],input[type=url],select,textarea{
  width:100%;max-width:100%;height:40px;padding:0 12px;
  border:1px solid var(--borda-campo);border-radius:var(--r-p);
  background:var(--superficie);font-family:inherit;color:var(--texto);
  /* 16px é o mínimo que o Safari do iOS aceita sem dar zoom automático ao
     focar o campo — abaixo disso (era 15px) ele aumenta a página inteira e
     não volta sozinho. Vale pra TODO campo, não só em telas pequenas: um
     iPhone em modo desktop ainda lê a viewport real. */
  font-size:16px;
  letter-spacing:-.01em;appearance:none;-webkit-appearance:none;
  transition:border-color var(--transicao),box-shadow var(--transicao),background var(--transicao);
}
select{
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236E6E73' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
textarea{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--borda-forte)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--marca);box-shadow:0 0 0 4px var(--marca-anel);
}
input::placeholder,textarea::placeholder{color:var(--texto-sutilissimo)}
input[type=color]{padding:3px;height:40px;cursor:pointer}
input[type=checkbox],input[type=radio]{
  width:18px;height:18px;flex:0 0 18px;accent-color:var(--marca);cursor:pointer;margin:0;
}
input[disabled],select[disabled],textarea[disabled]{background:var(--neutro);color:var(--texto-sutilissimo);cursor:not-allowed}
/* o seletor de arquivo do navegador cresce com o nome do arquivo escolhido:
   preso à coluna, ele não empurra mais a página pro lado */
input[type=file]{max-width:100%;font-size:14px}

.campo{margin-bottom:var(--e4)}
.campo .ajuda{font-size:13px;color:var(--texto-sutilissimo);margin-top:6px;line-height:1.4}
.erro{color:var(--perigo-txt);font-size:13px;margin-top:6px}
.linha-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0 var(--e4)}
.check-linha{display:flex;align-items:center;gap:10px;margin-bottom:var(--e3)}
.check-linha label{margin:0;font-size:15px;font-weight:400;color:var(--texto);cursor:pointer}

/* -------------------------------------------------- acordeão de permissões -- */
.acordeao-permissoes{display:flex;flex-direction:column;gap:var(--e3)}
.modulo-permissoes{border:1px solid var(--borda);border-radius:var(--r-m);overflow:hidden}
.modulo-permissoes summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  padding:12px var(--e4);cursor:pointer;font-weight:600;font-size:14px;
  background:var(--superficie-sutil);list-style:none;
}
.modulo-permissoes summary::-webkit-details-marker{display:none}
.modulo-permissoes summary .rotulo{font-weight:400}
.modulo-permissoes[open] summary{border-bottom:1px solid var(--borda)}
.modulo-permissoes .lista-permissoes{padding:var(--e4)}

/* linha de edição rápida: quebra em vez de espremer */
.form-linha{display:flex;flex-wrap:wrap;gap:var(--e2);align-items:center}
.form-linha input,.form-linha select{width:auto;min-width:0;height:36px;font-size:16px}
.form-linha .cresce{flex:1 1 160px}

/* ------------------------------------------------------ filtros e abas -- */
.filtros{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--e5)}
.filtros a,.filtros button{
  border:none;background:transparent;cursor:pointer;border-radius:var(--r-total);
  padding:6px 14px;font-family:inherit;font-size:14px;font-weight:500;color:var(--texto-sutil);
  transition:background var(--transicao),color var(--transicao);
}
.filtros a:hover,.filtros button:hover{background:var(--neutro);color:var(--texto)}
.filtros a.ativo,.filtros button.ativo{background:var(--texto);color:var(--superficie)}

.abas{display:flex;gap:var(--e5);border-bottom:1px solid var(--borda);margin-bottom:var(--e5);overflow-x:auto}
.abas a{
  padding:10px 2px;font-size:15px;font-weight:500;color:var(--texto-sutil);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
}
.abas a:hover{color:var(--texto)}
.abas a.ativo{color:var(--texto);border-bottom-color:var(--texto)}

/* -------------------------------------------------------------- tabela -- */
.tabela-wrap{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
table.tab{width:100%;border-collapse:collapse}
table.tab th{
  font-size:13px;font-weight:500;color:var(--texto-sutilissimo);text-align:left;
  padding:12px var(--e4);border-bottom:1px solid var(--borda);white-space:nowrap;
  letter-spacing:-.005em;
}
table.tab td{
  padding:14px var(--e4);border-bottom:1px solid var(--borda);font-size:15px;vertical-align:middle;
  /* e-mail e URL não têm onde quebrar: sem isso a célula estica a tabela */
  overflow-wrap:anywhere;
}
table.tab tr:last-child td{border-bottom:0}
table.tab tbody tr{transition:background var(--transicao)}
table.tab tbody tr:hover{background:var(--superficie-sutil)}
table.tab td.acoes{text-align:right;white-space:nowrap}
table.tab td.direita,table.tab th.direita{text-align:right;font-variant-numeric:tabular-nums}
table.tab td>.valor{display:contents}
table.tab.larga{min-width:820px}

/* --------------------------------------------------- grade de escala -- */
table.tab.grade-escala th,table.tab.grade-escala td{padding:6px 3px;text-align:center}
table.tab.grade-escala th:first-child,table.tab.grade-escala td:first-child{
  text-align:left;padding-left:var(--e4);white-space:nowrap;
  position:sticky;left:0;background:var(--superficie);z-index:var(--z-conteudo);
}
table.tab.grade-escala th{font-size:11px}
.dia-cel{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;font-size:10px;font-weight:700;
}
.dia-cel.trabalha{background:var(--sucesso-bg);color:var(--sucesso-txt)}
.dia-cel.folga{background:var(--atencao-bg);color:var(--atencao-txt)}
.dia-cel.livre{background:var(--superficie-sutil);color:var(--texto-sutilissimo)}
.dia-cel.indefinido{border:1px dashed var(--borda);color:var(--texto-sutilissimo)}

/* --------------------------------------------------------------- avisos -- */
.aviso{
  display:flex;gap:10px;align-items:flex-start;padding:14px var(--e4);
  border-radius:var(--r-m);margin-bottom:var(--e5);font-size:15px;
  background:var(--info-bg);color:var(--info-txt);
}
.aviso.ok{background:var(--sucesso-bg);color:var(--sucesso-txt)}
.aviso.err{background:var(--perigo-bg);color:var(--perigo-txt)}
.aviso.atencao{background:var(--atencao-bg);color:var(--atencao-txt)}
.aviso svg{flex:0 0 18px;margin-top:1px}
.aviso a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.faixa-supervisao{
  display:flex;gap:10px;align-items:center;padding:10px var(--e4);
  background:var(--atencao-bg);color:var(--atencao-txt);font-size:13px;
  position:sticky;top:0;z-index:30;flex-wrap:wrap;
}
.faixa-supervisao svg{flex:0 0 16px}
.faixa-supervisao span{flex:1 1 260px}
.faixa-supervisao .btn{flex:0 0 auto}

.alerta{
  display:flex;gap:var(--e3);align-items:flex-start;padding:14px var(--e4);
  background:var(--superficie);border:1px solid var(--borda);
  border-left:3px solid var(--c,var(--borda-forte));
  border-radius:var(--r-m);margin-bottom:var(--e2);
  transition:border-color var(--transicao),box-shadow var(--transicao);
}
.alerta:hover{box-shadow:var(--sombra-1)}
.alerta .txt{flex:1;min-width:0}
.alerta .t{font-weight:600;font-size:15px;letter-spacing:-.012em}
.alerta .m{font-size:14px;color:var(--texto-sutil);margin-top:2px;line-height:1.45}
.alerta.critico{--c:var(--perigo-borda)}
.alerta.critico>svg{color:var(--perigo-txt)}
.alerta.atencao{--c:var(--atencao-borda)}
.alerta.atencao>svg{color:var(--atencao-txt)}
.alerta.info{--c:var(--marca)}
.alerta.info>svg{color:var(--marca)}

.vazio{text-align:center;padding:var(--e7) var(--e5);color:var(--texto-sutilissimo)}
.vazio svg{opacity:.3;margin-bottom:var(--e3)}
.vazio h4{color:var(--texto-sutil);margin-bottom:6px}
.vazio p{font-size:14px;max-width:44ch;margin:0 auto}

/* ------------------------------------------------------------- medidas -- */
.barra{height:6px;background:var(--neutro);border-radius:var(--r-total);overflow:hidden}
.barra i{display:block;height:100%;background:var(--sucesso-borda);border-radius:var(--r-total);transition:width .4s cubic-bezier(.4,0,.2,1)}
.barra.media i{background:var(--atencao-borda)}
.barra.alta i{background:var(--perigo-borda)}
.carga .rotulo{display:block;margin-top:4px;font-size:12px}
.carga-compacta{display:flex;align-items:center;gap:8px}
.carga-compacta .barra{flex:1}
.carga-compacta .rotulo{margin:0;white-space:nowrap}

/* selo do banco: sigla na cor da instituição. Logo de banco é marca de
   terceiro e não entra aqui — a cor certa já faz o olho reconhecer a conta
   antes de ler o nome. O texto vira branco ou preto conforme a cor de fundo,
   senão amarelo do Banco do Brasil come a sigla. */
.selo-banco{
  display:inline-grid;place-items:center;flex:0 0 34px;width:34px;height:34px;
  border-radius:10px;background:var(--c);color:var(--c-txt,#fff);
  font-size:12px;font-weight:700;letter-spacing:-.02em;
}
.selo-banco.pequeno{flex-basis:26px;width:26px;height:26px;border-radius:8px;font-size:10px}

/* miniatura de item numa linha de tabela: foto do produto no pedido, por
   exemplo. Sem foto vira um quadrado tracejado do mesmo tamanho, pra
   coluna não pular de largura entre uma linha e outra */
.foto-item{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid var(--borda);display:block}
.foto-item.vazia{border-style:dashed;background:var(--superficie-afundada)}

.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:var(--e3)}

/* modo "valores ocultos": gráfico não tem texto pra mascarar, então some o
   desenho em vez do número — a forma da barra já entrega a ordem de grandeza */
.borrado{filter:blur(7px);pointer-events:none;user-select:none}
#btn-ocultar-valores.ativo{background:var(--atencao-bg);color:var(--atencao-txt)}
.num{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
  padding:var(--e4);box-shadow:var(--sombra-1);
}
.num .v{
  font-family:var(--fonte-titulo);font-size:30px;font-weight:600;line-height:1.05;
  letter-spacing:-.028em;color:var(--c,var(--texto));font-variant-numeric:tabular-nums;
}
.num .l{font-size:13px;color:var(--texto-sutilissimo);margin-top:4px;line-height:1.3}
/* placar aninhado numa grade ocupa metade da largura: o número tem que
   encolher junto, senão "R$ 1.234,56" vaza pra fora do cartão */
.grade .placar{grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr))}
.grade .placar .num .v{font-size:23px}

/* --------------------------------------------------------- lista item -- */
.item{
  display:flex;gap:var(--e3);align-items:flex-start;padding:12px var(--e4);
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
  margin-bottom:6px;transition:border-color var(--transicao),box-shadow var(--transicao);
}
.item:hover{border-color:var(--borda-forte);box-shadow:var(--sombra-1)}
.item .titulo{font-size:15px;line-height:1.4;color:var(--texto);letter-spacing:-.012em;overflow-wrap:anywhere}
.item .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;font-size:13px;color:var(--texto-sutilissimo)}
.item .marcar{
  width:20px;height:20px;flex:0 0 20px;margin-top:1px;border:1.5px solid var(--borda-forte);
  border-radius:50%;background:none;cursor:pointer;padding:0;display:grid;place-items:center;
  transition:background var(--transicao),border-color var(--transicao);
}
.item .marcar svg{opacity:0;color:#fff;transition:opacity .15s ease}
.item .marcar:hover{border-color:var(--marca)}
.item.concluida .marcar{background:var(--sucesso-borda);border-color:var(--sucesso-borda)}
.item.concluida .marcar svg{opacity:1}
.item.concluida .titulo{text-decoration:line-through;color:var(--texto-sutilissimo)}

/* -------------------------------------------------------------- kanban -- */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:var(--e4);align-items:start}
.coluna{background:var(--superficie-sutil);border:1px solid var(--borda);border-radius:var(--r-g);padding:var(--e3)}
.coluna>h5{padding:6px var(--e2) var(--e3);color:var(--texto-sutil)}

/* ================================================= específico da agenda == */
.faixa{display:flex;gap:3px;overflow-x:auto;padding-bottom:var(--e2);scrollbar-width:thin}
.tile{
  flex:1 0 38px;min-width:38px;border:0;padding:8px 2px;cursor:pointer;
  background:var(--c);color:#fff;border-radius:var(--r-p);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform var(--transicao),filter var(--transicao);
}
.tile:hover{transform:translateY(-3px);filter:brightness(1.12)}
.tile .n{font-size:15px;font-weight:600;line-height:1.1;letter-spacing:-.02em}
.tile .w{font-size:10px;opacity:.75;text-transform:uppercase;letter-spacing:.04em}
.tile.folga{background:var(--superficie);color:var(--texto-sutil);box-shadow:inset 0 0 0 1px var(--borda)}
.tile.folga .n{color:var(--c)}
.tile.vazio{background:transparent;color:var(--texto-sutilissimo);cursor:default;border:1px dashed var(--borda)}
.tile.vazio:hover{transform:none;filter:none}
.tile.hoje{outline:2px solid var(--texto);outline-offset:2px}
.tile .marca-crit{width:5px;height:5px;border-radius:50%;background:#FFD60A}

.dias{display:grid;gap:var(--e2)}
.dia{
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  display:grid;grid-template-columns:88px minmax(0,1fr);overflow:hidden;
  transition:box-shadow var(--transicao);
}
.dia:hover{box-shadow:var(--sombra-1)}
.dia .data{background:var(--c);color:#fff;padding:var(--e4) var(--e3);text-align:center;transition:filter var(--transicao)}
.dia .data:hover{filter:brightness(1.08)}
.dia .data .dd{font-family:var(--fonte-titulo);font-size:26px;font-weight:600;line-height:1;letter-spacing:-.026em}
.dia .data .mm,.dia .data .ws{font-size:11px;opacity:.8;text-transform:uppercase;letter-spacing:.05em}
.dia .data .ws{display:block;margin-top:6px;opacity:1;font-weight:600}
.dia .corpo{padding:var(--e4);min-width:0}
.dia .linha-topo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.dia .local{font-size:17px;font-weight:600;color:var(--c);letter-spacing:-.016em}
.dia .principal{font-weight:500;margin:0 0 6px;letter-spacing:-.012em}
.dia ul.sec{margin:0 0 var(--e3);padding-left:18px;color:var(--texto-sutil);font-size:14px;line-height:1.5}
.dia .pes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:var(--e2) var(--e5);border-top:1px solid var(--borda);padding-top:var(--e3);
  font-size:14px;color:var(--texto-sutil);
}
.dia .pes b{display:block;font-size:11px;font-weight:600;color:var(--texto-sutilissimo);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px}
.dia .obs{margin:var(--e3) 0 0;font-size:14px;color:var(--texto-sutil);line-height:1.45}
.dia .obs::before{content:"Lembrete: ";font-weight:600;color:var(--texto-sutilissimo)}
.dia .obs.forte{color:var(--perigo-txt)}

.linha-tempo{display:grid;gap:3px}
.bloco{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:var(--e3);background:var(--superficie);
  border:1px solid var(--borda);border-left:3px solid var(--c,var(--borda));border-radius:var(--r-m);
  padding:10px var(--e4);position:relative;transition:box-shadow var(--transicao);
}
.bloco:hover{box-shadow:var(--sombra-1)}
.bloco .hora{font-family:var(--fonte-mono);font-size:13px;color:var(--texto-sutilissimo);font-variant-numeric:tabular-nums}
.bloco .tit{font-weight:500;margin:0;font-size:15px;letter-spacing:-.012em}
.bloco .desc{margin:3px 0 0;font-size:14px;color:var(--texto-sutil);line-height:1.45}
.bloco.protegido{background:var(--superficie-sutil)}
.bloco.agora{border-color:var(--marca);box-shadow:0 0 0 1px var(--marca);background:var(--marca-sutil)}
.bloco.feito{opacity:.5}
.bloco.feito .tit{text-decoration:line-through}
.bloco .acoes{position:absolute;right:10px;top:8px;opacity:0;transition:opacity var(--transicao)}
.bloco:hover .acoes{opacity:1}

/* --------------------------------------------------- grade proporcional --
   Timeline de verdade: bloco posicionado por % do horário (top) e dimensionado
   por % da duração (height), dentro de uma coluna com linhas de hora ao
   fundo — mesmo princípio do Google Calendar, sem nenhuma lib nova. As linhas
   de hora são um único gradiente de fundo repetido a cada --h-hora, não uma
   div por hora. */
.dia-grade{--h-hora:52px;display:flex;border:1px solid var(--borda);border-radius:var(--r-m);overflow:hidden}
.dia-grade-horas{flex:0 0 46px;background:var(--superficie-sutil);border-right:1px solid var(--borda)}
.dia-grade-horas div{
  height:var(--h-hora);box-sizing:border-box;padding:2px 6px 0 0;
  font-size:10px;color:var(--texto-sutilissimo);font-family:var(--fonte-mono);text-align:right;
}
.dia-grade-corpo{
  position:relative;flex:1;
  background-image:linear-gradient(to bottom, var(--borda) 1px, transparent 1px);
  background-size:100% var(--h-hora);
}
.dia-grade-corpo[onclick]{cursor:crosshair}
.dia-grade-agora{position:absolute;left:0;right:0;border-top:2px solid var(--perigo-borda);z-index:var(--z-sobreposto);pointer-events:none}
.dia-grade-agora::before{
  content:'';position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--perigo-borda);
}
.dia-bloco{
  position:absolute;border-radius:6px;padding:3px 7px;overflow:hidden;cursor:pointer;color:#fff;
  background:var(--c,var(--marca));box-shadow:0 0 0 1px rgba(255,255,255,.35) inset;
  transition:box-shadow var(--transicao);
}
.dia-bloco:hover{box-shadow:0 0 0 2px var(--c,var(--marca)),var(--sombra-2)}
.dia-bloco .hr{font-size:10px;opacity:.85;line-height:1.2}
.dia-bloco .tit{
  font-size:12px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  display:flex;align-items:center;gap:4px;
}
.dia-bloco .tit svg{flex:0 0 auto;opacity:.9}
.dia-bloco.feito{opacity:.45}
.dia-bloco.feito .tit{text-decoration:line-through}
.dia-bloco.conflito{box-shadow:0 0 0 2px var(--perigo-borda)}
.dia-bloco.conflito:hover{box-shadow:0 0 0 2px var(--perigo-borda),var(--sombra-2)}
.dia-bloco-marcar{position:absolute;right:3px;bottom:3px}
.dia-bloco-marcar button{
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;
  background:rgba(255,255,255,.3);color:#fff;
}
.dia-bloco-marcar button:hover{background:rgba(255,255,255,.55)}

.semana-grade{
  display:grid;grid-template-columns:46px repeat(7,minmax(112px,1fr));gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:var(--r-g);
  overflow:hidden;min-width:860px;
}
.semana-grade>div{background:var(--superficie)}
.semana-grade .cab-dia{padding:var(--e3) var(--e2);text-align:center}
.semana-grade .cab-dia .ws{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-sutilissimo)}
.semana-grade .cab-dia .dd{font-family:var(--fonte-titulo);font-size:19px;font-weight:600;letter-spacing:-.02em}
.semana-grade .cab-dia.hoje{background:var(--marca);color:#fff}
.semana-grade .cab-dia.hoje .ws{color:rgba(255,255,255,.7)}
/* corpo da semana: mesma técnica de posição/altura em % da grade do dia,
   só que 7 colunas lado a lado — cada uma um link pro dia, com as linhas de
   hora desenhadas em background pra bater exatamente com .dia-grade-horas */
.semana-horas div{
  height:40px;box-sizing:border-box;padding:2px 6px 0 0;
  font-family:var(--fonte-mono);font-size:10px;color:var(--texto-sutilissimo);text-align:right;
}
.semana-coluna{
  position:relative;display:block;text-decoration:none;
  background-image:linear-gradient(to bottom, var(--borda) 1px, transparent 1px);
  background-size:100% 40px;
}
.dia-bloco.pequeno{
  padding:1px 5px;font-size:11px;font-weight:500;line-height:1.3;
  white-space:nowrap;text-overflow:ellipsis;
}

.mes{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:var(--r-g);overflow:hidden;
}
.mes .cab{
  background:var(--superficie-sutil);padding:9px 4px;text-align:center;font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--texto-sutilissimo);
}
.mes .cel{
  background:var(--superficie);min-height:100px;padding:var(--e2);position:relative;
  display:block;color:inherit;min-width:0;overflow:hidden;transition:background var(--transicao);
}
.mes .cel:hover{background:var(--superficie-sutil)}
.mes .cel.fora{opacity:.35}
.mes .cel.hoje{box-shadow:inset 0 0 0 2px var(--marca)}
.mes .cel .dd{font-size:14px;font-weight:600;letter-spacing:-.014em}
.mes .cel .tag{
  display:block;font-size:11px;margin-top:5px;padding:2px 6px;border-radius:6px;
  background:var(--c);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mes .cel .mini-t{font-size:12px;color:var(--texto-sutil);margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.mes .cel .pt-crit{position:absolute;top:8px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--perigo-borda)}

/* ---------------------------------------------------------- financeiro -- */
/* uma faixa só, cada grupo de gasto com a sua fatia */
.barra-grupos{display:flex;height:10px;border-radius:var(--r-total);overflow:hidden;background:var(--neutro)}
.barra-grupos span{display:block;height:100%;transition:width .4s cubic-bezier(.4,0,.2,1)}
.barra-grupos span:not(:last-child){margin-right:1px}

.valor-entrada{color:var(--sucesso-txt);font-weight:600}
.valor-saida{color:var(--texto);font-weight:600}
.valor-destaque{color:var(--perigo-txt);font-weight:600}

/* confirmação de uma ação enviada por fetch: pisca no lugar, nada se move */
@keyframes pisca-confirmacao{
  0%{box-shadow:0 0 0 3px var(--c-pisca)}
  100%{box-shadow:0 0 0 0 transparent}
}
.pisca-ok{--c-pisca:var(--sucesso-borda);animation:pisca-confirmacao .9s ease-out;border-radius:var(--r-p)}
.pisca-erro{--c-pisca:var(--perigo-borda);animation:pisca-confirmacao .9s ease-out;border-radius:var(--r-p)}

/* --------------------------------------------------- dias da semana ----- */
.dia-chip{display:inline-flex;margin:0;cursor:pointer}
.dia-chip input{position:absolute;opacity:0;width:0;height:0}
.dia-chip span{
  display:grid;place-items:center;min-width:44px;height:36px;padding:0 10px;
  border-radius:var(--r-p);background:var(--neutro);color:var(--texto-sutil);
  font-size:13px;font-weight:600;letter-spacing:.02em;
  transition:background var(--transicao),color var(--transicao);
}
.dia-chip:hover span{background:var(--neutro-hover)}
.dia-chip input:checked+span{background:var(--marca);color:#fff}
.dia-chip input:focus-visible+span{box-shadow:0 0 0 4px var(--marca-anel)}

/* ---------------------------------------------------------------- ajuda -- */
.passos{
  margin:var(--e4) 0 0;padding:0;list-style:none;counter-reset:passo;
  display:grid;gap:var(--e3);
}
.passos li{
  counter-increment:passo;position:relative;padding-left:34px;
  font-size:15px;line-height:1.5;color:var(--texto);
}
.passos li::before{
  content:counter(passo);position:absolute;left:0;top:-1px;
  width:24px;height:24px;border-radius:50%;background:var(--marca-sutil);color:var(--marca);
  display:grid;place-items:center;font-size:13px;font-weight:600;
}

/* passo a passo com ícone, pra instrução curta dentro de um popup */
.passo-lista{margin:0 0 var(--e4);padding:0;list-style:none;display:grid;gap:var(--e3)}
.passo-lista li{display:flex;gap:var(--e3);align-items:flex-start}
.passo-lista .passo-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--marca-sutil);color:var(--marca);
  display:grid;place-items:center;
}
.passo-lista .passo-rotulo{
  display:block;font-size:11px;color:var(--texto-sutilissimo);text-transform:uppercase;
  letter-spacing:.05em;font-weight:600;margin-bottom:1px;
}
.passo-lista .passo-texto{font-size:14px;color:var(--texto)}

/* --------------------------------------------------------------- login -- */
.tela-login{min-height:100vh;display:grid;place-items:center;padding:var(--e5);background:var(--superficie-afundada)}
.caixa-login{
  width:100%;max-width:400px;background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r-g);padding:var(--e6);box-shadow:var(--sombra-2);
}

/* ----------------------------------------------------- horários (slots) -- */
.slot{transition:transform var(--transicao)}
.slot:active{transform:scale(.95)}

/* ==================================================== responsividade === */
/* Uma régua só, quatro faixas. Qualquer @media do arquivo usa um destes
   valores, inclusive os que moram junto do componente lá embaixo:
     1023  tablet largo — some a segunda coluna, gutter 22
      900  tablet       — a lateral vira gaveta, tabela vira cartão, gutter 18
      640  celular      — tipografia e alvo de toque de dedo, gutter 16
      374  celular estreito — SE e afins, gutter 12
   O respiro lateral encolhe junto com a tela (32 → 22 → 18 → 16) em vez de
   pular direto de desktop pra celular. */

/* tablet largo: duas colunas de conteúdo já não cabem lado a lado */
@media (max-width:1023px){
  :root{--gutter:22px}
  .grade.duas,.grade.duas-inversa,.grade.lista-form,.grade.par{grid-template-columns:minmax(0,1fr)}
  .principal{padding:var(--e5) var(--gutter) var(--e7)}
}

/* tablet: a lateral do módulo vira gaveta */
@media (max-width:900px){
  :root{--gutter:18px}
  .lateral{
    position:fixed;left:0;top:var(--topo-h);bottom:0;transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.32,.72,0,1);box-shadow:var(--sombra-3);
    width:min(86vw,var(--lateral-w));
  }
  .lateral.aberta{transform:none}
  .fundo-menu{position:fixed;inset:var(--topo-h) 0 0;background:rgba(0,0,0,.32);z-index:var(--z-gaveta-fundo);backdrop-filter:blur(2px)}
  .abrir-menu{display:grid;place-items:center}
  .dia{grid-template-columns:minmax(0,1fr)}
  .dia .data{display:flex;align-items:baseline;gap:var(--e2);text-align:left;padding:8px var(--e4)}
  .dia .data .dd{font-size:19px}
  .dia .data .ws{display:inline;margin:0}

  /* Toque confortável: a partir daqui o ponteiro é o dedo, não o mouse, a
     mesma faixa em que a lateral vira gaveta. Antes isso só valia abaixo de
     640px e o tablet ficava com alvo de mouse. */
  .btn{height:40px;font-size:15px}
  /* o caminho é navegação, não texto corrido: alvo de dedo, não de mouse */
  .cab-pagina .caminho a{display:inline-flex;align-items:center;min-height:32px}
  /* concluir tarefa é a ação principal da linha e o círculo media 20px:
     a área de toque cresce à volta dele, o desenho continua do mesmo tamanho */
  .item .marcar{
    width:32px;height:32px;flex:0 0 32px;margin-top:-5px;margin-left:-6px;
    border:none;background:none;position:relative;
  }
  .item .marcar::before{
    content:'';position:absolute;width:20px;height:20px;border-radius:50%;
    border:1.5px solid var(--borda-forte);
  }
  /* a cor de concluída vai pro círculo, não pra área de toque inteira */
  .item.concluida .marcar{background:none;border-color:transparent}
  .item.concluida .marcar::before{background:var(--sucesso-borda);border-color:var(--sucesso-borda)}
  .item .marcar svg{position:relative}
  .btn.pequeno{height:32px}
  input,select,textarea{font-size:16px;height:44px}
  textarea{height:auto;min-height:104px}
  .form-linha input,.form-linha select{height:40px;flex:1 1 130px;width:auto!important}
  .form-linha input[type=date]{flex:1 1 150px}
  .form-linha input[type=color]{flex:0 0 46px}
  input[type=checkbox],input[type=radio]{width:24px;height:24px;flex:0 0 24px}
  /* botão de ação em linha de tabela mede 35x30 no desktop: no toque isso
     erra o alvo. Aqui ele cresce, e as ações do cartão ganham espaço entre
     si pra não editar quando a intenção era excluir. */
  table.tab td.acoes .btn.pequeno{min-width:40px;height:38px}
  .tabela-wrap.responsiva table.tab td.acoes{gap:8px}

  /* tabela vira lista de cartões na mesma faixa em que a lateral vira
     gaveta — abaixo disso não sobra largura pra tabela nenhuma, com ou sem
     menu fixo, então a tabela plana com rolagem horizontal fica espremida
     e cortada em vez de simplesmente virar cartão. */
  .tabela-wrap.responsiva{border:none;background:none;overflow:visible}
  .tabela-wrap.responsiva table.tab,
  .tabela-wrap.responsiva table.tab.larga{display:block;min-width:0}
  .tabela-wrap.responsiva table.tab thead{display:none}
  .tabela-wrap.responsiva table.tab tbody,
  .tabela-wrap.responsiva table.tab tr{display:block}
  .tabela-wrap.responsiva table.tab tr{
    background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
    padding:var(--e3) var(--e4);margin-bottom:var(--e2);box-shadow:var(--sombra-1);
  }
  .tabela-wrap.responsiva table.tab td{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--e4);
    border:none;padding:5px 0;text-align:left!important;
  }
  .tabela-wrap.responsiva table.tab td::before{
    content:attr(data-rotulo);font-size:14px;color:var(--texto-sutilissimo);
    flex:0 0 auto;font-weight:400;
  }
  .tabela-wrap.responsiva table.tab td>.valor{
    display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;justify-content:flex-end;
    text-align:right;min-width:0;
  }
  .tabela-wrap.responsiva table.tab td:empty,
  .tabela-wrap.responsiva table.tab td.vazia{display:none}
  .tabela-wrap.responsiva table.tab td[data-rotulo=""]::before{display:none}
  .tabela-wrap.responsiva table.tab td.acoes{
    justify-content:flex-end;flex-wrap:wrap;padding-top:var(--e3);margin-top:var(--e2);
    border-top:1px solid var(--borda);
  }
  .tabela-wrap.responsiva table.tab td.acoes::before{display:none}
  /* a linha que é um formulário inteiro ocupa a largura toda */
  .tabela-wrap.responsiva table.tab td:has(form){display:block}
  .tabela-wrap.responsiva table.tab td:has(form)::before{display:block;margin-bottom:6px}
}

/* celular */
@media (max-width:640px){
  :root{--topo-h:52px;--gutter:16px}
  body{font-size:16px}
  .principal{padding:var(--e4) var(--gutter) var(--e7)}
  h1{font-size:26px}
  h2{font-size:22px}
  h3{font-size:19px}
  h4{font-size:16px}

  .topo{padding:0 var(--e3);gap:var(--e2)}
  /* A barra tem sete alvos e 320px de tela. O contador vira selo sobre o
     ícone em vez de esticar o botão: cada ação fica quadrada, todas cabem e
     nenhuma função sai da barra. */
  .topo .btn.sutil{position:relative;padding:0 9px;gap:0}
  .topo .btn.sutil>.selo{
    position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;
    justify-content:center;font-size:10px;line-height:16px;box-shadow:0 0 0 2px var(--superficie);
  }
  .topo .logo .marca-completa{display:none!important}
  .topo .logo .marca-simbolo.logo-escuro{display:block}
  [data-tema="escuro"] .topo .logo .marca-simbolo.logo-escuro{display:none}
  [data-tema="escuro"] .topo .logo .marca-simbolo.logo-claro{display:block}
  .seletor-est-painel{width:calc(100vw - 32px)}
  .topo .avatar{outline-offset:6px}
  .acoes-topo a[aria-label="Central de ajuda"]{display:none}

  .cab-pagina{margin-bottom:var(--e5)}
  .cab-pagina .sub{font-size:14px}
  .cab-pagina.flex-entre{flex-direction:column;align-items:stretch}
  .cab-pagina.flex-entre>.flex{flex-wrap:wrap}

  .cartao{padding:var(--e4);border-radius:var(--r-m)}
  .ferramenta{padding:var(--e4)}
  /* no celular a lista de estabelecimentos é rolagem: faixa mais baixa
     mantém a cor identificando sem gastar meia tela por card */
  .card-est-btn .icone{height:54px;font-size:20px}
  .card-est-btn .txt{padding:var(--e2) var(--e3) var(--e3)}
  .card-est-novo{min-height:104px}
  .placar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num{padding:var(--e3)}
  .num .v{font-size:25px}

  /* filtros rolam em vez de virar três linhas */
  .filtros{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--e1);scrollbar-width:none;margin-bottom:var(--e4)}
  .filtros::-webkit-scrollbar{display:none}
  .filtros a,.filtros button{white-space:nowrap;flex:0 0 auto}

  .cartao .flex,.cartao .flex-entre{flex-wrap:wrap}

  /* mês: só a cor e o dia */
  .mes .cel{min-height:58px;padding:4px}
  .mes .cel .mini-t,.mes .cel .selo{display:none}
  .mes .cel .dd{font-size:12px}
  .mes .cel .tag{font-size:10px;padding:1px 3px;margin-top:3px}
  .mes .cab{font-size:10px;padding:5px 1px}
  .mes .cel .pt-crit{top:4px;right:4px;width:5px;height:5px}

  .tile{flex:0 0 36px}
  .bloco{grid-template-columns:50px minmax(0,1fr);padding:10px var(--e3);gap:var(--e2)}
  .bloco .acoes{opacity:1;position:static;margin-left:auto}
  .item{padding:12px var(--e3)}

  /* o botão do alerta desce em vez de espremer o texto */
  .alerta{flex-wrap:wrap}
  .alerta .txt{flex:1 1 100%}
  .alerta>.btn,.alerta>a.btn{margin-left:28px}
}

/* celular pequeno (iPhone SE e similares): faixa que faltava. Abaixo de
   375px o título de 26px e a grade de 2 colunas do placar já estouram. */
@media (max-width:374px){
  :root{--gutter:12px}
  h1{font-size:23px}
  h2{font-size:20px}
  .placar{grid-template-columns:minmax(0,1fr)}
  .grade-est{grid-template-columns:minmax(0,1fr)}
  .cab-pagina .sub{font-size:13px}
  .btn{padding:0 12px}
  .selo{font-size:11px}
  /* o topo tem itens demais pra 360px: o seletor cede espaço e o resto
     encolhe, senão a barra estica a página inteira pro lado */
  .topo{gap:var(--e2);padding:0 var(--e3)}
  .topo .crescer{min-width:0}
  .seletor-est-botao{max-width:130px}
  .barra-selecao{left:var(--e3);right:var(--e3);transform:none;justify-content:center;flex-wrap:wrap}
  @keyframes sobe-barra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* nenhuma linha de botões pode esticar a página: quebra em vez de transbordar */
.flex-entre>.flex{flex-wrap:wrap;min-width:0}

/* ------------------------------------------------ contagem por código -- */
/* leitor e painel do item lado a lado: a pessoa bipa e digita sem rolar */
.bipar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e4);align-items:start}
.bipar-item{animation:sobe-item .18s ease-out}
@keyframes sobe-item{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.camera-area{position:relative;margin-bottom:var(--e4)}
.camera-area video{
  width:100%;max-height:280px;object-fit:cover;
  border-radius:var(--r-m);background:#000;display:block;
}
.camera-area .fechar-camera{position:absolute;top:8px;right:8px}

/* o campo do código é o centro da tela, então ganha corpo de leitura */
#codigo{font-size:18px;letter-spacing:.04em;font-family:var(--fonte-mono,monospace)}
#item-total{font-weight:600;color:var(--texto)}

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

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media print{
  .topo,.lateral,.filtros,.btn,.fundo-menu{display:none!important}
  .area{padding-top:0}
  .cartao,.dia,.num{box-shadow:none;break-inside:avoid}
  body{background:#fff}
}

/* ---------------------------------------------------- arquivos do servidor */
/* tile da grade: a capa é a miniatura quando existe, senão o ícone do tipo */
.tile-arq{position:relative}
.tile-arq .capa{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-m);
  background:var(--superficie-sutil);display:block;margin-bottom:var(--e2)}
.tile-arq .nome{font-weight:600;font-size:13px;line-height:1.3;word-break:break-word}
.tile-arq .meta{font-size:11px;color:var(--texto-sutil);margin-top:2px}
.tile-arq .acoes-tile{display:flex;gap:4px;margin-top:var(--e2);flex-wrap:wrap}

/* capa do que não tem miniatura: ícone grande sobre fundo do tipo, no lugar
   do quadrado cinza. PDF e vídeo não geram miniatura (o servidor não tem
   poppler nem ffmpeg), então é essa capa que os representa na grade. */
.tile-arq .capa-tipo{
  width:100%;aspect-ratio:4/3;border-radius:var(--r-m);margin-bottom:var(--e2);
  display:grid;place-items:center;background:var(--c-bg,var(--neutro));color:var(--c-txt,var(--texto-sutil));
}
.tile-arq[data-tipo="pdf"] .capa-tipo{--c-bg:var(--ac-vermelho);--c-txt:#B3261E}
.tile-arq[data-tipo="video"] .capa-tipo{--c-bg:var(--ac-roxo);--c-txt:#6B3FA0}
.tile-arq[data-tipo="audio"] .capa-tipo{--c-bg:var(--ac-magenta);--c-txt:#A8327F}
.tile-arq[data-tipo="planilha"] .capa-tipo{--c-bg:var(--ac-verde);--c-txt:#1D7F3A}
.tile-arq[data-tipo="documento"] .capa-tipo,
.tile-arq[data-tipo="texto"] .capa-tipo{--c-bg:var(--ac-azul);--c-txt:#1558BC}
.tile-arq[data-tipo="compactado"] .capa-tipo{--c-bg:var(--ac-laranja);--c-txt:#8A4B00}
.tile-arq[data-tipo="pasta"] .capa-tipo{--c-bg:var(--ac-teal);--c-txt:#206A83}

/* chip de extensão: diferencia arquivos do mesmo tipo (seis planilhas não
   viram seis quadrados verdes idênticos) sem depender de miniatura real */
.chip-ext{
  position:absolute;top:8px;right:8px;padding:2px 6px;border-radius:6px;
  background:rgba(0,0,0,.55);color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em;
  pointer-events:none;
}

/* seleção múltipla: a caixa só aparece no hover, ou fixa quando marcada */
.tile-arq .marca-sel{position:absolute;top:8px;left:8px;z-index:var(--z-conteudo);opacity:0;transition:opacity var(--transicao)}
.tile-arq:hover .marca-sel,.tile-arq .marca-sel:has(:checked){opacity:1}
/* modo seleção: os checkboxes ficam à vista, sem depender de passar o mouse
   (no celular não existe hover) */
#area-arq.modo-selecao .tile-arq .marca-sel{opacity:1}
.tile-arq:has(.marca-sel :checked){outline:2px solid var(--marca);outline-offset:-1px;background:var(--selecionado)}
table.tab tr:has(.marca-sel :checked){background:var(--selecionado)}

/* barra flutuante das ações em lote */
.barra-selecao{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:var(--z-flutuante);
  display:flex;align-items:center;gap:var(--e3);
  background:var(--neutro-forte);color:var(--texto-inverso);
  padding:10px var(--e4);border-radius:var(--r-total);box-shadow:var(--sombra-3);
  animation:sobe-barra var(--transicao-base) both;
}
@keyframes sobe-barra{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.barra-selecao .btn{height:32px;background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
.barra-selecao .btn:hover{background:rgba(255,255,255,.26);color:#fff}

/* menu do botão direito */
.menu-ctx{
  position:fixed;z-index:var(--z-popover);min-width:190px;padding:6px;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-m);
  box-shadow:var(--sombra-3);animation:abre-menu 120ms var(--ease) both;
}
@keyframes abre-menu{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.menu-ctx button{
  display:flex;align-items:center;gap:var(--e2);width:100%;
  padding:8px 10px;border:0;background:none;border-radius:var(--r-p);
  font:inherit;font-size:14px;color:var(--texto);text-align:left;cursor:pointer;
}
.menu-ctx button:hover{background:var(--neutro)}
.menu-ctx button.perigo{color:var(--perigo-txt)}
.menu-ctx hr{margin:5px 0}

/* diálogo de pré-visualização: maior que os outros, o conteúdo é que manda */
dialog.modal.previa{width:min(96vw,1040px);padding:var(--e4)}
dialog.modal.grande{width:min(92vw,640px);max-height:88vh;overflow-y:auto}
.add-rapido{display:flex;gap:var(--e2);margin-top:var(--e2)}
.add-rapido input{flex:1;border:1px dashed var(--borda);border-radius:var(--r-m);padding:6px 8px;font-size:13px;background:transparent;color:var(--texto)}
.add-rapido input:focus{border-style:solid;border-color:var(--marca);outline:none}
.previa-corpo{
  min-height:240px;max-height:74vh;display:grid;place-items:center;
  background:var(--superficie-afundada);border-radius:var(--r-m);overflow:auto;
}
.previa-corpo img{max-width:100%;max-height:74vh;display:block;border-radius:var(--r-p)}
.previa-corpo iframe{width:100%;height:74vh;border:0;border-radius:var(--r-p);background:#fff}
.previa-corpo video{max-width:100%;max-height:74vh;border-radius:var(--r-p)}
.previa-corpo audio{width:min(100%,460px)}
.previa-corpo pre{
  margin:0;padding:var(--e4);width:100%;max-height:74vh;overflow:auto;
  font-family:var(--fonte-mono);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
}

/* cabeçalho de coluna que ordena */
th.ordena{cursor:pointer;user-select:none}
th.ordena:hover{color:var(--texto)}
th.ordena .seta{font-size:9px;opacity:.6;margin-left:2px}

/* zona de soltar arquivo */
.dropzone-ativa{outline:2px dashed var(--marca);outline-offset:4px;border-radius:var(--r-g)}

/* campo de busca compacto, com a lupa dentro do próprio campo */
.campo-busca{position:relative;display:flex;align-items:center}
.campo-busca svg{position:absolute;left:10px;color:var(--texto-sutilissimo);pointer-events:none}
.campo-busca input{height:32px;padding-left:30px;width:200px;font-size:13px}

/* favorito: risca de estrela vazia até marcar, aí preenche e fica dourada */
.acao-favorito.ativo{color:#B8860B;background:#FFF6DC}
.acao-favorito.ativo svg{fill:currentColor}

/* bolinha de contagem sobre o ícone de nota */
.acao-nota{position:relative}
.badge-notas{
  position:absolute;top:-4px;right:-4px;min-width:14px;height:14px;padding:0 3px;
  border-radius:var(--r-total);background:var(--marca);color:#fff;
  font-size:9px;font-weight:700;line-height:14px;text-align:center;
}

/* arrastar card para mover: origem esmaece, pasta-alvo ganha anel */
.tile-arq.arrastando,tr.arrastando{opacity:.4}
.kanban .item.arrastando{opacity:.4}
.kanban .coluna{transition:background-color .15s}
[data-pasta="1"].arraste-sobre{outline:2px solid var(--marca);outline-offset:-2px;background:var(--selecionado)}
.filtros a.arraste-sobre{outline:2px solid var(--marca);outline-offset:-2px;background:var(--selecionado)}

/* lista de notas dentro do diálogo */
.notas-lista{max-height:260px;overflow-y:auto}
.nota-item{padding:10px 0;border-bottom:1px solid var(--borda)}
.nota-item:last-child{border-bottom:0}

/* primeiro diálogo do projeto: o <dialog> nativo já dá backdrop, Escape e foco preso */
dialog.modal{border:none;border-radius:var(--r-g);padding:var(--e5);width:min(92vw,460px);
  background:var(--superficie);color:var(--texto);box-shadow:var(--sombra-2)}
dialog.modal::backdrop{background:rgb(0 0 0 / .4)}
dialog.modal h3{margin:0 0 var(--e4)}
dialog.modal .fim{display:flex;gap:var(--e2);justify-content:flex-end;margin-top:var(--e4)}
dialog.modal img{max-width:100%;max-height:70vh;display:block;margin:0 auto;border-radius:var(--r-m)}

/* ================================================================== site ==
   Vitrine pública em "/". Reaproveita .grade/.cartao/.campo/.btn do sistema;
   só o que é próprio de página de venda mora aqui. */

body.site{background:var(--superficie)}
.site .limite{padding-left:var(--e5);padding-right:var(--e5)}
.site h2,.site h3,.site h4{margin:0}
/* o topo é fixo: sem isso o link de âncora esconde o título atrás dele */
.site section[id]{scroll-margin-top:76px}
.site{scroll-behavior:smooth}

.site-topo{position:sticky;top:0;z-index:var(--z-topo);background:color-mix(in srgb,var(--superficie) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--borda);padding:var(--e3) 0}
.site-marca{height:24px;width:auto;display:block}
.site-nav{display:flex;align-items:center;gap:var(--e5)}
.site-nav a{font-size:14px;font-weight:500;color:var(--texto-sutil);text-decoration:none}
.site-nav a:hover{color:var(--texto)}
.site-nav a.btn{color:#fff}

.site-capa{padding:var(--e7) 0;background:var(--superficie-afundada);border-bottom:1px solid var(--borda)}
.site-olho{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca);margin:0 0 var(--e3)}
.site-titulo{font-size:clamp(32px,5.4vw,58px);line-height:1.06;letter-spacing:-.025em;
  font-weight:800;margin:0 0 var(--e4)}
.site-texto{max-width:54ch;font-size:17px;line-height:1.6;color:var(--texto-sutil);margin:0 0 var(--e5)}

.site-secao{padding:var(--e7) var(--e5)}
.site-faixa{background:var(--superficie-afundada);border-block:1px solid var(--borda);padding:var(--e7) 0}
.site-etiqueta{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marca);margin:0 0 var(--e2)}
.site-h2{font-size:clamp(24px,3.2vw,34px);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--e3)}
.site-sub{max-width:60ch;color:var(--texto-sutil);line-height:1.55;margin:0}

.site-servico{padding:var(--e5)}
.site-servico h3{font-size:17px;margin:var(--e3) 0 var(--e2)}
.site-servico p{margin:0;font-size:14px;line-height:1.55;color:var(--texto-sutil)}
.site-servico-ic{width:42px;height:42px;border-radius:var(--r-m);display:grid;place-items:center;
  background:var(--marca-fraca,var(--neutro));color:var(--marca)}

.site-passo h4{font-size:16px;margin:var(--e2) 0}
.site-passo p{margin:0;font-size:14px;line-height:1.55;color:var(--texto-sutil)}
.site-passo-n{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--marca)}

.site-trabalho-capa{aspect-ratio:4/3;border-radius:var(--r-g);background:var(--superficie-afundada);
  border:1px dashed var(--borda);display:grid;place-items:center;color:var(--texto-sutil);
  margin-bottom:var(--e3)}
.site-trabalho h4{font-size:15px;margin:0 0 2px}

.site-contato{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--e6);align-items:start}
.site-contato .cartao{padding:var(--e5)}

.site-rodape{padding:var(--e5) 0;border-top:1px solid var(--borda)}
.site-entrar{text-decoration:none}
.site-entrar:hover{color:var(--texto)}

@media (max-width:900px){
  .site-contato{grid-template-columns:minmax(0,1fr)}
  .site-nav a:not(.btn){display:none}
}
@media (max-width:640px){
  .site-capa{padding:var(--e6) 0}
  .site-secao,.site-faixa{padding-top:var(--e6);padding-bottom:var(--e6)}
  .site .limite{padding-left:var(--e4);padding-right:var(--e4)}
}

/* ========================================================================== */
/* GRÁFICOS                                                                   */
/* Sem biblioteca: barra é altura em %, rosca é stroke-dasharray, linha é      */
/* polyline num viewBox esticado. Tudo herda os tokens, então acompanha o      */
/* tema escuro sozinho e não pesa um byte de JS na página.                     */
/* ========================================================================== */

.gr-vazio{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--e2);
  color:var(--texto-sutilissimo);font-size:13px;text-align:center;
  border:1px dashed var(--borda-forte);border-radius:var(--r-m);
}
.gr-vazio svg{opacity:.4;flex:0 0 auto}
.gr-rosca .gr-vazio{flex:1;width:100%}

/* ------------------------------------------------------------- barras -- */
.gr-barras{
  display:flex;align-items:flex-end;gap:6px;height:var(--gr-h,140px);
  padding-top:var(--e2);border-bottom:1px solid var(--borda);
}
.gr-barras .col{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:6px;height:100%;
}
.gr-barras .pilha{
  flex:1;width:100%;max-width:44px;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:var(--r-p) var(--r-p) 0 0;overflow:hidden;
  transition:opacity var(--transicao);
}
.gr-barras .pilha:hover{opacity:.75}
.gr-barras .pilha i{display:block;width:100%;min-height:2px}
.gr-barras .rot{
  font-size:10px;color:var(--texto-sutilissimo);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%;
}

/* --------------------------------------------------------------- área -- */
.gr-area{position:relative;height:var(--gr-h,140px);padding-bottom:16px}
.gr-area svg{width:100%;height:calc(100% - 16px);display:block;overflow:visible}
.gr-area .linha{fill:none;stroke:var(--gr-c,var(--marca));stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.gr-area .base{stroke:var(--borda-forte);stroke-width:1;stroke-dasharray:3 3}
.gr-area .pontos{position:absolute;inset:0 0 16px 0;pointer-events:none}
.gr-area .pontos span{
  position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--superficie);border:2px solid var(--gr-c,var(--marca));
  opacity:0;transition:opacity var(--transicao);pointer-events:auto;
}
.gr-area:hover .pontos span{opacity:1}
.gr-area .eixo{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-size:10px;color:var(--texto-sutilissimo);
}

/* -------------------------------------------------------------- rosca -- */
.gr-rosca{display:flex;align-items:center;gap:var(--e5);flex-wrap:wrap}
.gr-rosca .disco{position:relative;width:var(--gr-t,132px);height:var(--gr-t,132px);flex:0 0 auto}
/* escopo no .disco: sem isso a regra pega o ícone do estado vazio e o rotaciona */
.gr-rosca .disco svg{width:100%;height:100%;transform:rotate(-90deg)}
.gr-rosca .trilho{fill:none;stroke:var(--neutro);stroke-width:12}
.gr-rosca .fatia{
  fill:none;stroke-width:12;transition:stroke-width var(--transicao);
}
.gr-rosca .fatia:hover{stroke-width:15}
.gr-rosca .meio{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;pointer-events:none;padding:0 6px;
}
.gr-rosca .meio b{
  font-family:var(--fonte-titulo);font-size:var(--gr-f,15px);font-weight:600;letter-spacing:-.03em;
  line-height:1.1;font-variant-numeric:tabular-nums;
}
.gr-rosca .meio span{font-size:10px;color:var(--texto-sutilissimo);margin-top:2px}
.gr-rosca .legenda{list-style:none;margin:0;padding:0;flex:1;min-width:150px;
  display:flex;flex-direction:column;gap:7px}
.gr-rosca .legenda li{display:flex;align-items:center;gap:var(--e2);font-size:13px}
.gr-rosca .legenda i{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.gr-rosca .legenda .n{flex:1;color:var(--texto-sutil);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-rosca .legenda .v{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.gr-rosca .legenda .p{color:var(--texto-sutilissimo);font-size:11px;width:34px;text-align:right}

/* --------------------------------------------------- legenda de barras -- */
.gr-legenda{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e3)}
.gr-legenda span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--texto-sutil)}
.gr-legenda i{width:9px;height:9px;border-radius:3px}

/* ---------------------------------------------------- cartão de negócio -- */
/* O painel do dono lista empresas, não atalhos: cada cartão precisa caber o
   saldo, a venda do mês e o que está pendente sem virar uma tabela. */
.grade-negocios{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:var(--e3);
}
.cartao-negocio{margin:0}
.cartao-negocio button{
  width:100%;text-align:left;font:inherit;color:var(--texto);cursor:pointer;
  background:var(--superficie);border:1px solid var(--borda);border-radius:var(--r-g);
  box-shadow:var(--sombra-1);padding:var(--e4);display:flex;flex-direction:column;gap:var(--e3);
  border-top:3px solid var(--c,var(--marca));
  transition:box-shadow var(--transicao),transform var(--transicao);
}
.cartao-negocio button:hover{box-shadow:var(--sombra-2);transform:translateY(-1px)}
.cartao-negocio .cab-neg{display:flex;align-items:center;gap:var(--e3)}
.cartao-negocio .icone{
  width:34px;height:34px;border-radius:var(--r-p);flex:0 0 34px;display:grid;place-items:center;
  background:var(--c,var(--marca));color:#fff;font-weight:700;font-size:13px;letter-spacing:-.02em;
}
.cartao-negocio .id{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.cartao-negocio .id b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao-negocio .numeros{display:flex;gap:var(--e5)}
.cartao-negocio .numeros .n{display:flex;flex-direction:column}
.cartao-negocio .numeros .n b{
  font-family:var(--fonte-titulo);font-size:19px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.cartao-negocio .numeros .n span{font-size:11px;color:var(--texto-sutilissimo);margin-top:2px}
.cartao-negocio .pendencias{
  display:flex;flex-direction:column;gap:5px;padding-top:var(--e3);
  border-top:1px solid var(--borda);
}
.cartao-negocio .pendencias .p{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--texto-sutil)}
.cartao-negocio .pendencias .p.sutilissimo{color:var(--texto-sutilissimo)}

/* ------------------------------------------------------ linha de etapas -- */
/* A régua do projeto na área do cliente: ele quer saber em que pé está, e
   uma frase de status sozinha não responde isso. */
.linha-etapas{display:flex;gap:2px}
.linha-etapas .etapa{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.linha-etapas .etapa i{
  display:block;height:4px;border-radius:var(--r-total);background:var(--neutro);
}
.linha-etapas .etapa.feita i{background:var(--marca)}
.linha-etapas .etapa span{
  font-size:10px;color:var(--texto-sutilissimo);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.linha-etapas .etapa.feita span{color:var(--texto-sutil);font-weight:500}
@media (max-width:640px){
  /* no celular o rótulo de cinco etapas vira sopa de letra: fica só a régua */
  .linha-etapas .etapa span{display:none}
}

/* ========================================================================== */
/* BRIEFING                                                                   */
/* O cliente responde no celular, no meio do dia. Campo largo, alvo grande,   */
/* e o erro sempre colado na pergunta que o causou.                           */
/* ========================================================================== */

.campo-brief{padding:var(--e4) 0;border-bottom:1px solid var(--borda)}
.campo-brief:last-child{border-bottom:0;padding-bottom:0}
.campo-brief:first-child{padding-top:0}
.campo-brief > label{
  display:block;font-size:15px;font-weight:600;color:var(--texto);margin-bottom:2px;
  letter-spacing:-.012em;
}
.campo-brief > label i{color:var(--perigo-txt);font-style:normal;margin-left:2px}
.campo-brief .ajuda-brief{
  font-size:13px;color:var(--texto-sutilissimo);margin:0 0 var(--e3);line-height:1.4;
}
.campo-brief input[type=text],
.campo-brief textarea,
.campo-brief select{width:100%}
.campo-brief.com-erro > label{color:var(--perigo-txt)}
.campo-brief.com-erro input[type=text],
.campo-brief.com-erro textarea{border-color:var(--perigo-borda)}
.erro-brief{
  font-size:13px;color:var(--perigo-txt);margin:var(--e2) 0 0;
  display:flex;gap:6px;align-items:flex-start;
}

/* --------------------------------------------------------------- opções -- */
.campo-brief .opcoes{display:flex;flex-direction:column;gap:2px}
.campo-brief .opcao{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-p);
  cursor:pointer;transition:background var(--transicao);font-size:14px;
}
.campo-brief .opcao:hover{background:var(--neutro)}
.campo-brief .opcao input{flex:0 0 auto;margin:0}
.campo-brief .opcao input:disabled + span{color:var(--texto-sutilissimo)}
.campo-brief .opcao:has(input:checked){background:var(--selecionado)}

/* --------------------------------------------------------------- escala -- */
.campo-brief .escala{display:flex;align-items:center;gap:var(--e3)}
.campo-brief .escala .ponta{
  font-size:12px;color:var(--texto-sutil);flex:0 0 auto;max-width:88px;line-height:1.2;
}
.campo-brief .escala .ponta:last-child{text-align:right}
.campo-brief .escala .trilho{
  flex:1;display:flex;justify-content:space-between;align-items:center;position:relative;
  padding:0 4px;
}
/* o traço que liga os pontos fica atrás, pra leitura virar uma régua só */
.campo-brief .escala .trilho::before{
  content:'';position:absolute;left:10px;right:10px;height:2px;background:var(--neutro);
}
.campo-brief .escala .marca{position:relative;cursor:pointer;padding:8px 2px}
.campo-brief .escala .marca input{position:absolute;opacity:0;width:0;height:0}
.campo-brief .escala .marca i{
  display:block;width:16px;height:16px;border-radius:50%;
  background:var(--superficie);border:2px solid var(--borda-forte);
  transition:background var(--transicao),border-color var(--transicao),transform var(--transicao);
}
.campo-brief .escala .marca:hover i{border-color:var(--marca)}
.campo-brief .escala .marca:has(input:checked) i{
  background:var(--marca);border-color:var(--marca);transform:scale(1.25);
}

/* ---------------------------------------------------------------- lista -- */
.campo-brief .lista-campos{display:flex;flex-direction:column;gap:var(--e2)}

/* --------------------------------------------------------------- anexos -- */
.campo-brief .anexos{display:flex;flex-direction:column;gap:6px}
.campo-brief .anexo{
  display:flex;align-items:center;gap:var(--e2);padding:8px 10px;font-size:13px;
  background:var(--superficie-afundada);border-radius:var(--r-p);
}
.campo-brief .anexo span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------------------------------------------- revisão do briefing -- */
/* Vermelho é o que não bate; verde é a contraproposta. A cor carrega o
   significado, mas nunca sozinha — o rótulo diz o mesmo por escrito. */
.resposta-brief{padding:var(--e4) 0;border-bottom:1px solid var(--borda)}
.resposta-brief:last-child{border-bottom:0}
.resposta-brief .pergunta{font-size:13px;color:var(--texto-sutilissimo);margin-bottom:4px}
.resposta-brief .valor{font-size:15px;color:var(--texto);white-space:pre-line;line-height:1.5}
.resposta-brief .valor.vazio{color:var(--texto-sutilissimo);font-style:italic}
.resposta-brief .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}

.obs-brief{
  display:flex;gap:var(--e3);padding:12px 14px;border-radius:var(--r-m);margin-top:var(--e3);
  border-left:3px solid var(--c);background:var(--bg);
}
.obs-brief.discordancia{--c:var(--perigo-borda);--bg:var(--perigo-bg)}
.obs-brief.sugestao{--c:var(--sucesso-borda);--bg:var(--sucesso-bg)}
.obs-brief.resolvido{opacity:.55}
.obs-brief .txt{flex:1;min-width:0}
.obs-brief .rot{
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  display:block;margin-bottom:2px;
}
.obs-brief.discordancia .rot{color:var(--perigo-txt)}
.obs-brief.sugestao .rot{color:var(--sucesso-txt)}
.obs-brief p{margin:0;font-size:14px;line-height:1.45}
.obs-brief .quem{font-size:11px;color:var(--texto-sutilissimo);margin-top:4px}

/* ------------------------------------------------------ régua dos eixos -- */
.eixo-linha{display:flex;align-items:center;gap:var(--e3);padding:7px 0}
.eixo-linha .lado{font-size:12px;color:var(--texto-sutil);flex:0 0 82px}
.eixo-linha .lado:last-child{text-align:right}
.eixo-linha .pista{
  flex:1;height:6px;background:var(--neutro);border-radius:var(--r-total);position:relative;
}
.eixo-linha .pista i{
  position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--marca);
}
.eixo-linha.meio .pista i{background:var(--texto-sutilissimo)}