/* ================================================================
   HIPERION PROTOCOLOS — tema visual
   ----------------------------------------------------------------
   Carregado DEPOIS dos blocos <style> do index.html, sobrescreve a
   aparência sem tocar em markup, IDs, nomes de campo ou
   comportamento. Para desativar, basta remover o <link> do <head>.

   Valores extraídos do site institucional da Hiperion:
   Manrope 800, tracking -.022em, entrelinha 1.04, papel #f5f5f2,
   tinta #0b1628, azul #0078c0, ênfase em gradiente dourado, raios
   grandes e movimento em cubic-bezier(.22, 1, .36, 1).
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* ----------------------------------------------------------------
     RAMPA NEUTRA AZULADA — a espinha dorsal
     ----------------------------------------------------------------
     O index.html usa 376 tons de azul em 504 lugares. Olhando os
     exemplos por degrau (#071936, #344054, #667085, #e4e9f0, #f8fafc)
     fica claro que aquilo nunca foi azul: e a escala de cinza do
     sistema, levemente azulada. Ninguem nomeou, entao cada tela
     inventou o seu tom.

     Azul mais neutro somam 641 usos: 79 por cento de toda a cor do
     projeto. Nomear esta rampa resolve quatro quintos do problema, e
     e ela que o modo escuro inverte.

     Tres degraus coincidem com tokens que ja existiam e ja passaram
     por auditoria de contraste: 500, 600 e 900.
     ---------------------------------------------------------------- */
  --n-000: #ffffff;
  --n-050: #f8fafc;
  --n-100: #eef2f7;
  --n-200: #dde3eb;
  --n-300: #b8c2cf;
  --n-400: #8b95a6;
  --n-500: #656e7d;
  --n-600: #3d4a60;
  --n-700: #26354d;
  --n-800: #16243a;
  --n-900: #0b1628;

  /* ----------------------------------------------------------------
     SEMANTICAS — quatro papeis, iguais em todas as familias
     texto / borda / superficie / fraca. Sao os quatro que aparecem
     em verde, ambar e rubro quando se olha o uso real.
     ---------------------------------------------------------------- */
  /* Sete degraus por familia, nao quatro. A primeira versao tinha
     texto/base/borda/superficie e deixou 178 ocorrencias sem par: a
     interface usa tons medios saturados que nao existiam no meio da
     escala — azuis de 18 a 68 por cento de claridade, ambares de 30 a 48.

     Parte disso e deriva pura: #9a4d00, #995000 e #9a5b00 sao tres
     ambares praticamente iguais, tres usos cada. Ninguem escolheu os
     tres; eles foram aparecendo. Com a escala nomeada, encostam todos
     no mesmo degrau. */
  --azul-900: #07243f;
  --azul-800: #0c3357;
  --azul-700: #00527f;
  --azul-600: #00629b;
  --azul-500: #0078c0;
  --azul-400: #2c86ad;
  --azul-300: #6aaed4;
  --azul-200: #9fd0ea;
  --azul-100: #d9eaf6;
  --azul-050: #eef3f8;
  --azul-fraca: rgba(0,120,192,.08);

  --verde-900: #0d4234;
  --verde-800: #136049;
  --verde-700: #156b52;
  --verde-600: #1d7f62;
  --verde-500: #2a9b78;
  --verde-400: #4bb493;
  --verde-300: #83d2b2;
  --verde-200: #9ad9c2;
  --verde-100: #c9ecdd;
  --verde-050: #e8f6f0;

  --ambar-900: #5c3f0d;
  --ambar-800: #7a5411;
  --ambar-700: #8a6115;
  --ambar-600: #b07d1c;
  --ambar-500: #c89025;
  --ambar-400: #d7a648;
  --ambar-300: #e5c182;
  --ambar-200: #ecc98a;
  --ambar-100: #f6e4c0;
  --ambar-050: #fdf4e3;

  --rubro-900: #5e1f29;
  --rubro-800: #7c2936;
  --rubro-700: #8f2f3e;
  --rubro-600: #b23b4d;
  --rubro-500: #c45365;
  --rubro-400: #d47987;
  --rubro-300: #e29ea9;
  --rubro-200: #e8aeb6;
  --rubro-100: #f4d5da;
  --rubro-050: #fbedef;

  /* nomes antigos, mantidos para nao quebrar o que ja consome */
  --azul-texto: #00629b;
  --azul-base: #0078c0;
  --azul-borda: #9fd0ea;
  --azul-superficie: #eef3f8;
  --verde-texto: #156b52;
  --verde-base: #1d7f62;
  --verde-borda: #9ad9c2;
  --verde-superficie: #e8f6f0;
  --ambar-texto: #8a6115;
  --ambar-base: #b07d1c;
  --ambar-borda: #ecc98a;
  --ambar-superficie: #fdf4e3;
  --rubro-texto: #8f2f3e;
  --rubro-base: #b23b4d;
  --rubro-borda: #e8aeb6;
  --rubro-superficie: #fbedef;

  /* ----------------------------------------------------------------
     DOIS TOKENS QUE NAO VIRAM COM O TEMA
     ----------------------------------------------------------------
     O resto da escala inverte: o que era claro escurece e vice-versa.
     Estes dois nao, e e de proposito.

     --hip-sobre-escuro e a letra que mora em cima de superficie
     escura de marca: menu ativo, heroi, botao cheio, avatar. Essas
     superficies ja sao escuras no modo claro e continuam escuras no
     escuro — nao ha nada para inverter. Antes isso era var(--n-000),
     que significava "branco" por acidente; no escuro o degrau 000
     virou quase preto e trinta trechos de texto sumiram de uma vez.

     --hip-destaque e o preenchimento de enfase (o dia de hoje na
     faixa). No claro e a propria tinta: celula marinho, letra clara.
     Essa inversao nao sobrevive ao tema escuro — a celula clarearia e
     a letra branca sumiria — entao no escuro ele vira um azul cheio,
     que destaca sem depender de contraste com o fundo da pagina.
     ---------------------------------------------------------------- */
  --hip-sobre-escuro: #ffffff;
  /* preenchimentos solidos de acao: letra branca em cima, nos dois temas */
  --hip-perigo:  #a61b1b;
  --hip-atencao: #a85d08;
  --hip-sucesso: #18794e;
  --hip-destaque: #0b1628;
  --hip-destaque-2: #142744;   /* o mesmo realce sob o ponteiro */
  --hip-destaque-mudo: #8fa8bd;   /* o apoio que mora em cima do realce */
  --hip-destaque-tinta: #ffffff;

  --hip-papel:   #f5f5f2;
  --hip-branco:  #ffffff;
  --hip-cartao:  rgba(255,255,255,.94);   /* cartao: deixa 6% do fundo passar */
  --hip-vidro:   rgba(255,255,255,.86);   /* pastilha fosca sobre a pagina */
  --hip-brilho:  rgba(255,255,255,.8);    /* o lustro no canto do cartao */
  --hip-papel-88: rgba(245,245,242,.88);  /* a clareira do login, meio */
  --hip-papel-00: rgba(245,245,242,0);    /* e a borda dela */
  --hip-fio-forte: rgba(11,22,40,.28);    /* a borda sob o ponteiro */

  /* O verde do indicador "ao vivo" nao e o verde das familias: e um
     salvia dessaturado, a 13.8 de distancia do degrau mais proximo.
     Encaixa-lo na rampa mudaria o modo claro de um jeito visivel, por
     isso ele ganha par proprio em vez de ser aproximado. */
  --hip-sinal:   #4a715f;

  /* Acao destrutiva: laranja e vermelho saturados, fora da rampa */
  --ambar-forte:   #a25a00;
  --ambar-forte-2: #824600;   /* sob o ponteiro */
  --rubro-forte:   #b72f40;
  --rubro-forte-2: #962334;
  --hip-tinta:   #0b1628;
  --hip-tinta-70:#3d4a60;
  /* 3. #6b7587 dava 4.68:1 sobre branco mas 4.25:1 sobre o papel,
     e o papel é o fundo de metade das telas. Um tom mais escuro
     passa nos dois: 5.17 e 4.73. */
  --hip-tinta-45:#656e7d;
  --hip-fio:     rgba(11,22,40,.12);
  --hip-fio-2:   rgba(11,22,40,.06);
  --hip-lavanda: #eef3f8;
  --hip-azul:    #0078c0;
  --hip-azul-12: rgba(0,120,192,.12);
  --hip-ouro-1:  #c9a04a;
  --hip-ouro-2:  #a8823d;
  --hip-ouro-3:  #7d5f22;
  --hip-verde:   #1d7f62;
  --hip-verde-12:rgba(29,127,98,.1);
  --hip-ambar:   #b07d1c;
  --hip-ambar-12:rgba(176,125,28,.12);
  --hip-rubro:   #b23b4d;
  --hip-rubro-12:rgba(178,59,77,.1);

  --hip-r-card: 26px;
  --hip-r-med:  16px;
  --hip-r-peq:  11px;

  --hip-sombra:      0 1px 2px rgba(11,22,40,.04), 0 10px 30px rgba(11,22,40,.06);
  --hip-sombra-alta: 0 2px 6px rgba(11,22,40,.05), 0 24px 60px rgba(11,22,40,.10);
  --hip-mola: cubic-bezier(.22, 1, .36, 1);

  --hip-fonte: Manrope, "Segoe UI Variable", "Segoe UI", system-ui, Arial, sans-serif;
}

/* ---------------- base ---------------- */
body {
  background: var(--hip-papel);
  color: var(--hip-tinta);
  font-family: var(--hip-fonte);
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { font-family: var(--hip-fonte); }

h1, h2, h3 { font-weight: 800; letter-spacing: -.022em; line-height: 1.06; }

:focus-visible { outline: 2px solid var(--hip-azul); outline-offset: 3px; border-radius: 8px; }

/* ================================================================
   LATERAL — clara
   ----------------------------------------------------------------
   O lockup horizontal da marca traz "HIPERION" em azul-marinho e
   "ASSESSORIA CONTÁBIL" em azul: sobre fundo escuro esse texto some.
   Por isso a lateral é clara, igual ao site institucional, e a marca
   entra em cores plenas, sem placa branca por baixo.
   O CSS original assumia fundo escuro (texto #c5d4e2, ativo
   translúcido), então TODAS as cores de texto são redefinidas aqui.
   ================================================================ */
.side {
  background: var(--hip-branco) !important;
  border: 0 !important;
  border-radius: var(--hip-r-card);
  box-shadow: var(--hip-sombra);
  margin: 14px 0 14px 14px;
  padding: 18px 13px;
}

/* marca: lockup horizontal, sem placa e sem recorte */
.side .brand {
  display: block !important;
  height: auto !important; margin: 0 0 6px !important; padding: 4px 6px 16px !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--hip-fio-2) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.side .brand img {
  display: block;
  width: 100% !important; max-width: 178px !important; height: auto !important;
  margin: 0; object-fit: contain; clip-path: none;
}

.menu-section-title {
  margin: 20px 10px 7px;
  color: var(--hip-tinta-45);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
}

.side .menu-btn, .side button.menu-btn {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: var(--hip-r-peq);
  background: transparent; color: var(--hip-tinta-70);
  font-size: 13.5px; font-weight: 600; text-align: left;
  box-shadow: none;
  transition: background .25s var(--hip-mola), color .25s var(--hip-mola), transform .25s var(--hip-mola);
}
.side .menu-btn:hover, .side button.menu-btn:hover {
  background: var(--hip-papel); color: var(--hip-tinta); transform: translateX(2px); box-shadow: none;
}
.side .menu-btn.active, .side button.menu-btn.active {
  background: var(--hip-lavanda); color: var(--azul-texto); font-weight: 700; box-shadow: none;
}
.side .menu-btn.active::after {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--hip-azul);
}

/* ---------------- sobrancelha (traço + texto) ---------------- */
.command-overline, .kicker {
  display: flex; align-items: center; gap: 11px;
  color: var(--azul-texto);
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.command-overline span:first-child {
  width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}
.command-overline b { font-weight: 800; }

/* ================================================================
   ABERTURA — o cartão
   ----------------------------------------------------------------
   O .command-hero original já era um cartão azul-marinho com brilho
   radial e raio assimétrico (24px 24px 8px 24px). Emissor e
   entregador têm variantes próprias (âmbar e verde); o admin usava a
   base. Mantemos o cartão e só trocamos a paleta pela da marca,
   somando uma malha diagonal discreta que ecoa a composição
   geométrica do site institucional.
   ================================================================ */
.command-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px 24px 8px 24px;
  background:
    radial-gradient(circle at 78% 12%, rgba(0,120,192,.4), transparent 42%),
    linear-gradient(128deg, #0b1628 0%, #11304c 58%, #0e3f63 100%);
  box-shadow: 0 22px 50px rgba(11,22,40,.18);
}
/* malha diagonal: textura, não desenho */
.command-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: repeating-linear-gradient(128deg, rgba(255,255,255,.05) 0 1px, transparent 1px 22px);
  mask-image: linear-gradient(120deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(120deg, #000 10%, transparent 72%);
}

.command-hero-copy h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800; letter-spacing: -.022em; line-height: 1.04;
  color: #fff;
}
.command-hero-copy p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.55; }
.command-date { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.command-overline { color: rgba(255,255,255,.9); }

.command-next {
  border: 1px solid rgba(255,255,255,.2); border-radius: var(--hip-r-med);
  background: rgba(255,255,255,.1); box-shadow: none;
  backdrop-filter: blur(6px);
}
.command-next span { color: rgba(255,255,255,.7); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
/* ênfase dourada do site, no número do próximo protocolo */
.command-next strong {
  background: linear-gradient(100deg, var(--hip-ouro-1) 0%, var(--hip-ouro-2) 50%, var(--hip-ouro-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 800; letter-spacing: -.03em;
}

/* ---------------- painéis ---------------- */
.command-calendar-panel,
.command-workspace,
.command-deadlines,
.command-actions-panel {
  background: var(--hip-branco);
  border: 0;
  border-radius: var(--hip-r-card);
  box-shadow: var(--hip-sombra);
}
.command-section-head h3, .command-section-head h2 { letter-spacing: -.022em; font-weight: 800; }

/* ---------------- métricas ---------------- */
.command-metric {
  background: var(--hip-branco);
  border: 0; border-radius: var(--hip-r-card);
  box-shadow: var(--hip-sombra);
  transition: transform .45s var(--hip-mola), box-shadow .45s var(--hip-mola);
}
.command-metric:hover { transform: translateY(-3px); box-shadow: var(--hip-sombra-alta); }
.command-metric .num { font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.command-metric-mark { border-radius: var(--hip-r-med); background: var(--hip-lavanda); color: var(--azul-texto); }

/* ---------------- calendário ---------------- */
.month-calendar-title span { color: var(--azul-texto); letter-spacing: .16em; font-weight: 800; }
.month-calendar-title strong { color: var(--hip-tinta); font-weight: 800; letter-spacing: -.022em; }
.month-calendar-nav button {
  width: 32px; height: 32px;
  border: 1px solid var(--hip-fio); border-radius: 50%;
  background: var(--hip-branco); color: var(--hip-tinta-70);
  transition: all .3s var(--hip-mola);
}
.month-calendar-nav button:hover { border-color: var(--azul-texto); background: var(--hip-azul); color: #fff; }

.month-weekday { color: var(--hip-tinta-45); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; }
.month-day {
  min-height: 48px;
  border: 1px solid transparent; border-radius: var(--hip-r-peq);
  background: var(--hip-papel); color: var(--hip-tinta);
  font: 700 13px var(--hip-fonte);
  font-variant-numeric: tabular-nums;
  transition: background .3s var(--hip-mola), transform .3s var(--hip-mola), box-shadow .3s var(--hip-mola);
}
.month-day:hover { background: var(--hip-lavanda); border-color: transparent; transform: translateY(-2px); }
.month-day.today { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--hip-azul); }
.month-day.selected { background: var(--hip-destaque); color: var(--hip-destaque-tinta); transform: translateY(-2px); box-shadow: var(--hip-sombra); }
.month-dot { background: var(--hip-azul); }
.month-dot.overdue { background: var(--hip-rubro); }
.month-dot.today { background: var(--hip-ambar); }
.month-dot.done { background: var(--hip-verde); }

.month-calendar-side { background: var(--hip-papel); border-radius: var(--hip-r-med); }
.month-calendar-side h3 { color: var(--hip-tinta); font-weight: 800; letter-spacing: -.022em; }
.month-calendar-total {
  border-radius: var(--hip-r-peq);
  background: var(--hip-lavanda); color: var(--azul-texto);
  font: 800 15px var(--hip-fonte); font-variant-numeric: tabular-nums;
}
.month-calendar-event {
  border-radius: 0 var(--hip-r-peq) var(--hip-r-peq) 0;
  border-left: 3px solid var(--hip-azul);
  background: var(--hip-branco);
  transition: background .3s var(--hip-mola), transform .3s var(--hip-mola);
}
.month-calendar-event:hover { background: var(--hip-lavanda); transform: translateX(3px); }
.month-calendar-event.overdue { border-left-color: var(--hip-rubro); }
.month-calendar-event.today { border-left-color: var(--hip-ambar); }
.month-calendar-event strong { color: var(--hip-tinta); font-size: 12px; font-weight: 700; }
.month-calendar-event small { color: var(--hip-tinta-45); font-size: 11px; }
.month-calendar-legend { color: var(--hip-tinta-45); font-size: 11px; font-weight: 600; }
.month-calendar-legend i { background: var(--hip-azul); }
.month-calendar-legend .late i { background: var(--hip-rubro); }
.month-calendar-legend .now i { background: var(--hip-ambar); }

/* ---------------- prazos ---------------- */
.due-dashboard-item {
  border-radius: var(--hip-r-med);
  background: var(--hip-papel);
  transition: background .3s var(--hip-mola), transform .3s var(--hip-mola);
}
.due-dashboard-item:hover { background: var(--hip-lavanda); transform: translateX(3px); }
.due-pill { border-radius: 999px; font-weight: 700; font-size: 11.5px; }
.due-pill.overdue, .overdue > .due-pill { background: var(--hip-rubro-12); color: var(--hip-rubro); }

/* ---------------- botões ---------------- */
button.primary, .primary {
  min-height: 40px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--hip-azul); color: #fff;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,120,192,.28);
  transition: transform .3s var(--hip-mola), box-shadow .3s var(--hip-mola);
}
button.primary:hover, .primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,120,192,.36); }
button.primary.secondary, .primary.secondary {
  background: var(--hip-branco); color: var(--hip-tinta-70);
  border: 1px solid var(--hip-fio); box-shadow: none;
}
button.primary.secondary:hover, .primary.secondary:hover {
  color: var(--hip-tinta); border-color: var(--hip-fio-forte); box-shadow: var(--hip-sombra);
}

/* ---------------- campos ---------------- */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border: 1px solid var(--hip-fio); border-radius: var(--hip-r-peq);
  background: var(--hip-papel);
  transition: border-color .25s var(--hip-mola), box-shadow .25s var(--hip-mola), background .25s var(--hip-mola);
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azul-texto);
  background: var(--hip-branco); box-shadow: 0 0 0 4px var(--hip-azul-12);
}

