/* cdm-suite · Identidade comum dos sistemas da Casa das Madeiras.
   O que precisa ser IGUAL em todos os apps: cores e fontes da marca, o fundo, a moldura
   (barra lateral, menu, usuário, gaveta do celular), a marca do app e o menu de sistemas.
   Regras: tudo começa com "cdm-" e só usa as variáveis --cdm-* daqui, para nunca
   depender do CSS de um app nem interferir nele. O miolo de cada tela é do app.
   NÃO EDITE DENTRO DE UM APP: este arquivo vem do repositório cdm-suite (veja PADRAO.md). */

:root {
  --cdm-azul: #002255;          /* azul-marinho da Casa das Madeiras: marca e ícones */
  --cdm-verde: #4FBA25;         /* detalhe verde dos ícones */
  --cdm-acento: #0a84ff;        /* azul de sistema (Apple): foco e item atual */
  --cdm-texto: #1c1c1e;
  --cdm-texto-2: #3a3a3c;
  --cdm-texto-3: #55555e;
  --cdm-fonte: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --cdm-fonte-titulo: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --cdm-vidro: blur(30px) saturate(1.7);
  --cdm-sombra-icone: 0 1px 3px rgba(0, 34, 85, .25);
  --cdm-fundo: #fbfbfd;                               /* fundo da página, sob o degradê */
  --cdm-superficie: rgba(255, 255, 255, .62);         /* cartões de vidro (barra lateral, topo) */
  --cdm-borda-vidro: rgba(255, 255, 255, .7);
  --cdm-linha: rgba(60, 60, 67, .09);                 /* filetes divisórios */
  --cdm-sombra: 0 1px 2px rgba(20, 20, 30, .05), 0 4px 10px rgba(20, 20, 30, .05);
  --cdm-sombra-grande: 0 1px 1px rgba(30, 30, 40, .03), 0 12px 30px rgba(30, 30, 45, .09);
  --cdm-raio: 24px;
  --cdm-borda-campo: rgba(60, 60, 67, .22);            /* borda de campo de formulário */
  --cdm-campo-altura: 40px;                           /* altura de campo e select */
}

/* ---------- Marca do app ----------
   <span class="cdm-marca">
     <img class="cdm-marca-ico" src="…/suite/icones/financeiro.svg" alt="">
     <span class="cdm-marca-nome"><b>Financeiro</b><small>Casa das Madeiras</small></span>
   </span>
   Na tela de login: class="cdm-marca cdm-marca-login" (empilhada e maior). */
