/* version: 2026-11-02.R9
   app.css — R9 (02/11 — onda 3, T-M01 "Aplicar a marca Protivo" da Fase 4; docs/protivo/tarefas/FASE-4.md).
   Backup do estado anterior: BACK UP CENTRAL/02-11-2026-03-59-app.css.
   • TOKENS DA MARCA no topo do :root (os mesmos nomes de docs/protivo/marca/tokens.css: --p-marinho, --p-azul,
     --p-azul-claro, --p-laranja-acao, --p-laranja-logo, --p-laranja-texto, --p-fundo, --p-cartao, --p-linha, --p-texto,
     --p-texto-sec, --p-produtivo, --p-neutro, --p-improdutivo, --p-fonte e os raios) + 5 tons suaves DERIVADOS
     (--p-azul-suave, --p-improdutivo-suave/-texto/-borda, --p-neutro-suave). O @import do Google Fonts do tokens.css
     NÃO foi trazido de propósito: a fonte segue AUTO-HOSPEDADA (/static/fonts — LGPD/CSP, nenhuma chamada externa).
   • As variáveis ANTIGAS passam a APONTAR para os tokens quando são a mesma cor: --ink, --bg, --card, --accent, --cta,
     --cta-ink, --prod, --neu, --impr (idênticas) e --muted (#5B6B82 → token #5B6B85: diferença de 3/255 no azul,
     imperceptível; alinhada ao manual). --line/--line2/--soft/--soft2/--accent2/--accentsoft/--blue/--bluesoft/--sematv
     NÃO são cores da marca e ficam com o valor de antes (as 58 telas antigas dependem delas; a onda 4 refaz as telas).
   • LARANJA SÓ EM AÇÃO (manual §2.2): o laranja/âmbar que indicava STATUS saiu do CSS —
       --amber/--ambersoft (âmbar #B45309/#FBF1E2, usados como "atenção" em .led.a, gráficos e telas por var()) → CINZA
         neutro (--p-neutro/--p-neutro-suave): "atenção" passa a cinza; "risco/erro" é o magenta;
       --warn/--warnsoft (vermelho #DC2626/#FCEBEB, erro) → MAGENTA --p-improdutivo (manual §2.3: "erro usa o magenta,
         não vermelho vivo nem laranja") — vale para .err, .excl .x, .pill.r, .btn.perigo e .btn.pri.perigo;
       .banner.warn (bege/marrom) e .pill.a (âmbar; também usada para "Improdutivo") → magenta SUAVE;
       bordas soltas #e6b6ad/#e6c78a → token de borda magenta. Hex âmbar ESCRITOS DENTRO de outros templates
       (#8a5a12/#e6c78a em screenshots/politica/parede/liveview) ficam para a onda 4 (fora do escopo deste arquivo).
   • BOTÃO PRINCIPAL = laranja de ação: .btn.pri passa a fundo #F97316 com texto marinho #0B1B3A (6,1:1), como .btn.cta
     (que segue existindo, agora com peso 700 = "botões 700"). O manual pede no máximo UM por tela — telas antigas com mais
     de um .btn.pri ficam para a onda 4 (cada tela é refeita lá).
   • TÍTULOS 800 (h1–h4, letter-spacing -0,02em) com especificidade de elemento: qualquer regra de classe já existente
     (ex.: `.card h3` 700) continua valendo. Fonte do corpo = var(--p-fonte).
   • Cores soltas do tema VERDE antigo: tooltip do "?" (#13211b → marinho) e .tog.off (#c7d0ca → #CBD5E1).
   • NADA de layout, rota, lógica ou classe removida. A casca nova (menu lateral marinho, topo, componentes da onda 4)
     está em app/static/protivo.css R1, carregado DEPOIS deste arquivo só pelo base.html — o /sa (sa/base_sa.html) segue
     com o layout de sempre (.top/.nav/.main fixos daqui, intocados).
   R8 (29/10 — REBRAND para a marca PROTIVO; reskin completo aprovado pelo Murilo; manual de marca v1.0).
   Troca a identidade VERDE pela paleta do manual: marinho #0B1B3A (texto/base), azul #1D4ED8 (acento/links/UI),
   laranja #F97316 SÓ em CTA (classe nova .btn.cta, texto marinho) — laranja NUNCA indica status (§16/manual). Fonte
   passa a Plus Jakarta Sans AUTO-HOSPEDADA (/static/fonts/PlusJakartaSans.ttf, variável 200..800; sem chamar o Google
   = LGPD/CSP). Status de produtividade: produtivo #15803D, neutro #64748B, improdutivo #BE185D (antes verde/cinza/
   âmbar). Base 14px MANTIDA de propósito (o manual sugere 16px, mas subir a base reflui todo o painel denso e arrisca
   larguras de menu/tabela já no limite — fica p/ decisão). SÓ COR/FONTE: nenhuma regra de layout, rota, lógica ou dado
   muda; os cinzas-esverdeados soltos viraram slate neutro; o logo entra pelo base.html (<img> /static/protivo-logo.svg).
   R7 (16/10, T45 + T49 do PLANO comercial — pedidos do Murilo). ACRÉSCIMOS; nenhuma regra anterior foi
   alterada ou removida (a classe `.nav a .i` — quadradinho cinza — FICA: o /sa/base_sa.html ainda a usa).
   • (T49) `.nav a .ico` — ícone SVG de traço do menu lateral (_icones.html / base.html R12): 18 px, sem fundo, herda
     a cor do link (currentColor; item ativo = --accent como o texto). `margin:-1px` mantém EXATAMENTE a geometria
     do quadradinho de 16 px que ele substitui (caixa externa 16×16, mesmo centro, texto começa no mesmo x, altura
     do item igual): o item "Plano e armazenamento" já estava no limite da largura do menu (ver R3) e não pode
     perder 2 px.
   • (T45) `.btn.pri.perigo` — botão de perigo CHEIO (vermelho): combinação das classes que já existiam (`.pri` =
     cheio, `.perigo` = vermelho de ação destrutiva) usando só a variável --warn existente (sem paleta nova). Branco
     sobre #c0392b = 5,4:1 (AA). Usado no "Parar gravação" da tela ao vivo ENQUANTO grava (liveview.html R7).
   • (T45) `.lv-painel [hidden]` — CAUSA-RAIZ do aviso falso "Este navegador não permite gravar…": `.banner`
     (display:flex) e `.btn` (display:inline-flex) VENCEM a regra `[hidden]{display:none}` do navegador (estilo do
     autor > estilo do navegador), então `hidden` não escondia NADA no painel de gravação (aviso amarelo, nota,
     "Parar gravação", "Baixar vídeo" sempre visíveis). A regra devolve ao `hidden` o seu efeito SÓ dentro do painel
     ao vivo (escopo mínimo). ⚠️ O mesmo defeito existe em parede.html (`#btnPararTudo`, `.btn` + `hidden`) — NÃO
     corrigido aqui (fora do escopo pedido); registrado para decisão.
   R6 (14/10: `.pr-tab td .moeda{max-width:150px}` — na tela /sa/precos o campo de preço deixa de
   esticar com a célula; antes a coluna Segurança encostava/vazava na borda. Só essa regra foi acrescentada.)
   R5 (pedido do Murilo de 08/10: "melhora essa tela aqui [Planos & preços], precisa de um design melhor e
   mais profissional"; sa/precos.html R2): ACRÉSCIMOS — nada das regras anteriores muda: campo de formulário com
   rótulo em cima e explicação embaixo (`.campo`, `.dica`), campo de valor com "R$" na frente (`.moeda`), coluna
   numérica de tabela (`.num`) e o bloco `.pr-*` da tela de preços (cabeçalho, quadros, grade, linha do botão).
   R4 (pedido do Murilo de 08/10, 2ª rodada — "na tela de equipes eu ainda não gostei"; equipes.html R6):
   ACRÉSCIMOS para o cartão de equipe redesenhado — nada das regras R3 muda: bloco `.eq*` (cabeçalho, lista de
   pessoas com rolagem, seções com rótulo, linha seletor+botão, barra "Nova equipe"), `.btn.sm` (botão pequeno),
   `.btn.perigo` (ação destrutiva) e `details.mais` (recolher/mostrar com a mesma cara em todo o painel).
   R3 (pedido do Murilo de 08/10 — PLANO_TAREFAS 04/10 R30, tarefa G6 "botões e campos desalinhados";
   varredura tela por tela do painel em produção). SÓ APARÊNCIA — nenhuma regra de negócio, rota ou dado muda.
   • (C1) .btn ganha `justify-content:center`: botão esticado (login "Entrar", Usuários "Criar e gerar convite")
     mostrava o rótulo colado à esquerda, porque `text-align` não vale em inline-flex.
   • (C2) ESTILO ÚNICO DE CAMPO: não existia regra para <input>/<select>/<textarea>; cada tela estilizava na
     própria linha e vários campos ficavam com a aparência padrão do navegador (borda preta, 21–25 px) ao lado de
     botões de 33 px. A regra nova usa `:where()` — especificidade ZERO: vale como PADRÃO e perde para qualquer
     estilo já existente (classe ou inline), então só muda o que não tinha estilo. `min-height:33px` iguala a
     altura do campo à do botão (33 px) onde o estilo inline deixava menor (Dispositivos, Classificação, Alertas).
   • .login .btn — mesma altura dos campos do login (38 px).
   • .pill — `white-space:nowrap`: a etiqueta "sem classificação" quebrava em duas linhas dentro dela mesma.
   • .nav a — `white-space:nowrap` e fonte da tela atual 600 (era 700) com `letter-spacing` de compensação: o item
     "Plano e armazenamento" em negrito 700 não cabia em uma linha e empurrava os itens de baixo.
   • .cartoes — grade de cartões de mesma largura e mesma altura por fileira (tela Equipes): o último cartão não
     estica mais para a largura toda e o rodapé dos cartões fica alinhado.
   • .par — par caixa+rótulo que nunca se separa na quebra de linha (dias da semana).
   • td .btn — rótulo de botão em tabela não quebra em duas linhas (achado na conferência em janela de 1500 px).
   NÃO definida de propósito: a classe `.xs` (usada em 19 telas e sem regra no CSS). Defini-la encolheria textos
   que o colaborador lê (aviso da localização no Meu painel) — fica registrada para decisão do dono.
   R2 (reunião Alexandre 02/10). ACRÉSCIMOS (nada removido/alterado das regras R1):
   • .ajuda — o "?" com tooltip CSS puro (_ajuda.html, T01/T12/T16): bolinha clara que, no hover
     OU foco, mostra data-tip num balão posicionado acima. Sem JS.
   • .histobar — barras do histograma de alertas clicáveis (T16): foco/hover destacam.
   • .ssgrid.lista / .thumb.lg / .thumb.sm — layouts da grade de capturas (T15).
   • aviso "sem registros no período" reusa .banner.warn (nenhuma classe nova).
   R1 (primeiro cabeçalho versionado; estado anterior no backup §13).
   FATIA 7 do feedback (item 9 — "timeline colorida"): (1) as 4 cores da composição de
   produtividade viram VARIÁVEIS CSS (--prod / --neu / --impr / --sematv) e as classes .seg-*
   passam a referenciá-las — antes eram hex soltos; (2) novo componente da série por dia
   (.serie / .tip / .serie-leg) usado por dashboard.html e meu_painel.html via _serie.html.
   Escolha de cores (§16 — nunca "culpa"): produtivo=verde do tema, neutro=cinza-azulado,
   improdutivo=âmbar (NÃO vermelho), "sem atividade"=cinza claro. Tooltip é CSS puro (sem JS). */