/* ---------------- diálogos ---------------- */
.modal-card, .hip-dialog, .modal > div {
  border-radius: var(--hip-r-card);
  box-shadow: var(--hip-sombra-alta);
}

/* ---------------- acessibilidade ---------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .command-metric:hover, .month-day:hover, .primary:hover,
  .due-dashboard-item:hover, .menu-btn:hover { transform: none; }
}

/* ================================================================
   LATERAL — reforços finais
   O CSS original vence por especificidade em algumas propriedades,
   por isso os !important pontuais abaixo.
   ================================================================ */
.side .menu-btn, .side button.menu-btn, aside.side button.menu-btn {
  color: var(--hip-tinta-70) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important; font-weight: 600 !important;
}
.side .menu-btn:hover, aside.side button.menu-btn:hover {
  background: var(--hip-papel) !important; color: var(--hip-tinta) !important;
}
.side .menu-btn.active, aside.side button.menu-btn.active {
  background: var(--hip-lavanda) !important; color: var(--azul-texto) !important; font-weight: 700 !important;
}

/* ---------------- família única de ícones ----------------
   O CSS antigo usava símbolos avulsos (▦ ≡ + → ✓ ⌂ ◷ ◉ ×) de fontes
   diferentes. Aqui são traços do mesmo grid de 24px, recortados em
   máscara para herdarem a cor do item. */
.side .menu-btn::before {
  content: "" !important;
  width: 18px !important; height: 18px !important;
  min-width: 0 !important; flex: none !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important; font-size: 0 !important; line-height: 0 !important;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
  opacity: .8;
}
.side .menu-btn.active::before { opacity: 1; }

/* "Mais" é controle de menu do mobile; não é destino no desktop */
@media (min-width: 861px) { .side .mobile-more-button { display: none !important; } }

/* botão injetado por JS: alinhar ao resto do menu */
.side .delivery-settings-button {
  margin: 0 !important; padding: 0 12px !important;
  border: 0 !important; border-radius: var(--hip-r-peq) !important;
}

/* ================================================================
   TOPO E SAUDAÇÃO
   ================================================================ */

/* A barra de cima repetia a marca que já está na lateral e carregava
   um status que quase sempre diz a mesma coisa. Sai do desktop.
   No mobile ela permanece, porque contém o botão "Menu" — única
   forma de abrir a navegação no celular. */
@media (min-width: 861px) {
  .top.no-print { display: none !important; }
}
.top .brand-text, .top .brand-monogram { display: none !important; }
.top {
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; padding: 0 !important; min-height: 0 !important;
}

/* Sincronização só faz sentido para quem trabalha offline em campo:
   o entregador. body.deliverer-mobile é ligado em applyPermissions()
   quando o perfil é entregador puro (sem emissor nem admin). */
#syncPanel { display: none !important; }
body.deliverer-mobile #syncPanel {
  display: flex !important;
  border-radius: 999px !important;
  border: 1px solid var(--hip-fio) !important;
  background: var(--hip-branco) !important;
  box-shadow: var(--hip-sombra) !important;
}
body.deliverer-mobile #syncStatus { color: var(--hip-tinta-70); font-weight: 600; }
body.deliverer-mobile .sync-action { color: var(--azul-texto); font-weight: 700; }

/* Ênfase dourada no nome de quem está logado — o mesmo recurso que o
   site usa em "ir além". */
#dashGreeting .realce {
  background: linear-gradient(100deg, var(--hip-ouro-1) 0%, var(--hip-ouro-2) 50%, var(--hip-ouro-3) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ----------------------------------------------------------------
   Perfis com abertura em cartão escuro
   ----------------------------------------------------------------
   #dashboard[data-role="emissor"] e ["entregador"] pintam a abertura
   com gradiente escuro próprio. As cores de texto do tema (quase
   pretas) ficariam ilegíveis ali, então são reabertas em claro.
   O perfil "admin" segue sobre o papel, sem cartão. */
#dashboard[data-role="emissor"] .command-hero-copy h2,
#dashboard[data-role="entregador"] .command-hero-copy h2 { color: #fff; }

#dashboard[data-role="emissor"] .command-hero-copy p,
#dashboard[data-role="entregador"] .command-hero-copy p { color: rgba(255,255,255,.82); }

#dashboard[data-role="emissor"] .command-date,
#dashboard[data-role="entregador"] .command-date { color: rgba(255,255,255,.7); }

#dashboard[data-role="emissor"] .command-overline,
#dashboard[data-role="entregador"] .command-overline { color: rgba(255,255,255,.88); }

/* o cartão do próximo protocolo continua claro sobre o escuro */
#dashboard[data-role="emissor"] .command-next,
#dashboard[data-role="entregador"] .command-next {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); box-shadow: none;
}
#dashboard[data-role="emissor"] .command-next span,
#dashboard[data-role="entregador"] .command-next span { color: rgba(255,255,255,.7); }

/* ================================================================
   ÍCONES DO MENU — redesenhados para 18px
   ----------------------------------------------------------------
   A primeira versão usava formas assimétricas e detalhadas (grade de
   4 retângulos desiguais, caminhão com rodas, duas pessoas). Nesse
   tamanho viravam borrões. Aqui tudo é simétrico, alinhado ao grid de
   24 e com traço 2 — o que sobrevive à redução.
   ================================================================ */
.side .menu-btn::before { width: 19px !important; height: 19px !important; }

/* grade 2×2 simétrica, não quatro retângulos desiguais */
.side button[data-view="dashboard"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='2'/%3E%3Crect x='13' y='4' width='7' height='7' rx='2'/%3E%3Crect x='4' y='13' width='7' height='7' rx='2'/%3E%3Crect x='13' y='13' width='7' height='7' rx='2'/%3E%3C/svg%3E"); }
.side button[data-view="calendar"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E"); }
.side button[data-view="requests"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h10'/%3E%3C/svg%3E"); }
.side button[data-view="new"]        { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
/* caixa em trânsito, mais legível que um caminhão com rodas */
.side button[data-view="deliveries"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 3 4 7v10l8 4 8-4V7z'/%3E%3Cpath d='m4 7 8 4 8-4M12 11v10'/%3E%3C/svg%3E"); }
.side button[data-view="completed"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.side button[data-view="pickups"]    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E"); }
.side button[data-view="companies"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linejoin=%27round%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M4 21V8l6-4v17M10 21h10V12l-6-3%27/%3E%3Cpath d=%27M14 14h2M14 17.5h2M6.5 12h1M6.5 16h1%27/%3E%3C/svg%3E"); }
.side button[data-view="history"]    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3.5 2'/%3E%3C/svg%3E"); }
.side button[data-view="management"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 20V11M12 20V5M19 20v-6'/%3E%3C/svg%3E"); }
.side button[data-view="deleted"]    { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13'/%3E%3C/svg%3E"); }
/* uma pessoa, não duas sobrepostas */
.side button[data-view="users"]      { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.side .mobile-scan-button            { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4'/%3E%3Cpath d='M4 12h16'/%3E%3C/svg%3E"); }
/* engrenagem simplificada: 4 dentes em vez de 8 */
.side .delivery-settings-button      { --ic: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%273.2%27/%3E%3Cpath d=%27M10.2 3.6h3.6l.4 2.5 2.2 1.3 2.3-1 1.8 3.1-1.9 1.6v2.6l1.9 1.6-1.8 3.1-2.3-1-2.2 1.3-.4 2.5h-3.6l-.4-2.5-2.2-1.3-2.3 1-1.8-3.1 1.9-1.6v-2.6L3.5 9.5l1.8-3.1 2.3 1 2.2-1.3z%27/%3E%3C/svg%3E"); }

/* ----------------------------------------------------------------
   A lateral não pode encolher.
   Ela é item de um container flex com flex-shrink:1, min-width:0 e
   overflow:hidden. Quando a tela ao lado tem conteúdo largo (tabelas,
   campos de busca), o flex comprimia a barra e os rótulos ficavam
   cortados — sobravam só os ícones. */
.side {
  flex: 0 0 auto !important;
  min-width: 236px !important;
}

/* ----------------------------------------------------------------
   Rodapé e títulos da lateral: cores do tema escuro sobre fundo claro
   ----------------------------------------------------------------
   Estes elementos são alvo de seletores por ID no CSS original, com
   cores pensadas para a lateral escura. Com a barra clara o nome do
   usuário ficava branco sobre branco (contraste 1.00) e o "Sair"
   quase invisível (1.24). Auditado com WCAG AA (4.5:1). */
.side .menu-section-title,
.side #adminSectionTitle,
.side #grupoDocumentos {
  color: var(--n-500) !important;
}

.side #currentUserName {
  color: var(--hip-tinta) !important;
  font-size: 13.5px; font-weight: 700;
}
.side #currentUserRole {
  color: var(--n-500) !important;
  font-weight: 600;
}
.side .logout-btn {
  color: var(--hip-tinta-70) !important;
  background: var(--hip-branco) !important;
  border: 1px solid var(--hip-fio) !important;
  border-radius: 999px !important;
  font-weight: 700;
}
.side .logout-btn:hover {
  color: var(--hip-tinta) !important;
  border-color: var(--hip-fio-forte) !important;
  box-shadow: var(--hip-sombra) !important;
}
/* o avatar tem fundo próprio: texto branco sobre azul continua certo */
.side #currentUserAvatar {
  background: var(--hip-azul) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.side .demo { color: var(--n-500) !important; }

/* item ativo: #0078c0 sobre a lavanda dava 4.23:1, abaixo do AA.
   Um azul um pouco mais fechado resolve sem mudar a identidade. */
.side .menu-btn.active,
.side button.menu-btn.active,
aside.side button.menu-btn.active { color: var(--azul-600) !important; }

/* ----------------------------------------------------------------
   Tinta dos ícones do menu
   ----------------------------------------------------------------
   O ::before herda `color: #fff` do CSS da lateral escura, então
   `background: currentColor` pintava os ícones de branco sobre fundo
   claro (contraste 1.12 no ativo, 2.49 nos demais). A máscara sempre
   esteve certa — faltava tinta. Aqui a cor é explícita. */
.side .menu-btn::before          { background: var(--n-500) !important; opacity: 1 !important; }
.side .menu-btn:hover::before    { background: var(--hip-destaque) !important; }
.side .menu-btn.active::before   { background: var(--azul-600) !important; }

/* ================================================================
   LATERAL SEM ROLAGEM
   ----------------------------------------------------------------
   Com 11 itens (396px), 4 títulos (88px), conta e logo, o conteúdo
   passava de 797px contra 746px de tela. Dois movimentos:
   1) consolidar as três telas de administração numa só (feito no
      HTML) — tira 2 itens e 1 título, ~94px;
   2) apertar o espaçamento sem sacrificar o alvo de toque, que
      continua em 34px de altura.
   ================================================================ */
.side { padding: 14px 12px !important; }
.side .brand { padding: 2px 6px 11px !important; margin-bottom: 2px !important; }
.side .brand img { max-width: 150px !important; }

.side .menu-section-title { margin: 13px 10px 5px !important; }
.side .menu-btn, .side button.menu-btn { min-height: 34px !important; }
.side nav { gap: 1px; }

.side .sidebar-account { margin-top: 12px !important; padding-top: 11px !important; }
/* o texto institucional do rodapé é decorativo e custava altura */
.side .demo { display: none !important; }
/* o botão de configurações agora mora dentro do hub de administração */
.side .delivery-settings-button { display: none !important; }

/* ícone do novo item de menu */
.side button[data-view="admin"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5.5c0 4.2-2.9 8-7 9.5-4.1-1.5-7-5.3-7-9.5V6z'/%3E%3C/svg%3E"); }

/* ================================================================
   ADMINISTRAÇÃO — uma tela, três áreas
   ----------------------------------------------------------------
   Usuários e Protocolos excluídos eram telas separadas no menu.
   Agora são painéis desta tela: as seções originais são movidas para
   cá em tempo de execução, preservando IDs e manipuladores.
   ================================================================ */
.admin-abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.admin-aba {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 18px 0 42px;
  border: 1px solid var(--hip-fio); border-radius: 999px;
  background: var(--hip-branco); color: var(--hip-tinta-70);
  font-size: 13.5px; font-weight: 600;
  transition: all .3s var(--hip-mola);
}
.admin-aba:hover { color: var(--hip-tinta); border-color: var(--hip-fio-forte); transform: translateY(-1px); }
.admin-aba[aria-pressed="true"] {
  background: var(--hip-destaque); border-color: var(--hip-destaque); color: var(--hip-destaque-tinta); font-weight: 700;
}
.admin-aba::before {
  content: ""; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}
.admin-aba[data-ic="users"]   { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 20a7 7 0 0 1 14 0'/%3E%3C/svg%3E"); }
.admin-aba[data-ic="deleted"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13'/%3E%3C/svg%3E"); }
.admin-aba[data-ic="config"]  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M10.2 3.6h3.6l.4 2.5 2.2 1.3 2.3-1 1.8 3.1-1.9 1.6v2.6l1.9 1.6-1.8 3.1-2.3-1-2.2 1.3-.4 2.5h-3.6l-.4-2.5-2.2-1.3-2.3 1-1.8-3.1 1.9-1.6v-2.6L3.5 9.5l1.8-3.1 2.3 1 2.2-1.3z'/%3E%3C/svg%3E"); }

#adminPaineis { margin-top: 18px; }
.admin-painel { display: none; }
.admin-painel.ativo { display: block; }

/* ================================================================
   ESQUEMA DE CORES
   ----------------------------------------------------------------
   A página nunca declarou color-scheme. Com o sistema em modo
   escuro, o navegador resolvia as cores de sistema (Canvas) para
   preto — e o <dialog>, que não define background próprio, ficava
   preto com o texto escuro que o CSS já definia. Ilegível.
   Também afeta campos nativos, select e barras de rolagem.
   A interface é clara: declaramos isso explicitamente.
   ================================================================ */
:root { color-scheme: light; }

/* rede de segurança: mesmo que o esquema mude, diálogo é claro */
dialog {
  background: var(--hip-branco);
  color: var(--hip-tinta);
  border-radius: var(--hip-r-card);
  box-shadow: var(--hip-sombra-alta);
}
dialog::backdrop { background: rgba(11,22,40,.55); backdrop-filter: blur(3px); }

/* ================================================================
   LOGO CLICÁVEL E BOTÃO VOLTAR
   ================================================================ */
/* a marca virou <button>: zera aparência de botão, mantém o bloco */
.side button.brand {
  width: 100%; border: 0; background: transparent; cursor: pointer;
  text-align: center; font: inherit;
  transition: opacity .25s var(--hip-mola);
}
.side button.brand:hover { opacity: .78; }

/* As telas trocam por JavaScript, então o botão do navegador não serve.
   Este aparece só quando existe para onde voltar. */
.voltar {
  position: sticky; top: 18px; z-index: 45;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; margin: 0 0 14px; padding: 0 18px;
  border: 1px solid var(--hip-fio); border-radius: 999px;
  background: var(--hip-vidro); backdrop-filter: blur(14px);
  color: var(--hip-tinta-70); font-size: 13.5px; font-weight: 700;
  box-shadow: var(--hip-sombra);
  transition: all .3s var(--hip-mola);
}
.voltar:hover { color: var(--hip-tinta); border-color: var(--hip-fio-forte); transform: translateX(-2px); }
.voltar[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .voltar:hover { transform: none; } }

/* ================================================================
   VISÃO GERAL MAIS COMPACTA
   ----------------------------------------------------------------
   Medido: hero 196 + calendário 372 + métricas 126 + workspace 476
   + prazos 186 = 1421px. O workspace era o maior, e na maior parte
   do tempo está vazio. Compactamos sem encolher alvo de toque: as
   células do calendário ficam em 38px, acima do mínimo confortável.
   ================================================================ */

/* abertura: menos altura morta à direita */
.command-hero {
  min-height: 0 !important;
  padding: 24px 26px !important;
  margin-bottom: 14px !important;
}
.command-hero-copy h2 { font-size: clamp(25px, 2.7vw, 34px); margin-top: 10px; }
.command-hero-copy p { margin-top: 8px; font-size: 14px; }

/* calendário: célula menor, grade mais junta */
.month-day { min-height: 38px !important; padding: 6px 6px 12px !important; }
.month-calendar-grid { gap: 4px !important; }
.command-calendar-panel { padding: 16px !important; gap: 14px !important; }
.month-calendar-head { margin-bottom: 9px !important; }
.month-calendar-side { padding: 12px !important; }
/* o painel do dia esticava para acompanhar a grade; agora acompanha o conteúdo */
.month-calendar-side { align-self: start; }
.month-calendar-events { max-height: 150px !important; }

/* métricas: mesma leitura, menos respiro */
.command-metrics { gap: 10px !important; margin-bottom: 14px !important; }
.command-metric { padding: 14px 16px !important; }

/* workspace e prazos: estados vazios não precisam de meia tela */
.command-workspace { gap: 14px !important; margin-bottom: 14px !important; align-items: start !important; }
.command-workspace > *, .command-deadlines { padding: 16px !important; }
.command-workspace .empty,
.command-deadlines .empty,
#dueDashboardSection .empty {
  padding: 18px !important; min-height: 0 !important;
}
.command-actions-panel { align-self: start; }

/* títulos de seção internos */
.command-section-head { margin-bottom: 10px !important; }
.command-section-head h2, .command-section-head h3 { font-size: 18px !important; }

/* cabeçalho de tela com ação principal à direita */
.tela-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.tela-topo > div { min-width: 0; }
.tela-topo .tela-acao { flex: none; }

/* a marca ficava encostada à esquerda: `margin: 0` no lugar de `0 auto` */
.side .brand img { margin: 0 auto !important; }

/* ícones usados pela tela de retiradas */
:root {
  --ic-busca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --ic-sacola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230078c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E");
}

/* ================================================================
   ACOMPANHAR RETIRADAS — redesenho
   ----------------------------------------------------------------
   O CSS deste módulo é injetado por pickups.js em tempo de execução,
   depois deste arquivo, então vence por ordem da cascata. Prefixamos
   com `html` para ganhar especificidade sem espalhar !important.
   A tela tinha paleta própria (#123e60, #1ea2c9), rótulo flutuante
   desalinhando a barra e estado vazio ocupando meia tela.
   ================================================================ */

/* ---------- cabeçalho: título e ações na mesma linha ---------- */
html #pickups .pickup-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
html #pickups .pickup-hero h2 {
  margin: 6px 0 0; font-size: 26px; font-weight: 800;
  letter-spacing: -.022em; line-height: 1.05; color: var(--hip-tinta);
}
html #pickups .pickup-hero p {
  margin: 6px 0 0; max-width: 58ch;
  color: var(--hip-tinta-45); font-size: 13.5px; line-height: 1.5;
}
html #pickups .kicker {
  display: flex; align-items: center; gap: 11px; color: var(--azul-texto);
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
html #pickups .kicker::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; flex: none;
}

/* ---------- botões na linguagem do sistema ---------- */
html #pickups button {
  min-height: 40px; margin: 0; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: var(--hip-azul); color: #fff;
  font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,120,192,.28);
  transition: transform .3s var(--hip-mola), box-shadow .3s var(--hip-mola);
}
html #pickups button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,120,192,.36); }
html #pickups button.secondary {
  background: var(--hip-branco); color: var(--hip-tinta-70);
  border: 1px solid var(--hip-fio); box-shadow: none;
}
html #pickups button.secondary:hover {
  color: var(--hip-tinta); border-color: var(--hip-fio-forte); box-shadow: var(--hip-sombra);
}
html #pickups .pickup-head-actions { gap: 9px; }

/* ---------- barra de filtros ---------- */
html #pickups .pickup-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 12px; border: 0; border-radius: var(--hip-r-card);
  background: var(--hip-branco); box-shadow: var(--hip-sombra);
}
html #pickups .pickup-tabs { gap: 6px; }
html #pickups .pickup-tabs button {
  min-height: 38px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--hip-fio); background: var(--hip-branco);
  color: var(--hip-tinta-70); font-size: 13px; font-weight: 600; box-shadow: none;
}
html #pickups .pickup-tabs button:hover {
  background: var(--hip-papel); color: var(--hip-tinta);
  border-color: var(--hip-fio-forte); transform: none; box-shadow: none;
}
html #pickups .pickup-tabs button span {
  min-width: 22px; height: 20px; margin-left: 7px; padding: 0 6px;
  border-radius: 999px; background: var(--hip-papel);
  color: var(--hip-tinta-45); font-size: 11px; font-weight: 800;
}
html #pickups .pickup-tabs [aria-pressed="true"] {
  background: var(--hip-destaque); border-color: var(--hip-destaque);
  color: var(--hip-destaque-tinta); font-weight: 700; box-shadow: none;
}
html #pickups .pickup-tabs [aria-pressed="true"] span { background: rgba(255,255,255,.2); color: #fff; }

