/* ============================================================================
   APVS — SISTEMA VISUAL
   Transplantado da intranet APVS São Rafael (apvs-intranet.html).
   Identidade: azul royal #1e3a8a + dourado #d4a017.

   Este arquivo é a ÚNICA fonte de cor, sombra, raio e ritmo do sistema. Nenhum
   hex solto nas telas — quem precisa de cor pega a variável.

   Convive com o ui.css antigo de propósito: as telas migram uma por vez, e a
   que ainda não migrou continua funcionando. Quando a última sair, o ui.css
   morre.

   As fontes entram por <link> na página (Inter + Playfair). Se o Google não
   responder, cai em system-ui e o layout não muda de tamanho.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root{
  --royal:#1e3a8a; --royal-2:#274fb0; --royal-bright:#3b6fe0; --royal-deep:#142a63;
  --gold:#d4a017; --gold-2:#e8bd3f; --gold-deep:#a87c0e;

  --ink:#101a2e; --ink-soft:#33405a; --muted:#5d6982; --faint:#8a93a6;
  --line:#e6eaf3; --line-soft:#eef1f8;

  --canvas:#eef2fb;    /* fundo da área de trabalho */
  --surface:#ffffff;   /* cartões */
  --surface-2:#f6f8fd; /* cartões alternativos */
  --surface-3:#eef2fb; /* hover de linha, chips */

  --glass:rgba(255,255,255,.70);
  --glass-strong:rgba(255,255,255,.82);
  --glass-brd:rgba(255,255,255,.55);

  --ok:#0f9d6e; --ok-bg:#dcfaee;
  --warn:#d98c1f; --warn-bg:#fdf0d8;
  --bad:#dc4a52; --bad-bg:#fde3e4;
  --info:#2f74d0; --info-bg:#e0ecfb;

  --shadow-sm:0 1px 2px rgba(16,23,41,.06);
  --shadow:0 10px 28px rgba(16,23,41,.10), 0 2px 6px rgba(16,23,41,.05);
  --shadow-md:0 16px 40px rgba(16,23,41,.14);
  --shadow-lg:0 30px 70px rgba(8,15,33,.28);

  --r:16px; --r-sm:12px; --r-xs:9px; --r-pill:999px;
  --side-w:240px; --side-rail:72px; --top-h:66px;

  --fz-body:14px;
  --t:.22s cubic-bezier(.4,0,.2,1);
  --display:"Playfair Display",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* A casca é sempre São Rafael. O produto aparece só no acento: botão de
     ação, seletor de empresa, etiquetas. Um sistema, dois produtos dentro. */
  --acento:var(--royal);
  --acento-2:var(--royal-2);
  --acento-luz:var(--royal-bright);
  --acento-sombra:rgba(30,58,138,.34);
}

/* Truck e Brasil: só o acento muda, nada mais. */
[data-prod="brasil"]{
  --acento:#0f7a4a; --acento-2:#129a5c; --acento-luz:#17b06c;
  --acento-sombra:rgba(15,122,74,.34);
}

[data-theme="dark"]{
  --ink:#e8eef9; --ink-soft:#c2cce0; --muted:#94a1ba; --faint:#6c7894;
  --line:#23304a; --line-soft:#1b2740;

  --canvas:#0a0f1d; --surface:#121c30; --surface-2:#0e1626; --surface-3:#16223a;

  --glass:rgba(17,26,44,.64);
  --glass-strong:rgba(17,26,44,.80);
  --glass-brd:rgba(255,255,255,.08);

  --ok-bg:rgba(15,157,110,.16);
  --warn-bg:rgba(217,140,31,.16);
  --bad-bg:rgba(220,74,82,.18);
  --info-bg:rgba(47,116,208,.18);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 12px 30px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.4);
  --shadow-md:0 18px 44px rgba(0,0,0,.55);
  --shadow-lg:0 30px 80px rgba(0,0,0,.65);
}

/* ------------------------------------------------------------------ base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans); font-size:var(--fz-body); color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow:hidden; background:#0a0f1d;
}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
a{color:inherit;text-decoration:none}
/* `hidden` tem de ganhar de qualquer display de classe: o padrão do navegador
   perde para qualquer regra de autor, e um bloco escondido reaparecia só por
   ter display:flex. */
[hidden]{display:none!important}
::selection{background:var(--gold);color:#1a1300}
:focus-visible{outline:2px solid var(--royal-bright);outline-offset:2px;border-radius:6px}

*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--faint)}

/* Todo número que muda usa a mesma largura de dígito: sem isso o valor da
   mensalidade "pula" de lugar a cada tecla. */
.num,.kpi .val,.top-clock .t,.lock-clock .t{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------- papel de parede */
.desktop{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(820px 560px at 10% 6%, rgba(59,111,224,.30), transparent 60%),
    radial-gradient(680px 480px at 94% 14%, rgba(212,160,23,.20), transparent 55%),
    radial-gradient(900px 760px at 82% 102%, rgba(30,58,138,.34), transparent 62%),
    linear-gradient(135deg,#dbe4fb 0%,#eef2fb 46%,#e6ecfc 100%);
}
[data-theme="dark"] .desktop{
  background:
    radial-gradient(820px 560px at 10% 6%, rgba(59,111,224,.24), transparent 60%),
    radial-gradient(680px 480px at 94% 14%, rgba(212,160,23,.16), transparent 55%),
    radial-gradient(900px 800px at 82% 102%, rgba(30,58,138,.40), transparent 62%),
    linear-gradient(135deg,#060a14 0%,#0a0f1d 46%,#0b1222 100%);
}

/* ---------------------------------------------------------------- janela */
#app{position:relative; z-index:1; height:100dvh; padding:14px}
.window{
  height:100%; border-radius:20px; overflow:hidden; background:transparent;
  display:grid; grid-template-columns:var(--side-w) 1fr; grid-template-rows:var(--top-h) 1fr;
  grid-template-areas:"side top" "side main"; box-shadow:var(--shadow-lg);
}

/* A casca é montada dentro de um <div id="casca">, mas quem precisa cair nas
   áreas da grade é a sidebar e a topbar. `display:contents` faz o div sumir do
   layout e promove os filhos a itens da grade. Sem isto, os dois empilham
   dentro de uma célula só. */
#casca{display:contents}

/* --------------------------------------------------------------- sidebar */
/* z-index aqui, e não dentro da barra: `.side` e `.main` são irmãs na grade e
   nenhuma delas empilhava, então valia a ordem do DOM — a `.main` vem depois e
   pintava por cima. Qualquer z-index de filho da barra (a dica da barra
   recolhida, por exemplo) perdia sem chance, porque a disputa nunca foi entre
   eles: era entre as duas colunas. A barra fica acima da topbar de propósito,
   já que a dica sai para o lado e pode alcançar a altura dela. */
.side{
  grid-area:side; min-height:0; display:flex; flex-direction:column;
  position:relative; z-index:30;
  background:var(--glass); backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-right:1px solid var(--glass-brd);
}
/* ---------------------------------------------------------- barra recolhida
   Só a faixa de ícones. Vale a partir do desktop: no celular a barra já é uma
   gaveta e recolher não sobra largura para ninguém. O nome de cada item volta
   ao passar o mouse, senão a faixa vira adivinhação. */
@media(min-width:901px){
  body.rail .window{grid-template-columns:var(--side-rail) 1fr}
  body.rail .side-brand .txt,
  body.rail .nav-group .lbl,
  body.rail .nav-item > span:not(.ic):not(.dica-rail),
  body.rail .nav-item .chev,
  body.rail .subnav,
  body.rail .side-user .meta{display:none}
  /* A dica precisa sair da barra para ser lida, e overflow-y:auto recorta os
     dois eixos — não existe rolar só na vertical com estouro na horizontal.
     Recolhida a barra tem meia dúzia de ícones e não precisa rolar, então a
     rolagem sai e a dica passa. */
  body.rail .nav{overflow:visible}
  body.rail .side-brand{justify-content:center;padding:16px 0 14px}
  /* em 72px a faixa "REGIONAL SÃO RAFAEL" viraria um borrão: entra o escudo */
  body.rail .side-brand .marca-cheia{display:none}
  body.rail .side-brand .marca-selo{display:inline-grid}
  body.rail .nav{padding:6px 8px 10px}
  body.rail .nav-pe{padding:8px}
  body.rail .nav-item{justify-content:center;padding:11px 0;gap:0}
  /* o número do dia não cabe ao lado do ícone: vira selo no canto */
  body.rail .nav-item .badge-n{position:absolute;top:1px;right:4px;margin:0;
    padding:0 5px;font-size:10px;line-height:15px}
  /* sem os títulos dos grupos, um fio separa as seções */
  body.rail .nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-brd)}
  body.rail .nav-group:first-child{border-top:0;padding-top:0}
  body.rail .side-user{justify-content:center;padding:12px 0}
  /* A dica: o nome e, embaixo, o que a tela faz. Só o nome não resolvia — o
     que se pergunta olhando uma faixa de ícones é "o que tem aqui dentro",
     não "como isto se chama". */
  body.rail .dica-rail{
    position:absolute; left:calc(100% + 12px); top:50%; z-index:60;
    transform:translateY(-50%) translateX(-4px); transform-origin:left center;
    display:flex; flex-direction:column; gap:3px; width:max-content; max-width:270px;
    padding:9px 13px; border-radius:11px;
    /* mais clara que o cartão que fica atrás dela: sobre o fundo escuro as
       duas superfícies quase se confundiam e a dica sumia dentro do conteúdo */
    background:var(--surface-3); border:1px solid var(--line); box-shadow:var(--shadow-lg);
    opacity:0; pointer-events:none;
    transition:opacity var(--t), transform var(--t);
  }
  body.rail .nav-item:hover .dica-rail,
  body.rail .nav-item:focus-visible .dica-rail{opacity:1;transform:translateY(-50%) translateX(0)}
  body.rail .dica-rail b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2;
    white-space:nowrap}
  body.rail .dica-rail i{font-size:11.5px;font-style:normal;color:var(--muted);line-height:1.4}
  /* a setinha encosta a dica no ícone de onde ela saiu */
  body.rail .dica-rail::before{content:"";position:absolute;left:-5px;top:50%;
    width:8px;height:8px;transform:translateY(-50%) rotate(45deg);
    background:var(--surface-3);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
}
/* fora da barra recolhida ela não existe */
.dica-rail{display:none}

.side-brand{display:flex;align-items:center;justify-content:center;padding:16px 16px 14px}
.side-brand .marca-cheia{width:100%;max-width:196px;height:auto;display:block}
.side-brand .marca-selo{display:none}

/* overflow-x escondido de propósito: um nome de cotação comprido no submenu
   fazia nascer uma barra de rolagem horizontal na barra lateral inteira */
.nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 10px 10px}
.nav-group{margin-top:12px}
.nav-group:first-child{margin-top:2px}
.nav-group .lbl{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--faint);padding:8px 12px 6px}
.nav-item{
  position:relative; display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 12px; border-radius:11px; color:var(--ink-soft); font-weight:500; font-size:13.5px;
  text-align:left; transition:background var(--t), color var(--t); margin-bottom:1px;
}
.nav-item .ic{display:flex;color:var(--faint);transition:color var(--t)}
.nav-item:hover{background:color-mix(in srgb,var(--royal) 9%,transparent);color:var(--ink)}
.nav-item:hover .ic{color:var(--royal-bright)}
.nav-item.active{background:linear-gradient(135deg,var(--royal),var(--royal-2));color:#fff;
  box-shadow:0 6px 16px rgba(30,58,138,.34)}
