/*
  FeUniversal - Mobile WebView
  Ajustes finales para móvil/app WebView.
  No reemplaza el diseño principal; solo corrige proporciones, scroll horizontal,
  navegación móvil y áreas seguras de teléfonos.
*/

@media (max-width: 980px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  body {
    touch-action: manipulation;
  }

  img,
  video,
  iframe,
  canvas,
  svg {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .table-wrap,
  .fc-table-wrap,
  .fc-r-table-wrap,
  .fc-panel-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fc-r-navbar-wrap,
  .fc-r-topbar,
  .fc-r-navbar {
    max-width: 100%;
  }

  .fc-r-navbar-wrap {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  .fc-r-navbar {
    gap: 12px;
  }

  .fc-r-menu {
    max-width: 100%;
  }

  .fc-r-menu.open {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .fc-r-hero {
    min-height: 900px;
    padding-bottom: 80px;
  }

  .fc-r-floating-cards {
    margin-top: 48px;
  }

  .fc-r-filter-bar {
    width: 100%;
  }

  .fc-panel-layout {
    grid-template-columns: 1fr;
  }

  .fc-panel-sidebar {
    position: relative;
    height: auto;
    max-height: none;
  }

  .fc-panel-main,
  .fc-panel-content {
    max-width: 100%;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .container,
  .container-fluid {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .fc-r-container {
    width: min(100% - 24px, 1180px);
  }

  .fc-r-hero {
    min-height: 960px;
    padding-top: 70px;
  }

  .fc-r-hero-actions {
    margin-bottom: 28px;
  }

  .fc-r-btn,
  .fc-panel-btn,
  button[type="submit"],
  input[type="submit"] {
    max-width: 100%;
  }

  .fc-r-hero-actions .fc-r-btn,
  .fc-panel-actions .fc-panel-btn {
    width: 100%;
  }

  .fc-r-filter-bar {
    gap: 10px;
  }

  .fc-panel-top,
  .fc-panel-actions {
    gap: 12px;
  }

  .fc-panel-actions {
    width: 100%;
  }

  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }
}