/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* T-519: reskin de identidad MyDigitalDisc sobre Canvas 8 — mantiene la
   tipografía de marca ya establecida (Montserrat, cargada por Google Fonts
   en base.html.twig) en vez de la pareja Inter/Playfair Display por
   defecto de Canvas, vía las custom properties documentadas en
   docs/DESIGN-TOKENS.md (nunca tocar style.css/SCSS core). */
:root {
	--cnvs-body-font: "Montserrat", sans-serif;
	--cnvs-secondary-font: "Montserrat", sans-serif;
}

/* El reproductor persistente + tab bar (`#bottom-dock`, fuera de
   `#wrapper`) ya reservan su espacio real sobre `body` con
   `padding-bottom: var(--player-dock-height)` en public/css/base_v5.css
   (T-062, cargado después de esta hoja): no se duplica aquí. */

/* T-520: reskin público de `music` (catálogo, ficha de álbum, perfil de
   artista) — hover sutil de las cards de álbum (`.card.album-card`, ver
   `Module/Music/templates/home.html.twig`/`_album_grid.html.twig`), sin
   tocar `style.css` core ni ninguna clase de `.card` de Bootstrap. */
.album-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.album-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* T-520: restilizado CUIDADOSO del reproductor persistente cross-tenant
   (`Module/Music/templates/_player_dock.html.twig`, público/core/AGENTS.md
   — markup y clases usadas por `assets/player_controller.js` NO se tocan).
   `public/css/base_v5.css` sigue siendo la fuente real de sus estilos
   (cargada DESPUÉS de esta hoja, T-519); aquí solo se añade el color de
   acento de marca (`--cnvs-themecolor`) a los controles `<input
   type="range">` del dock/overlay (barra de progreso y volumen), una
   propiedad (`accent-color`) que base_v5.css no declara — sin conflicto de
   cascada ni riesgo de romper la lógica JS del reproductor. */
.persistent-player-seek,
.persistent-player-volume input[type="range"],
.player-overlay-progress input[type="range"] {
	accent-color: var(--cnvs-themecolor);
}

/* T-533/T-534: "Descubrir" (`/buscar`, `Module/Music/templates/search.html.twig`
   + `_search_*.html.twig`) — chips de filtro (`Todo | Artistas | Álbumes |
   Canciones`), con scroll horizontal en móvil en vez de envolver línea
   (`white-space: nowrap` + `overflow-x: auto`, mismo patrón que cualquier
   barra de chips de catálogo). Avatares de artista más grandes que
   `.artist-photo` (56px, ficha de artista) tanto en el grid de "Artistas"
   como en la card de "mejor resultado". */
.search-chips {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 2px;
}

.search-chip {
	display: inline-block;
	flex-shrink: 0;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--cnvs-bordercolor, #e0e0e0);
	color: inherit;
	text-decoration: none;
	font-size: 0.875rem;
}

.search-chip.active {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #fff;
}

.search-artist-avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.search-top-result-avatar {
	width: 120px;
	height: 120px;
	object-fit: cover;
}

/* T-597: la card de "mejor resultado" (`_search_top_result.html.twig`) ya
   no lleva un `<img>` propio — la imagen es el `background-image` de toda
   la card (patrón Canvas "Overlay Image Card"), así que necesita una altura
   mínima propia para no colapsar al alto del texto. */
.search-top-result-card {
	min-height: 320px;
}

@media (max-width: 767.98px) {
	.search-top-result-card {
		min-height: 220px;
	}
}

/* T-533: en móvil, "Descubrir" pasa de grid de cards a lista compacta
   horizontal (miniatura + título + subtítulo), igual que la lista de
   canciones (que ya es una lista, sin cambios) — scoped a
   `.search-artist-grid`/`.search-album-grid` (ver `_search_artist_grid.
   html.twig`/`_search_album_grid.html.twig`) para no afectar los grids de
   álbum de Home/ficha de artista, que SÍ deben seguir en grid en móvil. */