.nav-item.active .ic{color:#fff}
/* a barra dourada na borda é a assinatura do sistema */
.nav-item.active::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:0 4px 4px 0;background:var(--gold)}
.nav-item .badge-n{margin-left:auto;background:var(--gold);color:#1a1300;font-size:10.5px;
  font-weight:800;padding:1px 7px;border-radius:var(--r-pill)}
.nav-item.active .badge-n{background:rgba(255,255,255,.92);color:var(--royal-deep)}
/* aba que ainda não existe: um ponto dourado, sem apagar o item. Desabilitar
   esconderia que ela vai existir, que é justamente o que se quer comunicar. */
.nav-item .obra-p{margin-left:auto;width:7px;height:7px;border-radius:50%;
  background:var(--gold);flex:none}
.nav-item.obra{color:var(--muted)}
.nav-item.obra .ic{opacity:.7}
body.rail .nav-item .obra-p{position:absolute;top:6px;right:8px;margin:0}

.nav-item .chev{margin-left:auto;display:flex;color:var(--faint);transition:transform var(--t)}
.nav-item.aberto .chev{transform:rotate(90deg)}

/* submenu (as últimas cotações penduradas em "Cotações") */
.subnav{max-height:0;overflow:hidden;transition:max-height var(--t);margin-left:12px;
  border-left:1px solid var(--line)}
