/* ==========================================================================
   Digiestoque — Interface 3.0 · painel do cliente (Fase 1: moldura)
   docs/interface-v3/fase-0/arquitetura-v3.md · Design System: docs/interface-v3/design-system/

   Só chega à página quando o interruptor visual marca <html data-ui="v3"> (lib/panelUi.js).
   Sem isso, nenhum byte daqui é carregado: V1 e V2 ficam intactos. Toda regra tem o
   prefixo html[data-ui="v3"] — nunca vaza para o Super Admin nem para as outras aparências.
   Os tokens da seção 1 são cópia fiel de docs/interface-v3/design-system/tokens.css
   (test/interfaceV3Contratos.test.js confere que continuam iguais).
   ========================================================================== */

/* ---- Geist (servida pelo próprio site, OFL — ver /assets/fonts/GEIST-LICENSE.txt) ---- */
@font-face {
  font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(/assets/fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. Tokens do Design System 3.0
   ========================================================================== */
html[data-ui="v3"] {
  color-scheme: light;

  /* ---- Superfícies ---- */
  --cor-canvas: #F3F5F8;          /* fundo do app e da sidebar */
  --cor-superficie: #FFFFFF;      /* folha de conteúdo, cards, menus */
  --cor-superficie-2: #F8FAFC;    /* cabeçalho de tabela, áreas recuadas */
  --cor-superficie-3: #EEF1F5;    /* hover de item, trilho de progresso */
  --cor-sobreposicao: rgba(14, 22, 38, .42); /* fundo de diálogo e gaveta */

  /* ---- Bordas ---- */
  --cor-borda: #E4E8EE;           /* divisórias e contorno de card */
  --cor-borda-forte: #D3D9E2;     /* botão secundário, card em hover */
  --cor-borda-campo: #858E9D;     /* contorno de campo: 3:1 sobre branco */

  /* ---- Texto ---- */
  --cor-texto: #14171D;           /* 17,9:1 */
  --cor-texto-2: #4A5261;         /* secundário, 7,9:1 */
  --cor-texto-3: #687082;         /* apoio, 5,0:1 (4,5:1 sobre o canvas) */
  --cor-texto-inverso: #FFFFFF;

  /* ---- Marca ---- */
  --cor-marca: #005BC0;           /* ação principal, links, foco */
  --cor-marca-hover: #004EA3;
  --cor-marca-ativo: #00418A;
  --cor-marca-suave: #EDF3FE;     /* fundo de seleção e de destaque */
  --cor-marca-suave-2: #DCE8FD;
  --cor-marca-texto: #005BC0;     /* link sobre superfície */
  --cor-marca-detalhe: #8FBAFF;   /* miolo do símbolo, detalhes sobre azul */

  /* ---- Estados (texto / fundo / ponto) ---- */
  --cor-sucesso: #14713A;   --cor-sucesso-fundo: #EAF6EE;   --cor-sucesso-ponto: #1E9E57;
  --cor-aviso: #8A4A00;     --cor-aviso-fundo: #FFF4DF;     --cor-aviso-ponto: #C27C00;
  --cor-perigo: #B3261E;    --cor-perigo-fundo: #FDEEEC;    --cor-perigo-ponto: #DC3B2F;
  --cor-info: #0A4FA3;      --cor-info-fundo: #EDF3FE;      --cor-info-ponto: #005BC0;
  --cor-neutro: #4A5261;    --cor-neutro-fundo: #EFF2F5;    --cor-neutro-ponto: #858E9D;
  --cor-perigo-acao: #C42B21;     /* botão destrutivo (texto branco 5,6:1) */
  --cor-perigo-acao-hover: #A8231B;

  /* ---- Tipografia ---- */
  --fonte: 'Geist Variable', 'Geist', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fonte-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala fechada: 7 tamanhos, mínimo 12 px */
  --fs-1: 12px;   --lh-1: 16px;   /* legenda, contagem, atalho de teclado */
  --fs-2: 13px;   --lh-2: 18px;   /* rótulo, metadado, item de menu compacto */
  --fs-3: 14px;   --lh-3: 20px;   /* corpo da interface (padrão) */
  --fs-4: 16px;   --lh-4: 24px;   /* corpo de leitura, campo no celular */
  --fs-5: 18px;   --lh-5: 26px;   /* título de card */
  --fs-6: 24px;   --lh-6: 30px;   /* título de página */
  --fs-7: 32px;   --lh-7: 36px;   /* número de indicador */

  --peso-normal: 400;
  --peso-medio: 500;      /* rótulos, navegação, botões */
  --peso-forte: 600;      /* títulos e números */

  --espaco-letra-titulo: -0.02em;
  --espaco-letra-numero: -0.03em;

  /* ---- Espaço (base 4) ---- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;

  /* ---- Cantos (por hierarquia) ---- */
  --r-1: 6px;     /* caixa de seleção, atalho de teclado, miniatura pequena */
  --r-2: 8px;     /* botão, campo, item de menu e de navegação */
  --r-3: 12px;    /* card, menu suspenso, notificação */
  --r-4: 16px;    /* folha de conteúdo, diálogo */
  --r-total: 999px; /* selo, avatar */

  /* ---- Sombras (só elementos que flutuam) ---- */
  --sombra-1: 0 1px 2px rgba(15, 23, 42, .06);                                   /* botão secundário, item ativo */
  --sombra-2: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -6px rgba(15, 23, 42, .12); /* menu, notificação */
  --sombra-3: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 56px -16px rgba(15, 23, 42, .24); /* diálogo, gaveta */
  --sombra-folha: 0 0 0 1px var(--cor-borda), 0 1px 3px rgba(15, 23, 42, .04);
  --sombra-marca: 0 6px 16px -6px rgba(0, 91, 192, .55);                         /* ação central da barra inferior */

  /* ---- Notificação (toast escuro sobre o claro) ---- */
  --cor-notificacao-fundo: #14171D;
  --cor-notificacao-texto: #FFFFFF;
  --cor-notificacao-sucesso: #6FD49A;
  --cor-notificacao-erro: #FF8A80;
  --cor-notificacao-hover: rgba(255, 255, 255, .12);

  /* ---- Foco ---- */
  --anel-foco: 0 0 0 2px var(--cor-superficie), 0 0 0 4px var(--cor-marca);

  /* ---- Controles ---- */
  --altura-controle: 36px;
  --altura-controle-p: 30px;
  --altura-controle-g: 44px;
  --alvo-toque: 44px;

  /* ---- Layout ---- */
  --largura-sidebar: 248px;
  --largura-conteudo: 1200px;
  --altura-cabecalho: 56px;
  --altura-barra-inferior: 64px;
  /* pontos de quebra (só referência; CSS não lê variável em @media):
     celular < 600 · tablet 600–959 · desktop ≥ 960 · amplo ≥ 1280 */

  /* ---- Movimento ---- */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --curva: cubic-bezier(.2, .7, .3, 1);

  /* ---- Camadas ---- */
  --z-cabecalho: 20;
  --z-gaveta: 40;
  --z-menu: 50;
  --z-dialogo: 60;
  --z-notificacao: 70;
}

/* Tema escuro preparado (sem controle visível nesta etapa). */
html[data-ui="v3"][data-theme="dark"] {
  color-scheme: dark;
  --cor-canvas: #0A0F1B;
  --cor-superficie: #101727;
  --cor-superficie-2: #141C2E;
  --cor-superficie-3: #1B2538;
  --cor-sobreposicao: rgba(3, 6, 14, .66);
  --cor-borda: #222C40;
  --cor-borda-forte: #2E3A52;
  --cor-borda-campo: #5B6880;
  --cor-texto: #E7EBF2;
  --cor-texto-2: #A9B2C1;
  --cor-texto-3: #8690A2;
  --cor-marca: #2A72D6;
  --cor-marca-hover: #1F63C2;
  --cor-marca-ativo: #1A56AB;
  --cor-marca-suave: #14264A;
  --cor-marca-suave-2: #1A3160;
  --cor-marca-texto: #7FB0FF;
  --cor-sucesso: #6FD49A;  --cor-sucesso-fundo: #10291D;  --cor-sucesso-ponto: #3FBF76;
  --cor-aviso: #F2B85B;    --cor-aviso-fundo: #2E2210;    --cor-aviso-ponto: #E6A23C;
  --cor-perigo: #FF8A80;   --cor-perigo-fundo: #33171A;   --cor-perigo-ponto: #F0645A;
  --cor-info: #8FBAFF;     --cor-info-fundo: #14264A;     --cor-info-ponto: #5B9BFF;
  --cor-neutro: #B4BCC9;   --cor-neutro-fundo: #1B2436;   --cor-neutro-ponto: #6B7790;
  --cor-perigo-acao: #D23A30;
  --cor-perigo-acao-hover: #E04A40;
  --sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra-2: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --sombra-3: 0 24px 56px -16px rgba(0, 0, 0, .7);
  --sombra-folha: 0 0 0 1px var(--cor-borda);
  --cor-notificacao-fundo: #1B2538;
  --cor-notificacao-texto: #E7EBF2;
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui="v3"] { --dur-1: 0ms; --dur-2: 0ms; }
}

/* ==========================================================================
   2. Ponte com o CSS atual das telas (só dentro da moldura do cliente)
   As telas ainda não migradas continuam com o próprio CSS; aqui só entram a fonte,
   o fundo e o anel de foco da 3.0. Cada tela ganha a pele completa na fase dela.
   ========================================================================== */
html[data-ui="v3"] { background: var(--cor-canvas); }
html[data-ui="v3"] body.adm {
  --font-sans: var(--fonte);
  --bg-page: var(--cor-canvas);
  --bg-header: var(--cor-superficie);
  --focus-ring: var(--anel-foco);
  font-family: var(--fonte);
  background: var(--cor-canvas);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   3. Moldura — mesma estrutura do shell.js (ids e classes adm-* intactos),
   desenho do Design System 3.0 (docs/interface-v3/design-system/moldura.css).
   Celular < 600: gaveta + barra inferior · Tablet 600–959: trilho de ícones ·
   Desktop ≥ 960: sidebar no canvas + folha branca recortada.
   ========================================================================== */

/* ---------- Sidebar ---------- */
html[data-ui="v3"] .adm-sidebar {
  background: var(--cor-canvas); color: var(--cor-texto-2); border-right: 0;
  padding: var(--e-4) var(--e-3); gap: 0;
}
html[data-ui="v3"] .adm-brand {
  min-height: 36px; height: 36px; gap: 10px; padding: 0 var(--e-2); margin-bottom: var(--e-5);
  border-bottom: 0; border-radius: var(--r-2); color: var(--cor-texto); flex: none;
}
html[data-ui="v3"] .adm-brand:hover { text-decoration: none; }
html[data-ui="v3"] .adm-brand:focus-visible { outline: none; box-shadow: var(--anel-foco); }
/* Símbolo "D" da marca (docs/interface-v3/design-system/marca/simbolo.svg) */
html[data-ui="v3"] .adm-logo,
html[data-ui="v3"] .adm-logo:empty {
  display: block; width: 28px; height: 28px; flex: none; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='9' fill='%23005BC0'/%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M8.5 7h7.5a9 9 0 0 1 0 18H8.5V7Zm4.5 4.5v9h3a4.5 4.5 0 0 0 0-9h-3Z'/%3E%3Crect x='15' y='14.4' width='3.2' height='3.2' rx='.9' fill='%238FBAFF'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-ui="v3"] .adm-brand-name.adm-wordmark { font-size: 18px; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--cor-texto); }
html[data-ui="v3"] .adm-wordmark__digi { color: var(--cor-marca-texto); }

/* ---------- Navegação ---------- */
html[data-ui="v3"] .adm-nav { padding: 0; gap: var(--e-5); scrollbar-color: var(--cor-borda-forte) transparent; }
html[data-ui="v3"] .adm-nav::-webkit-scrollbar-thumb { background: var(--cor-borda-forte); }
html[data-ui="v3"] .adm-nav-group { gap: 2px; }
html[data-ui="v3"] .adm-nav-group + .adm-nav-group { margin-top: 0; }
html[data-ui="v3"] .adm-nav-title {
  display: block; padding: 0 var(--e-3) var(--e-1); font-size: var(--fs-1); line-height: var(--lh-1);
  font-weight: var(--peso-medio); letter-spacing: 0; text-transform: none; color: var(--cor-texto-3); cursor: default;
}
/* grupo principal e rodapé sem título, como no protótipo aprovado */
html[data-ui="v3"] .adm-nav-group[data-group="Principal"] .adm-nav-title,
html[data-ui="v3"] .adm-nav-group[data-group="Ajuda e configurações"] .adm-nav-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
html[data-ui="v3"] .adm-nav-group[data-group="Ajuda e configurações"] { margin-top: auto; padding-top: var(--e-6); }
html[data-ui="v3"] .adm-nav-items { max-height: none; overflow: visible; gap: 2px; }
html[data-ui="v3"] .adm-nav-item {
  height: 36px; gap: var(--e-3); padding: 0 var(--e-3); border-radius: var(--r-2);
  color: var(--cor-texto-2); font-size: var(--fs-3); font-weight: var(--peso-medio); letter-spacing: 0;
  transition: background var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
}
html[data-ui="v3"] .adm-nav-item svg { width: 18px; height: 18px; opacity: 1; color: var(--cor-texto-3); transition: color var(--dur-1) var(--curva); }
html[data-ui="v3"] .adm-nav-item:hover { background: var(--cor-superficie-3); color: var(--cor-texto); text-decoration: none; }
html[data-ui="v3"] .adm-nav-item:hover svg { color: var(--cor-texto-2); }
html[data-ui="v3"] .adm-nav-item.active { background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-1), 0 0 0 1px var(--cor-borda); }
html[data-ui="v3"] .adm-nav-item.active svg { color: var(--cor-marca); }
html[data-ui="v3"] .adm-nav-item.active::before { display: none; }
html[data-ui="v3"] .adm-nav-item:focus-visible { outline: none; box-shadow: var(--anel-foco); }
html[data-ui="v3"] .adm-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html[data-ui="v3"] .adm-soon { font-size: var(--fs-1); font-weight: var(--peso-medio); letter-spacing: 0; text-transform: none; background: var(--cor-neutro-fundo); color: var(--cor-neutro); }
/* estado ao lado do item (Meu site: No ar / Rascunho; WhatsApp: Conectado / Atenção) */
html[data-ui="v3"] .adm-nav-estado { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: var(--fs-1); font-weight: var(--peso-normal); color: var(--cor-texto-3); }
html[data-ui="v3"] .adm-nav-estado[hidden] { display: none; }
html[data-ui="v3"] .adm-nav-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--cor-neutro-ponto); }
html[data-ui="v3"] .adm-nav-estado[data-estado="ok"]::before { background: var(--cor-sucesso-ponto); }
html[data-ui="v3"] .adm-nav-estado[data-estado="aviso"]::before { background: var(--cor-aviso-ponto); }
html[data-ui="v3"] .adm-nav-estado[data-estado="erro"]::before { background: var(--cor-perigo-ponto); }
/* recolher o menu não existe na 3.0 (o tablet já usa o trilho de ícones) */
html[data-ui="v3"] .adm-collapse { display: none; }

