/* Complementos ao app.css (design system herdado dos HTMLs da Central do Processo). */

/* Identidade Charles River: navy e ouro oficiais no lugar do azul genérico do protótipo.
   `color-scheme` faz os controles nativos (calendário, seta do select, scrollbar) seguirem o tema. */
:root{--accent:#133C63; --accent-2:#1F5288; --accent-soft:#E8EEF5; --ouro:#DC9A56; color-scheme:light}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--accent:#9DB6D8; --accent-2:#B9CCE6; --accent-soft:#1B2A3F; color-scheme:dark} }
:root[data-theme="dark"]{--accent:#9DB6D8; --accent-2:#B9CCE6; --accent-soft:#1B2A3F; color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

/* Campos: o app.css só cobre text/date/time/email/url. Cobre o resto com os mesmos tokens. */
input:not([type]), input[type=number], input[type=password], input[type=search], input[type=tel],
input[type=text], input[type=date], input[type=time], input[type=email], input[type=url], textarea, select{
  font:inherit; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; width:100%;
}
input[type=file]{font:inherit; color:var(--ink-2); background:var(--surface-2); border:1px dashed var(--line); border-radius:7px; padding:6px 9px; width:100%}
input[type=file]::file-selector-button{font:inherit; font-size:12px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:3px 9px; margin-right:8px; cursor:pointer}
input[type=checkbox]{width:16px; height:16px; accent-color:var(--accent)}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input:disabled, textarea:disabled, select:disabled{opacity:.7; cursor:not-allowed}

/* seletor de processo no topo: o título é um select disfarçado */
.proc-switch{position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer; border-radius:6px; padding:0 6px; margin-left:-6px}
.proc-switch:hover{background:var(--accent-soft)}
.proc-switch .ttl{pointer-events:none}
.proc-switch .chev{color:var(--ink-3); font-size:13px; pointer-events:none}
.proc-switch select{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font:inherit}
.proc-switch:focus-within{outline:2px solid var(--accent); outline-offset:2px}

/* seletor de tema (Sistema · Claro · Escuro) */
.tema{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--surface)}
.tema button{font:12px var(--sans); padding:4px 9px; border:0; background:transparent; color:var(--ink-2); cursor:pointer; display:inline-flex; gap:5px; align-items:center}
.tema button + button{border-left:1px solid var(--line-2)}
.tema button:hover{background:var(--mute-soft); color:var(--ink)}
.tema button[aria-pressed="true"]{background:var(--accent); color:#fff}
.tema button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* logo oficial: texto azul no tema claro, texto branco no escuro */
.logo-cr{display:inline-flex; align-items:center; text-decoration:none; line-height:0}
.logo-cr img{height:40px; width:auto; display:block}
.logo-cr.lg img{height:64px}
.logo-cr .escuro{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .logo-cr .claro{display:none} :root:not([data-theme="light"]) .logo-cr .escuro{display:block} }
:root[data-theme="dark"] .logo-cr .claro{display:none}
:root[data-theme="dark"] .logo-cr .escuro{display:block}
:root[data-theme="light"] .logo-cr .claro{display:block}
:root[data-theme="light"] .logo-cr .escuro{display:none}

/* rail como links, não botões */
.rail a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;color:var(--ink-2);text-decoration:none;font-size:13.5px;border:1px solid transparent}
.rail a:hover{background:var(--accent-soft);color:var(--ink)}
.rail a[aria-current="true"]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:500}
.rail a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rail a.desab{opacity:.45;cursor:default}
.rail .idx{font:12px var(--mono);color:var(--ink-3);min-width:20px}
/* o rail tem dois níveis: a navegação da plataforma (sempre nas mesmas posições) e,
   abaixo, as seções do que está aberto — processo ou prova. O rótulo separa os dois. */