/* cabe até a lista longa de quem configurou 20; passando disso, rola */
.subnav.aberto{max-height:min(46vh,460px);overflow-y:auto;overflow-x:hidden}
.subnav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--ink-soft);transition:background var(--t)}
.subnav a:hover{background:color-mix(in srgb,var(--royal) 7%,transparent)}
.subnav a.atual{background:color-mix(in srgb,var(--royal) 9%,transparent);color:var(--ink)}
.subnav a .emo{font-size:16px;line-height:1;opacity:.75;flex:none}
.subnav a.atual .emo{opacity:1}
.subnav a .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subnav a .vl{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.subnav .vazio{padding:8px 10px;font-size:12px;color:var(--faint)}

/* Configurações fica colado no rodapé, separado da navegação */
.nav-pe{margin-top:auto;border-top:1px solid var(--glass-brd);padding:8px 10px;
  display:flex;align-items:center;gap:8px}
.nav-pe .nav-item{flex:1;margin-bottom:0}

/* ------------------------------------------------------------ pílula do tema
   Mostra o estado em vez de só alternar: o sol de um lado, a lua do outro, e a
   bola em cima do que está valendo. Um ícone só obrigaria a decifrar se ele é
   o modo atual ou o que vai acontecer ao clicar. */
/* Os DOIS emojis ficam sempre visíveis, e a bola branca desliza de um para o
   outro marcando qual está valendo. Antes eu apagava o emoji do lado inativo:
   ficava a dúvida de sempre — o ícone mostra o modo atual ou o que acontece se
   eu clicar? Com os dois acesos e a bola atrás de um, não há o que decifrar. */
.tema-pill{
  position:relative; flex:none; width:60px; height:30px; border-radius:var(--r-pill);
  display:flex; align-items:center; justify-content:space-between; padding:0 7px;
  background:linear-gradient(90deg,#ffd66b,#f0a92e); border:1px solid rgba(0,0,0,.14);
  transition:background var(--t), border-color var(--t);
}
.tema-pill.escuro{background:linear-gradient(90deg,#1b2a5e,#0b1430);
  border-color:rgba(255,255,255,.16)}
.tema-pill .lado{position:relative;z-index:1;font-size:13px;line-height:1;
  filter:saturate(1.1)}
.tema-pill .bola{
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 2px 7px rgba(0,0,0,.32);
  transition:transform .28s cubic-bezier(.4,0,.2,1), background var(--t);
}
.tema-pill.escuro .bola{transform:translateX(30px);background:rgba(226,233,255,.95)}

/* rail: valem do desktop para cima — no celular a barra já é gaveta */
@media(min-width:901px){
body.rail .nav-pe{padding:8px}
  body.rail .nav-item{justify-content:center;padding:11px 0;gap:0}
  /* o número do dia não cabe ao lado do ícone: vira selo no canto */
  body.rail .nav-item .badge-n{position:absolute;top:1px;right:4px;margin:0;
    padding:0 5px;font-size:10px;line-height:15px}
  /* sem os títulos dos grupos, um fio separa as seções */
  body.rail .nav-group{margin-top:8px;padding-top:8px;border-top:1px solid var(--glass-brd)}
  body.rail .nav-group:first-child{border-top:0;padding-top:0}
  body.rail .side-user{justify-content:center;padding:12px 0}
  /* A dica: o nome e, embaixo, o que a tela faz. Só o nome não resolvia — o
     que se pergunta olhando uma faixa de ícones é "o que tem aqui dentro",
     não "como isto se chama". */
  body.rail .dica-rail{
    position:absolute; left:calc(100% + 12px); top:50%; z-index:60;
    transform:translateY(-50%) translateX(-4px); transform-origin:left center;
    display:flex; flex-direction:column; gap:3px; width:max-content; max-width:270px;
    padding:9px 13px; border-radius:11px;
    /* mais clara que o cartão que fica atrás dela: sobre o fundo escuro as
       duas superfícies quase se confundiam e a dica sumia dentro do conteúdo */
    background:var(--surface-3); border:1px solid var(--line); box-shadow:var(--shadow-lg);
    opacity:0; pointer-events:none;
    transition:opacity var(--t), transform var(--t);
  }
  body.rail .nav-item:hover .dica-rail,
  body.rail .nav-item:focus-visible .dica-rail{opacity:1;transform:translateY(-50%) translateX(0)}
  body.rail .dica-rail b{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2;
    white-space:nowrap}
  body.rail .dica-rail i{font-size:11.5px;font-style:normal;color:var(--muted);line-height:1.4}
  /* a setinha encosta a dica no ícone de onde ela saiu */
  body.rail .dica-rail::before{content:"";position:absolute;left:-5px;top:50%;
    width:8px;height:8px;transform:translateY(-50%) rotate(45deg);
    background:var(--surface-3);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
}
/* fora da barra recolhida ela não existe */
.dica-rail{display:none}

/* as regras da pílula ficam num lugar só, mais acima: esta era a versão
   anterior, de ícone com opacidade, e vencia a nova por vir depois */
body.rail .nav-pe{flex-direction:column;padding:8px}
body.rail .tema-pill{width:44px;height:24px;padding:0 4px}
body.rail .tema-pill .bola{width:18px;height:18px;transform:none}
body.rail .tema-pill.escuro .bola{transform:translateX(20px)}

.side-user{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--glass-brd)}
.side-user .meta{min-width:0}
.side-user .meta .n{font-weight:700;font-size:13px;line-height:1.1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.side-user .meta .r{font-size:11.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.side-user .meta{flex:1}
.side-user .sair{flex:none;width:34px;height:34px;border-radius:10px;display:grid;
  place-items:center;color:var(--muted);transition:background var(--t),color var(--t)}
.side-user .sair:hover{background:var(--bad-bg);color:var(--bad)}
body.rail .side-user{flex-direction:column;gap:8px}

/* avatar com iniciais */
.avatar{
  flex:none; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:800;
  background:linear-gradient(135deg,var(--royal-bright),var(--royal-deep));
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.avatar.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#241a00}

/* ---------------------------------------------------------------- topbar */
/* mesmo motivo da `.side`: os popovers que descem daqui precisam ficar acima
   da `.main`, e sem empilhar a barra inteira eles perdiam para ela */
/* TRÊS COLUNAS, e as duas pontas com a MESMA largura: é isso que mantém a
   busca no centro da tela em toda aba. Com flex simples ela escorregava —
   um título curto de um lado ou dois botões a mais do outro empurravam o campo,
   e a barra parecia mudar de tamanho ao trocar de tela. */
.topbar{
  grid-area:top; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:14px; padding:0 18px;
  position:relative; z-index:20;
  background:var(--glass); backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--glass-brd);
}
.menu-btn{display:none;padding:8px;border-radius:10px;color:var(--ink-soft)}
.menu-btn:hover{background:var(--surface-3)}
.crumb{font-weight:700;font-size:16px;letter-spacing:-.2px;white-space:nowrap}
.crumb .sub{display:block;font-size:11.5px;color:var(--muted);font-weight:500;letter-spacing:0}

/* `overflow:hidden` existe para o lado ESQUERDO: é o título da página, que
   pode ser longo e precisa ser cortado em vez de empurrar a busca.
   No lado direito ele cortava o painel de avisos, que é `position:absolute` e
   cai POR FORA da barra: no celular o sino abria e a lista ficava presa dentro
   de uma faixa de 50px de altura. Quem corta agora é só a esquerda. */
.tb-lado{display:flex;align-items:center;gap:12px;min-width:0}
.tb-lado.esq{overflow:hidden}
/* O relógio é decoração: sai antes de qualquer coisa disputar espaço com a
   busca, que é a única peça de ação da barra. Some bem antes do celular,
   porque numa tela média ele já encostava no campo. */
@media(max-width:1180px){ .top-clock{display:none} }
.tb-lado.dir{justify-content:flex-end}

/* O campo da placa é o único lugar de ação da barra: merece o centro e um
   tratamento à altura. Placa é código, não frase — daí o monoespaçado, o
   caixa-alta e o espaçamento entre letras. */
.search{position:relative;width:min(340px,38vw)}
.search .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  color:var(--faint);display:flex;transition:color var(--t)}
.search input{
  width:100%; padding:11px 62px 11px 44px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1.5px solid var(--line); color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  transition:border-color var(--t), box-shadow var(--t), background var(--t);
}
.search:focus-within .ic{color:var(--acento-luz)}
/* o texto de ajuda não é placa: volta a ser frase */
.search input::placeholder{color:var(--faint);font-family:var(--sans);
  letter-spacing:0;text-transform:none;font-weight:500}
.search input:focus{border-color:var(--royal-bright);box-shadow:0 0 0 4px rgba(59,111,224,.14);outline:none}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:11px;
  color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-family:var(--sans)}

.top-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.top-clock{text-align:right;padding:0 6px;line-height:1.15}
.top-clock .t{font-weight:700;font-size:14px}
.top-clock .d{font-size:11px;color:var(--muted)}
.icon-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  color:var(--ink-soft);transition:background var(--t),color var(--t)}
.icon-btn:hover{background:var(--surface-3);color:var(--ink)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--bad);border:2px solid var(--glass)}
/* Recolher a barra é do desktop; no celular quem abre a barra é o menu.
   Precisa vencer o .icon-btn acima, daí as duas classes. */
.icon-btn.rail-btn{display:grid;transition:transform var(--t),background var(--t),color var(--t)}
body.rail .icon-btn.rail-btn{transform:rotate(180deg)}
@media(max-width:900px){.icon-btn.rail-btn{display:none}}

/* ------------------------------------------------------------------- sino
   O aviso vive no servidor e fica no sino até ser lido. O ponto vermelho com
   o número é o que sobra quando o toast já passou. */
.sino-cx{position:relative;flex:none}
.sino{position:relative}
.sino-n{position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--glass);line-height:1}
.sino-n[hidden]{display:none}

.avisos{position:absolute;top:calc(100% + 8px);right:0;width:min(340px,88vw);
  z-index:60;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);overflow:hidden}
.avisos[hidden]{display:none}
.avisos-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--line)}
.avisos-topo b{font-size:14px;font-weight:800}
.avisos-lista{max-height:min(60vh,420px);overflow-y:auto}
.avisos-lista .vazio{padding:22px 15px;text-align:center;color:var(--muted);font-size:13px}
.avisos .aviso{display:block;padding:12px 15px;border-bottom:1px solid var(--line-soft);
  transition:background var(--t)}
.avisos .aviso:last-child{border-bottom:0}
.avisos .aviso:hover{background:var(--surface-2)}
.avisos .aviso b{display:block;font-size:13.5px;font-weight:700;line-height:1.35}
.avisos .aviso span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;
  line-height:1.5;overflow-wrap:anywhere}
.avisos .aviso i{display:block;font-style:normal;font-size:11px;color:var(--faint);
  margin-top:5px}
/* o não lido tem a barra dourada: some sozinho quando a pessoa clica */
.avisos .aviso.novo{position:relative;background:color-mix(in srgb,var(--gold) 7%,transparent)}
.avisos .aviso.novo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gold)}

.user-btn{padding:3px;border-radius:50%;transition:box-shadow var(--t)}
.user-btn:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--royal-bright) 35%,transparent)}
.vr{width:1px;height:26px;background:var(--line);margin:0 2px}

/* -------------------------------------------------------------- popovers */
.pop{
  position:absolute; top:calc(var(--top-h) - 6px); z-index:30; width:330px;
  background:var(--glass-strong); backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--glass-brd); border-radius:16px; box-shadow:var(--shadow-md);
  opacity:0; transform:translateY(-8px) scale(.98); pointer-events:none; transition:var(--t);
}
.pop.open{opacity:1;transform:none;pointer-events:auto}
.pop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line-soft)}
.pop-head .h{font-weight:700;font-size:14px}
.pop-head a{font-size:12px;color:var(--royal-bright);font-weight:600}
.menu-list{padding:6px}
.menu-row{display:flex;align-items:center;gap:11px;width:100%;padding:10px;border-radius:10px;
  font-size:13.5px;font-weight:500;color:var(--ink-soft);text-align:left;transition:background var(--t)}
.menu-row .ic{display:flex;color:var(--faint)}
.menu-row:hover{background:var(--surface-3);color:var(--ink)}
.menu-row.danger{color:var(--bad)}
.menu-row.danger .ic{color:var(--bad)}
.menu-sep{height:1px;background:var(--line-soft);margin:6px 8px}
.menu-user{display:flex;align-items:center;gap:11px;padding:14px 14px 12px}
.menu-user .meta .n{font-weight:700;font-size:14px}
.menu-user .meta .e{font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------- área principal */
.main{grid-area:main;min-height:0;overflow-y:auto;background:var(--canvas);padding:24px 26px 40px}
.view-enter{animation:fade .32s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:20px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:800;letter-spacing:-.4px}
/* todo cabeçalho tem o pré-título minúsculo em maiúsculas */
.page-head .pre{font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--royal-bright);margin-bottom:5px}
.page-head p{color:var(--muted);font-size:13.5px;margin-top:4px;max-width:60ch}