/* o rótulo flutuante desalinhava a barra; ícone e placeholder bastam */
html #pickups .pickup-search { position: relative; width: min(320px, 100%); margin: 0; }
html #pickups .pickup-search .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
html #pickups .pickup-search input {
  width: 100%; min-height: 38px; margin: 0; padding: 0 14px 0 38px;
  border: 1px solid var(--hip-fio); border-radius: 999px;
  background: var(--hip-papel); font-size: 13.5px;
}
html #pickups .pickup-search input:focus {
  outline: none; border-color: var(--azul-texto);
  background: var(--hip-branco); box-shadow: 0 0 0 4px var(--hip-azul-12);
}
html #pickups .pickup-search::before {
  content: ""; position: absolute; left: 14px; top: 50%; z-index: 1;
  width: 15px; height: 15px; transform: translateY(-50%);
  background: var(--hip-tinta-45);
  -webkit-mask: var(--ic-busca) center / contain no-repeat;
  mask: var(--ic-busca) center / contain no-repeat;
}

html #pickups .pickup-message { margin: 12px 2px 0; color: var(--hip-tinta-70); font-size: 13.5px; }

/* ---------- estado vazio: compacto, com ícone ---------- */
html #pickups .pickup-empty {
  display: grid; justify-items: center; gap: 8px;
  margin-top: 14px; padding: 34px 24px;
  border: 1px dashed var(--hip-fio); border-radius: var(--hip-r-card);
  background: var(--hip-branco); color: var(--hip-tinta-45);
}
html #pickups .pickup-empty::before {
  content: ""; width: 46px; height: 46px; margin-bottom: 4px;
  border-radius: 50%; background-color: var(--hip-lavanda);
  background-image: var(--ic-sacola);
  background-position: center; background-size: 22px; background-repeat: no-repeat;
}
html #pickups .pickup-empty strong {
  font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--hip-tinta);
}
html #pickups .pickup-empty p {
  margin: 0; max-width: 44ch; text-align: center; font-size: 13.5px; line-height: 1.55;
}

/* ---------- cartões de retirada ---------- */
html #pickups .pickup-company-group {
  margin: 20px 2px 8px; color: var(--hip-tinta-45);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
/* Cada empresa é um bloco: o nome e a situação do processo ficam no topo,
   e os cartões de retirada dela ficam abaixo. */
html #pickups .pickup-group { margin: 22px 0 0; }
html #pickups .pickup-group-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 4px 10px; border-bottom: 2px solid var(--hip-tinta);
}
html #pickups .pickup-group-name { display: grid; gap: 2px; min-width: 0; }
html #pickups .pickup-group-name strong {
  color: var(--hip-tinta); font-size: 17px; font-weight: 800; letter-spacing: -.02em;
}
html #pickups .pickup-group-name small { color: var(--hip-tinta-45); font-size: 12.5px; }
html #pickups .pickup-group-counts { display: flex; flex-wrap: wrap; gap: 6px; }
html #pickups .pickup-count {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hip-fio);
  color: var(--hip-tinta-45); font-size: 12px; font-weight: 700; white-space: nowrap;
}
html #pickups .pickup-count.active { color: var(--azul-texto); background: var(--hip-lavanda); border-color: transparent; }
html #pickups .pickup-count.review { color: var(--hip-ambar); background: var(--hip-ambar-12); border-color: transparent; }
html #pickups .pickup-count.done { color: var(--hip-verde); background: var(--hip-verde-12); border-color: transparent; }
html #pickups details.pickup-card {
  margin: 8px 0; border: 1px solid var(--hip-fio); border-radius: var(--hip-r-card);
  background: var(--hip-branco); box-shadow: var(--hip-sombra); overflow: hidden;
  transition: box-shadow .3s var(--hip-mola), border-color .3s var(--hip-mola);
}
html #pickups details.pickup-card:hover { border-color: var(--hip-fio-forte); }
html #pickups details.pickup-card[open] { box-shadow: var(--hip-sombra-alta); border-color: var(--azul-texto); }
html #pickups summary { padding: 16px 18px; }
html #pickups .pickup-title strong { font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
html #pickups .pickup-title small, html #pickups .pickup-meta small {
  color: var(--hip-tinta-45); font-size: 12.5px;
}
html #pickups .pickup-status {
  padding: 5px 12px; border-radius: 999px;
  background: var(--hip-lavanda); color: var(--azul-texto);
  font-size: 11.5px; font-weight: 700;
}
html #pickups .pickup-status::before { width: 6px; height: 6px; background: currentColor; }
html #pickups .pickup-status.review { background: var(--hip-ambar-12); color: var(--hip-ambar); }
html #pickups .pickup-status.done { background: var(--hip-verde-12); color: var(--hip-verde); }
html #pickups .pickup-chevron { color: var(--hip-tinta-45); }
html #pickups .pickup-detail {
  border-top: 1px solid var(--hip-fio-2); background: var(--hip-papel); padding: 18px;
}
html #pickups .pickup-fact {
  border: 1px solid var(--hip-fio); border-radius: var(--hip-r-peq); background: var(--hip-branco);
}
html #pickups .pickup-fact span {
  color: var(--hip-tinta-45); font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
html #pickups .pickup-fact strong { color: var(--hip-tinta); font-size: 12.5px; }
html #pickups .pickup-doc-list li { border-bottom: 1px solid var(--hip-fio-2); }
html #pickups .pickup-doc-list small { color: var(--hip-tinta-45); }
html #pickups .pickup-create form, html #pickups .pickup-review {
  border: 1px solid var(--hip-fio); border-radius: var(--hip-r-card);
  background: var(--hip-branco); box-shadow: var(--hip-sombra);
}
html #pickups input, html #pickups select, html #pickups textarea {
  border: 1px solid var(--hip-fio); border-radius: var(--hip-r-peq); background: var(--hip-papel);
}
html #pickups input:focus, html #pickups select:focus, html #pickups textarea:focus {
  outline: none; border-color: var(--azul-texto);
  background: var(--hip-branco); box-shadow: 0 0 0 4px var(--hip-azul-12);
}

/* ================================================================
   SAÍDA DOS DIÁLOGOS
   ----------------------------------------------------------------
   O único botão de fechar ficava no rodapé. Em formulários longos
   como "Nova retirada" era preciso rolar até o fim só para sair.
   Agora o cabeçalho é fixo e leva o Voltar junto.
   ================================================================ */
html .pickup-dialog .pickup-dialog-top {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px 26px 14px;
  background: var(--hip-branco);
  border-bottom: 1px solid var(--hip-fio-2);
}
html .pickup-dialog .pickup-dialog-top h2 {
  margin: 0; font-size: 22px; font-weight: 800;
  letter-spacing: -.022em; color: var(--hip-tinta);
}
html .pickup-dialog .pickup-voltar {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; margin: 0; padding: 0 15px;
  border: 1px solid var(--hip-fio); border-radius: 999px;
  background: var(--hip-branco); color: var(--hip-tinta-70);
  font-size: 13px; font-weight: 700; box-shadow: none;
}
html .pickup-dialog .pickup-voltar:hover {
  color: var(--hip-tinta); border-color: var(--hip-fio-forte);
  transform: translateX(-2px); box-shadow: var(--hip-sombra);
}
/* o rodapé continua, para quem chega ao fim do formulário */
html .pickup-dialog .close-modal {
  margin: 0 26px 22px; padding: 0 18px; min-height: 38px;
  border: 1px solid var(--hip-fio); border-radius: 999px;
  background: var(--hip-branco); color: var(--hip-tinta-70);
  font-weight: 700; box-shadow: none;
}
html .pickup-dialog .close-modal:hover {
  color: var(--hip-tinta); border-color: var(--hip-fio-forte); box-shadow: var(--hip-sombra);
}
html .pickup-dialog > h2 { display: none; }

@media (prefers-reduced-motion: reduce) {
  html .pickup-dialog .pickup-voltar:hover { transform: none; }
}

/* ================================================================
   TRÊS CORREÇÕES
   ================================================================ */

/* 1. Diálogo tinha duas saídas: "Voltar" fixo no topo e "Fechar" no
      rodapé. Com o cabeçalho fixo, o de baixo virou repetição. */
html .pickup-dialog .close-modal { display: none; }

/* 2. O Voltar da página continuava visível por baixo do diálogo, então
      apareciam dois botões iguais ao mesmo tempo. Enquanto houver um
      diálogo aberto, quem manda é o do diálogo. */
body:has(dialog[open]) .voltar { display: none !important; }

/* 3. O crachá do box fica em .company-actions, que é flex. Como item
      flex ele esticava para os 40px dos botões ao lado e virava uma
      pílula enorme. É identificação, não ação: não deve esticar nem
      competir com os botões. */
html .company-box {
  align-self: center;
  height: auto; min-height: 0;
  padding: 5px 11px;
  font-size: 11px; font-weight: 800; line-height: 1.4;
  border-color: var(--hip-fio);
  background: var(--hip-lavanda);
}
html .company-actions { align-items: center; gap: 8px; flex-wrap: wrap; }

/* ================================================================
   VISÃO GERAL — segunda passada de compactação
   ----------------------------------------------------------------
   Medido: atalhos do perfil 460px (232 só de botões, 86 do símbolo
   decorativo), cartão de métrica com min-height fixo de 126px.
   Nada é removido: tudo continua na tela, só mais junto.
   O cartão da abertura não é tocado.
   ================================================================ */

/* métricas: o min-height fixo segurava 126px mesmo com pouco conteúdo */
.command-metric { min-height: 0 !important; padding: 13px 15px !important; }
.command-metric .num { font-size: 27px !important; line-height: 1.1; }
.command-metric-mark { width: 30px !important; height: 30px !important; }

/* atalhos do perfil: o bloco mais alto da tela */
.command-actions-panel .command-actions-symbol {
  height: 46px !important; width: 46px !important; margin-bottom: 10px !important;
}
.command-actions-panel h2 { font-size: 19px !important; margin: 4px 0 0 !important; }
.command-actions-panel p { min-height: 0 !important; margin: 6px 0 0 !important; font-size: 12.5px !important; }
.command-actions { gap: 7px !important; margin-top: 12px !important; }
.command-actions button, .command-actions .primary {
  min-height: 36px !important; padding: 0 16px !important; font-size: 13px !important;
}
.command-session { padding-top: 10px !important; }

/* calendário: respiro interno menor, grade e painel do dia intactos */
.command-calendar-panel { padding: 14px !important; }
.month-calendar-side { padding: 11px !important; }
.month-calendar-legend { padding-top: 10px !important; }

/* radar de prazos e fila: cabeçalhos mais justos */
.command-deadlines .command-section-head,
.command-queue .command-section-head { margin-bottom: 8px !important; }
.due-dashboard-item { padding: 11px 13px !important; }

/* ================================================================
   CARTÃO DE MÉTRICA — redesenho
   ----------------------------------------------------------------
   O marcador ordinal ("01", "02", "%") é position:absolute e, com o
   cartão compacto, virava um borrão pálido sobre o texto. Ele é
   índice, não dado: perde o disco de fundo e vai para o canto, leve.
   O número e o rótulo ganham o espaço de volta.
   ================================================================ */
.command-metric {
  position: relative;
  display: flex !important; align-items: center; gap: 14px !important;
  min-height: 0 !important; padding: 15px 16px !important;
  grid-template-columns: none !important;
}
.command-metric .num {
  flex: none; font-size: 30px !important; font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.command-metric > div:last-of-type { min-width: 0; }
.command-metric strong {
  display: block; font-size: 14px; font-weight: 700; letter-spacing: -.015em;
}
.command-metric small {
  display: block; margin-top: 2px;
  color: var(--hip-tinta-45); font-size: 12px; line-height: 1.35;
}
/* índice discreto no canto, sem disco */
.command-metric .command-metric-mark {
  position: absolute; top: 10px; right: 12px;
  width: auto !important; height: auto !important;
  padding: 0; border: 0; border-radius: 0;
  background: none !important; box-shadow: none;
  color: var(--hip-tinta-45); opacity: .5;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
}

/* ================================================================
   PAINÉIS RETRÁTEIS
   ================================================================ */
[hidden] { display: none !important; }

.painel-alternar {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--hip-fio); border-radius: 50%;
  background: var(--hip-branco); color: var(--hip-tinta-70);
  cursor: pointer;
  transition: all .3s var(--hip-mola);
}
.painel-alternar:hover {
  border-color: var(--azul-texto); background: var(--hip-azul); color: #fff;
}
.painel-seta {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--hip-mola);
}
.painel-alternar[aria-expanded="false"] .painel-seta {
  transform: rotate(-135deg) translate(-2px, -2px);
}
/* painéis sem cabeçalho próprio recebem o botão no canto */
.painel-com-canto { position: relative; }
.painel-com-canto > .painel-alternar { position: absolute; top: 14px; right: 14px; z-index: 2; }
/* recolhido: sem respiro sobrando embaixo */
[data-recolhido="1"] { padding-bottom: 14px !important; }
[data-recolhido="1"].command-calendar-panel { display: block !important; }

@media (prefers-reduced-motion: reduce) {
  .painel-seta { transition: none; }
}

/* dica do modo do calendário, ao lado da navegação de mês */
/* dica do modo do calendário {
  margin-right: 10px;
  color: var(--hip-tinta-45);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.month-calendar-nav { align-items: center; }

/* ================================================================
   FAIXA DE DUAS SEMANAS
   ----------------------------------------------------------------
   A primeira versão reservava 48px de altura para a barra de carga —
   com a agenda vazia, eram 48px de nada em cada coluna, e o resto
   ficava espremido embaixo. Agora o indicador só existe quando há
   vencimento, e a coluna respira.
   ================================================================ */
