/* =========================================================
   MyLovita — custom overrides del sitio público.
   Se carga DESPUÉS de style.css para poder sobrescribir.
   ========================================================= */

/* Evita scroll horizontal causado por elementos con -left-full
   (como el background del NewsFilterBar que se extiende al infinito).
   La plantilla yt1 asume body overflow-x: hidden. */
html, body {
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   Botones de navegación del slider de playlists.
   Visibilidad fuerte: círculos grandes, borde grueso, sombra.
   --------------------------------------------------------- */
.mlv-playlist-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: 4px solid #2E174F;
    background: #ffffff;
    color: #2E174F;
    border-radius: 9999px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
}

.mlv-playlist-nav:hover {
    background: #7E58C2;
    border-color: #7E58C2;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(126, 88, 194, 0.35);
}

.mlv-playlist-nav:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.mlv-playlist-nav:focus-visible {
    outline: 3px solid #7E58C2;
    outline-offset: 3px;
}

.mlv-playlist-nav svg {
    width: 26px;
    height: 26px;
    fill: currentColor;
}

.mlv-playlist-nav-group {
    display: inline-flex;
    gap: 16px;
}

/* Dark mode: invertimos base para que contrasten con fondo oscuro. */
html.dark .mlv-playlist-nav {
    background: #ffffff;
    border-color: #ffffff;
    color: #2E174F;
}

html.dark .mlv-playlist-nav:hover {
    background: #7E58C2;
    border-color: #7E58C2;
    color: #ffffff;
}

/* ---------------------------------------------------------
   Link "Ver todas las playlists" con icono circular a la izquierda.
   Las clases h-[22px]/w-[9px] de Tailwind JIT NO están compiladas,
   por eso el icono colapsaba. Aquí lo armamos con CSS propio.
   --------------------------------------------------------- */
.mlv-browse-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2E174F;
    text-decoration: none;
    transition: color .2s ease;
}

.mlv-browse-all:hover {
    color: #7E58C2;
}

.mlv-browse-all:hover .mlv-browse-all-icon {
    background: #7E58C2;
    border-color: #7E58C2;
    color: #ffffff;
}

.mlv-browse-all-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 2px solid #2E174F;
    border-radius: 9999px;
    color: #2E174F;
    background: transparent;
    flex-shrink: 0;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mlv-browse-all-icon svg {
    width: 12px;
    height: 12px;
    fill: currentColor;
}

@media (min-width: 768px) {
    .mlv-browse-all {
        font-size: 14px;
    }
}

html.dark .mlv-browse-all {
    color: #ffffff;
}

html.dark .mlv-browse-all-icon {
    border-color: #ffffff;
    color: #ffffff;
}

html.dark .mlv-browse-all:hover,
html.dark .mlv-browse-all:hover .mlv-browse-all-icon {
    color: #ffffff;
}

/* ---------------------------------------------------------
   Sección "Subscribers Live Count" con mapa de fondo.
   Forzamos dark theme siempre (como en el demo) sin depender
   de la clase .dark de Tailwind, que el CSS precompilado no
   activa por clase de ancestro.
   --------------------------------------------------------- */
.mlv-subs-section {
    background-color: #211832;          /* gray-900 */
    color: #ffffff;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

.mlv-subs-container {
    padding-top: 56px;
    padding-bottom: 56px;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

.mlv-subs-stage {
    position: relative;
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1000 / 560;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.mlv-subs-map {
    position: absolute;
    top: 4%;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1000 / 532;
    z-index: -10;
    pointer-events: none;
    user-select: none;
}

.mlv-subs-heading {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #ffffff;
}

.mlv-subs-title {
    font-size: clamp(1.5rem, 4.5vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0;
}

.mlv-subs-title .accent {
    color: #7E58C2;
}

.mlv-subs-eyebrow {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #ffffff;
    opacity: 0.85;
}

.mlv-subs-count {
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
    font-size: clamp(3rem, 12vw, 130px);
}

.mlv-subs-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #ffffff;
}

.mlv-subs-info img {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    flex-shrink: 0;
    object-fit: cover;
}

.mlv-subs-handle {
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.05rem;
    color: #ffffff;
}

.mlv-subs-handle .at {
    color: #7E58C2;
}

.mlv-subs-on {
    font-size: 0.85rem;
    color: #ffffff;
    opacity: 0.8;
    line-height: 1;
    margin-top: 2px;
}

@media (min-width: 768px) {
    .mlv-subs-container { padding-top: 96px; padding-bottom: 96px; }
    .mlv-subs-eyebrow { font-size: 1rem; }
    .mlv-subs-handle { font-size: 1.2rem; }
    .mlv-subs-info img { width: 52px; height: 52px; }
}

@media (min-width: 1024px) {
    .mlv-subs-container { padding-top: 128px; padding-bottom: 128px; }
}

/* ---------------------------------------------------------
   Footer — bloque de Subs Live Count con mapa de fondo.
   Réplica del demo yt1 con mapa de dots como background.
   --------------------------------------------------------- */
.mlv-footer-subs {
    position: relative;
    width: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mlv-footer-subs__map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.mlv-footer-subs__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.mlv-footer-subs__count {
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 10px;
}

.mlv-footer-subs__handle {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.01em;
}

.mlv-footer-subs__at {
    color: #7E58C2;
}