/* Comum às telas do painel com lateral (app.js): aviso breve, nota do modo demonstração. Só tokens do base.css. */

/* Cores de opção e de etapa (Opcao.cor do contrato): o único mapa, usado pela lista, Kanban, gaveta,
   abas do processo, configurações e métricas. Fundo claro, texto sempre tinta. */
:root {
  --op-aberto: var(--st-aberto); --op-ok: var(--st-ok); --op-espera: var(--st-espera); --op-alerta: var(--st-alerta);
  --op-azul: var(--blue-soft); --op-azul-forte: var(--blue); --op-neutro: rgba(24,24,24,.06); --op-tinta: rgba(24,24,24,.22);
}
.cor-aberto { background: var(--op-aberto); } .cor-ok { background: var(--op-ok); }
.cor-espera { background: var(--op-espera); } .cor-alerta { background: var(--op-alerta); }
.cor-azul { background: var(--op-azul); } .cor-azul-forte { background: var(--op-azul-forte); }
.cor-neutro { background: var(--op-neutro); } .cor-tinta { background: var(--op-tinta); }

/* Aviso breve no canto (APP.aviso): tinta no sucesso; erro em fundo de alerta, texto tinta. */
.app-aviso { position: fixed; z-index: 70; right: 24px; bottom: 24px; max-width: min(380px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; border-radius: var(--r); background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-pop); }
.app-aviso.erro { background: var(--st-alerta); color: var(--ink); }
.app-aviso[hidden] { display: none; }
.app-aviso svg.i { width: 15px; height: 15px; margin-top: 1px; }
@media (prefers-reduced-motion: no-preference) { .app-aviso { animation: app-entra .2s var(--ease-out); } }
@keyframes app-entra { from { opacity: 0; transform: translateY(6px); } }

/* Nota do modo demonstração: pé da lateral; abaixo de 1024px (sem lateral), logo abaixo do topo. */
.app-demo { display: flex; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r); background: var(--blue-wash); font-size: 11.5px; line-height: 1.45; color: var(--ink-82); }
.app-demo svg.i { width: 15px; height: 15px; margin-top: 1px; color: var(--blue-ink); }
.app-demo button { display: block; margin-top: 4px; padding: 0; border: 0; border-radius: var(--r); background: none; font: 500 11.5px var(--font-body); color: var(--blue-ink); cursor: pointer; }
.app-demo button:hover { text-decoration: underline; }
.principal > .app-demo { display: none; margin: 0 0 16px; }
.lateral-recolhida .lateral .app-demo { display: none; }
.popover-topo button[hidden] { display: none; }

/* "RECRUTAMENTO" não cabe ao lado do logotipo com o botão de recolher (lateral de 240px):
   nome um pouco menor e o botão no canto do cartão, acima da marca. */
.lateral-painel { position: relative; }
.lateral .marca { gap: 8px; padding: 14px 4px 20px; }
.lateral .marca .nome { font-size: 10.5px; letter-spacing: .08em; }
.lateral .marca .recolher { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; }
.lateral-recolhida .lateral .marca { padding: 0 0 20px; }
.lateral-recolhida .lateral .marca .recolher { position: static; }
.lateral-recolhida .nav-rotulo { display: none; } /* não cabe em 72px */
.lateral-recolhida .nav-sub { display: none; } /* bolinhas das vagas não cabem; ficam só os ícones */

@media (max-width: 1024px) { .principal > .app-demo { display: flex; } }
@media (max-width: 640px) { .app-aviso { right: 12px; bottom: 12px; } }

/* Sugestões de cidade (cidade.js): lista do combo, presa ao campo. */
.cidade-sug { position: fixed; z-index: 80; top: auto; right: auto; width: auto; min-width: 220px; max-height: min(420px, 70vh); display: flex; flex-direction: column; gap: 2px; }
.cidade-sug span { font-size: 11.5px; color: var(--ink-mute); }