/* ================================================================
   FAIXA DE DUAS SEMANAS
   ----------------------------------------------------------------
   A primeira versão reservava 48px de altura para a barra de carga —
   com a agenda vazia,
eram 48px de nada em cada coluna,
e o resto
   ficava espremido embaixo. Agora o indicador só existe quando há
   vencimento {
  display: grid; grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 7px; margin-top: 14px;
}
/* O realce do dia nao pode mover o proprio alvo. Com translateY o
   botao sobe dois pixels; o ponteiro que estava nos dois pixels de
   baixo deixa de estar sobre ele, o hover cai, o botao volta, o hover
   volta — e isso pisca enquanto o ponteiro ficar ali. A borda de um
   alvo pequeno e justamente onde o ponteiro mais passa.

   O destaque passa a ser so cor, borda e sombra, que nao mexem na
   geometria e por isso nao tem como se auto-desfazer. */
/* O realce do dia nao pode mover o proprio alvo. Com translateY o
   botao sobe dois pixels; o ponteiro que estava nos dois pixels de
   baixo deixa de estar sobre ele,
o hover cai,
o botao volta,
o hover
   volta — e isso pisca enquanto o ponteiro ficar ali. A borda de um
   alvo pequeno e justamente onde o ponteiro mais passa.

   O destaque passa a ser so cor,
borda e sombra {
  background: var(--hip-branco); border-color: var(--hip-fio);
  box-shadow: var(--hip-sombra);
}
/* fim de semana: só o texto recua, sem buraco no fundo */
/* fim de semana: só o texto recua { color: var(--hip-tinta-45); }

/* hoje: preenchido, não só contornado */
/* hoje: preenchido { background: var(--hip-destaque); border-color: var(--hip-destaque); }

/* O dia aberto no painel de baixo: contorno, nao preenchimento — o
   preenchimento ja pertence a hoje, e os dois precisam coexistir. */
/* O dia aberto no painel de baixo: contorno,
nao preenchimento — o
   preenchimento ja pertence a hoje {
  border-color: var(--hip-azul) !important;
  box-shadow: inset 0 0 0 1.5px var(--hip-azul);
}

/* O contador do dia era um disco azul cheio com numero branco. Numa
   faixa de catorze dias, os dois ou tres que tem carga viravam a unica
   coisa que se enxerga — e a faixa existe justamente para dar panorama.
   Vira pastilha de superficie azul com numero azul escuro: continua
   sendo a unica cor da faixa, mas conta em vez de chamar. */
/* O contador do dia era um disco azul cheio com numero branco. Numa
   faixa de catorze dias,
os dois ou tres que tem carga viravam a unica
   coisa que se enxerga — e a faixa existe justamente para dar panorama.
   Vira pastilha de superficie azul com numero azul escuro: continua
   sendo a unica cor da faixa {
  min-width: 20px; padding: 2px 6px; border-radius: 999px;
  background: var(--azul-050); color: var(--azul-texto);
  border: 1px solid var(--azul-borda);
  font-size: 10.5px; font-weight: 800; line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* ================================================================
   NUMERAÇÃO DOS CARTÕES DE MÉTRICA
   ----------------------------------------------------------------
   "01", "02", "03", "%" eram numeração decorativa: não diziam nada
   que o próprio cartão já não dissesse, e disputavam espaço com o
   rótulo. Fora.
   ================================================================ */
.command-metric .command-metric-mark { display: none !important; }

/* ================================================================
   BOTÃO DE MENU NO MOBILE
   ----------------------------------------------------------------
   Era um retângulo azul escuro colado no canto, sem fundo próprio,
   flutuando por cima do cartão da abertura. Vira uma pílula branca
   com ícone, igual ao botão Voltar — o mesmo vocabulário de controle
   flutuante, legível sobre qualquer fundo.
   ================================================================ */
@media (max-width: 860px) {
  .top.no-print {
    display: flex !important; align-items: center; gap: 10px;
    padding: 12px 16px 2px !important;
    min-height: 0 !important; background: transparent !important;
  }

  .primary.mobile-menu {
    display: inline-flex !important; align-items: center; gap: 9px;
    min-height: 42px !important; padding: 0 18px 0 15px !important;
    border: 1px solid var(--hip-fio) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(14px);
    color: var(--hip-tinta) !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    box-shadow: var(--hip-sombra) !important;
    transform: none !important;
    transition: background .3s var(--hip-mola), box-shadow .3s var(--hip-mola);
  }
  .primary.mobile-menu::before {
    content: ""; flex: none;
    width: 17px; height: 17px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .primary.mobile-menu:hover, .primary.mobile-menu:active {
    background: var(--hip-branco) !important;
    box-shadow: var(--hip-sombra-alta) !important;
  }

  /* o Voltar acompanha o Menu na mesma linha, sem empilhar */
  .voltar { position: static !important; margin: 0 !important; }
}

/* ================================================================
   MÉTRICAS NO MOBILE
   ----------------------------------------------------------------
   Sem a numeração sobra espaço para o rótulo respirar.
   ================================================================ */
@media (max-width: 860px) {
  .command-metric { padding: 14px !important; gap: 12px !important; }
  .command-metric .num { font-size: 26px !important; }
  .command-metric strong { font-size: 13.5px; }
  .command-metric small { font-size: 11.5px; }
}

/* o gradiente escuro do .primary vem como background-image e sobrevivia
   ao shorthand; precisa ser zerado explicitamente */
@media (max-width: 860px) {
  .primary.mobile-menu {
    background-image: none !important;
    background-color: var(--hip-cartao) !important;
  }
}

/* O gradiente escuro vinha de duas regras com !important, e a mais forte
   era button.primary:not(.secondary):not(.danger):not(.warning) — mais
   específica que a minha. Entre !important, vence a especificidade, então
   aqui o seletor precisa superá-la. */
@media (max-width: 860px) {
  html body .top button.primary.mobile-menu:not(.secondary):not(.danger):not(.warning) {
    background: var(--hip-cartao) !important;
    background-image: none !important;
    color: var(--hip-tinta) !important;
    border: 1px solid var(--hip-fio) !important;
    box-shadow: var(--hip-sombra) !important;
  }
}

/* ================================================================
   BARRA INFERIOR PARA TODOS OS PERFIS
   ----------------------------------------------------------------
   Parte da barra que já existia para o entregador: mesma mecânica
   (a própria .side vira barra fixa embaixo), mesma altura de 72px,
   mesmo encaixe com a área segura do aparelho. O que muda é que
   deixa de ser exclusiva do entregador e ganha o indicador luminoso
   no item ativo.

   Escopo em :not(.deliverer-mobile) para não interferir na barra do
   entregador, que já funciona e tem a própria seleção de itens.
   ================================================================ */
@media (max-width: 860px) {
  body:not(.deliverer-mobile) .side {
    display: flex !important;
    position: fixed !important;
    inset: auto 12px max(10px, env(safe-area-inset-bottom)) 12px !important;
    z-index: 60;
    width: auto !important; height: 72px !important;
    margin: 0 !important; padding: 7px !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important; justify-content: space-around !important;
    gap: 2px !important;
    overflow: visible !important;
    background: linear-gradient(180deg, #102336, #0b1826) !important;
    border-radius: 26px !important;
    box-shadow: 0 14px 40px rgba(11,22,40,.34) !important;
    transform: none !important;
  }

  /* na barra só ficam as tarefas principais; o resto vai na gaveta */
  body:not(.deliverer-mobile) .side .brand,
  body:not(.deliverer-mobile) .side .menu-section-title,
  body:not(.deliverer-mobile) .side .sidebar-account,
  body:not(.deliverer-mobile) .side .delivery-settings-button,
  body:not(.deliverer-mobile) .side .demo { display: none !important; }

  body:not(.deliverer-mobile) .side .menu-btn { display: none !important; }
  body:not(.deliverer-mobile) .side .menu-btn[data-view="dashboard"],
  body:not(.deliverer-mobile) .side .menu-btn[data-view="requests"],
  body:not(.deliverer-mobile) .side .busca-nav,
  body:not(.deliverer-mobile) .side .menu-btn[data-view="new"],
  body:not(.deliverer-mobile) .side .mobile-more-button {
    position: relative;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-flow: column nowrap !important;
    align-items: center !important; justify-content: center !important;
    gap: 4px !important;
    min-height: 0 !important; padding: 6px 2px !important;
    border-radius: 18px !important;
    background: transparent !important;
    color: #93aac0 !important;
    font-size: 9.5px !important; font-weight: 700 !important;
    letter-spacing: .02em; text-align: center !important;
    transform: none !important;
  }

  body:not(.deliverer-mobile) .side .menu-btn::before {
    width: 22px !important; height: 22px !important;
    background: currentColor !important;
    opacity: 1 !important;
  }

  /* indicador luminoso do item ativo, como na referência */
  body:not(.deliverer-mobile) .side .menu-btn.active {
    color: #fff !important;
    background: rgba(0,120,192,.18) !important;
  }
  body:not(.deliverer-mobile) .side .menu-btn.active::after {
    content: ""; position: absolute; top: -7px; left: 50%;
    width: 34px; height: 3px; transform: translateX(-50%);
    border-radius: 0 0 4px 4px;
    background: var(--hip-azul);
    box-shadow: 0 0 14px 2px rgba(0,120,192,.85);
  }

  /* a gaveta reaproveita o mesmo comportamento do entregador */
  body:not(.deliverer-mobile).mobile-nav-expanded .side {
    height: auto !important; max-height: 78vh !important;
    inset: auto 12px max(10px, env(safe-area-inset-bottom)) 12px !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important; justify-content: flex-start !important;
    overflow-y: auto !important; padding: 12px !important;
    border-radius: 26px !important;
  }
  body:not(.deliverer-mobile).mobile-nav-expanded .side .menu-btn:not(.hidden),
  body:not(.deliverer-mobile).mobile-nav-expanded .side .busca-nav {
    display: flex !important;
    flex: none !important; width: 100% !important;
    flex-flow: row nowrap !important; justify-content: flex-start !important;
    gap: 12px !important; min-height: 50px !important; padding: 0 14px !important;
    font-size: 14px !important; border-radius: 14px !important;
  }
  body:not(.deliverer-mobile).mobile-nav-expanded .side .menu-section-title {
    display: block !important; color: #6f89a0 !important; margin: 12px 10px 4px !important;
  }
  body:not(.deliverer-mobile).mobile-nav-expanded .side .menu-btn.active::after { display: none; }

  /* o conteúdo precisa de espaço para a barra não cobrir o fim da tela */
  body:not(.deliverer-mobile) .main { padding-bottom: 96px !important; }
}

/* ícone da busca na barra */
.side .busca-nav { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E"); }
.side .busca-nav::before {
  content: "" !important; width: 19px; height: 19px; flex: none;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

/* ================================================================
   BUSCA UNIVERSAL
   ================================================================ */
.busca-caixa {
  position: fixed; inset: 0; z-index: 90;
  /* centrado: a lupa viaja da barra até o meio da tela, e é de lá
     que a barra de pesquisa se estende */
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(11,22,40,.5); backdrop-filter: blur(4px);
}
.busca-caixa[hidden] { display: none !important; }

.busca-painel {
  width: min(640px, 100%);
  border-radius: 24px; background: var(--hip-branco);
  box-shadow: var(--hip-sombra-alta); overflow: hidden;
  animation: subir .32s var(--hip-mola) both;
}
.busca-campo {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 16px 16px 16px 18px; border-bottom: 1px solid var(--hip-fio-2);
}
.busca-lupa {
  width: 19px; height: 19px; flex: none; background: var(--hip-tinta-45);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.busca-campo input {
  flex: 1; min-width: 0; min-height: 30px;
  border: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 16px; font-weight: 600; color: var(--hip-tinta);
}
.busca-campo input:focus { outline: none; }
/* O input em si não tem borda nem contorno (field invisível, pílula visual
   é o .busca-campo por fora) — por isso o anel de foco vai no pai, via
   :focus-within, em vez de sumir sem substituto quando o campo foca. */
.busca-campo:focus-within { box-shadow: inset 0 0 0 2px var(--hip-azul-12); border-radius: 12px; }
.busca-campo input::placeholder { color: var(--hip-tinta-45); font-weight: 500; }
.busca-fechar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  border: 1px solid var(--hip-fio); background: var(--hip-branco); cursor: pointer;
  -webkit-mask: none;
}
.busca-fechar::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--hip-tinta-70);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.busca-fechar:hover { border-color: var(--azul-texto); }

.busca-resultados { max-height: min(56vh, 460px); overflow-y: auto; padding: 8px; }
.busca-grupo {
  padding: 12px 12px 6px; color: var(--azul-texto);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.busca-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px;
  width: 100%; padding: 11px 12px; border: 0; border-radius: var(--hip-r-med);
  background: none; text-align: left; cursor: pointer;
  transition: background .25s var(--hip-mola);
}
.busca-item:hover { background: var(--hip-papel); }
.busca-num {
  min-width: 62px; padding: 6px 9px; border-radius: 10px;
  background: var(--hip-lavanda); color: var(--azul-texto);
  font-size: 12px; font-weight: 800; text-align: center;
  font-variant-numeric: tabular-nums;
}
.busca-num-empresa { background: var(--hip-papel); color: var(--hip-tinta-45); }
.busca-texto b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; }
.busca-texto small { display: block; margin-top: 2px; color: var(--hip-tinta-45); font-size: 12.5px; }
.busca-dica { margin: 0; padding: 26px 18px; color: var(--hip-tinta-45); font-size: 13.5px; line-height: 1.55; text-align: center; }
.busca-dica b { color: var(--hip-tinta); }

body.com-busca { overflow: hidden; }

/* ícone do "Mais": faltava, e o ::before ficava um quadrado sólido */
.side .mobile-more-button { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='5' cy='12' r='1.6'/%3E%3Ccircle cx='12' cy='12' r='1.6'/%3E%3Ccircle cx='19' cy='12' r='1.6'/%3E%3C/svg%3E"); }

@media (max-width: 860px) {
  /* ordem da barra: navegar, buscar, criar, resto */
  body:not(.deliverer-mobile) .side .menu-btn[data-view="dashboard"] { order: 1; }
  body:not(.deliverer-mobile) .side .menu-btn[data-view="requests"]  { order: 2; }
  body:not(.deliverer-mobile) .side .busca-nav                        { order: 3; }
  body:not(.deliverer-mobile) .side .menu-btn[data-view="new"]       { order: 4; }
  body:not(.deliverer-mobile) .side .mobile-more-button               { order: 5; }

  /* rótulos curtos cabem melhor em cinco colunas */
  body:not(.deliverer-mobile) .side .menu-btn {
    font-size: 9px !important; line-height: 1.15; overflow: hidden;
  }

  /* com a barra embaixo, o botão Menu do topo vira repetição do "Mais" */
  body:not(.deliverer-mobile) .primary.mobile-menu { display: none !important; }
  body:not(.deliverer-mobile) .top.no-print { padding: 10px 16px 0 !important; }
}

/* .busca-item é <button>, e uma regra global de botão pinta o texto de
   branco — no painel branco o nome sumia. Cor explícita. */
.busca-item, .busca-item * { color: var(--hip-tinta); }
.busca-texto b { color: var(--hip-tinta) !important; }
.busca-texto small { color: var(--hip-tinta-45) !important; }
.busca-num { color: var(--azul-texto) !important; }
.busca-num-empresa { color: var(--hip-tinta-45) !important; }

/* ================================================================
   A ANIMAÇÃO QUE FALTAVA
   ----------------------------------------------------------------
   .busca-painel pedia `animation: subir`, mas o quadro nunca chegou
   a ser definido em lugar nenhum — o painel aparecia seco, de um
   fotograma para o outro. Aqui ele sobe de baixo, e a lupa sobe
   depois dele, com um empurrãozinho que passa do ponto e volta.
   ================================================================ */
@keyframes subir {
  from { opacity: 0; transform: translateY(28px) scale(.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes lupaSobe {
  0%   { opacity: 0; transform: translateY(18px) scale(.55); }
  55%  { opacity: 1; transform: translateY(-4px) scale(1.12); }
  100% { opacity: 1; transform: none; }
}
@keyframes conteudoSobe {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.busca-lupa { animation: lupaSobe .52s var(--hip-mola) .05s both; }
.busca-campo input,
.busca-resultados { animation: conteudoSobe .44s var(--hip-mola) .11s both; }
.busca-fechar { animation: conteudoSobe .44s var(--hip-mola) .16s both; }

/* o botão da barra acompanha o toque: a lupa levanta antes do painel */
.side .busca-nav::before { transition: transform .34s var(--hip-mola); }
.side .busca-nav:active::before { transform: translateY(-4px) scale(1.15); }

@media (prefers-reduced-motion: reduce) {
  .busca-painel, .busca-lupa, .busca-campo input,
  .busca-resultados, .busca-fechar { animation: none !important; }
  .side .busca-nav:active::before { transform: none; }
}

/* ================================================================
   BARRA DO ENTREGADOR: ESCANEAR E BUSCAR LADO A LADO
   ----------------------------------------------------------------
   A barra nova foi escopada em :not(.deliverer-mobile) para não
   mexer na do entregador, que já funcionava. Só que a lupa nasceu
   dentro desse escopo e o entregador ficou sem ela. Aqui a barra do
   entregador recebe a busca sem perder o Escanear QR, que continua
   sendo o gesto principal de quem está na rua.

   De quebra, os ícones: a regra antiga da barra escura pinta o
   ::before de transparente, e como o tema trocou os símbolos soltos
   por máscaras, os ícones do entregador estavam invisíveis — sobrava
   só o rótulo de 8px. A máscara sempre esteve lá; faltava tinta.
   ================================================================ */
@media (max-width: 860px) {
  body.deliverer-mobile .side { gap: 2px !important; padding: 7px 5px !important; }

  body.deliverer-mobile .side .busca-nav {
    display: flex !important; position: relative !important;
    flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
    height: 58px !important; margin: 0 !important; padding: 5px 1px !important;
    flex-flow: column nowrap !important;
    align-items: center !important; justify-content: center !important;
    gap: 3px !important;
    border: 0 !important; border-radius: 19px !important;
    background: transparent !important;
    color: #f7fbfd !important;
    font-size: 8px !important; font-weight: 700 !important;
    line-height: 1 !important; text-align: center !important;
    transform: none !important; box-shadow: none !important;
  }

  /* seis colunas: o rótulo encolhe um ponto para nada quebrar */
  body.deliverer-mobile .side .menu-btn { font-size: 8px !important; padding: 5px 1px !important; }

  /* tinta dos ícones na barra escura */
  body.deliverer-mobile .side .menu-btn::before,
  body.deliverer-mobile .side .busca-nav::before {
    content: "" !important;
    width: 23px !important; height: 23px !important;
    background: #f7fbfd !important;
    font-size: 0 !important; line-height: 0 !important;
    opacity: .82 !important;
  }
  body.deliverer-mobile .side .menu-btn.active::before { opacity: 1 !important; }

  /* Escanear QR: o mesmo grid de 24px dos outros, e o verde de sempre */
  body.deliverer-mobile .side .mobile-scan-button { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.2'/%3E%3C/svg%3E"); }
  body.deliverer-mobile .side .mobile-scan-button::before {
    content: "" !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16'/%3E%3Crect x='9' y='9' width='6' height='6' rx='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
    background: #62dca9 !important; opacity: 1 !important;
    width: 25px !important; height: 25px !important;
  }
  body.deliverer-mobile .side .busca-nav::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  body.deliverer-mobile .side .mobile-more-button::before {
    content: "" !important;
    background: #f7fbfd !important;
  }

  /* ordem: navegar, escanear no meio, buscar, o resto */
  body.deliverer-mobile .side .menu-btn[data-view="dashboard"]  { order: 1; }
  body.deliverer-mobile .side .menu-btn[data-view="deliveries"] { order: 2; }
  body.deliverer-mobile .side .mobile-scan-button               { order: 3; }
  body.deliverer-mobile .side .busca-nav                        { order: 4; }
  body.deliverer-mobile .side .menu-btn[data-view="completed"]  { order: 5; }
  body.deliverer-mobile .side .mobile-more-button               { order: 6; }

  /* na gaveta a busca volta a ser uma linha como as outras */
  body.deliverer-mobile.mobile-nav-expanded .side .busca-nav {
    width: 100% !important; height: 54px !important;
    flex: none !important; flex-flow: row nowrap !important;
    justify-content: flex-start !important; gap: 9px !important;
    padding: 10px 12px !important; border-radius: 14px !important;
    background: rgba(255,255,255,.07) !important;
    font-size: 10px !important; text-align: left !important;
  }
  body.deliverer-mobile.mobile-nav-expanded .side .busca-nav::before { flex: 0 0 29px !important; }
}

/* ----------------------------------------------------------------
   O marcador de item ativo do menu vertical (uma barra de 3×42px
   colada na borda esquerda) continuava valendo dentro da barra
   horizontal do entregador: virava um risco azul atravessado no
   item. Aqui ele recebe o mesmo indicador luminoso da barra nova.
   ---------------------------------------------------------------- */
@media (max-width: 860px) {
  body.deliverer-mobile:not(.mobile-nav-expanded) .side { overflow: visible !important; }
  body.deliverer-mobile .side .menu-btn.active::after {
    content: ""; position: absolute;
    top: -7px; bottom: auto; left: 50%; right: auto;
    width: 30px; height: 3px; transform: translateX(-50%);
    border-radius: 0 0 4px 4px;
    background: var(--hip-azul);
    box-shadow: 0 0 14px 2px rgba(0,120,192,.85);
  }
  body.deliverer-mobile.mobile-nav-expanded .side .menu-btn.active::after { display: none; }
}

/* ================================================================
   ENTRADA
   ----------------------------------------------------------------
   A versão anterior tinha as cores e a fonte da casa, mas nenhuma
   das marcas que fazem o site institucional parecer o que é: título
   enorme, palavra em degradê dourado, botão em pílula, e o campo
   isométrico de blocos azuis avançando pela tela. Sem isso era um
   formulário genérico pintado de azul.

   Aqui a tela recebe a mesma gramática do site. O campo de blocos é
   desenhado por login.js; se ele não carregar, sobra o formulário
   inteiro sobre papel, funcionando.
   ================================================================ */
/* O :not(.hidden) e obrigatorio. Sem ele esta regra (especificidade 1,2,1)
   vence a .login-screen.hidden (0,2,0) que esconde a tela apos o login, e a
   entrada fica por cima do sistema em z-index 9999: o usuario entra, tudo
   carrega atras, e ele continua olhando o formulario. */
body #loginScreen.login-screen:not(.hidden) {
  display: grid !important;
  place-items: center !important;
  padding: 32px !important;
  overflow: hidden !important;
  background: var(--hip-papel) !important;
}
body #loginScreen.login-screen::before { content: none !important; }

/* ---------------- campo isométrico ---------------- */

.blocos-palco {
  position: absolute; z-index: 0;
  /* Horizonte na base. Numa tela de entrada os dois blocos de conteúdo
     ocupam a largura inteira, então não existe faixa lateral livre: em
     qualquer canto o campo caía atrás do cartão. Embaixo ele aparece
     inteiro, dos dois lados e sob o formulário. */
  inset: auto -12% -17% -12%;
  width: auto; height: 76%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 44%);
  mask-image: linear-gradient(to bottom, transparent 6%, #000 44%);
}
.blocos { width: 100%; height: 100%; display: block; overflow: visible; }

.blocos .face-topo     { fill: url(#hipTopo); }
.blocos .face-direita  { fill: url(#hipDir); }
.blocos .face-esquerda { fill: url(#hipEsq); }

/* os blocos sobem em onda diagonal e depois respiram */
@keyframes blocoEntra {
  from { opacity: 0; transform: translateY(46px); }
  to   { opacity: 1; transform: none; }
}
@keyframes blocoFlutua {
  from { transform: translateY(0); }
  to   { transform: translateY(-7px); }
}
.blocos .bloco {
  animation:
    blocoEntra .85s var(--hip-mola) var(--atraso) both,
    blocoFlutua 5.5s ease-in-out calc(var(--atraso) + 1s) infinite alternate;
}

/* ---------------- estrutura ---------------- */

#loginScreen .login-shell {
  position: relative; z-index: 1;
  width: min(1140px, 100%) !important;
  min-height: 0 !important;
  grid-template-columns: 1.04fr .96fr !important;
  align-items: center;
  gap: 54px;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---------------- lado da marca ---------------- */

#loginScreen .login-hero {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  color: var(--hip-tinta) !important;
  background: none !important;
}
#loginScreen .login-hero::after { content: none !important; }

/* Clareira: o campo de blocos sobe até a altura do texto de apoio e
   comia a legibilidade dele. Este halo de papel fica entre o campo e
   o texto — dentro da pilha do .login-shell, portanto sempre acima
   dos blocos e sempre atrás das letras. */
#loginScreen .login-hero::before {
  content: "" !important;
  position: absolute !important; z-index: -1;
  inset: -54px -90px -64px -80px !important;
  width: auto !important; height: auto !important;
  border: 0 !important; border-radius: 0 !important;
  background: radial-gradient(64% 62% at 50% 52%,
    var(--hip-papel) 34%, var(--hip-papel-88) 58%, var(--hip-papel-00) 100%) !important;
}

#loginScreen .login-brand-panel {
  flex-flow: column nowrap !important;
  align-items: center !important; justify-content: center !important;
  gap: 14px !important; margin-bottom: 38px !important;
}

/* a marca numa pílula branca, como no cabeçalho do site */
#loginScreen .login-logo-wrap {
  width: auto !important; max-width: none !important;
  align-items: center !important;
  padding: 18px 34px !important;
  border: 1px solid var(--hip-fio-2) !important;
  border-radius: 999px !important;
  background: var(--hip-branco) !important;
  box-shadow: var(--hip-sombra) !important;
}
/* o lockup horizontal ocupa a pílula inteira: sem nome avulso ao lado */
#loginScreen .login-logo-wrap img {
  width: 330px !important; max-width: 100% !important; height: auto !important;
}
#loginScreen .login-logo-wrap::after { content: none !important; }

/* O selo "AMBIENTE INTERNO" saiu: quem abre esta tela já sabe onde
   está, e ele competia com a marca logo acima. */
#loginScreen .login-environment { display: none !important; }
#loginScreen .login-environment-desativado {
  align-self: center !important;
  padding: 9px 16px 9px 13px !important;
  border: 1px solid var(--hip-fio) !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(10px);
  color: var(--hip-tinta-70) !important;
  font-size: 10px !important; letter-spacing: .14em !important;
}
#loginScreen .login-environment::before {
  background: var(--hip-verde) !important;
  box-shadow: 0 0 0 3px var(--hip-verde-12) !important;
}

#loginScreen .login-hero-copy {
  position: relative;
  max-width: 540px !important; margin-inline: auto !important;
  text-align: center;
}

/* Olho-de-boi com o traço do site. O traço é o próprio fundo do
   pseudo-elemento, desenhado no recuo à esquerda: assim o conjunto
   traço + texto é uma caixa só, que o text-align centraliza inteira.
   Com o traço em elemento separado ele ficava preso à margem. */
#loginScreen .login-hero-copy::before {
  content: "Assessoria contábil · São Paulo · Desde 1969";
  display: inline-flex; align-items: center;
  margin-bottom: 18px; padding-left: 41px;
  background: linear-gradient(var(--hip-azul), var(--hip-azul))
              no-repeat left center / 28px 2px;
  color: var(--azul-texto);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .17em; text-transform: uppercase;
}

#loginScreen .login-hero-copy h2 {
  margin: 0 0 20px !important;
  color: var(--hip-tinta) !important;
  font-size: clamp(40px, 5.2vw, 62px) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em !important;
  line-height: .99 !important;
}
/* a ênfase em degradê dourado, como "ir além." no site.
   O tom mais claro é #a8823d: 3.26:1 sobre papel, acima do mínimo
   de 3:1 que vale para texto grande. */
#loginScreen .login-hero-copy h2 .ouro {
  font-style: normal;
  background: linear-gradient(100deg, #a8823d, #8a6a2e 52%, #6b4f1a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#loginScreen .login-hero-copy p {
  max-width: 440px; margin-inline: auto !important;
  color: var(--hip-tinta-70) !important;
  font-size: 15px !important; line-height: 1.62 !important;
}

/* A lista de recursos saiu: o hero do site é olho-de-boi, título e
   uma linha de apoio, sem checklist. Ela também empurrava o conteúdo
   para baixo e não sobrava base para o campo de blocos aparecer. */
#loginScreen .login-mini-list { display: none !important; }
#loginScreen .login-mini-list-desativada {
  gap: 13px !important; margin-top: 30px !important;
  color: var(--hip-tinta-70) !important; font-size: 13px !important;
}
#loginScreen .login-mini-list span {
  position: relative;
  display: flex; align-items: center; gap: 13px; line-height: 1.45;
}
#loginScreen .login-mini-list span::before {
  content: "" !important;
  width: 30px !important; height: 30px !important;
  margin: 0 !important; flex: none;
  border-radius: 10px !important;
  background: var(--hip-azul-12) !important;
  -webkit-mask: none !important; mask: none !important;
  font-size: 0 !important;
}
#loginScreen .login-mini-list span::after {
  content: ""; position: absolute; left: 8px; width: 14px; height: 14px;
  background: var(--hip-azul);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------------- cartão do formulário ---------------- */

