/* ============================================================
   📱 iphone.css — Soporte safe-area + responsive iPhone/iOS
   Cubre notch, Dynamic Island y Home Indicator para PWA
   instalada en pantalla de inicio.
   ============================================================ */

:root {
  /* Variables CSS para safe areas (iOS 11+) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* ---------- 1. Reset de scroll y rebote en iOS ---------- */
html, body {
  -webkit-text-size-adjust: 100%;        /* Evita zoom de texto al rotar */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;            /* Corta el "rubber band" vertical */
}

/* Evitar scroll horizontal accidental */
body {
  overflow-x: hidden;
}

/* ---------- 2. Padding seguro para layout principal ---------- */
.app-shell,
.main-layout,
.app-layout,
.layout-root {
  padding-top:    var(--safe-top);
  padding-right:  var(--safe-right);
  padding-bottom: var(--safe-bottom);
  padding-left:   var(--safe-left);
}

/* Header fijo arriba: respeta notch */
.app-header,
.top-bar,
header.fixed-top {
  padding-top: max(0.75rem, var(--safe-top));
  padding-left: max(1rem, var(--safe-left));
  padding-right: max(1rem, var(--safe-right));
}

/* Footer / barra inferior (tab bar): respeta home indicator */
.app-footer,
.bottom-bar,
.tab-bar,
footer.fixed-bottom {
  padding-bottom: max(0.5rem, var(--safe-bottom));
  padding-left: max(0.5rem, var(--safe-left));
  padding-right: max(0.5rem, var(--safe-right));
}

/* Sidebar/drawer lateral: respeta safe-left */
.app-sidebar,
.side-drawer {
  padding-left: max(0.5rem, var(--safe-left));
}

/* ---------- 3. Inputs: evitar el zoom automático de iOS ---------- */
/* iOS hace zoom cuando un input tiene font-size < 16px */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  font-size: 16px;          /* mínimo para evitar zoom en iOS */
}

/* Ocultar la flecha nativa del select cuando estilizas */
select {
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- 4. Botones: feedback táctil más natural ---------- */
button,
.btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;             /* Quita 300ms de delay en taps */
}

/* ---------- 5. Modo standalone: ocultar elementos solo-web ---------- */
@media all and (display-mode: standalone) {
  .only-browser { display: none !important; }
  body { user-select: none; }              /* Evita selección accidental */
}

@media all and (display-mode: browser) {
  .only-pwa { display: none !important; }
}

/* ---------- 6. Responsive: iPhone SE → iPhone 15 Pro Max ---------- */
@media (max-width: 480px) {
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  h1 { font-size: 1.4rem; }
  h2 { font-size: 1.2rem; }
  .table-responsive { font-size: .9rem; }

  /* Modales a pantalla completa en pantallas pequeñas */
  .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
  }
  .modal-content { border-radius: 0; min-height: 100vh; }
}

/* ---------- 7. Landscape en iPhone con notch ---------- */
@media screen and (orientation: landscape) and (max-device-width: 926px) {
  .app-shell {
    padding-left:  max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
  }
}

/* ---------- 8. Soporte tema oscuro automático del sistema ---------- */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark light; }
}