/* ---------- Folha de conteúdo e cabeçalho ---------- */
html[data-ui="v3"] .adm-main { background: var(--cor-superficie); }
html[data-ui="v3"] .adm-topbar {
  height: var(--altura-cabecalho); gap: var(--e-3); padding: 0 var(--e-4) 0 var(--e-6);
  background: var(--cor-superficie);
  background: color-mix(in srgb, var(--cor-superficie) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--cor-borda);
}
html[data-ui="v3"] .adm-crumbs { display: none; font-size: var(--fs-4); color: var(--cor-texto); }
html[data-ui="v3"] .adm-crumbs .cur { font-weight: var(--peso-forte); letter-spacing: var(--espaco-letra-titulo); color: var(--cor-texto); }
html[data-ui="v3"] .adm-burger { width: var(--alvo-toque); height: var(--alvo-toque); border-radius: var(--r-2); color: var(--cor-texto-2); }
html[data-ui="v3"] .adm-burger:hover { background: var(--cor-superficie-3); color: var(--cor-texto); }
html[data-ui="v3"] .adm-burger:focus-visible,
html[data-ui="v3"] .adm-icon-btn:focus-visible,
html[data-ui="v3"] .adm-kebab-btn:focus-visible { outline: none; box-shadow: var(--anel-foco); }

