/* ==========================================================
   XLX026 — GIF POSITION V9

   Ajuste fino:
   - somente para EXATAMENTE 2 transmissões
   - aumenta o círculo/GIF
   - traz um pouco mais para a esquerda
   - não altera altura do card
   ========================================================== */


/* ==========================================================
   EXATAMENTE 2 TRANSMISSÕES
   ========================================================== */

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
.tx-v30-person,

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
~ .xlx026-tx-stack-v5
.tx-v30-person{

    /*
     * coluna do GIF maior e um pouco mais folgada
     */
    grid-template-columns:
        minmax(0,1fr)
        56px !important;

    gap:8px !important;
}


/* círculo/gif maior */
html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
.tx-v30-person
.operator-visual,

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
~ .xlx026-tx-stack-v5
.tx-v30-person
.operator-visual{

    grid-column:2 !important;
    grid-row:1 !important;

    /*
     * antes estava muito colado à direita;
     * agora fica mais para dentro.
     */
    justify-self:center !important;
    align-self:center !important;

    width:44px !important;
    height:44px !important;

    min-width:44px !important;
    min-height:44px !important;

    margin:0 !important;
}


/* gif interno maior */
html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
.tx-v30-person
.operator-visual img,

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
~ .xlx026-tx-stack-v5
.tx-v30-person
.operator-visual img{

    width:31px !important;
    height:31px !important;

    object-fit:contain !important;
}


/* texto continua totalmente livre na esquerda */
html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
.tx-v30-person-data,

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
~ .xlx026-tx-stack-v5
.tx-v30-person-data{

    grid-column:1 !important;
    grid-row:1 !important;

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

    padding:0 2px 0 0 !important;
}


/* segurança: callsign não encosta no gif */
html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
.tx-v30-callsign,

html body[data-page="ao-vivo"]
#moduleGrid
> .xlx026-tx-stack-v5:first-child:nth-last-child(2)
~ .xlx026-tx-stack-v5
.tx-v30-callsign{

    max-width:100% !important;

    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}


/* ==========================================================
   MOBILE
   No celular, mantém o comportamento anterior.
   ========================================================== */

@media (max-width:720px){

    html body[data-page="ao-vivo"]
    #moduleGrid
    > .xlx026-tx-stack-v5
    .tx-v30-person
    .operator-visual{

        width:36px !important;
        height:36px !important;

        min-width:36px !important;
        min-height:36px !important;

        justify-self:start !important;
    }


    html body[data-page="ao-vivo"]
    #moduleGrid
    > .xlx026-tx-stack-v5
    .tx-v30-person
    .operator-visual img{

        width:25px !important;
        height:25px !important;
    }
}