/* TOPSTREAMING TV V1
   Solo /tv, pantalla posterior al acceso.
   No modifica el reproductor ni el formulario. */

@media (min-width: 1px) {

body[data-page="tv"] .vivo-dashboard {
    position: relative;
    isolation: isolate;

    box-sizing: border-box;
    display: grid;

    grid-template-columns: minmax(0,1fr);

    grid-template-rows:
      clamp(48px,8.2svh,92px)
      minmax(0,1fr)
      clamp(92px,13.5svh,150px);

    gap: clamp(7px,1.35svh,15px);

    width: 100%;
    height: 100%;
    max-width: none !important;

    margin: 0 auto;
    padding: 0;

    background: transparent;
}

/* ATMOSFERA OSCURA CON ILUMINACION NARANJA */

body[data-page="tv"] .vivo-dashboard::before {
    content: "";
    position: absolute;
    inset: -70px -100px;
    z-index: -1;
    pointer-events: none;

    background:
      radial-gradient(ellipse 27% 28% at -2% 10%,
        rgba(255,90,15,.29),transparent 93%),

      radial-gradient(ellipse 31% 31% at 101% 9%,
        rgba(255,91,18,.25),transparent 92%),

      radial-gradient(ellipse 35% 34% at -5% 82%,
        rgba(255,94,13,.24),transparent 91%),

      radial-gradient(ellipse 33% 33% at 106% 84%,
        rgba(255,94,18,.22),transparent 92%),

      linear-gradient(145deg,
        rgba(4,7,13,.98),
        rgba(5,9,16,.96),
        rgba(8,6,10,.98));
}

body[data-page="tv"] .vivo-dashboard > .live-viewer-heading,
body[data-page="tv"] .vivo-dashboard > .live-player-card,
body[data-page="tv"] .vivo-dashboard > .tv-contact-strip {
    position: relative;
    z-index: 1;
}

/* ENCABEZADO TV */

body[data-page="tv"] .vivo-dashboard .live-viewer-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(10px,2vw,30px);

    min-height: 0;
    margin: 0;
    padding: 0 clamp(3px,1.2vw,18px);
}

body[data-page="tv"] .vivo-dashboard .live-viewer-brand {
    display: block;
    flex: 0 0 auto;
    width: clamp(100px,10vw,190px);
}

body[data-page="tv"] .vivo-dashboard .live-viewer-brand img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

body[data-page="tv"] .vivo-dashboard .live-viewer-heading-main {
    display: block !important;
    min-width: 0;
    margin-left: auto;
}

body[data-page="tv"] .vivo-dashboard .live-viewer-title-row {
    display: flex;
    align-items: center;
    gap: 0;
}

body[data-page="tv"] .vivo-dashboard .live-viewer-title-row h1,
body[data-page="tv"] .vivo-dashboard .live-title-divider {
    display: none !important;
}

body[data-page="tv"] .vivo-dashboard .live-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: clamp(5px,.6vw,10px);

    padding:
      clamp(6px,.65vw,11px)
      clamp(9px,1.1vw,19px);

    border: 1px solid #ff4050;
    border-radius: 9px;

    color: #fff;
    background: linear-gradient(110deg,#ff112c,#ed071d);

    box-shadow: 0 0 12px rgba(255,18,43,.28);

    font-size: clamp(12px,1.2vw,21px);
    font-weight: 850;
    white-space: nowrap;
}

body[data-page="tv"] .vivo-dashboard .live-badge-signal svg {
    display: block;
    width: clamp(16px,1.5vw,24px);
    height: clamp(16px,1.5vw,24px);
}

body[data-page="tv"] .vivo-dashboard .live-availability {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: clamp(6px,.9vw,13px);

    margin: 0;
    padding-left: clamp(10px,1.5vw,24px);

    border-left: 1px solid rgba(231,239,249,.52);

    min-height: 29px;

    color: #f4f5f7;
    font-size: clamp(10px,1.15vw,19px);
    font-weight: 500;
    white-space: nowrap;
}

body[data-page="tv"] .vivo-dashboard .live-availability > span {
    width: clamp(9px,1.05vw,15px);
    height: clamp(9px,1.05vw,15px);

    background: #00ed71;
    box-shadow: 0 0 11px rgba(0,237,109,.56);
}

