@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
 * RESPONSIVE — OnlyBeats
 *
 * Breakpoints:
 *   ≤ 479px         Celular vertical
 *   480 – 767px     Celular horizontal
 *   768 – 991px     Tablet vertical
 *   992 – 1199px    Tablet horizontal / Desktop HD
 *   1200 – 1399px   Desktop
 *   ≥ 1400px        Desktop grande
 * ═══════════════════════════════════════════════════════════════ */

.ob-mobile-only { display: none; }

.ob-menu-drawer { --size: 280px; }
.ob-menu-item { width: 100%; }
.ob-menu-item::part(base) { justify-content: flex-start; width: 100%; }
.ob-menu-item.active::part(base) {
	background: var(--wa-color-brand-fill-quiet);
	color: var(--wa-color-brand-on-quiet);
}

.ob-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}
.ob-table-scroll > table { min-width: 640px; }

.ob-genre-list .wa-split > span:first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fullstory-tabs::part(body) { min-width: 0; }

/* Specs full-width del fullstory: ocultos por defecto, solo visibles en
   tablet vertical (768–991), donde reemplazan a los de la columna. */
.fs-specs-row { display: none; }

/* ══════════════════════════════════════════════════════════════
 * ≤ 767px — Celular (vertical + horizontal)
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	.hide-tablet { display: none; }

	.shortstory-grid { grid-template-columns: minmax(0, 1fr); }

	.ob-topusers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wa-space-s); }
	.ob-topuser-card { --spacing: var(--wa-space-s); }
	.ob-topuser-rank { font-size: var(--wa-font-size-2xl); }

	.ob-desktop-only { display: none; }
	.ob-mobile-only { display: inline-flex; }

	.ob-search-form { display: none; }
	.ob-header-inner { flex-wrap: nowrap; }
	.ob-logo { font-size: var(--wa-font-size-m); }
	.ob-account-label { display: none; }

	.ob-titles h1, .ob-titles h2, .ob-search-hero__title { font-size: var(--wa-font-size-l); }

	.rail { display: none; }

	.shell {
    gap: var(--wa-space-m);
		margin: 0 var(--wa-space-m);
		padding: var(--wa-space-m) 0;
		grid-template-columns: minmax(0, 1fr);
	}

	.ob-footer {
		padding: var(--wa-space-l);
	}

	.ob-footer-bottom {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
	
	.ob-footer-bottom > * {
		justify-content: center;
		flex-wrap: wrap;
	}

	#ob-login-dialog { --width: min(440px, 94vw); }
	.ob-login-brand { display: none; }
	.ob-login-modal { grid-template-columns: minmax(0, 1fr); }
	.ob-login-form-panel { padding: var(--wa-space-xl) var(--wa-space-l); min-width: 0; }
	.ob-btn-provider { min-width: 0; }

	.fullstory-layout { flex-direction: column; gap: var(--wa-space-l); }

	.fullstory-image-container { position: relative; top: auto; }
	.info-container { gap: var(--wa-space-m); }
	.info-container .wa-cluster.wa-font-size-s.muted span { display: none; }
	.meta-wrapper { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
	.meta-wrapper .meta-content {
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: var(--wa-space-xs);
	}
	.meta-wrapper .meta-content .meta-icon { font-size: var(--wa-font-size-m); }

	.wa-tracklist-table tbody td { padding: var(--wa-space-s); }
	.wa-tracklist-table thead th { padding: 0 var(--wa-space-s) var(--wa-space-xs); }
	.wa-track-title { font-size: var(--wa-font-size-s); }
	.track-search { min-width: 0; width: 100%; }

	.wa-tracklist-table { min-width: 0; }
	.wa-tracklist-table th.wa-track-bpm,
	.wa-tracklist-table td.wa-track-bpm,
	.wa-tracklist-table th.wa-track-duration,
	.wa-tracklist-table td.wa-track-duration,
	.wa-tracklist-table th.wa-track-key,
	.wa-tracklist-table td.wa-track-key,
	.wa-tracklist-table th.wa-track-genre,
	.wa-tracklist-table td.wa-track-genre,
	.wa-tracklist-table th.wa-track-label,
	.wa-tracklist-table td.wa-track-label { display: none; }

	.ob-player__inner { padding: var(--wa-space-xs) var(--wa-space-m); gap: var(--wa-space-s); }
	.ob-player__progress,
	.ob-player__volume { display: none; }
	.ob-player__cover { width: 40px; height: 40px; }
	body:has(.ob-player.is-visible) { padding-block-end: 76px; }

	.ob-social__cover { height: 190px; }
	.ob-guest-callout,
	.ob-premium-callout { --spacing: var(--wa-space-l); }
	.ob-guest-callout__icon,
	.ob-guest-callout__perks,
	.ob-premium-callout__icon,
	.ob-premium-callout__perks,
	.ob-stats-callout__icon,
	wa-breadcrumb,
	.ob-terms-toc { display: none; }
	.ob-terms-body.wa-stack.wa-gap-2xl,
	.ob-terms.wa-stack.wa-gap-2xl { gap: var(--wa-space-l); }
	.ob-terms-hero p.wa-body-l { font-size: var(--wa-font-size-s); }
	.ob-guest-cta,
	.ob-premium-cta { width: 100%; }

	.ob-feedback__row { grid-template-columns: 1fr; }
	.ob-feedback__channels { grid-template-columns: 1fr; }
	.ob-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.ob-chart-scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}
	.ob-chart-scroll > div { min-width: 560px; }

	.fullstory-layout > .fullstory-image-container {
		max-width: 100%;
		min-width: 100%;
		flex-basis: auto;
	}
	.shell > .wa-stack.wa-gap-2xl { gap: var(--wa-space-xl); }
	.action-buttons span, .form_skin_change wa-icon { display: none; }

}

/* ══════════════════════════════════════════════════════════════
 * ≤ 479px — Celular vertical
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
	.meta-wrapper { grid-template-columns: repeat(2, 1fr); }
	.ob-player__track { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════
 * ≥ 768px — Tablet + Desktop (oculta la barra de acciones móvil)
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
	.hide-desktop { display: none; }
}

/* ══════════════════════════════════════════════════════════════
 * ≤ 1199px — Celular + Tablet (vertical y horizontal)
 *   El ordenamiento {sort} solo se muestra en desktop (≥ 1200px).
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
	.sort-items-mobile > form { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
 * ≤ 991px — Celular + Tablet vertical (banners apilados)
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
	.ob-guest-callout > .wa-cluster,
	.ob-premium-callout > .wa-cluster {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wa-space-m);
	}
}

/* ══════════════════════════════════════════════════════════════
 * 768 – 991px — Tablet vertical
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991px) {
	.ob-topusers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.shortstory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wa-gap-2xl.ob-fullstory { gap: var(--wa-space-l); }

	/* (1) campo de búsqueda más estrecho */
	.ob-search-form { width: 250px; }
	.ob-search-form__kbd { display: none; }

	/* (3) aire lateral igual que en celular */
	.shell { margin-inline: var(--wa-space-m); }

	/* (4 + 11) bloques de estadísticas a 2 por fila */
	.ob-stats-grid { grid-template-columns: repeat(2, 1fr); }

	/* (5) footer: copyright / links / créditos centrados y apilados */
	.ob-footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
	.ob-footer-bottom > * { justify-content: center; flex-wrap: wrap; }

	/* (8 + 9) ocultar asides de índice */
	.ob-terms-toc,
	.ob-reg__aside { display: none; }

	/* (6) fullstory tablet vertical: imagen a la izquierda; a la derecha
	   badges, título, metas, tags y los 3 bloques (canciones/calidad/tamaño).
	   La barra de descargas completa —con textos— va en una línea aparte
	   full-width debajo (se reutiliza la barra externa, no la del column). */
	.fullstory-layout { flex-direction: row; align-items: stretch; gap: var(--wa-space-l); }
	.fullstory-layout > .fullstory-image-container { flex: 0 1 300px; min-width: 240px; max-width: 300px; }
	/* la columna derecha (badges/título/metas/tags) centrada en vertical */
	.info-container { justify-content: center; }
	/* specs (canciones/calidad/tamaño) salen de la columna y van full-width abajo */
	.fs-specs-col { display: none; }
	.meta-wrapper.fs-specs-row { display: grid; grid-template-columns: repeat(3, 1fr); }
	.fs-dl-desktop { display: none; }   /* ocultar barra de descargas dentro de la columna */
	.fs-dl-mobile  { display: flex; }   /* mostrar barra full-width (versión con textos) */

	.info-container { gap: var(--wa-space-m); }
	.info-container .wa-cluster.wa-font-size-s.muted span { display: none; }
	.info-container .wa-cluster.wa-justify-content-space-between wa-button span { display: none; }
	.meta-content { gap: var(--wa-space-s); padding: var(--wa-space-s); }
	.meta-content .meta-icon { width: 50px; }
	.meta-wrapper { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
	.meta-wrapper .meta-content .meta-icon { font-size: var(--wa-font-size-m); }
	.meta-wrapper .meta-content {
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.meta-wrapper.meta-tablet .meta-content {
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
	}
	.ob-guest-cta,
	.ob-premium-cta { align-self: flex-start; }

	/* Tracklist: ancho fijo de la columna de la canción (th + td) para que no
	   se comprima en la tablet real; el resto scrollea horizontal si hace falta. */
	.wa-tracklist-table .wa-track-song { width: 300px; min-width: 300px; }
}

/* ══════════════════════════════════════════════════════════════
 * 992 – 1199px — Tablet horizontal / Desktop HD
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1199px) {
	/* (1) aire lateral también en tablet horizontal */
	.shell { margin-inline: var(--wa-space-m); }

	.fullstory-layout { gap: var(--wa-space-m); }
	.info-container { gap: var(--wa-space-m); }
	.action-buttons wa-button span { display: none; }
	.info-container .wa-cluster.wa-font-size-s.muted span { display: none; }
	.info-container .wa-cluster.wa-justify-content-space-between wa-button span { display: none; }
	.meta-content.wa-gap-m { gap: var(--wa-space-xs); }
	.meta-wrapper { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
	.meta-wrapper .meta-content .meta-icon { font-size: var(--wa-font-size-m); }
	.meta-wrapper .meta-content {
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.meta-wrapper:not(.meta-tablet) .meta-content { flex-direction: column; }
	.meta-wrapper:not(.meta-tablet) .meta-content .wa-stack { align-items: center; }
	.meta-wrapper:not(.meta-tablet) .meta-content strong { white-space: nowrap; }
	.meta-wrapper.meta-tablet .meta-content {
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
	}
	.ob-guest-cta,
	.ob-premium-cta { flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════
 * 1200 – 1399px — Desktop
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) and (max-width: 1399px) {
	.fullstory-layout { gap: var(--wa-space-l); }
	.info-container { gap: var(--wa-space-l); }
	.meta-content { gap: var(--wa-space-m); padding: var(--wa-space-m); }
	.meta-content .meta-icon { width: 56px; }
	.meta-wrapper .meta-content .meta-icon { font-size: var(--wa-font-size-l); }
	.info-container .wa-cluster.wa-font-size-s.muted span { display: none; }
	.wa-cluster.hide-tablet .wa-gap-s wa-button span { display: none; }
	.meta-wrapper.meta-tablet .meta-content {
		justify-content: flex-start;
		align-items: flex-start;
		text-align: left;
	}
}

/* ══════════════════════════════════════════════════════════════
 * ≥ 1400px — Desktop grande
 * ══════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
	.fullstory-layout { align-items: stretch; }
	.info-container { height: 100%; display: flex; flex-direction: column; }
	.fullstory-layout .info-container > .wa-cluster.wa-justify-content-space-between { margin-top: auto; }
}