.railgrp{display:flex;flex-direction:column;gap:2px}
.railgrp + .railgrp{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2)}
.railgrp-t{font:600 10px var(--sans);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);padding:0 10px 6px}
.topbar .logo{text-decoration:none}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.login-card{width:min(420px,100%)}
.login-card > header{padding:16px}
.login-card .field input{width:100%}

/* tabelas básicas */
.scroller{overflow-x:auto}
.scroller table{width:100%;border-collapse:collapse;font-size:13.5px}
.scroller th,.scroller td{padding:9px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.scroller th{font:500 11.5px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);background:var(--surface-2);white-space:nowrap}
.scroller tbody tr:last-child td{border-bottom:0}
.scroller tr.feito td{opacity:.55;text-decoration:line-through}
.scroller tr.inativo td{opacity:.6}
.scroller tr.erro{outline:2px solid var(--no)}
.empty{color:var(--ink-3);padding:18px;text-align:center}
fieldset[disabled] input,fieldset[disabled] select,fieldset[disabled] textarea{opacity:.85}
h4{font:600 12px/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:14px 0 8px}

/* tiles do resumo */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.tile{background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;padding:10px 12px}
.tile .n{font:600 24px/1.1 var(--serif);font-variant-numeric:tabular-nums}
.tile .n .hint{font:13px var(--mono)}
.tile .l{font-size:12px;color:var(--ink-3);margin-top:3px}

/* funil */
.funil{display:grid;gap:6px}
.frow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;gap:10px;align-items:center;font-size:13px}
.fbar{position:relative;height:14px;background:var(--mute-soft);border-radius:4px;overflow:hidden}
.fbar i{position:absolute;left:0;top:0;bottom:0;display:block}
.fbar .eleg{background:var(--bar-soft)}
.fbar .apro{background:var(--ok-bar)}
.fn{color:var(--ink-2);min-width:56px;text-align:right}

/* quadro: layout fixo para que todas as etapas tenham a mesma largura.
   Em table-layout:fixed as colunas sem largura declarada dividem o espaço restante em partes iguais,
   então basta fixar nome/situação/observação. O min-width vem do template (cresce com o nº de etapas). */
.stagegrid{table-layout:fixed}
.stagegrid th{white-space:normal}   /* cabeçalho quebra em vez de vazar para a coluna vizinha */
.stagegrid col.c-nome{width:200px}
.stagegrid col.c-sit{width:150px}
.stagegrid col.c-obs{width:190px}
.stagegrid td.travada{background:var(--mute-soft)}
.stagegrid select.status{width:100%;min-width:0;font-size:12.5px}
.stagegrid select.status.ok{color:var(--ok);border-color:var(--ok)}
.stagegrid select.status.no{color:var(--no);border-color:var(--no)}
.stagegrid select.status.wait{color:var(--wait);border-color:var(--wait)}
.pill.mute{background:var(--mute-soft);color:var(--ink-3)}

/* candidatos */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;align-items:stretch}
/* dentro da grade o empilhamento é do grid: a margem de `.card + .card` só desalinharia as colunas */
.cards > .card + .card{margin-top:0}
.candcard{text-decoration:none;color:inherit;display:flex}
.candcard > .body{flex:1;min-width:0}
.candcard:hover{border-color:var(--accent)}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:600 18px var(--serif);overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{width:72px;height:72px;font-size:26px}
.steps{display:inline-flex;gap:4px;margin-top:8px}
.step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;font:600 11px var(--mono);background:var(--line-2);color:var(--ink-3)}
.step.ok{background:var(--ok-soft);color:var(--ok)}
.step.no{background:var(--no-soft);color:var(--no)}
.step.wait{background:var(--wait-soft);color:var(--wait)}
.step.mute{background:var(--mute-soft);color:var(--ink-3);opacity:.6}
.etapa-bloco .status{padding:3px 8px}