/* "Buscar ou ir para…" (abre a paleta de comandos) */
html[data-ui="v3"] .adm-cmd {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--e-2);
  width: min(340px, 100%); height: 34px; padding: 0 6px 0 var(--e-3); cursor: pointer;
  border: 1px solid var(--cor-borda); border-radius: var(--r-2); background: var(--cor-superficie-2);
  color: var(--cor-texto-3); font-size: var(--fs-3); font-family: var(--fonte);
  transition: border-color var(--dur-1) var(--curva), background var(--dur-1) var(--curva);
}
html[data-ui="v3"] .adm-cmd:hover { border-color: var(--cor-borda-forte); background: var(--cor-superficie); }
html[data-ui="v3"] .adm-cmd:focus-visible { box-shadow: var(--anel-foco); }
html[data-ui="v3"] .adm-cmd svg { width: 16px; height: 16px; flex: none; }
html[data-ui="v3"] .adm-cmd-txt { flex: 1; }
html[data-ui="v3"] .adm-tecla {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--cor-borda); border-radius: var(--r-1); background: var(--cor-superficie);
  font: var(--peso-medio) var(--fs-1)/1 var(--fonte); color: var(--cor-texto-3);
}

/* Ações do cabeçalho: ações da página (preservadas), tema, uso de IA e conta */
html[data-ui="v3"] .adm-topbar-actions { gap: var(--e-2); }
html[data-ui="v3"] .adm-topbar-actions #userLabel,
html[data-ui="v3"] .adm-topbar-actions #logoutBtn,
html[data-ui="v3"] .adm-topbar-actions .right [data-theme-toggle],
html[data-ui="v3"] .adm-topbar-actions .adm-kebab-menu [data-theme-toggle] { display: none; }
html[data-ui="v3"] .adm-icon-btn { width: 36px; height: 36px; border-radius: var(--r-2); border-color: transparent; background: transparent; color: var(--cor-texto-2); }
html[data-ui="v3"] .adm-icon-btn:hover { background: var(--cor-superficie-3); border-color: transparent; color: var(--cor-texto); }
html[data-ui="v3"] .adm-avatar { width: 32px; height: 32px; background: var(--cor-marca-suave); color: var(--cor-marca-texto); border-color: var(--cor-borda); font-size: var(--fs-1); font-weight: var(--peso-forte); }
/* toque: no celular a área clicável do avatar (anel de uso) vai a 44 px, sem mudar o desenho */
@media (max-width: 599px) {
  html[data-ui="v3"] .adm-avatar.has-usage::after { content: ''; position: absolute; inset: -6px; border-radius: var(--r-total); }
}
html[data-ui="v3"] .adm-role-badge { font-size: var(--fs-1); font-weight: var(--peso-medio); color: var(--cor-aviso); background: var(--cor-aviso-fundo); border-color: transparent; }