@media (max-width: 767.98px) {
	.search-artist-grid .row,
	.search-album-grid .row {
		display: block;
	}

	.search-artist-grid [class*="col-"],
	.search-album-grid [class*="col-"] {
		width: 100%;
		max-width: 100%;
		flex: none;
		margin-bottom: 0.75rem;
	}

	.search-artist-grid .col a {
		display: flex !important;
		align-items: center;
		gap: 0.75rem;
		text-align: left;
	}

	.search-artist-grid .search-artist-avatar {
		width: 48px;
		height: 48px;
		margin-bottom: 0 !important;
	}

	.search-album-grid .album-card {
		flex-direction: row;
		align-items: center;
	}

	.search-album-grid .album-card .home-carousel-img {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		border-radius: 4px;
	}

	.search-album-grid .album-card .card-body {
		padding-left: 0.75rem;
	}
}

/* T-534: indicador discreto de carga mientras `search_controller.js` espera
   la respuesta del fetch reactivo (debounce + XHR) — visible solo mientras
   dura la petición (toggle de clase, ver el propio controller). */
.search-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* T-597 introdujo un reveal sutil (opacity+6px, 0.2s) para los items de
   "Descubrir" (`.search-result-item`) sustituyendo el sistema pesado de
   Canvas (`data-animate="fadeInUp"`, que se re-disparaba en cada tecla).
   T-606 (2026-09-01): el propietario pidió quitarlo del todo — incluso esa
   versión sutil ralentizaba la aparición de resultados y "quedaba raro"
   en un listado que cambia constantemente mientras se escribe. Los
   resultados aparecen ahora sin ninguna animación, la clase
   `.search-result-item` queda en el marcado como marcador inerte (sin
   regla CSS asociada) por si se quiere reutilizar en el futuro. */

/* T-543: `.button.button-3d:hover` de style.css pone
   `background-color: var(--cnvs-btn-color)` (claro para `button-light`,
   ver `--cnvs-btn-color-light`), pero `.button:hover` (menos específico,
   pero es la única regla que toca `color` en hover) fija
   `color: #fff` — texto blanco sobre fondo claro, ilegible. Único uso de
   `button-3d button-light` en el sitio (`templates/public/profile.html.twig`,
   botón "Ir al panel de administración" sobre fondo `bg-color`). Se
   restaura el contraste manteniendo `button-light` (en vez de cambiar a
   `button-dark`, que perdería el contraste con el fondo verde en reposo). */
.button.button-3d.button-light:hover {
	color: var(--cnvs-btn-color-dark);
}


/* Fase 50 (follow-up): Canvas 8 NO define `.nomargin` (clase heredada de
   Canvas 7) y todas las plantillas públicas la usan en su primera `.section`
   esperando que anule el margen superior. Sin esta regla, cada página empieza
   con `--cnvs-content-padding` (80px) + margen de sección (64px) + padding de
   sección (64px) ≈ 208px de hueco bajo la cabecera. Se restaura el
   significado original de `.nomargin` y se reduce el padding del
   `.content-wrap` a 40px: páginas que arrancan con `.section` → ~104px
   hasta el contenido; páginas que arrancan con `.container.py-4` → ~64px. */
.content-wrap {
	--cnvs-content-padding: 2.5rem;
}
.section.nomargin {
	margin: 0 !important;
}

/* Rediseño en tarjetas del widget "Próximos conciertos"
   (`Module/Ticketing/templates/landing_widget.html.twig`, petición del
   propietario 2026-09-03). Mismo criterio de hover que `.album-card` de
   arriba (T-520): sutil, sin animación pesada. */
.upcoming-show-card {
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.upcoming-show-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.upcoming-show-photo-wrap {
	position: relative;
	width: 72px;
	height: 72px;
}
.upcoming-show-photo {
	width: 72px;
	height: 72px;
	object-fit: cover;
	display: block;
}
.upcoming-show-photo-placeholder {
	background: linear-gradient(135deg, var(--cnvs-themecolor, #e0e0e0) 0%, rgba(0, 0, 0, 0.15) 100%);
}
.upcoming-show-date-badge {
	position: absolute;
	top: -8px;
	left: -8px;
	background: #fff;
	color: #212529;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	padding: 2px 6px;
	text-align: center;
	line-height: 1.1;
	min-width: 36px;
}
.upcoming-show-date-badge strong {
	display: block;
	font-size: 0.95rem;
}
.upcoming-show-date-badge small {
	display: block;
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}