/* REPRODUCTOR:
   OCUPA TODA LA ZONA CENTRAL DISPONIBLE */

body[data-page="tv"] .vivo-dashboard .live-player-card {
    box-sizing: border-box;
    align-self: stretch;
    justify-self: stretch;

    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    max-width: none !important;
    max-height: none !important;

    margin: 0;
    padding: 3px;

    border: 2px solid #ff821d;
    border-radius: clamp(12px,1.4vw,22px);

    background: #020408;

    box-shadow:
      0 0 0 1px rgba(255,146,48,.23),
      0 0 12px rgba(255,112,18,.50),
      0 0 28px rgba(255,92,11,.25),
      -9px 0 29px rgba(255,89,9,.17),
      11px 6px 29px rgba(255,91,10,.18);

    overflow: hidden;
}

body[data-page="tv"] .vivo-dashboard .live-player-frame {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;

    aspect-ratio: auto !important;

    border-radius: clamp(8px,1vw,16px);
    overflow: hidden;
    background: #020408;
}

body[data-page="tv"] .vivo-dashboard .live-video {
    width: 100%;
    height: 100%;

    /* Sin recortar ni deformar el contenido original. */
    object-fit: contain;
}

body[data-page="tv"] .vivo-dashboard .live-player-frame::before {
    background: none;
}

/* Mantener las secciones PC ocultas en TV. */

body[data-page="tv"] .vivo-dashboard .live-player-meta,
body[data-page="tv"] .vivo-dashboard .live-channel-strip,
body[data-page="tv"] .vivo-dashboard .live-actions,
body[data-page="tv"] .vivo-dashboard .live-feedback,
body[data-page="tv"] .vivo-dashboard .live-pc-intro {
    display: none !important;
}

/* FRANJA INFERIOR:
   MISMO ORDEN DE LA IMAGEN ORIGINAL */

body[data-page="tv"] .vivo-dashboard .tv-contact-strip {
    box-sizing: border-box;

    display: grid !important;

    grid-template-columns:
      clamp(48px,5.5vw,100px)
      minmax(0,1.4fr)
      1px
      minmax(0,1.14fr)
      clamp(58px,7.7vw,123px)
      minmax(0,.55fr);

    align-items: center;

    gap: clamp(6px,1.25vw,20px);

    justify-self: center;

    width: 91%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: none !important;

    margin: 0;
    padding:
      clamp(6px,.75vw,12px)
      clamp(9px,1.15vw,18px);

    border: 1.5px solid #ff7813;
    border-radius: clamp(10px,1.1vw,18px);

    background: linear-gradient(
      120deg,
      rgba(22,13,8,.96),
      rgba(7,10,15,.98) 55%,
      rgba(20,11,7,.96)
    );

    box-shadow:
      0 0 11px rgba(255,104,13,.25),
      inset 0 0 14px rgba(255,93,13,.07);

    overflow: hidden;
}

/* ICONO GRANDE */

body[data-page="tv"] .vivo-dashboard .tv-promo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff7b0c;
    min-width: 0;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-icon svg {
    width: min(100%,9.5svh);
    height: auto;
    fill: currentColor;
    filter: drop-shadow(0 0 6px rgba(255,109,12,.22));
}

/* TEXTO PRINCIPAL */

body[data-page="tv"] .vivo-dashboard .tv-promo-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    gap: clamp(1px,.2vw,4px);
}