/* Ações antigas que cada página empurrava para o cabeçalho (Ver site, Depoimentos, atualizar…): na 3.0
   cada tela tem as próprias ações no cabeçalho da página. Os nós continuam no DOM (ids e listeners da V1). */
html[data-ui="v3"] .adm-topbar-actions > .right { display: none; }

/* Conta (menu do perfil) */
html[data-ui="v3"] .adm-account { position: relative; }
html[data-ui="v3"] .adm-account-btn {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: var(--e-2); height: 44px; padding: 0 var(--e-2);
  border-radius: var(--r-2); cursor: pointer; font-family: var(--fonte); transition: background var(--dur-1) var(--curva);
}
html[data-ui="v3"] .adm-account-btn:hover,
html[data-ui="v3"] .adm-account-btn[aria-expanded="true"] { background: var(--cor-superficie-3); }
html[data-ui="v3"] .adm-account-btn:focus-visible { box-shadow: var(--anel-foco); }
html[data-ui="v3"] .adm-account-av { display: none; } /* o avatar é o #admAvatar ao lado (com o anel de uso de IA) */
html[data-ui="v3"] .adm-account-txt { display: grid; text-align: left; line-height: 1.2; min-width: 0; }
html[data-ui="v3"] .adm-account-txt strong { font-size: var(--fs-2); font-weight: var(--peso-forte); color: var(--cor-texto); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="v3"] .adm-account-txt small { font-size: var(--fs-1); color: var(--cor-texto-3); }
html[data-ui="v3"] .adm-account-caret { width: 16px; height: 16px; flex: none; color: var(--cor-texto-3); }
html[data-ui="v3"] .adm-account-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); width: 260px; padding: var(--e-1);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--r-3); box-shadow: var(--sombra-2);
}
html[data-ui="v3"] .adm-account-menu[hidden] { display: none; }
html[data-ui="v3"] .adm-account-items { display: grid; gap: 2px; }
html[data-ui="v3"] .adm-account-cab { display: flex; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-3) var(--e-3); margin-bottom: var(--e-1); border-bottom: 1px solid var(--cor-borda); }
html[data-ui="v3"] .adm-account-cab-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-2); background: var(--cor-marca-suave); color: var(--cor-marca-texto); font-size: var(--fs-2); font-weight: var(--peso-forte); }
html[data-ui="v3"] .adm-account-cab-txt { display: grid; min-width: 0; line-height: 1.3; }
html[data-ui="v3"] .adm-account-cab-txt strong { font-size: var(--fs-3); font-weight: var(--peso-forte); color: var(--cor-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="v3"] .adm-account-cab-txt small { font-size: var(--fs-1); color: var(--cor-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui="v3"] .adm-account-tema { width: 100%; box-sizing: border-box; margin-top: var(--e-1); border: 0; border-top: 1px solid var(--cor-borda); border-radius: 0; background: none; font: inherit; font-size: var(--fs-3); cursor: pointer; text-align: left; }
html[data-ui="v3"] .adm-account-tema[hidden] { display: none; }
html[data-ui="v3"] .adm-account-tema-valor { margin-left: auto; font-size: var(--fs-2); color: var(--cor-texto-3); }
html[data-ui="v3"] .adm-account-tema + .adm-account-logout { margin-top: 0; border-top: 0; }
html[data-ui="v3"] .adm-account-menu .adm-nav-item { width: 100%; box-sizing: border-box; }
html[data-ui="v3"] .adm-account-menu .adm-nav-item.active { box-shadow: none; background: var(--cor-marca-suave); color: var(--cor-marca-texto); }
html[data-ui="v3"] .adm-account-logout {
  margin-top: var(--e-1); padding-top: 0; border: 0; border-top: 1px solid var(--cor-borda); border-radius: 0 0 var(--r-2) var(--r-2);
  background: none; font: inherit; font-size: var(--fs-3); cursor: pointer; text-align: left;
}

/* ---------- Paleta de comandos ---------- */
html[data-ui="v3"] .adm-paleta {
  width: min(560px, calc(100vw - 24px)); max-width: none; margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--cor-borda); border-radius: var(--r-4); background: var(--cor-superficie); color: var(--cor-texto);
  box-shadow: var(--sombra-3); font-family: var(--fonte);
}
html[data-ui="v3"] .adm-paleta::backdrop { background: var(--cor-sobreposicao); }
html[data-ui="v3"] .adm-paleta-busca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-4); border-bottom: 1px solid var(--cor-borda); }
html[data-ui="v3"] .adm-paleta-busca svg { width: 18px; height: 18px; color: var(--cor-texto-3); flex: none; }
html[data-ui="v3"] .adm-paleta-busca input { flex: 1; height: 52px; border: 0; outline: 0; background: transparent; color: var(--cor-texto); font: var(--fs-4) var(--fonte); }
/* o foco é a própria paleta aberta: o campo não ganha o anel nem a borda do CSS das telas */
html[data-ui="v3"] .adm-paleta .adm-paleta-busca input:is(:focus, :focus-visible, :hover) { border: 0; outline: 0; box-shadow: none; padding: 0; min-height: 0; border-radius: 0; background: transparent; }
html[data-ui="v3"] .adm-paleta-lista { list-style: none; margin: 0; padding: var(--e-2); max-height: min(380px, 50dvh); overflow-y: auto; }
html[data-ui="v3"] .adm-paleta-grupo { padding: var(--e-2) var(--e-3) var(--e-1); font-size: var(--fs-1); font-weight: var(--peso-medio); color: var(--cor-texto-3); }
html[data-ui="v3"] .adm-paleta-item { display: flex; align-items: center; gap: var(--e-3); min-height: 40px; padding: 0 var(--e-3); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-3); }
html[data-ui="v3"] .adm-paleta-item svg { width: 16px; height: 16px; color: var(--cor-texto-3); flex: none; }
html[data-ui="v3"] .adm-paleta-item[aria-selected="true"] { background: var(--cor-marca-suave); color: var(--cor-marca-texto); }
html[data-ui="v3"] .adm-paleta-item[aria-selected="true"] svg { color: var(--cor-marca); }
html[data-ui="v3"] .adm-paleta-vazio { padding: var(--e-6); text-align: center; color: var(--cor-texto-3); font-size: var(--fs-3); }
html[data-ui="v3"] .adm-paleta-rodape { display: flex; gap: var(--e-4); padding: var(--e-2) var(--e-4); border-top: 1px solid var(--cor-borda); font-size: var(--fs-1); color: var(--cor-texto-3); }

