/* TOPSTREAMING MOBILE V3 SOFT
   Ajuste fino: menos glow, fondo más oscuro, tarjetas más compactas. */

.vivo-mobile-refresh,
.mobile-cta-icon,
.mobile-rating-face {
    display: none;
}

/* Seguridad de tamaño para el icono EN VIVO en cualquier vista */
.live-badge-signal svg {
    display: block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width:700px) {

html:has(body[data-page="vivo"].vivo-live-active),
body[data-page="vivo"].vivo-live-active {
    height: auto !important;
    min-height: 100% !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

body[data-page="vivo"].vivo-live-active {
    background: #03050a;
    padding-bottom: 0;
}

body[data-page="vivo"].vivo-live-active main,
body[data-page="vivo"].vivo-live-active .vivo-page,
body[data-page="vivo"].vivo-live-active .vivo-dashboard {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body[data-page="vivo"].vivo-live-active .vivo-page {
    min-height: 100svh !important;
    padding: 18px 15px calc(108px + env(safe-area-inset-bottom)) !important;
    background:
      radial-gradient(ellipse 34% 16% at -4% 10%,
        rgba(255,88,18,.22), transparent 88%),
      radial-gradient(ellipse 30% 14% at 104% 13%,
        rgba(255,88,18,.16), transparent 88%),
      radial-gradient(ellipse 60% 20% at 50% 36%,
        rgba(9,32,64,.16), transparent 86%),

      /* mobile-bg-ambient-v4: naranja medio derecho */
      radial-gradient(ellipse 54% 24% at 108% 61%,
        rgba(255,94,18,.20), transparent 90%),

      /* naranja inferior izquierdo */
      radial-gradient(ellipse 58% 26% at -12% 87%,
        rgba(255,89,12,.21), transparent 91%),

      linear-gradient(160deg,
        #05070c 0%,
        #04070d 55%,
        #08090d 100%) !important;
}

body[data-page="vivo"].vivo-live-active .vivo-dashboard {
    max-width: 520px;
    width: 100%;
    margin: auto;
    padding: 0 !important;
}

/* ENCABEZADO */
body[data-page="vivo"].vivo-live-active .live-viewer-heading {
    display: grid;
    grid-template-columns: max-content minmax(0,1fr);
    grid-template-rows: 60px auto auto;
    column-gap: 0;
    row-gap: 8px;
    align-items: center;
    margin: 0 0 13px;
}

body[data-page="vivo"].vivo-live-active .live-viewer-brand {
    display: block !important;
    grid-column: 1;
    grid-row: 1;
    width: 72px;
    margin-left: 10px;
}

body[data-page="vivo"].vivo-live-active .live-viewer-brand img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.72));
}

body[data-page="vivo"].vivo-live-active .vivo-mobile-refresh {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border: 1px solid #ff8726;
    border-radius: 10px;
    padding: 8px 14px;

    background: linear-gradient(110deg,#ff4800,#ff6c00 55%,#ff5000);
    color: #fff;
    font: 760 13px Inter,system-ui,sans-serif;

    box-shadow:
      0 0 7px rgba(255,96,24,.33),
      0 6px 18px rgba(255,78,13,.18);

    cursor: pointer;
}

.vivo-mobile-refresh svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vivo-mobile-refresh.is-updating {
    opacity: .72;
    cursor: wait;
}

body[data-page="vivo"].vivo-live-active .live-viewer-heading-main,
body[data-page="vivo"].vivo-live-active .live-viewer-title-row {
    display: contents;
}

body[data-page="vivo"].vivo-live-active .live-viewer-title-row h1 {
    grid-column: 1/-1;
    grid-row: 2;
    margin: 0;
    padding-left: 10px;
    color: #fff;
    font-size: clamp(21px,5.3vw,28px);
    font-weight: 830;
    line-height: 1.18;
    letter-spacing: -.042em;
    text-shadow: 0 2px 8px rgba(0,0,0,.52);
}

/* EN VIVO */
body[data-page="vivo"].vivo-live-active .live-badge {
    grid-column: 1;
    grid-row: 3;

    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: 8px;
    border: 1px solid #ff4a5e;
    padding: 8px 12px;

    background: linear-gradient(120deg,#ff1730,#ff0830 55%,#ff2430);
    box-shadow:
      0 0 7px rgba(255,30,55,.24);

    font-size: 12px;
    font-weight: 880;
    letter-spacing: 0;
    color: white;
    white-space: nowrap;
}

body[data-page="vivo"].vivo-live-active .live-title-divider {
    display: none;
}

body[data-page="vivo"].vivo-live-active .live-availability {
    grid-column: 2;
    grid-row: 3;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 27px;
    margin: 0 0 0 11px;
    padding-left: 12px;

    border-left: 1px solid rgba(231,236,244,.55);

    color: #eef2f6;
    font-size: clamp(10px,2.7vw,12px);
    font-weight: 500;
    white-space: nowrap;
}

body[data-page="vivo"].vivo-live-active .live-availability > span {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    background: #11ec87;
    box-shadow: 0 0 6px rgba(17,236,135,.46);
}

/* REPRODUCTOR */
body[data-page="vivo"].vivo-live-active .live-player-card {
    position: relative;
    border: 1.6px solid #ff6e00;
    border-radius: 13px;
    padding: 2px;
    background: #020408;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgba(255,132,41,.18),
      0 0 10px rgba(255,104,20,.24),
      0 10px 28px rgba(0,0,0,.48);
}

body[data-page="vivo"].vivo-live-active .live-player-frame {
    aspect-ratio: 16/9;
    border-radius: 10px;
    background: #020408;
}

body[data-page="vivo"].vivo-live-active .live-player-frame:before {
    background: linear-gradient(
      135deg,
      rgba(255,94,20,.07),
      transparent 30%,
      transparent 76%,
      rgba(255,92,14,.05)
    );
}

body[data-page="vivo"].vivo-live-active .live-player-tools {
    gap: 8px;
    right: 10px;
    top: 10px;
}

body[data-page="vivo"].vivo-live-active .live-player-tool {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(255,139,71,.7);
    background: linear-gradient(145deg,rgba(8,16,28,.95),rgba(5,9,16,.95));
    box-shadow:
      0 0 0 1px rgba(255,173,96,.08),
      0 4px 12px rgba(0,0,0,.34);
}

body[data-page="vivo"].vivo-live-active .live-player-tool svg {
    width: 18px;
    height: 18px;
}

body[data-page="vivo"].vivo-live-active .live-player-tool:hover:not(:disabled),
body[data-page="vivo"].vivo-live-active .live-player-tool.is-active {
    box-shadow:
      0 0 0 1px rgba(255,192,132,.16),
      0 0 8px rgba(255,104,20,.20),
      0 4px 12px rgba(0,0,0,.34);
}

/* Ocultar textos sobrantes */
body[data-page="vivo"].vivo-live-active .live-player-meta,
body[data-page="vivo"].vivo-live-active .live-channel-strip {
    display: none !important;
}

/* TARJETAS */
body[data-page="vivo"].vivo-live-active .live-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    margin: 13px 2px 9px;
}

body[data-page="vivo"].vivo-live-active .live-action-card {
    display: grid;
    grid-template-columns:
       38px minmax(0,1fr) minmax(82px,102px) 9px;
    align-items: center;
    gap: 8px;

    min-height: 71px;
    padding: 10px 9px;

    border-radius: 13px;
    border: 1px solid rgba(167,180,196,.26);

    background: linear-gradient(
       110deg,
       rgba(15,19,27,.96),
       rgba(7,12,20,.98)
    );

    box-shadow:
       inset 0 1px 0 rgba(255,255,255,.025),
       0 8px 18px rgba(0,0,0,.28);

    opacity: 1;
}

body[data-page="vivo"].vivo-live-active .live-action-card:after {
    content: "›";
    color: #eef2f6;
    font-size: 24px;
    line-height: 1;
    justify-self: end;
}

body[data-page="vivo"].vivo-live-active .live-action-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
    filter: drop-shadow(0 0 4px currentColor);
}

body[data-page="vivo"].vivo-live-active .live-action-card b {
    font-size: clamp(11px,2.9vw,14px);
    line-height: 1.24;
    font-weight: 790;
}

body[data-page="vivo"].vivo-live-active .live-action-card small {
    margin-top: 3px;
    color: #b9c0cb;
    font-size: clamp(9px,2.55vw,11px);
    line-height: 1.22;
    font-weight: 430;
}

body[data-page="vivo"].vivo-live-active .live-action-card em {
    grid-column: 3;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

    min-width: 0;
    min-height: 33px;
    padding: 7px 5px;

    border: 1.4px solid #ff7a0a;
    border-radius: 8px;

    background: rgba(0,0,0,.12);
    color: #ff7a0a;

    box-shadow: 0 0 5px rgba(255,112,18,.10);

    font-size: clamp(10px,2.6vw,12px);
    font-style: normal;
    font-weight: 830;
    text-transform: none;
    white-space: nowrap;
}

body[data-page="vivo"].vivo-live-active .mobile-cta-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body[data-page="vivo"].vivo-live-active .live-action-android { color: #11e6aa; }
body[data-page="vivo"].vivo-live-active .live-action-tv { color: #bc31ff; }
body[data-page="vivo"].vivo-live-active .live-action-catalog { color: #ffcb48; }
body[data-page="vivo"].vivo-live-active .live-action-whatsapp { color: #16df98; }

/* VALORACIONES */
body[data-page="vivo"].vivo-live-active .live-feedback {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;

    margin: 10px 2px 0;
    padding: 13px 10px 12px;

    border: 1px solid rgba(172,182,196,.22);
    border-radius: 13px;

    background: linear-gradient(
       110deg,
       rgba(18,17,21,.96),
       rgba(8,13,20,.97)
    );

    box-shadow: 0 8px 20px rgba(0,0,0,.24);
}

body[data-page="vivo"].vivo-live-active .live-feedback-copy > span {
    color: #ff7a0a;
    font-size: 28px;
    text-shadow: 0 0 7px rgba(255,118,18,.20);
}

body[data-page="vivo"].vivo-live-active .live-feedback-copy h2 {
    color: #fff;
    font-size: clamp(13px,3.25vw,15px);
    font-weight: 800;
}

body[data-page="vivo"].vivo-live-active .live-feedback-copy p {
    color: #bcc3ce;
    font-size: 10px;
    line-height: 1.28;
    margin-top: 3px;
}

body[data-page="vivo"].vivo-live-active .live-rating-options {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 5px;
    width: 100%;
}

body[data-page="vivo"].vivo-live-active .mobile-rating-original {
    display: none;
}

body[data-page="vivo"].vivo-live-active .mobile-rating-face {
    display: block;
    line-height: 1;
}

body[data-page="vivo"].vivo-live-active .mobile-rating-face svg {
    display: block;
    width: 25px;
    height: 25px;
    filter: drop-shadow(0 0 4px currentColor);
}

body[data-page="vivo"].vivo-live-active .live-rating-options button {
    gap: 4px;
    min-width: 0;
    min-height: 63px;
    padding: 8px 2px;

    border-radius: 10px;
    border: 1px solid var(--rating);

    color: #f7f8fa;

    background: linear-gradient(
      145deg,
      color-mix(in srgb,var(--rating) 10%,#05070b),
      rgba(5,8,13,.97)
    );

    box-shadow:
      inset 0 0 10px color-mix(in srgb,var(--rating) 7%,transparent),
      0 0 5px color-mix(in srgb,var(--rating) 14%,transparent);

    font: 740 clamp(8px,2.15vw,10px) Inter,system-ui,sans-serif;
}

body[data-page="vivo"].vivo-live-active .live-rating-options button:nth-child(1) { --rating: #ff1f48; }
body[data-page="vivo"].vivo-live-active .live-rating-options button:nth-child(2) { --rating: #ff841f; }
body[data-page="vivo"].vivo-live-active .live-rating-options button:nth-child(3) { --rating: #ffcf31; }
body[data-page="vivo"].vivo-live-active .live-rating-options button:nth-child(4) { --rating: #20d8a4; }
body[data-page="vivo"].vivo-live-active .live-rating-options button:nth-child(5) { --rating: #27ea7e; }

body[data-page="vivo"].vivo-live-active .live-rating-options button svg {
    color: var(--rating);
}

body[data-page="vivo"].vivo-live-active .live-rating-options button.is-selected {
    border-width: 2px;
    box-shadow: 0 0 10px color-mix(in srgb,var(--rating) 22%,transparent);
}

}

@media (max-width:360px) {
body[data-page="vivo"].vivo-live-active .live-action-card {
    grid-template-columns:
        30px minmax(0,1fr) minmax(72px,84px) 7px;
    gap: 6px;
    padding: 9px 7px;
}

body[data-page="vivo"].vivo-live-active .live-action-icon svg {
    width: 27px;
    height: 27px;
}

body[data-page="vivo"].vivo-live-active .live-action-card em {
    gap: 3px;
    font-size: 9px;
}
}