/* ============================ */
/*         RESET                */
/* ============================ */
/* Define configurações básicas para o corpo da página e remove margens/paddings padrão */
body, html {
    font-family: Arial, sans-serif; /* Define a fonte padrão */
    margin: 0; /* Remove margens externas */
    padding: 0; /* Remove paddings internos */
    height: 100%; /* Garante que o corpo ocupe toda a altura da tela */
    background-color: #f8f9fa; /* Cor de fundo padrão */
}

/* ============================ */
/*         HEADER (TOP BAR)      */
/* ============================ */
/* Estilização do cabeçalho (top-bar) */
.top-bar {
    display: flex; /* Usa flexbox para organizar os elementos horizontalmente */
    justify-content: space-between; /* Espaça os itens entre si (icone, título, usuário) */
    align-items: center; /* Alinha verticalmente os itens no centro */
    padding: 10px 20px; /* Adiciona espaçamento interno */
    background: #f8f9fa; /* Cor de fundo do cabeçalho */
    width: calc(100% - 250px); /* Largura padrão (menos a largura da sidebar) */
    position: fixed; /* Mantém o cabeçalho fixo no topo da tela */
    top: 0; /* Posiciona o cabeçalho no topo */
    left: 250px; /* Alinha o cabeçalho com a sidebar */
    height: 60px; /* Altura fixa do cabeçalho */
    z-index: 1000; /* Garante que o cabeçalho esteja sobre outros elementos */
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out; /* Transição suave ao abrir/fechar a sidebar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve para dar profundidade */
}

/* Estilização do título do cabeçalho */
.top-bar h2 {
    margin: 0; /* Remove margens padrão do título */
    font-size: 18px; /* Tamanho do texto */
    font-weight: 600; /* Peso da fonte */
}

/* Estilização das informações do usuário (avatar) */
.user-info {
    display: flex; /* Organiza os elementos em linha */
    align-items: center; /* Centraliza verticalmente */
}

/* Estilização da imagem do avatar */
.user-avatar {
    width: 30px; /* Largura da imagem */
    height: 30px; /* Altura da imagem */
    border-radius: 50%; /* Cria um círculo */
    margin-right: 10px; /* Espaçamento à direita */
}

/* Botão de menu hamburguer */
.menu-toggle {
    cursor: pointer; /* Altera o cursor para "pointer" ao passar o mouse */
    position: fixed; /* Mantém o botão fixo na tela */
    top: 15px; /* Posiciona o botão no topo */
    left: 15px; /* Posiciona o botão à esquerda */
    display: flex; /* Usa flexbox para centralizar o ícone */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    z-index: 1200; /* Garante que o botão esteja sobre outros elementos */
    transition: transform 0.3s ease-in-out; /* Transição suave ao clicar */
}

/* Estilização do ícone do hamburguer */
.menu-toggle i {
    font-size: 24px; /* Tamanho do ícone */
    color: #333; /* Cor do ícone */
}

/* Efeito hover no ícone do hamburguer */
.menu-toggle:hover i {
    color: #555; /* Muda a cor ao passar o mouse */
}

/* Oculta o botão de menu em telas maiores */
@media screen and (min-width: 768px) {
    .menu-toggle {
        display: none; /* Esconde o botão */
    }
}

/* ============================ */
/*         SIDEBAR              */
/* ============================ */
/* Estilização geral da sidebar */
.sidebar {
    width: 250px; /* Largura fixa da sidebar */
    height: 100vh; /* Altura total da tela */
    position: fixed; /* Mantém a sidebar fixa */
    top: 0; /* Posiciona a sidebar no topo */
    left: 0; /* Posiciona a sidebar à esquerda */
    background: #eaeaea; /* Cor de fundo */
    padding-top: 20px; /* Espaçamento interno superior */
    transition: left 0.3s ease-in-out; /* Transição suave ao abrir/fechar */
    z-index: 1300; /* Garante que a sidebar esteja sobre outros elementos */
    overflow-y: auto; /* Habilita scroll vertical se necessário */
}

/* Sidebar no mobile (oculta inicialmente) */
@media screen and (max-width: 768px) {
    .sidebar {
        left: -250px; /* Posiciona a sidebar fora da tela */
    }

    /* Quando a sidebar está aberta */
    .sidebar.aberta {
        left: 0; /* Move a sidebar para dentro da tela */
    }
}

/* Logo da sidebar */
.sidebar-logo {
    display: flex; /* Organiza os elementos em linha */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    padding: 10px 20px; /* Espaçamento interno */
}

/* Estilização da imagem da logo */
.sidebar-logo-img {
    max-width: 50%; /* Largura máxima da imagem */
    height: auto; /* Altura automática */
}

