@import url("/assets/mobile.css");
/* Tema do painel 2rtech — segue o sistema (prefers-color-scheme).
   As cores do tailwind.config apontam pra rgb(var(--x) / <alpha-value>), então
   os modificadores de opacidade (bg-primary-container/10 etc.) continuam funcionando.
   Canais RGB separados por espaço, sem vírgula. */

:root {
  color-scheme: light;

  /* ===== CLARO — branco / preto / verde limão ===== */
  --background: 255 255 255;
  --surface: 255 255 255;
  --surface-container-lowest: 255 255 255;
  --surface-container-low: 247 247 245;
  --surface-container: 242 242 240;
  --surface-container-high: 233 233 230;
  --surface-container-highest: 224 224 220;

  --on-surface: 20 20 20;
  --on-background: 20 20 20;
  --on-surface-variant: 90 96 88;
  --border-subtle: 224 224 220;

  --primary: 38 158 38;
  --primary-container: 43 179 43;
  --primary-fixed-dim: 34 150 34;
  --on-primary: 4 33 10;
  --on-primary-container: 0 74 5;

  --warning-yellow: 176 133 0;
  --info-blue: 8 145 178;
  --error: 200 30 30;
  --error-container: 253 224 224;
  --video-red: 210 60 45;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    /* ===== ESCURO — o tema atual do painel ===== */
    --background: 19 19 19;
    --surface: 19 19 19;
    --surface-container-lowest: 14 14 14;
    --surface-container-low: 27 27 27;
    --surface-container: 31 31 31;
    --surface-container-high: 42 42 42;
    --surface-container-highest: 53 53 53;

    --on-surface: 226 226 226;
    --on-background: 226 226 226;
    --on-surface-variant: 188 203 180;
    --border-subtle: 38 38 38;

    --primary: 85 234 77;
    --primary-container: 50 205 50;
    --primary-fixed-dim: 76 227 70;
    --on-primary: 0 58 3;
    --on-primary-container: 0 81 5;

    --warning-yellow: 252 238 9;
    --info-blue: 0 240 255;
    --error: 255 180 171;
    --error-container: 147 0 10;
    --video-red: 255 122 107;
  }
}

/* override manual (pra um botão de tema no futuro) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --background: 19 19 19; --surface: 19 19 19;
  --surface-container-lowest: 14 14 14; --surface-container-low: 27 27 27;
  --surface-container: 31 31 31; --surface-container-high: 42 42 42; --surface-container-highest: 53 53 53;
  --on-surface: 226 226 226; --on-background: 226 226 226; --on-surface-variant: 188 203 180;
  --border-subtle: 38 38 38;
  --primary: 85 234 77; --primary-container: 50 205 50; --primary-fixed-dim: 76 227 70;
  --on-primary: 0 58 3; --on-primary-container: 0 81 5;
  --warning-yellow: 252 238 9; --info-blue: 0 240 255; --error: 255 180 171;
  --error-container: 147 0 10; --video-red: 255 122 107;
}

/* a página cobre a viewport com a cor de fundo do tema */
html, body { background-color: rgb(var(--background)); }

/* trilha de rolagem no tom do tema */
* { scrollbar-color: rgb(var(--border-subtle)) transparent; }

/* logo da 2R: no tema claro a marca continua verde e a palavra "tech" fica preta.
   troca a imagem via CSS, sem mexer no HTML de cada página. */
