/* =====================================================================
   Portal de Chamados de TI da Planer
   planer.css

   CSS escrito a mao, sem framework. Tema escuro por padrao.
   Nenhum azul, em nenhum tom. Nenhum emoji. Icones sao SVG embutidos
   no HTML. Sem travessao nos textos.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  --petroleo:        #0D3944;
  --petroleo-escuro: #0A2830;
  --petroleo-claro:  #14515F;
  --cinza-escuro:    #1A1A1A;
  --cinza-cartao:    #202020;
  --cinza-borda:     #2E2E2E;
  --cinza-medio:     #8A8A8A;
  --cinza-claro:     #E5E5E5;
  --branco:          #FFFFFF;

  --verde:           #52CC5A;
  --verde-fundo:     rgba(82, 204, 90, 0.12);
  --ambar:           #FFC02A;
  --ambar-fundo:     rgba(255, 192, 42, 0.12);
  --vermelho:        #E50914;
  --vermelho-fundo:  rgba(229, 9, 20, 0.12);

  --texto:           #F2F2F2;
  --texto-suave:     #B4B4B4;
  --texto-apagado:   #8A8A8A;

  --raio:            14px;
  --raio-pequeno:    9px;
  --sombra:          0 10px 34px rgba(0, 0, 0, 0.45);
  --transicao:       160ms ease;

  --largura:         720px;
  --largura-larga:   980px;

  --fonte-titulo:    "Montserrat", "Segoe UI", system-ui, sans-serif;
  --fonte-corpo:     "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto);
  background:
    radial-gradient(1100px 620px at 50% -10%, var(--petroleo) 0%, transparent 62%),
    var(--petroleo-escuro);
  background-attachment: fixed;
}

h1, h2, h3, .numerao {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.55rem); }
h3 { font-size: 1.05rem; }

p { margin: 0 0 14px; }

a {
  color: var(--verde);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao);
}
a:hover { border-bottom-color: var(--verde); }

:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
  border-radius: 4px;
}

.escondido { display: none !important; }
.so-leitor {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   3. Estrutura
   --------------------------------------------------------------------- */
.pagina {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 24px 18px 72px;
}
.pagina.larga { max-width: var(--largura-larga); }

.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 26px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 0;
}
.marca:hover { border: 0; }
/* O logotipo da Planer tem fundo petroleo, quase igual ao fundo da
   pagina. A borda fina devolve o contorno do selo sem alterar a marca. */
.marca img {
  height: 38px;
  width: 38px;
  display: block;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.marca .marca-texto {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--branco);
}
.marca .marca-sub {
  display: block;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}

.rodape {
  margin-top: 42px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza-borda);
  font-size: 0.82rem;
  color: var(--texto-apagado);
  text-align: center;
}

/* ---------------------------------------------------------------------
   4. Cartao
   --------------------------------------------------------------------- */
.cartao {
  background: var(--cinza-cartao);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio);
  padding: 26px;
  box-shadow: var(--sombra);
}
.cartao + .cartao { margin-top: 18px; }

.cartao-suave {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: 16px 18px;
}

/* ---------------------------------------------------------------------
   5. Progresso por passos
   --------------------------------------------------------------------- */
.progresso {
  margin-bottom: 22px;
}
.progresso-trilho {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.progresso-barra {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--petroleo-claro), var(--verde));
  transition: width 320ms ease;
}
.progresso-texto {
  margin-top: 9px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}

/* ---------------------------------------------------------------------
   6. Formulario
   --------------------------------------------------------------------- */
.campo { margin-bottom: 18px; }

.campo label,
.rotulo {
  display: block;
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--texto);
}

.ajuda {
  margin: -2px 0 9px;
  font-size: 0.85rem;
  color: var(--texto-apagado);
}

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  color: var(--texto);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  transition: border-color var(--transicao), background var(--transicao);
}

input::placeholder,
textarea::placeholder { color: #6E6E6E; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--verde);
  background: rgba(0, 0, 0, 0.4);
  outline: none;
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] { border-color: var(--vermelho); }

textarea { min-height: 132px; resize: vertical; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B4B4B4' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

.erro-campo {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--vermelho);
}

/* o honeypot precisa ficar invisivel para gente e visivel para robo */
.armadilha {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   7. Botoes
   --------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--petroleo-escuro);
  background: var(--verde);
  border: 1px solid var(--verde);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  transition: transform var(--transicao), filter var(--transicao), background var(--transicao);
}
.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(1px); }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }

