/* ==========================================================================
   GESTÃO DE COMUNICAÇÃO — tema "Soundsation"
   Fundo escuro, gradiente rosa/ciano nos destaques, cartões translúcidos
   com blur — inspirado no dashboard de referência do site. Todas as
   classes usam o prefixo "comunicacao-" para nunca colidir com o tema.
   ========================================================================== */

.comunicacao-app {
	--sound-preto: #0a0a0e;
	--sound-preto-cartao: rgba(255, 255, 255, 0.045);
	--sound-linha: rgba(255, 255, 255, 0.09);
	--sound-texto: #eef0f4;
	--sound-texto-suave: #9aa0ac;
	--sound-ciano: #35d6ff;
	--sound-rosa: #ff4fd8;
	--sound-roxo: #9b5cff;
	--sound-gradiente: linear-gradient(90deg, var(--sound-ciano), var(--sound-rosa));
	--sound-verde: #4fd6a0;
	--sound-vermelho: #ff5c7a;
	--sound-radius: 14px;
	--sound-sombra: 0 10px 30px rgba(0, 0, 0, 0.45);

	box-sizing: border-box;
	font-family: "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
	color: var(--sound-texto);
	background: var(--sound-preto);
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 24px 60px;
	border-radius: 18px;
}
.comunicacao-app *, .comunicacao-app *::before, .comunicacao-app *::after { box-sizing: inherit; }

.comunicacao-a-carregar { color: var(--sound-texto-suave); text-align: center; padding: 40px 0; }
.comunicacao-pagina-completa { background: var(--sound-preto); padding: 20px 0; }
.comunicacao-aviso-permissao {
	background: rgba(255, 92, 122, 0.12); color: var(--sound-vermelho);
	padding: 16px 20px; border-radius: var(--sound-radius); border: 1px solid rgba(255, 92, 122, 0.3);
}

/* -------------------- Cabeçalho tipo "hero" (título grande com gradiente) -------------------- */
.comunicacao-cabecalho-hero { margin-bottom: 24px; }
.comunicacao-cabecalho-hero__titulo {
	font-size: 32px; font-weight: 800; margin: 0 0 4px;
	background: var(--sound-gradiente); -webkit-background-clip: text; background-clip: text; color: transparent;
	letter-spacing: -0.01em;
}
.comunicacao-cabecalho-hero__sub { color: var(--sound-texto-suave); font-size: 14px; margin: 0; }

/* -------------------- Navegação interna entre as páginas do plugin -------------------- */
.comunicacao-nav-interna {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--sound-linha);
}
.comunicacao-nav-interna__link {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 9px 16px; border-radius: 30px; text-decoration: none;
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha);
	color: var(--sound-texto-suave); font-size: 13.5px; font-weight: 600;
	transition: all 0.15s ease;
}
.comunicacao-nav-interna__link:hover { color: var(--sound-texto); border-color: var(--sound-ciano); }
.comunicacao-nav-interna__link.ativo {
	background: var(--sound-gradiente); color: #0a0a0e; border-color: transparent;
}
.comunicacao-nav-interna__icone { font-size: 14px; }
.comunicacao-nav-interna__aviso { margin-left: auto; font-size: 15px; cursor: help; }
.comunicacao-link-voltar {
	display: inline-block; color: var(--sound-ciano); text-decoration: none; font-size: 13px;
	margin-bottom: 16px; font-weight: 600;
}
.comunicacao-link-voltar:hover { color: var(--sound-rosa); }

