/**
 * GP Inmho Checkout — optimización móvil
 * iOS: iPhone X+ (notch/Dynamic Island), SE, 11–17
 * Android: 13+ (API 33+)
 */

:root {
  --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);
  --app-navbar-height: calc(2.75rem + var(--safe-top));
  --touch-min: 44px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

/* Navbar fija con notch iOS */
header.app-top-navbar {
  padding-top: var(--safe-top);
  padding-left: max(0.25rem, var(--safe-left));
  padding-right: max(0.25rem, var(--safe-right));
  min-height: var(--app-navbar-height);
}

aside#sidebar {
  top: var(--app-navbar-height) !important;
  height: calc(100dvh - var(--app-navbar-height)) !important;
  padding-bottom: var(--safe-bottom);
}

.app-main-content {
  padding-top: calc(var(--app-navbar-height) + 0.75rem) !important;
  padding-bottom: max(1rem, var(--safe-bottom));
}

/* Evita zoom al enfocar inputs en iOS (font-size < 16px) */
@media (max-width: 1023px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  select,
  textarea {
    font-size: 16px !important;
  }

  .smart-aviso-search {
    width: min(180px, 34vw);
  }

  header.app-top-navbar .navbar-tools {
    gap: 0.35rem;
  }

  header.app-top-navbar .smart-aviso-search-results {
    width: min(92vw, 320px);
    right: 0;
  }

  #btn_manual_pdf {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
  }

  #btn_menu_navbar button {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 60;
    pointer-events: auto;
  }

  /* Buscador navbar: visible; en pantallas muy estrechas se reduce el ancho */
  .smart-aviso-search {
    display: block !important;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 16px !important;
    min-height: var(--touch-min);
  }

  table.dataTable tbody td {
    padding: 0.65rem 0.5rem;
  }

  .app-page-shell {
    padding-left: max(0.75rem, var(--safe-left));
    padding-right: max(0.75rem, var(--safe-right));
  }

  footer {
    padding-bottom: max(0.5rem, var(--safe-bottom));
  }
}

/* Modo PWA standalone (instalada) */
@media (display-mode: standalone) {
  body.pwa-standalone header.app-top-navbar {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  }

  body.pwa-standalone .app-main-content {
    padding-top: calc(var(--app-navbar-height) + 0.5rem) !important;
  }

  body.pwa-standalone footer {
    display: none;
  }
}

/* iOS Safari standalone (legacy) */
body.pwa-standalone.ios-standalone {
  -webkit-overflow-scrolling: touch;
}

/* Banner instalación PWA técnico */
.pwa-install-banner {
  position: fixed;
  left: max(0.75rem, var(--safe-left));
  right: max(0.75rem, var(--safe-right));
  bottom: max(0.75rem, var(--safe-bottom));
  z-index: 9998;
  background: #453536;
  color: #fff;
  border-radius: 12px;
  padding: 0.875rem 1rem;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  display: none;
  align-items: flex-start;
  gap: 0.75rem;
  animation: pwaSlideUp 0.35s ease;
}

.pwa-install-banner.is-visible {
  display: flex;
}

@keyframes pwaSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.pwa-install-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #e8945a;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.7rem;
}

.pwa-install-banner-body {
  flex: 1;
  min-width: 0;
}

.pwa-install-banner-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.pwa-install-banner-text {
  font-size: 0.78rem;
  margin: 0;
  opacity: 0.92;
  line-height: 1.35;
}

.pwa-install-banner-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.pwa-install-btn {
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 36px;
  white-space: nowrap;
}

.pwa-install-btn-primary {
  background: #e8945a;
  color: #fff;
}

.pwa-install-btn-ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.pwa-install-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: max(1rem, var(--safe-bottom)) max(1rem, var(--safe-left)) max(1rem, var(--safe-right));
}

.pwa-install-modal.is-open {
  display: flex;
}

.pwa-install-modal-card {
  background: #fff;
  border-radius: 16px 16px 12px 12px;
  width: 100%;
  max-width: 420px;
  padding: 1.25rem;
  max-height: 85dvh;
  overflow-y: auto;
}

.pwa-install-modal-card h3 {
  margin: 0 0 0.75rem;
  color: #453536;
  font-size: 1.05rem;
}

.pwa-install-steps {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: #374151;
  line-height: 1.5;
}

.pwa-install-steps li {
  margin-bottom: 0.5rem;
}

.pwa-install-modal-close {
  margin-top: 1rem;
  width: 100%;
  min-height: var(--touch-min);
  border: none;
  border-radius: 10px;
  background: #e8945a;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  header.app-top-navbar .pr-2 > .flex-grow {
    gap: 0.35rem;
  }

  header.app-top-navbar #dropdown_menu_manual_pdf {
    right: 0.5rem;
    width: min(12rem, 72vw);
  }

  header.app-top-navbar .smart-aviso-search {
    width: min(150px, 36vw);
  }

  header.app-top-navbar #btn_manual_pdf,
  header.app-top-navbar .navbar-guias-btn {
    font-size: 0.72rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  header.app-top-navbar .user-name,
  header.app-top-navbar [class*="username"],
  header.app-top-navbar .pr-2 .text-sm {
    max-width: 4.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Listados / tablas genéricos en móvil */
@media (max-width: 1023px) {
  .app-page-shell,
  .app-page-full {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .dataTables_wrapper {
    max-width: 100%;
  }

  table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
  table.dataTable.dtr-column.collapsed > tbody > tr > td.child {
    padding: 0.5rem 0.65rem !important;
  }

  ul.dtr-details {
    width: 100%;
  }

  ul.dtr-details > li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f3f4f6;
  }

  ul.dtr-details .dtr-title {
    font-weight: 600;
    color: #6b7280;
  }

  ul.dtr-details .dtr-data {
    text-align: right;
    word-break: break-word;
  }
}