/* --------------------------------------------------------------- botões */
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:11px;
  font-weight:600;font-size:13.5px;
  transition:background var(--t),transform var(--t),box-shadow var(--t),border-color var(--t)}
.btn .ic{display:flex}
.btn.solid{background:linear-gradient(135deg,var(--royal),var(--royal-2));color:#fff;
  box-shadow:0 6px 16px rgba(30,58,138,.3)}
.btn.solid:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(30,58,138,.4)}
/* o botão que CRIA a cotação usa a cor do produto — é o único lugar onde a
   empresa muda a cor de uma ação */
.btn.acento{background:linear-gradient(135deg,var(--acento),var(--acento-2));color:#fff;
  box-shadow:0 6px 16px var(--acento-sombra)}
.btn.acento:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#241a00;
  box-shadow:0 6px 16px rgba(168,124,14,.32)}
.btn.gold:hover{transform:translateY(-1px)}
.btn.ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.btn.ghost:hover{border-color:var(--royal-bright);color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:12.5px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{
  width:100%; padding:12px; border-radius:var(--r-sm); font-weight:700; font-size:14.5px;
  color:#fff; background:linear-gradient(135deg,var(--royal),var(--royal-2));
  box-shadow:0 8px 20px rgba(30,58,138,.34);
  transition:transform var(--t), box-shadow var(--t), filter var(--t);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(30,58,138,.42);filter:brightness(1.05)}
.btn-primary:active{transform:translateY(0)}

/* ---------------------------------------------------------------- grade */
.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}
.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}
.col-9{grid-column:span 9}.col-12{grid-column:span 12}

/* --------------------------------------------------------------- cartão */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--t),transform var(--t),border-color var(--t)}
.card.hover:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 0}
.card-h h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:9px}
.card-h h3 .ic{color:var(--royal-bright);display:flex}
.card-h .link{font-size:12.5px;font-weight:600;color:var(--royal-bright);display:flex;
  align-items:center;gap:4px}
.card-h .link:hover{text-decoration:underline}
.card-b{padding:14px 18px 18px}
.card-pad{padding:18px}

/* ----------------------------------------------------------------- hero */
.hero{
  grid-column:span 12; border-radius:var(--r); padding:26px 28px; color:#fff;
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,var(--royal-deep),var(--royal) 55%,var(--royal-2));
  box-shadow:var(--shadow);
}
.hero::after{content:"";position:absolute;right:-40px;top:-60px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,.42),transparent 62%)}
.hero::before{content:"";position:absolute;right:120px;bottom:-90px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 60%)}
.hero .inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.hero h2{font-size:25px;font-weight:800;letter-spacing:-.4px}
.hero h2 .em{color:var(--gold-2)}
.hero p{opacity:.86;font-size:13.5px;margin-top:6px}
.hero .when{text-align:right}
.hero .when .clk{font-size:30px;font-weight:300;font-variant-numeric:tabular-nums;line-height:1}
.hero .when .dt{font-size:12.5px;opacity:.85;margin-top:4px}
.hero .chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.hero .chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  padding:6px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;gap:7px}
.hero .chip .ic{display:flex;opacity:.9}

/* ------------------------------------------------------------------ KPI */
.kpi{display:flex;flex-direction:column;gap:10px}
.kpi .top{display:flex;align-items:center;justify-content:space-between}
.kpi .ic-box{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--royal) 12%,transparent);color:var(--royal-bright)}
.kpi .ic-box.gold{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold-deep)}
.kpi .val{font-size:27px;font-weight:800;letter-spacing:-.6px}
.kpi .lbl{font-size:12.5px;color:var(--muted);font-weight:500}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;
  padding:2px 8px;border-radius:var(--r-pill)}
.delta.up{background:var(--ok-bg);color:var(--ok)}
.delta.down{background:var(--bad-bg);color:var(--bad)}
.delta.flat{background:var(--surface-3);color:var(--muted)}

/* gráficos svg feitos à mão, sem biblioteca */
.spark{width:100%;height:42px;display:block}
.donut-wrap{display:flex;align-items:center;gap:18px}
.donut{flex:none}
.legend{display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.legend .li{display:flex;align-items:center;gap:8px;color:var(--ink-soft)}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .li b{margin-left:auto;color:var(--ink);font-variant-numeric:tabular-nums}
.bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding-top:8px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;
  justify-content:flex-end}
.bars .b .bar{width:100%;border-radius:7px 7px 3px 3px;
  background:linear-gradient(180deg,var(--royal-bright),var(--royal));
  transition:height .6s cubic-bezier(.2,.7,.2,1)}
.bars .b:nth-child(odd) .bar{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep))}
.bars .b .cap{font-size:11px;color:var(--faint);font-weight:600}

/* ------------------------------------------------------------- etiquetas */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:var(--r-pill);letter-spacing:.2px}
.tag.royal{background:var(--info-bg);color:var(--info)}
.tag.gold{background:var(--warn-bg);color:var(--warn)}
.tag.ok{background:var(--ok-bg);color:var(--ok)}
.tag.bad{background:var(--bad-bg);color:var(--bad)}
.tag.gray{background:var(--surface-3);color:var(--muted)}
.tag .dotp{width:6px;height:6px;border-radius:50%;background:currentColor}
button.tag{cursor:pointer;transition:filter var(--t),transform var(--t)}
button.tag:hover{filter:brightness(.96);transform:translateY(-1px)}

