/* ===================================================================
   Desenvolvimento Profissional  ·  RS/NNE1
   Paleta Petrobras: verde #009640, verde escuro #00382a, amarelo #ffcc00.
   =================================================================== */

:root{
  /* marca */
  --pb-verde:#009640; --pb-verde-forte:#007532; --pb-verde-escuro:#00382a;
  --pb-noite:#052a1c; --pb-noite-2:#0a3a27;
  --pb-amarelo:#ffcc00; --pb-amarelo-fundo:#fff6d6; --pb-amarelo-tinta:#8a6300;
  --pb-verde-fundo:#e6f5ec; --pb-verde-tinta:#00693a;
  --pb-vermelho:#c62828; --pb-vermelho-fundo:#fdecea;

  /* superfícies */
  --fundo:#eef2f0; --painel:#ffffff; --painel-2:#f6f9f7;
  --linha:#e6ecea; --linha-forte:#d3dedb;
  --tinta:#0f1c17; --tinta-2:#45564f; --tinta-3:#7b8c85;

  --r-g:22px; --r-m:14px; --r-p:10px;
  --s-1:0 1px 2px rgba(5,42,28,.04);
  --s-2:0 2px 8px -2px rgba(5,42,28,.07), 0 12px 32px -18px rgba(5,42,28,.18);
  --s-3:0 8px 24px -8px rgba(5,42,28,.22), 0 24px 56px -28px rgba(5,42,28,.4);
  --lateral-w:232px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--fundo);color:var(--tinta);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","ss01";
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.18;letter-spacing:-.02em}
h1{font-size:1.72rem;font-weight:700}
h2{font-size:1.02rem;font-weight:650;letter-spacing:-.01em}
h3{font-size:.72rem;font-weight:700;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.08em}
svg{display:block}
.so-largo{display:inline}

.app{display:flex;min-height:100vh;padding:14px;gap:14px}

