/* =====================================================================
   Estilos responsivos - mobile first
   Breakpoints: 320px, 576px, 768px, 1024px, 1440px
   ===================================================================== */

/* Sidebar colapsable en móvil/tablet (< 1024px) */
@media (max-width: 1023.98px) {
  .app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .app-sidebar.abierto {
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  #btnToggleSidebar { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* Barra de pestañas inferior: solo en móvil/tablet, oculta en escritorio
   (ahí se usa el sidebar + el botón "Registrar" del topbar). Deja espacio
   abajo para que el contenido no quede tapado detrás de la barra. */
@media (max-width: 1023.98px) {
  .app-contenido-inner {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (min-width: 1024px) {
  .ios-tabbar { display: none !important; }
}

/* Registro rápido: reducir tamaños en pantallas pequeñas */
@media (max-width: 575.98px) {
  .monto-input { font-size: 2.2rem; width: 180px; }
  .grid-categorias { grid-template-columns: repeat(3, 1fr); }
  .tarjeta-resumen { padding: 12px; }
  .tarjeta-resumen-icono { width: 36px; height: 36px; font-size: 1rem; }
  .login-caja { padding: 1.5rem !important; }
}

/* Tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
  .grid-categorias { grid-template-columns: repeat(4, 1fr); }
}

/* Tablas con scroll horizontal en móvil */
@media (max-width: 767.98px) {
  .table-responsive { font-size: 0.85rem; }
}

/* Pantallas grandes: limitar ancho de contenido para legibilidad */
@media (min-width: 1440px) {
  .app-contenido-inner { max-width: 1400px; margin: 0 auto; width: 100%; }
}