/* —— ALYABE: utilidades responsive (móvil / tablet). Escritorio (xl+) sin cambios. —— */

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Áreas seguras en iOS / notch */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.safe-x {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Contenedor principal de páginas */
.app-page {
  padding: 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}
@media (min-width: 768px) {
  .app-page {
    padding: 2rem;
  }
}

/* Tablas: scroll horizontal en pantallas < xl */
@media (max-width: 1279px) {
  .app-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

.app-table-hint {
  display: none;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 0.5rem;
}
@media (max-width: 1279px) {
  .app-table-hint {
    display: block;
  }
}

/* Pestañas horizontales en móvil */
.app-tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.app-tabs-scroll > * {
  flex-shrink: 0;
}

/* Botones táctiles mínimos en touch */
@media (max-width: 1279px) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Modales / paneles a pantalla completa en móvil */
@media (max-width: 767px) {
  .app-modal-mobile {
    margin: 0 !important;
    max-height: 100dvh !important;
    border-radius: 1.25rem 1.25rem 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}