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

:root{
  /* --- paleta da marca PROSIM (letras do logotipo) --- */
  --p-azul:#255B99;     /* P */
  --p-amarelo:#FFC20A;  /* R */
  --p-magenta:#B92667;  /* O */
  --p-laranja:#FF8208;  /* S */
  --p-ceu:#3F83C4;      /* I */
  --p-verde:#3CA997;    /* M */

  --tinta:#17243a; --tinta-fraca:#617086; --linha:#dde6f0;
  --fundo:#f4f7fb; --papel:#fff;
  --acao:var(--p-azul); --acao-escura:#194678;
  --ok:#1f8a6d; --alerta:#c07a10; --erro:#b3241c; --bloq:#8e1b13;
  --raio:16px;
  --sombra:0 1px 2px rgba(23,36,58,.04), 0 12px 30px rgba(37,91,153,.08);
  --toque:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.srv-corpo{
  margin:0;
  background:
    radial-gradient(circle at 8% 4%, rgba(63,131,196,.08), transparent 24rem),
    radial-gradient(circle at 94% 16%, rgba(60,169,151,.07), transparent 22rem),
    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:rgba(255,255,255,.96); border-bottom:1px solid var(--linha);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.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:16px; background:linear-gradient(100deg,#fff 0%,#fff 72%,rgba(63,131,196,.06) 100%);
  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:750; font-size:17px; color:#fff;
  box-shadow:0 6px 16px rgba(37,91,153,.16);
}
.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:18px; box-shadow:var(--sombra);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.srv-cartao:hover{transform:translateY(-2px); box-shadow:0 16px 36px rgba(37,91,153,.11)}
.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:#f7f9fc; border:1px solid #eaf0f6; border-radius:11px; 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:1px solid transparent; border-radius:10px;
  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}
.srv-botao:focus-visible,.srv-aba:focus-visible,.srv-topo-nav a:focus-visible,.srv-link:focus-visible{
  outline:3px solid rgba(255,194,10,.65); outline-offset:2px;
}

/* ---------- 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; position:relative; overflow:hidden}
.srv-acesso{width:100%; max-width:420px; padding:24px}
.srv-acesso-caixa{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:20px; padding:28px; box-shadow:0 24px 64px rgba(37,91,153,.14);
}
.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:5px 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 4px 18px rgba(37,91,153,.06);
}
.srv-marca{letter-spacing:.4px}
.srv-marca img{display:block; height:30px; width:auto}

/* cartoes com acento lateral, inspirado nos blocos do logotipo */
.srv-cartao{border-left:4px solid var(--p-azul)}
.srv-grade > .srv-cartao:nth-child(6n+2){border-left-color:var(--p-amarelo)}
.srv-grade > .srv-cartao:nth-child(6n+3){border-left-color:var(--p-magenta)}
.srv-grade > .srv-cartao:nth-child(6n+4){border-left-color:var(--p-laranja)}
.srv-grade > .srv-cartao:nth-child(6n+5){border-left-color:var(--p-ceu)}
.srv-grade > .srv-cartao:nth-child(6n+6){border-left-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:linear-gradient(135deg,var(--p-azul),#3476b5); border-color:var(--p-azul);
  box-shadow:0 7px 16px rgba(37,91,153,.22);
}
.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(900px 440px at 4% -8%, rgba(63,131,196,.20), transparent 62%),
    radial-gradient(820px 380px at 100% 2%, rgba(60,169,151,.16), transparent 58%),
    radial-gradient(540px 280px at 70% 105%, rgba(185,38,103,.10), transparent 62%),
    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}
.srv-acesso-caixa .srv-marca img{height:52px; margin:0 auto 6px}

/* linha do tempo com marcador colorido */
.srv-linha-tempo li{border-left:3px solid var(--p-ceu); padding-left:12px}
.srv-linha-tempo li:nth-child(3n+2){border-left-color:var(--p-laranja)}
.srv-linha-tempo li:nth-child(3n+3){border-left-color:var(--p-verde)}

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

/* selecao e barra de rolagem seguem a identidade sem comprometer legibilidade */
::selection{background:rgba(255,194,10,.42); color:var(--tinta)}
*{scrollbar-color:rgba(37,91,153,.35) transparent}

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