/* =====================================================================
   PROSIM v2 — folha unica do painel Pessoal. Prefixo do modulo: srv-
   Mobile-first. Sem CDN, sem framework: CSP restritiva funciona de fato.
   ===================================================================== */

/* O atributo hidden precisa vencer qualquer display declarado depois.
   Sem esta linha, .rk-fundo{display:flex} deixa o modal de chamado sempre
   aberto, e os campos em cascata da Chamada aparecem todos de uma vez. */
[hidden]{display:none !important}

:root{
  /* --- paleta da marca PROSIM (letras do logotipo) --- */
  --p-azul:#1F4E9C;     /* P */
  --p-amarelo:#F5B921;  /* R */
  --p-magenta:#C0176B;  /* O */
  --p-laranja:#F5811F;  /* S */
  --p-ceu:#3E8EDE;      /* I */
  --p-verde:#2FA88C;    /* M */

  --tinta:#1b2432; --tinta-fraca:#5d6b7d; --linha:#e2e8f1;
  --fundo:#f2f5fa; --papel:#fff;
  --acao:var(--p-azul); --acao-escura:#163a75;
  --ok:#1f8a6d; --alerta:#c07a10; --erro:#b3241c; --bloq:#8e1b13;
  --raio:14px;
  --sombra:0 1px 3px rgba(16,24,40,.07), 0 8px 24px rgba(31,78,156,.07);
  --toque:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.srv-corpo{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---------- topo ---------- */
.srv-topo{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--papel); border-bottom:1px solid var(--linha);
}
.srv-marca{font-weight:700; color:var(--acao); text-decoration:none; font-size:17px}
.srv-marca span{font-weight:400; color:var(--tinta-fraca)}
.srv-topo-nav{display:flex; align-items:center; gap:4px}
.srv-topo-nav a,.srv-link{
  display:inline-flex; align-items:center; min-height:var(--toque);
  padding:0 12px; color:var(--tinta-fraca); text-decoration:none; font-size:14px;
  background:none; border:0; cursor:pointer; font-family:inherit;
}
.srv-topo-nav a:hover,.srv-link:hover{color:var(--acao)}
.srv-inline{display:inline}

.srv-principal{max-width:1120px; margin:0 auto; padding:16px}
.srv-rodape{padding:24px 16px; text-align:center; color:var(--tinta-fraca); font-size:12px}

/* ---------- avisos ---------- */
.srv-aviso{
  max-width:1120px; margin:12px auto; padding:12px 16px;
  border-radius:var(--raio); border-left:4px solid var(--acao);
  background:#eaf1fa; font-size:14px;
}
.srv-aviso--sucesso{background:#e9f5ef; border-left-color:var(--ok)}
.srv-aviso--erro{background:#fbeceb; border-left-color:var(--erro)}
.srv-aviso--info{background:#f4f6f9; border-left-color:var(--tinta-fraca)}

/* ---------- cabecalho do servidor (compacto e fixo no celular) ---------- */
.srv-cabecalho{
  position:sticky; top:57px; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--raio) var(--raio) 0 0;
}
.srv-nome{margin:0; font-size:19px; line-height:1.25}
.srv-meta{margin:4px 0 0; display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:13px; color:var(--tinta-fraca)}
.srv-meta strong{color:var(--tinta); font-weight:600}

.srv-score{display:flex; align-items:center; gap:8px}
.srv-score-valor{
  display:grid; place-items:center; width:46px; height:46px; border-radius:50%;
  font-weight:700; font-size:17px; color:#fff;
}
.srv-score--bom{background:var(--ok)}
.srv-score--medio{background:var(--alerta)}
.srv-score--ruim{background:var(--erro)}
.srv-score-rotulo{font-size:12px; color:var(--tinta-fraca)}

.srv-tag{
  display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:12px; font-weight:600; white-space:nowrap;
}
.srv-tag--ok{background:#e9f5ef; color:var(--ok)}
.srv-tag--alta{background:#fdf1e2; color:var(--alerta)}
.srv-tag--bloq{background:#fbeceb; color:var(--bloq)}
.srv-tag--neutra{background:#eef1f5; color:var(--tinta-fraca)}

/* ---------- abas: rolagem horizontal com snap ---------- */
.srv-abas{
  position:sticky; top:126px; z-index:19;
  display:flex; gap:2px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  background:var(--papel); border:1px solid var(--linha); border-top:0;
  padding:0 8px; scrollbar-width:thin;
}
.srv-abas::-webkit-scrollbar{height:3px}
.srv-abas::-webkit-scrollbar-thumb{background:var(--linha); border-radius:3px}
.srv-aba{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center; min-height:var(--toque);
  padding:0 14px; font-size:14px; text-decoration:none;
  color:var(--tinta-fraca); border-bottom:3px solid transparent; white-space:nowrap;
}
.srv-aba:hover{color:var(--acao)}
.srv-aba--ativa{color:var(--acao); border-bottom-color:var(--acao); font-weight:600}

.srv-painel{
  background:var(--papel); border:1px solid var(--linha); border-top:0;
  border-radius:0 0 var(--raio) var(--raio); padding:16px;
}
.srv-painel[aria-busy="true"]{opacity:.5}

/* ---------- cartoes e grade ---------- */
.srv-grade{display:grid; grid-template-columns:1fr; gap:16px}
.srv-cartao{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:16px; box-shadow:var(--sombra);
}
.srv-cartao h2{margin:0 0 12px; font-size:15px; text-transform:uppercase;
  letter-spacing:.04em; color:var(--tinta-fraca)}
.srv-cartao h3{margin:20px 0 8px; font-size:14px}
.srv-vazio{color:var(--tinta-fraca); font-size:14px; margin:0}

/* listas viram cartoes no celular — nada de <table> para layout */
.srv-lista{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.srv-lista li{
  display:flex; flex-direction:column; gap:3px;
  padding:12px; background:var(--fundo); border-radius:10px; font-size:14px;
}
.srv-periodo,.srv-lista time{font-size:13px; color:var(--tinta-fraca)}

.srv-lista--achados li{border-left:4px solid var(--linha)}
.srv-achado--bloqueante{border-left-color:var(--bloq)}
.srv-achado--alta{border-left-color:var(--erro)}
.srv-achado--media{border-left-color:var(--alerta)}
.srv-achado--baixa{border-left-color:var(--tinta-fraca)}
.srv-codigo{font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--tinta-fraca)}

.srv-linha-tempo{list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px}
.srv-linha-tempo time{display:block; font-size:12px; color:var(--tinta-fraca)}

/* ---------- formularios ---------- */
.srv-campos{display:grid; grid-template-columns:1fr; gap:12px}
.srv-campo{display:flex; flex-direction:column; gap:5px}
.srv-campo span{font-size:13px; font-weight:600; color:var(--tinta-fraca)}
.srv-campo input,.srv-campo select,.srv-campo textarea{
  width:100%; min-height:var(--toque); padding:10px 12px;
  border:1px solid var(--linha); border-radius:9px; background:var(--papel);
  font:inherit; font-size:16px;   /* 16px evita o zoom automatico do iOS */
  color:var(--tinta);
}
.srv-campo input:focus,.srv-campo select:focus,.srv-campo textarea:focus{
  outline:2px solid var(--acao); outline-offset:1px; border-color:var(--acao);
}
.srv-campo textarea{min-height:90px; resize:vertical}
form[inert] input,form[inert] select,form[inert] textarea{background:var(--fundo); color:var(--tinta-fraca)}

.srv-acoes{margin-top:16px; display:flex; flex-direction:column; gap:10px}
.srv-nota{margin:0; font-size:12px; color:var(--tinta-fraca)}
.srv-botao{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--toque); padding:0 18px; border:0; border-radius:9px;
  font:inherit; font-size:15px; font-weight:600; cursor:pointer; text-decoration:none;
}
.srv-botao--primario{background:var(--acao); color:#fff}
.srv-botao--primario:hover{background:var(--acao-escura)}
.srv-botao--claro{background:var(--fundo); color:var(--acao); border:1px solid var(--linha)}
.srv-botao--perigo{background:var(--erro); color:#fff}

/* ---------- 768px+ ---------- */
@media (min-width:768px){
  .srv-principal{padding:24px}
  .srv-nome{font-size:22px}
  .srv-grade{grid-template-columns:repeat(2,1fr)}
  .srv-campos{grid-template-columns:repeat(6,1fr)}
  .srv-campo{grid-column:span 3}
  .srv-campo--mini{grid-column:span 1}
  .srv-campo--curto{grid-column:span 2}
  .srv-campo--largo{grid-column:span 4}
  .srv-campo--total{grid-column:1 / -1}
  .srv-acoes{flex-direction:row; align-items:center; justify-content:space-between}
  .srv-lista li{flex-direction:row; align-items:center; gap:14px; flex-wrap:wrap}
  .srv-lista li strong{min-width:180px}
}

/* ---------- 1024px+ ---------- */
@media (min-width:1024px){
  .srv-cabecalho{top:57px}
  .srv-abas{top:120px}
  .srv-grade{grid-template-columns:repeat(3,1fr)}
  .srv-painel{padding:24px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

@media print{
  .srv-topo,.srv-abas,.srv-rodape,.srv-acoes{display:none}
  body.srv-corpo{background:#fff}
  .srv-cartao{box-shadow:none; border-color:#999}
}

/* ---------- telas de acesso e console admin ---------- */
.srv-corpo--acesso{display:grid; place-items:center; min-height:100vh}
.srv-acesso{width:100%; max-width:420px; padding:24px}
.srv-acesso-caixa{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio); padding:24px; box-shadow:var(--sombra);
}
.srv-acesso-caixa h1{margin:0 0 4px; font-size:24px}
.srv-acesso-caixa h2{margin:0 0 16px; font-size:16px; color:var(--tinta-fraca)}

.adm-topo{border-bottom:2px solid var(--acao)}
.adm-nav{flex-wrap:wrap; overflow-x:auto}
.adm-kpi-valor{margin:0; font-size:30px; font-weight:700; color:var(--acao)}


/* =====================================================================
   Camada de identidade — cores do logotipo PROSIM
   Nenhuma classe nova e obrigatoria: tudo aqui reveste o que ja existe.
   ===================================================================== */

/* fita colorida no topo, na ordem das letras da marca */
.srv-topo{
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,
    var(--p-azul) 0 16.6%, var(--p-amarelo) 16.6% 33.3%, var(--p-magenta) 33.3% 50%,
    var(--p-laranja) 50% 66.6%, var(--p-ceu) 66.6% 83.3%, var(--p-verde) 83.3% 100%) 1;
  box-shadow:0 1px 0 rgba(16,24,40,.04);
}
.srv-marca{letter-spacing:.4px; display:flex; align-items:center; gap:8px; min-width:0}

/* Logotipo responsivo: encolhe com a barra, nunca estoura nem borra.
   height:auto + max-width em % mantem a proporcao em qualquer largura. */
.srv-marca img{
  display:block; width:auto; height:clamp(22px, 4.6vw, 34px);
  max-width:min(52vw, 240px); object-fit:contain;
}
.srv-marca span{white-space:nowrap; font-size:14px}

/* na tela de acesso a marca e o elemento principal */
.srv-marca--acesso{display:block; margin:0 0 14px; text-align:center}
.srv-marca--acesso img{
  height:auto; width:100%; max-width:min(78%, 260px); margin:0 auto;
}

@media (max-width:420px){
  .srv-marca span{display:none}   /* em tela estreita, so o logotipo */
}

/* cartoes com um filete colorido no topo; a cor gira por posicao */
.srv-cartao{border-top:3px solid var(--p-azul)}
.srv-grade > .srv-cartao:nth-child(6n+2){border-top-color:var(--p-amarelo)}
.srv-grade > .srv-cartao:nth-child(6n+3){border-top-color:var(--p-magenta)}
.srv-grade > .srv-cartao:nth-child(6n+4){border-top-color:var(--p-laranja)}
.srv-grade > .srv-cartao:nth-child(6n+5){border-top-color:var(--p-ceu)}
.srv-grade > .srv-cartao:nth-child(6n+6){border-top-color:var(--p-verde)}
.srv-cartao h2{color:var(--p-azul); letter-spacing:.6px}
.srv-cartao h3{color:var(--tinta)}

/* abas: cada uma herda uma cor da marca quando ativa */
.srv-aba--ativa{border-bottom-width:3px}
.srv-abas .srv-aba:nth-child(6n+1).srv-aba--ativa{color:var(--p-azul);    border-bottom-color:var(--p-azul)}
.srv-abas .srv-aba:nth-child(6n+2).srv-aba--ativa{color:var(--p-magenta); border-bottom-color:var(--p-magenta)}
.srv-abas .srv-aba:nth-child(6n+3).srv-aba--ativa{color:var(--p-laranja); border-bottom-color:var(--p-laranja)}
.srv-abas .srv-aba:nth-child(6n+4).srv-aba--ativa{color:var(--p-verde);   border-bottom-color:var(--p-verde)}
.srv-abas .srv-aba:nth-child(6n+5).srv-aba--ativa{color:var(--p-ceu);     border-bottom-color:var(--p-ceu)}
.srv-abas .srv-aba:nth-child(6n+6).srv-aba--ativa{color:var(--p-magenta); border-bottom-color:var(--p-magenta)}

/* botoes com mais presenca, sem perder a area de toque */
.srv-botao{transition:transform .12s ease, box-shadow .2s ease, background .2s ease}
.srv-botao--primario{
  background:var(--p-azul); border-color:var(--p-azul);
  box-shadow:0 2px 0 rgba(22,58,117,.35);
}
.srv-botao--primario:hover{background:var(--acao-escura); transform:translateY(-1px)}
.srv-botao--primario:active{transform:translateY(0); box-shadow:none}
.srv-botao--claro{border-color:var(--p-ceu); color:var(--p-azul)}
.srv-botao--claro:hover{background:rgba(62,142,222,.10)}

/* campos: foco na cor da marca */
.srv-campo input:focus, .srv-campo select:focus, .srv-campo textarea:focus{
  border-color:var(--p-ceu); outline:none;
  box-shadow:0 0 0 3px rgba(62,142,222,.22);
}

/* avisos e etiquetas coloridas */
.srv-aviso--sucesso{border-left:4px solid var(--p-verde)}
.srv-aviso--info{border-left:4px solid var(--p-ceu)}
.srv-aviso--erro{border-left:4px solid var(--erro)}
.srv-tag--ok{background:rgba(47,168,140,.14); color:#1c7a63}
.srv-tag--neutra{background:rgba(93,107,125,.12)}

/* tela de acesso (login, MFA, portal) */
.srv-corpo--acesso{
  background:
    radial-gradient(1100px 420px at 8% -10%, rgba(62,142,222,.16), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(245,129,31,.14), transparent 55%),
    var(--fundo);
}
.srv-acesso-caixa{
  border-top:5px solid transparent;
  border-image:linear-gradient(90deg,
    var(--p-azul), var(--p-amarelo), var(--p-magenta),
    var(--p-laranja), var(--p-ceu), var(--p-verde)) 1;
}
.srv-acesso-caixa .srv-marca{font-size:20px}

/* linha do tempo com marcador colorido */

/* KPIs do admin */
.adm-kpi-valor{color:var(--p-azul)}
.adm-topo{border-top:4px solid var(--p-magenta)}

@media (prefers-reduced-motion: reduce){
  .srv-botao{transition:none}
}

/* formulario compacto dentro de item de lista (vinculo de portaria) */
.srv-form--linha{display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin-top:8px}
.srv-form--linha .srv-campo{gap:3px}
.srv-form--linha .srv-campo span{font-size:12px; color:var(--tinta-fraca)}
.srv-form--linha select,.srv-form--linha input{padding:6px 8px; font-size:14px; min-height:36px}
.srv-form--linha .srv-botao{min-height:36px; padding:0 14px; font-size:14px}
.srv-campo--mini{max-width:110px}

/* =====================================================================
   Suporte Rakude — botao flutuante, modal e conversa de chamados
   ===================================================================== */
:root{ --rk-amarelo:#FFC709; --rk-preto:#111; }

.rk-flutuante{
  position:fixed; right:18px; bottom:18px; z-index:60;
  width:62px; height:62px; padding:0; border:0; border-radius:50%;
  background:var(--rk-amarelo); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(17,17,17,.28);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  animation:rk-entrar .5s ease-out both;
}
.rk-flutuante img{width:64%; height:auto; display:block; pointer-events:none}
.rk-flutuante:hover{transform:scale(1.09) rotate(-6deg); box-shadow:0 10px 26px rgba(17,17,17,.34)}
.rk-flutuante:active{transform:scale(.94)}
.rk-flutuante:focus-visible{outline:3px solid var(--p-azul); outline-offset:3px}

/* pulso discreto para o usuario notar o botao na primeira visita */
.rk-flutuante::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--rk-amarelo); animation:rk-pulso 2.8s ease-out infinite;
}
.rk-flutuante.rk-ativo::after{animation:none}
.rk-flutuante.rk-ativo{transform:rotate(90deg) scale(.92)}
.rk-flutuante.rk-sucesso{background:var(--p-verde)}

@keyframes rk-entrar{from{opacity:0; transform:translateY(20px) scale(.6)} to{opacity:1}}
@keyframes rk-pulso{0%{opacity:.7; transform:scale(1)} 70%{opacity:0; transform:scale(1.5)} 100%{opacity:0}}

.rk-fundo{
  position:fixed; inset:0; z-index:61; background:rgba(17,24,39,.45);
  display:flex; align-items:flex-end; justify-content:center; padding:16px;
  animation:rk-fade .18s ease-out;
}
@keyframes rk-fade{from{opacity:0} to{opacity:1}}

.rk-caixa{
  width:100%; max-width:460px; background:var(--papel); border-radius:16px;
  box-shadow:0 20px 50px rgba(16,24,40,.28); overflow:hidden;
  animation:rk-subir .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes rk-subir{from{transform:translateY(28px); opacity:0} to{transform:translateY(0); opacity:1}}

.rk-cabeca{
  display:flex; align-items:center; gap:10px;
  background:var(--rk-amarelo); padding:12px 14px;
}
.rk-cabeca h2{margin:0; font-size:16px; color:var(--rk-preto); flex:1}
.rk-mini{width:30px; height:auto}
.rk-fechar{
  background:none; border:0; font-size:26px; line-height:1; cursor:pointer;
  color:var(--rk-preto); width:36px; height:36px;
}
.rk-corpo{padding:16px; display:flex; flex-direction:column; gap:12px}
.rk-rota{margin:0; font-size:12px; color:var(--tinta-fraca)}
.rk-rota code{background:var(--fundo); padding:2px 6px; border-radius:6px}
.rk-aviso{margin:0; padding:9px 11px; border-radius:10px; font-size:14px}
.rk-aviso--ok{background:rgba(47,168,140,.14); color:#1c7a63}
.rk-aviso--erro{background:rgba(179,36,28,.10); color:var(--erro)}
.rk-acoes{display:flex; gap:8px; justify-content:flex-end; padding:0 16px 16px}

/* selo estilo rede social no menu Ajuda */
.rk-menu{position:relative}
.rk-selo{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; margin-left:5px;
  background:var(--p-magenta); color:#fff; border-radius:10px;
  font-size:11px; font-weight:700; line-height:1;
}

/* conversa do chamado */
.rk-conversa{display:flex; flex-direction:column; gap:10px; margin:14px 0}
.rk-fala{padding:10px 12px; border-radius:12px; max-width:88%}
.rk-fala p{margin:4px 0 0}
.rk-autor{font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-fraca)}
.rk-fala--usuario{background:var(--fundo); align-self:flex-start; border:1px solid var(--linha)}
.rk-fala--suporte{background:rgba(255,199,9,.16); align-self:flex-end; border:1px solid rgba(255,199,9,.5)}

@media (min-width:600px){ .rk-fundo{align-items:center} }
@media (prefers-reduced-motion: reduce){
  .rk-flutuante,.rk-caixa,.rk-fundo{animation:none; transition:none}
  .rk-flutuante::after{animation:none}
}

/* =====================================================================
   Painel de vagas
   ===================================================================== */
.srv-linha-titulo{display:flex; align-items:center; justify-content:space-between; gap:12px}
.srv-linha-titulo h2{margin:0}

.vg-grade{display:grid; gap:14px; margin-top:14px;
          grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.vg-cartao{position:relative; background:var(--papel); border:1px solid var(--linha);
           border-radius:var(--raio); padding:14px 14px 12px; box-shadow:var(--sombra);
           border-top:4px solid var(--p-verde)}
.vg-cartao--ocupada{border-top-color:var(--tinta-fraca); background:#fbfcfe}
.vg-cartao h3{margin:0 0 6px; font-size:14px; line-height:1.35}
.vg-quem{margin:0 0 10px; font-weight:600; color:var(--p-verde)}
.vg-cartao--ocupada .vg-quem{color:var(--tinta)}
.vg-dados{margin:0; display:flex; flex-direction:column; gap:3px}
.vg-dados div{display:flex; gap:6px; font-size:13px}
.vg-dados dt{margin:0; color:var(--tinta-fraca); min-width:66px}
.vg-dados dd{margin:0}
.vg-codigo{position:absolute; top:10px; right:12px; font-size:11px; color:var(--tinta-fraca)}

/* sugestoes de escola */
.vg-sugestoes{display:flex; flex-direction:column; gap:4px; margin:6px 0 12px;
              max-height:280px; overflow:auto; border:1px solid var(--linha);
              border-radius:var(--raio); padding:6px; background:var(--fundo)}
.vg-sugestao{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
             width:100%; text-align:left; background:var(--papel); border:1px solid var(--linha);
             border-radius:10px; padding:9px 11px; cursor:pointer; min-height:auto}
.vg-sugestao:hover{border-color:var(--p-ceu); background:rgba(62,142,222,.07)}
.vg-sugestao strong{font-size:14px}
.vg-sugestao span{font-size:12px; color:var(--tinta-fraca)}

/* dicas curtas abaixo de campo (validacao de CPF, retorno do CEP) */
.ca-dica{display:block; margin-top:4px; font-size:12px; color:var(--tinta-fraca)}
.ca-dica--ok{color:#1f8a6d}
.ca-dica--erro{color:var(--erro)}

/* ---- menu suspenso do topo (Vagas) ---- */
.mn-grupo{position:relative; display:inline-block}
.mn-grupo > summary{
  list-style:none; cursor:pointer; padding:6px 2px; color:var(--tinta);
  display:inline-flex; align-items:center; gap:5px;
}
.mn-grupo > summary::-webkit-details-marker{display:none}
.mn-grupo > summary::after{content:"▾"; font-size:11px; color:var(--tinta-fraca)}
.mn-grupo[open] > summary{color:var(--p-azul); font-weight:600}
.mn-itens{
  position:absolute; right:0; top:calc(100% + 6px); z-index:40; min-width:212px;
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  box-shadow:0 12px 28px rgba(16,24,40,.16); padding:6px; display:flex; flex-direction:column;
  border-top:3px solid var(--p-laranja);
}
.mn-itens a{padding:9px 11px; border-radius:9px; white-space:nowrap}
.mn-itens a:hover{background:rgba(62,142,222,.10); color:var(--p-azul)}

@media (max-width:720px){
  .mn-grupo{position:static}
  .mn-itens{position:static; box-shadow:none; margin-top:4px}
}

/* botao de destaque (adicionar servidor) */
.srv-botao--destaque{
  background:var(--p-laranja); border-color:var(--p-laranja); color:#fff;
  box-shadow:0 2px 0 rgba(180,90,10,.35);
}
.srv-botao--destaque:hover{background:#e0700f; transform:translateY(-1px)}

/* aba PDFs: um cartao por modelo */
.pdf-grade{display:grid; gap:12px; margin-top:12px;
           grid-template-columns:repeat(auto-fill, minmax(250px, 1fr))}
.pdf-item{border:1px solid var(--linha); border-radius:var(--raio); padding:12px;
          background:var(--papel); border-top:3px solid var(--p-magenta)}
.pdf-item h3{margin:0 0 8px; font-size:14px; line-height:1.35}
.pdf-desc{margin:0 0 10px; font-size:12px; color:var(--tinta-fraca)}
.pdf-form{display:flex; flex-direction:column; gap:7px}
.pdf-form label{display:flex; flex-direction:column; gap:3px; font-size:12px;
                color:var(--tinta-fraca)}
.pdf-form input,.pdf-form select{padding:7px 9px; font-size:14px; min-height:36px;
                                 border:1px solid var(--linha); border-radius:9px}
.pdf-form .srv-botao{min-height:38px}

/* contador de pendencias no menu (vermelho, estilo notificacao) */
.rk-selo--alerta{background:var(--erro)}

/* ---------------------------------------------------------------
   Ficha do servidor: abas em varias linhas, sem rolagem horizontal
   --------------------------------------------------------------- */
.srv-principal{max-width:1440px}

.srv-abas{
  display:flex; flex-wrap:wrap; gap:2px 4px;
  overflow:visible;                 /* antes rolava na horizontal */
  border-bottom:1px solid var(--linha);
}
.srv-abas::-webkit-scrollbar{display:none}
.srv-aba{
  padding:8px 10px; font-size:13px; border-bottom:3px solid transparent;
  border-radius:8px 8px 0 0; white-space:nowrap;
}
.srv-aba:hover{background:rgba(62,142,222,.08)}

/* cada aba com uma cor da marca, mesmo inativa */
.srv-abas .srv-aba:nth-child(6n+1){color:var(--p-azul)}
.srv-abas .srv-aba:nth-child(6n+2){color:var(--p-magenta)}
.srv-abas .srv-aba:nth-child(6n+3){color:var(--p-laranja)}
.srv-abas .srv-aba:nth-child(6n+4){color:var(--p-verde)}
.srv-abas .srv-aba:nth-child(6n+5){color:var(--p-ceu)}
.srv-abas .srv-aba:nth-child(6n+6){color:#8a6d1f}
.srv-abas .srv-aba--ativa{background:var(--papel); font-weight:700}

@media (max-width:640px){
  .srv-aba{padding:7px 8px; font-size:12px}
}

/* ---------------------------------------------------------------
   Filtros em linha (fila da inspecao, chamados, listas do admin)
   Antes eram <a> cru: azul sublinhado do navegador.
   --------------------------------------------------------------- */
.srv-nota a{
  display:inline-block; padding:3px 9px; margin:2px 1px; border-radius:999px;
  border:1px solid var(--linha); background:var(--papel);
  color:var(--tinta-fraca); text-decoration:none; font-size:12px;
}
.srv-nota a:hover{border-color:var(--p-ceu); color:var(--p-azul);
                  background:rgba(62,142,222,.08)}
.srv-nota a.srv-tag--ok{background:rgba(47,168,140,.16); color:#1c7a63;
                        border-color:rgba(47,168,140,.45); font-weight:600}

/* links dentro de listas seguem a cor da marca, sem sublinhado permanente */
.srv-lista a{color:var(--p-azul); text-decoration:none}
.srv-lista a:hover{text-decoration:underline}

/* blocos de decisao revelados pelo select */
.dec-bloco{border-top:1px solid var(--linha); margin-top:12px; padding-top:12px}

/* ---------------------------------------------------------------
   Fila de vagas: cada situacao com sua cor na borda do item
   --------------------------------------------------------------- */
.srv-lista li strong a{color:var(--p-azul); font-weight:700}

/* botao flutuante: sem a imagem, mostra a inicial em vez de icone quebrado */
.rk-flutuante img{max-width:64%; max-height:64%}
.rk-flutuante::before{
  content:"R"; position:absolute; font-weight:800; font-size:26px; color:var(--rk-preto);
  z-index:-1;
}

/* nenhuma barra colorida a esquerda em item de lista */
.srv-lista li, .srv-linha-tempo li{border-left:0 !important; padding-left:0}

/* o item inteiro vira area clicavel, nao so o nome */
.srv-lista li:has(a.item-todo){position:relative; cursor:pointer; transition:background .15s ease}
.srv-lista li:has(a.item-todo):hover{background:rgba(62,142,222,.07)}
a.item-todo{color:var(--p-azul); text-decoration:none}
a.item-todo::after{content:""; position:absolute; inset:0}
/* links reais dentro do item continuam clicaveis por cima da area */
.srv-lista li a:not(.item-todo){position:relative; z-index:1}

/* decisao: select a esquerda, acao principal a direita */
.dec-linha{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px}
.dec-linha .srv-campo{flex:1 1 320px; min-width:0}
.dec-atalho{margin-left:auto}
.dec-atalho .srv-botao{min-height:44px; padding:0 22px; font-weight:700}

@media (max-width:640px){
  .dec-atalho{margin-left:0; width:100%}
  .dec-atalho .srv-botao{width:100%}
}