/* =============================================================== lateral */
.lateral{
  width:var(--lateral-w);flex:none;border-radius:26px;padding:22px 16px 18px;
  background:linear-gradient(168deg,var(--pb-noite-2) 0%,var(--pb-noite) 62%,#032115 100%);
  color:#fff;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:14px;height:calc(100vh - 28px);box-shadow:var(--s-3);
}
.marca{display:flex;align-items:center;gap:11px;padding:2px 8px 20px}
.marca-icone{
  width:36px;height:36px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:var(--pb-verde);box-shadow:0 6px 18px -6px rgba(0,150,64,.9);
}
.marca-icone svg{width:19px;height:19px;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.marca-texto{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.marca-texto strong{font-size:.94rem;font-weight:650;letter-spacing:-.01em}
.marca-texto small{font-size:.7rem;color:rgba(255,255,255,.5);letter-spacing:.06em;font-weight:500}

.lateral-secao{
  margin:14px 0 7px;padding:0 10px;font-size:.63rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.35);
}
.lateral-secao:first-of-type{margin-top:0}
.lateral-itens{display:flex;flex-direction:column;gap:3px}
.lateral-itens a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;
  font-size:.885rem;font-weight:500;color:rgba(255,255,255,.66);transition:all .15s;
}
.lateral-itens a svg{width:18px;height:18px;flex:none;stroke:currentColor;stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.lateral-itens a:hover{background:rgba(255,255,255,.07);color:#fff}
.lateral-itens a.ativo{background:#fff;color:var(--pb-verde-escuro);font-weight:650;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.lateral-itens a.ativo svg{stroke-width:2;color:var(--pb-verde)}

.lateral-rodape{
  margin-top:auto;display:flex;gap:9px;align-items:flex-start;padding:13px;border-radius:15px;
  background:rgba(255,255,255,.06);font-size:.72rem;line-height:1.45;color:rgba(255,255,255,.6);
}
.lateral-rodape svg{width:14px;height:14px;flex:none;margin-top:2px;stroke:var(--pb-amarelo);
  stroke-width:1.9;fill:none;stroke-linecap:round}

/* ============================================================== conteúdo */
.conteudo{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px;padding:8px 8px 40px}
.saudacao{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.saudacao-texto small{font-size:.8rem;color:var(--tinta-3);font-weight:500;display:block;margin-bottom:3px}
.saudacao-acoes{display:flex;align-items:center;gap:10px}
.ciclo{
  display:flex;align-items:center;gap:8px;background:var(--painel);border:1px solid var(--linha);
  border-radius:99px;padding:5px 7px 5px 15px;box-shadow:var(--s-1);
}
.ciclo span{font-size:.76rem;color:var(--tinta-3);font-weight:600}
.ciclo select{
  appearance:none;border:0;background:var(--painel-2);color:var(--tinta);cursor:pointer;
  border-radius:99px;padding:5px 27px 5px 12px;font:inherit;font-size:.82rem;font-weight:650;width:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8c85' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:12px;
}
.ico-mais{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.tela{display:flex;flex-direction:column;gap:18px}
.tela > *{animation:entra .24s ease-out}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ================================================================ cartão */
.cartao{background:var(--painel);border-radius:var(--r-g);box-shadow:var(--s-2);overflow:hidden}
.cartao-topo{
  padding:18px 22px 14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.cartao-topo + .rolar table thead th{border-top:1px solid var(--linha)}
.cartao-corpo{padding:4px 22px 20px}
.cartao-topo + .cartao-corpo{padding-top:0}
.vazio{
  padding:40px 22px;text-align:center;color:var(--tinta-3);font-size:.87rem;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.vazio svg{width:30px;height:30px;stroke:var(--linha-forte);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.carregando{padding:60px;text-align:center;color:var(--tinta-3);font-size:.85rem}
.carregando::after{content:"…";animation:pisca 1.3s ease-in-out infinite}
@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}

/* ============================================================ indicadores */
.faixa{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:16px}
.destaque{
  grid-row:span 2;border-radius:var(--r-g);padding:22px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--pb-verde) 0%,var(--pb-verde-forte) 55%,var(--pb-verde-escuro) 100%);
  box-shadow:0 10px 30px -12px rgba(0,110,52,.6);display:flex;flex-direction:column;
}
.destaque::after{
  content:"";position:absolute;right:-58px;top:-58px;width:190px;height:190px;border-radius:50%;
  background:rgba(255,255,255,.07);
}
.destaque::before{
  content:"";position:absolute;right:-24px;bottom:-72px;width:150px;height:150px;border-radius:50%;
  background:rgba(255,204,0,.1);
}
.destaque h3{color:rgba(255,255,255,.7)}
.destaque .valor{font-size:3.1rem;font-weight:800;letter-spacing:-.045em;line-height:1;margin:14px 0 6px}
.destaque .sub{font-size:.83rem;color:rgba(255,255,255,.72);position:relative;z-index:1}
.destaque .rodape{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.selo{
  display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border-radius:99px;padding:5px 12px;font-size:.78rem;font-weight:600;
}
.selo.amarelo{background:var(--pb-amarelo);color:#3a2b00}
.selo svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.indicador{
  background:var(--painel);border-radius:var(--r-g);padding:17px 19px;box-shadow:var(--s-2);
  transition:transform .17s;display:flex;flex-direction:column;
}
.indicador:hover{transform:translateY(-2px)}
.indicador .chip{
  width:34px;height:34px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;
  background:var(--pb-verde-fundo);color:var(--pb-verde-tinta);
}
.indicador .chip svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.indicador b{display:block;font-size:1.85rem;font-weight:750;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.indicador span{display:block;font-size:.765rem;color:var(--tinta-3);margin-top:7px;font-weight:500}
.indicador.alerta .chip{background:var(--pb-vermelho-fundo);color:var(--pb-vermelho)}
.indicador.alerta b{color:var(--pb-vermelho)}
.indicador.atencao .chip{background:var(--pb-amarelo-fundo);color:var(--pb-amarelo-tinta)}
.indicador.atencao b{color:var(--pb-amarelo-tinta)}

.indicadores{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}

/* ================================================================ tabela */
table{width:100%;border-collapse:collapse;font-size:.875rem}
th{
  text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta-3);font-weight:700;padding:11px 14px;white-space:nowrap;background:var(--painel-2);
}
th:first-child{padding-left:22px} td:first-child{padding-left:22px}
th:last-child{padding-right:22px} td:last-child{padding-right:22px}
td{padding:12px 14px;border-bottom:1px solid var(--linha);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clicavel{cursor:pointer;transition:background .13s}
tbody tr.clicavel:hover{background:var(--painel-2)}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rolar{overflow-x:auto}

/* ================================================================ avatar */
.avatar{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,var(--pb-verde),var(--pb-verde-escuro));color:#fff;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;
  box-shadow:0 0 0 2px var(--painel), 0 2px 8px -2px rgba(5,42,28,.4);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.g{width:64px;height:64px;font-size:1.25rem}
.avatar.p{width:30px;height:30px;font-size:.68rem}
.pessoa-celula{display:flex;align-items:center;gap:12px;min-width:0}
.pessoa-celula .nome{font-weight:600;line-height:1.25}
.pessoa-celula .sub{font-size:.75rem;color:var(--tinta-3)}

/* ============================================================= etiquetas */
.etiqueta{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;
  font-size:.735rem;font-weight:650;white-space:nowrap;line-height:1.4;
}
.etiqueta::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.et-ok{background:var(--pb-verde-fundo);color:var(--pb-verde-tinta)}
.et-parcial{background:var(--pb-amarelo-fundo);color:var(--pb-amarelo-tinta)}
.et-ruim{background:var(--pb-vermelho-fundo);color:var(--pb-vermelho)}
.et-neutra{background:var(--painel-2);color:var(--tinta-3);box-shadow:inset 0 0 0 1px var(--linha)}
.et-info{background:var(--pb-verde-fundo);color:var(--pb-verde-tinta)}

.barra{position:relative;height:7px;border-radius:99px;background:var(--linha);overflow:hidden;min-width:70px;flex:1}
.barra i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;
  background:linear-gradient(90deg,var(--pb-verde),var(--pb-verde-forte));
  transition:width .5s cubic-bezier(.2,.8,.3,1)}
.barra-rotulo{display:flex;align-items:center;gap:11px;min-width:112px}
.barra-rotulo span{font-variant-numeric:tabular-nums;font-size:.82rem;font-weight:650;min-width:33px;text-align:right}

/* =========================================================== formulário */
.forma{display:grid;gap:16px}
.forma.duas{grid-template-columns:1fr 1fr}
.forma.tres{grid-template-columns:1fr 1fr 1fr}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.largo{grid-column:1/-1}
.campo label{font-size:.765rem;font-weight:650;color:var(--tinta-2)}
.campo .ajuda{font-size:.73rem;color:var(--tinta-3);font-weight:400}
input,select,textarea{
  font:inherit;font-size:.885rem;padding:10px 13px;border:1px solid var(--linha-forte);
  border-radius:var(--r-m);background:var(--painel);color:var(--tinta);width:100%;
  transition:border-color .14s,box-shadow .14s;
}
input::placeholder,textarea::placeholder{color:var(--tinta-3);opacity:.7}
input:hover,select:hover,textarea:hover{border-color:#a9c2b8}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pb-verde);box-shadow:0 0 0 3px var(--pb-verde-fundo)}
textarea{resize:vertical;min-height:92px;line-height:1.55}
input[type=file]{padding:8px 10px;font-size:.8rem;color:var(--tinta-3)}
input[type=file]::file-selector-button{
  font:inherit;font-size:.78rem;font-weight:650;margin-right:10px;cursor:pointer;
  border:0;background:var(--pb-verde-fundo);color:var(--pb-verde-tinta);border-radius:8px;padding:5px 12px;
}
select{
  appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b8c85' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:13px;
}
.acoes{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* foto do colaborador */
.foto-campo{display:flex;align-items:center;gap:16px}
.foto-previa{
  width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  background:var(--painel-2);border:2px dashed var(--linha-forte);color:var(--tinta-3);
}
.foto-previa.tem{border-style:solid;border-color:var(--pb-verde)}
.foto-previa img{width:100%;height:100%;object-fit:cover}
.foto-previa svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

button{font:inherit;cursor:pointer;border:0;border-radius:99px;padding:11px 20px;font-weight:650;
  font-size:.875rem;transition:all .15s}
button:active{transform:translateY(1px)}
.botao{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(160deg,var(--pb-verde),var(--pb-verde-forte));color:#fff;
  box-shadow:0 6px 18px -8px rgba(0,120,56,.9);
}
.botao:hover{background:linear-gradient(160deg,var(--pb-verde-forte),var(--pb-verde-escuro))}
.botao.fraco{background:var(--painel);color:var(--tinta-2);box-shadow:inset 0 0 0 1px var(--linha-forte)}
.botao.fraco:hover{background:var(--pb-verde-fundo);color:var(--pb-verde-tinta);box-shadow:inset 0 0 0 1px var(--pb-verde)}
.botao.pequeno{padding:8px 15px;font-size:.815rem}
button:disabled{opacity:.5;cursor:default}

/* ============================================================== checagem */
.linha-pessoa{display:grid;grid-template-columns:230px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--linha)}
.linha-pessoa:last-child{border-bottom:0;padding-bottom:4px}
.linha-pessoa .quem{font-weight:600;font-size:.9rem;display:flex;align-items:flex-start;gap:11px}
.linha-pessoa .quem small{display:block;font-weight:400;color:var(--tinta-3);font-size:.75rem;margin-top:2px}
.escolhas{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.escolha{
  border:1px solid var(--linha-forte);background:var(--painel);border-radius:99px;padding:7px 15px;
  font-size:.79rem;font-weight:650;color:var(--tinta-3);transition:all .13s;
}
.escolha:hover{border-color:var(--pb-verde);color:var(--pb-verde-tinta)}
.escolha[aria-pressed=true]{color:#fff;border-color:transparent;box-shadow:0 4px 12px -4px rgba(5,42,28,.5)}
.escolha[aria-pressed=true][data-status=cumprido]{background:var(--pb-verde)}
.escolha[aria-pressed=true][data-status=parcial]{background:#d39e00;color:#2e2200}
.escolha[aria-pressed=true][data-status=nao_cumprido]{background:var(--pb-vermelho)}
.escolha[aria-pressed=true][data-status=pendente]{background:var(--tinta-2)}
.escolha[aria-pressed=true][data-status=nao_se_aplica]{background:var(--tinta-3)}
.campos-evidencia{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center}

/* ========================================================= linha do tempo */
.tempo{list-style:none;margin:0;padding:0}
.tempo li{position:relative;padding:0 0 24px 30px;border-left:2px solid var(--linha)}
.tempo li:last-child{border-left-color:transparent;padding-bottom:0}
.tempo li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:99px;
  background:var(--painel);border:2.5px solid var(--pb-verde);box-shadow:0 0 0 4px var(--painel);
}
.tempo li[data-origem=verificacao]::before{border-color:var(--tinta-3)}
.tempo li[data-categoria=nao_cumprido]::before{border-color:var(--pb-vermelho)}
.tempo li[data-categoria=cumprido]::before{border-color:var(--pb-verde)}
.tempo .quando{font-size:.745rem;color:var(--tinta-3);display:flex;gap:10px;align-items:center;margin-bottom:5px;font-variant-numeric:tabular-nums}
.tempo .texto{font-size:.9rem;line-height:1.5}
.tempo .extra{font-size:.785rem;color:var(--tinta-3);margin-top:4px}
.tempo .extra a{color:var(--pb-verde-tinta);font-weight:650}

.dados-pessoa{display:grid;grid-template-columns:repeat(auto-fit,minmax(156px,1fr));gap:16px 24px}
.dado b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);font-weight:700;margin-bottom:3px}
.dado span{font-size:.9rem;font-weight:500}
.ficha-nome{display:flex;align-items:center;gap:16px}

.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.filtros input,.filtros select{width:auto;min-width:144px;padding:7px 12px;font-size:.83rem;border-radius:99px}
.filtros select{padding-right:32px}

/* ================================================================ avisos */
.avisos{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;flex-direction:column;gap:9px}
.aviso{
  background:var(--pb-noite);color:#fff;padding:12px 18px;border-radius:14px;font-size:.86rem;
  font-weight:500;box-shadow:var(--s-3);animation:sobe .26s cubic-bezier(.2,.9,.3,1);max-width:340px;
}
.aviso.erro{background:var(--pb-vermelho)}
.aviso.ok{background:var(--pb-verde-forte)}
@keyframes sobe{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}

/* =============================================================== celular */
@media (max-width:1080px){
  .faixa{grid-template-columns:1fr 1fr}
  .destaque{grid-column:1/-1;grid-row:auto}
}
@media (max-width:860px){
  .app{padding:0;gap:0;flex-direction:column}
  .lateral{
    position:fixed;bottom:0;left:0;right:0;top:auto;z-index:40;width:auto;height:auto;
    border-radius:22px 22px 0 0;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
    flex-direction:row;justify-content:space-around;gap:0;
  }
  .marca,.lateral-secao,.lateral-rodape{display:none}
  .lateral-itens{flex-direction:row;flex:1;justify-content:space-around;gap:0}
  .lateral-itens a{flex-direction:column;gap:4px;font-size:.63rem;padding:7px 6px;border-radius:13px;text-align:center}
  .lateral-itens a svg{width:19px;height:19px}
  .lateral-itens a.ativo{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
  .conteudo{padding:16px 14px 108px;gap:14px}
  h1{font-size:1.4rem}
  .saudacao-acoes .so-largo{display:none}
  .saudacao-acoes .botao{padding:11px}
  .forma.duas,.forma.tres{grid-template-columns:1fr}
  .linha-pessoa{grid-template-columns:1fr;gap:11px}
  .campos-evidencia{grid-template-columns:1fr}
  .indicadores{grid-template-columns:1fr 1fr;gap:11px}
  .destaque .valor{font-size:2.6rem}
  .avisos{left:14px;right:14px;bottom:96px}
  .aviso{max-width:none}
  th:first-child,td:first-child{padding-left:16px}
  th:last-child,td:last-child{padding-right:16px}
}