/* Ajustes específicos para mobile */
@media screen and (max-width: 768px) {
    .sidebar-logo-img {
        width: 100px !important; /* Define uma largura fixa para o mobile */
        max-width: 100px; /* Limita a largura máxima */
    }
}

/* Menu da sidebar */
.sidebar-menu {
    list-style: none; /* Remove marcadores da lista */
    padding: 0; /* Remove padding padrão */
    margin: 0; /* Remove margin padrão */
}

/* Itens do menu */
.sidebar-menu li {
    padding: 0px; /* Espaçamento interno */
    border-bottom: 1px solid #ddd; /* Linha divisória */
}

/* Links do menu */
.sidebar-menu li a {
    text-decoration: none; /* Remove sublinhado */
    color: #333; /* Cor do texto */
    display: flex; /* Organiza os elementos em linha */
    align-items: center; /* Centraliza verticalmente */
    padding: 8px 10px; /* Espaçamento interno */
    transition: background 0.3s ease-in-out; /* Transição suave ao hover */
}

/* Efeito hover nos links */
.sidebar-menu li a:hover,
.sidebar-menu li a.active {
    background: #ddd; /* Cor de fundo ao hover ou ativo */
}

/* Ícones dos links */
.sidebar-menu li a i {
    margin-right: 10px; /* Espaçamento entre ícone e texto */
    font-size: 18px; /* Tamanho do ícone */
}

/* ============================ */
/*      ÁREA DE CONTEÚDO        */
/* ============================ */
/* Estilização da área de conteúdo principal */
.content {
    margin-left: 250px; /* Margem lateral para alinhar com a sidebar */
    padding-top: 150px; /* Espaçamento superior para evitar sobreposição com o header */
    padding-left: 20px; /* Espaçamento lateral esquerdo */
    padding-right: 20px; /* Espaçamento lateral direito */
    width: calc(100% - 250px); /* Largura ajustada para a sidebar */
    min-height: 100vh; /* Altura mínima igual à tela */
    background: #fff; /* Cor de fundo */
    transition: margin-left 0.3s ease-in-out, width 0.3s ease-in-out; /* Transição suave ao abrir/fechar a sidebar */
}

/* ============================ */
/*  RESPONSIVIDADE (TABLETS)    */
/* ============================ */
/* Ajustes para telas menores (tablets) */
@media screen and (max-width: 1024px) {
    .top-bar {
        width: calc(100% - 250px); /* Ajusta a largura do cabeçalho */
        left: 250px; /* Ajusta a posição do cabeçalho */
    }

    .content {
        margin-left: 250px; /* Ajusta a margem lateral */
        padding-top: 100px; /* Reduz o espaçamento superior */
    }
}

/* ============================ */
/*  RESPONSIVIDADE (MOBILE)     */
/* ============================ */
/* Ajustes para telas pequenas (mobile) */
@media screen and (max-width: 768px) {
    /* Sidebar oculta inicialmente */
    .sidebar {
        left: -250px; /* Posiciona a sidebar fora da tela */
    }

    /* Quando a sidebar está aberta */
    .sidebar.aberta {
        left: 0; /* Move a sidebar para dentro da tela */
    }

    /* Ajusta o cabeçalho para ocupar toda a largura */
    .top-bar {
        flex-direction: row; /* Organiza os elementos horizontalmente */
        align-items: center; /* Alinha verticalmente */
        justify-content: space-between; /* Espaça os elementos entre si */
        padding: 10px 15px; /* Reduz o espaçamento interno */
        left: 0; /* Ajusta a posição do cabeçalho */
        width: 100%; /* Ocupa toda a largura */
    }

    /* Estilização do título no mobile */
    .top-bar h2 {
        margin-left: 10px; /* Adiciona espaço entre o ícone e o título */
        font-size: 16px; /* Reduz o tamanho do texto */
        flex: 1; /* Permite que o título ocupe o espaço disponível */
        white-space: nowrap; /* Evita que o texto quebre em várias linhas */
        overflow: hidden; /* Trunca o texto se necessário */
        text-overflow: ellipsis; /* Adiciona reticências (...) ao truncar o texto */
    }

    /* Exibe o botão hamburguer no mobile */
    .menu-toggle {
        display: flex; /* Mostra o botão */
        margin-right: 10px; /* Adiciona espaço à direita do ícone */
    }

    /* Esconde as informações do usuário no mobile */
    .user-info {
        display: none; /* Oculta o avatar */
    }

    /* Remove a margem lateral da área de conteúdo */
    .content {
        margin-left: 0; /* Remove a margem lateral */
        width: 100%; /* Ocupa toda a largura */
        padding-top: 120px; /* Ajusta o espaçamento superior */
        padding-left: 15px; /* Reduz o espaçamento lateral esquerdo */
        padding-right: 15px; /* Reduz o espaçamento lateral direito */
    }

}