body[data-page="tv"] .vivo-dashboard .tv-promo-copy strong {
    display: block;
    color: #ff8015;
    font-size: clamp(13px,1.85vw,30px);
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-copy span {
    display: block;
    color: #f3f4f6;
    font-size: clamp(10px,1.3vw,21px);
    font-weight: 800;
    line-height: 1.2;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-copy small {
    display: block;
    color: #bfc2ca;
    font-size: clamp(11px,1.38vw,22px);
    letter-spacing: .02em;
    line-height: 1.1;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-divider {
    display: block;
    height: 65%;
    width: 1px;
    background: rgba(225,233,245,.48);
}

/* BOTON NUMERO */

body[data-page="tv"] .vivo-dashboard .tv-promo-number {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(4px,.7vw,12px);

    min-width: 0;
    width: 100%;
    min-height: 0;

    padding:
      clamp(7px,.8vw,14px)
      clamp(6px,1vw,16px);

    border: 2px solid #ff8215;
    border-radius: 999px;

    color: #fff;
    background: rgba(2,5,10,.65);
    text-decoration: none;

    font-size: clamp(11px,1.5vw,25px);
    font-weight: 900;
    white-space: nowrap;

    box-shadow: 0 0 8px rgba(255,98,12,.18);
}

body[data-page="tv"] .vivo-dashboard .tv-promo-number svg {
    width: clamp(17px,2vw,33px);
    height: clamp(17px,2vw,33px);
    flex: 0 0 auto;
    fill: currentColor;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-number b {
    min-width: 0;
    white-space: nowrap;
    font-size: inherit;
    letter-spacing: .01em;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-number > span {
    flex: 0 0 auto;
    color: #ff811b;
    font-size: clamp(21px,2.3vw,37px);
    line-height: 1;
}

/* CODIGO QR */

body[data-page="tv"] .vivo-dashboard .tv-promo-qr {
    display: block;

    width: 100%;
    max-width: 100%;
    max-height: 100%;

    aspect-ratio: 1;
    object-fit: contain;

    padding: 4px;
    background: #fff;

    border: 2px solid #ff8a22;
    border-radius: 8px;

    image-rendering: auto;
    box-shadow: 0 0 9px rgba(255,104,15,.25);
}

/* INSTRUCCIONES DEL QR */

body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    min-width: 0;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy span,
body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy strong {
    display: block;
    font-size: clamp(10px,1.03vw,17px);
    line-height: 1.27;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy span {
    color: #e4e7ed;
    font-weight: 480;
}

body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy strong {
    color: #ff821e;
    font-weight: 850;
}

/* AJUSTES PARA TV DE RESOLUCION MENOR */

@media (max-width:1100px) {
    body[data-page="tv"] .vivo-dashboard .tv-contact-strip {
        width: 98%;
        gap: 6px;
        padding: 7px;
    }

    body[data-page="tv"] .vivo-dashboard .tv-promo-copy strong {
        font-size: clamp(12px,1.6vw,19px);
    }

    body[data-page="tv"] .vivo-dashboard .tv-promo-copy span {
        font-size: clamp(9px,1.15vw,14px);
    }

    body[data-page="tv"] .vivo-dashboard .tv-promo-number {
        padding: 7px 4px;
        font-size: clamp(10px,1.27vw,16px);
    }
}

@media (max-height:600px) {
    body[data-page="tv"] .vivo-dashboard {
        grid-template-rows:
          48px
          minmax(0,1fr)
          93px;
        gap: 6px;
    }

    body[data-page="tv"] .vivo-dashboard .tv-promo-copy {
        gap: 1px;
    }

    body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy span,
    body[data-page="tv"] .vivo-dashboard .tv-promo-qr-copy strong {
        line-height: 1.12;
    }
}

}



/* TOPSTREAMING TV V1.1 / CONTENEDOR COMPARTIDO
   El marco creado para PC contiene el encabezado
   y el reproductor. Se distribuye como una grid
   interior para no reducir el video en TV.
   Solo afecta a /tv despues del ingreso. */

@media (min-width:1px) {

body[data-page="tv"] .vivo-dashboard {
    grid-template-columns: minmax(0,1fr) !important;

    grid-template-rows:
        minmax(0,1fr)
        clamp(92px,13.5svh,150px) !important;

    align-items: stretch !important;
    min-height: 0 !important;
}

body[data-page="tv"] .vivo-dashboard > .live-pc-frame {
    display: grid !important;

    grid-template-columns: minmax(0,1fr);

    grid-template-rows:
        clamp(48px,8.2svh,92px)
        minmax(0,1fr);

    gap: clamp(7px,1.35svh,15px);

    grid-row: 1;

    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body[data-page="tv"] .live-pc-frame > .live-viewer-heading {
    grid-row: 1;
    min-height: 0;
}

body[data-page="tv"] .live-pc-frame > .live-player-card {
    grid-row: 2;
    min-height: 0 !important;
    max-width: none !important;
    align-self: stretch !important;
    justify-self: stretch !important;
}

body[data-page="tv"] .vivo-dashboard > .tv-contact-strip {
    grid-row: 2;
    min-height: 0;
}

body[data-page="tv"] .live-pc-frame > .live-channel-strip {
    display: none !important;
}

}


/* TOPSTREAMING TV V2 / REPRODUCTOR PROTAGONISTA
   Exclusivo para /tv DESPUES del acceso.
   Sin cambios a JS, player, PC o movil.
   CSS sencillo para navegadores de television. */

body[data-page="tv"].vivo-live-active {
    background: #08090d !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

body[data-page="tv"].vivo-live-active main {
    height: 100vh !important;
    height: 100svh !important;
    overflow: hidden !important;
}

body[data-page="tv"].vivo-live-active .vivo-page {
    box-sizing: border-box;
    height: 100% !important;
    min-height: 0 !important;
    padding: clamp(7px,.8vw,16px) !important;
    overflow: hidden !important;
    background: #08090d !important;
}

/* Dos zonas: video grande + publicidad inferior. */

body[data-page="tv"].vivo-live-active .vivo-dashboard {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows:
        minmax(0,1fr)
        clamp(95px,13.8vh,145px) !important;

    gap: clamp(7px,1vh,14px) !important;

    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Eliminar luces y capas decorativas pesadas. */

body[data-page="tv"].vivo-live-active
.vivo-dashboard::before {
    content: none !important;
    display: none !important;
}

/* El antiguo contenedor PC no reserva
   ninguna altura para la cabecera. */

body[data-page="tv"].vivo-live-active
.vivo-dashboard > .live-pc-frame {
    position: relative !important;
    display: block !important;
    grid-row: 1 !important;

    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Video a todo el espacio de la zona central. */

body[data-page="tv"].vivo-live-active
.live-pc-frame > .live-player-card {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;

    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 3px !important;

    border: 2px solid #ff8119 !important;
    border-radius: 19px !important;
    background: #020307 !important;
    box-shadow: 0 0 8px rgba(255,111,17,.32) !important;
    overflow: hidden !important;
    z-index: 1;
}

body[data-page="tv"].vivo-live-active
.live-player-frame {
    box-sizing: border-box;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;

    aspect-ratio: auto !important;
    border-radius: 15px !important;
    background: #020307 !important;
    overflow: hidden !important;
}

body[data-page="tv"].vivo-live-active
.live-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* No se agrega ninguna cabecera encima del video.
   La informacion pasa a ser una insignia flotante. */

body[data-page="tv"].vivo-live-active
.live-pc-frame > .live-viewer-heading {
    position: absolute !important;
    top: clamp(9px,1.15vw,19px) !important;
    right: clamp(9px,1.25vw,23px) !important;
    left: auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    gap: clamp(7px,.8vw,14px) !important;

    margin: 0 !important;
    padding: 5px 9px !important;

    border: 0 !important;
    border-radius: 10px !important;
    background: rgba(4,7,12,.80) !important;

    pointer-events: none;
    z-index: 12 !important;
}

/* Sin logo, pero solo despues de ingresar en TV. */

body[data-page="tv"].vivo-live-active
.live-viewer-brand {
    display: none !important;
}

body[data-page="tv"].vivo-live-active
.live-viewer-heading-main {
    display: block !important;
    margin: 0 !important;
}

body[data-page="tv"].vivo-live-active
.live-viewer-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
}

body[data-page="tv"].vivo-live-active
.live-viewer-title-row h1,
body[data-page="tv"].vivo-live-active
.live-title-divider {
    display: none !important;
}

body[data-page="tv"].vivo-live-active
.live-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    padding: 7px 12px !important;
    border: 1px solid #ff2941 !important;
    border-radius: 8px !important;

    background: #ef102d !important;
    color: #fff !important;

    box-shadow: none !important;
    font-size: clamp(11px,1.05vw,19px) !important;
    font-weight: 850 !important;
}

body[data-page="tv"].vivo-live-active
.live-availability {
    display: flex !important;
    align-items: center !important;

    margin: 0 !important;
    padding: 0 0 0 12px !important;

    border-left: 1px solid rgba(240,244,249,.48);
    min-height: 29px;

    color: #fff !important;
    font-size: clamp(10px,1vw,18px) !important;
    white-space: nowrap;
}

body[data-page="tv"].vivo-live-active
.live-availability > span {
    background: #00e977 !important;
    box-shadow: none !important;
}

body[data-page="tv"].vivo-live-active
.live-availability[data-tone="paused"] > span {
    background: #ffc928 !important;
}

body[data-page="tv"].vivo-live-active
.live-availability[data-tone="pending"] > span {
    background: #ff9d35 !important;
}

body[data-page="tv"].vivo-live-active
.live-availability[data-tone="idle"] > span {
    background: #8390a2 !important;
}

/* Franja de publicidad inferior,
   proporcionada como en la imagen aprobada. */

body[data-page="tv"].vivo-live-active
.vivo-dashboard > .tv-contact-strip {
    grid-row: 2 !important;
    display: grid !important;

    grid-template-columns:
        clamp(46px,5.5vw,98px)
        minmax(0,1.5fr)
        1px
        minmax(0,1.28fr)
        clamp(65px,7.7vw,124px)
        minmax(0,.62fr) !important;

    gap: clamp(6px,1vw,18px) !important;
    align-items: center !important;

    box-sizing: border-box;
    width: 94% !important;
    max-width: 1720px !important;
    height: 100% !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 7px clamp(7px,1vw,17px) !important;

    border: 1.5px solid #ff7915 !important;
    border-radius: 15px !important;
    background: #0d0c0d !important;

    box-shadow: none !important;
    overflow: hidden !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-icon svg {
    width: 100% !important;
    max-height: 90px !important;
    fill: #ff8215 !important;
    filter: none !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy {
    gap: 2px !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy strong {
    color: #ff8319 !important;
    font-size: clamp(16px,2.0vw,33px) !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy span {
    color: #f5f5f5 !important;
    font-size: clamp(10px,1.31vw,23px) !important;
    line-height: 1.2 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy small {
    color: #bfc2cb !important;
    font-size: clamp(11px,1.42vw,24px) !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 6px !important;
    padding: clamp(7px,.9vw,14px)
             clamp(7px,1vw,17px) !important;

    border: 2px solid #ff8215 !important;
    border-radius: 999px !important;
    background: #070709 !important;

    color: #fff !important;
    font-size: clamp(11px,1.47vw,25px) !important;
    box-shadow: none !important;
    white-space: nowrap;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number svg {
    width: clamp(17px,2vw,33px) !important;
    height: clamp(17px,2vw,33px) !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number > span {
    color: #ff841e !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-qr {
    width: 100% !important;
    height: auto !important;
    max-height: 100% !important;

    padding: 4px !important;
    background: #fff !important;

    border: 2px solid #ff8319 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy span,
body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy strong {
    font-size: clamp(10px,1.04vw,18px) !important;
    line-height: 1.2 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy strong {
    color: #ff841a !important;
}

/* TV y navegadores que reportan pocos pixeles CSS. */

@media(max-width:850px) {
    body[data-page="tv"].vivo-live-active
    .vivo-dashboard > .tv-contact-strip {
        width: 99% !important;
        gap: 5px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-copy strong {
        font-size: 15px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number {
        font-size: 11px !important;
        padding: 6px !important;
    }

    body[data-page="tv"].vivo-live-active
    .live-badge {
        padding: 5px 7px !important;
    }
}

@media(max-height:550px) {
    body[data-page="tv"].vivo-live-active
    .vivo-dashboard {
        grid-template-rows:
            minmax(0,1fr) 88px !important;
        gap: 6px !important;
    }
}


/* TOPSTREAMING TV V2.1 / BANNER INFERIOR
   Solo /tv despues del ingreso.
   Ajuste de proporciones, no de funcionalidad. */

/* PANEL INFERIOR COMPLETO */

body[data-page="tv"].vivo-live-active
.vivo-dashboard > .tv-contact-strip {
    display: grid !important;

    grid-template-columns:
        clamp(55px,6vw,102px)
        minmax(0,1.45fr)
        1px
        minmax(0,1.25fr)
        clamp(76px,8.4vw,130px)
        minmax(90px,.60fr) !important;

    align-items: center !important;
    justify-items: stretch !important;

    gap: clamp(7px,1vw,17px) !important;

    width: 89% !important;
    max-width: 1560px !important;
    height: 100% !important;

    margin: 0 auto !important;

    padding:
        8px
        clamp(11px,1.25vw,22px) !important;

    border-radius: 15px !important;
    border: 1.5px solid #ff801b !important;

    background: #0c0b0c !important;
    box-shadow: none !important;
}

/* ICONO WHATSAPP IZQUIERDO */

body[data-page="tv"].vivo-live-active
.tv-promo-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-width: 0 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-icon svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 94px !important;
    height: auto !important;

    fill: #ff8015 !important;
    filter: none !important;
}

/* TRES LINEAS PROMOCIONALES */

body[data-page="tv"].vivo-live-active
.tv-promo-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    gap: 3px !important;
    min-width: 0 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy strong {
    display: block !important;

    color: #ff8218 !important;
    font-size: clamp(15px,2.02vw,34px) !important;
    font-weight: 900 !important;
    line-height: 1.07 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy span {
    display: block !important;

    color: #f5f5f5 !important;
    font-size: clamp(10px,1.36vw,23px) !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-copy small {
    display: block !important;

    color: #c1c3cb !important;
    font-size: clamp(11px,1.48vw,25px) !important;
    font-weight: 500 !important;
    line-height: 1.1 !important;
}

/* SEPARADOR VERTICAL */

body[data-page="tv"].vivo-live-active
.tv-promo-divider {
    display: block !important;

    width: 1px !important;
    height: 69% !important;

    background: rgba(220,227,237,.50) !important;
    justify-self: center !important;
}

/* BOTON CENTRAL WHATSAPP:
   MAS ALTO Y NUMERO MAS PROTAGONISTA */

body[data-page="tv"].vivo-live-active
.tv-promo-number {
    box-sizing: border-box;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: clamp(5px,.65vw,13px) !important;

    width: 100% !important;
    height: clamp(56px,7.5vh,81px) !important;
    min-height: 0 !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding:
        0
        clamp(9px,1.1vw,20px) !important;

    border: 2px solid #ff831b !important;
    border-radius: 999px !important;

    background: #070709 !important;
    color: #fff !important;

    box-shadow: none !important;

    font-size: clamp(13px,1.85vw,30px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number svg {
    display: block !important;
    flex: 0 0 auto !important;

    width: clamp(19px,2.25vw,36px) !important;
    height: clamp(19px,2.25vw,36px) !important;

    fill: #fff !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number b {
    display: block !important;

    flex: 0 1 auto !important;
    min-width: 0 !important;

    font-size: inherit !important;
    font-weight: 900 !important;
    letter-spacing: .005em !important;

    color: #fff !important;
    white-space: nowrap !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-number > span {
    display: block !important;
    flex: 0 0 auto !important;

    color: #ff841c !important;
    font-size: clamp(25px,2.8vw,45px) !important;
    font-weight: 900 !important;
    line-height: .8 !important;
}

/* QR EN EL MISMO ORDEN DE LA REFERENCIA */

body[data-page="tv"].vivo-live-active
.tv-promo-qr {
    display: block !important;

    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;

    aspect-ratio: 1 !important;
    object-fit: contain !important;

    padding: 4px !important;

    background: #fff !important;
    border: 2px solid #ff831b !important;
    border-radius: 7px !important;

    box-shadow: none !important;
}

/* TEXTO A LA DERECHA DEL QR */

body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    min-width: 0 !important;
    gap: 0 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy span {
    display: block !important;

    color: #e9eaee !important;
    font-size: clamp(10px,1.10vw,18px) !important;
    font-weight: 500 !important;
    line-height: 1.23 !important;
}

body[data-page="tv"].vivo-live-active
.tv-promo-qr-copy strong {
    display: block !important;

    color: #ff831c !important;
    font-size: clamp(11px,1.18vw,20px) !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
}

/* PANTALLAS TV MAS GRANDES */

@media (min-width:1500px) {
    body[data-page="tv"].vivo-live-active
    .vivo-dashboard > .tv-contact-strip {
        width: 86% !important;
    }
}

/* TELEVISORES QUE REPORTAN MENOR ANCHO CSS */

@media (max-width:1100px) {
    body[data-page="tv"].vivo-live-active
    .vivo-dashboard > .tv-contact-strip {
        width: 98% !important;
        gap: 6px !important;
        padding: 7px !important;

        grid-template-columns:
            clamp(43px,6vw,68px)
            minmax(0,1.45fr)
            1px
            minmax(0,1.25fr)
            clamp(62px,8.4vw,93px)
            minmax(68px,.60fr) !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number {
        font-size: clamp(11px,1.75vw,19px) !important;
        padding: 0 7px !important;
        gap: 4px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-copy strong {
        font-size: clamp(13px,1.9vw,21px) !important;
    }
}

@media (max-height:550px) {
    body[data-page="tv"].vivo-live-active
    .tv-promo-number {
        height: min(59px,75%) !important;
    }
}


/* TOPSTREAMING TV V2.2 / BOTON WHATSAPP
   Solo modifica el banner inferior despues del login. */

/* Repartir el espacio:
   mover el separador a la izquierda;
   ampliar el boton central;
   conservar las columnas del QR. */

body[data-page="tv"].vivo-live-active
.vivo-dashboard > .tv-contact-strip {
    grid-template-columns:
        clamp(55px,6vw,102px)
        minmax(0,1.20fr)
        1px
        minmax(0,1.50fr)
        clamp(76px,8.4vw,130px)
        minmax(90px,.60fr) !important;
}

/* Boton ovalado con tres elementos bien alineados. */

body[data-page="tv"].vivo-live-active
.tv-promo-number {
    display: grid !important;

    grid-template-columns:
        clamp(29px,3.1vw,40px)
        minmax(0,1fr)
        clamp(27px,2.8vw,39px) !important;

    align-items: center !important;
    justify-items: center !important;

    column-gap: clamp(6px,.8vw,14px) !important;

    width: 100% !important;
    min-width: 0 !important;

    height: clamp(58px,8vh,82px) !important;

    padding-left: clamp(19px,2.3vw,33px) !important;
    padding-right: clamp(10px,1vw,18px) !important;

    border: 2px solid #ff831b !important;
    border-radius: 999px !important;

    background: #070709 !important;
    color: #fff !important;

    box-shadow: none !important;
}

/* Icono grande, ligeramente mas a la derecha. */

body[data-page="tv"].vivo-live-active
.tv-promo-number svg {
    display: block !important;

    width: clamp(29px,3.1vw,40px) !important;
    height: clamp(29px,3.1vw,40px) !important;

    fill: #fff !important;
    justify-self: start !important;
}

/* Numero grande, centrado y grueso. */

body[data-page="tv"].vivo-live-active
.tv-promo-number b {
    display: block !important;

    min-width: 0 !important;
    width: 100% !important;

    color: #fff !important;

    font-size: clamp(19px,2.35vw,32px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .005em !important;

    text-align: center !important;
    white-space: nowrap !important;
}

/* Flecha naranja al extremo derecho. */

body[data-page="tv"].vivo-live-active
.tv-promo-number > span {
    display: block !important;

    color: #ff841c !important;

    font-size: clamp(28px,2.9vw,46px) !important;
    font-weight: 900 !important;
    line-height: .8 !important;

    justify-self: end !important;
}

/* Adaptacion para navegadores TV mas estrechos. */

@media (max-width:1100px) {
    body[data-page="tv"].vivo-live-active
    .vivo-dashboard > .tv-contact-strip {
        grid-template-columns:
            clamp(43px,6vw,68px)
            minmax(0,1.20fr)
            1px
            minmax(0,1.50fr)
            clamp(62px,8.4vw,93px)
            minmax(68px,.60fr) !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number {
        grid-template-columns:
            clamp(27px,3vw,34px)
            minmax(0,1fr)
            clamp(24px,2.7vw,31px) !important;

        padding-left: clamp(15px,2.2vw,24px) !important;
        padding-right: 9px !important;
        column-gap: 6px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number svg {
        width: clamp(27px,3vw,34px) !important;
        height: clamp(27px,3vw,34px) !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number b {
        font-size: clamp(17px,2.3vw,25px) !important;
    }
}

@media (max-width:850px) {
    body[data-page="tv"].vivo-live-active
    .tv-promo-number {
        grid-template-columns:
            22px minmax(0,1fr) 22px !important;

        height: clamp(45px,7vh,60px) !important;

        padding-left: 10px !important;
        padding-right: 6px !important;
        column-gap: 3px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number svg {
        width: 22px !important;
        height: 22px !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number b {
        font-size: clamp(12px,2vw,17px) !important;
    }

    body[data-page="tv"].vivo-live-active
    .tv-promo-number > span {
        font-size: 26px !important;
    }
}