/* SONVI · sistema visual
   Identidade da marca: azul SONVI (#0055FF) como destaque, azul-claro (#0199FF) para o que está em andamento,
   preto e branco. Títulos e números em Sora, textos em Manrope. Claro e escuro automáticos.
   Movimento: as telas entram em sequência, gráficos crescem, botões e cartões respondem ao toque. */

:root {
  --bg:#f4f6fa; --surface:#fff; --fill:#eef2f9; --fill-2:#e3e8f1;
  --ink:#0a0b0d; --ink-2:#5b6170; --ink-3:#6b6b74; --menu:#71717a; --line:#e6e9f0; --line-2:#f0f2f6;
  --accent:#0055ff; --accent-hover:#0047d6; --accent-2:#0199ff; --accent-ink:#fff; --accent-soft:#ebf1ff; --accent-text:#0047d6;
  --bar-soft:#cfddff; --dark-card:#0a0b0d; --dark-card-2:#b9bfcb; --dark-line:#26282e;
  /* tons dos status e etiquetas (texto escuro o bastante para ler sobre o fundo claro) */
  --gray:#5b6170; --sky:#00649f; --orange:#9a4d00; --red:#c8312f; --green:#0b7a52; --blue:#0047d6; --purple:#6b3fd1; --ink-tone:#0a0b0d;
  --radius:12px; --radius-m:10px; --radius-s:8px;
  --campo-borda:#d5dae3; /* contorno dos campos: some menos em monitores simples e no sol */
  --shadow:0 1px 2px rgba(10,20,60,.04);
  --shadow-up:0 18px 40px -18px rgba(10,20,60,.28);
  --font:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display:"Sora", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
  --heading-font:var(--display); --body-font:var(--font);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#000; --surface:#121316; --fill:#1b1d22; --fill-2:#26282e;
    --ink:#f5f6f8; --ink-2:#9ba1ad; --ink-3:#8e95a3; --menu:#a1a1aa; --line:#26282e; --line-2:#1d1f24;
    --accent-hover:#1f6bff; --accent-soft:rgba(0,85,255,.22); --accent-text:#2ea6ff;
    --bar-soft:#1d3266; --dark-card:#1b1d22; --dark-card-2:#9ba1ad; --dark-line:#2c2f36;
    --campo-borda:#33363d;
    --gray:#9ba1ad; --sky:#4cb8ff; --orange:#f2a65a; --red:#ff6b61; --green:#3ddc97; --blue:#6aa1ff; --purple:#b69cff; --ink-tone:#f5f6f8;
    --shadow:none; --shadow-up:0 18px 40px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}

* { box-sizing:border-box; }
html, body { height:100%; }
/* A barra de rolagem fica sempre reservada: trocar de aba ou de tela (página curta × longa) não empurra o conteúdo para os lados */
html { overflow-y:scroll; scrollbar-gutter:stable; }
html:has(body.fora) { overflow-y:auto; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 var(--font); -webkit-font-smoothing:antialiased; display:flex; }
h1, h2, h3, p { margin:0; }
a { color:var(--accent-text); text-decoration:none; cursor:pointer; }
a:hover { color:var(--accent); }
.num, .tile b, td.r, th.r { font-variant-numeric:tabular-nums; }

