/* ============================================================
   Bloque "Sesión DJ" de la portada (entre "Próximo concierto" y
   el Corralómetro). Hereda a propósito el sistema visual de la
   barra de pulso (.ecc-pulse en site.css): mismo fondo, mismo
   ritmo de padding (12px/24px), mismo ancho interior (1180px),
   misma familia tipográfica — para no parecer un añadido.
   Solo se carga en la portada (ver includes/dj-session.php).
   ============================================================ */

.ecc-djs {
	background: var(--ecc-hueso);
	/* Misma textura y paleta que la franja de horario (.ecc-horario-bar en
	   site.css: textura-muro-pared con velo claro, texto noche/hiedra/#5a5142),
	   petición del cliente 2026-08-02. El modo --live la resetea solo (su
	   shorthand background va más abajo en este archivo). */
	background-image: linear-gradient(rgba(239, 230, 216, .85), rgba(239, 230, 216, .85)), url('../img/textura-muro-pared.jpg');
	background-size: cover;
	background-position: center;
	padding: 12px 24px;
	/* Los bloques vecinos viven dentro de contenedores de Elementor con
	   padding:10px; este bloque se inyecta FUERA de todo contenedor, así que
	   replica ese mismo margen para que su fondo mida igual que los demás. */
	margin: 10px;
}

.ecc-djs__inner {
	max-width: 1180px;
	margin: 0 auto;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.ecc-djs__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ecc-hiedra); /* mismo verde que el punto "abierto" del horario */
	margin-top: 6px;
	animation: ecc-djs-pulso 2.6s ease-in-out infinite;
}

@keyframes ecc-djs-pulso {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

.ecc-djs__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.ecc-djs__label {
	margin: 0;
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	letter-spacing: .08em;
	color: var(--ecc-noche); /* como .ecc-horario-bar__label */
}

.ecc-djs__name {
	color: var(--ecc-hiedra); /* como el <b> del horario */
	font-weight: 700;
}

.ecc-djs__dias {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 10px;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16.5px;
	letter-spacing: .04em;
	color: var(--ecc-noche);
}

.ecc-djs__sep {
	color: rgba(27, 23, 18, .45);
	font-weight: 400;
}

.ecc-djs__genero {
	margin: 0;
	font-family: 'Space Mono', monospace;
	font-size: 13px;
	letter-spacing: .04em;
	color: #5a5142; /* como .ecc-horario-bar__today */
	overflow-wrap: anywhere; /* un género de 100 caracteres nunca desborda en móvil */
}

/* Modo EN DIRECTO: durante la actuación (de la hora fijada en la app al
   cierre del bar de ese día) el bloque entero pasa a ROJO INTENSO (petición
   del cliente 2026-08-02; antes terracota #C1663B) con texto negro, espejo
   del patrón .ecc-pulse--live de la barra de pulso. #E53935 elegido porque
   con negro da 4,97:1 (AA pide 4,5) — un rojo más oscuro lo incumpliría. */
.ecc-djs--live {
	background: #E53935;
}
.ecc-djs--live .ecc-djs__label,
.ecc-djs--live .ecc-djs__name,
.ecc-djs--live .ecc-djs__dias { color: #000; }
.ecc-djs--live .ecc-djs__label { font-weight: 700; }
.ecc-djs--live .ecc-djs__genero { color: rgba(0, 0, 0, .95); }
.ecc-djs--live .ecc-djs__sep { color: rgba(0, 0, 0, .55); }
.ecc-djs--live .ecc-djs__dot {
	background: #000;
	animation-duration: 1.2s; /* pulso más vivo durante la actuación */
}

/* Variante con estilos DISTINTOS por día: cada día forma un grupo
   (día+hora en negrita y su género debajo), en fila en escritorio. */
.ecc-djs__grupos {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
}

.ecc-djs__grupo { min-width: 0; }

@media (max-width: 600px) {
	.ecc-djs { padding: 12px 16px; }
	.ecc-djs__dias { flex-direction: column; gap: 2px; }
	.ecc-djs__grupos { flex-direction: column; gap: 8px; }
	.ecc-djs__sep { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ecc-djs__dot { animation: none; }
}

/* B2B (2026-08-09): "BLACK CARAMEL B2B <INVITADO>" puede no caber en una línea
   en móvil. Se deja envolver — nunca truncar, que ocultaría al invitado. */
.ecc-djs__name {
	overflow-wrap: anywhere;
}

/* Cuando cada día lleva un nombre distinto (uno con invitado y otro no), el
   nombre baja a cada grupo y la cabecera se queda solo con "SESIÓN DJ". */
.ecc-djs__label--grupo {
	margin-bottom: 2px;
}