#loginScreen .login-card {
  padding: 40px 38px 34px !important;
  border: 1px solid var(--hip-fio-2) !important;
  border-radius: 28px !important;
  background: var(--hip-cartao) !important;
  backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: 0 2px 8px rgba(11,22,40,.04), 0 34px 80px rgba(11,22,40,.14) !important;
}
#loginScreen .login-brand { margin-bottom: 26px !important; }
#loginScreen .login-brand h1 {
  color: var(--hip-tinta) !important;
  font-size: 30px !important; font-weight: 800 !important;
  letter-spacing: -.032em !important;
}
#loginScreen .login-brand p {
  margin-top: 9px !important;
  color: var(--hip-tinta-45) !important;
  font-size: 13.5px !important; line-height: 1.55 !important;
}

#loginScreen .login-field { margin-bottom: 15px !important; }
#loginScreen .login-field label {
  margin-bottom: 8px !important;
  color: var(--hip-tinta-70) !important;
  font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .14em; text-transform: uppercase;
}
#loginScreen .login-field input {
  width: 100%;
  min-height: 54px !important; padding: 14px 20px !important;
  border: 1px solid var(--hip-fio) !important;
  border-radius: 999px !important;
  background: var(--hip-branco) !important;
  color: var(--hip-tinta) !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  box-shadow: none !important;
  transition: border-color .3s var(--hip-mola), box-shadow .3s var(--hip-mola);
}
#loginScreen .login-field input::placeholder {
  color: var(--hip-tinta-45) !important; font-weight: 500 !important;
}
#loginScreen .login-field input:focus {
  outline: none !important;
  border-color: var(--azul-texto) !important;
  box-shadow: 0 0 0 4px var(--hip-azul-12) !important;
}
#loginScreen .password-wrap input { padding-right: 92px !important; }
#loginScreen .password-toggle {
  right: 8px !important;
  padding: 9px 14px !important; border-radius: 999px !important;
  color: var(--hip-tinta-45) !important;
  font-size: 11px !important; letter-spacing: .04em;
  transition: background .25s var(--hip-mola), color .25s var(--hip-mola);
}
#loginScreen .password-toggle:hover {
  background: var(--hip-lavanda) !important; color: var(--azul-texto) !important;
}

/* botão em pílula com a seta, igual às chamadas do site */
#loginScreen .login-actions { margin-top: 24px !important; }
html body #loginScreen .login-actions button.primary {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 11px !important;
  width: 100% !important; min-height: 56px !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--hip-azul) !important;
  color: #fff !important;
  font-size: 15px !important; font-weight: 800 !important;
  letter-spacing: -.012em !important;
  box-shadow: 0 10px 26px rgba(0,120,192,.30) !important;
  transition: transform .3s var(--hip-mola), box-shadow .3s var(--hip-mola),
              background .3s var(--hip-mola);
}
html body #loginScreen .login-actions button.primary::after {
  content: ""; width: 19px; height: 19px; flex: none;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--hip-mola);
}
html body #loginScreen .login-actions button.primary:hover {
  background: #0086d6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(0,120,192,.38) !important;
}
html body #loginScreen .login-actions button.primary:hover::after { transform: translateX(4px); }
html body #loginScreen .login-actions button.primary:active { transform: translateY(0) !important; }

#loginScreen .login-error {
  margin-top: 15px !important;
  padding: 13px 18px !important;
  border: 1px solid rgba(178,59,77,.22) !important;
  border-radius: 999px !important;
  background: var(--hip-rubro-12) !important;
  color: var(--hip-rubro) !important;
  font-size: 12.5px !important;
}
#loginScreen .login-foot {
  margin-top: 22px !important;
  color: var(--hip-tinta-45) !important; font-size: 11.5px !important;
}
#loginScreen .login-foot::before {
  background: var(--hip-verde) !important;
  box-shadow: 0 0 0 3px var(--hip-verde-12) !important;
}

/* ---------------- entrada em escada ---------------- */
#loginScreen .login-brand-panel { animation: conteudoSobe .55s var(--hip-mola) .06s both; }
#loginScreen .login-hero-copy   { animation: conteudoSobe .55s var(--hip-mola) .14s both; }
#loginScreen .login-card        { animation: subir .6s var(--hip-mola) .2s both; }

@media (prefers-reduced-motion: reduce) {
  .blocos .bloco { animation: none !important; }
  #loginScreen .login-brand-panel, #loginScreen .login-hero-copy,
  #loginScreen .login-card { animation: none !important; }
  html body #loginScreen .login-actions button.primary:hover { transform: none !important; }
  html body #loginScreen .login-actions button.primary:hover::after { transform: none; }
}

/* ---------------- telas estreitas ---------------- */
@media (max-width: 1040px) {
  #loginScreen .login-shell { gap: 38px; }
  #loginScreen .login-hero-copy h2 { font-size: clamp(34px, 4.6vw, 46px) !important; }
  #loginScreen .login-mini-list { display: none !important; }
}

@media (max-width: 900px) {
  body #loginScreen.login-screen {
    place-items: start center !important;
    padding: 18px 14px 26px !important;
    overflow-y: auto !important;
  }
  /* No celular o cartão toma a tela: a faixa livre é em cima, atrás
     da marca. O campo vira um teto em vez de um horizonte. */
  .blocos-palco {
    inset: -10% -16% auto -16% !important;
    width: auto !important; height: 40% !important;
    -webkit-mask-image: linear-gradient(to top, transparent 4%, #000 52%) !important;
    mask-image: linear-gradient(to top, transparent 4%, #000 52%) !important;
  }

  /* o olho-de-boi inteiro quebra em duas linhas e o traço fica órfão */
  #loginScreen .login-hero-copy::before {
    content: "Assessoria contábil · São Paulo" !important;
    font-size: 9.5px !important; letter-spacing: .13em !important;
    padding-left: 33px !important; margin-bottom: 14px !important;
    background-size: 22px 2px !important;
  }
  #loginScreen .login-shell {
    display: flex !important; flex-direction: column !important;
    gap: 26px; margin: 0 !important;
  }
  #loginScreen .login-brand-panel { margin-bottom: 22px !important; }
  #loginScreen .login-hero-copy p { display: none !important; }
  #loginScreen .login-hero-copy h2 { font-size: 34px !important; margin-bottom: 0 !important; }
  #loginScreen .login-card { padding: 28px 22px 26px !important; border-radius: 26px !important; }
  #loginScreen .login-brand { margin-bottom: 20px !important; }
  #loginScreen .login-brand h1 { font-size: 25px !important; }
}

@media (max-width: 420px) {
  #loginScreen .login-hero-copy h2 { font-size: 30px !important; }
  #loginScreen .login-environment { font-size: 9px !important; padding: 7px 12px 7px 10px !important; }
  #loginScreen .login-logo-wrap { padding: 11px 20px !important; }
  #loginScreen .login-logo-wrap img { width: 168px !important; }
}