/* ---------- movimento ---------- */
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes pop { 0% { opacity:0; transform:scale(.6); } 60% { transform:scale(1.08); } 100% { opacity:1; transform:scale(1); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--tone, var(--accent)) 50%, transparent); } 70% { box-shadow:0 0 0 9px transparent; } 100% { box-shadow:0 0 0 0 transparent; } }
@keyframes eq { 0%, 100% { transform:scaleY(.25); } 50% { transform:scaleY(1); } }
@keyframes dlg { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* Ao abrir uma tela, os blocos entram um depois do outro */
#content.entra > * { animation:rise .6s var(--ease) both; }
#content.entra > *:nth-child(2) { animation-delay:60ms; } #content.entra > *:nth-child(3) { animation-delay:120ms; }
#content.entra > *:nth-child(4) { animation-delay:180ms; } #content.entra > *:nth-child(5) { animation-delay:240ms; }
#content.entra > *:nth-child(n+6) { animation-delay:300ms; }
#content.entra .tiles > * { animation:rise .6s var(--ease) both; }
#content.entra .tiles > *:nth-child(2) { animation-delay:60ms; } #content.entra .tiles > *:nth-child(3) { animation-delay:120ms; }
#content.entra .tiles > *:nth-child(4) { animation-delay:180ms; } #content.entra .tiles > *:nth-child(n+5) { animation-delay:240ms; }
#bar.entra > * { animation:rise .5s var(--ease) both; }
.entra .bars i { animation:grow 1s var(--ease) both; animation-delay:calc(300ms + var(--i, 0) * 70ms); }
.entra .prog i, .entra .stack { animation:fill 1.1s var(--ease) both; animation-delay:calc(400ms + var(--i, 0) * 90ms); }
.entra .steps .mark { animation:pop .5s var(--ease) both; animation-delay:calc(200ms + var(--i, 0) * 110ms); }
.pulse { animation:pulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* ---------- barra lateral ---------- */
#side { width:248px; flex:none; height:100vh; position:sticky; top:0; padding:26px 16px 18px; display:flex; flex-direction:column; gap:24px; border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; }
.brand { display:block; padding:2px 10px; }
.brand img { display:block; width:112px; height:auto; }
.veh { position:relative; display:flex; align-items:center; gap:10px; padding:6px 12px 6px 6px; border:1px solid var(--line); border-radius:8px; background:var(--surface); cursor:pointer; transition:background .2s, border-color .2s; }
.veh:hover { background:var(--fill); }
.veh:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.veh select { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.veh .vt { display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2; }
.veh .vt b { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.veh .vt small { font-size:12px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.veh svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--ink-2); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.vav.img { background:#fff; border:1px solid var(--line); overflow:hidden; } .vav.img img { width:100%; height:100%; object-fit:contain; }
.acessos { display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:var(--radius-m); background:var(--fill); }
.acessos[hidden] { display:none; }
.acessos .ac-l { display:grid; grid-template-columns:32px minmax(0, 1fr) 210px; align-items:center; gap:10px; }
.acessos .ac-l select { width:100%; min-width:0; background-color:var(--surface); }
@media (max-width:520px) { .acessos .ac-l { grid-template-columns:32px minmax(0, 1fr); } .acessos .ac-l select { grid-column:1 / -1; } }
.logo-campo { display:flex; gap:16px; align-items:center; padding:14px; border-radius:var(--radius-m); background:var(--fill); }
.logo-prev { width:96px; height:96px; flex:none; border-radius:10px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink-3); }
.logo-prev img { width:100%; height:100%; object-fit:contain; }
.logo-info { display:flex; flex-direction:column; gap:8px; min-width:0; } .logo-info small { line-height:1.3; }
.cores { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cor { width:26px; height:26px; border-radius:999px; border:2px solid var(--surface); box-shadow:0 0 0 1px var(--line); cursor:pointer; padding:0; transition:transform .15s var(--ease); }
.cor:hover:not(:disabled) { transform:scale(1.12); } .cor.on { box-shadow:0 0 0 2px var(--ink); } .cor:disabled { cursor:default; }
form.ver .logo-info .row { display:none; }
@media (max-width:520px) { .logo-campo { flex-direction:column; align-items:flex-start; } }
.vav { width:32px; height:32px; border-radius:999px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#fff; font:700 11px/1 var(--display); letter-spacing:.02em; }
#side nav { display:flex; flex-direction:column; gap:2px; }
#side nav a, #side nav span.soon { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--radius-s); color:var(--ink); font-weight:500; transition:background .2s, color .2s, transform .15s; }
#side nav a { color:var(--menu); } /* cinza do menu, sóbrio (referência StayOne) */
#side nav a:hover { background:var(--fill); color:var(--ink); }
#side nav a:active { transform:scale(.97); }
#side nav a.on { background:var(--accent-soft); color:var(--accent-text); font-weight:600; }
#side nav svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#side nav .badge { margin-left:auto; min-width:22px; text-align:center; background:var(--accent); color:var(--accent-ink); border-radius:999px; font-size:12px; font-weight:600; padding:1px 7px; }
#side nav .sec { font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; padding:18px 12px 4px; }
#side nav span.soon { color:var(--ink-3); cursor:default; }

.dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex:none; }
.av { width:38px; height:38px; border-radius:999px; flex:none; display:inline-flex; align-items:center; justify-content:center; background:var(--ink); color:var(--bg); font:600 13px/1 var(--display); }
.av.soft { background:var(--accent-soft); color:var(--accent-text); width:36px; height:36px; font-size:12px; }
.eu { margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:var(--radius-m); background:var(--fill); }
.eu div { flex:1; min-width:0; } .eu b, .eu small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .eu b { font-size:14px; } .eu small { color:var(--ink-2); font-size:12px; }
#saveState { color:var(--ink-3); font-weight:400; }

/* ---------- acesso (entrar / criar conta) ---------- */
body.fora #side, body.fora #bar { display:none; }
body.fora #main { display:flex; }
body.fora #content { max-width:none; width:100%; min-height:100vh; display:flex; padding:0; }
.acesso { flex:1; display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); min-height:100vh; }
.acesso .lado { position:relative; overflow:hidden; background:#0055ff; color:#fff; padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.acesso .lado img.marca { width:132px; height:auto; }
.acesso .lado img.simbolo { position:absolute; right:-80px; bottom:-90px; width:440px; opacity:.12; }
.acesso .lado h2 { font:600 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing:-.03em; max-width:12em; }
.acesso .lado p { color:#eef3ff; max-width:30em; margin-top:14px; }
.acesso .forma { display:grid; place-items:center; padding:32px 24px; }
.auth { width:min(380px, 100%); display:grid; gap:16px; margin:0; animation:rise .6s var(--ease) both; }
.auth .logo { width:118px; height:auto; margin-bottom:6px; }
@media (min-width:821px) { .acesso .auth picture { display:none; } }
.auth h1 { font:600 30px/1.1 var(--display); letter-spacing:-.03em; text-wrap:balance; }
.auth .btn { height:50px; font-size:14px; }
.auth input { height:48px; padding:0 14px; font-size:15px; }
.auth > a { justify-self:center; font-weight:600; font-size:14px; }
.carregando { flex:1; display:grid; place-items:center; gap:16px; min-height:100vh; }
.carregando img { width:56px; height:auto; animation:pop .5s var(--ease) both; }
.eq { display:flex; align-items:flex-end; gap:4px; height:22px; }
.eq span { width:4px; height:100%; border-radius:2px; background:var(--tone, var(--accent)); transform-origin:bottom; animation:eq 1.1s ease-in-out infinite; }
.eq span:nth-child(2) { animation-delay:.18s; } .eq span:nth-child(3) { animation-delay:.36s; } .eq span:nth-child(4) { animation-delay:.09s; } .eq span:nth-child(5) { animation-delay:.27s; }

/* ---------- área principal ---------- */
#main { flex:1; min-width:0; }
/* Acesso de suporte do SONVI dentro do ambiente de um cliente */
.faixa-suporte { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px 16px; flex-wrap:wrap; padding:10px clamp(18px, 3vw, 44px); background:var(--ink); color:var(--surface); font-size:14px; }
.faixa-suporte .fs-tx { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.faixa-suporte .fs-tx svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.faixa-suporte .btn { --btn-borda:color-mix(in srgb, var(--surface) 70%, transparent); color:var(--surface); height:36px; }
.faixa-suporte .btn:hover { background:var(--surface); border-color:var(--surface); color:var(--ink); }
.auth .org-logo { width:auto; max-width:220px; height:46px; object-fit:contain; object-position:left; }
.auth .org-nome { font:600 22px/1.2 var(--display); letter-spacing:-.02em; }
@media (prefers-color-scheme:dark) { .auth .org-logo { background:#fff; padding:6px 10px; border-radius:8px; box-sizing:content-box; } }
.sup-log .tx small { white-space:normal; }
#bar { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; padding:34px clamp(18px, 3vw, 44px) 10px; max-width:1268px; margin:0 auto; }
#bar h1 { font:600 clamp(28px, 2.6vw, 38px)/1.1 var(--display); letter-spacing:-.03em; flex:1; min-width:220px; text-wrap:balance; }
#bar .sub { display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--ink-2); font:500 14px/1.5 var(--font); letter-spacing:0; margin-bottom:8px; }
#content { padding:18px clamp(18px, 3vw, 44px) 80px; max-width:1268px; margin:0 auto; }

.card { background:var(--surface); border-radius:var(--radius); padding:24px; margin-bottom:16px; box-shadow:var(--shadow); }
.card > :is(h2, h3), .card .hd :is(h2, h3) { font:600 18px/1.3 var(--display); letter-spacing:-.01em; text-wrap:balance; margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card .hd { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; }
.card .hd :is(h2, h3) { margin:0; }
.card .hd span, .card .hd a { font-size:13px; } .card .hd span { color:var(--ink-2); } .card .hd a { font-weight:600; }
.cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; margin-bottom:16px; }
.cols > .card { margin:0; }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.row.mid { align-items:center; }
.grow { flex:1; }
.muted { color:var(--ink-2); } .small { font-size:13px; }
.empty { text-align:center; color:var(--ink-2); padding:52px 16px; }
.empty b { display:block; color:var(--ink); font:600 18px/1.3 var(--display); margin-bottom:6px; letter-spacing:-.01em; }
.note { background:color-mix(in srgb, var(--red) 10%, transparent); color:var(--red); border-radius:var(--radius-m); padding:12px 16px; font-size:14px; margin-bottom:16px; }
.note.info { background:var(--fill); color:var(--ink-2); } .note.info b { color:var(--ink); }
.note.info a { font-weight:600; }

/* ---------- campos e botões ---------- */
input, select, textarea, button { font:inherit; color:inherit; }
input, select, textarea { border:1px solid var(--campo-borda); border-radius:var(--radius-s); background:var(--fill); padding:9px 12px; min-width:0; outline:none; transition:box-shadow .2s, border-color .2s, background .2s; }
input:focus, select:focus, textarea:focus { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
input:disabled, select:disabled, textarea:disabled { color:var(--ink-2); opacity:.85; }
input[type="search"] { border-radius:8px; padding-left:40px; background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238c93a1' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px 50%; border-color:var(--line); }
input[type="checkbox"] { accent-color:var(--accent); width:18px; height:18px; }
input[type="color"] { padding:3px; height:42px; }
textarea { width:100%; min-height:84px; resize:vertical; }
small.dica { color:var(--ink-2); font-size:12px; font-weight:500; }
small.aviso { color:var(--red); font-size:12px; font-weight:500; }
::placeholder { color:var(--ink-3); opacity:1; } /* exemplo legível (contraste 4,5:1), mais claro que o texto digitado */
input:user-invalid, textarea:user-invalid { border-color:var(--red); box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 15%, transparent); }
select { appearance:none; padding-right:30px; background-image:linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position:calc(100% - 15px) 55%, calc(100% - 10px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
label.f { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2); }
.btn, .btn.pri { --btn-borda:color-mix(in srgb, var(--ink) 55%, transparent); display:inline-flex; align-items:center; justify-content:center; gap:8px; position:relative; isolation:isolate; overflow:hidden; white-space:nowrap; cursor:pointer;
  font:600 13px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; padding:0 24px; height:44px;
  border:.5px solid var(--btn-borda); border-radius:8px; background:transparent; color:var(--ink); transition:background-color .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1), color .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1); }
/* Botão (efeito "Swap Out", aprovado em 17/10/2026): contorno na cor do texto; ao passar o mouse, enche com a cor da rádio e o texto fica branco */
.btn:hover, .btn.pri:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); box-shadow:none; }
.btn:disabled, .btn:disabled:hover { opacity:.5; cursor:default; background:transparent; border-color:var(--btn-borda); color:var(--ink); }
/* Ação principal (decidido em 19/10/2026): .pri já vem preenchido com a cor da rádio, para o olho saber onde clicar; ao passar o mouse, escurece um pouco */
.btn.pri { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.pri:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }
.btn svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn.danger, .btn.perigo { border-color:color-mix(in srgb, var(--red) 60%, transparent); color:var(--red); background:transparent; }
.btn.danger:hover, .btn.perigo:hover { background:var(--red); border-color:var(--red); color:#fff; }
.btn.warn { border-color:color-mix(in srgb, var(--orange) 60%, transparent); color:var(--orange); }
.btn.warn:hover { background:var(--orange); border-color:var(--orange); color:#fff; }
.btn.sm { height:34px; padding:0 14px; font-size:12px; letter-spacing:.06em; }
@media (prefers-reduced-motion: reduce) { .btn { transition:none; } }
.x { border:0; background:none; color:var(--ink-3); cursor:pointer; font-size:18px; line-height:1; padding:4px 6px; border-radius:8px; transition:color .2s, background .2s; }
.x:hover { color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent); }
.duo { display:flex; } .duo input { border-radius:var(--radius-s) 0 0 var(--radius-s); width:84px; text-align:right; } .duo select { border-radius:0 var(--radius-s) var(--radius-s) 0; margin-left:1px; }
.seg { display:inline-flex; background:var(--fill-2); border-radius:8px; padding:4px; margin-bottom:18px; gap:2px; max-width:100%; overflow-x:auto; }
.seg button { border:0; background:none; padding:7px 16px; border-radius:6px; cursor:pointer; font-weight:500; font-size:14px; color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(10,20,60,.14); font-weight:600; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 11px; border-radius:6px; font-size:12px; font-weight:600; background:color-mix(in srgb, var(--tone) 13%, transparent); color:var(--tone); white-space:nowrap; letter-spacing:0; }
.pill { color:color-mix(in srgb, var(--tone) 84%, #000); } /* texto das etiquetas um pouco mais escuro: contraste 4,5:1 */
@media (prefers-color-scheme: dark) { .pill { color:var(--tone); } }
.pill.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--tone); animation:pulse 2s ease-out infinite; }

/* ---------- tabelas ---------- */
.scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th { text-align:left; font-size:12px; font-weight:500; color:var(--ink-2); padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:13px 10px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
td.r, th.r { text-align:right; }
tr.tot td { font-weight:600; border-top:1px solid var(--line); }
tr.click { cursor:pointer; } tr.click td { transition:background .2s; } tr.click:hover td { background:var(--fill); }
tr.click td:first-child { border-radius:var(--radius-s) 0 0 var(--radius-s); } tr.click td:last-child { border-radius:0 var(--radius-s) var(--radius-s) 0; }
td.edit { padding:5px 6px; } td.edit input, td.edit select { width:100%; }
.chip { display:inline-block; padding:3px 9px; border-radius:8px; background:var(--accent-soft); color:var(--accent-text); font-weight:600; font-size:13px; white-space:nowrap; }

/* ---------- cartões de números ---------- */
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:16px; margin-bottom:16px; }
.tile { position:relative; overflow:hidden; background:var(--surface); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s; }
.tile:hover { transform:translateY(-3px); box-shadow:var(--shadow-up); }
.tile small { color:var(--ink-2); font-size:14px; font-weight:500; }
.tile b { display:block; font:600 clamp(26px, 2.3vw, 32px)/1.1 var(--display); letter-spacing:-.03em; }
.tile span { align-self:flex-start; padding:3px 10px; border-radius:6px; background:var(--fill); color:var(--ink-2); font-size:12px; font-weight:600; }
.tile span.bom { background:color-mix(in srgb, var(--green) 13%, transparent); color:var(--green); }
.tile span.ruim { background:color-mix(in srgb, var(--orange) 13%, transparent); color:var(--orange); }
.tile.hero { background:var(--accent); color:#fff; }
.tile.hero small { color:#fff; opacity:.9; } .tile.hero span { background:rgba(255,255,255,.18); color:#fff; }
.tile.hero::after { content:""; position:absolute; right:-18px; bottom:-24px; width:120px; height:142px; background:url("../img/simbolo-branco.svg") no-repeat center / contain; opacity:.16; pointer-events:none; }

/* ---------- gráficos ---------- */
.bars { height:200px; display:flex; align-items:flex-end; gap:12px; border-bottom:1px solid var(--line); }
.bars > div { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; min-width:0; }
.bars b { font-size:12px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.bars i { display:block; width:100%; max-width:44px; border-radius:10px 10px 4px 4px; background:var(--bar-soft); transform-origin:bottom; min-height:3px; }
.bars > div.on i { background:var(--accent); } .bars > div.on b { color:var(--accent-text); }
.bars-x { display:flex; gap:12px; margin-top:10px; } .bars-x span { flex:1; text-align:center; font-size:12px; color:var(--ink-2); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stack { display:flex; height:14px; border-radius:999px; overflow:hidden; gap:4px; margin-bottom:14px; transform-origin:left; background:var(--fill); }
.stack i { display:block; min-width:6px; }
.legend { display:flex; flex-direction:column; }
.legend > a, .legend > div { display:flex; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-s); color:var(--ink); transition:background .2s; }
.legend > a:hover { background:var(--fill); }
.legend .sq { width:10px; height:10px; border-radius:3px; flex:none; }
.legend .n { width:32px; text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
.prog { height:6px; border-radius:999px; background:var(--fill); overflow:hidden; }
.prog i { display:block; height:100%; border-radius:999px; background:var(--accent); transform-origin:left; }
.prog i.ruim { background:var(--orange); }
.people > div { display:grid; grid-template-columns:36px minmax(0, 1fr) auto; align-items:center; gap:12px; padding:10px 8px; border-radius:var(--radius-m); }
.people .who { display:flex; flex-direction:column; gap:6px; min-width:0; }
.people .who > div { display:flex; justify-content:space-between; gap:8px; }
.people .val { display:flex; flex-direction:column; align-items:flex-end; min-width:92px; }
.list > a, .list > div { display:flex; align-items:center; gap:16px; padding:12px 8px; border-radius:var(--radius-m); color:var(--ink); transition:background .2s; }
.list > a:hover { background:var(--fill); }
.list .ic { width:40px; height:40px; border-radius:var(--radius-s); background:var(--fill); color:var(--accent-text); display:flex; align-items:center; justify-content:center; flex:none; }
.list .ic svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.list .tx { flex:1; min-width:0; display:flex; flex-direction:column; } .list .tx b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list .tx small { color:var(--ink-2); font-size:13px; }
.list .vl { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }

/* Agenda */
.agenda .ag { display:grid; grid-template-columns:72px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:12px 8px; border-bottom:1px solid var(--line-2); }
.agenda .ag:last-child { border-bottom:0; }
.agenda .qd { display:flex; flex-direction:column; } .agenda .qd b { font:600 17px/1.2 var(--display); font-variant-numeric:tabular-nums; } .agenda .qd small { color:var(--ink-2); font-size:12px; }
.agenda .tx { display:flex; flex-direction:column; min-width:0; } .agenda .tx small { color:var(--ink-2); font-size:13px; }
.agenda .tx .res { color:var(--ink); background:var(--fill); border-radius:10px; padding:6px 10px; margin-top:6px; }
.agenda .ac { display:flex; align-items:center; gap:8px; }
@media (max-width:820px) { .agenda .ag { grid-template-columns:56px minmax(0, 1fr); } .agenda .ac { grid-column:2; } }

/* Próximo compromisso do consultor */
.next { position:relative; overflow:hidden; background:var(--accent); color:#fff; border-radius:8px; padding:22px; margin-bottom:16px; display:flex; flex-direction:column; gap:16px; }
.next .eq { position:absolute; right:22px; top:22px; height:28px; opacity:.55; --tone:#fff; }
.next .quando { align-self:flex-start; padding:4px 11px; border-radius:6px; background:rgba(255,255,255,.18); font-size:13px; font-weight:600; }
.next h2 { font:600 24px/1.2 var(--display); letter-spacing:-.02em; }
.next p { opacity:.9; }
.next .row { gap:10px; align-items:center; }
.next .btn, .next .btn.ghost { border-color:rgba(255,255,255,.7); background:transparent; color:#fff; height:48px; }
.next .btn:hover, .next .btn.ghost:hover { background:#fff; border-color:#fff; color:#0040c0; }

/* ---------- PI ---------- */
.steps { position:relative; display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr)); gap:8px; }
.steps::before, .steps::after { content:""; position:absolute; left:calc(50% / var(--n, 5)); top:15px; height:3px; border-radius:999px; }
.steps::before { right:calc(50% / var(--n, 5)); background:var(--line); }
.steps::after { width:calc((100% - 100% / var(--n, 5)) * var(--p, 0)); background:var(--accent); transform-origin:left; transition:width .6s var(--ease); }
.steps > div { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.steps .mark { width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:var(--surface); border:2px solid var(--line); }
.steps .ok .mark { background:var(--accent); border-color:var(--accent); }
.steps .ok .mark svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.steps .now .mark { border:3px solid var(--tone, var(--accent-2)); }
.steps .now .mark::after { content:""; width:10px; height:10px; border-radius:50%; background:var(--tone, var(--accent-2)); animation:pulse 2s ease-out infinite; }
.steps b { font-size:14px; } .steps .todo b { color:var(--ink-2); font-weight:500; }
.steps small { display:block; font-size:12px; color:var(--ink-2); }
.layout { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:16px; align-items:start; }
.layout > .sum { position:sticky; top:16px; }
.sum.card { background:var(--dark-card); color:#fff; }
.sum :is(h2, h3) { color:var(--dark-card-2); font-size:15px; }
.sum .big { font:600 34px/1.1 var(--display); letter-spacing:-.03em; margin:-4px 0 16px; font-variant-numeric:tabular-nums; }
.sum div { display:flex; justify-content:space-between; gap:12px; margin-bottom:9px; font-variant-numeric:tabular-nums; }
.sum small { color:var(--dark-card-2); font-size:13px; } .sum b { font-size:14px; font-weight:600; } .sum .g b { color:#7ee2b4; }
.sum hr { border:0; border-top:1px solid var(--dark-line); margin:14px 0; }
.pieces { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.piece { display:flex; align-items:center; gap:6px; background:var(--fill); border-radius:var(--radius-s); padding:2px 4px 2px 12px; }
.piece b { color:var(--accent-text); font-family:var(--display); } .piece input { background:none; border:0; padding:7px 4px; width:170px; } .piece input:focus { box-shadow:none; }
.grid td, .grid th { padding:4px; border-bottom:0; }
.grid th.d { text-align:center; font-size:11px; line-height:1.2; padding:2px; }
.grid th.d.we { color:var(--red); }
.grid input.day { width:30px; height:30px; padding:0; text-align:center; border-radius:8px; font-weight:600; font-size:13px; }
.grid input.day.has { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.grid input.w { width:200px; } .grid input.n { width:96px; text-align:right; }
.grid tr.tot td { padding-top:12px; }
.hist { list-style:none; margin:0; padding:0; }
.hist li { display:grid; grid-template-columns:12px 130px auto minmax(0, 1fr); gap:12px; align-items:center; padding:9px 0; font-size:14px; }
.hist li::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent-2); }

/* ---------- diálogo e aviso ---------- */
dialog { border:0; border-radius:8px; padding:0; width:min(560px, 94vw); background:var(--surface); color:var(--ink); box-shadow:0 40px 100px -20px rgba(0,0,0,.45); }
dialog[open] { animation:dlg .32s var(--ease) both; }
dialog::backdrop { background:rgba(8,12,24,.38); backdrop-filter:blur(6px); animation:fade .25s ease both; }
dialog form { padding:28px; display:grid; gap:16px; max-height:88vh; overflow-y:auto; } dialog h2 { font:600 22px/1.2 var(--display); letter-spacing:-.02em; }
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .g2 input, .g2 select { width:100%; }
.row.so-ver, .row.so-editar { align-items:center; }
form.ver .so-editar, form:not(.ver) .so-ver { display:none; }
form.ver .g2 button { display:none; }
form.ver input:disabled, form.ver select:disabled, form.ver textarea:disabled { color:var(--ink); opacity:1; }
.caixa { padding:16px; border-radius:var(--radius-m); background:var(--fill); }
.caixa input, .caixa select { background:var(--surface); }
.menu { position:fixed; z-index:40; min-width:230px; padding:6px; border-radius:10px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 60px -18px rgba(10,20,60,.35); animation:dlg .18s var(--ease) both; }
.menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; font:inherit; font-weight:500; color:var(--ink); text-align:left; cursor:pointer; }
.menu button:hover, .menu button:focus { background:var(--fill); outline:none; } .menu button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.menu button svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.menu button.perigo { color:var(--red); }
.menu hr { border:0; border-top:1px solid var(--line); margin:5px 4px; }
.btn.tres { width:36px; height:36px; padding:0; border-color:transparent; background:transparent; color:var(--ink); }
.btn.tres:hover { background:var(--fill); border-color:transparent; color:var(--ink); }
.btn.tres svg { fill:currentColor; stroke:none; }
.chk { display:flex; gap:10px; align-items:center; font-size:14px; color:var(--ink); font-weight:400; flex-direction:row; }
#toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 24px) scale(.96); background:var(--ink); color:var(--bg); padding:12px 20px; border-radius:8px; font-size:14px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .25s, transform .4s cubic-bezier(.2,1.4,.4,1); z-index:30; max-width:min(560px, 92vw); text-align:center; box-shadow:0 18px 40px -16px rgba(0,0,0,.5); }
#toast.on { opacity:1; transform:translate(-50%, 0) scale(1); }

/* ---------- celular: a barra lateral vira barra de abas flutuante ---------- */
@media (max-width:820px) {
  body { display:block; }
  #side { display:contents; }
  #side .brand, #side nav .sec, #side nav span.soon { display:none; }
  #main::before { content:""; position:fixed; top:0; left:0; right:0; height:64px; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); z-index:9; }
  body.fora #main::before { display:none; }
  #side .veh { position:fixed; top:12px; left:14px; max-width:calc(100vw - 150px); z-index:11; padding:4px 12px 4px 4px; }
  #side .veh .vav { width:30px; height:30px; } #side .veh .vt small { display:none; }
  #side .eu { position:fixed; top:12px; right:14px; z-index:11; margin:0; padding:0; background:none; gap:6px; }
  #side .eu div { display:none; } #side .eu .av { width:40px; height:40px; }
  #side .eu .btn { height:40px; padding:0 14px; }
  #side nav { position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:11; flex-direction:row; justify-content:space-around; gap:0; padding:8px 6px; border-radius:8px; background:color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px); border:1px solid var(--line); box-shadow:0 18px 40px -18px rgba(10,20,60,.35); overflow-x:auto; }
  #side nav a { flex-direction:column; gap:4px; font-size:11px; padding:6px 4px; position:relative; min-width:58px; border-radius:10px; white-space:nowrap; } /* "Follow-up" não quebra em duas linhas */
  #side nav a.on { background:none; }
  #side nav svg { width:22px; height:22px; }
  #side nav .badge { position:absolute; top:0; right:6px; margin:0; font-size:11px; min-width:18px; padding:0 5px; }
  #bar { padding:84px 16px 4px; } #content { padding:12px 16px 120px; }
  .faixa-suporte { position:static; margin:66px 12px 0; border-radius:8px; padding:10px 14px; } body.com-suporte #bar { padding-top:18px; }
  .card { padding:20px; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; } .tile { padding:18px; gap:10px; } .tile b { font-size:24px; } .tile small { font-size:13px; }
  .tile span { white-space:normal; }
  .layout { grid-template-columns:minmax(0, 1fr); } .layout > .sum { position:static; order:-1; }
  .g2 { grid-template-columns:1fr; }
  .cols { grid-template-columns:minmax(0, 1fr); }
  .acesso { grid-template-columns:1fr; }
  .acesso .lado { display:none; }
  .steps b { font-size:12px; } .steps small { display:none; }
  .bars { gap:6px; } .bars-x { gap:6px; } .bars b { font-size:11px; }
}


/* ---------- menu lateral recolhível (botão no alto; recolhido = só ícones, a mesma forma do PI) ---------- */
.recolher { display:none; }
@media (min-width:821px) {
  #side .recolher { position:absolute; top:20px; right:12px; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:10px; background:none; color:var(--menu); cursor:pointer; transition:background .2s, color .2s; }
  #side .recolher:hover { background:var(--fill); color:var(--ink); }
  #side .recolher svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  #side .recolher svg + svg { display:none; }
  body.compacto #side .recolher { position:static; flex:none; margin:-8px 0 -6px; }
  body.compacto #side .recolher svg:first-of-type { display:none; } body.compacto #side .recolher svg + svg { display:block; }
  #side nav a { white-space:nowrap; }
  body.mexendo-menu #side { transition:width .25s var(--ease), padding .25s var(--ease); overflow:hidden; }
}
@media (prefers-reduced-motion: reduce) { body.mexendo-menu #side { transition:none; } }

/* ---------- PI: largura total e barra lateral compacta ---------- */
#bar.largo, #content.largo { max-width:1900px; }
.brand .so-simbolo { display:none; width:30px; height:auto; }
@media (min-width:821px) {
  body.compacto #side { width:76px; padding:22px 10px 16px; align-items:center; }
  body.compacto .brand { padding:2px 0; } body.compacto .brand picture { display:none; } body.compacto .brand .so-simbolo { display:block; }
  body.compacto .veh { padding:3px; border:0; } body.compacto .veh .vt, body.compacto .veh > svg { display:none; }
  body.compacto #side nav { width:100%; }
  body.compacto #side nav a { font-size:0; gap:0; justify-content:center; padding:11px 0; position:relative; }
  body.compacto #side nav a svg { width:22px; height:22px; } body.compacto #side nav a.externo svg:last-child { display:none; }
  body.compacto #side nav .badge { position:absolute; top:3px; right:2px; font-size:11px; min-width:18px; padding:0 5px; }
  body.compacto #side nav .sec, body.compacto #side nav span.soon { display:none; }
  body.compacto .eu { flex-direction:column; padding:6px 0; background:none; } body.compacto .eu div { display:none; }
  body.compacto .eu .btn { padding:0 10px; font-size:12px; height:30px; }
}

/* ---------- PI: cabeçalho, abas e informações ---------- */
.titulo-in { font:inherit; letter-spacing:inherit; color:inherit; width:100%; max-width:900px; padding:2px 10px; margin-left:-11px; border-radius:8px; }
.sujo { display:inline-flex; align-items:center; gap:8px; color:var(--orange); font-size:13px; font-weight:600; white-space:nowrap; }
.sujo[hidden] { display:none; }
.sujo i { width:8px; height:8px; border-radius:50%; background:#e08a2e; --tone:#e08a2e; animation:pulse 2s ease-out infinite; }
.salvo { white-space:nowrap; align-self:center; }
.abas { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; }
.abas button { border:0; background:none; padding:10px 0; font:inherit; font-weight:500; color:var(--ink-2); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; transition:color .2s, border-color .2s; }
.abas button:hover { color:var(--ink); }
.abas button.on { color:var(--accent-text); border-color:var(--accent); font-weight:600; }
.abas .cont { min-width:18px; padding:0 5px; border-radius:999px; background:var(--fill-2); color:var(--ink); font-size:11px; font-weight:600; text-align:center; }
.pi-info { padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.pi-info .lin { display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; }
.pi-info .cond { padding-top:10px; border-top:1px solid var(--line-2); }
.pi-info .ic { display:flex; align-items:center; gap:8px; min-width:0; }
.pi-info .ic > small { color:var(--ink-3); font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.pi-info .val { padding:4px 10px; border:1px solid var(--line); border-radius:10px; font-weight:500; }
.pi-info input, .pi-info select { height:36px; padding-top:0; padding-bottom:0; max-width:240px; }
.pi-info .duo input { width:72px; }
.pecas { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
.peca { display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; border-radius:var(--radius-s); background:var(--surface); border:1px solid var(--line); max-width:100%; }
.peca input { height:30px; width:220px; max-width:52vw; }
.btn.tracej { border-width:1px; border-style:dashed; border-color:var(--ink-2); background:transparent; color:var(--ink-2); }
.btn.tracej:hover { border-style:solid; background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pc { width:26px; height:26px; flex:none; border-radius:8px; background:var(--pc); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:600 12px/1 var(--display); }
select.pc-sel { width:46px; height:30px; padding:0 20px 0 9px; border:0; border-radius:8px; background-color:var(--pc); color:#fff; font-weight:700; background-image:linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position:calc(100% - 12px) 55%, calc(100% - 8px) 55%; }
select.pc-sel option { color:var(--ink); background:var(--surface); }
.pi-corpo { display:grid; grid-template-columns:minmax(0, 1fr) 240px; gap:16px; align-items:start; }
.pi-grades { min-width:0; display:flex; flex-direction:column; gap:16px; }
.pi-grades > .card, .pi-grades > p { margin:0; }
.pi-sum { position:sticky; top:16px; margin:0; padding:20px; }
.pi-sum :is(h2, h3) { font:600 16px/1.3 var(--display); margin-bottom:8px; }
.pi-sum div { display:flex; flex-direction:column; padding:7px 0; }
.pi-sum small { color:var(--ink-2); font-size:12px; }
.pi-sum b { font:600 17px/1.3 var(--display); font-variant-numeric:tabular-nums; }
.pi-sum .g b { color:var(--green); }
.pi-sum .hr { border-top:1px solid var(--line-2); margin-top:6px; padding-top:13px; }
.obs { white-space:pre-line; margin:0; }

/* ---------- PI: grade do mês ---------- */
.grade { padding:0; overflow:hidden; }
.g-hd { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; padding:16px 20px; }
.g-hd :is(h2, h3) { margin:0 auto 0 0 !important; font:600 17px/1.3 var(--display); }
.g-hd label { display:flex; align-items:center; gap:8px; color:var(--ink-2); font-size:14px; }
.g-hd label b { color:var(--ink); font-weight:600; }
.g-hd input, .g-hd select { height:38px; } .g-hd input[list] { width:190px; } .g-hd select { min-width:180px; }
.grade, .it-ab { --pc:var(--accent); }
.gr { display:grid; grid-template-columns:292px minmax(0, 1fr) auto; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.gr .ln { height:48px; box-sizing:border-box; display:flex; align-items:center; gap:6px; padding:0 10px; border-top:1px solid var(--line-2); }
.gr .ln.cb { height:46px; border-top:0; background:var(--bg); font-size:12px; color:var(--ink-2); font-weight:500; }
.gr .ln.ft { height:52px; border-top:1px solid var(--line); }
.gr-l { border-right:1px solid var(--line); min-width:0; }
.gr-l .ln { display:grid; grid-template-columns:22px minmax(0, 1.25fr) minmax(0, 1fr); gap:4px; padding-left:4px; }
.gr-l .rm { padding:2px; font-size:16px; opacity:0; } .gr-l .ln:hover .rm, .gr-l .rm:focus-visible { opacity:1; } .gr-l .rm:hover { color:var(--red); }
.gr-l .ln.ft { display:flex; justify-content:space-between; }
.gr-l input, .gr-l select { height:32px; padding-top:0; padding-bottom:0; padding-left:8px; font-size:13px; min-width:0; width:100%; }
.gr-l select:not(.pc-sel) { padding-right:24px; background-position:calc(100% - 13px) 55%, calc(100% - 8px) 55%; }
.gr-l .tx { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; }
.gr-m { overflow-x:auto; min-width:0; }
.gr-mi { width:max-content; min-width:100%; }
.gr .dias { gap:2px; }
.dh { width:24px; flex:none; text-align:center; font-size:11px; line-height:1.2; color:var(--ink-2); display:flex; flex-direction:column; }
.dh b { font-size:12px; font-weight:600; color:var(--ink); } .dh.we, .dh.we b { color:var(--red); }
.day { width:24px; height:24px; flex:none; box-sizing:border-box; padding:0; border-radius:7px; text-align:center; font-size:12px; font-weight:700; border:1px solid var(--line); background:var(--surface); color:#fff; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s, background .15s; }
input.day:hover { transform:scale(1.12); }
input.day:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); background:var(--surface); color:var(--ink); }
.day.has { background:var(--pc); border-color:var(--pc); color:#fff; }
.dt { width:24px; flex:none; text-align:center; font-size:11px; color:var(--ink-2); font-weight:600; }
.gr-r { border-left:1px solid var(--line); }
.gr-r .vals { display:grid; grid-template-columns:36px 80px 118px 92px; gap:6px; justify-content:end; text-align:right; }
.gr-r .vals .ins { text-align:center; font-weight:600; background:var(--bg); border-radius:7px; padding:3px 0; }
.gr-r .ln.cb .ins, .gr-r .ln.ft .ins { background:none; }
.gr-r input.n { width:78px; height:30px; padding:0 8px; text-align:right; font-size:13px; }
.gr-r .duo input { width:50px; height:30px; padding:0 6px; font-size:13px; text-align:right; }
.gr-r .duo select { height:30px; width:66px; padding:0 18px 0 6px; font-size:13px; background-position:calc(100% - 11px) 55%, calc(100% - 7px) 55%; }
.gr-r .sub { white-space:nowrap; font-size:13px; }
.gr-r .bon { text-align:center; } .gr-r span.n { font-size:13px; white-space:nowrap; }

/* ---------- PI no celular: cartão com calendário ---------- */
.gc { padding:16px; display:flex; flex-direction:column; gap:12px; }
.gc .g-hd { padding:0; }
.gc .g-hd label { flex:1 1 140px; flex-direction:column; align-items:stretch; gap:4px; font-size:12px; }
.gc .g-hd input { width:100%; }
.it-res { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font:inherit; color:var(--ink); text-align:left; cursor:pointer; width:100%; }
.it-res .tx { flex:1; min-width:0; display:flex; flex-direction:column; } .it-res small { color:var(--ink-2); }
.it-res svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; }
.it-ab { border:2px solid var(--pc); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px; }
.it-cab { display:flex; align-items:center; gap:10px; }
.it-cab .tx { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; } .it-cab .tx small { color:var(--ink-2); }
.it-cab input, .it-cab select { height:36px; width:100%; }
.cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; text-align:center; }
.cal > small { font-size:11px; font-weight:600; color:var(--ink-2); } .cal > small.we { color:var(--red); }
.cd { display:flex; flex-direction:column; align-items:stretch; gap:2px; }
.cd small { font-size:11px; color:var(--ink-2); } .cd.we small { color:var(--red); }
.cd .day { width:100%; height:38px; border-radius:10px; font-size:14px; }
.it-vals { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.it-vals .ro { height:40px; display:flex; align-items:center; padding:0 10px; background:var(--bg); border-radius:10px; font-weight:600; color:var(--ink); }
.it-vals input { width:100%; height:40px; } .it-vals .duo input { width:100%; min-width:0; } .it-vals .duo select { width:84px; flex:none; }
.pi-total { position:sticky; bottom:96px; z-index:5; width:100%; margin-top:16px; border:0; border-radius:8px; background:var(--dark-card); color:#fff; padding:12px 18px; display:flex; justify-content:space-between; align-items:center; font:inherit; cursor:pointer; box-shadow:var(--shadow-up); }
.pi-total span { display:flex; flex-direction:column; align-items:flex-start; } .pi-total small { color:var(--dark-card-2); }
.pi-total b { font:600 22px/1.2 var(--display); font-variant-numeric:tabular-nums; }
.pi-total svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2; transform:rotate(180deg); }

/* ---------- arquivos (aba Mídias) ---------- */
.drop { display:flex; flex-direction:column; align-items:center; gap:4px; padding:26px; margin-bottom:10px; border:2px dashed var(--line); border-radius:10px; cursor:pointer; color:var(--ink-2); text-align:center; transition:border-color .2s, background .2s; }
.drop b { color:var(--ink); } .drop:hover, .drop.on { border-color:var(--accent); background:var(--accent-soft); }

/* Em telas abaixo de 1700 px o resumo vira uma faixa acima das grades, para sobrar largura para os dias */
@media (max-width:1700px) {
  .pi-corpo { grid-template-columns:minmax(0, 1fr); }
  .pi-sum { position:static; order:-1; display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:4px 16px; align-items:start; }
  .pi-sum :is(h2, h3) { grid-column:1 / -1; margin-bottom:2px; }
  .pi-sum .hr { border-top:0; margin-top:0; padding-top:7px; }
}
@media (max-width:820px) { .pi-sum { order:0; } }
@media (max-width:820px) {
  .titulo-in { margin-left:0; }
  .pi-info .ic { flex:1 1 100%; justify-content:space-between; } .pi-info input, .pi-info select { max-width:62%; }
  .abas { gap:20px; }
}

/* ---------- documento do PI (impressão / PDF) ---------- */
/* Notebook: dias mais estreitos para o mês inteiro caber sem rolar */
@media (min-width:821px) and (max-width:1699px) {
  .gr { grid-template-columns:212px minmax(0, 1fr) auto; }
  .gr .ln { padding:0 8px; } .gr-l .ln { padding-left:2px; gap:4px; grid-template-columns:18px minmax(0, 1.2fr) minmax(0, 1fr); }
  .gr-l select:not(.pc-sel) { padding-left:6px; padding-right:18px; font-size:12px; background-position:calc(100% - 10px) 55%, calc(100% - 6px) 55%; }
  .gr .dias { gap:1px; } .day, .dh, .dt { width:21px; } .day { height:22px; border-radius:6px; font-size:11px; } .dh { font-size:11px; } .dh b { font-size:11px; }
  .gr-r .vals { grid-template-columns:30px 72px 108px 84px; gap:4px; } .gr-r input.n { width:72px; } .gr-r .duo input { width:44px; } .gr-r .duo select { width:64px; }
}
/* Lista de PIs: linhas de uma só altura, colunas alinhadas, textos longos cortados com "…" */
.pl { display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }
.pl-l { display:grid; grid-template-columns:118px minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1fr) 100px 88px 150px 44px; gap:16px; align-items:center; padding:12px 10px; border-top:1px solid var(--line-2); border-radius:var(--radius-s); }
.pl-l.click { cursor:pointer; transition:background .2s; } .pl-l.click:hover, .pl-l.click:focus-visible { background:var(--fill); } .pl-l.click:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.pl-l > span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.pl-l b, .pl-l .pl-c > span, .pl-l small, .pl-un { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-l small { color:var(--ink-2); font-size:13px; }
.pl-cab { border-top:0; padding-top:4px; padding-bottom:8px; font-size:12px; color:var(--ink-2); font-weight:500; }
.pl-n { color:var(--ink-2); white-space:nowrap; font-size:14px; }
.pl-t b { font-weight:600; }
.pl-u { flex-direction:row !important; align-items:center; gap:8px !important; } .pl-u .av { width:30px; height:30px; font-size:11px; flex:none; }
.pl-p, .pl-i { text-align:right; align-items:flex-end; } .pl-p small, .pl-i small { display:none; }
.pl-v { text-align:right; align-items:flex-end; } .pl-v b { font:600 15px/1.2 var(--display); }
.pl-m { align-items:flex-end; }
.pl-cab .pl-p, .pl-cab .pl-i, .pl-cab .pl-v { display:block; }
.pl-tot { border-top:1px solid var(--line); margin-top:4px; font-weight:600; } .pl-tot .pl-n { color:var(--ink); font-weight:600; }
/* Notebook: consultor só com as iniciais */
@media (min-width:821px) and (max-width:1439px) {
  .pl-l { grid-template-columns:108px minmax(0, 1.5fr) minmax(0, 1.3fr) 36px 92px 76px 140px 40px; gap:12px; }
  .pl-un { display:none; } .pl-cab .pl-u { font-size:0; }
}
/* Celular: cada PI vira um cartão */
@media (max-width:820px) {
  .pl-cab { display:none; }
  .pl-l { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"n m" "t t" "c c" "u v" "p i"; gap:6px 12px; padding:14px 12px; border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:10px; }
  .pl-n { grid-area:n; font-size:13px; } .pl-m { grid-area:m; margin:-6px -6px 0 0; } .pl-t { grid-area:t; } .pl-t b { font-size:16px; white-space:normal; }
  .pl-c { grid-area:c; } .pl-u { grid-area:u; } .pl-v { grid-area:v; }
  .pl-p, .pl-i { flex-direction:row !important; gap:6px !important; align-items:baseline; font-size:13px; } .pl-p { grid-area:p; justify-content:flex-start; text-align:left; align-items:flex-start; } .pl-i { grid-area:i; justify-content:flex-end; }
  .pl-p small, .pl-i small { display:inline; }
  .pl-tot { grid-template-areas:"n v" "i i"; border-style:dashed; } .pl-tot .pl-t, .pl-tot .pl-c, .pl-tot .pl-u, .pl-tot .pl-p, .pl-tot .pl-m { display:none; }
}
/* ---------- Tabelas de preços: lista e editor ---------- */
.tp-ciclo { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-bottom:16px; } .tp-ciclo > .muted { flex:1 1 320px; margin-left:6px; }
.tp-tabelas { display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px; margin-bottom:24px; }
.tp-tabela { display:flex; flex-direction:column; gap:16px; margin:0; border:2px solid transparent; }
.tp-tabela.rascunho { border-color:color-mix(in srgb, var(--accent) 55%, transparent); }
.tp-tabela-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .tp-tabela-cab :is(h2, h3) { font:600 21px/1.2 var(--display); letter-spacing:-.02em; }
.tp-tabela-num { display:flex; gap:28px; } .tp-tabela-num small { display:block; color:var(--ink-2); font-size:12px; } .tp-tabela-num b { font:600 21px/1.2 var(--display); }
.tp-tabela .row { margin-top:auto; }
.tp-previa-cab { margin:8px 2px 12px; }
.tp-faixa > span:nth-child(2) { flex:1 1 320px; }
.tp-campos { flex:1 1 100%; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 320px)); gap:12px; padding-top:12px; border-top:1px solid var(--line-2); }
.tp-quem { flex:1 1 100%; }
.tp-massa { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; }
.tp-massa-tit { display:flex; flex-direction:column; gap:2px; flex:1 1 220px; margin-right:6px; } .tp-massa-tit b { font:600 16px/1.3 var(--display); }
.tp-massa label.f { flex:0 1 auto; } .tp-massa select { min-width:170px; }
.tp-massa .duo select { min-width:0; width:130px; } .tp-massa .duo input { width:90px; }
.tp-resumo { margin-top:0; } .tp-resumo .tile { padding:16px 18px; gap:4px; } .tp-resumo .tile b { font:600 22px/1.2 var(--display); } .tp-resumo .tile small { color:var(--ink-2); font-size:13px; }
.tp-resumo .tp-comp { font-size:18px; }
.tp-legenda { display:flex; flex-wrap:wrap; gap:6px 0; margin:0 4px 12px; } .tp-legenda span { display:inline-flex; align-items:center; gap:6px; margin-right:16px; font-size:13px; color:var(--ink-2); }
.tp-q { width:12px; height:12px; border-radius:4px; display:inline-block; border:1px solid var(--line); background:var(--surface); }
.tp-q.mudou, .tp-preco.mudou, .tp-mini.mudou { background:var(--accent-soft); border-color:transparent; }
.tp-q.mao, .tp-preco.mao, .tp-mini.mao { background:color-mix(in srgb, var(--orange) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--orange) 55%, transparent); }
.tp-q.novo, .tp-preco.novo, .tp-mini.novo { background:color-mix(in srgb, var(--green) 12%, var(--surface)); border-color:transparent; }
.tp-preco.igual { background:var(--surface); border-color:var(--line); }
.tp-dif { font-size:12px; color:var(--ink-3); text-align:right; white-space:nowrap; } .tp-dif.mudou { color:var(--accent-text); } .tp-dif.mao { color:var(--orange); } .tp-dif.novo { color:var(--green); }
.tp-mini .tp-dif { text-align:center; }
.tp-pub { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius-m); }
.tp-pub > div { display:flex; gap:12px; padding:12px 14px; border-top:1px solid var(--line-2); font-size:14px; } .tp-pub > div:first-child { border-top:0; }
.tp-pt { width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--tone); flex:none; }
.tp-barra { display:none; } .tp-topo { display:contents; }
@media (max-width:820px) {
  .tp-massa label.f, .tp-massa select { width:100%; min-width:0; } .tp-massa .duo { width:100%; } .tp-massa .duo select { flex:1; } .tp-massa .btn { flex:1; }
  .tp-resumo .tile b { font-size:18px; }
  .tp-barra { display:flex; flex-direction:column; gap:8px; position:sticky; bottom:96px; z-index:5; margin-top:12px; padding:12px; border-radius:8px; background:var(--surface); box-shadow:var(--shadow-up); }
  .tp-barra .row { gap:8px; } .tp-barra .btn { flex:1; }
  .tp-topo { display:none; }
}
/* ---------- Sonvi Music ---------- */
#side nav a.externo svg:last-child { width:14px; height:14px; margin-left:auto; opacity:.55; }
.app-music #side .brand picture img { width:148px; height:auto; }
.acesso.music { background:#0a0b0d; color:#f5f6f8; }
.acesso.music .lado { background:radial-gradient(120% 90% at 0% 100%, #0b2a66 0%, #0a0b0d 62%); }
.acesso.music .lado img.marca { width:200px; }
.acesso.music .lado p { color:#9ba1ad; opacity:1; }
.acesso.music .forma { background:#121316; }
.acesso.music .auth h1, .acesso.music .auth { color:#f5f6f8; }
.acesso.music .auth .muted, .acesso.music .auth label { color:#9ba1ad; }
.acesso.music .auth input { background:#1b1d22; border-color:#26282e; color:#f5f6f8; }
.acesso.music .auth input:focus { border-color:#0199ff; box-shadow:0 0 0 3px rgba(1,153,255,.25); }
.acesso.music .auth .btn, .acesso.music .auth .btn.pri { background:transparent; color:#f5f6f8; border-color:rgba(245,246,248,.6); }
.acesso.music .auth .btn:hover { background:#0199ff; border-color:#0199ff; color:#0a0b0d; }
@media (min-width:821px) { .acesso.music .auth picture { display:none; } }
@media (max-width:820px) { .acesso.music .auth picture img { width:150px; } }
#print { display:none; }
#print .cab, .previa .cab { display:flex; align-items:center; gap:14px; margin-bottom:6px; } #print .cab img, .previa .cab img { width:64px; height:64px; max-height:none; object-fit:contain; flex:none; }
/* Visualizar: o documento do PI numa folha branca, igual ao que sai no PDF */
dialog.largo { width:min(1360px, 96vw); }
.previa { background:#fff; color:#111; border-radius:var(--radius-m); border:1px solid var(--line); padding:32px 36px; font:12px/1.5 Helvetica, Arial, sans-serif; overflow-x:auto; }
.previa h1 { font:700 20px/1.2 Helvetica, Arial, sans-serif; color:#111; } .previa h2 { font:700 13px/1.3 Helvetica, Arial, sans-serif; margin:16px 0 6px; color:#111; }
.previa table { border-collapse:collapse; margin:6px 0; width:100%; } .previa th, .previa td { border:1px solid #999; padding:3px 5px; font-size:11px; color:#111; background:#fff; text-align:left; white-space:nowrap; }
.previa .meta { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px 16px; margin:10px 0; }
.previa .cols { display:grid; grid-template-columns:2fr 1fr; gap:16px; } .previa .box { border:1px solid #999; padding:8px; margin-bottom:8px; }
.previa .sign { display:flex; gap:40px; margin-top:48px; } .previa .sign div { flex:1; border-top:1px solid #111; text-align:center; padding-top:4px; }
.previa img { max-height:48px; }
@media (max-width:820px) { .previa { padding:18px 14px; } .previa table { display:block; overflow-x:auto; } .previa .box { overflow-x:auto; } .previa .meta, .previa .cols { grid-template-columns:1fr; } }
@media print {
  @page { size:legal landscape; margin:8mm; }
  body { background:#fff; display:block; } #side, #main, dialog, #toast { display:none !important; }
  #print { display:block; font:10px/1.4 Helvetica, Arial, sans-serif; color:#000; }
  #print h1 { font-size:16px; } #print h2 { font-size:12px; margin:12px 0 4px; }
  #print table { margin:6px 0; } #print th, #print td { border:1px solid #777; padding:2px 3px; font-size:8.5px; color:#000; }
  #print .meta { display:grid; grid-template-columns:repeat(3, 1fr); gap:2px 16px; margin:8px 0; }
  #print .cols { display:grid; grid-template-columns:2fr 1fr; gap:12px; } #print .box { border:1px solid #777; padding:6px; margin-bottom:6px; }
  #print .sign { display:flex; gap:40px; margin-top:44px; } #print .sign div { flex:1; border-top:1px solid #000; text-align:center; padding-top:3px; }
  #print .pidoc { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #print .pidoc table { margin:0; } #print .pidoc th, #print .pidoc td { border-color:#8d939e; padding:3px 4px; font-size:10px; } #print .pidoc .pd-grade th { padding:1px 0; } #print .pidoc .pd-parc td { border:0; border-top:1px solid #d6d9df; padding:1px 4px 1px 0; } #print .pidoc .pd-parc tr.mut td { border-top:0; }
}
}

/* ---------- Programação musical ---------- */
.mus-sem { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.mus-sem b { font:600 16px/1.3 var(--display); }
.mus-sem .btn svg { width:16px; height:16px; }
.mus-dias button { position:relative; }
.mus-alerta { position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:var(--red); }
.mus-horas { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.mus-horas button { position:relative; min-width:48px; height:36px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; box-shadow:inset 0 -3px 0 var(--tone); transition:background .2s, transform .15s; }
.mus-horas button:hover { background:var(--fill); }
.mus-horas button.on { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.mus-corpo { display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:16px; align-items:start; }
.mus-corpo > .card, .mus-lado > .card { margin:0; }
.mus-lado { display:flex; flex-direction:column; gap:16px; position:sticky; top:16px; }
.mus-tot { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin-bottom:12px; }
.mus-tot div { background:var(--fill); border-radius:var(--radius-s); padding:8px 12px; display:flex; flex-direction:column; }
.mus-tot small { color:var(--ink-2); font-size:12px; } .mus-tot b { font:600 15px/1.3 var(--display); }
.mus-lista { display:flex; flex-direction:column; }
.mus-l { display:grid; grid-template-columns:24px 48px 116px 56px minmax(0, 1fr) 52px 36px; gap:10px; align-items:center; padding:9px 8px; border-top:1px solid var(--line-2); border-left:3px solid transparent; border-radius:var(--radius-s); transition:background .2s; }
.mus-l[data-act] { cursor:pointer; } .mus-l[data-act]:hover, .mus-l[data-act]:focus-visible { background:var(--fill); } .mus-l[data-act]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.mus-l.nm { color:var(--ink-2); } .mus-l.nm .mus-x b { font-weight:500; }
.mus-l.vazio { border-left-color:var(--orange); background:color-mix(in srgb, var(--orange) 6%, transparent); }
.mus-l.erro { border-left-color:var(--red); background:color-mix(in srgb, var(--red) 6%, transparent); }
.mus-l.sel { border-left-color:var(--accent); background:var(--accent-soft); }
.mus-n { color:var(--ink-3); font-size:12px; } .mus-t { color:var(--ink-2); font-size:13px; }
.mus-c, .mus-m { display:flex; gap:4px; align-items:center; min-width:0; } .mus-c .pill { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.mus-x { display:flex; flex-direction:column; min-width:0; }
.mus-x b, .mus-x small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mus-x small { color:var(--ink-2); font-size:13px; }
.mus-x small.aviso { color:var(--red); white-space:normal; }
.mus-d { font-size:12px; color:var(--ink-2); text-align:right; } .mus-a { display:flex; justify-content:flex-end; }
.mus-lista.curta .mus-l { grid-template-columns:48px minmax(0, 1fr); }
.mus-rt { width:22px; height:22px; flex:none; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font:700 11px/1 var(--display); background:color-mix(in srgb, var(--tone) 15%, transparent); color:var(--tone); }
.mus-pe { width:22px; height:22px; flex:none; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; font:700 11px/1 var(--display); color:var(--ink); background:color-mix(in srgb, var(--red) calc(var(--p) * 14%), var(--surface)); }
.mus-pe-sq { background:color-mix(in srgb, var(--red) calc(var(--p) * 14%), var(--surface)) !important; border:1px solid var(--line); }
.mus-luzes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
.mus-luz { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; font-size:12px; font-weight:600; background:var(--fill); color:var(--ink-3); }
.mus-luz::before { content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--ink-3); }
.mus-luz.ok { background:color-mix(in srgb, var(--green) 10%, transparent); color:var(--green); } .mus-luz.ok::before { background:var(--green); }
.mus-luz.on { background:color-mix(in srgb, var(--red) 12%, transparent); color:var(--red); } .mus-luz.on::before { background:var(--red); animation:pulse 2s ease-out infinite; --tone:var(--red); }
.mus-alertas { display:flex; flex-direction:column; gap:8px; }
.mus-alertas > div { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:var(--radius-s); background:color-mix(in srgb, var(--red) 9%, transparent); }
.mus-alertas small { color:var(--red); font-size:13px; }
.mus-ok { color:var(--green); font-size:13px; font-weight:500; }
.mus-cand { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-m); }
.mus-cand > b { font:600 18px/1.2 var(--display); } .mus-cand small { font-size:13px; }
.mus-busca { max-height:460px; overflow-y:auto; margin-top:6px; }
.mus-busca a.on { background:var(--accent-soft); }
.mus-imp { max-height:340px; overflow-y:auto; }
/* grades de dia × hora: peso, histórico, restrição e grade da semana */
.mus-mapa { display:grid; grid-template-columns:40px repeat(24, minmax(20px, 1fr)); gap:2px; min-width:620px; align-items:center; margin-top:8px; }
.mus-mapa.tot { grid-template-columns:40px repeat(24, minmax(20px, 1fr)) 34px; }
.mus-mapa > small { font-size:11px; color:var(--ink-2); text-align:center; } .mus-mapa > small:nth-of-type(1) { text-align:left; }
.mus-mapa > b { font-size:12px; color:var(--red); text-align:center; }
.mus-mapa > i { height:20px; border-radius:4px; background:var(--fill); font:700 11px/20px var(--display); font-style:normal; text-align:center; color:var(--accent-text); }
.mus-mapa > i.h1 { background:color-mix(in srgb, var(--accent) 22%, var(--surface)); } .mus-mapa > i.h2 { background:color-mix(in srgb, var(--accent) 45%, var(--surface)); }
.mus-mapa > i.nm { background:var(--fill-2); } .mus-mapa > i.pe { background:color-mix(in srgb, var(--red) calc(var(--p) * 14%), var(--surface)); }
.mus-mapa button { height:24px; border:0; padding:0; border-radius:4px; cursor:pointer; background:color-mix(in srgb, var(--green) 45%, var(--surface)); transition:transform .12s; }
.mus-mapa button:hover:not(:disabled) { transform:scale(1.12); } .mus-mapa button:disabled { cursor:default; }
.mus-mapa button.bl { background:color-mix(in srgb, var(--red) 70%, var(--surface)); }
.mus-mapa.grade button { height:28px; background:color-mix(in srgb, var(--tone) 70%, var(--surface)); }
form.ver .g2 .mus-mapa button { display:block; }
.mus-leg { flex-direction:row; flex-wrap:wrap; gap:4px 16px; margin-top:10px; } .mus-leg > div { padding:4px 0; font-size:13px; }
.mus-barras { display:flex; gap:6px; align-items:flex-end; height:190px; min-width:620px; border-bottom:1px solid var(--line); }
.mus-barras > div { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:1px; height:100%; }
.mus-barras i { display:block; width:100%; max-width:26px; background:var(--tone); border-radius:4px; transform-origin:bottom; }
.mus-barras small { font-size:11px; color:var(--ink-2); margin-top:4px; }
.entra .mus-barras i { animation:grow 1s var(--ease) both; }
.mus-hist { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:20px; }
.mus-hist-esc { display:flex; flex-direction:column; gap:10px; } .mus-hist-esc .seg { margin:0; } .mus-hist-esc .mus-busca { max-height:260px; }
.mus-fmt { text-align:left; border:2px solid transparent; font:inherit; color:inherit; cursor:pointer; box-shadow:inset 5px 0 0 var(--tone), var(--shadow); }
.mus-fmt.on { border-color:var(--accent); }
.mus-pos { display:flex; flex-wrap:wrap; gap:8px; }
.mus-pos .pill { padding:4px 4px 4px 11px; font-size:13px; } .mus-pos .x { font-size:15px; padding:2px 6px; color:inherit; }
.mus-regras { display:flex; flex-direction:column; }
.mus-regra { display:grid; grid-template-columns:minmax(0, 1fr) 240px 110px 52px; gap:16px; align-items:center; padding:12px 4px; border-top:1px solid var(--line-2); }
.mus-regra .tx { display:flex; flex-direction:column; } .mus-regra .tx small { color:var(--ink-2); font-size:13px; }
.mus-regra .aviso { color:var(--red); font-weight:600; }
.mus-par input { width:100%; accent-color:var(--accent); padding:0; background:none; }
.mus-sw { position:relative; display:inline-block; width:48px; height:28px; }
.mus-sw input { position:absolute; inset:0; opacity:0; margin:0; width:100%; height:100%; cursor:pointer; z-index:1; }
.mus-sw i { position:absolute; inset:0; border-radius:999px; background:var(--fill-2); transition:background .2s; }
.mus-sw i::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--ease); }
.mus-sw input:checked + i { background:var(--green); } .mus-sw input:checked + i::after { transform:translateX(20px); }
.mus-sw input:focus-visible + i { box-shadow:0 0 0 3px var(--accent-soft); }
@media (max-width:1280px) { .mus-corpo { grid-template-columns:minmax(0, 1fr) 330px; } }
@media (max-width:1100px) { .mus-corpo { grid-template-columns:minmax(0, 1fr); } .mus-lado { position:static; } }
@media (max-width:820px) {
  .mus-tot { grid-template-columns:repeat(2, minmax(0, 1fr)); } .mus-tot div:last-child { grid-column:1 / -1; }
  .mus-l { grid-template-columns:44px minmax(0, 1fr) auto; grid-template-areas:"t c a" "x x x" "m m d"; gap:6px 10px; padding:12px 8px; }
  .mus-n { display:none; } .mus-t { grid-area:t; } .mus-c { grid-area:c; } .mus-a { grid-area:a; } .mus-x { grid-area:x; } .mus-m { grid-area:m; } .mus-d { grid-area:d; }
  .mus-x b { white-space:normal; }
  .mus-lista.curta .mus-l { grid-template-areas:none; }
  .mus-hist { grid-template-columns:minmax(0, 1fr); }
  .mus-regra { grid-template-columns:minmax(0, 1fr) 52px; } .mus-regra .mus-par { grid-column:1 / -1; grid-row:2; } .mus-regra > .small { grid-column:1; }
  .mus-luzes { grid-template-columns:minmax(0, 1fr); }
}

/* ---------- Tabela de preços (grade programa × formato) ---------- */
.tp-faixa { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:14px 20px; }
.tp-ink { color:var(--ink); }
.tp-versao { display:flex; align-items:center; gap:8px; } .tp-versao select { height:38px; }
.tp-grade { padding:12px 12px 16px; }
.tp-tab { min-width:calc(360px + var(--n, 3) * 130px); }
.tp-cab, .tp-row { display:grid; grid-template-columns:minmax(220px, 1.6fr) repeat(var(--n, 3), minmax(120px, 1fr)) minmax(110px, auto); gap:8px; align-items:center; padding:12px; }
.tp-cab { align-items:end; border-bottom:1px solid var(--line); }
.tp-row { border-bottom:1px solid var(--line-2); border-radius:var(--radius-s); transition:background .2s; }
.tp-row:hover { background:color-mix(in srgb, var(--fill) 55%, transparent); }
.tp-form { display:flex; align-items:flex-start; justify-content:flex-end; gap:2px; text-align:right; }
.tp-form > span { display:flex; flex-direction:column; min-width:0; } .tp-form b { font:600 15px/1.2 var(--display); } .tp-form small { color:var(--ink-2); font-size:12px; }
.tp-form .btn.tres { width:30px; height:30px; margin-top:-4px; }
.tp-mais { display:flex; justify-content:flex-end; }
.tp-prog { display:flex; flex-direction:column; gap:4px; min-width:0; } .tp-prog b { font-size:16px; } .tp-prog small { color:var(--ink-2); font-size:13px; }
.inativo .tp-prog b, .tp-form.inativo b { color:var(--ink-3); }
.tp-cel { display:flex; flex-direction:column; align-items:flex-end; gap:4px; min-width:0; }
.tp-cel small.aviso { color:var(--orange); text-align:right; }
.tp-preco { padding:8px 12px; border:1px solid transparent; border-radius:8px; background:var(--fill); font:600 16px/1.2 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, transform .15s; }
.tp-preco:hover:not(:disabled) { background:var(--surface); border-color:var(--accent); }
.tp-preco:active:not(:disabled) { transform:scale(.97); }
.tp-preco:disabled { cursor:default; background:transparent; }
.tp-preco.aviso { background:color-mix(in srgb, var(--orange) 12%, transparent); border-color:color-mix(in srgb, var(--orange) 35%, transparent); }
.tp-vazio { padding:8px 12px; border:1px dashed var(--line); border-radius:8px; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer; }
.tp-vazio:hover { border-color:var(--accent); color:var(--accent-text); }
.tp-ed { display:flex; align-items:center; gap:6px; padding:4px 4px 4px 10px; border:1px solid var(--accent); border-radius:8px; background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft); }
.tp-ed label { font-size:13px; color:var(--ink-2); }
.tp-ed input { width:84px; padding:4px 2px; border:0; background:transparent; box-shadow:none; font:600 16px/1.2 var(--display); text-align:right; }
.tp-ed input:focus { box-shadow:none; background:transparent; }
.tp-ed .btn { width:32px; padding:0; }
.tp-rodape { padding:14px 12px 0; }
.tp-cartao .hd { align-items:flex-start; margin-bottom:6px; }
.tp-lin { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; border-top:1px solid var(--line-2); }
.tp-previa { border-radius:var(--radius-m); background:var(--fill); padding:4px 14px; max-height:300px; overflow-y:auto; }
.tp-previa > div { display:grid; grid-template-columns:minmax(0, 1fr) 84px 16px 84px; gap:8px; padding:8px 0; border-top:1px solid var(--line); font-size:14px; font-variant-numeric:tabular-nums; }
.tp-previa > div > span:nth-child(2), .tp-previa > div > b { text-align:right; }
.tp-previa .tp-pv-cab { border-top:0; font-size:12px; color:var(--ink-2); font-weight:500; } .tp-previa .tp-pv-cab span:nth-child(2), .tp-previa .tp-pv-cab span:nth-child(4) { text-align:right; }
@media (max-width:820px) { .tp-faixa .grow { display:none; } .tp-versao { width:100%; } .tp-versao select { flex:1; } }
/* Tabela de preços · seções (programa, quadro, rotativo) e formatos de preço único */
.tp-grupos { border-bottom:0; padding-bottom:0; }
.tp-grupo { text-align:center; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); padding-bottom:6px; border-bottom:2px solid var(--line); }
.tp-cel.uni1, .tp-form.uni1, .tp-grupo.uni1 { border-left:1px solid var(--line); padding-left:12px; margin-left:4px; }
.tp-cel.uni .tp-preco { background:var(--accent-soft); }
.tp-secao { padding:20px 12px 6px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); }
.tp-vazio.leve { border-color:transparent; color:var(--ink-3); font-weight:500; padding:8px 14px; }
.tp-vazio.leve:hover { border-color:var(--accent); border-style:dashed; color:var(--accent-text); }
.tp-novos { display:flex; flex-wrap:wrap; gap:8px; }
.tp-seg { margin-bottom:0; display:flex; } .tp-seg button { flex:1; }
.tp-minis { display:grid; grid-template-columns:repeat(auto-fill, minmax(68px, 1fr)); gap:6px; margin-top:6px; }
.tp-mini { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border:1px solid transparent; border-radius:8px; background:var(--fill); font:inherit; color:var(--ink); cursor:pointer; min-width:0; }
.tp-mini small { font-size:12px; color:var(--ink-2); } .tp-mini b { font:600 13px/1.2 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tp-mini.vazio b { color:var(--ink-3); } .tp-mini.aviso { border-color:color-mix(in srgb, var(--orange) 45%, transparent); }
.tp-mini:disabled, .tp-unico:disabled { cursor:default; }
.tp-unico { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; margin-top:8px; padding:10px 12px; border:0; border-radius:8px; background:var(--accent-soft); font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; }
.tp-unico b { font:600 16px/1.2 var(--display); font-variant-numeric:tabular-nums; }
.tp-unicos-novos { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .tp-unicos-novos .tp-vazio { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; font-size:12px; }

/* ---------- PI impresso (contrato de publicidade): vale na prévia e no PDF ---------- */
.pidoc { font:11px/1.35 'Manrope', Helvetica, Arial, sans-serif; color:#111317; display:flex; flex-direction:column; gap:8px; }
.previa .pidoc { min-width:0; }
.pidoc table { border-collapse:collapse; width:100%; margin:0; }
.pidoc th, .pidoc td { border:1px solid #8d939e; padding:3px 4px; font-size:10.5px; color:#111317; background:transparent; white-space:normal; text-align:left; }
.pidoc .r { text-align:right; } .pidoc .c { text-align:center; } .pidoc .mut, .pidoc .mut td { color:#4b515c; } .pidoc .tx { color:#111317; }
.pd-topo { display:grid; grid-template-columns:270px minmax(0, 1fr) 220px; gap:12px; align-items:stretch; }
.pd-radio { display:flex; gap:10px; align-items:flex-start; font-size:10.5px; }
.pd-radio img { width:60px; height:60px; max-height:none; object-fit:contain; flex:none; }
.pd-selo { width:60px; height:60px; flex:none; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font:700 12px/1 'Sora', sans-serif; text-align:center; padding:4px; box-sizing:border-box; overflow:hidden; }
.pd-nome { font:700 13px/1.25 'Sora', sans-serif; display:block; margin-bottom:1px; }
.pd-meio { display:flex; flex-direction:column; gap:5px; }
.pd-titulo { font:700 16px/1.1 'Sora', sans-serif; letter-spacing:.04em; text-align:center; }
.pd-cli th { width:80px; background:#f2f3f6; font-weight:600; white-space:nowrap; }
.pd-num { border:2px solid; border-radius:8px; padding:7px 10px; display:flex; flex-direction:column; gap:4px; }
.pd-no { font:700 16px/1.15 'Sora', sans-serif; text-align:center; }
.pd-kv { display:grid; grid-template-columns:66px minmax(0, 1fr); gap:1px 6px; } .pd-kv span { color:#4b515c; }
.pd-autoriza { text-align:center; font-weight:700; letter-spacing:.03em; padding:3px 0; border-top:1px solid #111317; border-bottom:1px solid #111317; }
.pd-per { font-size:11px; margin-bottom:-4px; }
.pd-grade { table-layout:fixed; }
.pd-grade col.k-pg { width:15%; } .pd-grade col.k-fm { width:7%; } .pd-grade col.k-pc { width:34px; } .pd-grade col.k-qt { width:34px; } .pd-grade col.k-un { width:70px; } .pd-grade col.k-ds { width:46px; } .pd-grade col.k-tt { width:84px; }
.pd-grade th { background:#f2f3f6; text-align:center; padding:1px 0; font-weight:600; font-size:10px; } .pd-grade th.l { text-align:left; padding:2px 5px; } .pd-grade th.r { text-align:right; padding:2px 5px; }
.pd-grade td { padding:3px 2px; } .pd-grade td.pg { font-weight:600; padding-left:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pd-grade td.r { padding-right:5px; }
.pd-grade .fim { background:#e9ebef; }
.pd-grade tfoot td { background:#f8f9fb; }
.pd-pecas { display:flex; justify-content:space-between; gap:18px; font-size:10.5px; }
.pd-baixo { display:grid; grid-template-columns:1.3fr 1fr 250px; gap:10px; align-items:stretch; }
.pd-box { border:1px solid #8d939e; border-radius:6px; padding:6px 9px; display:flex; flex-direction:column; gap:4px; }
.pd-tit { font-size:11.5px; }
.pd-parc td { border:0; border-top:1px solid #d6d9df; padding:1px 4px 1px 0; } .pd-parc tr.mut td { border-top:0; }
.pd-tot { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2px 8px; align-content:start; border-color:#111317; font-variant-numeric:tabular-nums; }
.pd-tot .forte { font-weight:700; border-top:1px solid #8d939e; padding-top:2px; }
.pd-tot .final { font:700 13px/1.3 'Sora', sans-serif; border-top:2px solid #111317; padding-top:3px; }
.pd-fecho { display:grid; grid-template-columns:minmax(0, 1fr) 170px; gap:10px; align-items:end; }
.pd-fecho > div:first-child { display:flex; flex-direction:column; gap:3px; }
.pd-ass { display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:30px; margin-top:28px; text-align:center; }
.pd-ass > div { border-top:1px solid #111317; padding-top:3px; } .pd-ass span { color:#4b515c; }
.pd-aprov { text-align:center; align-items:center; gap:2px; } .pd-aprov .ok { color:#0b6b47; font-weight:600; }
.pd-conds { border-top:1px solid #111317; padding-top:5px; font-size:8.6px; line-height:1.32; color:#23262c; column-count:2; column-gap:26px; }
.pd-rodape { display:flex; justify-content:space-between; font-size:9px; color:#6b717c; }
@media (max-width:820px) { .previa .pidoc { min-width:1100px; } .previa .pidoc table { display:table; overflow:visible; } }
#dlg textarea.alto { min-height:340px; font-size:13px; line-height:1.5; }

/* ---------- Financeiro ---------- */
.fin-verde { color:var(--green); } .fin-laranja { color:var(--orange); }
.fin-leg { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-2); }
.fin-leg i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-left:8px; }
.fin-leg i.prev, .fin-bars i.prev { background:var(--accent); } .fin-leg i.rec, .fin-bars i.rec { background:var(--green); }
.fin-bars { height:180px; display:flex; align-items:flex-end; gap:12px; border-bottom:1px solid var(--line); }
.fin-bars > div { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:8px; min-width:0; }
.fin-bars > div > b { font-size:11px; font-weight:600; color:var(--ink-2); white-space:nowrap; }
.fin-bars > div > span { display:flex; align-items:flex-end; gap:4px; width:100%; justify-content:center; }
.fin-bars i { display:block; width:40%; max-width:24px; border-radius:7px 7px 3px 3px; transform-origin:bottom; }
.fin-bars > div:not(.on) i.prev { background:var(--bar-soft); }
.legend > a.on { background:var(--fill); }
.legend > a b { font-variant-numeric:tabular-nums; }
.fin-faturar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:16px 22px; }
.fin-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:14px 16px; }
.fin-seg { margin:0; } .fin-seg button span { font-weight:500; }
.fin-per { display:flex; align-items:center; gap:8px; } .fin-per select, .fin-per input { height:40px; }
.fin-busca { flex:1 1 240px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; border-radius:var(--radius-s); background:var(--fill); color:var(--ink-2); }
.fin-busca svg { width:16px; height:16px; flex:none; }
.fin-busca input { flex:1; min-width:0; border:0; background:transparent; padding:0; box-shadow:none; height:auto; }
.fin-busca input:focus { box-shadow:none; background:transparent; }
.fin-lista { padding:8px 10px 16px; }
.fin-selbar { position:sticky; top:8px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:6px 4px 8px; padding:10px 14px; border-radius:var(--radius-m); background:var(--dark-card); color:#fff; }
.fin-selbar .btn { background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.fin-selbar .btn:hover { background:#fff; border-color:#fff; color:#0a0b0d; }
.fin-tab { min-width:960px; }
.fin-cab, .fin-lin { display:grid; grid-template-columns:28px 96px minmax(220px, 2fr) 100px 100px 150px 140px 150px; gap:10px; align-items:center; padding:10px 12px; }
.fin-cab { font-size:12px; color:var(--ink-2); font-weight:500; border-bottom:1px solid var(--line); }
.fin-cab .r { text-align:right; }
.fin-lin { border-bottom:1px solid var(--line-2); border-radius:var(--radius-s); transition:background .2s; }
.fin-lin:hover, .fin-lin.sel { background:color-mix(in srgb, var(--fill) 60%, transparent); }
.fin-cab input, .fin-lin input[type=checkbox], .fin-cartao input[type=checkbox] { width:18px; height:18px; accent-color:var(--accent); }
.fin-data { font-variant-numeric:tabular-nums; }
.fin-quem { display:flex; flex-direction:column; min-width:0; } .fin-quem b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fin-quem small { color:var(--ink-2); font-size:13px; }
.fin-valor { display:flex; flex-direction:column; align-items:flex-end; text-align:right; } .fin-valor b { font:600 15px/1.2 var(--display); font-variant-numeric:tabular-nums; white-space:nowrap; } .fin-valor small { font-size:12px; }
.fin-acoes { display:flex; justify-content:flex-end; align-items:center; gap:4px; }
.fin-mes { display:flex; justify-content:space-between; align-items:baseline; gap:8px; padding:18px 12px 6px; } .fin-mes b { font:600 15px/1.3 var(--display); } .fin-mes span { font-size:13px; color:var(--ink-2); }
.fin-cartao { display:flex; flex-direction:column; gap:8px; padding:14px 6px; border-bottom:1px solid var(--line-2); }
.fin-cartao > .row { align-items:flex-start; gap:10px; flex-wrap:nowrap; } .fin-cartao .fin-quem { flex:1; }
.fin-cartao .fin-acoes { justify-content:stretch; } .fin-cartao .fin-acoes .btn.sm { flex:1; height:44px; }
.fin-devido { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-radius:var(--radius-m); background:var(--fill); margin:6px 0 14px; } .fin-devido b { font:600 20px/1.2 var(--display); }
@media (max-width:820px) { .fin-filtros .fin-seg { width:100%; } .fin-filtros .fin-seg button { flex:1; padding:7px 8px; font-size:13px; } .fin-per { width:100%; } .fin-per select { flex:1; } }
.fin-busca svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
/* Financeiro · relatórios (tela) */
.fin-rel { display:grid; grid-template-columns:260px minmax(0, 1fr); gap:16px; align-items:start; }
.fin-rel > .card { margin:0; }
.fin-rel-menu { display:flex; flex-direction:column; gap:2px; padding:12px 10px; position:sticky; top:16px; }
.fin-rel-grupo { padding:12px 12px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.fin-rel-grupo:first-child { padding-top:4px; }
.fin-rel-menu button { padding:9px 12px; border:0; border-radius:var(--radius-s); background:transparent; color:var(--ink); text-align:left; cursor:pointer; font:inherit; font-size:14px; transition:background .2s; }
.fin-rel-menu button:hover { background:var(--fill); } .fin-rel-menu button.on { background:var(--accent-soft); font-weight:600; }
.fin-rel-corpo { display:flex; flex-direction:column; gap:16px; }
.fin-rel-topo { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; } .fin-rel-topo :is(h2, h3) { margin:0 0 4px; font:600 21px/1.2 var(--display); } .fin-rel-topo p { margin:0; font-size:14px; }
.fin-rel-filtros { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.fin-rel-f { display:flex; align-items:center; gap:6px; height:40px; padding:0 4px 0 12px; border-radius:var(--radius-s); background:var(--fill); font-size:13px; color:var(--ink-2); }
.fin-rel-f select, .fin-rel-f input { height:34px; border:0; background:transparent; box-shadow:none; font-weight:600; color:var(--ink); padding:0 6px; }
.fin-rel-sel { margin-bottom:12px; }
.rr-res { display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); gap:12px; }
.rr-k { border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.rr-k small { font-size:13px; color:var(--ink-2); } .rr-k b { font:600 21px/1.2 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .rr-k span { font-size:12px; color:var(--ink-2); }
.rr-k.dest { background:var(--dark-card); border-color:var(--dark-card); color:#fff; } .rr-k.dest small, .rr-k.dest span { color:var(--dark-card-2); }
.rr-k.ruim b { color:var(--orange); } .rr-k.dest.ruim b { color:#fff; } .rr-k.bom span { color:var(--green); font-weight:600; }
.rr-prog { display:block; height:6px; border-radius:999px; background:var(--fill); overflow:hidden; } .rr-prog i { display:block; height:100%; background:var(--green); border-radius:999px; }
.rr-part { display:flex; flex-direction:column; gap:8px; }
.rr-tit { font:600 15px/1.3 var(--display); }
.rr-part > div { display:grid; grid-template-columns:minmax(120px, 220px) minmax(0, 1fr) 60px 130px; gap:12px; align-items:center; font-size:14px; }
.rr-nome { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rr-barra { height:12px; border-radius:999px; background:var(--fill); overflow:hidden; } .rr-barra i { display:block; height:100%; border-radius:999px; background:var(--ink); } .rr-barra i.pri { background:var(--accent); }
.rr-part b { text-align:right; } .rr-val { text-align:right; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.rr-tab { width:100%; font-variant-numeric:tabular-nums; }
.rr-tab th { font-size:12px; color:var(--ink-2); font-weight:500; border-bottom:1px solid var(--line); }
.rr-tab td small { display:block; color:var(--ink-2); font-size:12px; }
.rr-tab tbody tr:not(.rr-grp):not(.rr-sub):nth-child(even) td { background:color-mix(in srgb, var(--fill) 45%, transparent); }
.rr-tab .rr-grp td { padding-top:18px; font:600 15px/1.3 var(--display); border-bottom:0; background:transparent; }
.rr-tab .rr-sub td { font-size:13px; color:var(--ink-2); text-align:right; border-bottom:0; } .rr-tab .rr-sub td.r { color:var(--ink); font-weight:700; }
.rr-tab tfoot td { font-weight:700; border-top:2px solid var(--ink); }
.rr-sit { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:600; background:color-mix(in srgb, var(--sky) 13%, transparent); color:var(--sky); white-space:nowrap; }
.rr-sit.ruim { background:color-mix(in srgb, var(--orange) 13%, transparent); color:var(--orange); } .rr-sit.bom { background:color-mix(in srgb, var(--green) 13%, transparent); color:var(--green); }
.rr-ler { display:flex; flex-direction:column; gap:4px; padding:12px 16px; border-radius:var(--radius-m); background:var(--fill); font-size:13px; color:var(--ink-2); } .rr-ler b { color:var(--ink); }
.fin-rel-cartao { display:flex; flex-direction:column; gap:4px; padding:12px 2px; border-bottom:1px solid var(--line-2); }
.fin-rel-cartao > div { display:flex; justify-content:space-between; gap:12px; font-size:14px; } .fin-rel-cartao > div span:first-child { color:var(--ink-2); }
.fin-rel-cartao.total { border-bottom:0; border-top:2px solid var(--ink); margin-top:6px; }
@media (max-width:980px) { .fin-rel { grid-template-columns:1fr; } .rr-res { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .rr-part > div { grid-template-columns:minmax(0, 1fr) 54px; } .rr-part .rr-barra { grid-column:1 / -1; grid-row:2; } .rr-part .rr-val { display:none; } .rr-k b { font-size:18px; } }
/* Relatório impresso (A4 em pé) */
.rdoc { font:11.5px/1.45 'Manrope', Helvetica, Arial, sans-serif; color:#15171c; display:flex; flex-direction:column; gap:18px; }
@media print {
  body > *:not(#print) { display:none !important; }
  #print .rdoc { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #print .rdoc table { margin:0; } #print .rdoc th, #print .rdoc td { border:0; border-bottom:1px solid #e6e8ec; padding:6px 7px; font-size:10.5px; color:#15171c; }
  #print .rdoc th { color:#4b515c; font-weight:600; border-bottom:1.5px solid #15171c; text-align:left; } #print .rdoc .r { text-align:right; }
  #print .rdoc td small { display:block; color:#6b717c; font-size:9.5px; }
  #print .rdoc tbody tr:not(.rr-grp):not(.rr-sub):nth-child(even) td { background:#f7f8fa; }
  #print .rdoc .rr-grp td { font:700 11px/1.3 'Sora', sans-serif; padding-top:12px; border-bottom:0; background:transparent; }
  #print .rdoc .rr-sub td { border-bottom:0; color:#4b515c; text-align:right; font-size:10px; } #print .rdoc .rr-sub td.r { color:#15171c; font-weight:700; }
  #print .rdoc tfoot td { font-weight:700; border-top:1.5px solid #15171c; border-bottom:0; }
  #print .rdoc .rr-sit { background:#e6f4ff; color:#00609e; font-size:9px; padding:1px 6px; } #print .rdoc .rr-sit.ruim { background:#fdf0e3; color:#9a4d00; } #print .rdoc .rr-sit.bom { background:#e3f2ec; color:#0b6b47; }
  #print .rdoc tr { break-inside:avoid; } #print .rdoc thead { display:table-header-group; }
}
.rd-cab { display:flex; align-items:flex-start; gap:14px; padding-bottom:14px; border-bottom:3px solid var(--rcor, #0055ff); }
.rd-cab img { width:54px; height:54px; max-height:none; object-fit:contain; flex:none; }
.rd-selo { width:54px; height:54px; flex:none; border-radius:10px; color:#fff; display:flex; align-items:center; justify-content:center; font:700 12px/1 'Sora', sans-serif; }
.rd-radio { flex:1; display:flex; flex-direction:column; gap:1px; color:#4b515c; } .rd-radio b { font:700 13.5px/1.25 'Sora', sans-serif; color:#15171c; }
.rd-tit { text-align:right; display:flex; flex-direction:column; gap:2px; color:#4b515c; } .rd-tit small { font-size:9.5px; font-weight:700; letter-spacing:.12em; color:#6b717c; } .rd-tit > b { font:700 19px/1.15 'Sora', sans-serif; color:#15171c; } .rd-tit span b { color:#15171c; }
.rdoc .rr-res { gap:9px; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); } .rdoc .rr-k { border:1px solid #dfe2e8; border-radius:10px; padding:10px 11px; gap:2px; }
.rdoc .rr-k small { font-size:10.5px; color:#4b515c; } .rdoc .rr-k b { font:700 15px/1.2 'Sora', sans-serif; color:#15171c; } .rdoc .rr-k span { font-size:9.5px; color:#6b717c; }
.rdoc .rr-k.dest { background:#15171c; border-color:#15171c; } .rdoc .rr-k.dest b { color:#fff; } .rdoc .rr-k.dest small, .rdoc .rr-k.dest span { color:#c9cdd5; }
.rdoc .rr-k.ruim:not(.dest) b { color:#9a4d00; } .rdoc .rr-k.bom span { color:#0b6b47; }
.rdoc .rr-prog { background:#e9ebef; } .rdoc .rr-prog i { background:#0b7a52; }
.rdoc .rr-tit { font:700 12px/1.3 'Sora', sans-serif; }
.rdoc .rr-part { gap:7px; } .rdoc .rr-part > div { grid-template-columns:170px minmax(0, 1fr) 50px 100px; font-size:11px; gap:10px; }
.rdoc .rr-barra { height:10px; background:#eef0f3; } .rdoc .rr-barra i { background:#15171c; } .rdoc .rr-barra i.pri { background:var(--rcor, #0055ff); } .rdoc .rr-val { color:#4b515c; }
.rd-nota { margin:-10px 0 0; font-size:9.5px; color:#6b717c; }
.rdoc .rr-ler { background:#f4f5f7; border-radius:10px; padding:10px 12px; font-size:10px; color:#3a3f4a; gap:3px; } .rdoc .rr-ler b { color:#15171c; font-size:10.5px; }
.rd-rod { display:flex; justify-content:space-between; gap:12px; padding-top:8px; border-top:1px solid #dfe2e8; font-size:9.5px; color:#6b717c; }

/* ---------- Sonvi Music · Radar (Spotify): só preto e branco, com o logo oficial do Spotify ---------- */
.radar { --accent:var(--ink); --accent-hover:var(--ink); --accent-ink:var(--surface); --accent-soft:var(--fill); --accent-text:var(--ink); }
.radar a:not(.btn):not(.rad-atalho) { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.radar .tile.hero { background:var(--ink); color:var(--surface); }
.radar .tile.hero small, .radar .tile.hero span { color:var(--surface); }
.radar .tile.hero::after { display:none; }
.sp-logo { display:inline-flex; height:var(--h, 20px); flex:none; }
.sp-logo img { height:100%; width:auto; }
.sp-logo .es, .rad-atalho .sp-logo .cl, .rad-escuro .sp-logo .cl { display:none; }
.rad-atalho .sp-logo .es, .rad-escuro .sp-logo .es { display:block; }
@media (prefers-color-scheme: dark) {
  .sp-logo .cl { display:none; } .sp-logo .es { display:block; }
  .rad-atalho .sp-logo .cl, .rad-escuro .sp-logo .cl { display:block; } .rad-atalho .sp-logo .es, .rad-escuro .sp-logo .es { display:none; }
}
.rad-topo { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:18px; }
.rad-topo h2 { font:600 clamp(22px, 2.4vw, 30px)/1.15 var(--display); letter-spacing:-.03em; }
.rad-topo .row { gap:8px; flex-wrap:wrap; }
.rad-conta { display:inline-flex; align-items:center; gap:10px; height:42px; padding:0 16px; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.rad-conta i { width:1px; height:18px; background:var(--line); }
.rad-erro { padding:12px 16px; border-radius:var(--radius-s); border:1.5px solid var(--ink); margin-bottom:16px; font-weight:500; }
.rad-atalhos { display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px; margin-bottom:16px; }
.rad-atalho { background:var(--ink); color:var(--surface); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:16px; min-height:128px; transition:transform .2s var(--ease); }
.rad-atalho:hover { color:var(--surface); transform:translateY(-3px); }
.rad-atalho > span:last-child { margin-top:auto; }
.rad-atalho b { display:block; font:600 20px/1.2 var(--display); letter-spacing:-.02em; }
.rad-atalho small { opacity:.7; }
.rad-playlist { background:var(--surface); border:1.5px dashed var(--ink-3); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.rad-playlist > small:first-child { font-weight:700; letter-spacing:.1em; color:var(--ink-2); font-size:11px; }
.rad-playlist b { font:600 17px/1.3 var(--display); }
.rad-cols { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; align-items:start; }
.rad-lista .hd { flex-wrap:wrap; align-items:center; }
.rad-lista .seg { margin:0; }
.rad-lista .seg small { opacity:.6; }
.rad-cab, .rad-linha { display:grid; grid-template-columns:52px minmax(0, 1fr) 130px minmax(0, 1fr) auto; gap:0 16px; align-items:center; }
.rad-cab { font-size:12px; color:var(--ink-2); padding:0 8px 8px; }
.rad-linha { padding:10px 8px; border-top:1px solid var(--line-2); border-radius:var(--radius-s); transition:background .15s; }
.rad-linha:hover { background:var(--fill); }
.rad-capa { width:52px; height:52px; border-radius:8px; object-fit:cover; display:block; background:var(--fill-2); }
.rad-capa.p { width:40px; height:40px; border-radius:6px; flex:none; }
.rad-tit { min-width:0; display:flex; flex-direction:column; }
.rad-tit b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rad-tit small { color:var(--ink-2); }
.rad-novo { color:var(--ink); font-weight:600; }
.rad-popc { display:flex; align-items:center; gap:8px; }
.rad-pop { flex:1; height:6px; border-radius:999px; background:var(--fill-2); overflow:hidden; }
.rad-pop i { display:block; height:100%; border-radius:999px; background:var(--ink); transform-origin:left; }
.entra .rad-pop i { animation:fill 1.1s var(--ease) both; animation-delay:400ms; }
.rad-popc b { font-family:var(--display); width:26px; text-align:right; }
.rad-ac { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.rad-ac small { color:var(--ink-2); }
.rad-selo { display:inline-flex; padding:3px 10px; border-radius:6px; font-size:12px; font-weight:600; border:1px dashed var(--ink); white-space:nowrap; }
.rad-selo.tem { background:var(--ink); color:var(--surface); border-style:solid; }
.rad-bt { display:flex; gap:6px; justify-content:flex-end; }
.rad-play { width:34px; padding:0; }
.rad-busca { display:flex; gap:8px; margin-bottom:12px; }
.rad-busca input { flex:1; min-width:0; height:40px; border-radius:8px; border:1.5px solid var(--ink); padding:0 16px; background:var(--surface); color:var(--ink); font:inherit; }
.rad-res { display:flex; flex-direction:column; gap:10px; }
.rad-r { display:flex; align-items:center; gap:10px; }
.rad-r .rad-tit { flex:1; }
.rad-r .rad-tit b { font-size:14px; }
.rad-escuro { background:var(--ink); color:var(--surface); }
.rad-escuro p { opacity:.7; margin:-8px 0 8px; }
.rad-sobe { display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid color-mix(in srgb, var(--surface) 15%, transparent); }
.rad-sobe span { display:flex; flex-direction:column; } .rad-sobe small { opacity:.7; }
.rad-sobe > b { font:600 20px var(--display); }
.rad-fonte { display:flex; align-items:center; gap:10px; color:var(--ink-2); padding:0 6px; }
.rad-conectar { max-width:600px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.rad-conectar .sp-logo { align-self:flex-start; }
.rad-conectar h2 { font:600 26px/1.2 var(--display); letter-spacing:-.02em; }
.rad-passos { list-style:none; counter-reset:p; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.rad-passos li { counter-increment:p; display:grid; grid-template-columns:30px 1fr; column-gap:16px; }
.rad-passos li::before { content:counter(p); grid-row:span 2; width:30px; height:30px; border-radius:999px; background:var(--ink); color:var(--surface); display:flex; align-items:center; justify-content:center; font:600 13px var(--display); }
.rad-passos small { color:var(--ink-2); }
.rad-pode { background:var(--fill); border-radius:var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.rad-pode small { font-weight:700; letter-spacing:.1em; color:var(--ink-2); font-size:11px; margin-top:6px; } .rad-pode small:first-child { margin-top:0; }
@media (max-width:1180px) { .rad-cols { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:820px) {
  .rad-cab { display:none; }
  .rad-linha { grid-template-columns:52px minmax(0, 1fr) auto; row-gap:10px; padding:12px 4px; }
  .rad-linha .rad-popc { grid-column:3; grid-row:1; width:auto; flex-direction:column; align-items:flex-end; gap:0; }
  .rad-linha .rad-popc .rad-pop { display:none; }
  .rad-linha .rad-ac { grid-column:1 / -1; }
  .rad-linha .rad-bt { grid-column:1 / -1; justify-content:flex-start; }
  .rad-lista .seg { width:100%; }
  .rad-atalhos { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(200px, 72%); overflow-x:auto; scroll-snap-type:x mandatory; }
  .rad-atalho, .rad-playlist { scroll-snap-align:start; min-height:96px; }
}

/* ---------- cadastro em várias rádios (clientes e agências) ---------- */
dialog.medio { width:min(880px, 96vw); }
.cad-bloco { display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--line); }
.cad-hd { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; }
.cad-hd b { font:600 17px/1.3 var(--display); }
.cad-hd small, .cad-rot { color:var(--ink-2); font-size:12px; }
.cad-rot { font-weight:700; letter-spacing:.06em; }
.cad-radios { display:flex; flex-direction:column; gap:10px; }
.cad-radio { padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-m); background:var(--surface); transition:border-color .2s, background .2s; }
.cad-radio:has(input[name^="x_rad_"]:checked), label.cad-radio:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.cad-top { display:flex; align-items:center; gap:12px; cursor:pointer; font-weight:400; color:var(--ink); }
.cad-top input { width:20px; height:20px; accent-color:var(--accent); flex:none; margin:0; }
.cad-top b, .cad-radio > b { font-size:15px; }
.cad-radio .vav, .cad-achado .vav { width:32px; height:32px; font-size:11px; flex:none; }
.cad-radio.ja { display:flex; align-items:center; gap:12px; background:var(--fill); }
.cad-ja { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:var(--green); font-weight:600; font-size:13px; }
.cad-ja svg, .cad-ag svg, .cad-achado.ok svg { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cad-det { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 0 32px; }
.cad-radio:not(:has(input[name^="x_rad_"]:checked)) .cad-det { display:none; }
.cad-det .f { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink-2); }
.cad-det select { width:100%; }
.cad-fixo { min-height:44px; display:flex; align-items:center; padding:0 14px; border-radius:var(--radius-s); background:var(--fill); color:var(--ink); font-size:15px; }
.cad-ag { min-height:44px; display:flex; gap:8px; padding:9px 14px; border-radius:var(--radius-s); font-size:13px; line-height:1.3; color:var(--ink); }
.cad-ag.ok { align-items:center; background:var(--fill); } .cad-ag.ok svg { color:var(--green); }
.cad-ag.falta { flex-direction:column; background:color-mix(in srgb, var(--orange) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
.cad-ag .chk { font-size:13px; font-weight:600; }
.cad-achado { display:flex; gap:16px; align-items:flex-start; padding:16px; border-radius:var(--radius-m); background:color-mix(in srgb, var(--accent) 7%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.cad-achado > div { display:flex; flex-direction:column; gap:4px; }
.cad-achado .row { gap:8px; margin-top:8px; flex-wrap:wrap; }
.cad-achado.ok { align-items:center; gap:10px; color:var(--ink); } .cad-achado.ok svg { color:var(--green); }
.cad-mud { display:grid; grid-template-columns:130px 1fr; gap:10px; padding:10px 0; border-top:1px solid var(--line-2); }
.cad-mud > span:first-child { color:var(--ink-2); }
.cad-mud s { display:block; color:var(--ink-3); }
@media (max-width:640px) { .cad-det { grid-template-columns:1fr; margin-left:0; } .cad-mud { grid-template-columns:1fr; gap:2px; } }
.cad-acoes { flex-wrap:nowrap; }
@media (max-width:640px) { .cad-acoes .grow { display:none; } .cad-acoes .btn { flex:1 1 0; min-width:0; white-space:normal; line-height:1.2; text-align:center; } }

/* ---------- acessibilidade e toque (Web Interface Guidelines) ---------- */
.pular { position:fixed; left:12px; top:12px; z-index:100; padding:10px 18px; border-radius:8px; background:var(--ink); color:var(--surface); font-weight:600; transform:translateY(-200%); transition:transform .2s var(--ease); }
.pular:focus { transform:none; color:var(--surface); }
#content:focus { outline:none; }
/* Tudo o que se clica pelo teclado mostra onde está o foco */
[data-act][tabindex]:focus-visible, [data-go]:focus-visible, #side nav a:focus-visible, #side .recolher:focus-visible, .btn:focus-visible, .seg button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
tr[data-act]:focus-visible { outline-offset:-2px; }
/* Toque no celular sem atraso e sem zoom de toque duplo */
a, button, input, select, textarea, label, [data-act], [data-go] { touch-action:manipulation; }
/* Ao rolar um formulário aberto por cima, a página de trás não rola junto */
dialog form, .menu { overscroll-behavior:contain; }
.acesso .lado img.simbolo { height:auto; }
/* Erro mostrado embaixo do campo */
.erro-campo { color:var(--red); font-size:13px; font-weight:500; }
[aria-invalid="true"] { border-color:var(--red) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent) !important; }

/* Texto só para leitores de tela */
.sr { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Botão de ação destrutiva e janelas de confirmação */
dialog.conf { width:min(460px, 94vw); }
dialog.conf form { gap:12px; } dialog.conf p { margin:0; }
.dlg-aviso { position:sticky; bottom:-28px; margin:0 -28px -28px; padding:16px 28px 20px; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -12px 24px -16px rgba(0,0,0,.35); display:flex; flex-direction:column; gap:4px; animation:rise .25s var(--ease) both; }
.dlg-aviso span { color:var(--ink-2); font-size:14px; }
.dlg-aviso .row { margin-top:10px; justify-content:flex-end; gap:8px; }
/* Busca do Financeiro mostra o foco como os outros campos */
.fin-busca:focus-within { background:var(--surface); box-shadow:0 0 0 3px var(--accent-soft); outline:1px solid var(--accent); }
.scroll[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Alvos de toque de pelo menos 44 px no celular */
@media (max-width:820px) {
  .card .hd a, #bar .sub a, td a[data-go], td a[data-act], .pl-l a[data-go] { display:inline-flex; align-items:center; min-height:44px; }
  .btn.tres, .ac .x, .gr-l .rm { min-width:44px; min-height:44px; }
  .btn.sm { min-height:40px; }
  input[type=checkbox] { width:24px; height:24px; }
  td:has(> input[type=checkbox]) { padding-top:10px; padding-bottom:10px; }
}
/* Barra de abas do celular: o que não cabe vai para o "Mais" */
#side nav .nav-mais { display:none; }
@media (max-width:820px) {
  #side nav a.extra { display:none; }
  #side nav .nav-mais { display:flex; flex-direction:column; align-items:center; gap:4px; font:500 11px var(--font); color:var(--menu); background:none; border:0; padding:6px 10px; min-width:58px; border-radius:10px; cursor:pointer; }
  #side nav .nav-mais.on { color:var(--accent-text); font-weight:600; }
  #side nav .nav-mais svg { width:22px; height:22px; fill:currentColor; stroke:none; }
}
/* Celular: clientes e OPEC em cartões (nada fica escondido fora da tela) */
.cli-lista > div { cursor:pointer; align-items:flex-start; border-bottom:1px solid var(--line-2); border-radius:0; padding:14px 4px; }
.heading { font-family:var(--heading-font); } .body-text { font-family:var(--body-font); }
.nw { white-space:nowrap; }
.cli-tab .cli-nome { overflow-wrap:anywhere; } .cli-tab td:first-child { min-width:220px; }
@media (max-width:1400px) { .cli-tab .cli-ag { display:none; } } @media (max-width:1240px) { .cli-tab .cli-tel { display:none; } }
.cli-lista > div:last-child { border-bottom:0; }
.cli-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:6px; }
.cli-meta small { color:var(--ink-2); font-size:13px; }
.op-cards { display:flex; flex-direction:column; gap:12px; }
.op-card { border:1px solid var(--line); border-radius:var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.op-tit { display:flex; flex-direction:column; color:var(--ink); } .op-tit small { color:var(--ink-2); font-size:12px; } .op-tit b { font-size:16px; }
.op-card dl { margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; }
.op-card dt { font-size:12px; color:var(--ink-2); } .op-card dd { margin:0; font-size:14px; }
.op-bt { display:flex; gap:8px; } .op-bt .btn { flex:1; }
.tile span.bom { color:color-mix(in srgb, var(--green) 84%, #000); } .tile span.ruim { color:color-mix(in srgb, var(--orange) 84%, #000); }
@media (prefers-color-scheme: dark) { .tile span.bom { color:var(--green); } .tile span.ruim { color:var(--orange); } }
.cli-lista > div:focus { outline:none; } .cli-lista > div:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; border-radius:var(--radius-s); } .cli-lista .tx b a { color:var(--ink); }
@media (max-width:820px) {
  #side nav .nav-mais { position:relative; }
  .row > input[type=search] { flex:1 1 100%; }
}
/* O texto só para leitores de tela fica preso dentro da tabela (não alarga a página no zoom) */
.scroll { position:relative; } th .sr { left:0; }
@media (max-width:820px) { .tp-previa-cab a, .hd a[data-go] { display:inline-flex; align-items:center; min-height:44px; } }

/* ---------- Propostas (propostas.js): lista, editor, gerar PI ---------- */
.pr-tiles .tile { gap:4px; } .pr-tiles .tile b { margin:6px 0 2px; } .pr-tiles .tile small:last-child { font-size:13px; }
.prl { padding:10px 14px; }
.prl-l { display:grid; grid-template-columns:84px minmax(150px, 1.2fr) minmax(0, 1.3fr) 96px 132px minmax(150px, 1fr) 196px; gap:16px; align-items:center; padding:14px 10px; border-top:1px solid var(--line-2); border-radius:var(--radius-s); font-variant-numeric:tabular-nums; }
.prl-l.click { cursor:pointer; transition:background .2s; } .prl-l.click:hover, .prl-l.click:focus-visible { background:var(--fill); } .prl-l.click:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.prl-l > span { min-width:0; display:flex; flex-direction:column; gap:2px; }
.prl-cab { border-top:0; padding-top:4px; padding-bottom:8px; font-size:12px; color:var(--ink-2); font-weight:500; }
.prl-n { font:600 15px/1.2 var(--display); white-space:nowrap; } .prl-cab .prl-n { font:inherit; }
.prl-c b, .prl-i, .prl-s small { display:-webkit-box !important; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.prl-c b { line-height:1.3; } .prl-cab .prl-i { font-size:inherit; color:inherit; } .prl-c small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .prl-i { line-height:1.5; color:var(--ink-2); font-size:14px; }
.prl-l small { color:var(--ink-2); font-size:13px; }
.prl-q, .prl-v { text-align:right; align-items:flex-end; } .prl-l .prl-q small, .prl-l .prl-v small { display:none; }
.prl-v b { font:600 15px/1.2 var(--display); }
.prl-s { align-items:flex-start; gap:4px !important; } .prl-s small { line-height:1.3; }
.prl-a { flex-direction:row !important; align-items:center; justify-content:flex-end; gap:6px !important; }
@media (max-width:1320px) { .prl-l { grid-template-columns:78px minmax(0, 1.6fr) 84px 124px minmax(0, 1fr) 196px; gap:16px; } .prl-l > .prl-i { display:none !important; } }
.pr-tiles { grid-template-columns:repeat(4, minmax(0, 1fr)); } @media (max-width:1100px) { .pr-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:1100px) {
  .prl-l > .prl-i { display:block !important; }
  .prl { padding:12px; } .prl-cab { display:none; }
  .prl-l { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"n a" "c c" "i i" "q v" "s s"; gap:8px 12px; padding:14px 14px; border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:10px; }
  .prl-l:last-child { margin-bottom:0; }
  .prl-n { grid-area:n; align-self:center; } .prl-c { grid-area:c; } .prl-i { grid-area:i; color:var(--ink-2); font-size:14px; } .prl-q { grid-area:q; align-items:flex-start !important; text-align:left; } .prl-v { grid-area:v; } .prl-s { grid-area:s; flex-direction:row !important; flex-wrap:wrap; align-items:center; gap:8px !important; } .prl-a { grid-area:a; }
  .prl-l .prl-q small, .prl-l .prl-v small { display:block; }
  .prl-a .btn.sm { height:44px; } .prl-a .btn.tres { width:44px; height:44px; }
}
.pr-corpo { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:16px; align-items:start; }
.pr-main { min-width:0; } .pr-main > .card:last-child { margin-bottom:0; }
.pr-res { position:sticky; top:16px; margin:0; display:flex; flex-direction:column; gap:16px; }
.card .pr-rot { font:600 12px/1.3 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin:0; }
.pr-lin { display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .pr-lin > span { display:flex; flex-direction:column; color:var(--ink-2); } .pr-lin small { font-size:12px; } .pr-lin b { font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-inv { border-top:2px solid var(--ink); padding-top:14px; } .pr-inv > span { color:var(--ink); font:600 16px/1.2 var(--display); } .pr-inv b { font:600 22px/1.2 var(--display); letter-spacing:-.02em; }
.pr-marca { background:var(--fill); border-radius:var(--radius-m); padding:14px 16px; display:flex; flex-direction:column; gap:8px; } .pr-marca small { color:var(--ink-2); font-size:12px; } .pr-marca small:first-child { text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:12px; }
.pr-logo { background:#fff; border-radius:10px; padding:6px 8px; align-self:flex-start; display:block; } .pr-logo img { width:170px; height:auto; display:block; }
.pr-cli { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, .9fr); gap:16px; }
.pr-cli select, .pr-cli input { width:100%; height:44px; } .pr-cli small { font-size:12px; font-weight:400; min-height:16px; }
.pr-val { color:var(--ink); font-size:15px; font-weight:500; min-height:24px; }
.pr-texto { margin-top:18px; display:flex; flex-direction:column; gap:8px; } .pr-rotulo { font-size:13px; font-weight:500; color:var(--ink-2); } .pr-texto textarea { min-height:112px; line-height:1.6; }
.pr-leitura { white-space:pre-line; line-height:1.6; }
.pr-main textarea.alto { min-height:140px; line-height:1.6; }
.pr-cond { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
/* Itens: o card escolhe o arranjo pela largura que tem (uma linha, duas linhas ou cartão) */
.pr-its { display:flex; flex-direction:column; container-type:inline-size; }
.pr-it { display:grid; grid-template-columns:minmax(150px, 1fr) auto 84px 82px 110px 118px 28px; grid-template-areas:"id dd q tb ng tt x"; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
.pr-it > * { min-width:0; } .pr-id { grid-area:id; } .pr-dd { grid-area:dd; } .pr-q { grid-area:q; } .pr-tb { grid-area:tb; } .pr-ng { grid-area:ng; } .pr-tt { grid-area:tt; } .pr-x { grid-area:x; }
.pr-cab { border-top:0; padding:0 0 8px; font-size:12px; color:var(--ink-2); font-weight:500; } .pr-cab .r { text-align:right; }
.pr-k { display:none; font-size:12px; color:var(--ink-2); font-weight:500; margin-bottom:4px; }
.pr-id { display:flex; flex-direction:column; gap:4px; } .pr-id b { font-weight:600; line-height:1.3; } .pr-id small { font-size:13px; } .pr-id label { display:inline-flex; align-items:center; gap:6px; }
.pr-faixa { height:32px; padding:0 9px; width:128px; font-size:13px; }
.pr-dd { display:flex; flex-direction:column; } .pr-dias { display:inline-flex; gap:4px; align-items:center; min-height:42px; }
.pr-sujo[hidden] { display:none !important; }
.pr-dia { width:28px; height:28px; border-radius:8px; border:0; padding:0; display:inline-flex; align-items:center; justify-content:center; font:600 12px/1 var(--font); background:var(--fill); color:var(--ink-2); }
button.pr-dia { cursor:pointer; transition:background .15s, color .15s, transform .15s; } button.pr-dia:hover { box-shadow:inset 0 0 0 1.5px var(--accent); } button.pr-dia:active { transform:scale(.92); }
button.pr-dia:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pr-dia.on { background:var(--accent); color:var(--accent-ink); }
.pr-q, .pr-ng, .pr-tt { display:flex; flex-direction:column; } .pr-q input, .pr-ng input, .pr-tt input { width:100%; height:42px; text-align:right; }
.pr-q b, .pr-tt b, .pr-ng span, .pr-tb { text-align:right; display:block; } .pr-tb { font-size:14px; }
.pr-x { text-align:right; }
@container (max-width:860px) {
  .pr-cab { display:none; } .pr-k { display:block; }
  .pr-it { grid-template-columns:auto 84px 110px minmax(110px, 1fr) 28px; grid-template-areas:"id id id tb x" "dd q ng tt tt"; gap:10px 12px; padding:14px 0; align-items:end; }
  .pr-tb { align-self:start; } .pr-tb .pr-k { display:none; } .pr-x { align-self:start; }
  .pr-tb::before { content:"Tabela "; color:var(--ink-2); font-size:13px; }
}
@container (max-width:520px) {
  .pr-it { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 32px; grid-template-areas:"id id x" "dd dd dd" "q ng ng" "tb tt tt"; }
  .pr-tb { align-self:center; text-align:left; }
  .pr-dia { width:38px; height:38px; font-size:13px; } .pr-dias { gap:4px; }
  .pr-faixa { width:140px; height:38px; } .pr-x .x { min-width:32px; min-height:32px; }
}
@media (max-width:1180px) { .pr-corpo { grid-template-columns:minmax(0, 1fr); } .pr-res { position:static; } }
@media (max-width:980px) { .pr-cli { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .pr-cli { grid-template-columns:1fr; } }
@media (max-width:820px) { .pr-texto .row .btn { flex:1 1 100%; height:44px; } }
/* Gerar PI: início, meses, marca e o calendário da distribuição */
.pr-ger { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:16px; align-items:end; } .pr-ger input, .pr-ger select { width:100%; height:44px; }
fieldset.f { border:0; margin:0; padding:0; min-width:0; } fieldset.f legend { padding:0; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--ink-2); }
.seg.radios { margin:0; display:flex; width:100%; } .seg.radios label { flex:1 1 0; min-width:0; position:relative; text-align:center; padding:8px 12px; border-radius:6px; cursor:pointer; font-weight:500; font-size:14px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .2s, color .2s; }
.seg.radios input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.seg.radios label:has(input:checked) { background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(10,20,60,.14); }
.seg.radios label:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:1px; }
.pr-meses { margin:0 0 4px; }
.pr-cal-cab { margin-top:6px; } .pr-cal-cab h3 { font:600 16px/1.3 var(--display); letter-spacing:-.01em; } .pr-cal-cab .pill svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.pr-cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:6px; margin-top:12px; }
.pr-ws { display:contents; } .pr-ws small { text-align:center; font-size:12px; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.pr-cd { border-radius:12px; padding:6px 4px 7px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; background:var(--fill); font-variant-numeric:tabular-nums; }
.pr-cd small { font-size:11px; color:var(--ink-2); } .pr-cd b { font:600 18px/1.2 var(--display); }
.pr-cd.leve { background:var(--accent-soft); } .pr-cd.leve small, .pr-cd.leve b { color:var(--accent-text); }
.pr-cd.forte { background:var(--accent); } .pr-cd.forte small, .pr-cd.forte b { color:var(--accent-ink); }
.pr-cd.zero b { color:var(--ink-3); font-weight:400; } .pr-cd.fora { background:transparent; box-shadow:inset 0 0 0 1px var(--line); } .pr-cd.fora small { color:var(--ink-3); } .pr-cd.vz { background:transparent; min-height:0; }
.pr-leg { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:13px; color:var(--ink-2); } .pr-leg span { display:inline-flex; align-items:center; gap:6px; }
.pr-leg i { width:12px; height:12px; border-radius:4px; background:var(--accent-soft); } .pr-leg i.forte { background:var(--accent); }
@media (max-width:640px) { .pr-ger { grid-template-columns:1fr 1fr; } .pr-marca-esc { grid-column:1 / -1; } .pr-cal { gap:4px; } .pr-cd { min-height:46px; border-radius:9px; padding:4px 2px; } .pr-cd b { font-size:15px; } .pr-ws small { font-size:11px; } }
/* PI com a marca da empresa comercial e a faixa horária embaixo do programa */
.pd-emp { flex-direction:column; gap:4px; } .pd-emp img { width:150px; height:auto; }
.pd-grade td.pg .pd-fx { display:block; font-weight:400; font-size:9.5px; color:#4b515c; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Proposta impressa (A4 em pé, modelo da empresa comercial) ---------- */
.prdoc { width:210mm; min-height:296mm; display:flex; flex-direction:column; background:#fff; color:#152134; font:12px/1.55 'Manrope', Helvetica, Arial, sans-serif; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.prd-faixa { display:flex; height:3mm; flex:none; } .prd-faixa i { flex:3; background:var(--pc); } .prd-faixa i + i { flex:1; background:var(--pc2); }
.prd-cab { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:9mm 15mm 7mm; border-bottom:1px solid #e3e6ec; }
.prd-logo { width:64mm; height:auto; display:block; }
.prd-tit { text-align:right; display:flex; flex-direction:column; gap:3px; } .prd-tit b { font:700 15px/1.2 'Sora', sans-serif; letter-spacing:.04em; } .prd-tit span { color:#5b6170; font-size:12px; }
.prd-corpo { padding:9mm 15mm 0; display:flex; flex-direction:column; gap:7mm; flex:1; }
.prd-partes { display:grid; grid-template-columns:1.6fr 1fr; gap:10mm; } .prd-partes > div { display:flex; flex-direction:column; gap:1px; }
.prd-partes small, .prd-cond small { color:var(--pc); font:700 9.5px/1.4 'Manrope', Helvetica, sans-serif; letter-spacing:.1em; text-transform:uppercase; margin-bottom:2px; }
.prd-partes b { font:700 14px/1.35 'Sora', sans-serif; } .prd-partes span { color:#3b4150; font-size:11.5px; }
.prd-radio, #print .prd-radio { font:700 27px/1.15 'Sora', sans-serif; letter-spacing:-.01em; margin:0; padding-bottom:4mm; position:relative; color:#152134; } .prd-radio::after { content:""; position:absolute; left:0; bottom:0; width:15mm; height:3px; background:var(--pc2); }
.prd-texto { font-size:12.5px; line-height:1.75; color:#26304a; margin:0; }
.prd-tab, #print .prd-tab { width:100%; border-collapse:collapse; margin:0; }
.prd-tab th, #print .prd-tab th { background:var(--pc); color:#fff; font-weight:600; text-align:left; padding:3.2mm 3mm; font-size:12px; border:0; }
.prd-tab td, #print .prd-tab td { padding:3.6mm 3mm; border:0; border-bottom:1px solid #e3e6ec; font-size:12px; color:#152134; vertical-align:top; }
.prd-tab .r, #print .prd-tab .r { text-align:right; white-space:nowrap; }
.prd-tot { display:grid; grid-template-columns:auto auto; justify-content:end; column-gap:12mm; row-gap:2.2mm; margin-top:-3mm; font-size:12px; } .prd-tot .r { text-align:right; }
.prd-inv { font:700 15px/1.3 'Sora', sans-serif; border-top:2px solid #152134; padding-top:3mm; margin-top:1mm; }
.prd-cond { background:#f2f4f8; padding:5mm 6mm; display:flex; flex-direction:column; } .prd-cond ul { margin:2mm 0 0; padding:0; list-style:none; } .prd-cond li { font-size:11.5px; line-height:1.8; } .prd-cond li::before { content:"• "; }
.prd-ass { display:grid; grid-template-columns:1fr 1fr; gap:40mm; margin-top:auto; padding:14mm 0 8mm; break-inside:avoid; } .prd-ass > div { border-top:1px solid #152134; padding-top:3mm; display:flex; flex-direction:column; } .prd-ass > div + div { text-align:right; } .prd-ass span { color:#5b6170; }
.prd-rod { background:#152134; color:#fff; display:flex; justify-content:space-between; gap:10mm; padding:6mm 15mm; font-size:11px; flex:none; } .prd-rod b { font-weight:600; }
.prd-tab tr { break-inside:avoid; }
/* Administração → Empresa comercial */
.emp-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap:16px; align-items:start; } .emp-grid > .card { margin:0; }
.emp-cab { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .emp-cab .pr-logo { border:1px dashed var(--line); padding:12px 14px; } .emp-cab .pr-logo img { width:200px; } .emp-cab p { flex:1 1 180px; }
.emp-kv { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:16px 16px; } .emp-kv > div { display:flex; flex-direction:column; gap:2px; min-width:0; } .emp-kv small { color:var(--ink-2); font-size:13px; } .emp-kv span { overflow-wrap:anywhere; }
.emp-prev { border:1px dashed var(--line); padding:10px 12px; flex:none; } .emp-prev img { width:180px; height:auto; display:block; }
@media (max-width:520px) { .emp-grid .list > div { flex-wrap:wrap; } .emp-grid .list .btn { height:44px; } }
/* Prévia da proposta: a folha A4 encolhida para caber na janela */
.pr-previa { background:var(--fill-2); border-radius:var(--radius-m); padding:14px; overflow:hidden; }
.pr-folha { transform-origin:0 0; margin:0 auto; } .pr-folha .prdoc { box-shadow:0 10px 30px -12px rgba(10,20,60,.35); border-radius:4px; overflow:hidden; }
.pr-previa:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Enviar proposta e propostas aprovadas na tela de PIs */
#dlg textarea.pr-msg { min-height:170px; line-height:1.6; font-size:14px; }
#dlg label.f[hidden] { display:none; }
.pr-aprov { border:1.5px solid color-mix(in srgb, var(--green) 35%, transparent); }
.pr-aprov .hd { margin-bottom:6px; padding:6px 10px 0; }

/* ---------- Follow-up (followup.js) ---------- */
#side nav .badge.alerta { background:var(--red); color:#fff; }
.tile.fu-alerta b { color:var(--red); }
.card .hd h2 .pill { font-size:12px; color:color-mix(in srgb, var(--tone) 84%, #000); }
@media (prefers-color-scheme: dark) { .card .hd h2 .pill { color:var(--tone); } }
.fu-topo { gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.fu-filtro select { height:42px; min-width:220px; }
.fu-cols { grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); align-items:start; }
.fu-col { display:flex; flex-direction:column; gap:16px; min-width:0; } .fu-col > .card { margin:0; }
.card.fu-atras { box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--red) 28%, transparent), var(--shadow); }
.agenda .fu-l.atras .qd b { color:var(--red); }
.agenda .fu-l .qd small { text-transform:lowercase; }
.agenda .tx .fu-ult { color:var(--ink-3); font-size:13px; margin-top:2px; }
.fu-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.fu-dia { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-3); margin:14px 0 2px; }
.fu-dia:first-child { margin-top:0; }
.fu-nota { margin:-8px 0 10px; }
.btn.sm.ic { width:36px; padding:0; justify-content:center; }
.btn.sm.ic svg { width:17px; height:17px; }
.fu-esc { color:var(--red) !important; font-weight:600; }
.fu-pes { display:flex; align-items:center; gap:10px; font-weight:600; white-space:nowrap; }
.fu-tab td { vertical-align:middle; }
.fu-barra { display:inline-block; vertical-align:middle; width:84px; height:6px; border-radius:999px; background:var(--fill); overflow:hidden; margin-right:8px; }
.fu-barra i { display:block; height:100%; border-radius:999px; background:var(--accent); }
.fu-ruim { color:var(--red); font-weight:600; }
.fu-funil { display:flex; flex-direction:column; gap:12px; }
.fu-funil > div { display:grid; grid-template-columns:150px minmax(0, 1fr) 40px; gap:12px; align-items:center; font-size:14px; }
.fu-funil b { text-align:right; font:600 15px/1 var(--display); font-variant-numeric:tabular-nums; }
.fu-fb { height:26px; border-radius:8px; background:var(--fill); overflow:hidden; } .fu-fb i { display:block; height:100%; border-radius:8px; background:var(--accent); }
/* Registrar */
.fu-cli { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-m); }
.fu-cli .tx { display:flex; flex-direction:column; min-width:0; } .fu-cli small { color:var(--ink-2); font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips label { position:relative; }
.chips input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.chips span { display:inline-flex; align-items:center; min-height:40px; padding:0 15px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; transition:background .15s, border-color .15s; }
.chips label:hover span { border-color:var(--ink-3); }
.chips input:checked + span { background:var(--ink); border-color:var(--ink); color:var(--bg); font-weight:600; }
.chips input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.fu-prox { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-m); }
.fu-prox[hidden], .fu-prox [hidden], #dlg [data-so][hidden] { display:none; }
.fu-prox-t { font-weight:600; font-size:14px; margin:0; }
.fu-3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.fu-3 .f > span:first-child { font-size:13px; font-weight:500; color:var(--ink-2); }
.fu-ro { display:flex; align-items:center; height:44px; padding:0 14px; border-radius:var(--radius-s); background:var(--fill); color:var(--ink-2); font-size:15px; }
@media (max-width:1100px) { .fu-cols { grid-template-columns:1fr; } }
@media (max-width:820px) {
  .fu-3 { grid-template-columns:1fr 1fr; } .fu-3 > :nth-child(2) { order:3; }
  .fu-funil > div { grid-template-columns:110px minmax(0, 1fr) 32px; }
  .agenda .fu-l .ac { flex-wrap:wrap; } .agenda .fu-l .ac .btn.pri { flex:1; justify-content:center; height:44px; } .agenda .fu-l .ac .btn.ic, .agenda .fu-l .ac .btn.tres { width:44px; height:44px; }
  .fu-filtro, .fu-filtro select { width:100%; }
}
.fu-3 span.f { display:flex; flex-direction:column; gap:6px; }
.fu-l a.btn, .ag a.btn { color:var(--ink); }
.fu-l a.btn:hover, .ag a.btn:hover { color:var(--accent-ink); }
.pl-v .pag-pi { margin-top:4px; font-size:12px; } .sub .pag-pi { margin-left:6px; }
.cad-achado.aviso { background:color-mix(in srgb, var(--red) 7%, var(--surface)); border-color:color-mix(in srgb, var(--red) 30%, transparent); }
.cad-achado.aviso > svg { width:20px; height:20px; flex:none; fill:none; stroke:var(--red); stroke-width:2; stroke-linecap:round; margin-top:2px; }
.cad-achado.aviso div { display:flex; flex-direction:column; gap:2px; }

/* Celular pequeno (até 420 px): menos borda interna nos cartões, mais área útil */
@media (max-width:420px) { .card { padding:16px; } }

/* Senha provisória (cadastro de usuários) e menu da conta */
.senha-prov { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:10px; }
.senha-prov > div { background:var(--fill); border-radius:var(--radius-s); padding:12px 14px; display:grid; gap:4px; min-width:0; }
.senha-prov small { color:var(--ink-2); font-size:12px; } .senha-prov b { font-size:15px; overflow-wrap:break-word; word-break:normal; } .senha-prov b.num { font:600 18px/1.25 var(--display); letter-spacing:.03em; white-space:nowrap; }
@media (max-width:620px) { .senha-prov { grid-template-columns:1fr; } }
.envio-acesso { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.envio-acesso .btn { width:100%; padding:0 12px; }
@media (max-width:520px) { .envio-acesso { grid-template-columns:1fr; } }
td.nowrap { white-space:nowrap; }
.eu .eu-conta { cursor:pointer; border-radius:var(--radius-s); }
.eu .eu-conta:hover b { text-decoration:underline; text-underline-offset:3px; }