/* ------------------------------------------------------- feed e timeline */
.feed{display:flex;flex-direction:column}
.feed .row{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line-soft)}
.feed .row:last-child{border-bottom:none;padding-bottom:0}
.feed .row:first-child{padding-top:4px}
.feed .ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--surface-3);color:var(--royal-bright)}
.feed .ico.gold{color:var(--gold-deep);background:color-mix(in srgb,var(--gold) 14%,transparent)}
.feed .b{min-width:0;flex:1}
.feed .b .t{font-weight:600;font-size:13.5px;line-height:1.3}
.feed .b .m{font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.feed .b .w{font-size:11.5px;color:var(--faint);margin-top:3px}

.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .item{position:relative;padding:0 0 16px}
.tl .item:last-child{padding-bottom:0}
.tl .item::before{content:"";position:absolute;left:-21px;top:4px;width:10px;height:10px;
  border-radius:50%;background:var(--royal-bright);box-shadow:0 0 0 3px var(--surface)}
.tl .item.gold::before{background:var(--gold)}
.tl .item .t{font-size:13px;font-weight:600;line-height:1.3}
.tl .item .w{font-size:11.5px;color:var(--faint);margin-top:2px}

/* --------------------------------------------------------------- tabela */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar .seg{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px}
.toolbar .seg button{padding:7px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  color:var(--muted);transition:background var(--t),color var(--t)}
.toolbar .seg button.on{background:var(--royal);color:#fff;box-shadow:0 3px 10px rgba(30,58,138,.3)}
.toolbar .spacer{flex:1}
.chip-filter{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;
  color:var(--ink-soft);transition:border-color var(--t),color var(--t)}
.chip-filter.on{border-color:var(--royal-bright);color:var(--royal-bright);
  background:color-mix(in srgb,var(--royal) 7%,transparent)}

/* ------------------------------------------------------- escolha em etiquetas
   Uma linha de opções onde só uma vale. Substitui o <select> de três itens: as
   alternativas ficam à vista e a escolha custa um clique. "Não quero" é uma
   opção legítima, não um erro — por isso ela marca em cinza, não na cor de
   ação: verde/azul ali diria "cobertura incluída". */
/* As opções dividem a largura inteira da linha: cada uma tem o mesmo peso, e
   o grupo lido de ponta a ponta é a pergunta toda. Passando de uma linha, a
   seguinte também preenche. */
/* A CAIXA OCUPA A LINHA INTEIRA, e as etiquetas dividem o espaço dela.
   O que deixava vão não era a caixa cheia: era o TETO de 190px por etiqueta.
   Com ele, numa caixa de 834px:

     Vidros (2 opções)          etiquetas de 190px, 441px de vazio à direita
     Assistência (3 opções)     etiquetas de 190px, 247px de vazio
     Danos a terceiros (8)      etiquetas de 100px, nada de vazio

   Sem o teto, as duas etiquetas de Vidros ficam com 411px cada e a linha
   fecha. Todas as fileiras passam a ter a mesma largura, a mesma borda
   esquerda e a mesma borda direita. */
.opts{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:13px;
  width:100%;background:var(--surface-2);border:1px solid var(--line)}
.opt{
  flex:1 1 0; min-width:86px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:9px 11px; border:0; background:transparent; border-radius:9px;
  color:var(--muted); font-size:12.5px; font-weight:600; font-family:inherit; cursor:pointer;
  text-align:center; line-height:1.3;
  transition:color var(--t), background var(--t), box-shadow var(--t);
}
.opt:hover{background:var(--surface-3);color:var(--ink)}
.opt.on{background:linear-gradient(135deg,var(--acento),var(--acento-2));
  color:#fff;box-shadow:0 3px 10px var(--acento-sombra)}
/* "Não quero" marcada não usa a cor de ação: é ausência de cobertura, e verde
   ali diria justamente o contrário */
.opt.nao.on{background:var(--surface-3);color:var(--ink-soft);box-shadow:none}

/* grupo de marcar/desmarcar, onde as opções não se excluem: sem a pista, para
   não ser lido como um seletor de uma escolha só */
.opts.livres{background:none;border:0;padding:0;gap:7px}
.opts.livres .opt{flex:0 0 auto;min-width:0;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-pill);padding:8px 14px}
.opts.livres .opt.on{border-color:transparent}
.opt-lin{display:grid;gap:7px}
.opt-lin > .r{display:flex;align-items:baseline;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink-soft)}
.opt-lin > .r small{font-size:11.5px;font-weight:500;color:var(--faint)}
/* no celular o rótulo quebra em duas linhas e a explicação ao lado fica
   espremida: passa a vir embaixo, na largura toda */
@media(max-width:560px){
  .opt-lin > .r{flex-direction:column;gap:2px}
  .opt-lin > .r small{margin-left:0}
}

.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--faint);padding:0 14px 11px;border-bottom:1px solid var(--line)}
.table tbody td{padding:13px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.table tbody tr{transition:background var(--t)}
.table tbody tr:hover{background:var(--surface-3)}
.table .file-c{display:flex;align-items:center;gap:12px}
.fileic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:10px;
  font-weight:800;color:#fff;letter-spacing:.3px}
.fileic.pdf{background:linear-gradient(135deg,#e2575f,#b8323b)}
.fileic.img{background:linear-gradient(135deg,#9b6fe0,#6b3fc0)}
.fileic.royal{background:linear-gradient(135deg,#3b6fe0,#274fb0)}
.fileic.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#241a00}
.file-c .nm{font-weight:600}
.file-c .sz{font-size:11.5px;color:var(--faint)}
.star{padding:4px;border-radius:8px;color:var(--faint);transition:color var(--t),background var(--t)}
.star.on{color:var(--gold)}
.star:hover{background:var(--surface-3)}
.row-act{display:flex;gap:4px;justify-content:flex-end}
.row-act button{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-soft)}
.row-act button:hover{background:var(--surface-3);color:var(--royal-bright)}

/* ------------------------------------------------- formulário de cotação
   Estas regras moravam DENTRO da nova.html. Quando a cotação de implemento
   ganhou tela própria e reusou os mesmos nomes de classe, herdou o HTML e não
   o visual: os mesmos blocos saíam sem cartão, sem ícone e com outra
   tipografia. Uma definição só, aqui, para as duas telas. */
.bloco{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px 22px;margin-bottom:16px}
.bloco > h2{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:700;
  letter-spacing:-.2px}
.bloco > h2 .b-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  flex:none;color:var(--acento-luz);
  background:color-mix(in srgb,var(--acento) 13%,transparent)}
.bloco > h2 .b-ico .ic{display:flex}
.bloco > h2 .marca{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--faint)}
.bloco > .diz{font-size:12.5px;color:var(--muted);line-height:1.55;margin:5px 0 0 43px}
.bloco > .corpo{margin-top:16px}

.duplas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.duplas .larga{grid-column:1/-1}
@media(max-width:640px){.duplas{grid-template-columns:1fr}}

/* cabeçalho da página: o que já se sabe vira etiqueta, e não texto corrido */
.pagina-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:20px}
.pagina-topo .pre{font-size:11.5px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.pagina-topo h1{font-size:24px;font-weight:800;letter-spacing:-.5px;line-height:1.15}
.pagina-topo .etiquetas{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}

.etq{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill)}
.etq .ic{display:flex}
.etq-mudo{background:var(--surface-3);color:var(--muted)}
.etq-ok{background:var(--ok-bg);color:var(--ok)}
.etq-aviso{background:var(--warn-bg);color:var(--warn)}
.etq-erro{background:var(--bad-bg);color:var(--bad)}
.etq-prod{background:color-mix(in srgb,var(--acento) 14%,transparent);color:var(--acento-luz)}

/* O ERRO DA APVS, com lugar próprio.
   Ele morava na linha de status da barra de criar — que é de uma linha e cor
   apagada, e serve para "Falta preencher: Cidade". Uma recusa da APVS tem
   frase, saída e rastro técnico; espremida ali, virava um borrão vermelho que
   o consultor lia como "deu errado" e mais nada.
   Fica ACIMA da barra: o botão de tentar de novo continua embaixo, ao alcance
   do polegar, e o motivo fica na altura dos olhos. */
.erro-cx{margin-top:16px;padding:14px 16px;border-radius:var(--r);
  background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
.erro-cx[hidden]{display:none}
.erro-topo{display:flex;gap:10px;align-items:flex-start}
.erro-topo .ic{color:var(--bad);flex:none;margin-top:1px}
.erro-frase{font-size:13.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.erro-pe{display:flex;gap:14px;margin:9px 0 0 28px}
.erro-pe .lk{font-size:12px}
/* o rastro: monoespaçado e rolável no eixo dele. Endpoint com hash não quebra
   em palavra nenhuma, e sem isto ele empurrava a caixa para fora da coluna. */
.erro-det{margin:10px 0 0 28px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);
  font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);
  white-space:pre-wrap;word-break:break-all;max-height:180px;overflow:auto}
.erro-det[hidden]{display:none}

/* Barra de criação. Fica ao alcance sem obrigar a rolar até o fim. Opaca de
   propósito: por cima de um formulário, vidro fosco vira texto embaixo de
   texto. */
.criar-barra{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:20px;padding:14px 18px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.criar-barra .status{font-size:12.5px;font-weight:600;color:var(--muted);flex:1;
  min-width:180px;line-height:1.5}
.criar-barra .status.ok{color:var(--ok)} .criar-barra .status.err{color:var(--bad)}
.criar-barra .btn-criar{padding:13px 24px;font-size:14.5px;margin-left:auto}

/* No celular a barra grudada no pé come 126px de 844: o aviso quebrava em duas
   linhas ao lado de um botão de meia largura. O aviso passa a ocupar a linha
   inteira, menor, e o botão fica com a largura toda — que é o alvo do polegar. */
@media(max-width:900px){
  .criar-barra{padding:11px 12px;gap:9px;margin-top:16px}
  .criar-barra .status{flex:1 1 100%;min-width:0;font-size:12px;line-height:1.45}
  .criar-barra .btn-criar{width:100%;margin-left:0;justify-content:center;padding:14px 16px}
}

/* Barra sobre o editor embutido: voltar, os três modos e os downloads. Vale
   para a /nova e para a cotação de implemento — a tela de implemento nasceu
   sem ela, e a cotação pronta ficava sem como baixar nem como voltar a mexer
   nos dados. */
.frame-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
/* A barra só tem CONTROLES. O nome do veículo, a proposta e as coberturas
   moram na ficha abaixo, e os avisos em blocos próprios.
   Antes era tudo uma linha só com nowrap e reticências: o texto crescia, o
   aviso ia para a ponta e era o primeiro a ser cortado — justamente ele, que
   é o que muda o que o consultor pode prometer. */
.frame-topo .info{font-size:13px;color:var(--muted);flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame-topo .info b{color:var(--acento-luz)}

/* ---------------------------------------------------- ficha da cotação */
/* Compacta de propósito: cada pixel aqui sai do editor, que é onde se
   trabalha. Num notebook de 768px a diferença entre 11 e 8 de padding são
   duas linhas do documento a mais na prévia. */
.frame-ficha{border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:8px 13px;margin-bottom:8px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.fe-nome{font-size:14.5px;font-weight:800;color:var(--texto);line-height:1.3}
.fe-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:12.5px;color:var(--muted)}
.fe-meta b{color:var(--acento-luz);font-weight:800}
.fe-meta .ok{color:var(--ok)}
/* as coberturas ficam na MESMA linha quando cabem, e descem quando não cabem */
.fe-cobs{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.fe-cob{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--canvas);
  border:1px solid var(--line);border-radius:20px;padding:2px 9px;white-space:nowrap}

/* ------------------------------------------------------------ avisos
   Largura inteira e texto que QUEBRA: um aviso pela metade não avisa. */
.frame-aviso{display:flex;align-items:flex-start;gap:9px;border-radius:11px;
  padding:8px 13px;margin-bottom:8px;font-size:13px;line-height:1.4;
  border:1px solid transparent}
.frame-aviso .ic{flex:none;margin-top:1px}
.frame-aviso b{font-weight:800}
.frame-aviso.atencao{background:rgba(214,158,46,.11);border-color:rgba(214,158,46,.32);
  color:var(--gold-ui)}
.frame-aviso.atencao b{color:var(--gold-ui)}
.modo-editor{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface)}
.modo-btn{padding:7px 12px;font-size:12px;border-radius:7px;background:transparent;border:0;
  color:var(--muted);font-family:inherit;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background var(--t),color var(--t)}
.modo-btn.active{background:var(--acento);color:#fff}

/* --------------------------------------------------------------- campos */
.campo{display:flex;flex-direction:column;gap:6px}
.campo > span,.campo-rot{font-size:12px;font-weight:600;color:var(--ink-soft);margin-left:2px}
.campo input,.campo select,.campo textarea{
  width:100%; padding:11px 13px; border-radius:var(--r-sm);
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink);
  font-size:14px; transition:border-color var(--t), box-shadow var(--t);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  border-color:var(--royal-bright); box-shadow:0 0 0 4px rgba(59,111,224,.16); outline:none}
.campo input::placeholder{color:var(--faint)}
.campo input:disabled,.campo select:disabled{background:var(--surface-2);color:var(--faint)}
.hint{font-size:12px;color:var(--muted)}
.hint.ok{color:var(--ok)} .hint.err{color:var(--bad)}

/* aviso com barra colorida na borda (erro de parser, pendência, etc.) */
.notice{display:flex;flex-direction:column;gap:10px;padding:18px;border-left:4px solid var(--royal)}
.notice.bad{border-left-color:var(--bad)}
.notice.warn{border-left-color:var(--gold)}
.notice.ok{border-left-color:var(--ok)}
.notice h3{font-size:16px;font-weight:700;letter-spacing:-.2px;line-height:1.25}
.notice p{font-size:13px;color:var(--ink-soft);line-height:1.5}

.dropzone{border:2px dashed var(--line);border-radius:var(--r);padding:26px;text-align:center;
  color:var(--muted);transition:border-color var(--t),background var(--t);cursor:pointer;margin-bottom:18px}
.dropzone:hover{border-color:var(--royal-bright);background:color-mix(in srgb,var(--royal) 5%,transparent)}
.dropzone .ic{color:var(--royal-bright);margin-bottom:8px;display:inline-flex}
.dropzone b{color:var(--ink);font-weight:700}

.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .ic{display:inline-flex;color:var(--faint);margin-bottom:10px}
.empty .t{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:4px}

.switch{position:relative;width:46px;height:26px;border-radius:var(--r-pill);background:var(--line);
  transition:background var(--t);flex:none}
.switch.on{background:var(--royal)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--t)}
.switch.on::after{transform:translateX(20px)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--line-soft)}
.setting-row:last-child{border-bottom:none}
.setting-row .b .t{font-weight:600;font-size:14px}
.setting-row .b .m{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ---------------------------------------------------------------- toast */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{display:flex;align-items:center;gap:11px;padding:12px 18px;border-radius:13px;
  background:var(--glass-strong);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow-md);font-size:13.5px;font-weight:600;
  color:var(--ink);animation:toastIn .3s cubic-bezier(.2,.7,.2,1)}
.toast .ic{display:flex;color:var(--royal-bright)}
.toast.ok .ic{color:var(--ok)}
.toast.bad .ic{color:var(--bad)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.toast.out{animation:toastOut .3s ease forwards}
@keyframes toastOut{to{opacity:0;transform:translateY(14px)}}

/* ============================================================================
   SIMULAÇÃO PELA PLACA
   A busca da barra de cima aceita placa. Não é uma busca no sistema: é a
   pergunta que o consultor mais faz no dia — "que veículo é este?" — e a
   resposta vem antes de abrir qualquer tela.
   ========================================================================== */
.sim-fundo{position:fixed;inset:0;z-index:95;display:none;align-items:flex-start;
  justify-content:center;padding:80px 20px 20px;background:rgba(4,8,22,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sim-fundo.on{display:flex}
.sim{width:min(560px,100%);max-height:calc(100vh - 110px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);animation:simSobe .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes simSobe{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.sim-topo{display:flex;align-items:center;gap:13px;padding:18px 20px 15px;
  border-bottom:1px solid var(--line)}
.sim-topo .ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;
  place-items:center;color:var(--acento-luz);
  background:color-mix(in srgb,var(--acento) 13%,transparent)}
.sim-topo .nm{min-width:0;flex:1}
.sim-topo .nm b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.35px;
  line-height:1.2}
.sim-topo .nm small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.sim-x{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;
  color:var(--muted)}
.sim-x:hover{background:var(--surface-3);color:var(--ink)}
.sim-corpo{padding:16px 20px}
.sim-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;margin-bottom:14px}
.sim-grade > div{background:var(--surface);padding:11px 13px}
.sim-grade .r{font-size:10px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;
  color:var(--faint)}
.sim-grade .v{font-size:14px;font-weight:700;margin-top:3px;word-break:break-word;
  line-height:1.3}
.sim-grade .v.dest{color:var(--acento-luz)}
.sim-pe{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:0 20px 20px}
.sim-pe .btn{flex:1;justify-content:center}
.sim-obs{font-size:11.5px;color:var(--faint);padding:0 20px 14px;line-height:1.5}
.sim-erro{padding:18px 20px 22px;font-size:13.5px;color:var(--bad)}
.sim-carregando{padding:26px 20px;text-align:center;font-size:13.5px;color:var(--muted)}
@media(max-width:560px){
  .sim-fundo{padding:14px;align-items:center}
  .sim-grade{grid-template-columns:1fr 1fr}
}

.scrim{position:fixed;inset:0;z-index:50;background:rgba(8,12,24,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity var(--t)}
.scrim.show{opacity:1;pointer-events:auto}

/* ============================================================================
   ENTRADA — escolher o consultor e depois digitar a senha
   ========================================================================== */
#login{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; gap:26px; transition:opacity .5s ease, transform .5s ease;
}
#login.hide{opacity:0; transform:scale(1.04); pointer-events:none}
.lock-clock{text-align:center;color:var(--ink);text-shadow:0 1px 20px rgba(0,0,0,.06)}
.lock-clock .t{font-size:64px;font-weight:300;letter-spacing:-1px;line-height:1}
.lock-clock .d{font-size:15px;color:var(--ink-soft);margin-top:6px}
.lock-pergunta{font-size:17px;font-weight:600;color:var(--ink-soft);text-align:center}

/* fileira de perfis: a pessoa se reconhece pela cara, não lê uma lista */
.perfil-fila{display:flex;gap:22px;padding:6px 4px 10px;max-width:100%;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none}
.perfil-fila::-webkit-scrollbar{display:none}
.perfil{display:flex;flex-direction:column;align-items:center;gap:10px;scroll-snap-align:center;
  flex:none;background:none;padding:0}
.perfil .face{width:112px;height:112px;border-radius:16px;display:grid;place-items:center;
  font-size:34px;font-weight:800;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--royal-bright),var(--royal-deep));
  filter:brightness(.82);transform:scale(.96);
  transition:filter var(--t),transform var(--t),box-shadow var(--t)}
.perfil:nth-child(even) .face{background:linear-gradient(135deg,var(--gold-2),var(--gold-deep));color:#241a00}
.perfil .face img{width:100%;height:100%;object-fit:cover}
.perfil .nm{font-size:13.5px;font-weight:600;color:var(--muted);transition:color var(--t)}
.perfil:hover .face,.perfil:focus-visible .face{filter:none;transform:scale(1);
  box-shadow:0 0 0 3px var(--gold)}
.perfil:hover .nm,.perfil:focus-visible .nm{color:var(--ink)}
.perfil.novo .face{background:none;border:2px dashed var(--line);color:var(--faint);
  filter:none;transform:scale(.96)}
/* entrada em cascata: o atraso vem do índice, no HTML */
.perfil{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}

.login-card{
  width:min(400px,100%); background:var(--glass-strong);
  backdrop-filter:blur(26px) saturate(150%); -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1px solid var(--glass-brd); border-radius:22px; box-shadow:var(--shadow-lg);
  padding:34px 30px 28px; animation:rise .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  margin-bottom:22px}
.login-brand .name{font-family:var(--display);font-weight:800;font-size:25px;letter-spacing:.3px;
  line-height:1}
.login-brand .name b{color:var(--gold)}
.login-brand .sub{font-size:12px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;
  font-weight:600}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-soft);margin:0 0 6px 2px}
.field .wrap{position:relative;display:flex;align-items:center}
.field .wrap .ic{position:absolute;left:13px;color:var(--faint);display:flex}
.field input{
  width:100%; padding:12px 14px 12px 40px; border-radius:var(--r-sm);
  background:var(--surface); border:1.5px solid var(--line); color:var(--ink);
  font-size:14px; transition:border-color var(--t), box-shadow var(--t);
}
.field input:focus{border-color:var(--royal-bright);box-shadow:0 0 0 4px rgba(59,111,224,.16);outline:none}
.field .toggle-pw{position:absolute;right:8px;padding:6px;color:var(--faint);border-radius:8px}
.field .toggle-pw:hover{color:var(--ink);background:var(--surface-3)}
.login-error{
  display:none; align-items:center; gap:9px; margin-bottom:14px; padding:10px 12px;
  background:var(--bad-bg); color:var(--bad); border-radius:var(--r-xs); font-size:13px;
  font-weight:600; border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
}
.login-error.show{display:flex;animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}
  40%,80%{transform:translateX(6px)}}