/* ================================================================
   IDENTIDADE NAS DEMAIS TELAS
   ----------------------------------------------------------------
   A entrada recebeu a gramática do site institucional: traço mais
   olho-de-boi, título grande de tracking apertado, geometria em
   pílula e a seta que anda. O resto do sistema ficou um degrau
   atrás, e quem entrava sentia a troca de tom.

   Isto vale para as treze telas de uma vez, apoiado no vocabulário
   que o markup já tem: .kicker aparece em 37 lugares e é sempre a
   mesma coisa — um rótulo curto logo acima do título. A tela de
   retiradas já provava o desenho; aqui ele deixa de ser exceção.
   ================================================================ */

/* ---------------- traço + olho-de-boi ---------------- */
html body .kicker {
  display: flex !important; align-items: center; gap: 12px;
  margin-bottom: 11px !important;
  font-size: 10.5px !important; font-weight: 800 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
}
html body .kicker::before {
  content: ""; width: 26px; height: 2px; flex: none;
  border-radius: 2px; background: currentColor;
}

/* A cor azul só onde o fundo é claro. O herói da gestão e o da
   abertura são azul-marinho e já têm a cor deles — o traço a herda
   por currentColor e continua legível. Sem esta exclusão o azul
   iria para cima do marinho, que é o erro que já apareceu quatro
   vezes neste tema. */
html body .kicker:not(.management-hero *):not(.command-hero *):not(.pickup-hero *) {
  color: var(--azul-texto) !important;
}

/* Bug que já existia e que esta passagem tornaria permanente: uma
   regra de .kicker com !important pintava o olho-de-boi do herói da
   gestão de #277da9, que sobre o marinho dele dá 3.04:1 — abaixo dos
   4.5:1 exigidos neste tamanho. A cor clara do próprio herói volta. */
