/* =====================================================================
   ADE — Avaliação de Empregado
   Sistema de design da PCM

   Cores amostradas dos logos: grafite #373435 e amarelo #FFCC29.
   O amarelo tem 1,5:1 de contraste sobre branco — texto branco sobre ele
   é ilegível. Por isso botão primário é grafite, e o amarelo fica para
   foco, borda de status e realce.
   ===================================================================== */

:root{
    /* marca */
    --grafite:      #373435;
    --preto:        #1d1b1c;
    --acento:       #FFCC29;
    --acento-texto: #8a6300;   /* amarelo escurecido — 4,8:1 sobre branco */
    --acento-bg:    #fff8e1;

    /* superfícies */
    --bg:      #f4f3f1;
    --texto:   #373435;
    --suave:   #7a7a77;
    --borda:   #e4e4e0;
    --cinza-bg:#eef0f1;

    /* funcionais */
    --verde:#1f9d57;   --verde-bg:#e7f6ee;
    --vermelho:#c23b3b;--vermelho-bg:#fdecec;

    --sombra:0 2px 10px rgba(0,0,0,.07);
    --raio:14px;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }
body{
    font-family:'Segoe UI',system-ui,-apple-system,Arial,sans-serif;
    background:var(--bg); color:var(--texto); line-height:1.5;
    font-size:15px;
}
a{ color:inherit; text-decoration:none }
[hidden]{ display:none !important }