/* correção: alternativas A–E */
.opts{display:inline-flex;gap:4px}
.opt{width:30px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);font:600 12.5px var(--mono);cursor:pointer;display:inline-grid;place-items:center}
.opt:hover{border-color:var(--accent);color:var(--ink)}
.opt.on{background:var(--accent);border-color:var(--accent);color:#fff}
span.opt{cursor:default}
.scroller tr.sel td{background:var(--accent-soft)}
.tally{display:flex;gap:22px;align-items:center;padding:10px 14px;flex-wrap:wrap}
textarea.mono{font:12.5px/1.5 var(--mono)}

/* gráfico de notas */
.vrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) 52px;gap:10px;align-items:center;font-size:13px;margin:4px 0}
.vnome{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnome a{color:inherit;text-decoration:none}
.vtrack{position:relative;height:12px;background:var(--mute-soft);border-radius:3px}
.vbar{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px}
.vbar.abaixo{background:var(--no)}
.vn{text-align:right;color:var(--ink-2)}

/* arquivos */
.docrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.docrow:last-child{border-bottom:0}
.docrow .ext{flex:none;width:40px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;font-size:10px;color:var(--ink-3);background:var(--surface-2)}
.docrow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.docrow .acts{display:flex;gap:6px;flex:none}

/* zona de risco: arquivar/excluir processo */
.zona-risco{border-color:var(--no-soft)}
.zona-risco summary::-webkit-details-marker{display:none}
.zona-risco summary{list-style:none}
.zona-risco summary::before{content:"▸"; color:var(--ink-3); font-size:12px}
.zona-risco[open] summary::before{content:"▾"}
.zona-risco[open]{border-color:var(--no)}
.btn.danger{color:var(--no); border-color:var(--no)}

/* tile clicável (feedbacks pendentes) */
a.tile:hover{border-color:var(--accent)}

/* feedbacks */
.texto-fb{white-space:pre-wrap; font:12.5px/1.5 var(--sans); background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px; padding:10px 12px; margin:8px 0 0; max-width:70ch}
.modelo-fb{border-top:1px solid var(--line-2); padding:10px 0}
.modelo-fb:first-of-type{border-top:0; padding-top:0}
.modelo-fb summary{cursor:pointer; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.modelo-fb summary::-webkit-details-marker{display:none}
.modelo-fb summary::before{content:"▸"; color:var(--ink-3); font-size:12px}
.modelo-fb[open] summary::before{content:"▾"}
code{font:12px var(--mono); background:var(--mute-soft); padding:1px 5px; border-radius:4px}

/* agenda: linha do tempo herda do app.css; o link do nome não pode ficar azul */
.tl .quem a.n{color:inherit}
.subhead{margin:0 0 8px}

/* ficha final para impressão / PDF */
.impressao{max-width:900px; margin:0 auto; padding:24px 20px 40px}
.imp-cab{display:flex; gap:18px; align-items:center; margin-bottom:18px; padding-bottom:14px; border-bottom:2px solid var(--accent)}
.imp-cab .imp-meta{flex:1}
.imp-titulo{font:600 20px/1.2 var(--serif)}
.imp-rodape{margin-top:18px; text-align:center}
.impressao .fichafinal textarea, .impressao .fichafinal input{background:transparent; border-color:var(--line-2)}
@media print{
  @page{margin:14mm}
  body{background:#fff; color:#000}
  .imp-btn, #toast{display:none!important}
  .impressao{max-width:none; padding:0}
  .card{box-shadow:none; border-color:#bbb; break-inside:avoid}
  .fichafinal textarea{min-height:0; height:auto; resize:none; overflow:visible; border:0; padding:0}
  .fichafinal input{border:0; padding:0}
  .avatar{display:none}
  a{color:inherit; text-decoration:none}
}

@media (max-width:820px){
  .frow{grid-template-columns:1fr}
  .fn{text-align:left}
  /* rail vira uma faixa horizontal: os grupos somem como caixa e os links entram direto na faixa */
  .railgrp{display:contents}
  .railgrp-t{display:none}
}