.botao-secundario {
  color: var(--texto);
  background: transparent;
  border-color: var(--cinza-borda);
}
.botao-secundario:hover { background: rgba(255, 255, 255, 0.05); filter: none; }

.botao-perigo {
  color: var(--branco);
  background: transparent;
  border-color: var(--vermelho);
}
.botao-perigo:hover { background: var(--vermelho-fundo); filter: none; }

.botao-largo { width: 100%; }

.linha-botoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.linha-botoes .cresce { flex: 1 1 auto; }

/* ---------------------------------------------------------------------
   8. Escolhas em cartao: categoria, pessoa, impacto, urgencia
   --------------------------------------------------------------------- */
.grade-escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.grade-escolhas.duas { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.escolha {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px;
  text-align: left;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  font-family: var(--fonte-corpo);
  font-size: 0.96rem;
  transition: border-color var(--transicao), background var(--transicao), transform var(--transicao);
}
.escolha:hover {
  border-color: var(--petroleo-claro);
  background: rgba(255, 255, 255, 0.06);
}
.escolha[aria-pressed="true"],
.escolha.marcada {
  border-color: var(--verde);
  background: var(--verde-fundo);
}
.escolha .icone {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--verde);
  margin-top: 1px;
}
.escolha .escolha-texto { display: block; }
.escolha .escolha-titulo { display: block; font-weight: 600; }
.escolha .escolha-nota {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  color: var(--texto-apagado);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------
   9. Selos de status, prioridade e prazo
   --------------------------------------------------------------------- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.selo::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.selo-neutro   { color: var(--cinza-claro); background: rgba(229,229,229,0.10); border-color: rgba(229,229,229,0.22); }
.selo-verde    { color: var(--verde);       background: var(--verde-fundo);     border-color: rgba(82,204,90,0.32); }
.selo-ambar    { color: var(--ambar);       background: var(--ambar-fundo);     border-color: rgba(255,192,42,0.32); }
.selo-vermelho { color: var(--vermelho);    background: var(--vermelho-fundo);  border-color: rgba(229,9,20,0.34); }
.selo-petroleo { color: #7FD4E4;            background: rgba(20,81,95,0.30);    border-color: rgba(20,81,95,0.55); }

.linha-selos {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------
   10. Numero do chamado em destaque
   --------------------------------------------------------------------- */
.numerao {
  font-size: clamp(2rem, 8vw, 3.2rem);
  letter-spacing: 0.01em;
  color: var(--branco);
  margin: 4px 0 6px;
  word-break: break-word;
}

.destaque-prazo {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 16px 18px;
  border-radius: var(--raio-pequeno);
  background: rgba(0, 0, 0, 0.26);
  border: 1px solid var(--cinza-borda);
}
.destaque-prazo .item .r {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  margin-bottom: 3px;
}
.destaque-prazo .item .v {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--texto);
}

/* ---------------------------------------------------------------------
   11. Linha do tempo
   --------------------------------------------------------------------- */
.linha-tempo { position: relative; margin: 6px 0 0; padding-left: 26px; }
.linha-tempo::before {
  content: "";
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--cinza-borda);
}

.tempo-item { position: relative; padding-bottom: 20px; }
.tempo-item::before {
  content: "";
  position: absolute;
  left: -23px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cinza-borda);
  border: 2px solid var(--cinza-cartao);
}
.tempo-item.evento::before   { background: var(--cinza-medio); }
.tempo-item.tecnico::before  { background: var(--verde); }
.tempo-item.solicitante::before { background: var(--ambar); }

.tempo-topo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tempo-autor { font-weight: 600; font-size: 0.94rem; }
.tempo-quando { font-size: 0.79rem; color: var(--texto-apagado); }

.tempo-corpo {
  padding: 12px 14px;
  border-radius: var(--raio-pequeno);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cinza-borda);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tempo-item.evento .tempo-corpo {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--texto-apagado);
  font-size: 0.88rem;
}
.tempo-item.tecnico .tempo-corpo { border-left: 3px solid var(--verde); }

/* ---------------------------------------------------------------------
   12. Avisos
   --------------------------------------------------------------------- */