.login-volta{display:block;margin-top:16px;text-align:center;font-size:12.5px;color:var(--muted);
  font-weight:600}
.login-volta:hover{color:var(--royal-bright)}
.login-foot{margin-top:22px;font-size:12px;color:var(--ink-soft);opacity:.8;text-align:center}
.logo{display:inline-grid;place-items:center}
.logo svg{display:block}

/* ============================================================================
   O DOCUMENTO DA COTAÇÃO
   A folha ignora o tema: é sempre branca, com o texto do tema claro, porque é
   isso que vai virar PDF. E nada de vidro nem sombra grande aqui dentro — o
   html2canvas não renderiza backdrop-filter e o resultado sai sujo.
   ========================================================================== */
.doc-luz{
  --ink:#101a2e; --ink-soft:#33405a; --muted:#5d6982; --faint:#8a93a6;
  --line:#e6eaf3; --line-soft:#eef1f8;
  --surface:#ffffff; --surface-2:#f6f8fd; --surface-3:#eef2fb;
  color:var(--ink); background:#fff;
}
.doc-luz *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.doc-area{background:var(--canvas)}

/* ============================================================================
   MODAL DE CADASTRO  (.cs-fundo / .cs-modal)
   ----------------------------------------------------------------------------
   Nasceu dentro do configuracoes.html e ficou preso lá. A tela de Externos
   reusou as classes — o desenho é o mesmo — e abriu SEM ESTILO NENHUM: o
   fundo perdeu o `position:fixed` e o modal virou um bloco solto no meio da
   página. Componente que duas telas usam mora aqui; copiado em cada arquivo,
   é questão de tempo até divergirem.
   ========================================================================== */