/* -------------------- Botões -------------------- */
.comunicacao-botao {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 11px 20px; border-radius: 30px; border: none;
	font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.comunicacao-botao--primario { background: var(--sound-gradiente); color: #0a0a0e; }
.comunicacao-botao--primario:hover { filter: brightness(1.1); }
.comunicacao-botao--secundario { background: var(--sound-preto-cartao); color: var(--sound-texto); border: 1px solid var(--sound-linha); }
.comunicacao-botao--secundario:hover { border-color: var(--sound-ciano); }
.comunicacao-botao-icone {
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha); border-radius: 50%;
	width: 36px; height: 36px; cursor: pointer; font-size: 16px; color: var(--sound-texto);
}

/* -------------------- Lista / Cards de comunicados -------------------- */
.comunicacao-barra-topo { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-bottom: 22px; }
.comunicacao-input-pesquisa {
	padding: 11px 16px; border: 1px solid var(--sound-linha); border-radius: 30px; min-width: 240px;
	background: var(--sound-preto-cartao); color: var(--sound-texto);
}
.comunicacao-input-pesquisa::placeholder { color: var(--sound-texto-suave); }
.comunicacao-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.comunicacao-filtros select {
	padding: 10px 12px; border: 1px solid var(--sound-linha); border-radius: 10px;
	background: var(--sound-preto-cartao); color: var(--sound-texto);
}

.comunicacao-grelha-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.comunicacao-card {
	background: var(--sound-preto-cartao); backdrop-filter: blur(6px);
	border: 1px solid var(--sound-linha); border-radius: var(--sound-radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: border-color 0.2s ease, transform 0.2s ease;
}
.comunicacao-card:hover { border-color: var(--sound-ciano); transform: translateY(-2px); }
.comunicacao-card__imagem-wrap { position: relative; aspect-ratio: 16/9; background: #17171d; }
.comunicacao-card__imagem { width: 100%; height: 100%; object-fit: cover; display: block; }
.comunicacao-card__corpo { padding: 16px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.comunicacao-card__categoria { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sound-ciano); font-weight: 700; }
.comunicacao-card__titulo { font-size: 17px; margin: 0; color: var(--sound-texto); font-weight: 700; }
.comunicacao-card__resumo { font-size: 13px; color: var(--sound-texto-suave); margin: 0; line-height: 1.5; }
.comunicacao-card__meta { font-size: 11.5px; color: var(--sound-texto-suave); }
.comunicacao-card__stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--sound-texto-suave); }
.comunicacao-card__acoes { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

.comunicacao-pilula-prioridade {
	position: absolute; top: 10px; left: 10px; font-size: 10.5px; font-weight: 800;
	padding: 4px 10px; border-radius: 20px; background: rgba(255, 79, 216, 0.18); color: var(--sound-rosa);
	backdrop-filter: blur(4px);
}
.comunicacao-pilula-prioridade[data-prioridade="urgente"] { background: rgba(255, 92, 122, 0.22); color: var(--sound-vermelho); }
.comunicacao-pilula-prioridade[data-prioridade="normal"] { background: rgba(255, 255, 255, 0.1); color: var(--sound-texto-suave); }
.comunicacao-pilula-novo {
	position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 800;
	padding: 4px 9px; border-radius: 20px; background: var(--sound-gradiente); color: #0a0a0e;
}
.comunicacao-pilula-estado { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,0.08); color: var(--sound-texto-suave); }
.comunicacao-pilula-fixado { font-size: 10px; background: var(--sound-gradiente); color: #0a0a0e; padding: 2px 8px; border-radius: 10px; font-weight: 700; }

.comunicacao-paginacao { display: flex; justify-content: center; gap: 6px; margin-top: 28px; }
.comunicacao-paginacao button {
	padding: 8px 14px; border: 1px solid var(--sound-linha); background: var(--sound-preto-cartao);
	border-radius: 30px; cursor: pointer; color: var(--sound-texto);
}
.comunicacao-paginacao button.ativo { background: var(--sound-gradiente); color: #0a0a0e; border-color: transparent; font-weight: 700; }

/* -------------------- Single -------------------- */
.comunicacao-single {
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha);
	border-radius: var(--sound-radius); padding: 30px 32px;
}
.comunicacao-single__imagem { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--sound-radius); margin-bottom: 18px; }
.comunicacao-single__titulo { font-size: 28px; font-weight: 800; margin: 10px 0; color: var(--sound-texto); }
.comunicacao-single__meta { font-size: 12.5px; color: var(--sound-texto-suave); margin-bottom: 22px; }
.comunicacao-single__conteudo { line-height: 1.75; font-size: 15px; color: #d7dae0; }
.comunicacao-single__conteudo img { max-width: 100%; height: auto; border-radius: 10px; }
.comunicacao-single__conteudo table { border-collapse: collapse; width: 100%; }
.comunicacao-single__conteudo table td, .comunicacao-single__conteudo table th { border: 1px solid var(--sound-linha); padding: 8px; }
.comunicacao-single__categoria { color: var(--sound-ciano); font-weight: 700; font-size: 12px; text-transform: uppercase; }

.comunicacao-lista-anexos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.comunicacao-lista-anexos li {
	display: flex; align-items: center; gap: 8px; background: var(--sound-preto-cartao);
	padding: 10px 14px; border-radius: 10px; font-size: 13px; border: 1px solid var(--sound-linha);
}
.comunicacao-lista-anexos a { color: var(--sound-ciano); font-weight: 700; text-decoration: none; }

.comunicacao-barra-acoes {
	display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0; padding: 16px 0;
	border-top: 1px solid var(--sound-linha); border-bottom: 1px solid var(--sound-linha); position: relative;
}
.comunicacao-botao-acao {
	display: flex; align-items: center; gap: 6px; background: var(--sound-preto-cartao);
	border: 1px solid var(--sound-linha); border-radius: 30px; padding: 9px 16px; font-size: 13px;
	cursor: pointer; color: var(--sound-texto);
}
.comunicacao-botao-acao.ativo { background: var(--sound-gradiente); color: #0a0a0e; border-color: transparent; font-weight: 700; }
.comunicacao-contador { font-weight: 800; }
.comunicacao-menu-partilha-wrap { position: relative; }
.comunicacao-menu-partilha {
	position: absolute; top: 115%; left: 0; background: #15151b; border: 1px solid var(--sound-linha);
	border-radius: 10px; box-shadow: var(--sound-sombra); display: flex; flex-direction: column;
	z-index: 20; min-width: 170px; overflow: hidden;
}
.comunicacao-menu-partilha button { background: none; border: none; text-align: left; padding: 11px 16px; cursor: pointer; font-size: 13px; color: var(--sound-texto); }
.comunicacao-menu-partilha button:hover { background: rgba(255,255,255,0.06); color: var(--sound-ciano); }

.comunicacao-bloco-avaliacao { margin-bottom: 34px; }
.comunicacao-bloco-avaliacao h3, .comunicacao-bloco-comentarios h3 { color: var(--sound-texto); font-size: 16px; }
.comunicacao-estrelas { display: flex; gap: 4px; cursor: pointer; font-size: 30px; color: rgba(255,255,255,0.15); margin-bottom: 10px; }
.comunicacao-estrela.preenchida { color: var(--sound-rosa); }
.comunicacao-distribuicao-avaliacoes { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--sound-texto-suave); max-width: 320px; }
.comunicacao-distribuicao-linha { display: flex; align-items: center; gap: 8px; }
.comunicacao-distribuicao-barra { flex: 1; height: 7px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; }
.comunicacao-distribuicao-barra span { display: block; height: 100%; background: var(--sound-gradiente); }

.comunicacao-form-comentario { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.comunicacao-textarea-comentario {
	padding: 12px; border: 1px solid var(--sound-linha); border-radius: 10px; font-family: inherit;
	resize: vertical; background: var(--sound-preto-cartao); color: var(--sound-texto);
}
.comunicacao-comentario { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--sound-linha); }
.comunicacao-comentario__avatar { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; }
.comunicacao-comentario__cabecalho { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.comunicacao-comentario__autor { color: var(--sound-texto); }
.comunicacao-comentario__data { color: var(--sound-texto-suave); }
.comunicacao-comentario__conteudo { font-size: 13.5px; margin: 0 0 6px; white-space: pre-wrap; color: #d7dae0; }
.comunicacao-comentario__acoes { display: flex; gap: 12px; }
.comunicacao-comentario__respostas { margin-left: 22px; margin-top: 10px; }

/* -------------------- Editor -------------------- */
.comunicacao-editor__titulo-pagina { font-size: 24px; font-weight: 800; color: var(--sound-texto); margin: 0 0 20px; }
.comunicacao-form-editor {
	display: flex; flex-direction: column; gap: 18px;
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha);
	border-radius: var(--sound-radius); padding: 28px 30px;
}
.comunicacao-campo { display: flex; flex-direction: column; gap: 6px; }
.comunicacao-campo label { font-size: 12.5px; font-weight: 700; color: var(--sound-texto-suave); text-transform: uppercase; letter-spacing: 0.03em; }
.comunicacao-campo input[type="text"], .comunicacao-campo input[type="number"], .comunicacao-campo input[type="datetime-local"],
.comunicacao-campo textarea, .comunicacao-campo select {
	padding: 11px 14px; border: 1px solid var(--sound-linha); border-radius: 10px; font-family: inherit; font-size: 14px;
	background: var(--sound-preto-cartao); color: var(--sound-texto);
}
.comunicacao-campo input:focus, .comunicacao-campo select:focus, .comunicacao-campo textarea:focus {
	outline: none; border-color: var(--sound-ciano);
}
.comunicacao-campo small { color: var(--sound-texto-suave); font-size: 11.5px; }
.comunicacao-campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.comunicacao-editor__acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.comunicacao-editor__mensagem { font-size: 13px; font-weight: 600; }
.comunicacao-editor__mensagem.sucesso { color: var(--sound-verde); }
.comunicacao-editor__mensagem.erro { color: var(--sound-vermelho); }
.comunicacao-switch { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; color: var(--sound-texto); }
.comunicacao-configuracoes__subtitulo { color: var(--sound-texto); margin-top: 10px; font-size: 16px; }
.comunicacao-configuracoes__ajuda { color: var(--sound-texto-suave); font-size: 12.5px; margin-top: -6px; }
.comunicacao-form-configuracoes {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha);
	border-radius: var(--sound-radius); padding: 28px 30px;
}

/* O editor TinyMCE (wp_editor) mantém o seu próprio estilo interno claro
   por ser um iframe isolado — envolve-se numa moldura escura consistente
   com o resto do tema sem interferir com o conteúdo do editor em si. */
.comunicacao-form-editor .wp-editor-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--sound-linha); }

