/* ══════════════════════════════════════════════════
   RESPONSIVE — tablet / mobile
══════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* Show bottom nav */
  .bottom-nav { display: flex; }

  /* Hide desktop-only elements (importar pasa al nav inferior) */
  .btn-scan, .btn-add-desktop, .btn-import { display: none; }

  /* Más juntos para que quepan los 5 botones del nav inferior */
  .bottom-nav-btn { padding: 8px 9px; }
  .bottom-nav-btn.primary-action { padding: 8px 14px; }

  /* Main gets bottom padding for nav */
  .main { padding: 12px 14px calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom)); }

  /* Layout: single column */
  .layout { grid-template-columns: 1fr; }

  /* Sidebar becomes slide-in drawer */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw);
    z-index: 300;
    transform: translateX(-110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    height: 100dvh;
    padding-top: calc(var(--header-h) + 16px);
    border-right: 1px solid var(--border);
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  /* Overlay behind drawer */
  .sidebar-overlay {
    display: block;
    position: fixed; inset: 0; z-index: 299;
    background: rgba(30,26,20,.45); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none;
    transition: opacity .28s;
  }
  .sidebar-overlay.visible { opacity: 1; pointer-events: all; }

  /* Toast above bottom nav */
  .toast { bottom: calc(var(--bottom-h) + 10px + env(safe-area-inset-bottom)); }

  /* Modal as bottom sheet */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    max-height: 92dvh; max-width: 100%;
    animation: sheetUp .25s cubic-bezier(.4,0,.2,1);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } }

  /* Drag handle on mobile modals */
  .modal-header::before {
    content: '';
    display: block;
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--border2);
  }
  .modal-header { position: relative; margin-top: 8px; }

  /* Form single column on small screens */
  .form-grid { grid-template-columns: 1fr; }
  .form-group.col-2 { grid-column: 1; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; justify-content: center; padding: 13px; font-size: .9rem; }

  /* Detail stacked */
  .detail-actions { flex-direction: column; }
  .detail-actions .btn { width: 100%; justify-content: center; padding: 12px; }

  /* Grid: tarjetas más estrechas en móvil */
  .books-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 9px; }
}

@media (max-width: 380px) {
  .books-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .logo { font-size: 1.15rem; }
}

@media (min-width: 761px) {
  /* Desktop: detail layout side by side */
  .detail-layout { gap: 22px; }
}