.cs-fundo{position:fixed;inset:0;z-index:95;display:none;align-items:center;
  justify-content:center;padding:20px;background:rgba(4,8,22,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cs-fundo.on{display:flex}
.cs-modal{width:min(520px,100%);max-height:90vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:22px}
.cs-modal h2{font-size:16.5px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px}
.cs-modal .sub{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.cs-campos{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.cs-campos .larga{grid-column:1/-1}
.cs-pe{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}
.cs-pe .hint{flex:1;min-width:120px}
@media(max-width:560px){ .cs-campos{grid-template-columns:1fr} }

/* ============================================================================
   PERFIS — o seletor antigo de consultor (perfis.js)
   ----------------------------------------------------------------------------
   Este painel é anterior ao login: quem assina hoje vem da sessão, e o
   cadastro mora em Configurações. Ele continua no DOM porque o editor lê a
   lista de consultores por ele, mas não deve APARECER — e era o que estava
   acontecendo: as regras dele moravam no ui.css, que morreu na limpeza, e sem
   `position:fixed` o "Quem está cotando?" passou a desenhar como um bloco solto
   no pé do editor.

   Fica escondido até alguém chamar Perfis.abrir(), que é quem põe o `.on`.
   ========================================================================== */
.perfis-fundo,.modal-fundo{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(6,10,26,.72); backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.perfis-fundo.on,.modal-fundo.on{display:flex}
.perfis-cx,.modal-cx{width:min(640px,100%);max-height:92vh;overflow:auto;
  padding:22px;border-radius:20px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.perfil-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:12px;margin-top:16px}

/* ------------------------------------------------------------- responsivo */
@media (max-width:1100px){
  .col-3{grid-column:span 6}.col-4{grid-column:span 6}.col-5{grid-column:span 12}
  .col-7{grid-column:span 12}.col-8{grid-column:span 12}.col-9{grid-column:span 12}
}
@media (max-width:900px){
  body{overflow:auto}
  #app{padding:0;height:100dvh}
  .window{height:100dvh;border-radius:0;grid-template-columns:1fr;grid-template-rows:58px 1fr;
    grid-template-areas:"top" "main"}
  .side{position:fixed;top:0;bottom:0;left:0;width:min(86vw,320px);z-index:60;
    transform:translateX(-105%);transition:transform .3s cubic-bezier(.4,0,.2,1);
    border-radius:0 18px 18px 0;border-right:1px solid var(--glass-brd);
    /* rolar a gaveta até o fim não pode continuar rolando a página atrás */
    overscroll-behavior:contain}
  .side.open{transform:none}
  .menu-btn{display:grid}
  .top-clock,.search kbd,.crumb{display:none}
  .main{padding:18px 14px 32px}
  .lock-clock .t{font-size:46px}
  .perfil .face{width:92px;height:92px;font-size:28px}

  /* --------------------------------------------------------- a barra de cima
     A busca é a ÚNICA ação da barra, e no celular ela ficava com 148px:
     `width:min(340px,38vw)` de 390px de tela. Não cabia "BRA1A23" com folga e o
     texto de ajuda saía cortado em "Simul". Com o título fora (ele já está no
     corpo da tela), a sobra toda vai para o campo. */
  .topbar{grid-template-columns:auto 1fr auto;gap:8px;padding:0 10px}
  .tb-lado{flex:none;gap:6px}
  .search{width:auto;max-width:none;margin:0}
  .search input{padding:11px 14px 11px 40px}
  .search .ic{left:13px}

  /* ------------------------------------------------- campos sem zoom no iOS
     Abaixo de 16px o iPhone AMPLIA a página ao focar o campo, e o consultor
     perde o enquadramento a cada toque — some a barra, some o botão, e ele
     tem que afastar com dois dedos para voltar. O editor já fazia isto na
     parte dele; aqui vale para o sistema inteiro. */
  .campo input,.campo select,.campo textarea{font-size:16px;padding:12px 13px}
  .search input{font-size:16px;letter-spacing:1.2px}

  /* ------------------------------------------------------- alvo para o dedo
     A régua é 44px. Ícone de 34px é acerto na sorte, e errar o "sair" quando
     se queria o tema é o tipo de coisa que faz perder a confiança na tela. */
  /* 44px é o mínimo do dedo, e é EXATAMENTE o que cabe: com 46 e o
     espaçamento antigo entre grupos, o último item do menu — o Reportar —
     nascia abaixo da dobra da barra, e um item que só existe depois de rolar
     é um item que ninguém descobre. A marca também encolhe um pouco. */
  .nav-item{min-height:44px;font-size:14.5px;padding:10px 12px}
  .subnav a{min-height:42px}
  .nav-group{margin-top:7px}
  .nav-group .lbl{padding:5px 12px 3px}
  .side-brand{padding:12px 16px 10px}
  .side-brand .marca-cheia{max-width:168px}
  .menu-btn,.icon-btn{width:44px;height:44px;padding:0;display:grid;place-items:center}
  .side-user .sair{width:44px;height:44px}
  .btn{min-height:44px;padding:11px 16px;font-size:14px}
  .btn.sm{min-height:38px;padding:8px 13px}
  .opt{min-height:44px;font-size:13px}
  /* link de texto ("ver todas") tinha 20px de altura: vira faixa tocável */
  .link{display:inline-flex;align-items:center;min-height:36px;padding:0 2px}

  /* O painel de avisos se pendura no sino, e o sino NÃO fica na borda da tela
     (à direita dele ainda vem o botão de ação da página). Com 340px de largura
     alinhados à direita dele, ele saía 131px para fora pela esquerda.
     No celular ele deixa de se pendurar e passa a ser uma folha presa embaixo
     da barra, de margem a margem. */
  .avisos{position:fixed;top:calc(58px + 8px);left:10px;right:10px;width:auto;
       max-width:none}
  .avisos-lista{max-height:min(70vh,460px)}

  .tema-pill{width:68px;height:36px;padding:0 8px}
  .tema-pill .lado{font-size:15px}
  .tema-pill .bola{width:28px;height:28px;top:3px;left:3px}
  .tema-pill.escuro .bola{transform:translateX(32px)}

  /* ------------------------------------------------------- cartões em pilha
     Faltava o col-6 na lista lá de cima: dois cartões de meia largura ficavam
     lado a lado num celular, com 170px cada. Ninguém lê um cartão de 170px. */
  .col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11{grid-column:span 12}

  /* Sem o retângulo cinza do toque, mas COM resposta: o dedo tapa o botão, e
     sem um estado de apertado a pessoa toca duas vezes achando que falhou. */
  a,button,.opt,.nav-item,.lin{-webkit-tap-highlight-color:transparent}
  .btn:active,.opt:active,.nav-item:active,.icon-btn:active{transform:scale(.97)}
}

/* Aparelho sem mouse: o :hover fica GRUDADO depois do toque — o cartão
   continua deslocado, o botão continua levantado, como se ainda estivesse
   apontado. Aqui os efeitos de hover que mexem na posição são desligados. */
@media (hover:none){
  .btn.solid:hover,.btn.acento:hover,.btn.gold:hover,.btn-primary:hover,
  .lin:hover,.card:hover,.cs-lin:hover{transform:none}
  .lin:hover{background:transparent}
}
@media (max-width:560px){
  /* dois KPIs por linha continua bom no celular; o que não cabe é o valor
     grande — "R$ 189,90" quebrava no meio */
  .kpi .val{font-size:22px;white-space:nowrap}
  /* A tabela vira cartão. Empilhar as células sem mais nada não funciona: some
     o cabeçalho e ninguém sabe se "R$ 289,90" é mensalidade ou adesão. Cada
     célula passa a carregar o próprio rótulo em data-rot, e a primeira — a que
     identifica a linha — vira o título do cartão, sem rótulo nenhum. */
  .table thead{display:none}
  .table,.table tbody,.table tr,.table td{display:block;width:100%}
  .table tbody tr{background:var(--surface);border:1px solid var(--line);border-radius:14px;
    margin-bottom:12px;padding:4px 2px;box-shadow:var(--shadow-sm)}
  .table tbody tr:hover{background:var(--surface)}
  .table tbody td{border:none;padding:7px 14px;display:flex;align-items:center;gap:14px;
    justify-content:space-between;min-height:34px}
  .table tbody td::before{content:attr(data-rot);flex:none;font-size:10.5px;font-weight:700;
    letter-spacing:1.2px;text-transform:uppercase;color:var(--faint)}
  .table tbody td:not([data-rot])::before{display:none}
  /* o valor encosta na direita e não quebra */
  .table tbody td[data-rot]{text-align:right}
  .table tbody td[data-rot] > *{margin-left:auto}

  .table tbody td.chefe{display:block;padding:10px 14px 8px;border-bottom:1px solid var(--line-soft);
    margin-bottom:2px}
  .table tbody td.chefe::before{display:none}
  .table tbody td.acoes{padding-top:2px;padding-bottom:8px;justify-content:flex-end}
  .table tbody td.acoes .row-act{gap:6px}
  .table tbody td.acoes .row-act button{width:38px;height:38px}
  .perfil-fila{gap:14px}
}
/* ============================================================================
   AVISO NO CENTRO DA TELA
   ----------------------------------------------------------------------------
   O lead é disputado: quem pega primeiro, fica com ele. O toast de canto durava
   quatro segundos e morria sem ser visto — quem estava digitando uma cotação
   perdia o lead sem nunca saber que ele existiu.

   Este fica até a pessoa responder. Não é modal de verdade: Esc fecha, clique
   fora fecha, e o trabalho por baixo continua onde estava. Chamar a atenção é
   o objetivo; sequestrar a tela não.
   ========================================================================== */
.avc-fundo{position:fixed;inset:0;z-index:120;display:none;align-items:center;
  justify-content:center;padding:20px;background:rgba(4,8,22,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:avcFundo .22s ease-out both}
.avc-fundo.on{display:flex}
@keyframes avcFundo{from{opacity:0}to{opacity:1}}

.avc{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:22px;box-shadow:var(--shadow-lg);padding:30px 26px 22px;
  text-align:center;position:relative;overflow:hidden;
  animation:avcEntra .34s cubic-bezier(.2,1.25,.4,1) both}
/* entra crescendo do centro: o olho vai atrás do que muda de tamanho */
@keyframes avcEntra{from{opacity:0;transform:scale(.86) translateY(12px)}
  to{opacity:1;transform:none}}
.avc-fundo.saindo{animation:avcFundoSai .18s ease-in both}
.avc-fundo.saindo .avc{animation:avcSai .18s ease-in both}
@keyframes avcFundoSai{to{opacity:0}}
@keyframes avcSai{to{opacity:0;transform:scale(.94)}}

/* faixa dourada no topo, como o cabeçalho do documento */
.avc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold),var(--gold-2))}

.avc-ico{width:74px;height:74px;border-radius:50%;margin:0 auto 16px;display:grid;
  place-items:center;color:#fff;position:relative;
  background:linear-gradient(135deg,var(--royal-bright),var(--royal-deep))}
.avc-ico svg{width:34px;height:34px;position:relative;z-index:1}
/* dois anéis saindo do ícone, um atrasado: o pulso não deixa a caixa "parar"
   na periferia da visão de quem está olhando para outro canto da tela */
.avc-ico::before,.avc-ico::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--royal-bright);animation:avcPulso 2s ease-out infinite}
.avc-ico::after{animation-delay:1s}
@keyframes avcPulso{from{opacity:.55;transform:scale(1)}
  to{opacity:0;transform:scale(1.75)}}
/* o sino balança uma vez a cada volta, em vez de tremer sem parar */
.avc-ico svg{animation:avcSino 2.4s ease-in-out infinite}
@keyframes avcSino{0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(-13deg)} 82%{transform:rotate(11deg)}
  88%{transform:rotate(-7deg)} 94%{transform:rotate(4deg)}}

