/**
 * 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;
  }

  /* Mejorar padding para safe areas (iOS notch) */
  @supports (padding: env(safe-area-inset-top)) {
    .content-wrapper {
      padding-top: calc(15px + env(safe-area-inset-top));
      padding-bottom: calc(15px + env(safe-area-inset-bottom));
    }

    .main-header {
      padding-left: calc(15px + env(safe-area-inset-left));
      padding-right: calc(15px + env(safe-area-inset-right));
    }

    .main-sidebar {
      padding-top: calc(50px + env(safe-area-inset-top));
      padding-bottom: calc(20px + 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;
  }
  
  /* El header también debe ser compacto */
  .main-header {
    padding-top: 0 !important;
    padding-bottom: 0 !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;
}

/* En tablets, forzar modo fullscreen */
@media (max-width: 1024px) {
  body {
    /* Intentar ocupar toda la pantalla */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  
  .wrapper {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .content-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }
}

/* 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 {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow-y: auto;
  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) {
    /* Mejorar visibilidad del header */
    .main-header {
      position: sticky;
      top: 0;
      z-index: 1030;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      background-color: rgba(34, 45, 50, 0.95);
    }

    /* Asegurar que el sidebar sea funcional */
    .main-sidebar {
      position: fixed;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
    }

    /* Mejorar scroll en DataTables */
    .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;
  }
}