html body .management-hero .kicker { color: #75d6e8 !important; }

html body .command-overline { gap: 12px; letter-spacing: .16em; }
html body .command-overline span:first-child { width: 26px; height: 2px; }

/* ---------------- escada dos títulos ---------------- */

/* título de tela: é o "Contabilidade para empresas que querem ir
   além." do site, na proporção de uma ferramenta */
html body .page-section-head h2,
html body .tela-topo h2,
html body .pickup-hero h2,
html body .management-hero h1 {
  margin: 0 0 9px !important;
  font-size: clamp(27px, 2.9vw, 35px) !important;
  font-weight: 800 !important;
  letter-spacing: -.032em !important; line-height: 1.05 !important;
}
html body .page-section-head p,
html body .tela-topo p,
html body .pickup-hero p {
  max-width: 62ch; color: var(--hip-tinta-45) !important;
  font-size: 13.5px !important; line-height: 1.6 !important;
}

/* título de cartão: um degrau abaixo, mesma letra */
html body .card > h2 {
  margin: 0 0 8px !important;
  font-size: 21px !important; font-weight: 800 !important;
  letter-spacing: -.028em !important; line-height: 1.14 !important;
}
html body .card > p.hint {
  max-width: 68ch; color: var(--hip-tinta-45) !important;
  font-size: 13px !important; line-height: 1.6 !important;
}

/* ---------------- geometria em pílula ---------------- */

html body .view button,
html body .hiperion-modal button {
  border-radius: 999px !important;
}
/* o que é quadrado por natureza continua quadrado */
html body .view .admin-aba,
html body .view table button,
html body .view .month-calendar-grid button {
  border-radius: var(--hip-r-peq) !important;
}

html body .view input:not([type="checkbox"]):not([type="radio"]),
html body .view select {
  padding: 12px 18px !important;
  border-radius: 999px !important;
}
html body .view textarea { border-radius: var(--hip-r-med) !important; }
/* dentro de tabela e de célula o campo volta a ser discreto */
html body .view table input,
html body .view table select {
  padding: 7px 12px !important; border-radius: var(--hip-r-peq) !important;
}

/* ---------------- a seta que anda ---------------- */
html body .view button.tela-acao {
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; gap: 10px !important;
}
html body .view button.tela-acao::after {
  content: ""; width: 17px; height: 17px; flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12.5 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s var(--hip-mola);
}
html body .view button.tela-acao:hover::after { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  html body .view button.tela-acao:hover::after { transform: none; }
}

/* ---------------- ênfase dourada ---------------- */
/* A regra do .ouro nascera presa ao #loginScreen. Na saudação do
   painel sobrava só o <em>, ou seja: itálico e nenhum dourado. */
html body .ouro {
  font-style: normal;
  background: linear-gradient(100deg, #a8823d, #8a6a2e 52%, #6b4f1a);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Sobre o marinho do herói o degradê claro não serve: o tom mais
   escuro dele dá 2.26:1. Aqui o dourado sobe de tom e volta a 5.7:1
   no pior ponto. */
html body .command-hero .ouro {
  background: linear-gradient(100deg, #e8cd8b, #d3ad5f 52%, #bf9744);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------------- campo de blocos na abertura ---------------- */
/* Mesmo campo isométrico da entrada, agora no herói do painel. Ali
   o fundo é azul-marinho, então os blocos entram claros. */
.command-hero { position: relative; overflow: hidden; }
.command-hero > * { position: relative; z-index: 1; }
.command-hero .blocos-palco {
  position: absolute; z-index: 0;
  inset: auto -6% -34% 34%;
  width: auto; height: 190%;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to left, #000 26%, transparent 92%);
  mask-image: linear-gradient(to left, #000 26%, transparent 92%);
}
.command-hero .blocos .face-topo     { fill: rgba(255,255,255,.34); }
.command-hero .blocos .face-direita  { fill: rgba(120,190,240,.30); }
.command-hero .blocos .face-esquerda { fill: rgba(20,70,120,.34); }

/* ================================================================
   TRÊS BURACOS DE CONTRASTE ACHADOS NA AUDITORIA
   ================================================================ */

/* 1. O painel de atalhos nunca foi convertido quando as superfícies
      ficaram claras: o fundo virou branco e o `color: #fff` do CSS
      de painel escuro continuou valendo. O título estava branco
      sobre branco (1.00) e o texto de apoio em 2.2:1. É a quinta vez
      que esta mesma troca aparece neste tema. */
html body .command-actions-panel { color: var(--hip-tinta) !important; }
html body .command-actions-panel h2 { color: var(--hip-tinta) !important; }
html body .command-actions-panel p,
html body .command-actions-panel small { color: var(--hip-tinta-45) !important; }
html body .command-actions-panel .command-actions-symbol {
  color: rgba(11,22,40,.05) !important;
}

/* 2. O contador do calendário: azul sobre lavanda dá 4.20:1 a 15px,
      e 15px em negrito ainda conta como texto pequeno (o limiar é
      18.66px). O azul escuro do menu ativo resolve. */
html body .month-calendar-total { color: var(--azul-600) !important; }

/* ----------------------------------------------------------------
   Um tom mudo só, no lugar de nove
   ----------------------------------------------------------------
   A auditoria achou 32 trechos de texto secundário abaixo do mínimo,
   em nove cinzas diferentes que ninguém distingue lado a lado:
   #78899a, #7b8796, #7c8da0, #7d8e9c, #8190a0, #8594a3, #84909f,
   #87a1b4, #718296 — de 2.70:1 a 3.73:1 sobre branco. São todos o
   mesmo papel (apoio, legenda, cabeçalho de tabela, estado vazio),
   então passam a usar o tom mudo do tema, que dá 5.17:1 no branco e
   4.73:1 no papel.

   A exclusão dos heróis escuros é obrigatória: lá o texto de apoio é
   claro de propósito, e pintá-lo de cinza repetiria pela sexta vez o
   erro de levar cor de superfície clara para fundo escuro.
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   Um tom mudo só,
no lugar de nove
   ----------------------------------------------------------------
   A auditoria achou 32 trechos de texto secundário abaixo do mínimo,
em nove cinzas diferentes que ninguém distingue lado a lado:
   #78899a,
#7b8796,
#7c8da0,
#7d8e9c,
#8190a0,
#8594a3,
#84909f,
#87a1b4,
#718296 — de 2.70:1 a 3.73:1 sobre branco. São todos o
   mesmo papel (apoio,
legenda,
cabeçalho de tabela,
estado vazio),
então passam a usar o tom mudo do tema,
que dá 5.17:1 no branco e
   4.73:1 no papel.

   A exclusão dos heróis escuros é obrigatória: lá o texto de apoio é
   claro de propósito,
e pintá-lo de cinza repetiria pela sexta vez o
   erro de levar cor de superfície clara para fundo escuro.
   ---------------------------------------------------------------- */
html body .view small:not(.command-hero *):not(.management-hero *),
html body .view p:not(.command-hero *):not(.management-hero *):not(.ouro),
html body .view th,
html body .view .hint,
html body .view .field-help,
html body .view .empty,
html body .view .command-session,
html body .view .company-directory-stat span,
html body .view .company-snapshot-icon,
html body .view .map-address-link span {
  color: var(--hip-tinta-45) !important;
}

/* Três sobras da unificação acima.

   A célula de hoje na faixa da agenda é preenchida de marinho, e a
   regra ampla de `small` levou o tom mudo para cima dela — o mesmo
   erro que a regra dizia evitar, só que numa superfície que eu não
   tinha na lista. A tinta clara da célula volta.

   Os outros dois são rótulos sobre placas azul-claras, onde o tom
   mudo para em 4.47:1. Não é lugar de texto discreto: são uma ação
   ("Abrir no Maps") e um ícone de endereço. Vão para a tinta média. */
/* Três sobras da unificação acima.

   A célula de hoje na faixa da agenda é preenchida de marinho,
e a
   regra ampla de `small` levou o tom mudo para cima dela — o mesmo
   erro que a regra dizia evitar,
só que numa superfície que eu não
   tinha na lista. A tinta clara da célula volta.

   Os outros dois são rótulos sobre placas azul-claras,
onde o tom
   mudo para em 4.47:1. Não é lugar de texto discreto: são uma ação
   ("Abrir no Maps") e um ícone de endereço. Vão para a tinta média. */
/* A pastilha de atraso tem cor propria: rubro sobre rubro fraco. A
   regra ampla de <p> acima a pintava do tom mudo,
que alem de errado
   semanticamente parava em 4.07:1 sobre a propria pastilha. E a
   terceira vez que a mesma regra ampla atropela uma cor com
   significado — por isso o :not() dela foi para a lista { color: var(--hip-destaque-mudo) !important; }
html body .view .company-snapshot .company-snapshot-icon,
html body .view .map-address-link span { color: var(--hip-tinta-70) !important; }

/* ----------------------------------------------------------------
   Respiro entre a faixa de duas semanas e a leitura do dia
   ----------------------------------------------------------------
   Com o calendário recolhido o painel vira uma coluna só, e aí a
   faixa dos dias encostava na linha de baixo: vão de 0px. As duas
   zonas dizem coisas diferentes — "as próximas duas semanas" e "o
   dia selecionado" — e precisam se distinguir. Espaço mais um fio.
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   Respiro entre a faixa de duas semanas e a leitura do dia
   ----------------------------------------------------------------
   Com o calendário recolhido o painel vira uma coluna só {
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--hip-fio-2) !important;
}

/* ----------------------------------------------------------------
   Cartões de métrica: uma linha, sem órfão
   ----------------------------------------------------------------
   A grade estava fixa em três colunas para o perfil entregador, mas
   a tela mostra quatro cartões: o quarto caía sozinho na linha de
   baixo e dois terços da faixa ficavam vazios.

   Em vez de trocar três por quatro — que quebraria de novo se o
   número de cartões mudar — a linha passa a se dividir pelo número
   de cartões que existirem. Abaixo de 980px continuam valendo as
   duas colunas de antes, que com quatro cartões fecham 2x2 certinho.
   ---------------------------------------------------------------- */
@media (min-width: 981px) {
  html body .command-metrics {
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
  }
}

/* ----------------------------------------------------------------
   O voo da lupa
   ----------------------------------------------------------------
   A animação antiga fazia o painel subir inteiro, com a lupa já
   dentro. O que se queria é outra coisa: a lupa sai da barra, vai
   até o meio da tela, e só então a barra de pesquisa se estende a
   partir dela. Quem executa o percurso é busca.js; aqui fica a
   viajante e a supressão das animações antigas enquanto ela voa.
   ---------------------------------------------------------------- */
.busca-lupa-voo {
  position: fixed; z-index: 95;
  width: 19px; height: 19px;
  pointer-events: none;
  will-change: transform;
  background: var(--hip-tinta-45);
}

/* com o voo, o painel é revelado pelo clip-path e não deve subir */
.busca-caixa.busca-com-voo .busca-painel { animation: none !important; }
.busca-caixa.busca-com-voo .busca-lupa { animation: none !important; }
.busca-caixa.busca-com-voo .busca-campo input,
.busca-caixa.busca-com-voo .busca-resultados,
.busca-caixa.busca-com-voo .busca-fechar {
  animation: conteudoSobe .4s var(--hip-mola) .52s both !important;
}

/* ================================================================
   BUSCA: BARRA, NÃO PAINEL
   ----------------------------------------------------------------
   Ela abria como um modal de 640px com um bloco de instrução vazio
   embaixo — cara de caixa de diálogo, não de barra de pesquisa. Some
   o painel: sobram uma barra em pílula e, só quando há o que mostrar,
   um cartão de resultados abaixo dela.
   ================================================================ */
html body .busca-painel {
  display: flex; flex-direction: column; align-items: center;
  width: min(460px, 100%) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

html body .busca-campo {
  box-sizing: border-box;
  width: 100%; min-height: 58px;
  padding: 0 8px 0 20px !important;
  border: 1px solid var(--hip-fio-2) !important;
  border-radius: 999px !important;
  background: var(--hip-branco) !important;
  box-shadow: 0 2px 8px rgba(11,22,40,.05), 0 20px 48px rgba(11,22,40,.16) !important;
  overflow: hidden;
}
html body .busca-campo input {
  font-size: 15px !important;
  text-overflow: ellipsis;
}
html body .busca-fechar {
  width: 34px !important; height: 34px !important;
  border-color: var(--hip-fio-2) !important;
}

/* o cartão de resultados só existe quando tem conteúdo */
html body .busca-resultados {
  box-sizing: border-box;
  width: 100%; margin-top: 10px;
  max-height: min(48vh, 400px) !important;
  padding: 8px !important;
  border: 1px solid var(--hip-fio-2);
  border-radius: 22px;
  background: var(--hip-branco);
  box-shadow: 0 2px 8px rgba(11,22,40,.05), 0 20px 48px rgba(11,22,40,.14);
  animation: conteudoSobe .34s var(--hip-mola) both;
}
html body .busca-resultados[hidden] { display: none !important; }
html body .busca-dica { padding: 18px 16px !important; font-size: 13px !important; }

/* Com a barra se desenrolando sozinha, o conteúdo dela não deve ter
   animação própria: ele acompanha a largura. Só o texto entra depois,
   quando já há espaço para caber. */
.busca-caixa.busca-com-voo .busca-campo { animation: none !important; }
.busca-caixa.busca-com-voo .busca-campo input,
.busca-caixa.busca-com-voo .busca-fechar {
  animation: conteudoSobe .3s var(--hip-mola) .62s both !important;
}
.busca-caixa.busca-com-voo .busca-lupa { animation: none !important; }

/* ----------------------------------------------------------------
   A barra cresce a partir da lupa, não do centro
   ----------------------------------------------------------------
   Com o conteúdo centrado, a barra se abria para os dois lados e
   arrastava a lupa junto. Ancorada à esquerda, ela cresce só para a
   direita: a lupa pousa e fica parada, que é o que se espera de um
   ponto de partida.

   E menos véu: uma barra de 460x58 não pede um desfoque de tela
   inteira. O fundo escurece o suficiente para separar os planos e
   para de competir com o que está em cima dele.
   ---------------------------------------------------------------- */
html body .busca-painel { align-items: stretch !important; }
html body .busca-caixa {
  background: rgba(11,22,40,.32) !important;
  backdrop-filter: blur(1.5px) !important;
  -webkit-backdrop-filter: blur(1.5px) !important;
}

/* ----------------------------------------------------------------
   A lupa sai mesmo da barra
   ----------------------------------------------------------------
   Enquanto a cópia voava, a original continuava no botão: viam-se
   duas lupas, e o efeito deixava de ser "ela saiu daqui" para virar
   "apareceu outra ali". O ícone do botão some na partida e volta com
   uma passagem curta quando a busca fecha.
   ---------------------------------------------------------------- */
html body .side .busca-nav::before {
  transition: opacity .14s linear, transform .34s var(--hip-mola);
}
html body .side .busca-nav.busca-nav-voando::before {
  opacity: 0 !important;
  transition-duration: .08s;
}

/* ----------------------------------------------------------------
   A lista de campos, fora do campo
   ----------------------------------------------------------------
   "Protocolo, empresa, box, documento ou responsável" não cabia no
   placeholder de uma barra de 460px: era cortado no meio da última
   palavra. Encurtar a lista esconderia um campo que a busca de fato
   varre, então ela desce para uma linha própria, onde tem largura
   inteira. O campo fica com uma pergunta curta.

   A linha mora sobre o véu escuro, não sobre o branco da barra —
   por isso é clara, e não herda o tom mudo do tema.
   ---------------------------------------------------------------- */
html body .busca-campos {
  align-self: center;
  width: auto; max-width: 100%;
  margin: 12px 0 0 !important;
  padding: 7px 16px !important;
  border-radius: 999px;
  background: rgba(11,22,40,.62);
  backdrop-filter: blur(6px);
  color: #fff !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: .04em; line-height: 1.45; text-align: center;
}
html body .busca-campos[hidden] { display: none !important; }

.busca-caixa.busca-com-voo .busca-campos {
  animation: conteudoSobe .3s var(--hip-mola) .7s both !important;
}

/* ----------------------------------------------------------------
   A conta mora no rodapé da lateral
   ----------------------------------------------------------------
   Ela vinha logo depois do último item do menu e parava no meio da
   coluna, com 144px de vazio embaixo. Conta e sair não são mais um
   item de navegação: são o rodapé da lateral, e é lá que a pessoa
   procura por eles. O `margin-top: auto` empurra o bloco para baixo
   e o fio marca a separação.

   Só na lateral vertical: na barra inferior do celular este bloco
   não aparece, e na gaveta ele já cai por último.
   ---------------------------------------------------------------- */
@media (min-width: 861px) {
  html body .side .sidebar-account {
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid var(--hip-fio-2) !important;
  }
}

/* ================================================================
   LATERAL ELÁSTICA — nunca rola
   ----------------------------------------------------------------
   As alturas eram fixas: marca 44px, três títulos de grupo a 40px
   cada com as margens, onze itens a 37px, conta 68px. Somando o
   respiro, a coluna pede ~662px de janela. Abaixo disso ela rolava,
   e a marca era a primeira coisa a sair de vista — exatamente o que
   ninguém quer cortar.

   Em vez de escolher um tamanho e torcer, o ritmo acompanha a altura
   disponível: cada medida é um clamp entre um mínimo legível e o
   tamanho cheio, interpolado em vh. Em tela alta nada muda; em tela
   baixa a coluna se comprime até caber, sem perder item nem rótulo.
   ================================================================ */
@media (min-width: 861px) {
  html body .side .brand {
    padding: clamp(2px, .4vh, 4px) 6px clamp(6px, 1.8vh, 16px) !important;
    margin-bottom: clamp(2px, .3vh, 6px) !important;
  }
  html body .side .brand img {
    max-width: clamp(112px, 19vh, 178px) !important;
  }

  html body .side .menu-section-title {
    margin-top: clamp(4px, 1.5vh, 13px) !important;
    margin-bottom: clamp(1px, .6vh, 5px) !important;
    font-size: clamp(8.5px, 1.2vh, 10.5px) !important;
    line-height: clamp(11px, 1.9vh, 18px) !important;
  }

  html body .side .menu-btn {
    min-height: clamp(26px, 4.4vh, 37px) !important;
    margin-top: 0 !important; margin-bottom: clamp(1px, .25vh, 3px) !important;
    padding-top: 0 !important; padding-bottom: 0 !important;
    font-size: clamp(12.5px, 1.75vh, 13.5px) !important;
  }
  html body .side .menu-btn::before {
    width: clamp(15px, 2.4vh, 19px) !important;
    height: clamp(15px, 2.4vh, 19px) !important;
  }

  html body .side .sidebar-account {
    padding-top: clamp(6px, 1.6vh, 14px) !important;
  }
  html body .side .sidebar-account .userbox {
    gap: clamp(7px, 1.2vh, 10px) !important;
  }
}

/* ================================================================
   TRIAGEM
   ----------------------------------------------------------------
   A primeira versão gastava 190px num sim/não, deixava a linha com
   100px de altura para um dado só e cortava o último campo na borda.
   Aqui: segmentado no lugar dos dois rádios soltos, colunas que
   cabem, e a data fora da linha — ela é do lote, não do documento.
   ================================================================ */
dialog.pickup-conferencia {
  width: min(1000px, 96vw) !important;
  max-height: 92vh !important;
  border-radius: 26px !important;
}
dialog.pickup-conferencia .modal-content { padding: 0 24px 24px !important; }

/* ---------------- cabeçalho do lote ---------------- */
.pickup-conf-lote {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 0 0 18px;
  border-bottom: 1px solid var(--hip-fio-2);
}
.pickup-conf-data { flex: none; }
.pickup-conf-data .pickup-doc-rotulo { display: block; margin-bottom: 6px; }
.pickup-conf-data input {
  min-height: 44px !important; padding: 10px 18px !important;
  border-radius: 999px !important; font-size: 14px !important; font-weight: 600 !important;
}
.pickup-conf-intro {
  flex: 1 1 320px; margin: 0 !important; max-width: 62ch;
  color: var(--hip-tinta-45); font-size: 12.5px; line-height: 1.5;
}

/* ---------------- grade ---------------- */
.pickup-conf-cabecalho,
.pickup-doc {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr) 132px 118px 140px minmax(0, 1fr) 34px;
  align-items: center; gap: 12px;
}
.pickup-conf-cabecalho {
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--hip-fio-2);
  color: var(--hip-tinta-45);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}

.pickup-doc {
  padding: 10px 12px !important;
  border: 0 !important; border-bottom: 1px solid var(--hip-fio-2) !important;
  border-radius: 0 !important; background: none !important;
  transition: background .25s var(--hip-mola);
}
.pickup-doc:last-of-type { border-bottom: 0 !important; }
.pickup-doc-nome {
  min-width: 0; font-size: 13.5px; font-weight: 700; letter-spacing: -.012em;
  line-height: 1.3;
}
.pickup-doc-rotulo {
  display: none;
  color: var(--hip-tinta-45); font-size: 9.5px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

/* ---------------- segmentado veio / faltou ---------------- */
.pickup-doc-escolha {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 3px; border-radius: 999px;
  background: var(--hip-papel); border: 1px solid var(--hip-fio-2);
}
.pickup-doc-escolha label {
  display: grid; place-items: center;
  min-height: 30px; padding: 0 6px; border-radius: 999px;
  cursor: pointer; font-size: 11.5px; font-weight: 700;
  color: var(--hip-tinta-45);
  transition: background .22s var(--hip-mola), color .22s var(--hip-mola),
              box-shadow .22s var(--hip-mola);
}
.pickup-doc-escolha input { position: absolute; opacity: 0; pointer-events: none; }
.pickup-doc-escolha label:has(input[value="veio"]:checked) {
  background: var(--hip-azul); color: #fff;
  box-shadow: 0 2px 8px rgba(0,120,192,.32);
}
.pickup-doc-escolha label:has(input[value="faltou"]:checked) {
  background: var(--hip-ambar); color: #fff;
  box-shadow: 0 2px 8px rgba(176,125,28,.3);
}
.pickup-doc-escolha label:has(input:disabled) { opacity: .4; cursor: default; }

/* ---------------- campos ---------------- */
.pickup-doc input[type="month"],
.pickup-doc input[name="description"],
.pickup-doc input[name="owner"],
.pickup-doc input[name="reason"],
.pickup-doc select[name="department"] {
  width: 100%; min-height: 38px !important;
  padding: 7px 14px !important; border-radius: 999px !important;
  font-size: 12.5px !important;
}
.pickup-doc .pickup-missing { grid-column: 2 / -1; }
.pickup-doc [hidden] { display: none !important; }
.pickup-remove {
  width: 32px !important; height: 32px !important; padding: 0 !important;
  display: grid !important; place-items: center;
  border-radius: 50% !important;
  background: var(--hip-papel) !important; color: var(--hip-tinta-45) !important;
  font-size: 16px !important; line-height: 1 !important;
}
.pickup-remove:hover { background: var(--hip-rubro-12) !important; color: var(--hip-rubro) !important; }

/* estados da linha */
.pickup-doc.e-faltante { background: var(--hip-ambar-12) !important; }
.pickup-doc.e-faltante .pickup-doc-nome { color: var(--hip-ambar); }
.pickup-doc.e-pendente { background: none !important; }

.pickup-conferencia .pickup-add {
  margin: 16px 0 0 !important;
  background: var(--hip-lavanda) !important; color: var(--azul-texto) !important;
}

/* ---------------- rodapé ---------------- */
.pickup-conf-rodape {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 18px -24px -24px; padding: 16px 24px;
  border-top: 1px solid var(--hip-fio-2);
  background: var(--hip-branco);
}
.pickup-conf-placar {
  color: var(--hip-tinta-70); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pickup-conf-placar.e-pendente { color: var(--hip-ambar); }
.pickup-conf-botoes { display: flex; gap: 10px; }

@media (max-width: 900px) {
  .pickup-conf-cabecalho { display: none; }
  .pickup-doc {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px; padding: 14px 12px !important;
  }
  .pickup-doc-nome,
  .pickup-doc-escolha,
  .pickup-doc .pickup-missing { grid-column: 1 / -1; }
  .pickup-doc-rotulo { display: block; margin-bottom: 5px; }
  .pickup-doc-fim { display: none; }
  .pickup-remove { justify-self: end; }
}

/* ================================================================
   CANTOS: UM RAIO SÓ
   ----------------------------------------------------------------
   A folha original tinha doze raios chanfrados diferentes —
   `20px 8px 20px 20px`, `24px 24px 8px 24px`, `8px 22px 22px`,
   `16px 5px 16px 16px`… — sempre um canto quase reto, e a cada vez
   num canto diferente. Era um motivo deliberado, mas sem regra: o
   olho lê como peça torta, não como decisão.

   Fica pior no painel recolhido, onde o cartão encolhe até o
   cabeçalho e o canto reto cai bem ao lado da seta de recolher.
   ================================================================ */
html body .command-hero,
html body .command-queue,
html body .command-deadlines,
html body .command-actions-panel,
html body .command-calendar-panel,
html body .management-hero,
html body .management-chart-card,
html body .pickup-hero {
  border-radius: var(--hip-r-card) !important;
}
html body .command-metric,
html body .management-metric,
html body .month-calendar-side,
html body .team-person,
html body .manager-toggle {
  border-radius: var(--hip-r-med) !important;
}

/* recolhido, o cartão é faixa de cabeçalho — não cartão cortado */
html body [data-recolhido="1"].command-queue,
html body [data-recolhido="1"].command-deadlines,
html body [data-recolhido="1"].command-actions-panel {
  padding-bottom: 14px !important;
}
html body [data-recolhido="1"] .command-section-head { margin-bottom: 0 !important; }

/* ----------------------------------------------------------------
   Campos com ícone: o recuo tem de sobreviver à pílula
   ----------------------------------------------------------------
   A regra que arredondou todos os campos também zerou o padding
   deles — e onde havia uma lupa desenhada no invólucro, o texto
   passou a começar debaixo do ícone. O :not() da regra de pílula
   conta especificidade, então este seletor precisa repeti-lo para
   vencer.
   ---------------------------------------------------------------- */
html body .view .pickup-search input:not([type="checkbox"]):not([type="radio"]) {
  padding-left: 44px !important;
}
html body .view .pickup-search::before {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* ----------------------------------------------------------------
   O segmentado, consertado
   ----------------------------------------------------------------
   Dois erros meus. O rótulo ficou em `display: block` porque a minha
   regra perdeu para outra mais específica, e aí o `place-items` não
   fazia nada: o texto encostava na borda esquerda da pílula em vez
   de centralizar.

   O segundo era pior e invisível. O rádio estava `position:absolute`
   sem nenhum ancestral posicionado, então se media pelo diálogo
   inteiro: 988px de largura, transparente, por cima de tudo. Não
   aparecia, mas roubava clique de quem passasse por baixo. Agora o
   rótulo é o ancestral posicionado e o rádio cobre exatamente a
   metade dele — que de quebra vira toda a área clicável.
   ---------------------------------------------------------------- */
html body .pickup-doc .pickup-doc-escolha {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: var(--hip-papel) !important;
  border: 1px solid var(--hip-fio-2) !important;
}
html body .pickup-doc .pickup-doc-escolha label {
  position: relative !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  min-height: 30px !important; height: auto !important;
  margin: 0 !important; padding: 0 4px !important;
  border: 0 !important; border-radius: 999px !important;
  background: none !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  line-height: 1 !important; white-space: nowrap;
  color: var(--hip-tinta-45) !important;
  cursor: pointer;
  transition: background .22s var(--hip-mola), color .22s var(--hip-mola),
              box-shadow .22s var(--hip-mola);
}
html body .pickup-doc .pickup-doc-escolha label > span {
  display: block !important; pointer-events: none;
}
html body .pickup-doc .pickup-doc-escolha input {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important;
  opacity: 0 !important; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
html body .pickup-doc .pickup-doc-escolha label:has(input[value="veio"]:checked) {
  background: var(--hip-azul) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,120,192,.32) !important;
}
html body .pickup-doc .pickup-doc-escolha label:has(input[value="faltou"]:checked) {
  background: var(--hip-ambar) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(176,125,28,.3) !important;
}
html body .pickup-doc .pickup-doc-escolha label:has(input:disabled) {
  opacity: .4; cursor: default;
}

/* trava de seguranca: nada neste tema pode reexibir a entrada escondida */
html body #loginScreen.login-screen.hidden { display: none !important; }


/* ================================================================
   MODO ESCURO
   ----------------------------------------------------------------
   Troca de tokens, nada mais. Nenhuma regra de layout muda, nenhum
   seletor novo pinta componente: o tema inteiro mora nas variaveis,
   e o escuro so lhes da outro valor. Quem ja consome token vira
   sozinho; quem ainda tem cor fixa aparece na auditoria e e corrigido
   na origem, nao com remendo aqui embaixo.

   A rampa neutra nao e inversao de RGB — e inversao de CLARIDADE com
   a matiz preservada. A pagina escura cai em #0b192c, que e quase a
   tinta do modo claro (#0b1628): o fundo do escuro e a letra do claro,
   e por isso os dois parecem o mesmo sistema.

   Elevacao ao contrario do claro: no claro o cartao e branco sobre
   papel cinza, entao sobe clareando; no escuro a pagina e o degrau
   mais fundo e o cartao sobe junto. Encaixes e campos sobem mais.

        pagina #0b192c  ->  cartao #152236  ->  encaixe #1d293e
   ================================================================ */

:root[data-tema="escuro"] {
  color-scheme: dark;

  /* ---- rampa neutra azulada, espelhada em L* ---- */
  --n-000: #152236;   /* cartao: o degrau mais alto do claro vira o mais baixo */
  --n-050: #1d293e;
  --n-100: #263247;
  --n-200: #343e52;   /* bordas */
  --n-300: #4c5567;
  --n-400: #6a7283;   /* so texto grande: 3.3:1 no cartao */
  --n-500: #949caa;   /* texto mudo: 5.7:1 no cartao, 4.7:1 na caixa do usuario */
  --n-600: #a7aeba;
  --n-700: #c4cad3;
  --n-800: #d8dde5;
  --n-900: #eaeef4;   /* texto principal: 13.7:1 */

  /* ---- familias semanticas, espelhadas na mesma logica ----
     O croma cai na ponta clara de proposito: cor saturada e clara
     sobre fundo escuro vibra. */
  --azul-900: #cadefd;
  --azul-800: #b5cef3;
  --azul-700: #9fbee9;
  --azul-600: #88aedf;
  --azul-500: #6e9cd2;
  --azul-400: #4f87c2;
  --azul-300: #1d69a5;
  --azul-200: #005187;
  --azul-100: #003c69;
  --azul-050: #002e53;
  --azul-fraca: rgba(110,156,210,.12);

  --verde-900: #c0e5d5;
  --verde-800: #a9d6c3;
  --verde-700: #91c7b1;
  --verde-600: #79b89f;
  --verde-500: #5fa68b;
  --verde-400: #419276;
  --verde-300: #127357;
  --verde-200: #005a41;
  --verde-100: #00432e;
  --verde-050: #003423;

  --ambar-900: #f6d8b1;
  --ambar-800: #e9c798;
  --ambar-700: #dcb57e;
  --ambar-600: #cea465;
  --ambar-500: #bd914a;
  --ambar-400: #a97c2c;
  --ambar-300: #885e00;
  --ambar-200: #6b4700;
  --ambar-100: #513300;
  --ambar-050: #412700;

  --rubro-900: #ffd1d4;
  --rubro-800: #f7bdc2;
  --rubro-700: #eeaab0;
  --rubro-600: #e3969e;
  --rubro-500: #d5818a;
  --rubro-400: #c46874;
  --rubro-300: #a44756;
  --rubro-200: #85313f;
  --rubro-100: #67202d;
  --rubro-050: #521722;

  /* ---- apelidos antigos: texto e borda clareiam, superficie escurece ---- */
  --azul-texto: #88aedf;
  --azul-base: #6e9cd2;
  --azul-borda: #005187;
  --azul-superficie: #002e53;
  --verde-texto: #91c7b1;
  --verde-base: #79b89f;
  --verde-borda: #005a41;
  --verde-superficie: #003423;
  --ambar-texto: #dcb57e;
  --ambar-base: #cea465;
  --ambar-borda: #6b4700;
  --ambar-superficie: #412700;
  --rubro-texto: #eeaab0;
  --rubro-base: #e3969e;
  --rubro-borda: #85313f;
  --rubro-superficie: #521722;

  /* ---- tokens do tema ---- */
  /* --hip-sobre-escuro nao aparece aqui: ele e branco nos dois temas,
     e esse e todo o ponto dele. --hip-destaque sim, porque no escuro
     a enfase nao pode ser "mais escuro que a pagina". */
  --hip-sombra:      0 1px 2px rgba(0,0,0,.40), 0 6px 16px rgba(0,0,0,.28);
  --hip-sombra-alta: 0 2px 6px rgba(0,0,0,.46), 0 16px 36px rgba(0,0,0,.44);

  --hip-destaque: #1f3f63;
  --hip-destaque-2: #2a5180;
  --hip-destaque-mudo: #a9c3d8;

  --hip-papel:   #0b192c;   /* a pagina: quase a tinta do modo claro */
  --hip-branco:  #152236;   /* "branco" aqui quer dizer cartao, nao a cor */
  --hip-cartao:  rgba(21,34,54,.94);
  --hip-vidro:   rgba(21,34,54,.82);
  /* No escuro, 80% de branco vira nevoa: o mesmo lustro cai para 5%,
     o bastante para a quina do cartao existir sem manchar. */
  --hip-brilho:  rgba(255,255,255,.05);
  --hip-papel-88: rgba(11,25,44,.88);
  --hip-papel-00: rgba(11,25,44,0);
  --hip-fio-forte: rgba(234,238,244,.30);
  --hip-sinal:   #8fb8a4;
  --ambar-forte:   #f0b872;
  --ambar-forte-2: #f8d0a4;
  --rubro-forte:   #f09aa6;
  --rubro-forte-2: #f8bcc4;
  --hip-tinta:   #eaeef4;
  --hip-tinta-70:#c4cad3;
  --hip-tinta-45:#949caa;   /* mesmo tom mudo do --n-500 */
  --hip-fio:     rgba(234,238,244,.15);
  --hip-fio-2:   rgba(234,238,244,.075);
  --hip-lavanda: #1d2b40;

  /* O azul de marca nao clareia porque ele e PREENCHIMENTO, com letra
     branca por cima: clarea-lo derruba o contraste da letra. O azul
     que serve de TEXTO e outro — mora em --azul-texto, e esse sim
     clareia. Tentar usar um valor so para os dois papeis nao tem
     solucao: letra branca pede fundo escuro, texto azul pede fundo
     claro, e nenhum tom satisfaz as duas contas ao mesmo tempo. */
  --hip-azul:    #0078c0;
  --hip-azul-12: rgba(110,156,210,.16);

  /* ouro e marca: fica */
  --hip-ouro-1:  #d8b057;
  --hip-ouro-2:  #c9a04a;
  --hip-ouro-3:  #a8823d;

  /* estes tres sao usados como TEXTO sobre pastilha tingida */
  --hip-verde:   #79b89f;
  --hip-verde-12:rgba(121,184,159,.14);
  --hip-ambar:   #cea465;
  --hip-ambar-12:rgba(206,164,101,.14);
  --hip-rubro:   #e3969e;
  --hip-rubro-12:rgba(227,150,158,.14);
}

/* ----------------------------------------------------------------
   O PAPEL NAO TEM TEMA
   ----------------------------------------------------------------
   A etiqueta e o envelope saem em janela propria, com folha de estilo
   embutida: nunca enxergam este arquivo. O protocolo, nao — ele mora
   em #printArea dentro do documento, e herdaria o escuro.

   A trava e redeclarar os tokens claros no proprio #printArea. Como
   variavel CSS herda, toda a subarvore volta ao claro de uma vez, sem
   depender de listar seletor por seletor — foi justamente uma lista
   assim que deixou escapar a borda do brasao numa tentativa anterior.

   Tinta preta sobre papel branco e decisao de produto: protocolo
   entregue e assinado em papel, e papel nao tem modo escuro.
   ---------------------------------------------------------------- */
:root[data-tema="escuro"] #printArea {
  color-scheme: light;
  --n-000: #ffffff; --n-050: #f8fafc; --n-100: #eef2f7; --n-200: #dde3eb;
  --n-300: #b8c2cf; --n-400: #8b95a6; --n-500: #656e7d; --n-600: #3d4a60;
  --n-700: #26354d; --n-800: #16243a; --n-900: #0b1628;

  --azul-900: #07243f; --azul-800: #0c3357; --azul-700: #00527f; --azul-600: #00629b;
  --azul-500: #0078c0; --azul-400: #2c86ad; --azul-300: #6aaed4; --azul-200: #9fd0ea;
  --azul-100: #d9eaf6; --azul-050: #eef3f8; --azul-fraca: rgba(0,120,192,.08);

  --verde-900: #0d4234; --verde-800: #136049; --verde-700: #156b52; --verde-600: #1d7f62;
  --verde-500: #2a9b78; --verde-400: #4bb493; --verde-300: #83d2b2; --verde-200: #9ad9c2;
  --verde-100: #c9ecdd; --verde-050: #e8f6f0;

  --ambar-900: #5c3f0d; --ambar-800: #7a5411; --ambar-700: #8a6115; --ambar-600: #b07d1c;
  --ambar-500: #c89025; --ambar-400: #d7a648; --ambar-300: #e5c182; --ambar-200: #ecc98a;
  --ambar-100: #f6e4c0; --ambar-050: #fdf4e3;

  --rubro-900: #5e1f29; --rubro-800: #7c2936; --rubro-700: #8f2f3e; --rubro-600: #b23b4d;
  --rubro-500: #c45365; --rubro-400: #d47987; --rubro-300: #e29ea9; --rubro-200: #e8aeb6;
  --rubro-100: #f4d5da; --rubro-050: #fbedef;

  --azul-texto: #00629b; --azul-base: #0078c0; --azul-borda: #9fd0ea; --azul-superficie: #eef3f8;
  --verde-texto: #156b52; --verde-base: #1d7f62; --verde-borda: #9ad9c2; --verde-superficie: #e8f6f0;
  --ambar-texto: #8a6115; --ambar-base: #b07d1c; --ambar-borda: #ecc98a; --ambar-superficie: #fdf4e3;
  --rubro-texto: #8f2f3e; --rubro-base: #b23b4d; --rubro-borda: #e8aeb6; --rubro-superficie: #fbedef;

  --hip-sombra: 0 1px 2px rgba(11,22,40,.04), 0 10px 30px rgba(11,22,40,.06);
  --hip-sombra-alta: 0 2px 6px rgba(11,22,40,.05), 0 24px 60px rgba(11,22,40,.10);
  --hip-destaque: #0b1628; --hip-destaque-2: #142744; --hip-destaque-mudo: #8fa8bd;
  --hip-sobre-escuro: #ffffff; --hip-destaque-tinta: #ffffff;
  --hip-perigo: #a61b1b; --hip-atencao: #a85d08; --hip-sucesso: #18794e;
  --hip-papel: #f5f5f2; --hip-branco: #ffffff; --hip-cartao: rgba(255,255,255,.94); --hip-sinal: #4a715f; --hip-tinta: #0b1628;
  --hip-vidro: rgba(255,255,255,.86); --hip-brilho: rgba(255,255,255,.8);
  --hip-papel-88: rgba(245,245,242,.88); --hip-papel-00: rgba(245,245,242,0);
  --hip-fio-forte: rgba(11,22,40,.28);
  --ambar-forte: #a25a00; --ambar-forte-2: #824600;
  --rubro-forte: #b72f40; --rubro-forte-2: #962334;
  --hip-tinta-70: #3d4a60; --hip-tinta-45: #656e7d;
  --hip-fio: rgba(11,22,40,.12); --hip-fio-2: rgba(11,22,40,.06);
  --hip-lavanda: #eef3f8; --hip-azul: #0078c0; --hip-azul-12: rgba(0,120,192,.12);
  --hip-ouro-1: #c9a04a; --hip-ouro-2: #a8823d; --hip-ouro-3: #7d5f22;
  --hip-verde: #1d7f62; --hip-verde-12: rgba(29,127,98,.1);
  --hip-ambar: #b07d1c; --hip-ambar-12: rgba(176,125,28,.12);
  --hip-rubro: #b23b4d; --hip-rubro-12: rgba(178,59,77,.1);

  background: #ffffff;
  color: #0b1628;
}

/* A impressao tambem nao tem tema, venha de onde vier. */
@media print {
  :root[data-tema="escuro"] { color-scheme: light; }
  :root[data-tema="escuro"] body { background: #ffffff !important; }
}

/* ----------------------------------------------------------------
   Botao do modo escuro
   ----------------------------------------------------------------
   Redondo e so com icone, ao lado do Sair. O icone mostra o que voce
   recebe se apertar — lua no claro, sol no escuro — e nao o estado
   atual, que ja esta na tela inteira. Quem diz o estado para quem le
   por audio e o aria-pressed; o desenho nao e lido.
   ---------------------------------------------------------------- */
html body .side .userbox .user-static {
  flex-wrap: wrap !important;
  gap: 7px !important;
}
html body .side .tema-btn {
  display: inline-grid !important; place-items: center !important;
  width: 34px !important; height: 34px !important;
  padding: 0 !important; flex: none !important;
  border: 1px solid var(--hip-fio) !important;
  border-radius: 50% !important;
  background: var(--n-050) !important;
  color: var(--n-600) !important;
  cursor: pointer !important;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .18s ease !important;
}
html body .side .tema-btn:hover {
  background: var(--n-100) !important;
  color: var(--hip-tinta) !important;
  border-color: var(--hip-fio-forte) !important;
  transform: translateY(-1px) !important;
}
html body .side .tema-btn:focus-visible {
  outline: 2px solid var(--hip-ouro-1) !important;
  outline-offset: 2px !important;
}
html body .tema-btn svg {
  width: 17px; height: 17px; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* a lua e macica: contorno vazado some nesse tamanho */
html body .tema-btn .tema-lua { fill: currentColor; stroke: none; }
html body .tema-btn .tema-sol { display: none; }
:root[data-tema="escuro"] .tema-btn .tema-lua { display: none; }
:root[data-tema="escuro"] .tema-btn .tema-sol { display: block; }

@media (prefers-reduced-motion: reduce) {
  html body .side .tema-btn { transition: none !important; }
  html body .side .tema-btn:hover { transform: none !important; }
}


/* ----------------------------------------------------------------
   A logo no modo escuro
   ----------------------------------------------------------------
   O brasao e marinho sobre branco. Na barra clara ele esta em casa; na
   escura ele se esconde dentro do proprio fundo. Vira silhueta branca,
   como na identidade do site.

   brightness(0) achata tudo para preto e invert(1) devolve tudo branco:
   preserva a forma e descarta o tom. Nao ha arquivo extra para manter
   em sincronia, e se a logo trocar a regra continua valendo.
   ---------------------------------------------------------------- */
:root[data-tema="escuro"] .side .brand img,
:root[data-tema="escuro"] #loginScreen .login-logo-wrap img {
  filter: brightness(0) invert(1);
  opacity: .92;
}
:root[data-tema="escuro"] .side .brand:hover img { opacity: 1; }

/* ----------------------------------------------------------------
   Placeholder, valor e opcao dos campos
   ----------------------------------------------------------------
   O placeholder nao e no de texto: so existe em ::placeholder, e por
   isso ficou inteiro de fora da auditoria ate agora. Sem cor declarada
   o navegador usa a dele — um cinza que da 3.5:1 sobre o campo escuro.

   A opcao do <select> tambem precisa de fundo proprio: no escuro o
   sistema desenha a lista com as cores do campo, e sem isso ela sai
   escrita em tinta escura sobre lista escura.
   ---------------------------------------------------------------- */
html body input::placeholder,
html body textarea::placeholder,
html body select::placeholder {
  color: var(--hip-tinta-45) !important;
  opacity: 1 !important;
}
html body select option,
html body select optgroup {
  background: var(--hip-branco);
  color: var(--hip-tinta);
}
/* campo desabilitado: continua legivel, so nao editavel */
html body input:disabled,
html body select:disabled,
html body textarea:disabled {
  color: var(--hip-tinta-45) !important;
  -webkit-text-fill-color: var(--hip-tinta-45) !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------------
   O botao do tema no celular
   ----------------------------------------------------------------
   Abaixo de 860px a barra lateral vira a barra de baixo e o bloco da
   conta sai de cena — levando junto o Sair e, agora, o botao do tema.
   Na gaveta aberta ("Mais") ha espaco de sobra, e e la que esses dois
   pertencem: sao acoes da pessoa, nao navegacao.

   Vale tanto para o perfil entregador, que tem gaveta propria, quanto
   para os demais perfis em tela estreita.
   ---------------------------------------------------------------- */
@media (max-width: 860px) {
  body.mobile-nav-expanded .side .sidebar-account {
    display: block !important;
    grid-column: 1 / -1;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
  body.mobile-nav-expanded .side .sidebar-account .user-static {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; gap: 10px !important;
    flex-wrap: nowrap !important;
  }
  /* alvo de toque: 34px e pequeno demais para o dedo */
  body.mobile-nav-expanded .side .tema-btn {
    width: 44px !important; height: 44px !important;
  }
  body.mobile-nav-expanded .side .tema-btn svg { width: 20px; height: 20px; }
}

/* ----------------------------------------------------------------
   O Sair aparece ao passar o mouse
   ----------------------------------------------------------------
   A caixa da conta tem 230px. Identidade (146) mais o botao do tema
   (34) ja ocupam quase tudo, entao o Sair quebrava para uma segunda
   linha e a caixa ficava com 95px de altura so para guardar um botao
   que quase nunca e usado. Recolhido, tudo cabe em uma linha.

   Tres cuidados, porque "aparece no hover" costuma quebrar as tres:

   1. So onde existe mouse. O @media (hover: hover) and (pointer: fine)
      deixa a regra inteira de fora no celular, onde nao ha como passar
      o mouse e esconder o Sair seria esconder de vez.

   2. Quem usa teclado alcanca. O :focus-within revela a caixa quando o
      foco chega no botao pelo Tab. O botao continua no fluxo e na ordem
      de foco — por isso nada de display:none nem visibility:hidden,
      que o tirariam da navegacao.

   3. Invisivel nao clica. Enquanto recolhido ele leva pointer-events:
      none, senao haveria um alvo de clique transparente ali, e sair do
      sistema sem querer e dos erros mais irritantes que existem.

   A largura e que anima, nao a opacidade sozinha: assim o botao do tema
   nao salta de lugar quando o Sair entra.
   ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html body .side .userbox .user-static {
    flex-wrap: nowrap !important;
  }
  html body .side .userbox .user-identity {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  html body .side .userbox .logout-btn {
    flex: none !important;
    max-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    border-left-width: 0 !important; border-right-width: 0 !important;
    margin-left: -7px !important;   /* engole o gap enquanto esta recolhido */
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-width .22s var(--hip-mola), opacity .18s ease,
                padding .22s var(--hip-mola), margin .22s var(--hip-mola) !important;
  }
  html body .side .userbox .user-static:hover .logout-btn,
  html body .side .userbox .user-static:focus-within .logout-btn {
    max-width: 80px !important;
    padding-left: 8px !important; padding-right: 8px !important;
    border-left-width: .8px !important; border-right-width: .8px !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  html body .side .userbox .logout-btn { transition: none !important; }
}

/* ----------------------------------------------------------------
   O cabecalho da agenda em tela estreita
   ----------------------------------------------------------------
   Titulo, dica e navegacao dividem uma linha so. No celular o titulo
   "1 Out – 14 Out" nao cabe ao lado de "PROXIMAS 2 SEMANAS": ele quebra
   no meio, e as duas frases se montam uma sobre a outra.

   A dica some abaixo de 640px. Nao e perda: ela repete o que a propria
   faixa mostra — catorze dias em sequencia — e a seta ao lado ja diz
   que ha dois modos. Entre 641 e 900px ela desce para a propria linha,
   onde ainda ha largura para as duas coisas.
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  html body .month-calendar-head {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    column-gap: 10px !important;
  }
  html body .month-calendar-title { flex: 1 1 auto !important; min-width: 0 !important; }
  html body .month-calendar-title strong { white-space: nowrap !important; }
  html body .month-calendar-nav { flex: none !important; }
}
@media (max-width: 640px) {
}

/* ----------------------------------------------------------------
   A gaveta precisa ficar acima do veu
   ----------------------------------------------------------------
   O veu que escurece o fundo (#mobileNavBackdrop) esta em z-index 290;
   a barra de baixo, em 60. Com a gaveta aberta o veu cobria os proprios
   itens dela: qualquer toque caia no veu, que chama closeMobileMenu, e
   a gaveta fechava em vez de navegar.

   O veu existe para dar o toque-fora-para-fechar, e isso continua
   valendo — ele so deixa de ficar por cima de quem deveria proteger.
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  html body.mobile-nav-expanded .side { z-index: 310 !important; }
  html body.mobile-nav-expanded #mobileNavBackdrop { z-index: 300 !important; }
}

/* ----------------------------------------------------------------
   Dentro da gaveta, a ordem e a do documento
   ----------------------------------------------------------------
   Os cinco itens que ficam na barra de baixo levam `order` de 1 a 5
   para se alinharem ali. Esse mesmo `order` sobrevivia a abertura da
   gaveta e empurrava os cinco para depois de todos os outros — Visao
   geral, Solicitacoes e Buscar caiam abaixo da dobra, so alcancaveis
   rolando, numa lista que cabe inteira na tela.

   Com a ordem zerada vale o documento, que e a ordem por secoes:
   Trabalho, Documentos, Operacao.
   ---------------------------------------------------------------- */
@media (max-width: 900px) {
  html body.mobile-nav-expanded .side > * { order: 0 !important; }
}

/* Alerta de atrasados acumulados, acima da grade do calendário. */
.month-calendar-atrasos {
  margin: 0 0 10px; padding: 7px 10px; border-radius: 10px;
  background: var(--rubro-superficie); color: var(--rubro-texto);
  font-size: 12.5px; font-weight: 700;
}
.month-calendar-atrasos[hidden] { display: none; }

/* ----------------------------------------------------------------
   SEM ZOOM AO TOCAR NUM CAMPO (instalado como app)
   ----------------------------------------------------------------
   A folha original (index.html) define input/select/textarea com
   font-size: 13px. O iOS e o Android, ao focar um campo com fonte
   abaixo de 16px, dão zoom na página inteira pra deixar o texto
   legível — e, rodando como app instalado (sem a barra do navegador
   pra "sair do zoom"), a tela fica presa ampliada até a pessoa dar
   pinça pra voltar. Isso é visível só no celular porque em telas
   largas ninguém toca com o dedo. 16px é o próprio limiar do
   navegador: abaixo disso ele zoom, igual ou acima ele não mexe. */
@media (max-width: 900px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Estas quatro já tinham sua própria regra, mais específica e também
     !important (tela de login, busca, conferência de retirada, formulário
     de retirada) — a de cima nunca as alcançaria, por mais !important que
     fosse: especificidade decide antes de ordem. Repetir o seletor aqui,
     depois da declaração original no arquivo, é o jeito de vencer o empate. */
  #loginScreen .login-field input,
  html body .busca-campo input,
  .pickup-conf-data input,
  .pickup-doc input[type="month"],
  .pickup-doc input[name="description"],
  .pickup-doc input[name="owner"],
  .pickup-doc input[name="reason"],
  .pickup-doc select[name="department"] {
    font-size: 16px !important;
  }
}