/* Responsive Design - Mobile First Approach */

/* Ajuste base de viewport para mejor escalado */
html {
  /* Permite que el navegador ajuste el tamaño base según el dispositivo */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* ========== EXTRA SMALL MOBILE (hasta 375px) ========== */
@media (max-width: 375px) {
  /* Para iPhone SE, Galaxy Fold y pantallas pequeñas */
  .display-large {
    font-size: 18px;
  }

  .display-medium {
    font-size: 16px;
  }

  .display-small {
    font-size: 15px;
  }

  .title-large,
  .label-large {
    font-size: 13px;
  }

  .body-large,
  .body-medium {
    font-size: 12px;
  }

  .body-small,
  .label-small {
    font-size: 10px;
  }

  .card {
    padding: 12px;
  }

  .container-sm {
    padding: 0 6px;
  }

  .home-card {
    min-height: 100px;
    padding: 10px 12px;
  }

  .home-card-title {
    font-size: 12px;
  }

  .home-card-icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .home-card-icon-wrapper .icon {
    font-size: 24px;
  }
}

/* ========== MOBILE (por defecto - hasta 640px) ========== */
/* Los estilos base ya están optimizados para móvil */

@media (max-width: 640px) {
  .container,
  .container-sm,
  .container-lg {
    padding: 0 12px;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .btn-primary,
  .btn-outlined {
    padding: 14px 20px;
    font-size: 14px;
    min-height: 44px; /* Touch target mínimo recomendado */
  }

  .icon-button {
    min-width: 44px;
    min-height: 44px;
  }

  .app-bar-title {
    font-size: 18px;
  }

  .modal {
    max-width: 95%;
    padding: 20px;
  }

  /* Ajustar cards para móvil */
  .card {
    padding: 16px;
  }

  .home-card {
    min-height: 120px;
    padding: 12px 16px;
  }

  .home-card-title {
    font-size: 13px;
  }

  .home-card-icon-wrapper {
    width: 48px;
    height: 48px;
  }

  .home-card-icon-wrapper .icon {
    font-size: 28px;
  }

  /* Ajustar tipografía para móvil */
  .display-large {
    font-size: 20px;
    line-height: 1.3;
  }

  .display-medium {
    font-size: 18px;
    line-height: 1.3;
  }

  .display-small {
    font-size: 16px;
    line-height: 1.4;
  }

  .title-large {
    font-size: 16px;
  }

  .title-medium {
    font-size: 15px;
  }

  .label-large {
    font-size: 14px;
  }

  .label-medium {
    font-size: 13px;
  }

  .body-large {
    font-size: 14px;
  }

  .body-medium {
    font-size: 13px;
  }

  .body-small {
    font-size: 11px;
  }

  /* Ajustar grids en móvil */
  .grid-2-cols,
  .grid-3-cols {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Ocultar en móvil */
  .hide-mobile {
    display: none !important;
  }

  /* Espaciado reducido en móvil */
  .mb-xl { margin-bottom: 20px; }
  .mb-2xl { margin-bottom: 24px; }
  .p-xl { padding: 20px; }
  .p-2xl { padding: 24px; }

  /* Ajustes específicos para inputs y botones en móvil */
  .input-field {
    font-size: 14px;
    padding: 12px;
  }

  /* Ajustes para elementos específicos de productos */
  .product-item h3 {
    font-size: 14px !important;
  }

  .product-item p {
    font-size: 11px !important;
  }

  /* Botones dentro de product items más compactos */
  .product-item .btn-primary {
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Botones de acciones en detalle de orden - más compactos en móvil */
  .btn-icon {
    padding: 10px 14px !important;
    font-size: 13px !important;
    flex-direction: row !important;
    gap: 6px !important;
  }

  .btn-icon .icon {
    font-size: 18px !important;
  }

  .btn-icon span {
    font-size: 13px !important;
  }

  /* Ajustar grid de información de orden en móvil */
  .card .grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Contenedor de acciones de orden - stack vertical en móvil */
  .order-actions-container {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .order-actions-container .btn-action {
    width: 100% !important;
    min-height: 44px;
    justify-content: center;
  }

  /* Botones de acción compactos pero táctiles */
  .btn-action {
    padding: 10px 16px !important;
    font-size: 14px !important;
  }

  .btn-action .icon {
    font-size: 20px !important;
  }

  .btn-action span {
    font-size: 14px !important;
    font-weight: 500;
  }

  /* Controles de cantidad más compactos */
  .qty-input {
    width: 50px !important;
    font-size: 16px !important;
    padding: 6px !important;
  }

  .qty-btn-decrease,
  .qty-btn-increase {
    width: 36px !important;
    height: 36px !important;
    font-size: 20px !important;
  }

  .icon-button {
    min-width: 36px;
    min-height: 36px;
  }

  /* Ajustar gap entre elementos en mobile */
  .gap-md {
    gap: 6px;
  }

  /* Contenedores más compactos */
  .container-sm {
    padding: 0 8px;
  }

  /* FAB más pequeño en móvil */
  .fab-cart {
    width: 56px;
    height: 56px;
    bottom: 16px;
    right: 16px;
  }

  .fab-cart .icon {
    font-size: 24px;
  }

  .fab-badge {
    width: 20px;
    height: 20px;
    font-size: 11px;
    top: -2px;
    right: -2px;
  }

  /* Drawer full width en móvil */
  .drawer {
    width: 85%;
    max-width: 320px;
  }
}

/* ========== TABLET (641px a 1024px) ========== */

@media (min-width: 641px) and (max-width: 1024px) {
  .container {
    padding: 0 16px;
  }

  .home-card {
    min-height: 180px;
  }

  .modal {
    max-width: 450px;
  }

  /* Ajustar tipografía para tablet */
  .display-large {
    font-size: 24px;
  }

  .display-medium {
    font-size: 22px;
  }

  .display-small {
    font-size: 18px;
  }

  .title-large {
    font-size: 17px;
  }

  .body-large {
    font-size: 15px;
  }

  /* Botones de acción en tablet - más compactos */
  .btn-action {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  .btn-action .icon {
    font-size: 22px !important;
  }
}

/* ========== DESKTOP (1025px en adelante) ========== */

@media (min-width: 1025px) {
  .container {
    padding: 0 24px;
  }

  .modal {
    max-width: 500px;
  }

  /* Hover effects más prominentes en desktop */
  .card.clickable:hover {
    transform: translateY(-4px);
  }

  /* Ocultar en desktop */
  .hide-desktop {
    display: none !important;
  }
}

/* ========== LARGE DESKTOP (1440px en adelante) ========== */

@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }

  .container-lg {
    max-width: 1600px;
  }
}

/* ========== ORIENTATION QUERIES ========== */

@media (orientation: landscape) and (max-height: 600px) {
  /* Ajustes para móviles en landscape */
  .modal {
    max-height: 90vh;
    overflow-y: auto;
  }

  .app-bar {
    padding: 8px 16px;
  }
}

/* ========== PRINT STYLES ========== */

@media print {
  .app-bar,
  .bottom-nav,
  .btn-primary,
  .btn-outlined,
  .btn-text {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  .card {
    border: 1px solid #ddd;
    page-break-inside: avoid;
  }
}