/*
 TG SolucoesWeb
 Ajuste responsivo compartilhado V1
 Preserva componentes e scripts originais.
*/

html, body {
  max-width: 100%;
}

img, video, iframe {
  max-width: 100%;
}

h1, h2, h3, p {
  overflow-wrap: break-word;
}

/* Melhor aproveitamento de telas menores em altura */
@media (min-width: 1024px) and (max-height: 820px) {

  main.app {
    gap: 5px !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 42px !important;
  }

  main.app > header.topbar {
    flex: 0 0 auto !important;
    min-height: 64px !important;
    height: 64px !important;
  }

  main.app > header.topbar .wrap.topinner {
    height: 64px !important;
    min-height: 64px !important;
  }

  main.app > .intro {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 4px 0 7px !important;
    padding: 2px 4px !important;
    gap: 8px !important;
  }

  main.app > .intro h1 {
    font-size: clamp(20px, 1.9vw, 26px) !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
  }

  main.app > .intro p {
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  main.app > .primary {
    flex: 0 0 auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 9px !important;
  }

  main.app .panel {
    padding: 10px 12px !important;
  }

  main.app .panel-heading {
    margin-bottom: 5px !important;
  }

  main.app .panel-title {
    font-size: 11px !important;
  }
}

/* Celulares e tablets: prioriza leitura e rolagem normal */
@media (max-width: 900px) {
  html, body {
    width: 100%;
    max-width: 100%;
  }

  main.app {
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 48px !important;
  }

  main.app > .intro {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
  }

  main.app > .intro h1 {
    font-size: clamp(21px, 5vw, 30px) !important;
    line-height: 1.2 !important;
  }

  main.app > .primary {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* TG_MOBILE_HEADER_COMPACTO_V1 */
@media (max-width: 767px) {

  body header.topbar {
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  body header.topbar .wrap.topinner {
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-rows:54px 62px!important;
    align-items:center!important;
    justify-items:stretch!important;
    column-gap:8px!important;
    row-gap:0!important;
    width:100%!important;
    height:auto!important;
    min-height:116px!important;
    max-height:none!important;
    padding:0 10px!important;
    margin:0 auto!important;
    box-sizing:border-box!important;
  }

  body header.topbar .tg-v2-hamburger {
    grid-column:1!important;
    grid-row:1!important;
    justify-self:center!important;
    width:38px!important;
    min-width:38px!important;
    height:38px!important;
    min-height:38px!important;
    margin:0!important;
  }

  body header.topbar .wrap.topinner > a.logo[aria-label="TG SoluçõesWeb"] {
    grid-column:2!important;
    grid-row:1!important;
    justify-self:start!important;
    display:inline-flex!important;
    align-items:center!important;
    flex-direction:row!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  body header.topbar .logo-word {
    font-size:13px!important;
    white-space:nowrap!important;
  }

  body header.topbar .logo-word small {
    display:none!important;
  }

  body header.topbar .wrap.topinner > nav.nav {
    grid-column:1 / -1!important;
    grid-row:2!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:62px!important;
    min-height:0!important;
    padding:0!important;
    margin:0!important;
    position:static!important;
    overflow:visible!important;
    background:transparent!important;
    border:0!important;
  }

  body header.topbar nav.nav > * {
    display:none!important;
  }

  body header.topbar nav.nav > #tg-radio-home-botao,
  body header.topbar nav.nav > #tg-tvtv-menu,
  body header.topbar nav.nav > .tg-adm-logo-oficial {
    display:inline-flex!important;
    position:static!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 58px!important;
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    height:56px!important;
    min-height:56px!important;
    max-height:56px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%!important;
  }

  body header.topbar nav.nav > #tg-radio-home-botao img,
  body header.topbar nav.nav > #tg-tvtv-menu img,
  body header.topbar nav.nav > .tg-adm-logo-oficial img {
    display:block!important;
    width:52px!important;
    height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
    object-fit:contain!important;
  }

  body header.topbar .wrap.topinner > .head-actions {
    display:none!important;
  }
}

/* TG_MOBILE_RADIO_VIEWPORT_V1 */
@media (max-width: 767px) {

  html body #tg-radio-br[data-mini-radio] {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 8px !important;
    bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;

    width: calc(100vw - 16px) !important;
    max-width: 360px !important;

    max-height: 65vh !important;
    max-height: min(65dvh, calc(100dvh - 110px)) !important;

    margin: 0 !important;
    padding: 0 !important;
    z-index: 2500 !important;
  }

  html body #tg-radio-br[data-mini-radio] .tr-mini {
    display: flex !important;
    flex-direction: column !important;

    max-height: 65vh !important;
    max-height: min(65dvh, calc(100dvh - 110px)) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  html body #tg-radio-br[data-mini-radio] .tr-mini-bar {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  html body #tg-radio-br[data-mini-radio] .tr-mini-body:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    padding-bottom: 18px !important;
    scrollbar-width: thin;
  }

  html body #tg-radio-br[data-mini-radio] .tr-mini-body[hidden] {
    display: none !important;
  }

  html body #tg-radio-br[data-mini-radio] .tr-mini-select {
    min-width: 0 !important;
  }
}