/*
 * admin-computador.css — layout novo do /admin no COMPUTADOR (aprovado pelo
 * dono em 30/09/2026). Menu azul e colunas: só acima de 900px. Os blocos
 * novos do Pulso (fila, funil, caminhos) valem em qualquer largura; no
 * celular aparecem empilhados. Par do admin-computador.js.
 */
.ac-grupo,.ac-saude{display:none}
#app .menu .ac-menu-btn{display:none}
/* o número em destaque do Pulso (pessoas de verdade) é azul em qualquer largura */
#pulso .grade.g4>.ac-destaque{background:#0b2545; color:#fff}
#pulso .grade.g4>.ac-destaque *{color:inherit}
.ac-lados{display:block; margin:6px 0 0; font-size:12px; color:#d5dee8!important}
/* os divisores antigos do menu ficam sobrando depois do reagrupamento, em qualquer largura */
#app .menu .div.ac-some{display:none}
.ac-cont{margin-left:auto; min-width:20px; padding:1px 7px; border-radius:999px; background:#f97316; color:#0b2545; font-size:11px; font-weight:700; text-align:center}
.ac-cont.ac-fraco{background:#ffd9bd}

/* blocos novos do Pulso: aparecem também no celular, empilhados */
.ac-linha{display:flex; flex-direction:column; gap:12px}
.ac-topo{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px}
.ac-topo h2{margin:0}
.ac-fila table{width:100%; border-collapse:collapse; font-size:13px}
.ac-fila th{text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#536477; padding:8px 6px}
.ac-fila td{padding:10px 6px; border-top:1px solid #edf1f5; vertical-align:middle}
.ac-fila tr.ac-velho td{background:#fff7f0}
.ac-fila .desc.mini{margin-top:8px}
.ac-decisao{border:1px solid #dfe6ec}
.ac-barras{display:grid; grid-template-columns:150px minmax(0,1fr) 44px; gap:8px; align-items:center; font-size:12.5px; margin-top:8px}
.ac-barras b{text-align:right}
.ac-trilho{height:10px; border-radius:999px; background:#edf1f5; overflow:hidden}
.ac-trilho i{display:block; height:100%; border-radius:999px; background:#f97316}


@media (min-width:901px){
  body{background:#e7edf4}
  #app.quadro{grid-template-columns:260px minmax(0,1fr); gap:16px; padding:16px; max-width:1560px}

  /* ── menu azul agrupado ── */
  #app .menu{background:#0b2545; color:#fff; border-radius:22px; padding:20px 14px; position:static; max-height:none; overflow:visible}
  #app .menu .marca-menu{color:#fff}
  #app .menu .cargo{color:#8fa1b5}
  #app .menu button{color:#d5dee8; font-size:14px; font-weight:600; border-radius:12px; padding:9px 12px}
  #app .menu button .ic{display:none}
  #app .menu button:hover{background:rgba(255,255,255,.08); color:#fff}
  #app .menu button[aria-current="page"]{background:#fff; color:#0b2545; font-weight:700}
  #app .menu button:focus-visible{outline:2px solid #f97316; outline-offset:1px}
  #app .menu .sair{color:#ffb3b3}
  #app .menu .nota{color:#8fa1b5}
  #app .menu .nota code{color:#d5dee8}
  #app .menu .div.ac-sep{display:block; height:1px; background:rgba(255,255,255,.14); margin:10px 6px}
  .ac-grupo{display:block; margin:12px 12px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8fa1b5}
  .ac-saude{display:flex; flex-direction:column; gap:8px; margin-top:14px; padding:14px; border-radius:16px; background:rgba(255,255,255,.07); font-size:12px}
  .ac-saude>b{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8fa1b5}
  .ac-saude-l{display:flex; flex-direction:column; gap:6px; margin:0; color:#d5dee8}
  .ac-saude-i{display:flex; justify-content:space-between; gap:8px}
  .ac-ok{color:#3ecf8e}
  .ac-ruim{color:#ffb27a}

  /* ── conteúdo ── */
  #app .area{background:#f7f9fc; border-radius:22px; padding:24px 28px}
  #app .cartao{border-radius:20px}
  .ac-linha{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:16px; align-items:start}
  .ac-linha>.col{display:flex; flex-direction:column; gap:16px; min-width:0}
}

/* ── celular (pedido do dono em 01/10/2026): o mesmo visual do computador ──
   O menu vira uma barra azul fixa no topo; o botão "Menu" abre a lista
   agrupada (Negócio, Clientes, Operação) com a saúde do sistema, no mesmo azul
   do computador. O conteúdo usa os mesmos cartões brancos de canto 20px. */
@media (max-width:900px){
  body{background:#e7edf4}
  #app.quadro{padding:0 12px 28px; gap:14px}
  #app .menu{position:sticky; top:0; z-index:40; margin:0 -12px; padding:10px 16px; border-radius:0 0 20px 20px;
    background:#0b2545; color:#fff; box-shadow:0 6px 20px rgba(11,37,69,.22); max-height:none; overflow:visible}
  #app .menu .marca-menu{color:#fff; padding:0; min-height:40px}
  #app .menu .cargo{display:none}
  #app .menu .ac-menu-btn{display:inline-flex; align-items:center; gap:6px; width:auto; margin-left:auto; height:40px; padding:0 14px;
    border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; font-size:14px; font-weight:700}
  #app .menu .ac-menu-btn:focus-visible{outline:2px solid #f97316; outline-offset:2px}
  #app .menu.ac-aberto .ac-menu-btn{background:#fff; color:#0b2545}
  #app .menu nav{display:none}
  #app .menu.ac-aberto nav{display:flex; max-height:calc(100dvh - 76px); overflow-y:auto; overscroll-behavior:contain; padding:8px 0 6px}
  #app .menu nav button{color:#d5dee8; font-size:15px; font-weight:600; border-radius:12px; padding:11px 12px; min-height:44px}
  #app .menu nav button .ic{color:#8fa1b5}
  #app .menu nav button:hover{background:rgba(255,255,255,.08); color:#fff}
  #app .menu nav button[aria-current="page"]{background:#fff; color:#0b2545; font-weight:700}
  #app .menu nav button[aria-current="page"] .ic{color:#f97316}
  #app .menu nav .sair{color:#ffb3b3}
  #app .menu nav .nota{color:#8fa1b5}
  #app .menu nav .nota code{color:#d5dee8}
  #app .menu .div.ac-sep{display:block; height:1px; background:rgba(255,255,255,.14); margin:10px 6px}
  .ac-grupo{display:block; margin:12px 12px 4px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8fa1b5}
  .ac-saude{display:flex; flex-direction:column; gap:8px; margin-top:12px; padding:14px; border-radius:16px; background:rgba(255,255,255,.07); font-size:12px}
  .ac-saude>b{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#8fa1b5}
  .ac-saude-l{display:flex; flex-direction:column; gap:6px; margin:0; color:#d5dee8}
  .ac-saude-i{display:flex; justify-content:space-between; gap:8px}
  .ac-ok{color:#3ecf8e}
  .ac-ruim{color:#ffb27a}

  #app .area{padding:4px 2px 0}
  #app .cartao{border-radius:20px}
  #app .cab h1{font-size:24px}
  #app .cab .filtro{width:100%}
  #app .cab .periodo{display:flex; width:100%}
  #app .cab .periodo button{flex:1 1 0; padding-left:4px; padding-right:4px}
  /* tabela larga rola para o lado em vez de quebrar "R$ 9.300" em duas linhas */
  #app .rolante{overflow-x:auto; -webkit-overflow-scrolling:touch}
  #app .rolante table{min-width:560px}
  #app .rolante td.n,#app .rolante th.n{white-space:nowrap}
}