/* Container principal - Fundo sutil para destacar os cartões brancos */
.portlet-acesso-rapido-container {
  background-color: #f1f5f9; /* Cinza bem clarinho/azulado */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  font-family: Arial, sans-serif;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); /* Sombra interna bem leve */
}

/* Blocos de seções - Removida a linha inferior, trocada por espaçamento */
.portlet-acesso-rapido-section {
  margin-bottom: 24px;
}

.portlet-acesso-rapido-section:last-child {
  margin-bottom: 0;
}

/* Títulos de cada bloco */
.portlet-acesso-rapido-title {
  display: block;
  color: #334155;
  font-size: 0.95em;
  font-weight: bold;
  text-transform: uppercase; /* Deixa o título em maiúsculas para dar tom de categoria */
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  border-bottom: 2px solid #cbd5e1; /* Uma linha curta embaixo do título */
  padding-bottom: 4px;
}

/* Lista de links - Usando flexbox e gap para espaçar os cartões automaticamente */
.portlet-acesso-rapido-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Espaço exato entre um cartão e outro */
}

/* 
=========================================
  O SEGREDO DOS CARTÕES ESTÁ AQUI NO 'A'
=========================================
*/
.portlet-acesso-rapido-list a {
  display: block; /* Faz o link ocupar a linha toda, virando um bloco */
  background-color: #ffffff; /* Fundo branco do cartão */
  color: #0f172a; /* Cor do texto escura */
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95em;
  padding: 12px 16px; /* Espaço interno do cartão */
  border: 1px solid #e2e8f0; /* Borda fininha */
  border-left: 4px solid #0056b3; /* Detalhe azul na esquerda para dar charme */
  border-radius: 6px; /* Cantos arredondados */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombreado leve */
  transition: all 0.2s ease; /* Prepara para a animação do hover */
}

/* Efeito ao passar o mouse por cima do cartão */
.portlet-acesso-rapido-list a:hover {
  background-color: #f8fafc;
  border-left-color: #004085; /* Escurece o detalhe azul */
  color: #0056b3; /* O texto fica azul */
  transform: translateY(-2px); /* Efeito do cartão levantando um pouquinho */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08); /* Sombra aumenta quando levanta */
}

/* 
=========================================
  ESTILO PARA ITEM BLOQUEADO / EM BREVE
=========================================
*/
.portlet-acesso-rapido-list a.item-bloqueado {
  background-color: #f8fafc; /* Fundo cinza bem claro */
  color: #94a3b8; /* Texto cinza, indicando inatividade */
  border-color: #e2e8f0;
  border-left: 4px solid #cbd5e1; /* Barra lateral cinza no lugar da azul */
  cursor: not-allowed; /* Muda o mouse para indicar que não é clicável */
  box-shadow: none; /* Tira a sombra para dar aspecto de "desligado" */
  
  /* Flexbox para alinhar perfeitamente o texto na esquerda e a etiqueta na direita */
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

/* Anula o efeito interativo ao passar o mouse por cima do item bloqueado */
.portlet-acesso-rapido-list a.item-bloqueado:hover {
  background-color: #f8fafc;
  border-left-color: #cbd5e1;
  color: #94a3b8;
  transform: none; /* Impede o cartão de "pular" */
  box-shadow: none;
  text-decoration: none;
}

/* 
=========================================
  ESTILO PARA A PÁGINA ATUAL (ATIVO)
=========================================
*/
.portlet-acesso-rapido-list a.item-ativo {
  background-color: #e0f2fe; /* Fundo azul bem clarinho */
  border-color: #bae6fd;
  border-left: 5px solid #0284c7; /* Azul mais vibrante na lateral */
  color: #0369a1; /* Texto azul escuro */
  font-weight: 700; /* Texto mais gordinho (bold) */
  cursor: default; /* Mouse normal, indicando que já está na página */
}

/* Tira o efeito de pulo do item ativo, pois não precisa ser clicado */
.portlet-acesso-rapido-list a.item-ativo:hover {
  background-color: #e0f2fe;
  border-left-color: #0284c7;
  color: #0369a1;
  transform: none; 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Mantém a sombra original */
}

/* Bônus: Adiciona um alfinete/marcador visual para indicar "Você está aqui" */
.portlet-acesso-rapido-list a.item-ativo::before {
  content: "📍 "; /* Ícone antes do texto */
  font-size: 1.1em;
}