img[src="/assets/logo.png"] { content: url("/assets/logo-light.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) img[src="/assets/logo.png"] { content: url("/assets/logo.png"); }
}
:root[data-theme="dark"]  img[src="/assets/logo.png"] { content: url("/assets/logo.png"); }
:root[data-theme="light"] img[src="/assets/logo.png"] { content: url("/assets/logo-light.png"); }

/* listas suspensas: a lista nativa abre clara, entao o texto das opcoes fica escuro (tema escuro deixava branco no branco) */
select option,select optgroup{color:#111827;background:#fff}

/* menu ☰ do celular abre pela ESQUERDA (o botão fica à esquerda) — vale pra todas as telas
   que usam o #hamburgerPanel do nav.js, sem mexer no HTML de cada uma. */
#hamburgerPanel { left: 0 !important; right: auto !important; border-left: 0 !important; border-right: 1px solid rgb(var(--border-subtle)) !important; }
#hamburgerPanel.translate-x-full { transform: translateX(-100%) !important; visibility: hidden; }
#hamburgerPanel { transition: transform .2s, visibility .2s; }

/* nada passa da largura da tela no celular (sem "beiradinha" pra rolar pros lados) */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
}

/* ícones dos cards da tela inicial (referência Stitch): na cor de destaque da empresa,
   traço um pouco mais forte; AIDA e Agenda preenchidos, com o quadradinho no tom da marca */
[data-card] > div > .material-symbols-outlined:first-child { color: rgb(var(--primary)) !important; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; }
[data-card="aida"] > div > .material-symbols-outlined:first-child,
[data-card="agenda"] > div > .material-symbols-outlined:first-child { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; }
@media (max-width: 640px) {
  [data-card="aida"] > div > .material-symbols-outlined:first-child,
  [data-card="agenda"] > div > .material-symbols-outlined:first-child { background: rgb(var(--primary-container) / .22) !important; }
}

/* topo de todas as telas: barra mais alta e logo maior, no centro (2026-10-05).
   Desktop 64 -> 80px; celular 56 -> 68px. O conteúdo desce o mesmo tanto. */
header.fixed.h-16 { height: 64px !important; }
header.fixed a:has(> img[src="/assets/logo.png"]), header.fixed a:has(> img.brand-head) {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center;
}
header.fixed img[src="/assets/logo.png"] { height: 40px !important; }
header.fixed ~ main.mt-16 { margin-top: 64px !important; }
header.fixed ~ main:not(.mt-16) { margin-top: 0 !important; }
header.fixed ~ nav.fixed.pt-20 { padding-top: 80px !important; }
header.fixed > div:last-child { margin-left: auto; }
@media (max-width: 640px) {
  header.fixed.h-16, header.fixed { height: 60px !important; }
  /* no celular a logo fica no meio do espaço livre entre os botões (centro absoluto bateria nos ícones) */
  header.fixed > div:first-child { flex: 1 1 auto; min-width: 0; }
  header.fixed a:has(> img[src="/assets/logo.png"]), header.fixed a:has(> img.brand-head) {
    position: static; transform: none; flex: 1 1 auto; min-width: 0; justify-content: center;
  }
  header.fixed img[src="/assets/logo.png"] { height: 30px !important; max-width: 100% !important; object-position: center !important; }
  header.fixed .tt-switch { transform: scale(.78) !important; margin: 0 -6px; }
  header.fixed ~ main.mt-16 { margin-top: 60px !important; }
  header.fixed ~ main:not(.mt-16) { margin-top: 0 !important; }
}

/* menu inferior do celular (nav.js → bottomToolNav), igual ao do Financeiro; some com o ☰ */
.tool-bottomnav { display: none; }
@media (max-width: 767px) {
  html.has-bottomnav #hamburgerBtn { display: none !important; }
  html.has-bottomnav body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .tool-bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgb(var(--surface)); border-top: 1px solid rgb(var(--border-subtle));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,.05);
  }
  .tool-bottomnav button { border: 0; background: none; font: inherit; cursor: pointer; }
  .tool-bottomnav a, .tool-bottomnav button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; color: rgb(var(--on-surface-variant)); text-decoration: none; font-size: 10.5px; font-weight: 600; border-radius: 12px; }
  .tool-bottomnav :is(a, button) .material-symbols-outlined { font-size: 22px; width: 48px; height: 28px; display: grid; place-items: center; border-radius: 999px; }
  .tool-bottomnav .active { color: rgb(var(--primary)); }
  .tool-bottomnav .active .material-symbols-outlined { background: rgb(var(--primary-container) / .2); font-variation-settings: 'FILL' 1; }
}
@media print { .tool-bottomnav, .tbn-sheet { display: none !important; } }

/* folha "Menu" (nav.js) */
.tbn-sheet { position: fixed; inset: 0; z-index: 120; }
.tbn-sheet[hidden] { display: none; }
.tbn-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.tbn-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; background: rgb(var(--surface)); color: rgb(var(--on-surface));
  border-radius: 22px 22px 0 0; padding: 8px 12px calc(16px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .2s ease; box-shadow: 0 -10px 30px rgba(0,0,0,.2); }
.tbn-sheet.open .tbn-bg { opacity: 1; }
.tbn-sheet.open .tbn-panel { transform: none; }
.tbn-grab { width: 40px; height: 4px; border-radius: 4px; background: rgb(var(--border-subtle)); margin: 4px auto 6px; }
.tbn-h { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: rgb(var(--on-surface-variant)); padding: 12px 10px 4px; }
.tbn-panel > a, .tbn-panel > button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 10px; border-radius: 12px; border: 0; background: none;
  color: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.tbn-panel > a .material-symbols-outlined, .tbn-panel > button .material-symbols-outlined { font-size: 22px; color: rgb(var(--primary)); }