.aviso {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cinza-borda);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.93rem;
  margin-bottom: 18px;
}
.aviso .icone { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.aviso p:last-child { margin-bottom: 0; }
.aviso-verde    { border-color: rgba(82,204,90,0.34);  background: var(--verde-fundo); }
.aviso-verde .icone    { color: var(--verde); }
.aviso-ambar    { border-color: rgba(255,192,42,0.34); background: var(--ambar-fundo); }
.aviso-ambar .icone    { color: var(--ambar); }
.aviso-vermelho { border-color: rgba(229,9,20,0.36);   background: var(--vermelho-fundo); }
.aviso-vermelho .icone { color: var(--vermelho); }

/* ---------------------------------------------------------------------
   13. Sugestoes da base de conhecimento
   --------------------------------------------------------------------- */
.sugestoes {
  margin: 4px 0 18px;
  padding: 14px 16px;
  border-radius: var(--raio-pequeno);
  border: 1px dashed rgba(82, 204, 90, 0.45);
  background: var(--verde-fundo);
}
.sugestoes .titulo-sugestao {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--verde);
  margin-bottom: 9px;
}
.sugestoes ul { list-style: none; margin: 0; padding: 0; }
.sugestoes li + li { margin-top: 7px; }
.sugestoes a { color: var(--texto); font-weight: 600; }
.sugestoes .resumo-sugestao {
  display: block;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--texto-apagado);
}

/* ---------------------------------------------------------------------
   14. Avaliacao
   --------------------------------------------------------------------- */
.notas { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 14px; }
.nota {
  width: 52px; height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  cursor: pointer;
  transition: all var(--transicao);
}
.nota:hover { border-color: var(--petroleo-claro); }
.nota[aria-pressed="true"] {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--petroleo-escuro);
}

/* ---------------------------------------------------------------------
   15. Estados de carregando, vazio e erro
   --------------------------------------------------------------------- */
.estado {
  text-align: center;
  padding: 44px 20px;
  color: var(--texto-apagado);
}
.estado .icone { width: 38px; height: 38px; margin-bottom: 12px; color: var(--cinza-medio); }

