/**
 * Identidade visual UAN (Fase 5.1)
 * Paleta institucional: azul, amarelo, vermelho, preto.
 * Gradiente inspirado na sidebar UAN: azul ciano → azul royal.
 * Incluir em todas as páginas para consistência.
 */
:root {
  /* Cores principais UAN */
  --uan-azul: #004aad;
  --uan-azul-escuro: #00367a;
  --uan-azul-claro: #e8f0fe;
  --uan-amarelo: #F9C700;
  --uan-amarelo-escuro: #d4a600;
  --uan-vermelho: #C8102E;
  --uan-vermelho-escuro: #a00d24;
  --uan-preto: #1a1a1a;
  --uan-cinza: #64748b;
  --uan-branco: #ffffff;

  /* Gradiente UAN (identidade visual – topo → base) */
  --uan-gradient-top: #36B2D4;
  --uan-gradient-mid: #2E91C9;
  --uan-gradient-bottom: #216BB4;
  --uan-gradient: linear-gradient(180deg, var(--uan-gradient-top) 0%, var(--uan-gradient-mid) 50%, var(--uan-gradient-bottom) 100%);
  --uan-gradient-hover: linear-gradient(180deg, #3fc0e0 0%, #3a9ed4 50%, #2878c4 100%);
  /* Estado ativo no menu (fundo claro, texto escuro) */
  --uan-gradient-active-bg: #E0F2F7;
  --uan-gradient-active-text: #1e293b;

  /* Aliases para uso em componentes */
  --uan-primary: var(--uan-azul);
  --uan-primary-hover: var(--uan-azul-escuro);
  --uan-accent-amarelo: var(--uan-amarelo);
  --uan-accent-vermelho: var(--uan-vermelho);
  --uan-text: var(--uan-preto);
  --uan-text-muted: var(--uan-cinza);

  /* Fase 4.3 – Indicadores visuais: verde=aprovado/concluído, vermelho=pendente/recusado/atrasado, amarelo=em análise/revisão */
  --indicator-concluido: #166534;      /* Verde: aprovado / concluído (fechado) */
  --indicator-concluido-bg: #dcfce7;
  --indicator-pendente: #991b1b;      /* Vermelho: pendente / recusado / atrasado / rascunho */
  --indicator-pendente-bg: #fee2e2;
  --indicator-revisao: #b45309;       /* Amarelo: em análise / em revisão (submetido, em_revisao) */
  --indicator-revisao-bg: #fef3c7;
  --indicator-aberto: var(--uan-azul); /* Azul: aberto (neutro) */
  --indicator-aberto-bg: var(--uan-azul-claro);
}

/* Classes utilitárias para badges de estado (uso em tabelas e cards) */
.indicador-concluido,
.indicador-verde { background-color: var(--indicator-concluido-bg); color: var(--indicator-concluido); }
.indicador-pendente,
.indicador-vermelho { background-color: var(--indicator-pendente-bg); color: var(--indicator-pendente); }
.indicador-revisao,
.indicador-amarelo { background-color: var(--indicator-revisao-bg); color: var(--indicator-revisao); }
.indicador-aberto { background-color: var(--indicator-aberto-bg); color: var(--indicator-aberto); }

/* Versão badge sólida (texto branco, ex.: tabela portal) */
.estado.indicador-concluido-solido,
.estado.indicador-verde-solido { background-color: var(--indicator-concluido); color: #fff; }
.estado.indicador-pendente-solido,
.estado.indicador-vermelho-solido { background-color: var(--uan-vermelho); color: #fff; }
.estado.indicador-revisao-solido,
.estado.indicador-amarelo-solido { background-color: var(--uan-amarelo); color: var(--uan-preto); }
.estado.indicador-aberto-solido { background-color: var(--indicator-aberto); color: #fff; }

/* Logo UAN — navbar e headers: suave e responsivo */
.logo img {
  max-height: 48px;
  height: auto;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}
@media (max-width: 768px) {
  .logo img {
    max-height: 42px;
    max-width: 140px;
  }
}

/* Badge de notificação no menu admin — número como expoente da palavra "Submissões" */
.nav-badge-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.nav-badge-wrap .nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--uan-vermelho, #C8102E);
  border-radius: 50%;
  vertical-align: super;
  margin-left: 1px;
}
.nav-badge-wrap:hover .nav-badge {
  background: var(--uan-vermelho-escuro, #a00d24);
}

/* ========== Layout Admin – identidade visual UAN (gradiente) ==========
 * Header com gradiente azul ciano → azul royal; itens ativos com fundo claro.
 */
.uan-admin header {
  background: var(--uan-gradient) !important;
  color: var(--uan-branco);
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(33, 107, 180, 0.35);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  position: relative;
}
.uan-admin header .logo {
  flex-shrink: 0;
}
.uan-admin header > .user {
  margin-left: auto;
}
.uan-admin header .logo span {
  color: var(--uan-branco);
}
.uan-admin .admin-nav-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.uan-admin .admin-menu-btn {
  display: none;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--uan-branco);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  align-items: center;
  justify-content: center;
}
.uan-admin .admin-menu-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 992px) {
  .uan-admin .admin-menu-btn {
    display: flex;
    order: 2;
    margin-left: auto;
  }
  .uan-admin .admin-nav-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    background: var(--uan-gradient);
    padding: 1rem;
    box-shadow: 0 8px 20px rgba(33, 107, 180, 0.4);
    z-index: 999;
    margin-left: 0;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .uan-admin .admin-nav-wrap.active {
    display: flex;
  }
  .uan-admin .admin-nav-wrap .nav-links {
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
  }
  .uan-admin .admin-nav-wrap .nav-links a {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
  }
  .uan-admin .admin-nav-wrap .user {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin-top: 0.25rem;
    justify-content: flex-end;
  }
}
.uan-admin .nav-links a {
  color: var(--uan-branco);
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.uan-admin .nav-links a:hover {
  background: var(--uan-gradient-active-bg);
  color: var(--uan-gradient-active-text);
  text-decoration: none;
}
.uan-admin .user span {
  color: var(--uan-branco);
}
.uan-admin .user a {
  color: rgba(255, 255, 255, 0.95);
  transition: background 0.2s, color 0.2s;
}
.uan-admin .user a:hover {
  color: var(--uan-branco);
  text-decoration: none;
}
.uan-admin .user a[href="#"] {
  color: #ffcdd2;
}
.uan-admin .user a[href="#"]:hover {
  color: var(--uan-branco);
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: 4px;
}
.uan-admin .badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--uan-branco);
}
.uan-admin h1,
.uan-admin .modal-header h2 {
  color: var(--uan-gradient-bottom);
}
.uan-admin .btn-primary,
.uan-admin .filtros .btn,
.uan-admin th {
  background: var(--uan-gradient);
  color: var(--uan-branco);
  border: none;
}
.uan-admin .btn-primary:hover,
.uan-admin .filtros .btn:hover {
  background: var(--uan-gradient-hover);
  color: var(--uan-branco);
  filter: brightness(1.05);
}
.uan-admin .btn-danger {
  background: var(--uan-vermelho);
}
.uan-admin .btn-danger:hover {
  background: var(--uan-vermelho-escuro);
}
.uan-admin .export-bar a:not(.pdf) {
  background: var(--uan-gradient);
  color: var(--uan-branco);
  border: none;
}
.uan-admin .export-bar a:not(.pdf):hover {
  background: var(--uan-gradient-hover);
  color: var(--uan-branco);
  filter: brightness(1.05);
}
.uan-admin .export-bar a.pdf {
  background: var(--uan-vermelho);
}
.uan-admin .export-bar a.pdf:hover {
  background: var(--uan-vermelho-escuro);
}
.uan-admin .btn-uan {
  background: var(--uan-gradient) !important;
  color: var(--uan-branco) !important;
  border: none;
}
.uan-admin .btn-uan:hover {
  background: var(--uan-gradient-hover) !important;
  color: var(--uan-branco) !important;
  filter: brightness(1.05);
}

/* Portal: header com gradiente */
.portal-header-gradient header {
  background: var(--uan-gradient) !important;
  border-bottom: none !important;
  box-shadow: 0 2px 12px rgba(33, 107, 180, 0.35);
}
.portal-header-gradient header .logo span,
.portal-header-gradient .menu a,
.portal-header-gradient .profile span,
.portal-header-gradient .profile i {
  color: var(--uan-branco) !important;
}
.portal-header-gradient .menu a:hover {
  background: var(--uan-gradient-active-bg);
  color: var(--uan-gradient-active-text) !important;
  border-radius: 8px;
  padding: 6px 12px;
}
.portal-header-gradient .profile {
  background: rgba(255, 255, 255, 0.2);
}
.portal-header-gradient .profile .logout {
  color: #ffcdd2 !important;
}
.portal-header-gradient .profile .logout:hover {
  color: var(--uan-branco) !important;
}
.portal-header-gradient .tabela-zebrada thead {
  background: var(--uan-gradient) !important;
  color: var(--uan-branco);
  border: none;
}
.portal-header-gradient .btn-selecionar {
  background: var(--uan-gradient) !important;
  color: var(--uan-branco) !important;
  border: none;
}
.portal-header-gradient .btn-selecionar:hover {
  background: var(--uan-gradient-hover) !important;
  color: var(--uan-branco) !important;
  filter: brightness(1.05);
}
.portal-header-gradient footer {
  background: var(--uan-gradient) !important;
  color: var(--uan-branco);
  border: none;
}