.avc-tit{font-family:'Playfair Display',Georgia,serif;font-size:25px;font-weight:800;
  letter-spacing:-.4px;line-height:1.2;color:var(--ink)}
.avc-txt{font-size:15px;color:var(--ink-soft);line-height:1.55;margin-top:9px;
  overflow-wrap:anywhere}
.avc-qd{display:inline-block;margin-top:12px;font-size:11.5px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;color:var(--gold-deep);
  background:var(--warn-bg);border-radius:var(--r-pill);padding:5px 12px}
.avc-mais{font-size:12.5px;color:var(--muted);margin-top:10px}

.avc-pe{display:flex;gap:10px;margin-top:22px}
.avc-pe .btn{flex:1;justify-content:center}
/* o convite para autorizar o aviso do navegador: discreto, embaixo dos botões
   — é oferta, não a ação principal da caixa */
.avc-permitir{display:flex;align-items:center;justify-content:center;gap:7px;
  width:100%;margin-top:14px;padding:9px 10px;border-radius:11px;font-size:12.5px;
  font-weight:600;color:var(--royal-bright);background:var(--surface-2);
  border:1px solid var(--line);transition:background var(--t),border-color var(--t)}
.avc-permitir:hover:not(:disabled){background:var(--surface-3);border-color:var(--royal-bright)}
.avc-permitir:disabled{color:var(--muted);cursor:default}
@media(max-width:420px){
  .avc{padding:26px 18px 18px}
  .avc-tit{font-size:21px}
  .avc-pe{flex-direction:column-reverse}   /* a ação principal fica no polegar */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  /* sem o pulso, o anel ficaria parado por cima do ícone */
  .avc-ico::before,.avc-ico::after{display:none}
}