/* BEOS Entregas — folha única para painel, motorista e cliente.
   Pensada para: sol batendo na tela, dedo grande, celular fraco.
   Sem framework: são ~9 KB que carregam antes do 4G pensar. */

/* --------------------------------------------------------------
   PALETA — tirada do logo da Baby Eventos.

   As cores da marca são vivas de propósito (é locação de brinquedo
   infantil), mas cor viva com texto branco em cima some no sol:
   branco sobre o laranja da marca dá 2,4:1 de contraste, e o
   motorista lê a tela às 11h de agosto, em pé, na calçada.

   Por isso cada cor tem DUAS formas:
     --marca-X   a cor do logo. Vai em etiqueta, borda, fundo claro,
                 ícone, detalhe. É ela que faz a tela parecer da
                 Baby Eventos.
     --X         a mesma cor escurecida até passar de 4,5:1 com
                 texto branco. Só ela entra em botão sólido.

   Nada de cor nova inventada: são as sete do logo.
   -------------------------------------------------------------- */
:root {
  --marca-rosa:    #e6197c;
  --marca-laranja: #f5821f;
  --marca-amarelo: #ffc800;
  --marca-verde:   #35a93b;
  --marca-ciano:   #14a5de;
  --marca-azul:    #1f3d99;
  --marca-roxo:    #9b2c98;

  /* versões que aguentam texto branco em cima */
  --azul:    #1f3d99;
  --verde:   #24762a;
  --laranja: #b45309;
  --rosa:    #b8145f;
  --roxo:    #7a2378;
  --ciano:   #0b6f96;
  --vermelho:#b8145f;         /* na marca, "perigo" é o rosa forte */

  --azul-claro:    #eef2ff;
  --azul-borda:    #c7d2fe;
  --verde-claro:   #f0fdf4;
  --laranja-claro: #fff7ed;
  --vermelho-claro:#fdf2f8;
  --amarelo-claro: #fffbeb;

  --tinta: #101828;
  --tinta-media: #475467;
  --tinta-fraca: #667085;
  --linha: #e4e7ec;
  --fundo: #f1eff1;
  --papel: #ffffff;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(16,24,40,.05), 0 2px 6px rgba(16,24,40,.07);
  --sombra-alta: 0 8px 28px rgba(16,24,40,.14);

  /* a listra de sete cores do logo, usada como assinatura */
  --arco: linear-gradient(90deg,
      var(--marca-rosa) 0 14.3%, var(--marca-laranja) 14.3% 28.6%,
      var(--marca-amarelo) 28.6% 42.9%, var(--marca-verde) 42.9% 57.2%,
      var(--marca-ciano) 57.2% 71.5%, var(--marca-azul) 71.5% 85.8%,
      var(--marca-roxo) 85.8% 100%);

  /* A MESMA listra, em pé e LAVADA. Nasceu em 19/08 para a borda
     esquerda do cartão de parada: ela pediu "a linha azul colorida
     igual tem em cima", e "em cima" é a listra deitada.

     ⛔ MAS AQUI ELA PRECISA SER MAIS FRACA QUE LÁ EM CIMA, e ela
     apontou isso na primeira olhada: "as cores estão muito fortes,
     deixa mais fraquinha, um risquinho mais fino -- só essa da
     lateral, a de cima pode manter".

     E o motivo é de desenho, não de gosto: a listra do TOPO aparece
     UMA vez por tela e é assinatura da marca. Esta aparece em CADA
     cartão -- quarenta e quatro vezes num sábado. Na força cheia,
     quarenta e quatro arco-íris viram uma parede listrada e o olho
     não acha mais o cartão que importa.

     Lavada e fina, ela faz o que tem que fazer: dizer "esta parada
     está normal" sem disputar atenção com o vermelho de quem não
     pagou. Mesmas sete cores, mesmas paradas -- só o tom desce. */
  --arco-em-pe: linear-gradient(180deg,
      var(--marca-rosa) 0 14.3%, var(--marca-laranja) 14.3% 28.6%,
      var(--marca-amarelo) 28.6% 42.9%, var(--marca-verde) 42.9% 57.2%,
      var(--marca-ciano) 57.2% 71.5%, var(--marca-azul) 71.5% 85.8%,
      var(--marca-roxo) 85.8% 100%);

  --arco-em-pe-leve: linear-gradient(180deg,
      #f7b6d2 0 14.3%, #fbcfa4 14.3% 28.6%,
      #ffe6a3 28.6% 42.9%, #b3e0b6 42.9% 57.2%,
      #a9dcf1 57.2% 71.5%, #b4c0e4 71.5% 85.8%,
      #dcb5db 85.8% 100%);
}

/* Assinatura Baby Eventos: pequenos acentos coloridos, sem transformar
   o menu em uma faixa multicolorida. */
body.com-menu::before { content: ""; position: fixed; top: 0; left: 0;
  right: 0; height: 4px; background: var(--arco); z-index: 100; }
.menu-lateral { border-right-color: #dfe3ec; }
.menu-marca { padding-top: 19px; border-bottom: 0; position: relative; }
.menu-marca::after { content: ""; position: absolute; left: 14px; right: 14px;
  bottom: 0; height: 3px; border-radius: 99px; background: var(--arco); opacity: .72; }
.menu-marca .quadro { background: #fff; border: 1px solid #e5e7eb;
  box-shadow: 0 3px 10px rgba(31,61,153,.12); }
.menu-item { border-left: 3px solid transparent; }
.menu-item:hover { background: #fff8fb; border-left-color: var(--marca-rosa); }
.menu-item.ativo, .menu-item.ativo:hover { background: #eef2ff; color: var(--marca-azul);
  border-left-color: var(--marca-rosa); box-shadow: inset 0 0 0 1px #d9def7; }

/* Assinatura da marca: a listra das sete cores. Um elemento só,
   sem imagem, que faz qualquer tela virar "da Baby Eventos". */
.arco-iris { height: 5px; background: var(--arco); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* 16px é o mínimo que o iOS não dá zoom ao focar um campo. */
  font-size: 16px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.25; }

/* ---------- blocos ---------- */
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 15px;
  margin-bottom: 12px;
}
.rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin-bottom: 2px;
}
.forte { font-weight: 700; }
.fraco { color: var(--tinta-fraca); }
.pequeno { font-size: 13px; }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* ---------- etiquetas ---------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  border: 1px solid transparent;
}
/* ⛔ AS CORES SÃO AS SETE DO LOGO, COM MAIS SANGUE (19/08).
   Pedido dela: "cores mais alegres, mas ao mesmo tempo profissional".

   A marca já é colorida -- a listra de arco-íris está no topo de toda
   tela. Quem estava apagado era a ETIQUETA: os fundos eram quase
   brancos (#eef2ff, #f0fdf4, #fffbeb), e de longe o cartão inteiro
   lia como cinza. A alegria veio de subir a SATURAÇÃO do mesmo tom, e
   não de inventar cor nem de pintar mais coisa.

   ⛔ E A REGRA QUE MANTÉM ISSO PROFISSIONAL: COR SIGNIFICA.
     azul    = entrega       roxo   = retirada
     ciano   = horário       verde  = feito / pago
     laranja = em movimento / a receber
     amarelo = prazo apertado
     rosa    = perigo: dinheiro que não entrou
   Cada tom aparece num lugar só. Etiqueta sem significado continua
   CINZA de propósito -- se tudo fosse colorido, nada seria destaque, e
   aí a tela ficaria alegre e inútil ao mesmo tempo.

   Texto sobre o fundo tingido: contraste conferido, todos acima de
   4,5:1 (o mínimo para texto pequeno). Alegre não pode custar leitura
   de quem está no sol, na calçada, olhando o telefone. */
.et-entrega  { background: #e0e9ff; color: #1c3585;  border-color: #b6c6f5; }
.et-recolha  { background: #f7e6f7; color: #7a2378;  border-color: #e3bde2; }
.et-ok       { background: #d9f5dc; color: #1b6b21;  border-color: #a3e3a8; }
.et-aviso    { background: #ffeacb; color: #9a5405;  border-color: #ffcd85; }
.et-perigo   { background: #ffdfed; color: #a8125a;  border-color: #ffb1d2; }
.et-neutra   { background: #eef1f6; color: #3f4c5e;  border-color: #dde2ea; }
.et-manual   { background: #fff1c4; color: #7a5200;  border-color: #ffdd7d; }
.et-ciano    { background: #d4effb; color: #0b6f96;  border-color: #96daf3; }

/* ---------- botões ---------- */
button, .botao {
  font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 10px; border: 1px solid transparent;
  padding: 11px 16px; background: var(--papel); color: var(--tinta);
  border-color: var(--linha);
  /* sem isto o iOS pinta o botão de azul-gradiente */
  -webkit-appearance: none; appearance: none;
  touch-action: manipulation;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: not-allowed; }
.b-azul     { background: var(--azul);     color: #fff; border-color: var(--azul); }
.b-verde    { background: var(--verde);    color: #fff; border-color: var(--verde); }
.b-laranja  { background: var(--laranja);  color: #fff; border-color: var(--laranja); }
.b-vermelho { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.b-linha-vermelha { background: var(--vermelho-claro); color: var(--vermelho); border-color: #fbcfe3; }
.b-mini { padding: 6px 11px; font-size: 13px; font-weight: 600; }
.b-mini:hover { background: #f8fafc; }

/* O botão do motorista: alvo de dedo, com luva, em pé, no sol. */
.b-gigante {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 60px; font-size: 18px; border-radius: 12px;
  margin-bottom: 10px;
}

/* ---------- campos ---------- */
input, select, textarea {
  font: inherit; width: 100%; padding: 11px 12px;
  border: 1px solid #cbd5e1; border-radius: 10px; background: var(--papel);
  color: var(--tinta); -webkit-appearance: none; appearance: none;
}
select { background-image: none; }

/* ⛔ CHECKBOX E RADIO PRECISAM DA APARÊNCIA NATIVA DE VOLTA.
   A regra acima tira `appearance` de TODO input — e o navegador
   desenha a marca do checkbox justamente por ali. Sem ela, marcado e
   desmarcado ficam pixel a pixel idênticos: uma caixinha arredondada
   e vazia.

   O defeito era mudo do pior jeito. Em 15/08/2026 a tela dizia
   "64 de 64 marcada(s)" com as 64 caixas parecendo vazias — o estado
   estava certo, a conta estava certa, e a tela negava as duas. Quem
   olha acredita no que vê, não no contador. */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto; appearance: auto;
  width: 18px; height: 18px; flex: 0 0 auto;
  padding: 0; border: 0; border-radius: 0;
  accent-color: var(--azul); cursor: pointer;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
label.campo { display: block; margin-bottom: 10px; }
label.campo > span { display: block; font-size: 13px; font-weight: 600;
                     color: var(--tinta-media); margin-bottom: 4px; }

/* ---------- faixas ---------- */
/* As faixas levam uma barra da cor da marca na borda esquerda: é o
   que faz "aviso" e "atenção" se distinguirem de relance, sem depender
   de ler. */
.faixa {
  border-radius: 10px; padding: 11px 13px; margin-bottom: 12px;
  border: 1px solid; border-left-width: 5px; font-size: 14px;
}
.faixa-amarela  { background: var(--amarelo-claro); border-color: #ffe08a;
                  border-left-color: var(--marca-amarelo); color: #7a5200; }
.faixa-vermelha { background: var(--vermelho-claro); border-color: #fbcfe3;
                  border-left-color: var(--marca-rosa); color: #83104a; }
.faixa-verde    { background: var(--verde-claro); border-color: #bbf0bd;
                  border-left-color: var(--marca-verde); color: #14532d; }
.faixa-azul     { background: var(--azul-claro); border-color: var(--azul-borda);
                  border-left-color: var(--marca-ciano); color: #1c3374; }

/* ---------- utilidades ---------- */
.linha-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.esconde { display: none !important; }
a { color: var(--azul); }

/* ---------- modal ---------- */
.veu {
  position: fixed; inset: 0; background: rgba(17,24,39,.55);
  display: flex; align-items: flex-end; justify-content: center; z-index: 50;
  padding: 0;
}
@media (min-width: 640px) { .veu { align-items: center; padding: 20px; } }
.modal {
  background: var(--papel); width: 100%; max-width: 640px;
  max-height: 92vh; overflow-y: auto;
  border-radius: 16px 16px 0 0; padding: 18px;
}
@media (min-width: 640px) { .modal { border-radius: 16px; } }
.modal.modal-caso { max-width: 980px; max-height: 94vh; }
.modal.modal-caso.modal-maximizado {
  width: min(100%, 1440px); max-width: none; height: calc(100vh - 40px); max-height: none;
}
.acoes-modal { display: flex; align-items: center; gap: 6px; }
.acoes-modal .b-mini { width: 30px; min-width: 30px; height: 30px; padding: 0; }
.modal h2 { font-size: 19px; margin-bottom: 12px; }

/* ---------- avisos de canto ---------- */
#avisos {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.aviso {
  background: var(--tinta); color: #fff; padding: 12px 14px;
  border-radius: 10px; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.aviso.erro { background: var(--vermelho); }
.aviso.ok { background: var(--verde); }

/* ==============================================================
   MENU LATERAL FIXO — a navegação do painel admin (15/08/2026)

   Substitui a faixa azul horizontal do topo. O motivo é espaço: a
   faixa comia 50 px de altura em TODA tela para mostrar cinco links
   que não mudam, e a Operação do Dia é uma lista longa — altura ali
   é o recurso escasso, não largura.

   ⛔ Mora AQUI, e não dentro de cada página, porque são cinco telas.
   Copiado cinco vezes, o menu divergiria na primeira correção — foi
   exatamente o que aconteceu com o cabeçalho antigo, que precisou de
   um comentário em resumo.html avisando "copiado campo a campo do
   painel, senão o logo sai em tamanho de outdoor".
   ============================================================== */
.menu-lateral {
  position: fixed; top: 0; left: 0; bottom: 0; width: 230px; z-index: 60;
  background: var(--papel); border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
}
.menu-marca {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px; border-bottom: 1px solid var(--linha);
}
.menu-marca .quadro {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
  background: var(--marca-azul); display: flex; align-items: center;
  justify-content: center; overflow: hidden;
}
.menu-marca .quadro img { width: 30px; height: auto; display: block; }
.menu-marca .nome { font-weight: 800; font-size: 14.5px; line-height: 1.15; }
.menu-marca .sub { font-size: 12px; color: var(--tinta-fraca); }

.menu-itens { flex: 1; overflow-y: auto; padding: 10px 9px; display: grid;
              gap: 3px; align-content: start; }
.menu-item {
  display: flex; align-items: center; gap: 11px; text-decoration: none;
  padding: 10px 11px; border-radius: 10px; color: var(--tinta-media);
  font-size: 14.5px; font-weight: 600; white-space: nowrap;
}
.menu-item .ic { font-size: 17px; width: 22px; text-align: center; flex: 0 0 22px; }
.menu-item:hover { background: #f2f4f8; color: var(--tinta); }
/* Ativo: azul cheio. É o único item colorido da coluna — com dois,
   deixa de responder "onde eu estou". */
.menu-item.ativo, .menu-item.ativo:hover {
  background: var(--marca-azul); color: #fff;
}

.menu-rodape {
  border-top: 1px solid var(--linha); padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
}
.menu-rodape .quem { flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
                     color: var(--tinta); overflow: hidden;
                     text-overflow: ellipsis; }
.menu-rodape .quem small { display: block; font-weight: 500;
                           color: var(--tinta-fraca); }
.menu-rodape a { font-size: 13px; font-weight: 700; text-decoration: none; }

/* O conteúdo vive à direita do menu. `padding` no body em vez de
   margin no wrapper: assim vale para as cinco páginas sem que cada
   uma precise embrulhar o que já tem. */
body.com-menu { padding-left: 230px; }

/* ⛔ TÍTULO E AÇÕES NA MESMA LINHA. O título ocupava uma faixa inteira
   para dizer uma palavra, e a barra de ações nascia embaixo — duas
   linhas de altura antes de a tela começar. No celular isso custa
   caro: a lista de paradas é o que a pessoa veio ver.

   ⚠️ Os botões quebram para a linha seguinte quando não cabem; o
   TÍTULO nunca quebra sozinho (flex: 0 0 auto). */
.cabecalho-secao {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 12px 6px;
}
.cabecalho-secao > [data-junto-do-titulo] { flex: 1 1 420px; margin: 0; }
.titulo-secao { font-size: 17px; font-weight: 800; color: var(--tinta);
                margin: 0; padding: 0; flex: 0 0 auto; }

/* O botão de gaveta e o véu só existem no celular. */
.menu-abrir { display: none; }
.menu-veu { display: none; }

/* ---- até 1023px: só os ícones ---- */
@media (max-width: 1023px) {
  .menu-lateral { width: 64px; }
  .menu-item .rot, .menu-marca .texto, .menu-rodape .quem { display: none; }
  .menu-marca { justify-content: center; padding: 13px 0; }
  .menu-item { justify-content: center; padding: 11px 0; }
  .menu-rodape { justify-content: center; }
  body.com-menu { padding-left: 64px; }
}

/* ---- até 767px: gaveta ----
   ⛔ Fora da tela por padrão, e não "escondida com largura zero": um
   menu de 64 px num celular de 360 px come 18% da largura para
   mostrar ícone que ninguém toca enquanto trabalha. */
@media (max-width: 767px) {
  .menu-lateral {
    width: 230px; transform: translateX(-100%);
    transition: transform .18s ease; box-shadow: var(--sombra-alta);
  }
  .menu-lateral.aberta { transform: none; }
  .menu-item .rot, .menu-marca .texto, .menu-rodape .quem { display: block; }
  .menu-marca { justify-content: flex-start; padding: 15px 14px; }
  .menu-item { justify-content: flex-start; padding: 12px 11px; }
  .menu-rodape { justify-content: flex-start; }
  body.com-menu { padding-left: 0; }

  .menu-abrir {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; margin: 0;
    background: var(--papel); border: 1px solid var(--linha);
    font-size: 19px; cursor: pointer; flex: 0 0 40px;
  }
  .menu-veu.aberto {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(16,24,40,.45);
  }
  .cabecalho-secao { padding: 10px 10px 4px; gap: 7px; flex-wrap: nowrap; }
  .cabecalho-secao > [data-junto-do-titulo] { flex: 1 1 auto; min-width: 0; }
  .titulo-secao { font-size: 16px; }
}

/* Ajuste final da prévia: estas regras ficam por último para vencer o
   estilo legado do item ativo e manter o miolo visualmente neutro. */
body.com-menu::before { content: ""; position: fixed; top: 0; left: 0;
  right: 0; height: 4px; background: var(--arco); z-index: 100; }
.menu-item.ativo, .menu-item.ativo:hover { background: #eef2ff !important; color: var(--marca-azul) !important;
  border-left: 3px solid var(--marca-rosa) !important; box-shadow: inset 0 0 0 1px #d9def7 !important; }

/* ==============================================================
   O MENU AGRUPADO POR DOMÍNIO (23/08/2026)

   Doze itens em lista chapada deixaram de responder "onde eu
   procuro isto". Os grupos são Comercial, Operação, Estoque,
   Equipe, Financeiro e Administração.

   ⛔ ESTE BLOCO VAI NO FIM DO ARQUIVO DE PROPÓSITO, e não junto
   das regras do menu lá em cima. As regras do menu têm três
   estados (230px, 64px e gaveta) espalhados por dois `@media`, e
   editar no meio deles é como se costuma quebrar o estado que
   não se estava olhando. Aqui embaixo o bloco é inteiro, tem os
   três estados juntos, e a cascata garante que ele vence.
   ============================================================== */
.menu-grupo { display: grid; gap: 3px; align-content: start; }

/* ⛔ A MARGEM É `margin-top`, NUNCA `gap` no `.menu-itens`. O gap
   valeria também ANTES do primeiro grupo, empurrando a Visão
   Geral para longe do logo — e o primeiro item da coluna é o que
   a pessoa vê primeiro. Assim o primeiro grupo encosta e os
   outros respiram. */
.menu-grupo + .menu-grupo { margin-top: 13px; }

.menu-grupo-rotulo {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tinta-fraca);
  padding: 0 11px 3px; user-select: none;
}

/* A seta de "isto abre outro serviço" — hoje só os Orçamentos, que
   têm login próprio. Fica pequena e ao lado do rótulo, não no
   lugar do ícone: o ícone responde O QUE é, a seta responde ONDE
   abre, e trocar um pelo outro perde a primeira resposta. */
.menu-item .fora {
  font-size: 10px; margin-left: 5px; opacity: .55;
  vertical-align: super;
}
/* No item aceso o texto é branco; a seta acompanha, senão some. */
.menu-item.ativo .fora { opacity: .85; }

/* ---- até 1023px: a coluna de 64px, só ícones ----
   ⛔ O RÓTULO DO GRUPO NÃO PODE VIRAR TEXTO ESMAGADO. Em 64px não
   cabe "ADMINISTRAÇÃO", e deixá-lo quebrar em três linhas de duas
   letras é pior do que não ter grupo. Ele vira o que um rótulo
   invisível ainda consegue ser: uma LINHA que separa. */
@media (max-width: 1023px) {
  .menu-grupo-rotulo {
    /* ⛔ `font-size: 0` e não `display: none`: o elemento continua
       existindo para desenhar a linha de cima. Escondido de vez,
       o separador iria embora junto com o texto. */
    font-size: 0; padding: 0; height: 0;
    border-top: 1px solid var(--linha);
    margin: 0 10px;
  }
  .menu-grupo + .menu-grupo { margin-top: 10px; }
  /* Sem rótulo, a Visão Geral não ganha risco em cima — ela é o
     primeiro grupo e não separa nada de nada. */
  .menu-grupo:first-child .menu-grupo-rotulo { border-top: 0; }
  .menu-item .fora { display: none; }
}

/* ---- até 767px: a gaveta volta a ter 230px ----
   Os rótulos voltam por extenso: aqui a largura existe de novo, e
   é justamente no celular que ela mais precisa saber em que área
   está antes de tocar. */
@media (max-width: 767px) {
  .menu-grupo-rotulo {
    font-size: 10.5px; height: auto; padding: 0 11px 3px;
    border-top: 0; margin: 0;
  }
  .menu-grupo + .menu-grupo { margin-top: 13px; }
  .menu-item .fora { display: inline; }
}

/* Override final da proposta visual aprovada. */
body.com-menu::before { content: ""; position: fixed; top: 0; left: 0;
  right: 0; height: 4px; background: var(--arco); z-index: 100; }
.menu-item.ativo, .menu-item.ativo:hover { background: #eef2ff; color: var(--marca-azul);
  border-left: 3px solid var(--marca-rosa); box-shadow: inset 0 0 0 1px #d9def7; }
.menu-marca .quadro { width: 48px; height: 48px; flex-basis: 48px;
  background: transparent !important; border: 0 !important; box-shadow: none !important; }
.menu-marca .quadro img { width: 48px; }
.menu-item.ativo, .menu-item.ativo:hover { background: #fff1f6 !important;
  color: var(--rosa) !important; border-left-color: var(--marca-rosa) !important; }
.menu-item:hover { background: #fff8f3; border-left-color: var(--marca-rosa); }