.girando {
  width: 34px; height: 34px;
  margin: 0 auto 14px;
  border: 3px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girar 720ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------------
   16. Aviso flutuante
   --------------------------------------------------------------------- */
.avisos-flutuantes {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(440px, calc(100vw - 28px));
}
.flutuante {
  padding: 13px 16px;
  border-radius: var(--raio-pequeno);
  background: var(--cinza-escuro);
  border: 1px solid var(--cinza-borda);
  box-shadow: var(--sombra);
  font-size: 0.93rem;
  animation: subir 200ms ease;
}
.flutuante.erro    { border-color: rgba(229,9,20,0.5);   color: #FFD9DB; }
.flutuante.sucesso { border-color: rgba(82,204,90,0.5);  color: #D8F7DA; }
@keyframes subir { from { opacity: 0; transform: translateY(10px); } }

/* ---------------------------------------------------------------------
   17. Lista de revisao
   --------------------------------------------------------------------- */
.revisao { margin: 0; }
.revisao div {
  display: flex;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cinza-borda);
}
.revisao div:last-child { border-bottom: 0; }
.revisao dt {
  flex: 0 0 132px;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texto-apagado);
}
.revisao dd {
  margin: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* =====================================================================
   18. PAINEL DO T.I.
   O portal publico e acolhedor e espacado. O painel e denso de
   proposito: quem atende passa o dia aqui e precisa de informacao por
   centimetro, nao de ar.
   ===================================================================== */

.painel {
  display: grid;
  grid-template-columns: 208px 1fr;
  min-height: 100vh;
}

.painel-lateral {
  background: var(--cinza-escuro);
  border-right: 1px solid var(--cinza-borda);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.painel-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 16px;
  border: 0;
}
.painel-marca:hover { border: 0; }
.painel-marca img {
  height: 32px; width: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.painel-marca span {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

.painel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: var(--raio-pequeno);
  color: var(--texto-suave);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: var(--fonte-corpo);
}
.painel-item:hover { background: rgba(255, 255, 255, 0.05); color: var(--texto); border: 0; }
.painel-item.ativo { background: var(--verde-fundo); color: var(--verde); }
.painel-item .icone { width: 18px; height: 18px; flex: 0 0 auto; }

.painel-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--cinza-borda); }
.painel-usuario { padding: 8px 11px; font-size: 0.8rem; color: var(--texto-apagado); }
.painel-usuario strong { display: block; color: var(--texto); font-size: 0.88rem; font-weight: 600; }

.painel-conteudo { padding: 20px 22px 60px; min-width: 0; }

.painel-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.painel-topo h1 { margin: 0; font-size: 1.4rem; }
.painel-topo .espaco { flex: 1 1 auto; }

/* --- barra de filtros --------------------------------------------- */
.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.filtros select,
.filtros input {
  padding: 8px 11px;
  font-size: 0.88rem;
  width: auto;
  min-width: 132px;
}
.filtros input[type="search"] { min-width: 240px; flex: 1 1 240px; }

.alternador { display: inline-flex; border: 1px solid var(--cinza-borda); border-radius: var(--raio-pequeno); overflow: hidden; }
.alternador button {
  padding: 8px 14px;
  font-size: 0.86rem;
  font-weight: 600;
  font-family: var(--fonte-corpo);
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.alternador button.ativo { background: var(--verde); color: var(--petroleo-escuro); }

/* --- tabela densa -------------------------------------------------- */
.tabela-densa {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.tabela-densa th {
  text-align: left;
  padding: 9px 10px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  border-bottom: 1px solid var(--cinza-borda);
  white-space: nowrap;
}
.tabela-densa td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.tabela-densa tbody tr { cursor: pointer; }
.tabela-densa tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.tabela-densa tbody tr.marcada { background: rgba(82, 204, 90, 0.10); outline: 1px solid rgba(82, 204, 90, 0.35); }
.tabela-densa .numero { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto-apagado); }
.tabela-densa .assunto { font-weight: 600; }
.tabela-densa .apagado { color: var(--texto-apagado); font-size: 0.82rem; }

.semaforo {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.semaforo-ok { background: var(--verde); }
.semaforo-atencao { background: var(--ambar); }
.semaforo-estourado { background: var(--vermelho); }
/* relogio parado esperando o solicitante: nao e atraso de ninguem */
.semaforo-pausado { background: var(--cinza-medio); }

/* ---------------------------------------------------------------------
   18a. Anexos
   --------------------------------------------------------------------- */
.zona-arquivos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 18px;
  text-align: center;
  border: 2px dashed var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.zona-arquivos:hover,
.zona-arquivos:focus-visible {
  border-color: var(--verde);
  background: var(--verde-fundo);
}
.zona-arquivos.arrastando {
  border-color: var(--verde);
  background: var(--verde-fundo);
}
.zona-arquivos .icone { color: var(--verde); width: 26px; height: 26px; }
.zona-arquivos .zona-titulo { font-weight: 600; }
.zona-arquivos .zona-nota {
  font-size: 0.83rem;
  color: var(--texto-apagado);
  line-height: 1.5;
}

.lista-anexos { list-style: none; margin: 12px 0 0; padding: 0; }
.lista-anexos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  background: rgba(255, 255, 255, 0.03);
}
.lista-anexos li + li { margin-top: 8px; }
.lista-anexos .icone { flex: 0 0 auto; color: var(--texto-apagado); }
.anexo-nome {
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
}
.anexo-tamanho {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: var(--texto-apagado);
  white-space: nowrap;
}
.anexo-tirar {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-family: var(--fonte-corpo);
  font-size: 0.78rem;
  color: var(--texto-suave);
  background: transparent;
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transicao);
}
.anexo-tirar:hover {
  color: var(--vermelho);
  border-color: var(--vermelho);
}

/* anexos já enviados, embaixo do texto a que pertencem */
.anexos-do-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 2px;
}

/* anexo já enviado, mostrado na linha do tempo */
.anexo-baixar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 8px 8px 0 0;
  padding: 7px 13px;
  font-family: var(--fonte-corpo);
  font-size: 0.85rem;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--transicao);
}
.anexo-baixar:hover { border-color: var(--verde); color: var(--verde); }
.anexo-baixar .icone { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   18b. Base de conhecimento
   --------------------------------------------------------------------- */
.busca-base { margin-bottom: 26px; }
.busca-base input { font-size: 1.05rem; padding: 15px 17px; }

.grupo-base + .grupo-base { margin-top: 28px; }
.grupo-base h2 {
  font-size: 0.86rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  font-family: var(--fonte-corpo);
  font-weight: 700;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--cinza-borda);
}

