/* Painel de vagas — sistema de design.
   Fontes do sistema (rápido em qualquer aparelho). Grafite e âmbar da marca; a cor de etapa é dado, não enfeite:
   toda cor que significa algo (etapa, atenção, atende/não atende) vem junto de texto ou ícone, nunca sozinha. */
:root {
  color-scheme: light;
  --ambar: #ffb400; --ambar-fundo: #fff3cf; --ambar-texto: #7a5300; --grafite: #1c1c1c;
  --fundo: #f3f4f6; --papel: #fff; --papel-2: #f7f8fa; --coluna: #e8eaee; --chip: #eceef1; --linha: #e1e3e8; --linha-forte: #c4c8d0;
  --texto: #1c1c1c; --suave: #5b6169; --erro: #b3261e; --ok: #14804a;
  --novo: #2f6fed; --chamado: #c47a00; --entrevista: #7a4ee0; --contratado: #14804a; --descartado: #6e7681;
  --ok-fundo: #dff3e8; --ok-texto: #0d5e36; --ruim-fundo: #fbe4e1; --ruim-texto: #8c1d16;
  --sombra: 0 1px 2px rgba(20, 24, 30, .06), 0 4px 14px rgba(20, 24, 30, .05); --sombra-alta: 0 12px 40px rgba(20, 24, 30, .28);
  --r-sm: 6px; --r: 10px; --r-lg: 14px;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --ambar-fundo: #3a2e0a; --ambar-texto: #ffd466;
  --fundo: #111316; --papel: #1b1e23; --papel-2: #22262c; --coluna: #171a1e; --chip: #2a2f36; --linha: #2c3139; --linha-forte: #424954;
  --texto: #eceef1; --suave: #9ba3ad; --erro: #ff8a80;
  --novo: #6f9cff; --chamado: #f0a824; --entrevista: #ab92f2; --contratado: #3fc487; --descartado: #9aa2ad;
  --ok-fundo: #12392a; --ok-texto: #7be0aa; --ruim-fundo: #471d19; --ruim-texto: #ffb0a8;
  --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3); --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --ambar-fundo: #3a2e0a; --ambar-texto: #ffd466;
    --fundo: #111316; --papel: #1b1e23; --papel-2: #22262c; --coluna: #171a1e; --chip: #2a2f36; --linha: #2c3139; --linha-forte: #424954;
    --texto: #eceef1; --suave: #9ba3ad; --erro: #ff8a80;
    --novo: #6f9cff; --chamado: #f0a824; --entrevista: #ab92f2; --contratado: #3fc487; --descartado: #9aa2ad;
    --ok-fundo: #12392a; --ok-texto: #7be0aa; --ruim-fundo: #471d19; --ruim-texto: #ffb0a8;
    --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3); --sombra-alta: 0 12px 40px rgba(0, 0, 0, .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.suave { color: var(--suave); }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ícones (sprite no index.html) */
.ico { width: 1.15em; height: 1.15em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.ico.cheio { fill: currentColor; }
.ico.m { width: 1.4em; height: 1.4em; }
.ico.g { width: 2.4em; height: 2.4em; }

/* topo */
.topo { background: var(--grafite); color: #fff; position: sticky; top: 0; z-index: 20; }
.topo-in { max-width: 1440px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 18px; min-height: 56px; }
.marca { display: flex; align-items: center; color: var(--ambar); text-decoration: none; flex: none; }
.marca svg { width: 92px; height: 34px; fill: currentColor; display: block; }
.abas { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.abas::-webkit-scrollbar { display: none; }
.aba { color: #d4d4d4; text-decoration: none; padding: 17px 12px 15px; border-bottom: 3px solid transparent; font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.aba:hover { color: #fff; }
.aba[aria-current="page"] { color: #fff; border-bottom-color: var(--ambar); }
.aba .contagem { background: var(--ambar); color: var(--grafite); border-radius: 99px; font-size: 11px; font-weight: 800; padding: 1px 7px; }
.usuario { display: flex; align-items: center; gap: 8px; flex: none; font-size: 14px; color: #d4d4d4; }
.usuario button { background: none; border: 1px solid #555; color: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.usuario button:hover { border-color: var(--ambar); }
@media (max-width: 760px) { .usuario .nome { display: none; } .topo-in { gap: 6px; padding: 0 10px; } .marca svg { width: 70px; } .aba { padding: 17px 9px 15px; } }

main { max-width: 1440px; margin: 0 auto; padding: 22px 16px 90px; }
.titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-right: auto; }
.titulo .sub { color: var(--suave); font-size: 14px; }

/* controles */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--linha-forte); background: var(--papel); font-weight: 700; cursor: pointer; text-decoration: none; color: var(--texto); }
.btn:hover { border-color: var(--suave); }
.btn.primario { background: var(--ambar); border-color: var(--ambar); color: #1c1c1c; }
.btn.primario:hover { background: #ffc233; }
.btn.escuro { background: var(--grafite); border-color: var(--grafite); color: var(--ambar); }
.btn.perigo { color: var(--erro); }
.btn.mini { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn.fantasma { border-color: transparent; background: transparent; }
.btn.fantasma:hover { background: var(--chip); }
.btn[disabled] { opacity: .55; cursor: progress; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=datetime-local], input[type=number], select, textarea {
  width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--linha-forte); border-radius: 9px; background: var(--papel); color: var(--texto);
}
textarea { min-height: 92px; resize: vertical; }
label.campo { display: block; font-weight: 700; margin-bottom: 14px; }
label.campo > span.dica, .dica { display: block; font-weight: 400; color: var(--suave); font-size: 13px; margin-top: 2px; }
label.campo > :is(input, select, textarea) { margin-top: 5px; font-weight: 400; }
.erro-campo { color: var(--erro); font-size: 13px; font-weight: 600; margin-top: 4px; }
.erro-geral { color: var(--erro); font-weight: 600; margin: 8px 0; }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.grade3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px) { .grade2, .grade3 { grid-template-columns: 1fr; } }

.cartao { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); box-shadow: var(--sombra); padding: 18px; }
.cartao h2 { font-size: 16px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.cartao h2 .dica { margin: 0 0 0 auto; font-weight: 400; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--chip); color: var(--texto); white-space: nowrap; }
.chip .ico { width: 1em; height: 1em; }
.chip.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.chip.ruim { background: var(--ruim-fundo); color: var(--ruim-texto); }
.chip.ambar { background: var(--ambar-fundo); color: var(--ambar-texto); }
.ponto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.avatar { width: var(--t, 34px); height: var(--t, 34px); border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-weight: 800; font-size: calc(var(--t, 34px) * .38); color: #fff; letter-spacing: .02em; }
.estrelas { display: inline-flex; gap: 1px; color: var(--ambar); }
.estrelas .ico { width: 14px; height: 14px; }
.estrelas .vazia { color: var(--linha-forte); }
.estrelas.edita button { background: none; border: 0; padding: 2px; cursor: pointer; color: inherit; line-height: 0; }
.estrelas.edita .ico { width: 22px; height: 22px; }
.kbd { font: 600 11px ui-monospace, Consolas, monospace; border: 1px solid var(--linha-forte); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--papel-2); }

/* estados: vazio, carregando */
.vazio { color: var(--suave); text-align: center; padding: 34px 12px; }
.vazio .ico { display: block; margin: 0 auto 8px; opacity: .55; }
.vazio b { display: block; color: var(--texto); font-size: 16px; margin-bottom: 4px; }
.esqueleto { background: linear-gradient(90deg, var(--chip) 25%, var(--papel-2) 50%, var(--chip) 75%); background-size: 200% 100%; animation: brilho 1.3s infinite linear; border-radius: 8px; }
@keyframes brilho { to { background-position: -200% 0; } }

/* resumo */
.periodos { display: inline-flex; border: 1px solid var(--linha-forte); border-radius: 9px; overflow: hidden; background: var(--papel); }
.periodos button { border: 0; background: none; padding: 9px 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.periodos button[aria-pressed="true"] { background: var(--grafite); color: var(--ambar); }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
.kpi { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sombra); text-decoration: none; display: block; }
.kpi b { display: block; font-size: 32px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi > span { color: var(--suave); font-size: 13px; font-weight: 600; }
.kpi .detalhe { display: block; font-size: 12px; font-weight: 500; margin-top: 4px; color: var(--suave); }
.kpi.destaque { background: var(--grafite); color: #fff; border-color: var(--grafite); }
.kpi.destaque b { color: var(--ambar); }
.kpi.destaque > span, .kpi.destaque .detalhe { color: #cfcfcf; }
.kpi.alerta { border-color: var(--erro); }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
@media (max-width: 1000px) { .duas, .tres { grid-template-columns: 1fr; } }
.barra-linha { display: grid; grid-template-columns: 124px 1fr 44px; gap: 10px; align-items: center; margin: 7px 0; font-size: 14px; }
.barra-linha .trilho { background: var(--chip); border-radius: 6px; height: 14px; overflow: hidden; }
.barra-linha .trilho i { display: block; height: 100%; border-radius: 6px; min-width: 2px; }
.barra-linha .rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.funil-linha { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; margin: 9px 0; }
.funil-linha .trilho { background: var(--chip); border-radius: 8px; height: 26px; overflow: hidden; }
.funil-linha .trilho i { display: flex; align-items: center; padding-left: 9px; height: 100%; color: #fff; font-weight: 800; font-size: 13px; min-width: 34px; border-radius: 8px; }
.funil-linha .conv { text-align: right; font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.funil-linha .conv b { color: var(--texto); }
.grafico-dia { width: 100%; height: auto; max-height: 200px; display: block; }
.grafico-dia text { font-size: 11px; fill: var(--suave); }

/* tabelas */
.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 12px; font-weight: 700; color: var(--suave); padding: 9px 10px; border-bottom: 2px solid var(--linha); white-space: nowrap; }
td { padding: 11px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--papel-2); }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.link-copia { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* candidatos */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filtros > * { flex: none; }
.filtros .busca { position: relative; }
.filtros .busca .ico { position: absolute; left: 11px; top: 12px; color: var(--suave); pointer-events: none; }
.filtros .busca input { width: 250px; padding-left: 34px; }
.filtros select { width: auto; min-width: 150px; }
.mais-filtros { flex: 1 1 auto; }
.mais-filtros > summary { display: none; cursor: pointer; list-style: none; font-weight: 700; min-height: 40px; align-items: center; gap: 7px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 9px; background: var(--papel); }
.mais-filtros > summary::-webkit-details-marker { display: none; }
.filtros-itens { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 760px) {
  .mais-filtros { flex: 1 1 100%; order: 3; }
  .mais-filtros > summary { display: inline-flex; }
  .mais-filtros[open] > summary { margin-bottom: 10px; }
  .filtros .busca { flex: 1 1 100%; } .filtros .busca input { width: 100%; }
  .filtros .alternar { margin-left: 0; order: 2; }
  .filtros-itens select { width: 100%; }
}
.marcar { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.marcar input { width: 18px; height: 18px; accent-color: var(--grafite); }
.alternar { margin-left: auto; }
.quadro { display: grid; grid-template-columns: repeat(5, minmax(250px, 1fr)); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; }
.coluna { background: var(--coluna); border-radius: var(--r); padding: 10px; min-height: 160px; scroll-snap-align: start; border-top: 4px solid var(--cor); }
.coluna.sobre { outline: 3px dashed var(--cor); outline-offset: -3px; }
.coluna h3 { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; margin: 2px 2px 10px; }
.coluna h3 .contador { margin-left: auto; color: var(--suave); font-variant-numeric: tabular-nums; }
.coluna h3 .ajuda { background: none; border: 0; padding: 0; color: var(--suave); cursor: help; line-height: 0; }
.ficha { position: relative; background: var(--papel); border: 1px solid var(--linha); border-radius: 9px; padding: 10px 11px 10px 11px; margin-bottom: 8px; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); display: grid; grid-template-columns: auto 1fr; gap: 0 9px; }
.ficha:hover { border-color: var(--linha-forte); }
.ficha.selecionada { border-color: var(--ambar); box-shadow: 0 0 0 2px var(--ambar); }
.ficha.arrastando { opacity: .45; }
.ficha .corpo { min-width: 0; }
.ficha b { display: block; font-size: 15px; overflow-wrap: anywhere; line-height: 1.25; }
.ficha .sub { color: var(--suave); font-size: 13px; }
.ficha .marcas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; grid-column: 1 / -1; }
.ficha .marca-sel { position: absolute; right: 8px; top: 8px; width: 20px; height: 20px; accent-color: var(--grafite); opacity: 0; cursor: pointer; }
.ficha:hover .marca-sel, .ficha.selecionada .marca-sel, .ficha .marca-sel:focus-visible, .com-selecao .ficha .marca-sel { opacity: 1; }
body.compacto .ficha { padding: 7px 9px; margin-bottom: 5px; }
body.compacto .ficha .sub:nth-of-type(2) { display: none; }
body.compacto td { padding: 6px 10px; }
.barra-selecao { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; background: var(--grafite); color: #fff; border-radius: 14px; padding: 10px 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; box-shadow: var(--sombra-alta); max-width: calc(100% - 24px); }
.barra-selecao b { color: var(--ambar); }
.barra-selecao .btn { min-height: 36px; background: #2c2c2c; border-color: #4a4a4a; color: #fff; }
.barra-selecao .btn:hover { border-color: var(--ambar); }
.barra-selecao select { width: auto; min-height: 36px; background: #2c2c2c; border-color: #4a4a4a; color: #fff; }

/* gaveta do candidato e modais */
.fundo-modal { position: fixed; inset: 0; background: rgba(10, 12, 16, .55); z-index: 40; display: flex; justify-content: flex-end; }
.gaveta { background: var(--papel); width: min(600px, 100%); height: 100%; overflow-y: auto; padding: 18px 20px 40px; box-shadow: -8px 0 30px rgba(0, 0, 0, .3); }
.gaveta .nav { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--suave); font-size: 13px; }
.gaveta .nav .btn { min-height: 32px; padding: 0 9px; }
.gaveta .nav .espaco { margin-left: auto; }
.gaveta .cab { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.gaveta .cab h2 { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.gaveta .cab .vaga { color: var(--suave); font-size: 14px; }
.fechar { border: 0; background: var(--chip); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none; display: inline-grid; place-items: center; color: var(--texto); }
.bloco { border-top: 1px solid var(--linha); padding: 14px 0; }
.bloco h3 { font-size: 12px; font-weight: 800; color: var(--suave); margin-bottom: 8px; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.etapas { display: flex; flex-wrap: wrap; gap: 6px; }
.etapas button { border: 2px solid var(--cor); background: transparent; color: var(--cor); font-weight: 800; border-radius: 99px; padding: 6px 13px; cursor: pointer; min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.etapas button[aria-pressed="true"] { background: var(--cor); color: #fff; }
.etapas button .kbd { background: transparent; border-color: currentColor; opacity: .75; }
@media (hover: none) { .etapas button .kbd { display: none; } }
.par { display: grid; grid-template-columns: 150px 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.par dt { color: var(--suave); }
.par dd { margin: 0; overflow-wrap: anywhere; }
.linha-resposta { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--linha); font-size: 14px; }
.linha-resposta:last-child { border-bottom: 0; }
.cartao-entrevista { background: var(--papel-2); border: 1px solid var(--linha); border-left: 4px solid var(--entrevista); border-radius: var(--r-sm); padding: 12px; }
.cartao-entrevista .quando { font-size: 17px; font-weight: 800; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 4px; }
.linha-tempo li { position: relative; padding: 0 0 12px 22px; border-left: 2px solid var(--linha); font-size: 14px; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--cor, var(--descartado)); }
.linha-tempo .quem { color: var(--suave); font-size: 12px; }
.linha-tempo .tipo { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.nota-nova { display: flex; gap: 8px; margin-top: 8px; }
.nota-nova textarea { min-height: 70px; }
.menu { position: relative; display: inline-block; }
.menu > .lista { position: absolute; left: 0; top: calc(100% + 4px); z-index: 50; background: var(--papel); border: 1px solid var(--linha-forte); border-radius: var(--r); box-shadow: var(--sombra-alta); min-width: 260px; padding: 6px; }
.menu > .lista button { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.menu > .lista button:hover { background: var(--chip); }
.modal { background: var(--papel); border-radius: var(--r-lg); width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; margin: auto; padding: 22px 22px 20px; box-shadow: var(--sombra-alta); }
.modal.estreito { width: min(520px, calc(100% - 24px)); }
.modal h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.modal .rodape { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.fundo-modal.centro { justify-content: center; align-items: center; }
.perguntas-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin-top: 6px; }
@media (max-width: 640px) { .perguntas-grade { grid-template-columns: 1fr; } }
.perguntas-grade label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; padding: 6px 8px; border: 1px solid var(--linha); border-radius: 8px; cursor: pointer; }
.perguntas-grade input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--grafite); flex: none; }
.caixa-link { display: flex; gap: 8px; align-items: center; background: var(--papel-2); border: 1px solid var(--linha); border-radius: 9px; padding: 8px 10px; margin: 6px 0 12px; }
.caixa-link code { flex: 1; overflow-wrap: anywhere; font-size: 13px; }
.qr { width: 180px; height: 180px; background: #fff; border: 1px solid var(--linha); border-radius: 10px; padding: 6px; }
.guia h3 { margin: 14px 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.guia p, .guia li { margin: 0 0 6px; }
.guia ul { padding-left: 20px; margin: 4px 0 8px; }

/* agenda de entrevistas */
.agenda-dia { margin-bottom: 18px; }
.agenda-dia > h2 { font-size: 14px; font-weight: 800; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.agenda-dia > h2 .chip { text-transform: none; letter-spacing: 0; }
.agenda-item { display: grid; grid-template-columns: 74px 1fr auto; gap: 12px; align-items: center; background: var(--papel); border: 1px solid var(--linha); border-left: 4px solid var(--entrevista); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; }
.agenda-item.atrasada { border-left-color: var(--erro); }
.agenda-item .hora { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.agenda-item .quem { font-weight: 700; cursor: pointer; }
.agenda-item .quem:hover { text-decoration: underline; }
@media (max-width: 720px) { .agenda-item { grid-template-columns: 60px 1fr; } .agenda-item .acoes { grid-column: 1 / -1; } }

/* aviso rápido */
.avisos { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.aviso { background: var(--grafite); color: #fff; padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: var(--sombra-alta); display: flex; align-items: center; gap: 10px; }
.aviso.erro { background: var(--erro); color: #fff; }
.aviso button { background: none; border: 1px solid #777; color: var(--ambar); border-radius: 7px; padding: 3px 10px; cursor: pointer; font-weight: 700; }

/* login: o crachá da vaga */
.tela-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--ambar); }
.cracha { background: var(--grafite); color: #fff; border-radius: 22px; padding: 16px 14px 14px; width: min(380px, 100%); position: relative; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); margin-top: 60px; }
.cracha::before { content: ""; position: absolute; left: 50%; top: -60px; width: 44px; height: 70px; margin-left: -22px; background: #2b2b2b; }
.cracha .furo { display: block; width: 54px; height: 10px; border-radius: 5px; background: #3c3c3c; margin: 0 auto 12px; }
.cracha .logo { color: var(--ambar); margin: 0 0 12px 6px; }
.cracha .logo svg { width: 120px; height: 45px; fill: currentColor; display: block; }
.cracha .chamada { margin: 0 6px 4px; color: var(--ambar); font-weight: 700; }
.cracha h1 { margin: 0 6px 14px; font-size: 24px; font-weight: 800; }
.cracha form { background: #fff; color: #1c1c1c; border-radius: 14px; padding: 18px 16px; }
.cracha form input { background: #fff; color: #1c1c1c; border-color: #c4c8d0; }
.cracha .btn { width: 100%; min-height: 48px; }