.cdm-marca { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--cdm-azul); text-decoration: none; min-width: 0; }
.cdm-marca:hover { text-decoration: none; }
.cdm-marca-ico { width: 36px; height: 36px; display: block; flex: none; border-radius: 8.2px; box-shadow: var(--cdm-sombra-icone); }
.cdm-marca-nome { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.cdm-marca b { font-family: var(--cdm-fonte-titulo); font-size: 19px; font-weight: 600; letter-spacing: -.022em; line-height: 1; color: inherit; }
.cdm-marca small { font-family: var(--cdm-fonte); font-size: 11px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; margin-top: 3px; color: var(--cdm-texto-3); }
.cdm-marca-login { flex-direction: column; justify-content: center; gap: 0; text-align: center; }
.cdm-marca-login .cdm-marca-ico { width: 68px; height: 68px; border-radius: 15.4px; margin-bottom: 10px; }
.cdm-marca-login .cdm-marca-nome { align-items: center; }
.cdm-marca-login b { font-size: 28px; }
.cdm-marca-login small { font-size: 12px; }

/* ---------- Menu de sistemas (nove pontos) ----------
   <button type="button" class="cdm-sistemas" id="cdm-sistemas" data-app="financeiro"
     aria-haspopup="dialog" aria-expanded="false" title="Sistemas Casa das Madeiras"
     aria-label="Sistemas Casa das Madeiras"><svg>…nove círculos…</svg></button>
   + <script src="…/suite/cdm-sistemas.js"></script>. O painel é montado pelo script. */
.cdm-sistemas {
  /* zera o estilo de botão que cada app possa ter */
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; min-width: 0; min-height: 0; border: 0; box-shadow: none; filter: none; font: inherit;
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: transparent; color: var(--cdm-texto-3);
  display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s;
}
.cdm-sistemas svg { width: 18px; height: 18px; fill: currentColor; stroke: none; display: block; }
.cdm-sistemas:hover, .cdm-sistemas[aria-expanded="true"] { background: rgba(120, 120, 128, .14); color: var(--cdm-texto); }
.cdm-sistemas:focus-visible { outline: 3px solid rgba(10, 132, 255, .45); outline-offset: 2px; }

.cdm-painel {
  position: fixed; z-index: 1000; width: 272px; padding: 12px; box-sizing: border-box; border-radius: 24px;
  background: rgba(244, 246, 250, .97); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 18px 50px rgba(20, 25, 45, .2), 0 2px 6px rgba(20, 25, 45, .08);
  font-family: var(--cdm-fonte); animation: cdm-surge .14s ease-out;
}
@keyframes cdm-surge { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cdm-painel-titulo { font-size: 13px; font-weight: 600; color: var(--cdm-texto-2); padding: 2px 8px 10px; }
.cdm-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: #fff; border-radius: 18px; padding: 8px; }
.cdm-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 14px;
  color: var(--cdm-texto); text-decoration: none; font-size: 12px; font-weight: 500; line-height: 1.2;
}
.cdm-item img { width: 52px; height: 52px; display: block; border-radius: 11.8px; box-shadow: var(--cdm-sombra-icone); }
.cdm-item:hover, .cdm-item:focus-visible { background: rgba(120, 120, 128, .09); outline: none; text-decoration: none; color: var(--cdm-texto); }
.cdm-item.atual { background: rgba(10, 132, 255, .08); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .cdm-painel { animation: none; } }

/* =====================================================================
   MOLDURA (2.0) — a mesma casca em todos os apps. Celular e tablet: até 900px.
   ===================================================================== */

/* ---------- Fundo da página: degradê azul, roxo e verde, fixo ----------
   <body class="cdm-app">. Fica no body (num ::before com z-index negativo some). */
.cdm-app {
  background:
    radial-gradient(85vw 80vh at 4% -12%, rgba(10, 132, 255, .26), transparent 62%),
    radial-gradient(75vw 70vh at 98% 0%, rgba(191, 82, 222, .20), transparent 58%),
    radial-gradient(80vw 80vh at 50% 112%, rgba(48, 199, 89, .16), transparent 58%),
    var(--cdm-fundo);
  background-attachment: fixed;
}

/* ---------- Barra lateral ----------
   <aside class="cdm-lateral" id="cdm-lateral">
     <div class="cdm-lateral-topo"> marca + botão dos sistemas </div>
     <nav class="cdm-lateral-corpo"> grupos e itens do menu (rola por dentro) </nav>
     <div class="cdm-lateral-pe"> usuário (cdm-usuario), extras do app, assinatura </div>
   </aside>
   <div class="cdm-fundo-menu" hidden></div>   (o fundo escuro atrás da gaveta, no celular) */
.cdm-lateral {
  width: 236px; flex: none; box-sizing: border-box; color: var(--cdm-texto-2); font-family: var(--cdm-fonte);
  background: var(--cdm-superficie); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro);
  border: 1px solid var(--cdm-borda-vidro); border-radius: var(--cdm-raio); box-shadow: var(--cdm-sombra-grande);
  display: flex; flex-direction: column; position: sticky; top: 14px; height: calc(100vh - 28px); overflow: hidden;
}
.cdm-lateral-topo {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 18px 0 14px 10px; margin: 0 12px 8px; border-bottom: 1px solid var(--cdm-linha);
}
.cdm-lateral-corpo {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; padding: 4px 0 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.cdm-lateral-pe { flex: none; padding: 14px 20px; border-top: 1px solid var(--cdm-linha); }

/* ---------- Itens do menu ----------
   <div class="cdm-nav-grupo">Cadastros</div>
   <a class="cdm-nav-item" href="…" aria-current="page">
     <span class="cdm-nav-ico"><svg>…</svg></span><span class="cdm-nav-nome">Dashboard</span><span class="cdm-nav-cont">3</span>
   </a>
   Item aberto: aria-current="page" (ou a classe ativo). Ícones só no traço (Lucide), sem cor. */
.cdm-nav-grupo { padding: 15px 22px 5px; font-size: 11px; font-weight: 500; color: var(--cdm-texto-3); }
.cdm-lateral-corpo > .cdm-nav-grupo:first-child { padding-top: 4px; }
.cdm-nav-item {
  appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; text-align: left; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin: 0 10px; border-radius: 14px;
  color: var(--cdm-texto-2); font-size: 13px; font-weight: 500; line-height: 1.25; text-decoration: none; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.cdm-nav-item:hover { background: rgba(255, 255, 255, .6); color: var(--cdm-texto); text-decoration: none; }
.cdm-nav-item:focus-visible { outline: 3px solid rgba(10, 132, 255, .45); outline-offset: -2px; }
/* Aberto: um cartãozinho branco levantado, não uma faixa colorida */
.cdm-nav-item:is(.ativo, [aria-current="page"]) { background: rgba(255, 255, 255, .9); color: var(--cdm-texto); font-weight: 600; box-shadow: var(--cdm-sombra); }
.cdm-nav-ico { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--cdm-texto-3); }
.cdm-nav-ico svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cdm-nav-item:hover .cdm-nav-ico { color: var(--cdm-texto); }
.cdm-nav-item:is(.ativo, [aria-current="page"]) .cdm-nav-ico { color: var(--cdm-azul); }
.cdm-nav-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm-nav-cont { flex: none; min-width: 18px; padding: 1px 6px; box-sizing: border-box; border-radius: 9px; text-align: center;
  font-size: 11px; font-weight: 600; color: #fff; background: var(--cdm-acento); }
.cdm-nav-cont.alerta { background: #ff9500; }   /* algo pede ação (ex.: conta que precisa entrar de novo) */

/* ---------- Usuário (pé da barra) ----------
   <div class="cdm-usuario">
     <span class="cdm-avatar cdm-avatar-3">V</span>       (ou CdmSuite.monograma(nome, email))
     <span class="cdm-usuario-dados"><b>Vitor</b><small>Developer</small></span>
   </div> */
.cdm-usuario { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cdm-usuario-dados { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.cdm-usuario-dados b { font-size: 12px; font-weight: 500; color: var(--cdm-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm-usuario-dados small { font-size: 11px; color: var(--cdm-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm-usuario-dados small a { color: inherit; }
.cdm-usuario-dados small a:hover { color: var(--cdm-texto); }

/* Monograma no estilo dos Contatos do iPhone: a cor é a da pessoa (do email), igual em todos os apps */
.cdm-avatar {
  width: 34px; height: 34px; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  color: #fff; font-family: var(--cdm-fonte); font-size: 15px; font-weight: 600; letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .08), 0 1px 2px rgba(20, 20, 40, .18);
  background: linear-gradient(180deg, #aab0bc, #7d828e);
}
.cdm-avatar-0 { background: linear-gradient(180deg, #6aa8ff, #2f74e6); }
.cdm-avatar-1 { background: linear-gradient(180deg, #5fd07c, #22a04a); }
.cdm-avatar-2 { background: linear-gradient(180deg, #ffad4d, #ec7a0e); }
.cdm-avatar-3 { background: linear-gradient(180deg, #ff7a9a, #e33d68); }
.cdm-avatar-4 { background: linear-gradient(180deg, #c58af2, #9550d8); }
.cdm-avatar-5 { background: linear-gradient(180deg, #55cfd6, #1a9aa6); }
.cdm-avatar-6 { background: linear-gradient(180deg, #8d8cf6, #5856d6); }
.cdm-avatar-7 { background: linear-gradient(180deg, #aab0bc, #7d828e); }
.cdm-avatar-p { width: 28px; height: 28px; font-size: 12px; }   /* pequeno: listas */

/* Assinatura discreta no pé da barra: a logomarca da Casa das Madeiras
   <img class="cdm-assinatura" src="…/suite/marca/casadasmadeiras.svg" alt="Casa das Madeiras"> */
.cdm-assinatura { display: block; height: 22px; width: auto; margin: 12px auto 0; opacity: .9; }

/* ---------- Celular: botão ☰ e barra do topo ----------
   <button type="button" class="cdm-menu-btn" data-cdm-menu aria-controls="cdm-lateral" aria-expanded="false" aria-label="Abrir menu">…</button>
   Pode ir no cabeçalho do próprio app ou na barra pronta:
   <header class="cdm-barra-celular"> ☰ + <span class="cdm-barra-titulo">Dashboard</span> + ações </header>
   As duas só aparecem até 900px. */
.cdm-menu-btn, .cdm-barra-celular { display: none; }
.cdm-menu-btn {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; min-width: 0; min-height: 0; border: 0; box-shadow: none; filter: none; font: inherit;
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: none; color: var(--cdm-texto); place-items: center; cursor: pointer;
}
.cdm-menu-btn svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.cdm-menu-btn:hover { background: rgba(120, 120, 128, .12); }
.cdm-menu-btn:focus-visible { outline: 3px solid rgba(10, 132, 255, .45); outline-offset: 2px; }
.cdm-barra-titulo { flex: 1; min-width: 0; font-family: var(--cdm-fonte-titulo); font-size: 19px; font-weight: 600; letter-spacing: -.02em;
  color: var(--cdm-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm-fundo-menu { position: fixed; inset: 0; z-index: 900; background: rgba(15, 27, 45, .45); }

@media (max-width: 900px) {
  .cdm-menu-btn { display: grid; }
  .cdm-barra-celular {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 20px; font-family: var(--cdm-fonte);
    background: var(--cdm-superficie); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro);
    border: 1px solid var(--cdm-borda-vidro); box-shadow: var(--cdm-sombra-grande);
  }
  /* A barra lateral vira gaveta que entra pela esquerda; encostada na borda, só os cantos de dentro arredondam */
  .cdm-lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 950; width: min(300px, 86vw); height: 100vh; height: 100dvh;
    border-radius: 0 var(--cdm-raio) var(--cdm-raio) 0; border-left: 0;
    transform: translateX(-105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  }
  .cdm-lateral.cdm-aberta { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; background: rgba(248, 249, 252, .98); box-shadow: 0 18px 50px rgba(20, 25, 45, .25); }
  .cdm-nav-item { font-size: 15px; padding: 12px 14px; }
  @supports (padding: env(safe-area-inset-left)) { .cdm-lateral { padding-left: env(safe-area-inset-left); } }
}
/* ---------- Celular: abas no pé da tela (2.4) ----------
   Montadas pelo cdm-suite.js a partir dos itens do menu com data-cdm-aba. Cápsula de vidro solta da borda;
   a aba aberta numa pílula azul-marinho clara. Com as abas, o ☰ some (a aba "Mais" abre a gaveta).
   O app reserva o espaço de baixo com var(--cdm-abas-espaco) onde o conteúdo encosta no pé da tela. */
:root { --cdm-abas-espaco: 0px; }
.cdm-abas { display: none; }
@media (max-width: 900px) {
  body.cdm-com-abas { --cdm-abas-espaco: calc(70px + env(safe-area-inset-bottom)); }
  body.cdm-com-abas .cdm-menu-btn { display: none; }
  .cdm-abas[hidden] { display: none; }
  .cdm-abas {
    position: fixed; left: 12px; right: 12px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 45;
    display: flex; gap: 2px; max-width: 520px; margin: 0 auto; padding: 4px; border-radius: 24px;
    transition: transform .25s ease; font-family: var(--cdm-fonte);
    background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 8px 24px rgba(0, 25, 70, .14), 0 1px 4px rgba(0, 25, 70, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
  }
  .cdm-aba {
    appearance: none; -webkit-appearance: none; margin: 0; min-width: 0; min-height: 0; border: 0; box-shadow: none; font: inherit;
    position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    height: 44px; padding: 0 2px; border-radius: 20px; background: none; color: var(--cdm-texto-3); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .2s ease, transform .12s ease, height .25s ease;
  }
  .cdm-aba svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .cdm-aba-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: .005em; max-height: 12px; transition: max-height .25s ease, opacity .2s ease; }
  /* Rolando para baixo a barra encolhe (só os ícones); ao subir, volta (cdm-suite.js) */
  .cdm-abas.cdm-recolhida .cdm-aba { height: 34px; }
  .cdm-abas.cdm-recolhida .cdm-aba-nome { max-height: 0; opacity: 0; }
  .cdm-aba[aria-current="page"] { color: var(--cdm-azul); background: rgba(0, 34, 85, .09); }
  .cdm-aba[aria-current="page"] svg { stroke-width: 2.3; }
  .cdm-aba:active { transform: scale(.94); background: rgba(0, 34, 85, .06); }
  .cdm-aba:focus-visible { outline: 3px solid rgba(10, 132, 255, .45); outline-offset: -3px; }
  .cdm-aba-cont, .cdm-aba-mais[data-cdm-avisos]::after {
    position: absolute; top: 1px; left: calc(50% + 4px); min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px;
    background: var(--cdm-acento); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff;
  }
  .cdm-aba-cont.alerta, .cdm-aba-mais[data-cdm-avisos]::after { background: #ff7a00; }
  .cdm-aba-mais[data-cdm-avisos]::after { content: attr(data-cdm-avisos); }
}
@media (prefers-reduced-motion: reduce) { .cdm-lateral, .cdm-aba, .cdm-aba-nome, .cdm-abas { transition: none; } }
/* "Reduzir transparência" do sistema: superfícies sólidas, sem desfoque */
@media (prefers-reduced-transparency: reduce) {
  :root { --cdm-superficie: #ffffff; }
  .cdm-lateral, .cdm-barra-celular, .cdm-painel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =====================================================================
   NAVEGAÇÃO INTEGRADA (2.1) — faixa de sistemas, avisos e busca em todos.
   Montados pelo cdm-suite.js; o app não escreve HTML para isso.
   ===================================================================== */

/* ---------- Barra superior (2.6): início, sistemas, busca e avisos; fixa no alto de todas as telas ----------
   Montada pelo cdm-suite.js. --cdm-topo é o espaço que ela ocupa (0 sem ela): quem encosta no alto da janela desconta. */
:root { --cdm-topo: 0px; }
html.cdm-com-topo { --cdm-topo: 62px; }
html.cdm-com-topo body { padding-top: var(--cdm-topo); }
.cdm-topo {
  position: fixed; z-index: 800; top: 10px; left: 14px; right: 14px; height: 52px; box-sizing: border-box; padding: 0 8px 0 6px;
  display: flex; align-items: center; gap: 6px; font-family: var(--cdm-fonte); color: #fff;
  background: rgba(0, 34, 85, .93); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro);
  border-radius: 18px; box-shadow: 0 1px 1px rgba(0, 20, 60, .1), 0 10px 28px rgba(0, 26, 70, .22);
}
.cdm-topo a, .cdm-topo button { -webkit-tap-highlight-color: transparent; }
.cdm-topo-inicio {
  flex: none; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 10px; border-radius: 12px;
  color: #fff; text-decoration: none; transition: background .15s;
}
a.cdm-topo-inicio:hover, .cdm-topo-inicio[aria-current="page"] { background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none; }
.cdm-topo-logo { height: 30px; width: auto; display: block; }
.cdm-topo-simbolo { height: 27px; width: 27px; display: none; }
.cdm-topo-apps {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .16);
  overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.cdm-topo-apps::-webkit-scrollbar { display: none; }
.cdm-topo-app {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 7px; border-radius: 12px;
  color: rgba(255, 255, 255, .8); text-decoration: none; font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s;
}
.cdm-topo-app img { width: 26px; height: 26px; display: block; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.cdm-topo-app:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }
.cdm-topo-app[aria-current="page"] { background: rgba(255, 255, 255, .17); color: #fff; font-weight: 600; }
.cdm-topo-app[aria-current="page"] img { box-shadow: 0 0 0 1.5px #fff; }
.cdm-topo-busca, .cdm-topo-btn {
  appearance: none; -webkit-appearance: none; margin: 0; border: 0; box-shadow: none; filter: none; font: inherit; cursor: pointer;
  position: relative; flex: none; height: 38px; min-width: 0; min-height: 0; border-radius: 12px; color: rgba(255, 255, 255, .86); transition: background .15s, color .15s;
}
.cdm-topo-busca { display: flex; align-items: center; gap: 8px; padding: 0 9px 0 11px; background: rgba(255, 255, 255, .1); font-size: 13.5px; }
.cdm-topo-busca span { padding-right: 34px; }
.cdm-topo-busca kbd { font: 500 11px var(--cdm-fonte); padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .75); }
.cdm-topo-btn { width: 40px; padding: 0; display: grid; place-items: center; background: none; }
.cdm-topo-busca:hover, .cdm-topo-btn:hover, .cdm-topo-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .17); color: #fff; }
.cdm-topo svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.cdm-topo :focus-visible { outline: 3px solid rgba(255, 255, 255, .65); outline-offset: 1px; }
.cdm-topo .cdm-bolinha { top: 2px; right: 2px; }
.cdm-topo-app .cdm-bolinha { top: 1px; left: 24px; right: auto; }
/* A moldura desconta a barra */
html.cdm-com-topo .cdm-lateral { top: calc(var(--cdm-topo) + 14px); height: calc(100vh - var(--cdm-topo) - 28px); }
@media print { .cdm-topo { display: none; } html.cdm-com-topo { --cdm-topo: 0px; } }
/* Bolinha vermelha: o que está esperando naquele sistema */
.cdm-bolinha {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px;
  background: #ff3b30; color: #fff; font: 700 10.5px/17px var(--cdm-fonte); text-align: center; box-shadow: 0 0 0 2px #0b2a5c; pointer-events: none;
}
.cdm-dica {
  position: fixed; z-index: 1200; padding: 5px 9px; border-radius: 8px; background: #1c1c1e; color: #fff; pointer-events: none; white-space: nowrap;
  font: 500 12px var(--cdm-fonte); box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.cdm-dica small { color: rgba(255, 255, 255, .6); font-weight: 400; margin-left: 6px; font-size: 11.5px; }
/* Com a faixa, o botão de nove pontos sai (a faixa faz o papel dele) */
.cdm-com-faixa .cdm-sistemas { display: none; }

/* ---------- Celular: a barra encosta nas bordas; ícones dos sistemas, com o nome só no atual ---------- */
@media (max-width: 900px) {
  html.cdm-com-topo { --cdm-topo: calc(50px + env(safe-area-inset-top, 0px)); }
  .cdm-topo { top: 0; left: 0; right: 0; height: var(--cdm-topo); padding: env(safe-area-inset-top, 0px) max(6px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); gap: 2px; border-radius: 0; background: rgba(0, 34, 85, .97); box-shadow: 0 1px 0 rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 26, 70, .16); }
  .cdm-topo-inicio { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .cdm-topo-logo { display: none; }
  .cdm-topo-simbolo { display: block; }
  .cdm-topo-apps { margin-left: 2px; padding-left: 6px; gap: 0; }
  .cdm-topo-app { height: 42px; padding: 0 7px; gap: 7px; font-size: 14px; }
  .cdm-topo-app img { width: 28px; height: 28px; }
  .cdm-topo-app span:not(.cdm-bolinha) { display: none; }
  .cdm-topo-app[aria-current="page"] { padding-right: 11px; }
  .cdm-topo-app[aria-current="page"] span:not(.cdm-bolinha) { display: inline; max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .cdm-topo-busca { width: 42px; height: 42px; padding: 0; justify-content: center; background: none; }
  .cdm-topo-busca span, .cdm-topo-busca kbd { display: none; }
  .cdm-topo-btn { width: 42px; height: 42px; }
  .cdm-topo svg { width: 21px; height: 21px; }
  /* A gaveta abre por cima da barra; a casca do app não repete o respiro do alto do aparelho */
  html.cdm-com-topo .cdm-lateral { top: 0; height: 100vh; height: 100dvh; }
  /* ☰ com o total de avisos */
  .cdm-menu-btn { position: relative; }
  .cdm-menu-btn[data-cdm-avisos]::after {
    content: attr(data-cdm-avisos); position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
    border-radius: 8px; background: #ff3b30; color: #fff; font: 700 10px/16px var(--cdm-fonte); text-align: center;
  }
}

/* ---------- Avisos: painel ao lado do sininho ---------- */
.cdm-avisos {
  position: fixed; z-index: 1100; width: 360px; max-height: min(560px, calc(100vh - 40px)); overflow-y: auto; box-sizing: border-box; padding: 10px;
  border-radius: 20px; background: rgba(250, 250, 252, .97); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 24px 60px rgba(20, 25, 45, .28); font-family: var(--cdm-fonte); color: var(--cdm-texto);
  animation: cdm-surge .14s ease-out;
}
.cdm-avisos h2 { margin: 4px 8px 6px; font: 600 15px var(--cdm-fonte-titulo); }
.cdm-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; border-radius: 12px; color: inherit; text-decoration: none; font-size: 13px; line-height: 1.35; }
.cdm-aviso:hover, .cdm-aviso:focus-visible { background: rgba(120, 120, 128, .09); outline: none; text-decoration: none; color: inherit; }
.cdm-aviso img { width: 30px; height: 30px; flex: none; border-radius: 8px; }
.cdm-aviso small { display: block; color: var(--cdm-texto-3); font-size: 11.5px; margin-top: 2px; }
.cdm-aviso-qtd { margin-left: auto; flex: none; min-width: 20px; padding: 1px 6px; box-sizing: border-box; border-radius: 10px; text-align: center;
  background: #ff3b30; color: #fff; font-size: 11px; font-weight: 700; }
.cdm-aviso.discreto { color: var(--cdm-texto-3); }
.cdm-avisos-vazio { padding: 14px 8px 10px; font-size: 13px; color: var(--cdm-texto-3); }
@media (max-width: 900px) { .cdm-avisos { left: 10px !important; right: 10px; top: calc(var(--cdm-topo) + 8px) !important; width: auto; max-height: calc(100dvh - var(--cdm-topo) - 24px); } }

/* ---------- Busca em todos os sistemas (⌘K) ---------- */
.cdm-sobre { position: fixed; inset: 0; z-index: 1100; background: rgba(15, 27, 45, .35); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 12px 0; }
.cdm-paleta {
  width: min(640px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; font-family: var(--cdm-fonte); color: var(--cdm-texto);
  background: rgba(250, 250, 252, .98); -webkit-backdrop-filter: var(--cdm-vidro); backdrop-filter: var(--cdm-vidro); box-shadow: 0 30px 80px rgba(20, 25, 45, .35);
  animation: cdm-surge .14s ease-out;
}
.cdm-paleta-campo { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--cdm-linha); }
.cdm-paleta-campo svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--cdm-texto-3); stroke-width: 2.2; stroke-linecap: round; }
.cdm-paleta-campo input { flex: 1; min-width: 0; height: auto; border: 0; border-radius: 0; padding: 17px 0; background: transparent; outline: none; box-shadow: none; font: 17px var(--cdm-fonte); color: var(--cdm-texto); }
.cdm-res { overflow-y: auto; padding: 4px 8px 10px; }
.cdm-res-grupo { display: flex; align-items: center; gap: 8px; padding: 12px 10px 5px; font-size: 11.5px; font-weight: 600; color: var(--cdm-texto-3); letter-spacing: .02em; }
.cdm-res-grupo img { width: 18px; height: 18px; border-radius: 5px; }
.cdm-res-grupo span { font-weight: 400; margin-left: auto; }
.cdm-res-item { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; }
.cdm-res-item:hover, .cdm-res-item.sel { background: rgba(10, 132, 255, .1); text-decoration: none; color: inherit; }
.cdm-res-item b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdm-res-item small { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--cdm-texto-3); }
.cdm-res-item i { font-style: normal; flex: none; font-size: 10.5px; font-weight: 600; color: var(--cdm-texto-3); background: rgba(120, 120, 128, .12); padding: 1px 6px; border-radius: 6px; }
.cdm-res-item mark { background: rgba(255, 204, 0, .35); color: inherit; border-radius: 3px; }
.cdm-res-nota { padding: 4px 10px 8px; font-size: 12.5px; color: var(--cdm-texto-3); }
.cdm-res-nota a { color: var(--cdm-acento); }
.cdm-res-rodape { display: flex; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--cdm-linha); font-size: 11.5px; color: var(--cdm-texto-3); }
.cdm-res-rodape kbd { font: 600 11px var(--cdm-fonte); background: #fff; border: 1px solid rgba(60, 60, 67, .18); border-radius: 5px; padding: 0 5px; }
@media (max-width: 900px) { .cdm-res-rodape { display: none; } .cdm-sobre { padding-top: 10px; } .cdm-paleta { max-height: 80vh; } }
@media (prefers-reduced-motion: reduce) { .cdm-avisos, .cdm-paleta { animation: none; } }

/* ---------- Campos de formulário ----------
   Um tamanho só em todos os sistemas: 40px de altura, mesma borda, cantos de 10px, letra de 15px (16px no celular, para o
   iPhone não dar zoom), foco azul e a mesma seta nos selects. Textarea: mesma borda e letra, altura pelo conteúdo.
   Vale para input de texto/e-mail/senha/busca/telefone/data/hora/número, select e textarea; checkbox, radio, arquivo,
   cor e intervalo ficam como estão. Largura e posição são do app.
   :where() não pesa na especificidade: um campo especial do app (busca com lupa, edição dentro de tabela, caixa do chat)
   muda só o que precisa com uma regra de classe. O app NÃO declara regra de campo em seletor puro (`input {}`,
   `select {}`): ela ganharia da suite e quebraria o padrão. Tamanho diferente de 40px só em campo especial. */
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea){
  border:1px solid var(--cdm-borda-campo);border-radius:10px;padding:0 12px;background-color:#fff;
  font:inherit;font-size:15px;line-height:1.3;color:var(--cdm-texto);box-sizing:border-box}
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select:not([multiple]):not([size])){height:var(--cdm-campo-altura)}
:where(input[type=date],input[type=datetime-local],input[type=time],input[type=month]){display:flex;align-items:center}
:where(select:not([multiple]):not([size])){-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2355555e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
:where(select[multiple],select[size]){padding:6px 8px}
:where(textarea){padding:10px 12px;resize:vertical}
:where(input,select,textarea)::placeholder{color:#8e8e93}
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):focus{outline:none;border-color:var(--cdm-acento);box-shadow:0 0 0 3px rgba(10,132,255,.12)}
:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea):disabled{background-color:rgba(120,120,128,.08);color:var(--cdm-texto-3);cursor:not-allowed}
@media (max-width:900px){:where(input:not([type]),input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=month],select,textarea){font-size:16px}}