.lista-artigos { list-style: none; margin: 0; padding: 0; }
.lista-artigos li { border-bottom: 1px solid var(--cinza-borda); }
.lista-artigos li:last-child { border-bottom: 0; }
.lista-artigos a {
  display: block;
  padding: 15px 2px;
  color: var(--texto);
  border: 0;
  transition: padding-left var(--transicao);
}
.lista-artigos a:hover {
  border: 0;
  padding-left: 8px;
}
.lista-artigos a:hover .artigo-titulo { color: var(--verde); }
.artigo-titulo {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  transition: color var(--transicao);
}
.artigo-resumo {
  display: block;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--texto-apagado);
  line-height: 1.5;
}

/* Markdown renderizado do artigo */
.markdown { line-height: 1.75; }
.markdown h2 {
  font-size: 1.16rem;
  margin-top: 28px;
  margin-bottom: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--cinza-borda);
}
.markdown h2:first-child { margin-top: 6px; padding-top: 0; border-top: 0; }
.markdown h3 { font-size: 1rem; margin-top: 20px; }
.markdown ul,
.markdown ol { padding-left: 22px; margin: 0 0 16px; }
.markdown li { margin-bottom: 8px; }
.markdown li::marker { color: var(--verde); font-weight: 700; }
.markdown strong { color: var(--branco); }
.markdown code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cinza-borda);
}
.markdown pre {
  padding: 14px 16px;
  border-radius: var(--raio-pequeno);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--cinza-borda);
  overflow-x: auto;
  white-space: pre-wrap;
}
.markdown blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--verde);
  color: var(--texto-suave);
}
.markdown table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.markdown th,
.markdown td { padding: 9px 11px; border: 1px solid var(--cinza-borda); text-align: left; }
.markdown th { background: rgba(255, 255, 255, 0.04); }

/* ---------------------------------------------------------------------
   18b2. Tabela larga dentro de cartao
   Toda tabela densa precisa rolar dentro do proprio cartao, senao ela
   empurra a pagina inteira para o lado no celular. A classe existia no
   editor da base sem regra nenhuma, e isso estourava a largura.
   --------------------------------------------------------------------- */
.rolagem-tabela {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   18b3. Pessoas de uma caixa de e-mail, na administração
   --------------------------------------------------------------------- */
.pessoas-caixa {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.pessoa-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--cinza-borda);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.pessoa-chip input {
  border: 0;
  background: transparent;
  padding: 3px 2px;
  font-size: 0.86rem;
  width: 15ch;
  min-width: 0;
}
.pessoa-chip input:focus { outline: none; background: rgba(0, 0, 0, 0.3); border-radius: 5px; }
.pessoa-chip.novo { border-style: dashed; }
.pessoa-chip.novo input { width: 17ch; color: var(--texto-suave); }

/* mesmo primeiro nome na mesma caixa: o solicitante nao saberia escolher */
.pessoa-chip.conflito { border-color: var(--ambar); background: var(--ambar-fundo); }

.remover-pessoa {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-apagado);
  font-family: var(--fonte-corpo);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.remover-pessoa:hover { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ---------------------------------------------------------------------
   18c. Editor da base, no painel
   --------------------------------------------------------------------- */
.grade-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.grade-editor .cartao { margin-top: 0; }

.editor-md {
  min-height: 380px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.65;
}

.linha-marcador {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}
.linha-marcador input {
  width: 18px;
  height: 18px;
  accent-color: var(--verde);
  cursor: pointer;
}

@media (max-width: 900px) {
  .grade-editor { grid-template-columns: 1fr; }
  .editor-md { min-height: 280px; }
}

/* ---------------------------------------------------------------------
   19. Dashboard
   --------------------------------------------------------------------- */
.grupo-periodo {
  display: inline-flex;
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  overflow: hidden;
}
.botao-periodo {
  padding: 9px 15px;
  font-family: var(--fonte-corpo);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cinza-borda);
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.botao-periodo:last-child { border-right: 0; }
.botao-periodo:hover { background: rgba(255, 255, 255, 0.05); color: var(--texto); }
.botao-periodo.ativo { background: var(--verde); color: var(--petroleo-escuro); }

.grade-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.kpi {
  padding: 16px 17px;
  background: var(--cinza-cartao);
  border: 1px solid var(--cinza-borda);
  border-left: 3px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
}
.kpi-verde    { border-left-color: var(--verde); }
.kpi-ambar    { border-left-color: var(--ambar); }
.kpi-vermelho { border-left-color: var(--vermelho); }

.kpi-rotulo {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  margin-bottom: 7px;
  line-height: 1.35;
}
.kpi-valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.65rem;
  color: var(--texto);
  line-height: 1.1;
}
.kpi-extra {
  display: block;
  margin-top: 6px;
  font-size: 0.79rem;
  color: var(--texto-apagado);
}

.var { font-weight: 600; }
.var.boa    { color: var(--verde); }
.var.ruim   { color: var(--ambar); }
.var.neutra { color: var(--texto-apagado); font-weight: 400; }

.bloco-atencao { margin-bottom: 18px; }
.bloco-atencao h2 { margin-bottom: 14px; }
.grade-atencao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 14px;
}
.atencao-grupo {
  padding: 13px 15px;
  border-radius: var(--raio-pequeno);
  border: 1px solid var(--cinza-borda);
  border-top: 3px solid var(--cinza-medio);
  background: rgba(255, 255, 255, 0.03);
}
.atencao-vermelho { border-top-color: var(--vermelho); }
.atencao-ambar    { border-top-color: var(--ambar); }
.atencao-cinza    { border-top-color: var(--cinza-medio); }

