/*======================================================================*\
|| #################################################################### ||
|| # Package - Joomla Template based on YJSimpleGrid Framework          ||
|| # Copyright (C) 2010  Youjoomla.com. All Rights Reserved.            ||
|| # license - PHP files are licensed under  GNU/GPL V2                 ||
|| # license - CSS  - JS - IMAGE files  are Copyrighted material        ||
|| # bound by Proprietary License of Youjoomla.com                      ||
|| # for more information visit http://www.youjoomla.com/license.html   ||
|| # Redistribution and  modification of this software                  ||
|| # is bounded by its licenses                                         ||
|| # websites - http://www.youjoomla.com | http://www.yjsimplegrid.com  ||
|| #################################################################### ||
\*======================================================================*/
 
@media screen and (max-width: 980px) {
/* do something */
}

.yjsg-morearticles h3 {
    display: none; /* Esconde o texto original "Mais artigos..." do menu Naal 2025 com as musicas em Features */
    position: relative;
}

/* ===================================================================
   Estilos para Partitura Coral - Template Unificado
   =================================================================== */

/* --- 1. Variáveis de Cor (Root) --- */
:root {
	--cor-soprano: #fff9cd;
	--cor-contralto: #f8d7da;
	--cor-tenor: #cfe2ff;
	--cor-mulheres: #ffe7cd;
	--cor-unissono: #e8d5f2;

	--cor-border-soprano: #ffc107;
	--cor-border-contralto: #dc3545;
	--cor-border-tenor: #0d6efd;
	--cor-border-mulheres: #db6e14;
	--cor-border-unissono: #7b1fa2;
}

/* --- 2. Base da Linha da Letra --- */
.choir-voice {
	padding: 8px 12px;
	border-radius: 6px;
	/* Raio padrão para vozes simples */
	display: inline-block;
	margin: 3px 2px;
	transition: all 0.3s ease;
	position: relative;
	line-height: 1.6;
}

/* --- 3. Estilos de Vozes (Cor Sólida) --- */
.unissono {
	color: #4a148c;
	background-color: var(--cor-unissono);
	border-left: 5px solid var(--cor-border-unissono);
}

.soprano {
	color: #664d03;
	background-color: var(--cor-soprano);
	border-left: 5px solid var(--cor-border-soprano);
}

.contralto {
	color: #842029;
	background-color: var(--cor-contralto);
	border-left: 5px solid var(--cor-border-contralto);
}

.tenor {
	color: #084298;
	background-color: var(--cor-tenor);
	border-left: 5px solid var(--cor-border-tenor);
}

.mulheres {
	background-color: var(--cor-mulheres);
	border-left: 5px solid var(--cor-border-mulheres);
	color: #2b2a2a;
}

/* --- 4. Combinações (Borda Gradiente - Sem border-radius) --- */
/* Estas classes usam border-image, então o border-radius foi removido */

.soprano-contralto-tenor {
	color: #2b2a2a;
	background: linear-gradient(to right, var(--cor-soprano) 0%, var(--cor-contralto) 50%, var(--cor-tenor) 100%);
	border-left-width: 5px;
	border-image-slice: 1;
	border-left-color: transparent;
	border-left-style: solid;
	/* border-radius: 8px; REMOVIDO CONFORME SOLICITADO */
	border-image-source: linear-gradient(to bottom,
			var(--cor-border-soprano) 33.3%,
			var(--cor-border-contralto) 33.3%,
			var(--cor-border-contralto) 66.6%,
			var(--cor-border-tenor) 66.6%);
}

.mulheres-tenor {
	color: #2b2a2a;
	background: linear-gradient(to right, var(--cor-mulheres) 0%, var(--cor-tenor) 100%);
	border-left-width: 5px;
	border-image-slice: 1;
	border-left-color: transparent;
	border-left-style: solid;
	border-image-source: linear-gradient(to bottom,
			var(--cor-border-mulheres) 50%,
			var(--cor-border-tenor) 50%);
}