/* ---------- Barra inferior (só celular) ---------- */
html[data-ui="v3"] .adm-bottomnav { display: none; }

/* ---------- Avisos da moldura ---------- */
html[data-ui="v3"] .adm-toast { background: var(--cor-notificacao-fundo); color: var(--cor-notificacao-texto); border-radius: var(--r-3); font-family: var(--fonte); font-size: var(--fs-3); box-shadow: var(--sombra-2); }
html[data-ui="v3"] .adm-toast.error { background: var(--cor-perigo-acao); }

/* ================= Desktop e tablet ================= */
@media (min-width: 600px) {
  html[data-ui="v3"] body.adm { display: grid; grid-template-columns: var(--largura-sidebar) minmax(0, 1fr); min-height: 100dvh; }
  html[data-ui="v3"] .adm-sidebar { position: sticky; top: 0; height: 100dvh; width: auto; transform: none; box-shadow: none; visibility: visible; }
  html[data-ui="v3"] body.tem-ctx-admin .adm-sidebar { top: 40px; height: calc(100dvh - 40px); }
  html[data-ui="v3"] .adm-burger { display: none; }
  html[data-ui="v3"] .adm-backdrop { display: none !important; }
  html[data-ui="v3"] .adm-main { margin: var(--e-2) var(--e-2) var(--e-2) 0; min-height: calc(100dvh - 2 * var(--e-2)); border-radius: var(--r-4); box-shadow: var(--sombra-folha); }
  html[data-ui="v3"] .adm-topbar { top: var(--e-2); border-radius: var(--r-4) var(--r-4) 0 0; }
  /* cobre a faixa de canvas acima do cabeçalho fixo: o conteúdo não aparece passando por ela */
  html[data-ui="v3"] .adm-topbar::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: var(--e-2); background: var(--cor-canvas); }
}