.atencao-grupo h3 {
  font-size: 0.9rem;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.atencao-grupo .conta {
  font-family: var(--fonte-corpo);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--texto-suave);
}
.atencao-grupo ul { list-style: none; margin: 0; padding: 0; }
.atencao-grupo li + li { margin-top: 9px; }
.atencao-grupo a {
  display: block;
  color: var(--texto);
  border: 0;
  line-height: 1.4;
}
.atencao-grupo a:hover { border: 0; }
.atencao-grupo a:hover .atencao-titulo { color: var(--verde); }
.atencao-numero {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 0.79rem;
  color: var(--texto-apagado);
}
.atencao-titulo { font-size: 0.9rem; transition: color var(--transicao); }
.atencao-meta {
  display: block;
  font-size: 0.76rem;
  color: var(--texto-apagado);
}
.atencao-resto {
  margin: 9px 0 0;
  font-size: 0.79rem;
  color: var(--texto-apagado);
}

.grade-graficos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.caixa-grafico.larga { grid-column: 1 / -1; }
.caixa-grafico h2 { font-size: 1rem; margin-bottom: 14px; }
.area-grafico { position: relative; height: 262px; }
.caixa-grafico.larga .area-grafico { height: 288px; }

.calor-rolagem { overflow-x: auto; }
table.calor {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  font-size: 0.78rem;
}
table.calor th {
  color: var(--texto-apagado);
  font-weight: 600;
  padding: 4px 2px;
  white-space: nowrap;
}
table.calor tbody th { text-align: right; padding-right: 9px; }
table.calor td {
  text-align: center;
  padding: 7px 4px;
  min-width: 32px;
  border-radius: 5px;
  border: 1px solid var(--cinza-borda);
  color: var(--texto);
}

.grade-listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}
.top-lista { list-style: none; margin: 0; padding: 0; counter-reset: pos; }
.top-lista li { margin-bottom: 13px; }
.top-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}
.top-nome { font-size: 0.92rem; }
.top-sub { color: var(--texto-apagado); font-size: 0.79rem; }
.top-conta {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  white-space: nowrap;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.top-conta .var { font-family: var(--fonte-corpo); font-size: 0.76rem; }
.top-barra {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.top-barra span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--petroleo-claro), var(--verde));
}

@media (max-width: 620px) {
  .grade-kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kpi-valor { font-size: 1.35rem; }
  .area-grafico { height: 232px; }
  .grupo-periodo { width: 100%; }
  .botao-periodo { flex: 1 1 auto; }
}

