/* Portal de Chamados — identidade visual Prefeitura de Cláudio (complementa o Tailwind CDN) */

:root {
  /* >>> CORES DA MARCA — troque os 2 valores abaixo se tiver o hex oficial <<< */
  --brand:       #0e4d92;   /* azul institucional (cor principal) */
  --accent:      #f0a92b;   /* dourado (detalhes/realce) */

  /* derivadas (normalmente não precisa mexer) */
  --brand-dark:  #0a3a70;
  --brand-soft:  #e9f1fa;
  --accent-dark: #d6951c;
  --ink:         #1b2733;
  --paper:       #f4f6f9;
}

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

body {
  font-family: 'Libre Franklin', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* fundo com leve profundidade */
.bg-portal {
  background:
    radial-gradient(1200px 480px at 100% -10%, rgba(14,77,146,.08), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(14,77,146,.05), transparent 60%),
    var(--paper);
}

/* ---- Barra de cabeçalho (azul institucional) ---- */
.brand-bar {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-bottom: 3px solid var(--accent);
}
.brand-logo { height: 40px; width: auto; display: block; }
.brand-link { color: rgba(255,255,255,.92); }
.brand-link:hover { color: #fff; }

/* ---- Botões ---- */
.btn-brand {
  background: var(--brand);
  transition: background .15s ease, transform .05s ease;
}
.btn-brand:hover  { background: var(--brand-dark); }
.btn-brand:active { transform: translateY(1px); }

/* faixa/acentos dourados */
.accent-bar { background: var(--accent); }
.text-accent { color: var(--accent); }

/* foco acessível */
.focus-ring:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(14,77,146,.18);
}

/* cards da home */
.card-tile {
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.card-tile:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 12px 28px -12px rgba(14,77,146,.40);
}

/* rodapé institucional */
.brand-footer {
  background: var(--brand-dark);
  color: rgba(255,255,255,.85);
}
.brand-footer a { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .card-tile, .btn-brand { transition: none; }
  .card-tile:hover { transform: none; }
}

/* conteúdo HTML vindo do GLPI (descrição/atualizações) */
.rich-content img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-content table { max-width: 100%; }
.rich-content a { color: var(--brand); text-decoration: underline; }
.rich-content p { margin: 0 0 8px; }
.rich-content p:last-child { margin-bottom: 0; }