.soprano-unissono {
	color: #2b2a2a;
	background: linear-gradient(to right, var(--cor-soprano) 0%, var(--cor-unissono) 100%);
	border-left-width: 5px;
	border-image-slice: 1;
	border-left-color: transparent;
	border-left-style: solid;
	border-image-source: linear-gradient(to bottom,
			var(--cor-border-soprano) 50%,
			var(--cor-border-unissono) 50%);
}

.contralto-unissono {
	color: #2b2a2a;
	background: linear-gradient(to right, var(--cor-contralto) 0%, var(--cor-unissono) 100%);
	border-left-width: 5px;
	border-image-slice: 1;
	border-left-color: transparent;
	border-left-style: solid;
	border-image-source: linear-gradient(to bottom,
			var(--cor-border-contralto) 50%,
			var(--cor-border-unissono) 50%);
}

.soprano-contralto {
	color: #2c3e50;
	background: linear-gradient(to right, var(--cor-soprano) 0%, var(--cor-contralto) 100%);
	border-left-width: 5px;
	border-image-slice: 1;
	border-left-color: transparent;
	border-left-style: solid;
	border-image-source: linear-gradient(to bottom,
			var(--cor-border-soprano) 50%,
			var(--cor-border-contralto) 50%);
}

/* Combinações (Borda Simples - mantidas como estavam) */
.soprano-tenor {
	background: linear-gradient(to right, #fff3cd 0%, #fce4e4 50%, #f8d7da 100%);
	border-left: 5px solid #ff6f00;
	color: #2c3e50;
	padding-right: 35px;
	border-radius: 6px;
	/* Mantém o raio, pois não usa border-image */
}

.contralto-tenor {
	background: linear-gradient(to right, #cfe2ff 0%, #e8ddf5 50%, #f8d7da 100%);
	border-left: 5px solid #00897b;
	color: #2c3e50;
	padding-right: 35px;
	border-radius: 6px;
	/* Mantém o raio, pois não usa border-image */
}

/* --- 5. Badges (::after) - Otimizado --- */
.soprano-contralto::after,
.soprano-tenor::after,
.contralto-tenor::after,
.femininas::after,
.mulheres-tenor::after,
.soprano-contralto-tenor::after,
.mulheres::after {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.08);
	/* Fundo Padrão */
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	/* Adicionado conteúdo padrão */
}

/* Override de fundo específico */
.mulheres::after {
	background: rgba(156, 39, 176, 0.15);
}

/* --- 6. Legenda e Modo de Foco --- */
.choir-voice:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.choir-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 20px 0;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 10px;
	border: 1px solid #e9ecef;
}

.choir-legend-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: white;
	border-radius: 6px;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.choir-legend-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.choir-legend-item.active {
	border-color: #2c3e50;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	background: #e8f4f8;
}

.choir-legend-color {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	flex-shrink: 0;
}

.split-2 {
	background: linear-gradient(to right, var(--color1) 0%, var(--color2) 100%);
}

body.choir-focus-mode .choir-voice:not(.focused) {
	opacity: 0.3;
	filter: grayscale(60%) blur(0.5px);
	transform: scale(0.98);
}

body.choir-focus-mode .choir-voice.focused {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transform: scale(1.02);
}

/* --- 7. Layout do Artigo (Metadados e Títulos) --- */
.section-title {
	font-size: 1.4em;
	font-weight: 700;
	color: #333;
	border-bottom: 2px solid #f0f0f0;
	padding-bottom: 8px;
	margin-top: 40px;
	margin-bottom: 15px;
}

.subsection-title {
	font-size: 1em;
	color: #000000;
	font-weight: bold;
}

p.subsection-p {
	margin-top: 20px;
	margin-bottom: 5px;
}

.music-metadata {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 24px;
}

.meta-item {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.meta-label {
	font-size: 0.8em;
	font-weight: 600;
	color: #6c757d;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.meta-value {
	font-size: 1.1em;
	font-weight: 500;
	color: #212529;
}


/* --- 8. Media Queries --- */
@media (max-width: 768px) {
	.choir-legend {
		grid-template-columns: 1fr;
	}
}