/* -------------------- Dashboard -------------------- */
.comunicacao-dashboard__cabecalho { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; }
.comunicacao-dashboard__cabecalho h2 { font-size: 24px; font-weight: 800; margin: 0; color: var(--sound-texto); }
.comunicacao-grelha-indicadores { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 26px; }
.comunicacao-indicador {
	background: var(--sound-preto-cartao); border: 1px solid var(--sound-linha); border-radius: var(--sound-radius);
	padding: 16px 18px; position: relative; overflow: hidden;
}
.comunicacao-indicador::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sound-gradiente); }
.comunicacao-indicador__rotulo { display: block; font-size: 11px; color: var(--sound-texto-suave); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.03em; }
.comunicacao-indicador__valor { font-size: 24px; font-weight: 800; color: var(--sound-texto); }
.comunicacao-dashboard__tabela-wrap { overflow-x: auto; border-radius: var(--sound-radius); border: 1px solid var(--sound-linha); }

/* IMPORTANTE: o !important nas próximas regras é deliberado e específico
   a este bloco — defende a tabela contra estilos globais do tema (muitos
   temas aplicam "table, td { background:#fff; }" para conteúdo de posts,
   o que deixava as linhas do dashboard ilegíveis: texto cinzento-claro
   sobre fundo branco, dentro de uma página de tema escuro). Sem isto, a
   aparência da tabela ficava à mercê de CSS externo que não controlamos. */