/* ---------------------------------------------------------------- topbar */
.topbar{
    background:var(--grafite); color:#fff;
    border-bottom:3px solid var(--acento);
    box-shadow:var(--sombra);
}
.topbar-in{
    max-width:1040px; margin:0 auto; padding:12px 20px;
    display:flex; align-items:center; gap:16px;
}
.marca{ display:flex; align-items:center; gap:10px; font-weight:600 }
.marca img{ height:34px; width:auto; display:block }
.marca .sigla{ font-size:18px; letter-spacing:.5px }
.marca .sub{ font-size:12px; color:#bdbab6; font-weight:400 }

.nav{ display:flex; gap:4px; margin-left:auto }
.nav a{
    color:#d9d7d2; font-size:13.5px; padding:7px 12px; border-radius:8px;
}
.nav a:hover{ background:rgba(255,255,255,.12); color:#fff }
.nav a.ativo{ background:rgba(255,255,255,.16); color:#fff }

.usuario{ display:flex; align-items:center; gap:12px; font-size:13.5px }
.usuario-nome{ color:#eceae6 }
.usuario-perfil{
    font-size:10.5px; font-weight:700; text-transform:uppercase;
    letter-spacing:.4px; background:var(--acento); color:var(--grafite);
    padding:2px 8px; border-radius:20px;
}
.btn-sair{
    background:rgba(255,255,255,.14); padding:6px 13px; border-radius:8px;
    font-size:13px; border:1px solid rgba(255,255,255,.12); color:#fff;
}
.btn-sair:hover{ background:var(--acento); color:var(--grafite); border-color:var(--acento) }

/* ---------------------------------------------------------------- layout */
.wrap{ max-width:1040px; margin:0 auto; padding:28px 20px 60px }
.page-head{ margin-bottom:20px }
.page-head h1{ font-size:24px; font-weight:600 }
.page-sub{ color:var(--suave); font-size:14px; margin-top:4px }
.secao-titulo{ font-size:18px; margin-bottom:14px; font-weight:600 }

.rodape{
    text-align:center; color:var(--suave); font-size:12px; padding:22px;
}

/* ---------------------------------------------------------------- cartão central (login) */
.tela-centro{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:20px;
}
.cartao{
    background:#fff; border-radius:var(--raio); box-shadow:var(--sombra);
    padding:34px 32px; width:100%; max-width:430px;
    border-top:4px solid var(--acento);
}
.cartao .logo{ display:block; margin:0 auto 18px; height:46px; width:auto }
.cartao h1{ font-size:22px; text-align:center; font-weight:600 }
.cartao .sub{ color:var(--suave); font-size:14px; text-align:center; margin-bottom:22px }

/* ---------------------------------------------------------------- formulário */
label{ display:block; font-size:13px; font-weight:600; color:#5b5a58; margin-bottom:5px }
input[type=text],input[type=password],input[type=number],
input[type=date],select,textarea{
    width:100%; padding:11px 13px; font-size:15px; font-family:inherit;
    border:1.5px solid var(--borda); border-radius:9px; background:#fff;
    color:var(--texto); margin-bottom:16px;
}
input:focus,select:focus,textarea:focus{
    outline:none; border-color:var(--acento);
    box-shadow:0 0 0 3px var(--acento-bg);
}
input::placeholder{ color:#b3b1ad }

.btn{
    display:inline-block; width:100%; padding:12px 16px; border:0;
    border-radius:10px; background:var(--grafite); color:#fff;
    font-size:15px; font-weight:600; cursor:pointer; font-family:inherit;
    text-align:center; transition:background .12s;
}
.btn:hover{ background:var(--preto) }
.btn:disabled{ opacity:.55; cursor:default }
.btn-sec{
    background:#fff; border:1.5px solid var(--borda); color:var(--grafite);
}
.btn-sec:hover{ background:var(--acento-bg); border-color:var(--acento) }
.btn-auto{ width:auto; padding:10px 22px }

.link{
    display:inline-block; margin-top:16px; font-size:13.5px; font-weight:600;
    color:var(--acento-texto);
}
.link:hover{ text-decoration:underline }
.centro{ text-align:center }

.dica{ font-size:12.5px; color:var(--suave); margin:-10px 0 16px }

/* ---------------------------------------------------------------- avisos */
.aviso{
    padding:11px 14px; border-radius:10px; font-size:14px;
    margin-bottom:16px; line-height:1.45;
}
.aviso.erro{ background:var(--vermelho-bg); color:var(--vermelho) }
.aviso.ok  { background:var(--verde-bg);    color:var(--verde) }
.aviso.info{ background:var(--acento-bg);   color:#6b4e00 }

/* confirmação de identidade na redefinição */
.confirma{
    background:var(--acento-bg); border-left:4px solid var(--acento);
    border-radius:8px; padding:11px 14px; margin-bottom:16px; font-size:14px;
}
.confirma strong{ display:block; font-size:16px; margin-top:2px }
.confirma .re{ color:var(--suave); font-size:12.5px }

/* ---------------------------------------------------------------- painel e tiles */
.painel{
    background:#fff; border-radius:var(--raio); box-shadow:var(--sombra);
    padding:20px; margin-bottom:20px;
}
.resumo{ display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap }
.resumo-item{
    flex:1; min-width:150px; background:#fff; border-radius:var(--raio);
    box-shadow:var(--sombra); padding:16px; font-size:13px; color:var(--suave);
    border-left:5px solid var(--borda);
}
.resumo-item .n{ display:block; font-size:26px; font-weight:800; color:var(--texto) }
.resumo-item.st-acao   { border-left-color:var(--acento) }
.resumo-item.st-ok     { border-left-color:var(--verde) }
.resumo-item.st-neutro { border-left-color:var(--suave) }
.resumo-item.st-erro   { border-left-color:var(--vermelho) }

.lista-info{ font-size:14px }
.lista-info div{
    display:flex; justify-content:space-between; gap:14px;
    padding:10px 0; border-bottom:1px solid var(--borda);
}
.lista-info div:last-child{ border-bottom:0 }
.lista-info span:first-child{ color:var(--suave) }
.lista-info span:last-child{ font-weight:600; text-align:right }

/* ---------------------------------------------------------------- responsivo */
@media(max-width:600px){
    .wrap{ padding:20px 14px 50px }
    .cartao{ padding:26px 20px }
    .topbar-in{ flex-wrap:wrap; gap:10px }
    .nav{ order:3; width:100%; margin:2px 0 0; overflow-x:auto }
    .nav a{ padding:6px 10px; white-space:nowrap }
    .marca .sub{ display:none }
}

/* ---------------------------------------------------------------- tabela */
.tabela-wrap{
    overflow-x:auto; background:#fff; border-radius:var(--raio);
    box-shadow:var(--sombra);
}
.tabela{ width:100%; border-collapse:collapse; font-size:14px }
.tabela th,.tabela td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--borda) }
.tabela th{
    background:var(--cinza-bg); color:#5b5a58; font-size:12px;
    text-transform:uppercase; letter-spacing:.3px; font-weight:700; white-space:nowrap;
}
.tabela tr:last-child td{ border-bottom:0 }
.tabela td.num{ text-align:right; font-variant-numeric:tabular-nums }
.tabela .vazio{ text-align:center; color:var(--suave); padding:26px }
.tabela .sub{ display:block; font-size:12px; color:var(--suave); margin-top:2px }

/* ---------------------------------------------------------------- etiqueta */
.tag{
    display:inline-block; font-size:11px; font-weight:700; padding:3px 10px;
    border-radius:20px; text-transform:uppercase; letter-spacing:.3px;
    white-space:nowrap;
}
.tag-neutro{ background:var(--cinza-bg);   color:#5b5a58 }
.tag-acao  { background:var(--acento);     color:var(--grafite) }
.tag-ok    { background:var(--verde-bg);   color:var(--verde) }
.tag-erro  { background:var(--vermelho-bg);color:var(--vermelho) }

/* ---------------------------------------------------------------- linha de ação */
.acoes{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px }
.acoes form{ margin:0 }
.acoes .btn{ width:auto; padding:9px 18px; font-size:14px }

.form-linha{
    display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin:0;
}
.form-linha input,.form-linha select{ margin-bottom:0; width:auto }
.form-linha input[type=date]{ min-width:140px }
.form-linha .btn{ width:auto; padding:9px 14px; font-size:13.5px }

.form-nova{
    display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
}
.form-nova > div{ flex:1; min-width:200px }
.form-nova input{ margin-bottom:0 }
.form-nova .btn{ width:auto; padding:11px 22px }

/* ---------------------------------------------------------------- bloco de item */
.item-comp{
    border:1.5px solid var(--borda); border-radius:10px; padding:14px;
    margin-bottom:10px;
}
.item-comp .ordem{
    display:inline-block; min-width:26px; height:26px; line-height:26px;
    text-align:center; background:var(--cinza-bg); border-radius:50%;
    font-size:12px; font-weight:700; color:#5b5a58; margin-right:8px;
}
.item-comp textarea{ min-height:62px; resize:vertical; margin-bottom:10px }
.item-comp .estatico{ font-size:14px; line-height:1.55 }
.item-comp .estatico strong{ display:block; margin-bottom:2px }
.item-comp .estatico span{ color:var(--suave) }

.nota-regra{
    background:var(--acento-bg); border-left:4px solid var(--acento);
    border-radius:8px; padding:12px 14px; font-size:13.5px; line-height:1.55;
    margin-bottom:18px;
}

/* ---------------------------------------------------------- lista de pessoas */
.lista-pessoas{ display:flex; flex-direction:column; gap:9px }
.pessoa{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background:#fff; border:1px solid var(--borda); border-radius:12px;
    padding:13px 16px; border-left:5px solid var(--borda);
    transition:transform .12s, box-shadow .12s, border-color .12s;
}
a.pessoa:hover{ transform:translateX(2px); box-shadow:var(--sombra) }
.pessoa.st-acao     { border-left-color:var(--acento) }
.pessoa.st-rascunho { border-left-color:var(--suave) }
.pessoa.st-devolvida{ border-left-color:var(--vermelho) }
.pessoa.st-ok       { border-left-color:var(--verde) }
.pessoa.st-neutro   { border-left-color:var(--borda); background:#fcfcfb }
.pessoa-info strong{ font-size:15px; display:block }
.pessoa-info .meta { font-size:12.5px; color:var(--suave); display:block; margin-top:2px }
.pessoa-dir{ display:flex; align-items:center; gap:12px; flex-shrink:0 }
.pessoa-dir .cta{ font-size:13.5px; font-weight:700; color:var(--grafite) }
.pessoa-dir .motivo{ font-size:12.5px; color:var(--suave); text-align:right; max-width:260px }

/* ------------------------------------------------------------- progresso */
.barra-progresso{ margin:0 0 18px }
.barra-progresso .pb{
    height:7px; background:var(--borda); border-radius:4px; overflow:hidden;
    margin-bottom:5px;
}
.barra-progresso .pb span{
    display:block; height:100%; background:var(--acento); transition:width .15s;
}
.barra-progresso .pb-txt{ font-size:12.5px; color:var(--suave) }

/* ----------------------------------------------------------- competência */
.competencia{
    background:#fff; border-radius:var(--raio); box-shadow:var(--sombra);
    padding:18px; margin-bottom:12px;
}
.comp-cab{ display:flex; gap:12px; align-items:flex-start; margin-bottom:14px }
.comp-num{
    flex-shrink:0; width:28px; height:28px; line-height:28px; text-align:center;
    background:var(--cinza-bg); border-radius:50%; font-size:12.5px;
    font-weight:700; color:#5b5a58;
}
.comp-cab strong{ font-size:15.5px; display:block }
.comp-cab p{ font-size:13.5px; color:var(--suave); margin-top:3px; line-height:1.5 }

/* --------------------------------------------------------------- escala */
.escala{ display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.nota{ cursor:pointer; margin:0 }
.nota input{ position:absolute; opacity:0; width:0; height:0 }
.nota span{
    display:inline-flex; width:42px; height:42px; align-items:center;
    justify-content:center; border:1.5px solid var(--borda); border-radius:10px;
    font-weight:700; font-size:15px; color:var(--suave);
    transition:background .1s, color .1s, border-color .1s;
}
.nota span:hover{ border-color:var(--acento); background:var(--acento-bg) }
.nota input:checked + span{
    background:var(--acento); color:var(--grafite); border-color:#d9a800;
}
.nota input:focus-visible + span{ box-shadow:0 0 0 3px var(--acento-bg) }
.escala-legenda{
    font-size:12.5px; color:var(--suave); margin-left:4px; flex:1; min-width:180px;
}

.just{ margin-top:14px }
.just textarea{ margin-bottom:0 }

/* --------------------------------------------------------- ações do form */
.acoes-fixas{
    position:sticky; bottom:0; display:flex; gap:10px; flex-wrap:wrap;
    background:var(--bg); padding:14px 0 4px; margin-top:6px;
    border-top:1px solid var(--borda);
}
.acoes-fixas .btn{ width:auto; padding:12px 26px }

@media(max-width:600px){
    .nota span{ width:38px; height:38px; font-size:14px }
    .escala-legenda{ width:100%; margin:6px 0 0 }
    .pessoa{ flex-direction:column; align-items:flex-start; gap:8px }
    .pessoa-dir{ width:100%; justify-content:space-between }
    .pessoa-dir .motivo{ text-align:left; max-width:none }
    .acoes-fixas .btn{ flex:1 }
}