/* Identidade visual do Portal RH Qualylife: Roboto, laranja #F29100, topo escuro com pílula preta,
   cartões arredondados e tema escuro automático. */
:root{--or:#F29100;--or-d:#C97800;--bk:#000;--f:Roboto,"Helvetica Neue",Arial,sans-serif;
  --ink:#161616;--mut:#5b5b57;--bg:#F4F3EF;--card:#fff;--line:#dcdad3;
  --red:#E0554F;--yel:#F2CF4A;--grn:#5DB26C;--blu:#4aa3df;--err:#b3261e}
@media (prefers-color-scheme:dark){:root{--bg:#0d0d0d;--card:#181818;--ink:#f2f2ee;--mut:#a3a39c;--line:#2e2e2b;--or-d:#F29100;--err:#ff8a80}}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:400;line-height:1.5;
  padding-bottom:env(safe-area-inset-bottom,0px)}
button,input,select,textarea{font-family:var(--f)}
a{color:var(--or-d)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.wrap.wide{max-width:1100px}

/* Topo: fundo escuro com gradiente, cabeçalho em pílula e título */
.topbg{background:radial-gradient(120% 150% at 85% 0%,#41413f 0%,#171717 48%,#060606 100%);color:#fff;
  padding-top:env(safe-area-inset-top,0px)}
header.top .wrap{display:block;padding-top:14px}
.pill{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#000;border:1px solid #2b2b29;
  border-radius:999px;padding:8px 14px 8px 22px}
.pill img{height:26px;width:auto;display:block}
.pill .ttl{margin-left:auto;font-weight:700;font-size:.82rem;color:#fff}
.pill #who{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:10px;font-size:.8rem;color:#d6d6d0}
.pill #who button{background:transparent;color:#fff;border:1px solid #666;border-radius:999px;padding:5px 12px;
  font-weight:500;cursor:pointer}
.pill #who button:hover{border-color:var(--or);color:var(--or)}
.hero{padding:46px 0 34px}
.hero h1{font-weight:300;font-size:clamp(1.5rem,5.4vw,2.7rem);line-height:1.1;letter-spacing:-.01em;margin:0 0 6px}
.hero h1 b{font-weight:700}
.hero .slogan{font-size:clamp(1.05rem,3vw,1.5rem);font-weight:300;color:var(--or);margin:0 0 20px}
.hero p{margin:0;max-width:60ch;color:#d6d6d0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px}
.steps div{border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.05);
  padding:10px 14px;color:#cfcfc8;font-size:.78rem}
.steps b{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:#fff}
.steps b::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--or)}
@media(max-width:620px){.steps{grid-template-columns:1fr}}

/* Cartões e formulários */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card h3{margin:0 0 6px;font-size:.95rem;font-weight:800}
.card.lift{margin-top:-18px;position:relative}
h2.blk{font-weight:700;font-size:1.1rem;margin:30px 0 6px}
label{display:block;font-weight:700;font-size:.88rem;margin:14px 0 4px}
input,select,textarea{width:100%;padding:11px 12px;font:inherit;font-weight:400;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:6px}
input[type=checkbox]{width:auto}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--or);outline-offset:2px}
textarea{min-height:90px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.row3{display:grid;grid-template-columns:2fr 1fr;gap:12px}
@media(max-width:520px){.row,.row3{grid-template-columns:1fr}}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-weight:400;font-size:.88rem;color:var(--mut)}
.chk input{margin-top:4px}
.msg{margin-top:14px;font-weight:700}.msg.err,.err{color:var(--err);font-weight:700;margin-top:10px}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.mut{color:var(--mut)}.hide{display:none}
.foot{margin:18px 0 40px;font-size:.8rem;color:var(--mut);text-align:center}

/* Botões: laranja primário e contorno secundário */
button,.btn{font:inherit;font-weight:700;border-radius:6px;cursor:pointer}
.b1,.btn.pri{background:var(--or);color:#000;border:0;padding:13px 22px}
.b1:hover,.btn.pri:hover{background:#ffa31a}
.b1.full{width:100%;margin-top:20px}
.btn{padding:9px 16px;font-size:.88rem;background:transparent;color:var(--ink);border:1px solid var(--ink);font-weight:500}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.pri{font-weight:700}
.btn.sm{padding:6px 12px;font-size:.82rem;min-height:36px}
.btn.dng{color:var(--err);border-color:var(--err)}.btn.dng:hover{background:var(--err);color:#fff}
button:disabled{opacity:.5;cursor:not-allowed}

/* Navegação em pílulas */
nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
nav button{padding:9px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:500}
nav button:hover{border-color:var(--or)}
nav button.on{background:var(--or);border-color:var(--or);color:#000;font-weight:700}

/* Tabelas, filtros e indicadores */
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filtros input,.filtros select{width:auto;min-width:170px;min-height:42px}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px;font-size:.88rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);font-weight:700}
tbody tr:hover td{background:color-mix(in srgb,var(--or) 7%,transparent)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.kpi b{display:block;font-weight:300;font-size:1.8rem;color:var(--or-d)}.kpi span{color:var(--mut);font-size:.82rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.grid2 label{margin-top:0}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;font-weight:500}
.tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mut)}
.tag[data-s=novo]::before,.tag[data-s=indicado]::before{background:var(--blu)}
.tag[data-s=triagem]::before,.tag[data-s=entrevista]::before{background:var(--yel)}
.tag[data-s=aprovado]::before{background:var(--or)}
.tag[data-s=contratado]::before{background:var(--grn)}
.tag[data-s=descartado]::before,.tag[data-s=recusado]::before{background:var(--red)}

/* Login e diálogo */
.login{max-width:400px;margin:0 auto 40px}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);max-width:560px;width:calc(100% - 32px);padding:20px}
dialog::backdrop{background:#000a}
dialog h3{margin-top:0}