/* ================= Tablet: trilho de ícones ================= */
@media (min-width: 600px) and (max-width: 959px) {
  html[data-ui="v3"] body.adm { grid-template-columns: 72px minmax(0, 1fr); }
  html[data-ui="v3"] .adm-sidebar { padding-inline: var(--e-3); align-items: center; }
  html[data-ui="v3"] .adm-brand { padding: 0; justify-content: center; width: 44px; }
  html[data-ui="v3"] .adm-brand-name, html[data-ui="v3"] .adm-nav-label, html[data-ui="v3"] .adm-soon { display: none; }
  html[data-ui="v3"] .adm-nav-estado { position: absolute; top: 8px; right: 8px; font-size: 0; gap: 0; }
  html[data-ui="v3"] .adm-nav-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
  html[data-ui="v3"] .adm-nav { gap: var(--e-3); align-items: center; }
  html[data-ui="v3"] .adm-nav-group + .adm-nav-group { padding-top: var(--e-3); border-top: 1px solid var(--cor-borda); }
  html[data-ui="v3"] .adm-nav-group[data-group="Ajuda e configurações"] { padding-top: var(--e-3); }
  html[data-ui="v3"] .adm-nav-item { width: 44px; height: 44px; justify-content: center; padding: 0; }
  html[data-ui="v3"] .adm-nav-item::after {
    content: attr(title); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    padding: 5px 9px; border-radius: var(--r-1); background: var(--cor-notificacao-fundo); color: var(--cor-notificacao-texto);
    font-size: var(--fs-1); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--curva); z-index: var(--z-menu);
  }
  html[data-ui="v3"] .adm-nav-item:hover::after, html[data-ui="v3"] .adm-nav-item:focus-visible::after { opacity: 1; }
  html[data-ui="v3"] .adm-account-txt { display: none; }
}