/* --- kanban -------------------------------------------------------- */
.kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: start;
}
.coluna {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: 10px;
  min-height: 120px;
}
.coluna.alvo { border-color: var(--verde); background: var(--verde-fundo); }
.coluna h3 {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-apagado);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.cartao-chamado {
  background: var(--cinza-cartao);
  border: 1px solid var(--cinza-borda);
  border-radius: var(--raio-pequeno);
  padding: 11px 12px;
  margin-bottom: 8px;
  cursor: grab;
  font-size: 0.86rem;
}
.cartao-chamado:hover { border-color: var(--petroleo-claro); }
.cartao-chamado.arrastando { opacity: 0.45; }
.cartao-chamado .topo { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.cartao-chamado .topo .numero { font-size: 0.75rem; color: var(--texto-apagado); font-variant-numeric: tabular-nums; }
.cartao-chamado .titulo { font-weight: 600; margin-bottom: 6px; line-height: 1.35; }
.cartao-chamado .pe { display: flex; justify-content: space-between; gap: 8px; font-size: 0.76rem; color: var(--texto-apagado); }

/* --- detalhe do chamado -------------------------------------------- */
.detalhe {
  display: grid;
  grid-template-columns: 1fr 288px;
  gap: 18px;
  align-items: start;
}

.cronometro {
  font-family: var(--fonte-titulo);
  font-weight: 900;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}
.cronometro.ok { color: var(--verde); }
.cronometro.atencao { color: var(--ambar); }
.cronometro.estourado { color: var(--vermelho); }

.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--cinza-borda); margin-bottom: 14px; }
.abas button {
  padding: 9px 15px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--fonte-corpo);
  color: var(--texto-apagado);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.abas button.ativo { color: var(--texto); border-bottom-color: var(--verde); }
.abas button.nota.ativo { border-bottom-color: var(--ambar); }

.tempo-item.nota_interna::before { background: var(--ambar); }
.tempo-item.nota_interna .tempo-corpo {
  background: var(--ambar-fundo);
  border-color: rgba(255, 192, 42, 0.34);
  border-left: 3px solid var(--ambar);
}
.etiqueta-nota {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 700;
}

.lista-lateral { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; }
.lista-lateral li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.lista-lateral li:last-child { border-bottom: 0; }
.lista-lateral a { color: var(--texto); font-weight: 500; }

.dado { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.86rem; }
.dado:last-child { border-bottom: 0; }
.dado .r { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-apagado); margin-bottom: 2px; }

/* --- login ---------------------------------------------------------- */
.tela-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 18px;
}
.tela-login .cartao { width: 100%; max-width: 390px; }

/* ---------------------------------------------------------------------
   18c. Administração

   A edição é por célula: mudou o campo, salvou. Como não existe botão
   de salvar, o retorno visual é a única prova de que gravou, e por isso
   ele precisa ser óbvio sem ser barulhento.
   --------------------------------------------------------------------- */
#area-admin .tabela-densa input[type="text"],
#area-admin .tabela-densa input[type="number"],
#area-admin .tabela-densa select {
  width: 100%;
  padding: 7px 9px;
  font-size: 0.86rem;
  min-width: 0;
}
#area-admin .tabela-densa tbody tr { cursor: default; }
#area-admin .tabela-densa tbody tr:hover { background: transparent; }

.campo-salvo {
  border-color: var(--verde) !important;
  transition: border-color 0.25s;
}
.campo-erro {
  border-color: var(--vermelho) !important;
}

/* interruptor de ligar e desligar, no lugar de caixa de marcar, porque
   a coluna diz "Ativo" e a pergunta é de estado, não de escolha */
.interruptor {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.interruptor input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.interruptor span {
  width: 38px; height: 21px;
  border-radius: 999px;
  background: var(--cinza-medio);
  position: relative;
  transition: background var(--transicao);
}
.interruptor span::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--transicao);
}
.interruptor input:checked + span { background: var(--verde); }
.interruptor input:checked + span::after { transform: translateX(17px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--verde); outline-offset: 2px; }

.linha-interruptor {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* --- telas pequenas do painel --------------------------------------- */
@media (max-width: 900px) {
  .detalhe { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .painel { grid-template-columns: 1fr; }
  .painel-lateral {
    position: static;
    height: auto;
    flex-direction: row;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--cinza-borda);
    padding: 10px;
  }
  .painel-marca { display: none; }
  .painel-rodape { display: none; }
  .painel-item { width: auto; white-space: nowrap; }
  .painel-conteudo { padding: 16px 14px 50px; }
  .tabela-densa .esconde-celular { display: none; }
}

/* ---------------------------------------------------------------------
   19. Telas pequenas
   --------------------------------------------------------------------- */
@media (max-width: 620px) {
  .pagina { padding: 16px 14px 60px; }
  .cartao { padding: 20px 17px; }
  .grade-escolhas { grid-template-columns: 1fr; }
  .revisao div { flex-direction: column; gap: 3px; }
  .revisao dt { flex-basis: auto; }
  .linha-botoes .botao { width: 100%; }
  .destaque-prazo { gap: 14px; flex-direction: column; }
}