.tbn-panel > a:active, .tbn-panel > button:active { background: rgb(var(--surface-container-high)); }
.tbn-panel > a.on { background: rgb(var(--primary-container) / .15); font-weight: 600; }
.tbn-panel .tbn-l { flex: 1; }
.tbn-tg { position: relative; width: 46px; height: 26px; border-radius: 999px; background: rgb(var(--border-subtle)); flex: 0 0 auto; transition: background .2s; }
.tbn-tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.tbn-tg.on { background: rgb(var(--primary-container)); } .tbn-tg.on::after { left: 23px; }
.tbn-panel .tbn-out, .tbn-panel .tbn-out .material-symbols-outlined { color: #c2410c; }

/* celular com menu inferior: topo só com a logo (grande, no centro) e a seta de voltar */
@media (max-width: 767px) {
  html.has-bottomnav header.fixed > div:last-child { display: none !important; }
  html.has-bottomnav header.fixed a:has(> img[src="/assets/logo.png"]), html.has-bottomnav header.fixed a:has(> img.brand-head) {
    position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; flex: none !important; display: flex !important;
  }
  html.has-bottomnav header.fixed img[src="/assets/logo.png"] { height: 40px !important; max-width: calc(100vw - 120px) !important; }
  html.has-bottomnav.brand-cli-on header.fixed img.brand-head, html.has-bottomnav.brand-early header.fixed img.brand-head,
  html.has-bottomnav header.fixed img.brand-head { height: 46px !important; max-width: calc(100vw - 120px) !important; }
  html.has-bottomnav header.fixed a[title="Voltar"] { width: 44px !important; height: 44px !important; }
  html.has-bottomnav header.fixed a[title="Voltar"] .material-symbols-outlined { font-size: 26px !important; }
}

/* a margem de cima do <main> não "vaza" pra fora do body (criava rolagem de 16px nas telas curtas) */
body:has(> header.fixed) { display: flow-root; }


/* Topo igual ao Financeiro (assets/topbar.js): nome da tela no centro, sem logo */
html.has-tbtitle header.fixed { display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
html.has-tbtitle header.fixed > div:first-child { grid-column: 1; grid-row: 1; justify-self: start; flex: none !important; min-width: 0; }
html.has-tbtitle header.fixed > div:not(:first-child):not(.tb-title) { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0 !important; }
html.has-tbtitle header.fixed a:has(> img[src="/assets/logo.png"]), html.has-tbtitle header.fixed a:has(> img.brand-head) { display: none !important; }
html.has-tbtitle header.fixed > div:first-child > span { display: none !important; }
.tb-title { grid-column: 2; grid-row: 1; text-align: center; min-width: 0; max-width: min(60vw, 560px); }
.tb-title h1, .tb-title h2 { font-size: 18px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.01em !important; color: rgb(var(--primary)) !important;
  margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.tb-title p { font-size: 12px !important; line-height: 1.3 !important; margin: 2px 0 0 !important; color: rgb(var(--on-surface-variant)) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767px) {
  .tb-title { max-width: 52vw; }
  .tb-title h1, .tb-title h2 { font-size: 15px !important; }
  .tb-title p { display: none; }
  /* no celular: igual ao Financeiro — seta à esquerda, título no meio, tema + Sair à direita */
  html.has-bottomnav.has-tbtitle header.fixed > div:not(:first-child):not(.tb-title) { display: flex !important; gap: 2px !important; }
  html.has-tbtitle header.fixed a[href="/seguranca/"], html.has-tbtitle header.fixed #whoLabel { display: none !important; }
}
html.has-tbtitle.has-tbtitle header.fixed > div.tb-title { display: block !important; }

/* celular: a seta de voltar mora no menu de baixo (canto esquerdo); no topo fica só título + Segurança/tema/Sair */
@media (max-width: 767px) {
}
@media (max-width: 767px) { html.has-tbtitle header.fixed { gap: 8px; } .tb-title { max-width: 46vw; } }

/* ☰ + gaveta igual ao Financeiro (nav.js painelDrawer) */
html.has-pnldrawer #hamburgerBtn { display: none !important; }
/* seta do topo: só no computador; no celular fica escondida (o ◁ de baixo usa ela) */
html.has-pnldrawer header.fixed a[title="Voltar"] { display: flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: rgb(var(--on-surface-variant)); }
html.has-pnldrawer header.fixed a[title="Voltar"]:hover { background: rgb(var(--surface-container-low)); }
@media (max-width: 767px) { html.has-pnldrawer header.fixed a[title="Voltar"] { display: none !important; } }
html.has-pnldrawer header.fixed a[href="/seguranca/"], html.has-pnldrawer header.fixed #whoLabel { display: none !important; }
html.has-pnldrawer header.fixed > div:first-child { display: flex !important; align-items: center; gap: 4px !important; }
html.has-pnldrawer header.fixed > div:not(:first-child):not(.tb-title) { display: flex !important; align-items: center; gap: 10px !important; }
html.has-pnldrawer header.fixed .tt-switch { transform: none !important; margin: 0 !important; }
html.has-pnldrawer header.fixed .tt-auto { display: none !important; }
.pnl-menu-btn { width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; display: grid; place-items: center; cursor: pointer; color: rgb(var(--on-surface-variant)); }
.pnl-menu-btn:hover { background: rgb(var(--surface-container-low)); }
.pnl-menu-btn .material-symbols-outlined { font-size: 24px; }
html.has-pnldrawer header.fixed #logoutBtn.pnl-sair { height: 32px !important; padding: 0 12px !important; border: 1px solid rgb(var(--border-subtle)) !important; border-radius: 8px !important;
  font-size: 13px; font-weight: 600; color: rgb(var(--primary)) !important; background: rgb(var(--surface)) !important; display: inline-flex !important; align-items: center; }
.pnl-dr { position: fixed; inset: 0; z-index: 130; }
.pnl-dr[hidden] { display: none; }
.pnl-dr-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.pnl-dr-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; background: rgb(var(--surface)); color: rgb(var(--on-surface)); display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .2s ease; box-shadow: 10px 0 30px rgba(0,0,0,.18); overflow-y: auto; }
.pnl-dr.open .pnl-dr-bg { opacity: 1; }
.pnl-dr.open .pnl-dr-panel { transform: none; }
.pnl-dr-brand { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgb(var(--border-subtle)); min-height: 74px; }
.pnl-dr-brand img { height: 40px; width: auto; max-width: 100%; object-fit: contain; }
.pnl-dr-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; }
.pnl-dr-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: rgb(var(--on-surface)); text-decoration: none; font-size: 15px; }
.pnl-dr-nav a .material-symbols-outlined { font-size: 21px; color: rgb(var(--on-surface-variant)); }
.pnl-dr-nav a:hover { background: rgb(var(--surface-container-low)); }
.pnl-dr-nav a.on { background: rgb(var(--primary)); color: #fff; font-weight: 600; }
.pnl-dr-nav a.on .material-symbols-outlined { color: #fff; }
.pnl-dr-foot { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 12px 22px; border-top: 1px solid rgb(var(--border-subtle)); font-size: 11px; opacity: .6; color: inherit; text-decoration: none; }
.pnl-dr-foot img { height: 13px; width: auto; }
/* título no meio do espaço que sobra (encolhe com "…" em vez de encostar nos botões) */
html.has-tbtitle header.fixed { grid-template-columns: max-content minmax(0, 1fr) max-content !important; }
html.has-tbtitle .tb-title { max-width: none !important; justify-self: stretch; }
html.has-pnldrawer header.fixed #domainLabel { display: none !important; }
.tb-title, .tb-title h1, .tb-title h2, .tb-title p { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
.tb-title h1, .tb-title h2 { display: block !important; width: 100%; }
/* a logo não aparece mais no topo (o título fica no lugar) — escondida já no CSS, sem esperar o JS */
header.fixed a:has(> img[src="/assets/logo.png"]), header.fixed img[src="/assets/logo.png"] { display: none !important; }
.pnl-dr-sep { height: 1px; background: rgb(var(--border-subtle)); margin: 8px 4px; }

/* barra de baixo no jeito do celular (◁ ○ ≡) */
@media (max-width: 767px) {
  .tool-bottomnav.sysnav { grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); padding: 4px 24px calc(4px + env(safe-area-inset-bottom)); }
  .tool-bottomnav.sysnav > * { height: 48px; padding: 0; justify-content: center; border-radius: 14px; }
  .tool-bottomnav.sysnav .material-symbols-outlined { font-size: 24px !important; width: auto !important; height: auto !important; background: none !important; color: rgb(var(--on-surface)); font-variation-settings: 'FILL' 0, 'wght' 400 !important; }
  .tool-bottomnav.sysnav > *:active { background: rgb(var(--surface-container-high)); }
  .tool-bottomnav.sysnav .active .material-symbols-outlined { color: rgb(var(--primary)); }
  html.has-bottomnav body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
}
.pnl-dr-logo { display: flex; align-items: center; max-width: 100%; min-width: 0; }
.pnl-dr-logo img { height: 42px !important; width: auto !important; max-width: 100% !important; object-fit: contain; }
/* interruptor de tema flutuante (telas sem topo padrão) fica acima da barra de baixo, sem tampar o ≡ */
@media (max-width: 767px) { html.has-bottomnav .tt-wrap.tt-float { bottom: calc(72px + env(safe-area-inset-bottom)) !important; } }


/* menu fixo à esquerda no computador (nav.js: html.pnl-side-on) */
.pnl-dr-top { display: flex; align-items: center; border-bottom: 1px solid rgb(var(--border-subtle)); min-height: 74px; }
.pnl-dr-top .pnl-dr-brand { border-bottom: 0; flex: 1; min-width: 0; }
.pnl-dr-hide { display: none; width: 36px; height: 36px; margin-right: 10px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: rgb(var(--on-surface-variant)); place-items: center; flex: 0 0 auto; }
.pnl-dr-hide:hover { background: rgb(var(--surface-container-low)); }
@media (min-width: 1024px) {
  html.pnl-side-on .pnl-dr, html.pnl-side-on .pnl-dr[hidden] { display: block !important; position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: 260px; z-index: 60; }
  html.pnl-side-on .pnl-dr-bg { display: none; }
  html.pnl-side-on .pnl-dr-panel { transform: none !important; width: 260px; max-width: none; box-shadow: none; border-right: 1px solid rgb(var(--border-subtle)); transition: none; }
  html.pnl-side-on .pnl-dr-hide { display: grid; }
  html.pnl-side-on body { padding-left: 260px; }
  html.pnl-side-on header.fixed { left: 260px !important; width: auto !important; right: 0; }
  /* telas de Páginas (Páginas/Editor/Formulários) tinham menu lateral próprio: vira as abas de cima */
  html.pnl-side-on nav.hidden.md\:flex.fixed { display: none !important; }
  html.pnl-side-on main.md\:pl-\[240px\] { padding-left: 32px !important; }
  html.pnl-side-on main > div.md\:hidden:first-child { display: flex !important; margin-left: 0; }
}

/* troca de empresa no ☰ (nav.js empresaSwitcherHtml) */
.pnl-emp { padding: 10px 12px 0; }
.pnl-emp-cur { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgb(var(--border-subtle)); background: rgb(var(--surface-container-low)); color: rgb(var(--on-surface)); cursor: pointer; text-align: left; }
.pnl-emp-cur .material-symbols-outlined { font-size: 20px; color: rgb(var(--primary)); }
.pnl-emp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pnl-emp-txt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgb(var(--on-surface-variant)); }
.pnl-emp-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pnl-emp-list { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 12px; border: 1px solid rgb(var(--border-subtle)); }
.pnl-emp-list[hidden] { display: none; }
.pnl-emp-list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; background: none; border-radius: 9px; cursor: pointer; color: rgb(var(--on-surface)); text-align: left; }
.pnl-emp-list button:hover:not(:disabled) { background: rgb(var(--surface-container-low)); }
.pnl-emp-list button.on { background: rgb(var(--primary-container) / .14); cursor: default; }
.pnl-emp-ini { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgb(var(--surface-container-high)); color: rgb(var(--on-surface-variant)); flex: 0 0 auto; }
.pnl-emp-n { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; }
.pnl-emp-n small { font-size: 11px; font-weight: 400; color: rgb(var(--on-surface-variant)); }
.pnl-emp-list .material-symbols-outlined { color: rgb(var(--primary)); font-size: 18px; }

/* (2026-10-12) Topo padronizado: sem ☰ quando o menu da esquerda está aberto (ele tem o próprio botão de
   esconder); o ☰ só volta quando o menu foi escondido. No celular quem abre o menu é a barra de baixo.
   A seta de voltar ganha o texto "Voltar". */
html.pnl-side-on .pnl-menu-btn { display: none !important; }
@media (max-width: 767px) { html.has-bottomnav .pnl-menu-btn { display: none !important; } }
html.has-pnldrawer header.fixed a[title="Voltar"] { width: auto !important; padding: 0 12px 0 8px; gap: 6px; }
.pnl-back-txt { font-size: 14px; font-weight: 600; line-height: 1; }