/* Fix móvil/iPhone para botones de volver/salir colocados demasiado arriba.
   Respeta el safe-area del notch y aumenta el área táctil mínima. */
:root{
  --mobile-safe-top: env(safe-area-inset-top, 0px);
  --mobile-safe-left: env(safe-area-inset-left, 0px);
  --mobile-safe-right: env(safe-area-inset-right, 0px);
}

@media (max-width: 820px), (pointer: coarse){
  .fab-row{
    top: calc(var(--mobile-safe-top) + 12px) !important;
    left: calc(var(--mobile-safe-left) + 12px) !important;
    right: calc(var(--mobile-safe-right) + 12px) !important;
    z-index: 2147482500 !important;
    pointer-events: none;
  }
  .fab-row > a,
  .fab-row > button,
  .fab-row .home-fab{
    pointer-events: auto !important;
  }

  a.home-fab,
  button.home-fab,
  .home-fab,
  a.home,
  .mobile-safe-back-control,
  #v3rtoTestExitBtn{
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    z-index: 2147482500 !important;
    pointer-events: auto !important;
  }

  a.home-fab,
  button.home-fab,
  .home-fab,
  a.home{
    top: calc(var(--mobile-safe-top) + 12px) !important;
  }

  a.home-fab:not([style*="right"]),
  button.home-fab:not([style*="right"]),
  .home-fab:not([style*="right"]),
  a.home:not([style*="right"]){
    left: calc(var(--mobile-safe-left) + 12px) !important;
  }

  a.home-fab[style*="right"],
  button.home-fab[style*="right"],
  .home-fab[style*="right"],
  a.home[style*="right"]{
    right: calc(var(--mobile-safe-right) + 12px) !important;
  }

  body:has(.home-fab),
  body:has(.fab-row),
  body:has(#v3rtoTestExitBtn){
    scroll-padding-top: calc(var(--mobile-safe-top) + 78px);
  }
}