/* ================= Celular: gaveta + barra inferior ================= */
@media (max-width: 599px) {
  html[data-ui="v3"] body.adm { display: block; background: var(--cor-superficie); padding-bottom: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom)); }
  html[data-ui="v3"] .adm-sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); height: 100dvh; background: var(--cor-superficie);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--dur-2) var(--curva), visibility 0s linear var(--dur-2);
  }
  html[data-ui="v3"] .adm-sidebar.open { transform: none; visibility: visible; box-shadow: var(--sombra-3); transition: transform var(--dur-2) var(--curva), visibility 0s; }
  html[data-ui="v3"] .adm-backdrop { background: var(--cor-sobreposicao); }
  html[data-ui="v3"] .adm-nav-item { height: 44px; }
  html[data-ui="v3"] .adm-nav-item.active { background: var(--cor-marca-suave); box-shadow: none; color: var(--cor-marca-texto); }
  html[data-ui="v3"] .adm-topbar { top: 0; height: 56px; padding: 0 var(--e-2); }
  html[data-ui="v3"] .adm-crumbs { display: flex; flex: 1; min-width: 0; }
  html[data-ui="v3"] .adm-cmd { order: 2; width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
  html[data-ui="v3"] .adm-cmd-txt, html[data-ui="v3"] .adm-cmd .adm-tecla { display: none; }
  html[data-ui="v3"] .adm-topbar-actions { order: 3; margin-left: 0; }
  html[data-ui="v3"] .adm-account-txt { display: none; }
  html[data-ui="v3"] .adm-account-btn { min-width: var(--alvo-toque); justify-content: center; padding: 0; }
  html[data-ui="v3"] .adm-account-menu { position: fixed; left: var(--e-2); right: var(--e-2); top: 60px; width: auto; }
  html[data-ui="v3"] .adm-paleta { margin-top: var(--e-3); }

  html[data-ui="v3"] .adm-bottomnav {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(var(--altura-barra-inferior) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--cor-superficie);
    background: color-mix(in srgb, var(--cor-superficie) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--cor-borda);
  }
  html[data-ui="v3"] .adm-bn-item {
    display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; border: 0; background: none; cursor: pointer;
    font: var(--peso-medio) var(--fs-1)/var(--lh-1) var(--fonte); color: var(--cor-texto-3); text-decoration: none;
  }
  html[data-ui="v3"] .adm-bn-item[hidden] { display: none; }
  html[data-ui="v3"] .adm-bn-item svg { width: 22px; height: 22px; }
  html[data-ui="v3"] .adm-bn-item.active { color: var(--cor-marca-texto); }
  html[data-ui="v3"] .adm-bn-item:focus-visible { outline: none; box-shadow: inset var(--anel-foco); border-radius: var(--r-2); }
  html[data-ui="v3"] body.adm-v3 .adm-setup-reminder { bottom: calc(var(--altura-barra-inferior) + var(--e-3) + env(safe-area-inset-bottom)); }
  html[data-ui="v3"] body.adm-v3 :is(.adm-toast, .ui-toasts) { bottom: calc(var(--altura-barra-inferior) + var(--e-4) + env(safe-area-inset-bottom)); }
}