/* feed-mobile.css — SOLO MÓVIL. Si el móvil se rompe, arregla AQUÍ.
 * Candado: @media (max-width:767px) + prefijo html.is-mobile
 */
@media (max-width: 767px) {
html.is-mobile .tt-nav { display: none !important; }
/* Solo el mute de ESQUINA PC (hijo directo del item), NO el del rail */
html.is-mobile .feed-item > .feed-mute-desktop { display: none !important; }
/* Mute del rail: SIEMPRE visible en móvil */
html.is-mobile .feed-actions .feed-mute-btn {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Móvil: rail abajo; perfil igual; resto un poco más grande */
html.is-mobile .feed-actions {
        right: 4px;
        bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
        gap: 9px;
        z-index: 12;
    }
    /* Perfil: se mantiene el tamaño actual */
html.is-mobile .feed-action-perfil-wrap {
        width: 40px;
        height: 40px;
        margin-bottom: 2px;
    }
html.is-mobile .feed-action-perfil-img {
        width: 40px;
        height: 40px;
        border: 2px solid #25f4ee;
        box-shadow: none !important;
    }
html.is-mobile .feed-action-perfil-plus {
        width: 18px;
        height: 18px;
        font-size: 13px;
    }
    /* Like / comentar / guardar / compartir: un poco más grandes */
html.is-mobile .feed-action-icon {
        width: 36px;
        height: 36px;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
html.is-mobile .feed-action-icon svg {
        width: 30px !important;
        height: 30px !important;
        fill: #fff !important;
        filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
    }
/* Compartir del index: mismo trazo outline que perfil (avión papel) */
html.is-mobile .feed-share-btn .feed-action-icon svg,
html.is-mobile .feed-action-icon svg[stroke] {
        fill: none !important;
        stroke: #fff !important;
        stroke-width: 2 !important;
}
    /* Disco giratorio eliminado: en su lugar botón Audio (mute) */
html.is-mobile .feed-action-disc { display: none !important; }
html.is-mobile .feed-mute-btn {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        margin-top: 2px;
    }
html.is-mobile .feed-mute-btn .feed-mute-icon-lg {
        width: 40px !important;
        height: 40px !important;
        background: rgba(0,0,0,.45) !important;
        border: 1.5px solid rgba(255,255,255,.35) !important;
        box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
    }
html.is-mobile .feed-mute-btn .feed-mute-icon-lg svg {
        width: 22px !important;
        height: 22px !important;
        fill: none !important;
        stroke: #fff !important;
        filter: none !important;
    }
html.is-mobile .feed-mute-btn .feed-mute-icon-lg svg polygon { fill: #fff !important; }
html.is-mobile .feed-mute-btn .feed-mute-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        margin-top: 2px;
    }
html.is-mobile .feed-item .feed-actions .feed-action-label {
        font-size: 12px;
        font-weight: 600;
        color: #fff;
    }
html.is-mobile .feed-like-btn[data-liked="1"] .feed-like-icon svg {
        fill: #fe2c55 !important;
        filter: drop-shadow(0 0 3px rgba(254,44,85,.5));
    }
html.is-mobile .feed-meta {
        left: 12px !important;
        right: 58px !important;
        bottom: max(14px, env(safe-area-inset-bottom)) !important;
        max-width: calc(100% - 70px) !important;
        padding: 0 0 8px !important;
        z-index: 16 !important;
        opacity: 1 !important;
    }
html.is-mobile .feed-meta .feed-nombre a {
        font-size: 15px !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-shadow: 0 1px 4px rgba(0,0,0,.65);
    }
html.is-mobile .feed-meta .feed-user { display: none !important; }
/* Móvil: caption SIEMPRE visible (sin + Más / - Menos; eso es solo PC) */
html.is-mobile .feed-meta {
        left: 10px !important;
        right: 58px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        padding-right: 0 !important;
        max-width: none !important;
    }
html.is-mobile .feed-meta-line {
        display: block !important;
        width: 100% !important;
        position: relative !important;
        min-height: 1.3em !important;
        padding-right: 0 !important;
    }
html.is-mobile .feed-meta .cap-text,
html.is-mobile .feed-meta .cap-text.is-open {
        font-size: 13px !important;
        font-weight: 500 !important;
        color: rgba(255,255,255,.95) !important;
        text-shadow: 0 1px 3px rgba(0,0,0,.55);
        line-height: 1.4 !important;
        display: block !important;
        margin-top: 6px !important;
        max-width: 100% !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
html.is-mobile .feed-meta .cap-more,
html.is-mobile .feed-meta.is-cap-open .cap-more {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
html.is-mobile .feed-progress {
    height: 1.5px !important;
    max-height: 1.5px !important;
    padding: 0 !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
html.is-mobile .feed-progress-row {
    display: block !important;
    height: 100% !important;
}
html.is-mobile .feed-progress-track {
    height: 1.5px !important;
    background: transparent !important;
}
html.is-mobile .feed-progress-bar {
    background: rgba(255,255,255,.72) !important;
    box-shadow: none !important;
    max-height: 1.5px !important;
}
html.is-mobile .feed-progress-time,
html.is-mobile .feed-progress-bar::after {
    display: none !important;
}
html.is-mobile .feed-overlay {
        background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.55) 100%) !important;
    }
html.is-mobile .feed-tap-area {
        right: 64px;
        bottom: 120px;
        top: 52px;
        /* Deja pasar el scroll vertical nativo (como el tap del perfil) */
        touch-action: pan-y !important;
    }
    html.is-mobile .feed-item,
    html.is-mobile .tt-slide,
    html.is-mobile .feed-actions,
    html.is-mobile .feed-meta {
        touch-action: pan-y !important;
    }
}

/* Móvil: por defecto sin scroll del documento (feed fixed).
   Con .play-chrome-hide-on se permite scroll “fantasma” para plegar la URL bar de Chrome. */
html.is-mobile,
html.is-mobile body {
  overscroll-behavior-y: none;
  overflow: hidden !important;
  height: 100%;
  height: 100dvh;
}
html.is-mobile.tt-chrome-hide body,
html.is-mobile body {
  min-height: 100dvh;
}

/* Chrome Android: documento un poco más alto + scroll para colapsar barra de direcciones */
html.is-mobile.play-chrome-hide-on,
html.is-mobile.play-chrome-hide-on body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: calc(100dvh + 200px) !important;
  min-height: calc(100vh + 200px) !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch !important;
}
html.is-mobile.play-chrome-hide-on #feed.play-shell,
html.is-mobile.play-chrome-hide-on .play-shell[data-chrome-root="1"] {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  /* visualViewport se actualiza al plegar chrome; scroller remeasure aparte */
}
#play-chrome-spacer {
  display: block !important;
  width: 1px !important;
  height: 220px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* Shell del index en móvil = track flex + snap (1 slide = 1 pantalla) */
html.is-mobile .tt-shell.tt-shell-snap {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  display: flex !important;
  flex-direction: column !important;
  scroll-snap-type: y mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.is-mobile .tt-shell.tt-shell-snap::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
/* Cada slide (video o publicidad) = 100% del shell → pantalla completa, sin “mitad y mitad” */
html.is-mobile .tt-shell.tt-shell-snap .tt-slide-snap,
html.is-mobile .tt-shell.tt-shell-snap .tt-slide {
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  position: relative !important;
  flex: 0 0 100% !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #000 !important;
}
html.is-mobile .tt-shell.tt-shell-snap .tt-slide .feed-item,
html.is-mobile .tt-shell.tt-shell-snap .tt-slide .feed-ad-slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
}
/* Publicidad index móvil = idéntico a perfil (negro full-screen + marco #111) */
html.is-mobile .tt-shell.tt-shell-snap .feed-ad-slide,
html.is-mobile .tt-shell.tt-shell-snap .tt-slide .feed-ad-slide {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0a0a0a !important;
  padding: 20px 16px !important;
}
html.is-mobile .tt-shell.tt-shell-snap .feed-ad-slide .feed-ad-unit,
html.is-mobile .tt-shell.tt-shell-snap .feed-ad-slide .feed-ad-preview {
  width: min(100%, 340px) !important;
  min-height: 260px !important;
  max-height: min(62vh, 460px) !important;
  flex-shrink: 0 !important;
  background: #111 !important;
  border: 2px dashed rgba(255,255,255,.22) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 36px rgba(0,0,0,.55) !important;
  color: rgba(255,255,255,.55) !important;
}

/* ── LOCK móvil: tamaños estables (PC no debe pisarlos) ── */
@media (max-width: 767px) {
  html.is-mobile .feed-actions .feed-action-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  html.is-mobile .feed-actions .feed-action-icon svg {
    width: 30px !important;
    height: 30px !important;
  }
  html.is-mobile .feed-action-perfil-wrap,
  html.is-mobile .feed-action-perfil-img {
    width: 40px !important;
    height: 40px !important;
  }
  html.is-mobile .tt-nav { display: none !important; }
  html.is-mobile .feed-item > .feed-mute-desktop { display: none !important; }
  html.is-mobile .feed-actions .feed-mute-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html.is-mobile .feed-meta .feed-user { display: none !important; }
  html.is-mobile .feed-share-label { font-size: 11px !important; }
  html.is-mobile .tt-slide .feed-item {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
  }
}