/* XLX026_MOBILE_VISUAL_V1 — 2026-09-08
   Escopo: somente telas moveis. Nao altera desktop, JS ou APIs. */

@media screen and (max-width:820px){
  html body[data-page="ao-vivo"] main{
    width:calc(100% - 16px) !important;
    padding-top:10px !important;
  }

  html body[data-page="ao-vivo"] .hero.hero-compact{
    padding:14px 14px !important;
    border-radius:14px !important;
    gap:10px !important;
  }

  html body[data-page="ao-vivo"] .hero h1{
    font-size:24px !important;
    line-height:1.04 !important;
  }

  html body[data-page="ao-vivo"] .access-strip{
    gap:5px !important;
    margin-top:10px !important;
  }

  html body[data-page="ao-vivo"] .access-strip span{
    padding:6px 8px !important;
    font-size:9px !important;
  }

  html body[data-page="ao-vivo"] .hero-status{
    min-width:0 !important;
    width:100% !important;
    margin-top:10px !important;
    padding:10px !important;
    border-radius:11px !important;
  }

  html body[data-page="ao-vivo"] .hero-numbers{
    gap:6px !important;
    margin-top:6px !important;
  }

  html body[data-page="ao-vivo"] .hero-numbers span{
    padding:6px !important;
  }

  html body[data-page="ao-vivo"] .dashboard-layout{
    gap:10px !important;
    margin-top:10px !important;
  }

  html body[data-page="ao-vivo"] .live-widget,
  html body[data-page="ao-vivo"] .dashboard-main.panel.compact-panel{
    border-radius:13px !important;
    padding:10px !important;
  }

  /* Corrige o ponto principal: cards deixam de ficar espremidos em 2 colunas. */
  html body[data-page="ao-vivo"] .live-widget .widget-grid,
  html body[data-page="ao-vivo"] #moduleGrid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  html body[data-page="ao-vivo"] #moduleGrid .tx-card{
    width:100% !important;
    min-width:0 !important;
  }

  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30,
  html body[data-page="ao-vivo"] #moduleGrid .tx-card.standby.compact-tx.standby-v30{
    min-height:0 !important;
    padding:10px 11px !important;
    border-radius:12px !important;
  }

  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30 .callsign{
    font-size:20px !important;
  }

  html body[data-page="ao-vivo"] .live-widget > .live-summary-bar{
    gap:5px !important;
    margin-bottom:7px !important;
  }

  html body[data-page="ao-vivo"] .live-widget .live-summary-item{
    min-height:30px !important;
    padding:5px 6px !important;
    border-radius:9px !important;
  }

  html body[data-page="ao-vivo"] .dashboard-main .section-title.panel-title{
    margin:1px 0 8px !important;
    gap:6px !important;
  }

  html body[data-page="ao-vivo"] .dashboard-main .section-title.panel-title h2{
    font-size:16px !important;
  }

  html body[data-page="ao-vivo"] .dashboard-main .section-title.panel-title .table-note{
    font-size:8px !important;
  }

  html body[data-page="ao-vivo"] table.home-history tbody tr{
    margin-bottom:7px !important;
    border-radius:11px !important;
  }

  html body[data-page="ao-vivo"] table.home-history tbody tr > td{
    padding:6px 8px !important;
  }

  html body[data-page="ao-vivo"] table.home-history .history-callsign-cell > a{
    font-size:17px !important;
  }
}

@media screen and (max-width:390px){
  html body[data-page="ao-vivo"] .hero h1{
    font-size:22px !important;
  }

  html body[data-page="ao-vivo"] .access-strip span{
    flex:1 1 calc(50% - 5px) !important;
    text-align:center !important;
  }

  html body[data-page="ao-vivo"] .live-widget,
  html body[data-page="ao-vivo"] .dashboard-main.panel.compact-panel{
    padding:8px !important;
  }
}
/* XLX026_MOBILE_VISUAL_V2 — refinamento de densidade */
@media screen and (max-width:820px) and (hover:none) and (pointer:coarse){
  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30{
    padding:8px 9px !important;
  }
  html body[data-page="ao-vivo"] #moduleGrid .operator-visual.qrz-photo-active{
    width:64px !important;height:64px !important;min-width:64px !important;min-height:64px !important;max-width:64px !important;max-height:64px !important;
  }
  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30 .tx-v30-details,
  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30 .tx-v30-details > div{
    gap:5px !important;
  }
  html body[data-page="ao-vivo"] #moduleGrid .tx-card.live.tx-v30 .tx-v30-mtr-wrap{
    margin-top:5px !important;
  }
  html body[data-page="ao-vivo"] table.home-history tbody tr{
    margin-bottom:6px !important;
  }
  html body[data-page="ao-vivo"] table.home-history tbody tr > td{
    padding:5px 7px !important;
  }
  html body[data-page="ao-vivo"] table.home-history tbody tr > td::before{
    font-size:6.5px !important;
    min-width:58px !important;
  }
  html body[data-page="ao-vivo"] table.home-history .history-callsign-cell > a{
    font-size:16px !important;
  }
}

/* XLX026_A11Y_MOBILE_MENU_V1 — 2026-09-08
   No mobile, acessibilidade fica dentro do MENU e nao flutuando no header. */
@media screen and (max-width:820px){
  html body .universal-header > .xlx-a11y-mobile-icon{
    display:none !important;
  }

  html body .universal-header .universal-nav.xlx026-v4-open .xlx-a11y-menu-icon{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:11px 13px !important;
    font-size:20px !important;
    line-height:1 !important;
    pointer-events:auto !important;
  }
}
/* /XLX026_A11Y_MOBILE_MENU_V1 */

/* XLX026_A11Y_RESPONSIVE_ALIGNMENT_V2
   Um único gatilho por breakpoint:
   - >=821px: ♿ participa da barra horizontal;
   - <=820px: ♿ aparece dentro do menu móvel aberto.
   Evita o ícone absoluto intermediário (821-1180px). */
@media screen and (min-width:821px){
  html body section.universal-header > .xlx-a11y-mobile-icon{
    display:none !important;
  }

  html body section.universal-header > .universal-nav .xlx-a11y-menu-icon{
    display:inline-flex !important;
    position:static !important;
    flex:0 0 auto !important;
    align-self:center !important;
    margin:0 !important;
    transform:none !important;
  }
}

@media screen and (max-width:820px){
  html body section.universal-header > .xlx-a11y-mobile-icon{
    display:none !important;
  }

  html body section.universal-header > .universal-nav:not(.xlx026-v4-open) .xlx-a11y-menu-icon{
    display:none !important;
  }

  html body section.universal-header > .universal-nav.xlx026-v4-open .xlx-a11y-menu-icon{
    display:flex !important;
    position:static !important;
    transform:none !important;
  }
}

/* A caixa permanece ancorada à viewport, sem deslocamento lateral. */
#xlxA11yV5E{
  box-sizing:border-box !important;
}

@media screen and (min-width:601px){
  #xlxA11yV5E{
    left:auto !important;
    right:max(10px, env(safe-area-inset-right)) !important;
  }
}
/* /XLX026_A11Y_RESPONSIVE_ALIGNMENT_V2 */