/* Layout flutuante — 2026-10-13, pedido do Thiago: módulos na barra de cima, menu de cada
   módulo na lateral, visual "moderno flutuante com cores refinadas" inspirado no site da Price
   (pricecertificadoradigital.com). Prévia aprovada antes de aplicar.

   Carregado DEPOIS de portal.css/controle.css/paralegal.css: só redefine tokens e a casca
   (barra de cima, laterais, cartões). Nenhuma tela precisou mudar.
   Paleta: azul do logo Plano (#1f4f79) como base, cobre da Price como único acento (entra
   no lugar do --gold), vermelho fica só para alerta. Sombras tingidas de azul, nunca preto. */

@font-face{font-family:"Open Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/static/fonts/open-sans-latin.woff2") format("woff2")}

:root{
  --bg:#eef2f6; --card:#ffffff; --ink:#1c2b3a; --mut:#5c6672; --line:#dfe6ee;
  --brand:#1f4f79; --brand-ct:#ffffff; --navy:#12324f; --gold:#a06d3c;
  --acento:#a06d3c; --acento-bg:#f7efe5; --chip:#eaf0f6;
  --err:#c41718; --errbg:#fbeaea;
  --sombra:0 10px 30px rgba(18,50,79,.07), 0 1px 2px rgba(18,50,79,.06);
  --sombra-forte:0 18px 44px rgba(18,50,79,.16);
  --topbar-bg:rgba(255,255,255,.80);
  --raio:14px;
  --topo-h:60px;      /* altura da barra de cima */
  --topo-ocupa:84px;  /* barra + respiro em volta (12px em cima, 12px embaixo) */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0c1724; --card:#13243a; --ink:#e4ebf3; --mut:#9aa8b8; --line:#1f3550;
    --brand:#8fb6dd; --brand-ct:#0b1624; --navy:#e4ebf3; --gold:#cfa066;
    --acento:#cfa066; --acento-bg:#2a2418; --chip:#1a3150;
    --err:#ff8a8a; --errbg:#3a1717;
    --sombra:0 10px 30px rgba(0,0,0,.28); --sombra-forte:0 18px 44px rgba(0,0,0,.4);
    --topbar-bg:rgba(19,36,58,.84); }
}
:root[data-theme="dark"]{
  --bg:#0c1724; --card:#13243a; --ink:#e4ebf3; --mut:#9aa8b8; --line:#1f3550;
  --brand:#8fb6dd; --brand-ct:#0b1624; --navy:#e4ebf3; --gold:#cfa066;
  --acento:#cfa066; --acento-bg:#2a2418; --chip:#1a3150;
  --err:#ff8a8a; --errbg:#3a1717;
  --sombra:0 10px 30px rgba(0,0,0,.28); --sombra-forte:0 18px 44px rgba(0,0,0,.4);
  --topbar-bg:rgba(19,36,58,.84);
}

/* 2026-10-13 (Thiago): texto volta para Source Sans 3, como era antes — a Open Sans deixava as letras maiores */
body{font-family:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:-.003em}
h1,h2,h3{color:var(--navy)}

/* ---------- barra de cima flutuante: marca | módulos | tema + usuário ---------- */
.topbar.tf{position:sticky;top:12px;z-index:30;margin:12px 16px 0;height:var(--topo-h);padding:0 10px 0 16px;gap:18px;
  border:1px solid rgba(255,255,255,.65);border-radius:var(--raio);box-shadow:var(--sombra);flex-wrap:nowrap}
:root[data-theme="dark"] .topbar.tf{border-color:var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .topbar.tf{border-color:var(--line)}}
.tf-marca{display:flex;align-items:center;gap:10px;padding-right:18px;border-right:1px solid var(--line);height:34px;
  text-decoration:none;flex:none}