:root{
  /* R9 (T-M01) — TOKENS DA MARCA PROTIVO (docs/protivo/marca/tokens.css). Fonte ÚNICA das cores: use estas
     variáveis, não valores soltos. Laranja de ação SÓ em botão principal e contador de notificações. */
  --p-marinho:#0B1B3A;        /* base: menu lateral, títulos, texto principal */
  --p-azul:#1D4ED8;           /* links, item selecionado, gráficos de apoio */
  --p-azul-claro:#60A5FA;     /* só sobre o marinho */
  --p-laranja-acao:#F97316;   /* SÓ ação: botão principal (texto marinho) e contador de notificações */
  --p-laranja-logo:#EA580C;   /* só no logo sobre fundo claro */
  --p-laranja-texto:#C2410C;  /* texto laranja sobre fundo claro */
  --p-fundo:#EEF1F6; --p-cartao:#FFFFFF; --p-linha:#E2E8F0; --p-texto:#0B1B3A; --p-texto-sec:#5B6B85;
  --p-produtivo:#15803D; --p-neutro:#64748B; --p-improdutivo:#BE185D;   /* status — nunca laranja */
  --p-fonte:'Plus Jakarta Sans',system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --p-raio-botao:10px; --p-raio-cartao:12px; --p-raio-janela:14px;
  /* tons suaves DERIVADOS das cores acima (fundos de selo/aviso, bordas) */
  --p-azul-suave:#E8EEFC; --p-neutro-suave:#F1F5F9; --p-neutro-texto:#475569;
  --p-produtivo-suave:#DCFCE7; --p-produtivo-texto:#166534;
  --p-improdutivo-suave:#FCE7F3; --p-improdutivo-texto:#9D174D; --p-improdutivo-borda:#FBCFE8;

  /* variáveis ANTIGAS (58 telas usam) → apontam para os tokens quando são a mesma cor */
  --ink:var(--p-marinho); --muted:var(--p-texto-sec); --line:#D7DEEA; --line2:#E9EDF4;
  --bg:var(--p-fundo); --card:var(--p-cartao); --soft:#E8ECF4; --soft2:#F5F7FB;
  --accent:var(--p-azul); --accent2:#2563EB; --accentsoft:#E4EBFC;
  /* R9: erro = magenta da marca (era vermelho #DC2626); "atenção" = cinza neutro (era âmbar — laranja nunca é status) */
  --warn:var(--p-improdutivo); --warnsoft:var(--p-improdutivo-suave);
  --amber:var(--p-neutro); --ambersoft:var(--p-neutro-suave);
  --blue:#1E40AF; --bluesoft:#E4EBFC;
  /* laranja de AÇÃO (CTA) — poucas áreas, muito destaque; texto marinho por cima (manual) */
  --cta:var(--p-laranja-acao); --cta-ink:var(--p-marinho);
  /* composição de produtividade (produtivo/neutro/improdutivo/sem atividade) — manual: laranja NUNCA indica status */
  --prod:var(--p-produtivo); --neu:var(--p-neutro); --impr:var(--p-improdutivo); --sematv:#DDE3EC;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* R8: Plus Jakarta Sans auto-hospedada (variável 200..800; sem chamar o Google = LGPD/CSP). format('truetype') +
   font-weight range funciona nos navegadores modernos; fallback de sistema cobre o resto. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('/static/fonts/PlusJakartaSans.ttf') format('truetype');
  font-weight:200 800;font-style:normal;font-display:swap;
}
body{font-family:var(--p-fonte);color:var(--ink);background:var(--bg);font-size:14px}
/* R9: títulos 800 (manual §5). Especificidade de ELEMENTO — regras de classe existentes (ex.: .card h3 700) valem. */
h1,h2,h3,h4{font-weight:800;letter-spacing:-.02em}
a{color:var(--accent);text-decoration:none}
.layout{display:flex;min-height:100vh}
/* topbar */
.top{position:fixed;top:0;left:0;right:0;height:52px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:0 16px;z-index:10}
.brand{font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;font-size:16px;letter-spacing:-.02em}
.brand .dot{width:18px;height:18px;border-radius:6px;background:var(--accent)}
/* R8: logo protivo (marca padrão) e logo de white-label (marca da agência), ambos servidos do próprio domínio */
.brand-logo{height:30px;width:auto;display:block}
.brand .wl-logo{height:24px;width:auto;max-width:150px;display:block;border-radius:4px}
.top .sp{flex:1}
.chip{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.chip.transp{background:var(--accentsoft);color:var(--accent);border:1px solid var(--accent2)}
.chip.role{background:var(--bluesoft);color:var(--blue)}
/* nav */
.nav{position:fixed;top:52px;bottom:0;left:0;width:210px;background:#fff;border-right:1px solid var(--line);
  padding:12px 8px;overflow:auto}
.nav .grp{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:12px 8px 4px}
.nav a{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);padding:8px 10px;border-radius:7px;white-space:nowrap}
.nav a:hover{background:var(--soft2)}
.nav a.on{background:var(--accentsoft);color:var(--accent);font-weight:600;letter-spacing:-.1px}
.nav a .i{width:16px;height:16px;border-radius:5px;background:#CBD5E1;flex:0 0 auto}
.nav a.on .i{background:var(--accent2)}
/* R7 (T49): ícone SVG de traço do menu (_icones.html) — herda a cor do link; mesma geometria do quadradinho .i */
.nav a .ico{width:18px;height:18px;flex:0 0 auto;margin:-1px}
/* content */
.main{margin-left:210px;margin-top:52px;padding:20px 24px;width:calc(100% - 210px)}
h1.pg{font-size:20px;margin:0 0 2px} .sub{color:var(--muted);margin:0 0 16px;font-size:13px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.card h3{margin:0 0 12px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.card h3 .r{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.kpi{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.kpi .l{font-size:11px;color:var(--muted);font-weight:600}
.kpi .v{font-size:26px;font-weight:800;line-height:1.1;margin-top:3px}
.kpi .d{font-size:11px;color:var(--accent);font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:7px 8px;border-bottom:1px solid var(--line)}
td{padding:8px;border-bottom:1px solid var(--line2)}
tr:last-child td{border-bottom:0}
.avatar{width:22px;height:22px;border-radius:50%;background:#CBD5E1;display:inline-block;vertical-align:middle;margin-right:8px}
.bar{height:9px;border-radius:6px;background:var(--line2);overflow:hidden;min-width:80px}
.bar>i{display:block;height:100%;background:var(--accent2)}
.barwrap{display:flex;align-items:center;gap:9px}.barwrap .n{font-weight:700;width:44px;text-align:right}
.pill{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
/* R9: .pill.a era âmbar (laranja como status) → magenta suave (a classe marca "atenção" e também "Improdutivo") */
.pill.g{background:var(--accentsoft);color:var(--accent)}.pill.a{background:var(--p-improdutivo-suave);color:var(--p-improdutivo-texto)}
.pill.r{background:var(--warnsoft);color:var(--warn)}.pill.b{background:var(--bluesoft);color:var(--blue)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:700;padding:8px 14px;border-radius:8px;border:1px solid var(--accent);color:var(--accent);background:#fff;cursor:pointer}
/* R9 (T-M01): botão PRINCIPAL = laranja de ação com texto marinho (manual §2.2; 6,1:1). Era azul cheio. */
.btn.pri{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}.btn.gray{border-color:var(--line);color:var(--muted)}
.btn.pri:hover{filter:brightness(1.05)}
/* R8: botão de AÇÃO/CTA em laranja do manual (texto marinho) — mesmo visual do .btn.pri desde a R9 */
.btn.cta{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);font-weight:700}
/* R9: o nome do tokens.css da marca para o botão principal — completo (vale sem a classe .btn) */
.btn-principal{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;font-size:13px;
  font-weight:700;padding:8px 14px;border-radius:var(--p-raio-botao);border:1px solid var(--cta);background:var(--cta);
  color:var(--cta-ink);cursor:pointer;text-decoration:none}
/* R9: números de indicador/tabela alinhados (manual §5) */
table td.num,.indicador{font-variant-numeric:tabular-nums}
/* R3 (C2): estilo ÚNICO de campo de formulário, como PADRÃO de especificidade zero (:where) — qualquer estilo já
   existente (classe ou inline) continua valendo; só os campos sem estilo e as alturas menores que a do botão mudam. */
:where(.main, .login) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=range]):not([type=color]), select, textarea){
  font-family:inherit;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:7px 10px;min-height:33px}
:where(.main, .login) :where(textarea){min-height:64px}
/* campos de data/hora têm um controle interno mais alto: altura fixa = a do botão (33 px) */
:where(.main, .login) :where(input[type=date], input[type=time], input[type=datetime-local]){height:33px}
/* R3: grade de cartões de mesma largura e mesma altura por fileira (Equipes) */
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px;align-items:stretch}
.cartoes>.card{display:flex;flex-direction:column;min-width:0}
.cartoes>.card>.rodape{margin-top:auto}
/* R3: botão de ação dentro de tabela nunca quebra o rótulo em duas linhas ("abrir ▸" quebrava em janela de 1500 px) */
td .btn{white-space:nowrap}
/* R3: par caixa+rótulo que não se separa na quebra de linha */
.par{display:inline-block;white-space:nowrap}
/* R4: botão pequeno e botão de ação destrutiva */
.btn.sm{padding:5px 10px;font-size:12px}
.btn.perigo{color:var(--warn);border-color:var(--p-improdutivo-borda)}
/* R7 (T45): perigo CHEIO = .pri + .perigo — "Parar gravação" enquanto grava (liveview.html R7). R9: magenta (era
   vermelho), branco sobre #BE185D = 6,0:1 (AA); vence o laranja do .pri pela especificidade (3 classes). */
.btn.pri.perigo{background:var(--warn);border-color:var(--warn);color:#fff}
/* R4: recolher/mostrar (sem JavaScript) */
details.mais>summary{cursor:pointer;font-size:12px;font-weight:700;color:var(--accent);list-style:none;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
details.mais>summary::-webkit-details-marker{display:none}
details.mais>summary::before{content:"▸";font-size:10px}
details.mais[open]>summary::before{content:"▾"}
/* R4: cartão de equipe (equipes.html R6) */
.eq-nova{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.eq-nova input[name=nome]{flex:0 1 340px;min-width:200px}
.card.eq h3{font-size:15px;margin-bottom:8px}
.eq-membros{min-height:102px;max-height:204px;overflow-y:auto;border-top:1px solid var(--line2);scrollbar-width:thin}
.eq-membros.vazio{display:flex;align-items:center;justify-content:center;background:var(--soft2);border-radius:0 0 8px 8px}
.eq-membros.vazio table{width:auto}
.eq-membros td{padding:8px 4px;vertical-align:middle}
.eq-membros td:first-child:not(.eq-vazio){width:30px;padding-right:0}
.eq-membros .avatar{margin-right:0}
.eq-quem{width:100%;line-height:1.3;overflow-wrap:anywhere}
.eq-acao{text-align:right;white-space:nowrap}
.eq-acao form{display:inline}
.eq-membros td.eq-vazio{padding:10px 12px;text-align:center;border:0;line-height:1.5;color:var(--muted)}
.eq-sec{border-top:1px solid var(--line2);padding-top:10px;margin-top:10px}
.eq-rot{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px}
.eq-linha{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.eq-linha:last-child{margin-bottom:0}
.eq-linha select,.eq-linha input[name=nome]{flex:1;min-width:0}
.eq-form{margin-top:8px}
.eq-exp{font-size:13px;text-wrap:balance}   /* em cartão estreito a frase quebra no meio, não dentro do horário */
.eq-exp.proprio{font-weight:700;color:var(--blue)}
.cartoes>.card>.eq-sec.rodape{padding-top:10px}
/* R4: as 5 faixas do cartão de equipe (nome · pessoas · adicionar · expediente · renomear/apagar) se alinham entre
   os cartões da MESMA fileira — cada faixa tem a altura da maior daquela fileira, então fileira de equipes pequenas
   não ganha espaço em branco. Navegador sem `subgrid`: vale a coluna flex de R3 (cartões de mesma altura). */
@supports (grid-template-rows:subgrid){
  .cartoes>.card.eq{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;grid-row:span 5;row-gap:0}
  .cartoes>.card.eq>.rodape{margin-top:10px}
}
/* os 7 dias numa linha só, em qualquer largura de cartão (o "dom" caía sozinho na linha de baixo) */
.eq-dias{display:grid;grid-template-columns:repeat(7,max-content);justify-content:space-between;max-width:380px;margin-bottom:8px}
.eq-dias label{cursor:pointer}
.eq-horas{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.eq-horas label{display:inline-flex;align-items:center;gap:6px}
/* R5: campo de formulário com rótulo em cima e explicação embaixo; valor em reais com "R$" na frente */
.campo{display:flex;flex-direction:column;gap:5px;min-width:0}
.campo>label{font-size:12px;font-weight:700}
.campo>label .opc{font-weight:600;color:var(--muted);font-size:11px;margin-left:4px}
.campo>input{width:100%}
.dica{font-size:12px;color:var(--muted);line-height:1.45}
.moeda{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}
.moeda>span{display:flex;align-items:center;padding:0 11px;background:var(--soft2);border-right:1px solid var(--line);color:var(--ink);font-weight:600;font-size:13px}
.moeda>input{flex:1;min-width:0;border:0;border-radius:0;outline:0;font-size:17px;font-weight:700;padding:9px 11px;font-variant-numeric:tabular-nums}
.moeda>input::placeholder{font-weight:400;color:var(--muted)}
.moeda:focus-within{outline:2px solid var(--accent2);outline-offset:1px}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}
/* R5: área do dono — Planos & preços (sa/precos.html R2) */
.pr-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.pr-topo .sub{max-width:780px}
.pr-topo>.pill{margin-top:4px}
.pr-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.pr-kpis .kpi{min-width:0}
.pr-kpis .kpi .v{line-height:30px;font-variant-numeric:tabular-nums}   /* altura fixa: as 3 legendas na mesma linha */
.pr-kpis .kpi .v.pr-lim{font-size:20px}
.pr-kpis .kpi .v.pr-lim>span{color:var(--line);margin:0 8px}
.pr-d{font-size:12px;color:var(--muted);margin-top:4px}
.pr-grade{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:14px}
@media (max-width:1280px){.pr-grade{grid-template-columns:minmax(0,1fr)}}
.pr-grade .err{margin:0 0 14px}
.pr-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.pr-campos .moeda{max-width:300px}   /* valor de poucos dígitos: campo não estica com a coluna */
/* R6: nas tabelas de catálogo (/sa/precos) o campo de preço não estica com a célula — valor de poucos
   dígitos; sem isto a última coluna (Segurança) encostava/vazava na borda. Alinhado à esquerda. */
.pr-tab td .moeda{max-width:150px}
.pr-motivo{margin-top:16px}
.pr-acao{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line2)}
.pr-eq{background:var(--soft2);border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:4px}
.pr-conta{text-align:right;font-variant-numeric:tabular-nums}
.pr-calc .dica{margin-top:10px}
/* histórico: colunas de valor com largura fixa, perto da data — em tela larga ficavam soltas no meio da tabela */
.pr-hist th:nth-child(1){width:250px}.pr-hist th:nth-child(2),.pr-hist th:nth-child(3){width:190px}
.pr-hist th:nth-child(4),.pr-hist td:nth-child(4){padding-left:32px}
.banner{border-radius:9px;padding:11px 14px;font-size:13px;display:flex;gap:10px;align-items:center;margin-bottom:14px}
.banner.ok{background:var(--accentsoft);border:1px solid var(--accent2);color:var(--accent)}
/* R9: aviso de atenção = magenta SUAVE da marca (era bege/marrom — laranja nunca indica status) */
.banner.warn{background:#FDF2F8;border:1px solid var(--p-improdutivo-borda);color:var(--p-improdutivo-texto)}
.banner.info{background:var(--bluesoft);border:1px solid #b9cfe4;color:var(--blue)}
/* R7 (T45): no painel da tela ao vivo, `hidden` esconde de verdade (.banner/.btn não o sobrepõem mais) */
.lv-painel [hidden]{display:none !important}
/* timeline */
.tl{display:flex;height:30px;border-radius:7px;overflow:hidden;border:1px solid var(--line)}
.tl>span{display:block}
.seg-produtivo{background:var(--prod)}.seg-neutro{background:var(--neu)}.seg-improdutivo{background:var(--impr)}.seg-ocioso{background:var(--sematv)}
.tlaxis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-top:4px}
/* série por dia (dashboard / meu_painel via _serie.html) — barra empilhada por composição de
   TEMPO + legenda + tooltip CSS puro (sem JS). FATIA 7, item 9. */
.serie{display:flex;align-items:flex-end;gap:4px;height:126px;margin-top:8px}
.serie .dia{position:relative;flex:1 1 0;min-width:5px;display:flex;flex-direction:column;height:100%}
.serie .col{flex:1 1 auto;min-height:0;display:flex;flex-direction:column-reverse;
  border:1px solid var(--line);border-radius:3px 3px 0 0;overflow:hidden;background:var(--soft2)}
.serie .col>span{display:block;width:100%;min-height:2px}
.serie .col.vazio{background:repeating-linear-gradient(45deg,#EEF2F8,#EEF2F8 4px,#E2E8F2 4px,#E2E8F2 8px)}
.serie .rot{flex:0 0 13px;font-size:9px;color:var(--muted);text-align:center;line-height:13px;
  margin-top:3px;white-space:nowrap;overflow:hidden}
.serie .dia .tip{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  z-index:30;width:198px;background:#fff;border:1px solid var(--line);border-radius:8px;
  box-shadow:0 6px 20px rgba(11,27,58,.16);padding:9px 11px;font-size:11.5px;color:var(--ink);
  text-align:left;white-space:normal;pointer-events:none}
.serie .dia:hover{z-index:31}
.serie .dia:hover .tip{display:block}
.serie .tip .l{margin-top:5px;color:var(--muted)}
.serie .tip .q{display:flex;align-items:center;gap:6px;margin-top:3px}
.serie .tip .sw{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.serie-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:9px;font-size:11px;color:var(--muted)}
.serie-leg span{display:inline-flex;align-items:center;gap:5px}
.serie-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.grid{display:grid;gap:11px}
.thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumb .img{height:70px;background:repeating-linear-gradient(135deg,#E2E8F2,#E2E8F2 7px,#EEF2F8 7px,#EEF2F8 14px);filter:blur(1px);position:relative}
.thumb .img::after{content:"";position:absolute;inset:9px;border:1px dashed #C3CBD9;border-radius:4px}
.thumb .cap{display:flex;align-items:center;justify-content:space-between;padding:5px 8px;font-size:11px}
.badge{font-size:10px;font-weight:800;color:#fff;background:var(--accent2);border-radius:999px;padding:1px 7px}
.led{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.led.g{background:var(--accent2)}.led.a{background:var(--amber)}.led.r{background:var(--warn)}.led.m{background:#94A3B8}
.kv{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line2);font-size:13px;align-items:center}
.kv .k{flex:1}.kv .k .d{font-size:11px;color:var(--muted)}
.tog{display:inline-block;width:34px;height:18px;border-radius:999px;background:var(--accent2);position:relative}
.tog::after{content:"";position:absolute;top:2px;right:2px;width:14px;height:14px;border-radius:50%;background:#fff}
.tog.off{background:#CBD5E1}.tog.off::after{right:auto;left:2px}
.excl{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.excl .x{font-size:12px;font-weight:700;background:var(--warnsoft);color:var(--warn);border:1px solid var(--p-improdutivo-borda);border-radius:7px;padding:4px 9px}
/* login */
.login{max-width:380px;margin:9vh auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.login h1{font-size:22px;margin:6px 0 2px;color:var(--accent)}
.login label{display:block;font-size:12px;color:var(--muted);margin:12px 0 5px;font-weight:600}
.login input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.login .btn{min-height:38px}
.login .hint{font-size:11.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.err{background:var(--warnsoft);color:var(--warn);border:1px solid var(--p-improdutivo-borda);border-radius:8px;padding:8px 11px;font-size:12.5px;margin-top:10px}
.mb{margin-bottom:14px}.mt{margin-top:14px}.muted{color:var(--muted)}.small{font-size:12px}.right{margin-left:auto}
/* "?" de ajuda com tooltip CSS puro (_ajuda.html) — T01/T12/T16. Sem JS. */
.ajuda{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:4px;border-radius:50%;background:var(--line);color:var(--muted);font-size:9.5px;font-weight:800;
  cursor:help;vertical-align:middle;user-select:none}
.ajuda:hover,.ajuda:focus{background:var(--accent2);color:#fff;outline:none}
.ajuda::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  display:none;z-index:40;width:210px;background:var(--p-marinho);color:#fff;border-radius:7px;padding:7px 10px;
  font-size:11px;font-weight:600;line-height:1.35;text-align:left;white-space:normal;letter-spacing:normal;
  text-transform:none;box-shadow:0 6px 20px rgba(11,27,58,.22);pointer-events:none}
.ajuda:hover::after,.ajuda:focus::after{display:block}
/* histograma de alertas clicável (T16) */
.histobar{display:block;border:0;cursor:pointer;transition:filter .1s}
.histobar:hover,.histobar:focus{filter:brightness(.88);outline:2px solid var(--accent2);outline-offset:1px}
/* grade das capturas (T15): nº por linha vem inline; aqui os tamanhos de miniatura e o modo lista */
.thumb.sm .img{height:52px}.thumb.lg .img{height:120px}
.ssgrid.lista{display:block}
.ssgrid.lista .thumb{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ssgrid.lista .thumb .img{width:120px;height:62px;flex:0 0 auto}
.ssgrid.lista .thumb .cap{flex:1;justify-content:flex-start;gap:12px}