/**
 * Estilos para PWA en modo standalone (pantalla completa)
 * Optimizado para tablets y dispositivos móviles
 */

/* Mejorar visualización incluso en modo navegador */
@media (max-width: 1024px) {
  /* Ocultar elementos innecesarios en tablets */
  .main-header .navbar-custom-menu {
    margin-right: 0;
  }
  
  /* Maximizar espacio vertical */
  .content-wrapper {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  /* Reducir padding en cards */
  .stat-card {
    padding: 15px;
  }
  
  /* Reducir márgenes en secciones */
  .content-header {
    margin-bottom: 10px;
    padding: 10px 15px;
  }
  
  /* Compactar dashboard */
  .dashboard-modern {
    padding-bottom: 20px;
  }
  
  .dashboard-modern .row {
    margin-bottom: 10px;
  }
  
  .stat-grid {
    margin-bottom: 15px;
  }
  
  /* Compactar hero banner */
  .dashboard-hero {
    padding: 15px 20px;
    margin-bottom: 15px;
  }
  
  .hero-text h2 {
    font-size: 22px;
  }
  
  .hero-highlight h1 {
    font-size: 28px;
  }
}

/* IMPORTANTE: Ocultar elementos del navegador cuando está en modo standalone */
@media (display-mode: standalone) {
  /* Ajustes para pantalla completa */
  html {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  
  body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
  }
  
  /* Ocultar completamente cualquier elemento del navegador que pueda aparecer */
  body > * {
    margin-top: 0 !important;
  }
  
  /* Forzar que el wrapper ocupe toda la pantalla */
  .wrapper {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    position: relative;
  }

  /* Safe areas: header absorbe inset-top; content no duplica el top (evita doble padding) */
  @supports (padding: env(safe-area-inset-top)) {
    .main-header {
      padding-top: env(safe-area-inset-top);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }

    .content-wrapper {
      padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    .main-sidebar {
      /* Drawer: top bajo header; no padding-top extra (ver sm-sidebar-drawer.css) */
      padding-top: 0 !important;
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  /* Evitar zoom accidental en inputs */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important; /* Previene zoom automático en iOS */
  }

  /* Mejorar visualización de modales en pantalla completa */
  .modal-dialog {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: calc(10px + env(safe-area-inset-top)) auto calc(10px + env(safe-area-inset-bottom));
  }

  /* Ajustar tablas para mejor uso del espacio */
  .table-responsive {
    max-height: calc(100vh - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  /* Optimizar cards del dashboard */
  .stat-grid {
    margin-left: -5px;
    margin-right: -5px;
  }

  .stat-card {
    margin: 5px;
  }
}

/* Clase específica cuando está instalada como PWA */
.pwa-standalone {
  /* Mejoras adicionales cuando se detecta modo standalone */
}

/* Forzar pantalla completa cuando está en modo standalone */
@media (display-mode: standalone) {
  /* Eliminar cualquier padding o margin que pueda crear espacio */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden;
  }
  
  /* El wrapper principal debe ocupar toda la pantalla */
  .wrapper {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex;
    flex-direction: column;
  }
  
  /* El contenido principal debe ocupar toda la pantalla */
  .content-wrapper {
    flex: 1;
    min-height: 0;
    padding: 10px !important;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  /* Header: respetar notch / Dynamic Island (NO forzar padding-top: 0) */
  .main-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    height: auto !important;
    flex-shrink: 0;
  }
  
  /* El footer debe estar al final */
  .main-footer {
    flex-shrink: 0;
  }
}

/* También aplicar cuando se detecta la clase pwa-standalone */
body.pwa-standalone,
html.pwa-standalone {
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
}

body.pwa-standalone .wrapper {
  height: 100vh !important;
  height: 100dvh !important;
  display: flex;
  flex-direction: column;
}

body.pwa-standalone .content-wrapper {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* FORZAR PANTALLA COMPLETA - Ocultar barras del navegador en cualquier caso */
/* Esto funciona incluso si no se detecta correctamente el modo standalone */
html, body {
  /* Intentar ocupar toda la pantalla disponible */
  height: 100vh;
  height: 100dvh;
}

/*
 * MODELO DE SCROLL (2026-08):
 * Antes: max-width 1024 forzaba body position:fixed + overflow:hidden también en
 * navegador móvil (no solo standalone), y mobile-scroll-fix.css lo revertía → conflicto.
 * Ahora: el bloqueo de viewport SOLO aplica en standalone / .pwa-standalone / .from-icon.
 * Contenedor de scroll único: .content-wrapper
 * AdminLTE sidebar sigue usando su propio scroll interno (.sidebar).
 * Modales / Select2 / DataTables conservan scroll propio.
 * Teclado móvil: content-wrapper con -webkit-overflow-scrolling: touch.
 */
@media (max-width: 1024px) {
  /* Navegador móvil normal: no fijar body (evita pelear con mobile-scroll-fix) */
  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) .wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  body:not(.pwa-standalone):not(.from-icon):not(.force-fullscreen) .content-wrapper {
    overflow-x: hidden;
  }
}

/* Standalone / icono: un solo scroll en .content-wrapper */
@media (max-width: 1024px) {
  body.pwa-standalone,
  body.from-icon,
  body.force-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body.pwa-standalone .wrapper,
  body.from-icon .wrapper,
  body.force-fullscreen .wrapper {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.pwa-standalone .content-wrapper,
  body.from-icon .content-wrapper,
  body.force-fullscreen .content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
}

/* Forzar pantalla completa cuando se detecta desde icono */
body.force-fullscreen,
html.force-fullscreen,
body.from-icon {
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.force-fullscreen,
body.from-icon {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

body.force-fullscreen .wrapper,
body.from-icon .wrapper {
  height: 100vh !important;
  height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.force-fullscreen .content-wrapper,
body.from-icon .content-wrapper {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Ocultar cualquier elemento del navegador que pueda aparecer arriba */
body.force-fullscreen::before,
body.from-icon::before,
html.force-fullscreen::before {
  display: none !important;
}

/* En tablets, SIEMPRE forzar pantalla completa cuando se abre desde icono */
@media (max-width: 1024px) {
  body.from-icon,
  body.force-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }
  
  body.from-icon .wrapper,
  body.force-fullscreen .wrapper {
    height: 100vh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  body.from-icon .content-wrapper,
  body.force-fullscreen .content-wrapper {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
  }
  
  /* Reducir márgenes y paddings para maximizar espacio */
  body.from-icon .content-header,
  body.force-fullscreen .content-header {
    margin-bottom: 10px !important;
    padding: 10px 15px !important;
  }
  
  body.from-icon .dashboard-modern,
  body.force-fullscreen .dashboard-modern {
    padding-bottom: 15px !important;
  }
}

.pwa-standalone .main-sidebar {
  /* El posicionamiento lo define sm-sidebar-drawer.css (top bajo header + safe-area). */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.pwa-standalone .content-wrapper {
  width: 100%;
  min-height: 100vh;
}

/* Ajustes para tablets en modo landscape */
@media (display-mode: standalone) and (orientation: landscape) {
  .dashboard-modern {
    padding: 10px;
  }

  .stat-grid {
    margin-bottom: 15px;
  }

  .stat-card {
    padding: 15px;
  }

  /* Optimizar modales en landscape */
  .modal-dialog.modal-lg {
    max-width: 95%;
    margin: 5px auto;
  }
}

/* Ajustes para tablets en modo portrait */
@media (display-mode: standalone) and (orientation: portrait) {
  .stat-grid .col-lg-3 {
    width: 50%;
    flex: 0 0 50%;
  }
}

/* Mejorar interacción táctil en modo standalone */
@media (display-mode: standalone) {
  button,
  .btn,
  a {
    -webkit-tap-highlight-color: rgba(60, 141, 188, 0.3);
    tap-highlight-color: rgba(60, 141, 188, 0.3);
  }

  /* Área táctil más grande para botones pequeños */
  .btn-sm,
  .btn-xs {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
  }

  /* Mejorar scroll en modales */
  .modal-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* Prevenir pull-to-refresh en modo standalone */
@supports (-webkit-overflow-scrolling: touch) {
  @media (display-mode: standalone) {
    body {
      overscroll-behavior-y: none;
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* Ajustes específicos para iOS en modo standalone */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) {
    /* Header sticky respetando safe-area (color lo da sm-cabezote) */
    body.spvsma-sm-theme .main-header {
      position: sticky;
      top: 0;
      z-index: 1030;
    }

    /* Sidebar: no forzar translateZ aquí — lo controla sm-sidebar-drawer.js/css */

    .dataTables_wrapper {
      -webkit-overflow-scrolling: touch;
    }
  }
}

/* Optimizar para pantalla completa en tablets */
@media (display-mode: standalone) and (min-width: 768px) {
  .wrapper {
    overflow: hidden;
  }

  .content-wrapper {
    margin-left: 230px;
    min-height: 100vh;
    padding: 15px;
  }

  /* Optimizar cards para mejor uso del espacio */
  .card-modern {
    margin-bottom: 15px;
  }

  /* Mejorar espaciado en formularios */
  .form-group {
    margin-bottom: 15px;
  }
}

/* Ajustes para evitar cortes de contenido */
@media (display-mode: standalone) {
  /* Asegurar que los elementos importantes sean visibles */
  .main-footer {
    position: relative;
    margin-top: auto;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .content-wrapper > section {
    flex: 1;
  }
}