.tf-marca img{height:26px;display:block}
.tf-marca span{font:700 15px Montserrat,sans-serif;color:var(--navy);letter-spacing:-.01em;white-space:nowrap}
:root[data-theme="dark"] .tf-marca img{background:#fff;border-radius:6px;padding:3px 5px;height:28px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tf-marca img{background:#fff;border-radius:6px;padding:3px 5px;height:28px}}

.tf-modulos{display:flex;gap:4px;align-items:center;height:100%;min-width:0;overflow-x:auto;scrollbar-width:none}
.tf-modulos::-webkit-scrollbar{display:none}
.tf-mod{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:10px;flex:none;
  font-weight:600;font-size:14px;color:var(--mut);text-decoration:none;white-space:nowrap;
  transition:background-color .15s var(--ease),color .15s var(--ease)}
.tf-mod .ph{font-size:18px;vertical-align:0}
.tf-mod .tf-ext{font-size:13px;opacity:.7}
.tf-mod:hover{background:var(--chip);color:var(--ink)}
.tf-mod.on{background:var(--card);color:var(--navy);box-shadow:0 2px 8px rgba(18,50,79,.10)}
.tf-mod.on::after{content:"";position:absolute;left:14px;right:14px;bottom:-10px;height:3px;border-radius:3px;background:var(--acento)}
:root[data-theme="dark"] .tf-mod.on{background:var(--chip);color:var(--ink);box-shadow:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tf-mod.on{background:var(--chip);color:var(--ink);box-shadow:none}}
.tf-mod.off{opacity:.42;pointer-events:none;cursor:default}

.tf-direita{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.topbar.tf .tema-flutuante{width:38px;height:38px;border-radius:10px;margin:0;background:var(--card);border:1px solid var(--line);font-size:15px}
.tf-eu{position:relative}
.tf-eu summary{display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);cursor:pointer;list-style:none;user-select:none}
.tf-eu summary::-webkit-details-marker{display:none}
.tf-eu summary:hover,.tf-eu[open] summary{background:var(--chip)}
.tf-av{width:32px;height:32px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font:700 13px Montserrat,sans-serif;flex:none}
:root[data-theme="dark"] .tf-av{background:var(--acento);color:#1a1206}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tf-av{background:var(--acento);color:#1a1206}}
.tf-eu-txt{line-height:1.15;min-width:0}
.tf-eu-txt b{display:block;font-size:13px;color:var(--ink);white-space:nowrap}
.tf-eu-txt small{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap}
.tf-eu summary .ph-caret-down{color:var(--mut);font-size:14px}
.tf-eu-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sombra-forte);padding:6px;z-index:40}
.tf-eu-menu .tf-eu-dados{padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:12.5px;color:var(--mut)}
.tf-eu-menu .tf-eu-dados b{display:block;color:var(--ink);font-size:13.5px}
.tf-eu-menu a,.tf-eu-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;border:0;background:none;
  color:var(--ink);font:500 14px inherit;font-family:inherit;text-decoration:none;cursor:pointer;text-align:left}
.tf-eu-menu a:hover,.tf-eu-menu button:hover{background:var(--chip);opacity:1}
.tf-eu-menu .ph{color:var(--mut)}
.tf-eu-menu form{margin:0}

/* sub-abas do Financeiro (único módulo ainda sem menu lateral) */
.tf-subnav{display:flex;gap:4px;flex-wrap:wrap;margin:12px 16px 0;padding:6px;background:var(--card);border-radius:12px;box-shadow:var(--sombra)}
.tf-subnav a{padding:7px 12px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500}
.tf-subnav a:hover,.tf-subnav a.ativo{background:var(--chip);color:var(--brand)}

/* ---------- cartões ---------- */
.card{border-radius:var(--raio);border-color:transparent;box-shadow:var(--sombra)}
:root[data-theme="dark"] .card{border-color:var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .card{border-color:var(--line)}}
.ct-principal .card,.pl-principal .card{border-radius:var(--raio)}

/* ---------- casca com menu lateral flutuante (Central, Controle, Paralegal) ---------- */
.ct-casca,.pl-casca{gap:16px;padding:16px;min-height:calc(100vh - var(--topo-ocupa))}
.ct-casca{grid-template-columns:252px minmax(0,1fr)}
.pl-casca{grid-template-columns:232px minmax(0,1fr)}
.ct-principal,.pl-principal{padding:4px 4px 40px}
.ct-lateral,.pl-lateral{border:0;border-radius:var(--raio);box-shadow:var(--sombra);padding:16px 10px;
  top:calc(var(--topo-ocupa) + 4px);height:auto;max-height:calc(100vh - var(--topo-ocupa) - 20px);align-self:start}