/* ============================
   SIDEBAR - Cliente (alinhado ao menu)
   ============================ */
.sidebar-client{
  margin: .75rem 0 1rem;            /* tira as margens laterais para ficar "colado" no menu */
  padding: .55rem 10px .55rem 38px; /* 10px igual ao menu + recuo p/ alinhar com texto após o ícone */
  background: #f3f4f6;
  border-radius: 0;                 /* estilo "faixa" (mais menu-like) */
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.sidebar-client-name{
  font-size: .85rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}

.sidebar-client-sub{
  font-size: .72rem;
  color: #6b7280;
  margin-top: 2px;
}

.top-bar-title{
  padding-left: 44px; /* espaço do hamburguer + respiro */
  display: flex;
  align-items: center;
}

/* Desktop: não precisa compensar */
@media (min-width: 769px){
  .top-bar-title{
    padding-left: 0;
  }
}




/* ============================ */
/*  ESTILOS PARA A PÁGINA MÍDIA */
/* ============================ */

/* Box para cada categoria (Assessoria, Jornalistas, Mailing) */
.media-section {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

/* Centraliza os títulos das seções */
.media-section h3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}

/* Alinhamento correto dos cards dentro de cada seção */
.media-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Ajuste de tamanho para os cards */
.media-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Melhor espaçamento entre os elementos */
    text-decoration: none;
    color: #444;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    width: 180px;
    height: 160px;
    transition: transform 0.2s ease-in-out;
}

/* Ícone dentro da bolinha */
.icon i {
    color: white;
    font-size: 34px; /* Aumentado de 34px para 40px */
}

/* Mantém os ícones sempre centralizados */
.icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px; /* Adiciona espaço entre o ícone e o texto */
}

/* Ajuste do texto dentro do card */
.media-card span {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    max-width: 90%;
    line-height: 1.3; /* Ajusta o espaçamento entre linhas do texto */
    display: block;
    min-height: 40px; /* Garante um espaço mínimo para evitar desalinhamento */
}

/* Pequeno efeito de hover para interatividade */
.media-card:hover {
    transform: scale(1.06);
}

/* Dot pulsando tipo PM */
.pm-pulse{
  --c:#22c55e;               /* verde */
  width:6px;height:6px;
  display:inline-block;
  border-radius:50%;
  background:var(--c);
  position:relative;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);
  animation:pm-breathe 1.4s ease-out infinite;
  margin-left:6px;           /* espaço após o texto "Correção" */
  vertical-align:middle;
}
.pm-pulse::after{
  content:""; position:absolute; inset:-5px; border-radius:50%;
  border:2px solid rgba(34,197,94,.35);
  animation:pm-ring 1.4s ease-out infinite;
}
@keyframes pm-breathe{
  0%{transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{transform:scale(1.15); box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{transform:scale(1); box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@keyframes pm-ring{
  0%{transform:scale(.6); opacity:.8}
  80%,100%{transform:scale(1.4); opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .pm-pulse,.pm-pulse::after{animation:none}
}

/* ============================
   Sidebar (estrutura normal)
   ============================ */
.sidebar {
  min-height: 100vh; /* mantém altura cheia mas sem empurrar nada pro rodapé */
}

/* ============================
   BLOCO "Siga-nos"
   ============================ */
.sidebar-social {
  margin-top: 1.5rem;       /* distância do menu */
  padding: 0.5rem 1.5rem;   /* alinhamento lateral */
  text-align: center;       /* centraliza conteúdo */
  font-size: 12px;
}

.sidebar-social-label {
  display: block;
  margin-bottom: 0.35rem;
  color: #000;              /* preto, conforme pedido */
  font-weight: 600;
}

/* Área dos ícones */
.sidebar-social-icons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

/* Ícones individuais */
.sidebar-social-icons .social-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;             /* sem contorno */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 24px;          /* ícone maior */
}

/* Instagram — cor oficial */
.social-icon-ig {
  color: #d62976;           /* rosa Instagram */
}

/* LinkedIn — cor oficial */
.social-icon-in {
  color: #0a66c2;           /* azul LinkedIn */
}

/* Hover */
.sidebar-social-icons .social-icon:hover {
  opacity: 0.75;
}

/* ============================
   Mobile
   ============================ */
@media (max-width: 768px) {
  .sidebar-social {
    padding-bottom: 1rem;
    text-align: center;
  }

  .sidebar-social-icons {
    justify-content: center;
  }
}