/* Safe Area Insets - Adaptación para notch y barras de sistema */

/* Variables CSS para safe areas */
:root {
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  
  --status-bar-height: 44px; /* iOS landscape */
  --home-indicator-height: 34px; /* iOS home indicator */
}

/* Base body adjustments */
body {
  padding-top: var(--safe-area-inset-top);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: var(--safe-area-inset-bottom);
}

/* Header adjustments */
#header,
.header,
.main-header,
nav {
  padding-top: calc(var(--safe-area-inset-top) + 1rem);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* Fixed elements adjustments */
.fixed-top,
.sticky-top {
  top: var(--safe-area-inset-top);
  left: var(--safe-area-inset-left);
  right: var(--safe-area-inset-right);
}

.fixed-bottom,
.sticky-bottom {
  bottom: var(--safe-area-inset-bottom);
  left: var(--safe-area-inset-left);
  right: var(--safe-area-inset-right);
}

/* Floating buttons */
.floating-button,
.fab {
  bottom: calc(var(--safe-area-inset-bottom) + 16px);
  right: calc(var(--safe-area-inset-right) + 16px);
}

/* Modal adjustments */
.modal,
.dialog,
.popup {
  top: var(--safe-area-inset-top);
  left: var(--safe-area-inset-left);
  right: var(--safe-area-inset-right);
  bottom: var(--safe-area-inset-bottom);
}

/* Fullscreen elements */
.fullscreen,
.full-screen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* iOS specific adjustments */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  body {
    min-height: -webkit-fill-available;
  }
  
  /* Landscape orientation adjustments */
  @media (orientation: landscape) {
    body {
      padding-top: 0; /* iOS landscape doesn't need top padding */
    }
    
    #header,
    .header,
    .main-header,
    nav {
      padding-top: 1rem;
    }
  }
  
  /* iPhone X+ specific adjustments */
  @supports (padding: max(0px)) {
    .safe-area-padding {
      padding-top: max(var(--safe-area-inset-top), 20px);
      padding-left: max(var(--safe-area-inset-left), 20px);
      padding-right: max(var(--safe-area-inset-right), 20px);
      padding-bottom: max(var(--safe-area-inset-bottom), 20px);
    }
    
    .safe-area-margin {
      margin-top: max(var(--safe-area-inset-top), 20px);
      margin-left: max(var(--safe-area-inset-left), 20px);
      margin-right: max(var(--safe-area-inset-right), 20px);
      margin-bottom: max(var(--safe-area-inset-bottom), 20px);
    }
  }
}

/* Android specific adjustments */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  /* Chrome on Android */
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* PWA specific adjustments */
@media (display-mode: standalone) {
  body {
    padding-top: var(--safe-area-inset-top);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
  }
  
  /* Additional PWA safe area handling */
  .pwa-safe-area {
    padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
  }
}

/* Navigation adjustments for PWA */
nav.main-nav,
.navigation {
  padding-bottom: calc(var(--safe-area-inset-bottom) + 10px);
}

/* Tab bar adjustments */
.tab-bar,
.bottom-nav {
  padding-bottom: calc(var(--safe-area-inset-bottom) + 5px);
  height: calc(60px + var(--safe-area-inset-bottom));
}

/* Content area adjustments */
.main-content,
.content,
#main {
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  margin-bottom: var(--safe-area-inset-bottom);
}

/* Card and container adjustments */
.card,
.container,
.box {
  margin-left: var(--safe-area-inset-left);
  margin-right: var(--safe-area-inset-right);
}

/* Button groups */
.button-group,
.action-buttons {
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
}

/* Form adjustments */
form,
.form-container {
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
  padding-bottom: calc(var(--safe-area-inset-bottom) + 20px);
}

/* Input adjustments */
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  margin-left: var(--safe-area-inset-left);
  margin-right: var(--safe-area-inset-right);
}

/* Specific InmortalNutri adjustments */

/* Reto page adjustments */
.reto-container,
.reto-content {
  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* Progress bar adjustments */
.progress-bar,
.progress-container {
  margin-left: var(--safe-area-inset-left);
  margin-right: var(--safe-area-inset-right);
}

/* Timer/counter adjustments */
.timer-display,
.counter-display {
  top: calc(var(--safe-area-inset-top) + 20px);
}

/* Exercise view adjustments */
.exercise-view,
.workout-container {
  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* Notification adjustments */
.notification-container,
.toast-container {
  top: calc(var(--safe-area-inset-top) + 10px);
  left: calc(var(--safe-area-inset-left) + 10px);
  right: calc(var(--safe-area-inset-right) + 10px);
}

/* Modal adjustments for InmortalNutri */
.modal-content,
.popup-content {
  margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
  max-height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  /* More aggressive padding on mobile */
  .safe-area-mobile {
    padding-top: max(var(--safe-area-inset-top), 10px);
    padding-left: max(var(--safe-area-inset-left), 10px);
    padding-right: max(var(--safe-area-inset-right), 10px);
    padding-bottom: max(var(--safe-area-inset-bottom), 10px);
  }
  
  /* Mobile navigation */
  .mobile-nav,
  .bottom-nav {
    padding-bottom: calc(var(--safe-area-inset-bottom) + 15px);
    height: calc(70px + var(--safe-area-inset-bottom));
  }
}

@media (max-width: 480px) {
  /* Extra padding for very small screens */
  .safe-area-small {
    padding-top: max(var(--safe-area-inset-top), 15px);
    padding-left: max(var(--safe-area-inset-left), 15px);
    padding-right: max(var(--safe-area-inset-right), 15px);
    padding-bottom: max(var(--safe-area-inset-bottom), 15px);
  }
}

/* Landscape adjustments */
@media (orientation: landscape) {
  body {
    padding-top: 0; /* Usually no notch in landscape */
  }
  
  .landscape-safe-area {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
  }
}

/* Utility classes */
.safe-area-top {
  padding-top: var(--safe-area-inset-top);
}

.safe-area-right {
  padding-right: var(--safe-area-inset-right);
}

.safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom);
}

.safe-area-left {
  padding-left: var(--safe-area-inset-left);
}

.safe-area-all {
  padding: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

.margin-safe-area-top {
  margin-top: var(--safe-area-inset-top);
}

.margin-safe-area-right {
  margin-right: var(--safe-area-inset-right);
}

.margin-safe-area-bottom {
  margin-bottom: var(--safe-area-inset-bottom);
}

.margin-safe-area-left {
  margin-left: var(--safe-area-inset-left);
}

.margin-safe-area-all {
  margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom) var(--safe-area-inset-left);
}

/* Fallback for browsers that don't support env() */
@supports not (padding: env(safe-area-inset-top)) {
  .safe-area-fallback {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
  }
}

/* Debug styles - remove in production */
.debug-safe-areas {
  border: 2px dashed red;
}

.debug-safe-areas::before {
  content: "Safe Area";
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  color: white;
  padding: 2px 4px;
  font-size: 10px;
}

/* Animation for safe area changes */
.safe-area-transition {
  transition: padding 0.3s ease, margin 0.3s ease, top 0.3s ease, bottom 0.3s ease, left 0.3s ease, right 0.3s ease;
}