:root[data-theme="dark"] .ct-lateral,:root[data-theme="dark"] .pl-lateral{border:1px solid var(--line)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ct-lateral,:root:not([data-theme="light"]) .pl-lateral{border:1px solid var(--line)}}
.ct-lateral-titulo,.pl-lateral-titulo{font-size:12px;letter-spacing:.06em}
.ct-grupo{font-size:11px;letter-spacing:.06em;padding:14px 10px 6px}
.ct-item,.pl-item{border-radius:9px;padding:8px 10px}
.ct-item.on,.pl-item.on{box-shadow:inset 3px 0 0 var(--acento)}
.ct-cont,.pl-cont{font-size:12px;font-weight:700;background:var(--bg);padding:1px 8px;border-radius:999px}
.ct-cont.ct-alerta,.pl-cont.pl-alerta{background:var(--errbg)}
.ct-novo,.pl-novo{height:40px;border-radius:10px;background:var(--navy);border-color:var(--navy);color:#fff}
.ct-novo:hover,.pl-novo:hover{color:#fff}
:root[data-theme="dark"] .ct-novo,:root[data-theme="dark"] .pl-novo{background:var(--acento);border-color:var(--acento);color:#1a1206}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ct-novo,:root:not([data-theme="light"]) .pl-novo{background:var(--acento);border-color:var(--acento);color:#1a1206}}
.ct-numero,.ct-bloco,.ct-pend a{border-radius:12px;border-color:transparent;box-shadow:var(--sombra)}
.ct-pend a{border-left:3px solid var(--err)}
.ct-pend a.ok{border-left-color:var(--ok)}

/* telas de altura cheia (Digisac embutido) descontam a barra flutuante */
.wrap.cheio{height:calc(100vh - var(--topo-ocupa))}

/* DONNA: mesmo cartão flutuante */
.donna-flutuante{border-radius:16px;border-color:transparent;box-shadow:var(--sombra-forte)}

@media (max-width:1100px){
  .tf-mod{padding:0 10px}
  .tf-marca span{display:none}
}
@media (max-width:900px){
  .ct-casca,.pl-casca{grid-template-columns:1fr;padding:12px}
  .ct-lateral,.pl-lateral{position:static;max-height:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:8px}
  .pl-lateral-titulo,.pl-sep{display:none}
  .pl-item{white-space:nowrap;flex:none}
  .pl-novo{margin:0;flex:none}
}
@media (max-width:680px){
  .topbar.tf{position:static;height:auto;flex-wrap:wrap;padding:8px;margin:8px 8px 0;row-gap:6px}
  .tf-marca{border-right:0;padding-right:0}
  .tf-modulos{order:3;flex:1 1 100%}
  .tf-mod.on::after{bottom:-4px}
  .tf-eu-txt{display:none}
}
.pl-cont:empty,.ct-cont:empty{display:none}

/* 2026-10-13 — Mensageiro: contador de não lidas na aba e avatar (foto ou ícone) no topo */
.tf-qt{background:var(--acento);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-grid;place-items:center;padding:0 5px;line-height:1}
.tf-av .ph{font-size:16px;vertical-align:0}
.msg-wrap ~ .rodape{padding:4px 0 8px}

/* 2026-10-13 — FAX (o Mensageiro ganhou nome e desenho, pedido do Thiago). O ícone é um desenho
   próprio (static/img/fax.svg), pintado com a cor do texto, como os ícones Phosphor. */
.ico-fax{display:inline-block;width:1.15em;height:1.15em;flex:none;background:currentColor;vertical-align:-.2em;
  -webkit-mask:url("/static/img/chat.svg") center/contain no-repeat;mask:url("/static/img/chat.svg") center/contain no-repeat}
.tf-mod .ico-fax{width:19px;height:19px}

/* Painel flutuante do FAX: abre ao lado (meia tela, à direita), sem sair da página; arrasta pelo
   topo e muda de tamanho pelas bordas. Posição e tamanho ficam no navegador (static/js/fax_painel.js). */
.fax-painel{position:fixed;z-index:45;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:0 24px 60px rgba(18,50,79,.24),0 2px 6px rgba(18,50,79,.10);overflow:hidden;min-width:360px;min-height:380px}
:root[data-theme="dark"] .fax-painel{box-shadow:0 24px 60px rgba(0,0,0,.5)}
.fax-topo{display:flex;align-items:center;gap:10px;height:46px;padding:0 8px 0 14px;border-bottom:1px solid var(--line);
  cursor:grab;user-select:none;touch-action:none;flex:none;background:var(--topbar-bg)}
.fax-topo:active{cursor:grabbing}
.fax-topo .ico-fax{width:22px;height:22px;color:var(--acento)}
.fax-topo b{font:800 15px Montserrat,sans-serif;letter-spacing:.08em;color:var(--navy)}
.fax-topo small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fax-topo .fax-acoes{margin-left:auto;display:flex;gap:2px}
.fax-topo button,.fax-topo a{width:32px;height:32px;border-radius:9px;border:0;background:none;color:var(--mut);display:grid;place-items:center;
  font-size:17px;padding:0;cursor:pointer;text-decoration:none}
.fax-topo button:hover,.fax-topo a:hover{background:var(--chip);color:var(--brand);opacity:1}
.fax-painel iframe{flex:1;width:100%;border:0;background:var(--bg)}
.fax-veu{position:absolute;inset:46px 0 0;display:none;z-index:2}
.fax-painel.mexendo .fax-veu{display:block}
.fax-painel.mexendo iframe{pointer-events:none}
.fax-borda{position:absolute;z-index:3}
.fax-borda.e{left:0;top:46px;bottom:12px;width:7px;cursor:ew-resize}
.fax-borda.d{right:0;top:46px;bottom:12px;width:7px;cursor:ew-resize}
.fax-borda.b{bottom:0;left:12px;right:12px;height:7px;cursor:ns-resize}
.fax-borda.be{bottom:0;left:0;width:16px;height:16px;cursor:nesw-resize}
.fax-borda.bd{bottom:0;right:0;width:16px;height:16px;cursor:nwse-resize}
@media (max-width:680px){
  .fax-painel{inset:0 !important;width:auto !important;height:auto !important;border-radius:0;min-width:0}
  .fax-borda{display:none}
  .fax-topo{cursor:default}
}

/* 2026-10-14 (Thiago): "não quero que os botões ocupem a tela toda ... reduzir o tamanho de todos e estabelecer um
   padrão". Botão de formulário (Salvar, Excluir, Arquivar, Encaminhar...) tem tamanho próprio, texto centralizado,
   alinhado à esquerda — inclusive os que ainda trazem style="width:100%" no HTML. Login/trocar senha (.estreito)
   continuam com o botão largo. */
button[style*="width:100%"],button[style*="width: 100%"],.botao[style*="width:100%"]{
  width:auto !important;min-width:150px;max-width:100%;justify-content:center;padding:8px 18px;font-size:13.5px}
.wrap.estreito button[style*="width:100%"],.wrap.estreito button[style*="width: 100%"]{width:100% !important}

/* 2026-10-14 (Thiago): botões lado a lado — o Salvar e os formulários de um botão logo abaixo dele (static/js/acoes_padrao.js) */
.acoes-linha{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.acoes-linha > form,.acoes-linha > button,.acoes-linha > form > button{margin:0 !important}

/* 2026-10-14 (Thiago): confirmação de Excluir / Cancelar / Arquivar — "telinha de fundo claro, símbolo de atenção".
   Sempre clara, também no tema escuro. */
.pc-fundo{position:fixed;inset:0;z-index:2000;background:rgba(12,23,36,.38);display:flex;align-items:center;justify-content:center;padding:16px;
  animation:pc-entra .12s ease-out}
.pc-caixa{background:#ffffff;color:#1c2b3a;width:100%;max-width:420px;border-radius:14px;border-top:4px solid #f3b23a;
  box-shadow:0 18px 44px rgba(18,50,79,.22);padding:20px 22px 18px;font-family:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.pc-topo{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.pc-ico{flex:none;width:46px;height:46px;border-radius:50%;background:#fff6e3;display:grid;place-items:center}
.pc-caixa h3{margin:0;font:700 17px Montserrat,sans-serif;color:#1c2b3a}
.pc-caixa p{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:#3d4a57}
.pc-rot{display:block;font-size:12.5px;font-weight:600;color:#5c6672;margin:0 0 4px}
.pc-caixa textarea{width:100%;min-height:70px;padding:8px 10px;border:1px solid #dfe6ee;border-radius:8px;background:#f6f8fb;color:#1c2b3a;font:inherit;resize:vertical}
.pc-erro{color:#c41718;font-size:12.5px;margin-top:4px}
.pc-botoes{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.pc-botoes button{min-width:110px;justify-content:center;padding:8px 16px;font-size:13.5px;border-radius:8px;cursor:pointer;font-weight:600}
.pc-voltar{background:#ffffff !important;color:#1f4f79 !important;border:1px solid #c9d5e2 !important}
.pc-ok{background:#1f4f79 !important;color:#fff !important;border:1px solid #1f4f79 !important}
.pc-ok.pc-perigo{background:#c41718 !important;border-color:#c41718 !important}
@keyframes pc-entra{from{opacity:0}to{opacity:1}}

/* 2026-10-14 (Thiago): ícone do CHAT+ = balão de conversa (static/img/chat.svg). Na barra de cima e no painel:
   VERDE sem mensagem não lida, VERMELHO com mensagem não lida (classe chat-nao-lidas no <html>, posta por
   static/js/mensageiro_som.js a cada contagem). */
#tf-fax .ico-fax,.fax-topo .ico-fax{background:#1f9d55}
html.chat-nao-lidas #tf-fax .ico-fax,html.chat-nao-lidas .fax-topo .ico-fax{background:#d63a3a}