.comunicacao-tabela { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent !important; }
.comunicacao-tabela th {
	text-align: left; font-size: 11px; color: var(--sound-texto-suave) !important; padding: 12px 10px;
	background: rgba(255,255,255,0.04) !important; text-transform: uppercase; letter-spacing: 0.03em;
}
.comunicacao-tabela td {
	padding: 12px 10px; border-top: 1px solid var(--sound-linha);
	color: var(--sound-texto) !important; background: rgba(255,255,255,0.015) !important;
}
.comunicacao-tabela tr:hover td { background: rgba(255,255,255,0.05) !important; }

/* Botões de ação da tabela (Ver/Editar/Duplicar/...) — chips compactos,
   com reset explícito da aparência nativa do browser para nunca herdarem
   o estilo de botão por defeito do tema (retângulo branco com contorno). */
.comunicacao-linha-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.comunicacao-link-acao {
	-webkit-appearance: none; appearance: none;
	background: rgba(255,255,255,0.06) !important; border: 1px solid var(--sound-linha) !important;
	color: var(--sound-ciano) !important; cursor: pointer; font-size: 11.5px; font-weight: 700;
	padding: 6px 12px !important; border-radius: 20px; white-space: nowrap;
}
.comunicacao-link-acao:hover { border-color: var(--sound-ciano) !important; background: rgba(53,214,255,0.1) !important; }
.comunicacao-link-acao--perigo { color: var(--sound-vermelho) !important; }
.comunicacao-link-acao--perigo:hover { border-color: var(--sound-vermelho) !important; background: rgba(255,92,122,0.1) !important; }

/* -------------------- Responsividade (mobile-first) -------------------- */
@media (max-width: 780px) {
	.comunicacao-app { padding: 20px 16px 40px; }
	.comunicacao-cabecalho-hero__titulo { font-size: 24px; }
	.comunicacao-grelha-indicadores { grid-template-columns: repeat(2, 1fr); }
	.comunicacao-campo-linha { grid-template-columns: 1fr; }
	.comunicacao-grelha-cards { grid-template-columns: 1fr; }
	.comunicacao-nav-interna { gap: 6px; }
	.comunicacao-nav-interna__link { padding: 8px 12px; font-size: 12.5px; }

	.comunicacao-tabela thead { display: none; }
	.comunicacao-tabela, .comunicacao-tabela tbody, .comunicacao-tabela tr, .comunicacao-tabela td { display: block; width: 100%; }
	.comunicacao-tabela tr { border: 1px solid var(--sound-linha); border-radius: 10px; margin-bottom: 12px; padding: 10px; }
	.comunicacao-tabela td { border-top: none; padding: 5px 6px; }
	.comunicacao-tabela td::before { content: attr(data-rotulo); font-weight: 700; display: inline-block; width: 100px; font-size: 11px; color: var(--sound-texto-suave); }
}