/* =====================================================================
 * NefroSys — Overrides responsivos para móvil y tablet
 * ---------------------------------------------------------------------
 * Este archivo NO reemplaza style.css; se carga DESPUÉS para sobrescribir
 * solo los patrones que rompen en pantallas pequeñas/medianas.
 *
 * Breakpoints estandarizados:
 *   - Tablet:   ≤ 1024px (iPad portrait, iPad mini)
 *   - Móvil:    ≤ 640px  (iPhone, Android)
 *   - Móvil S:  ≤ 380px  (iPhone SE, pantallas chicas)
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * 0. Performance: smoothing tipográfico y scroll en touch
 * --------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-overflow-scrolling: touch; }

/* Imagenes nunca rompen el viewport */
img, video { max-width: 100%; height: auto; }

/* Inputs en iOS evitan zoom automático cuando font-size < 16px */
@media (max-width: 1024px) {
  input, select, textarea, button { font-size: max(16px, 1em); }
}

/* =====================================================================
 * 1. TABLET (≤ 1024px) — iPad
 * ===================================================================== */
@media (max-width: 1024px) {
  /* Topbar más compacta */
  .topbar, .nf-patient-topbar { padding: 8px 14px !important; }
  .topbar h1, .topbar-brand h1 { font-size: 16px !important; }
  .topbar-logo { height: 32px !important; }

  /* Filtros de Sala en vivo en grid 2 columnas */
  .filters, .sala-filters, [class*="filter"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Form de paciente (ficha): 2 columnas en vez de 3-4 */
  .nf-grid-3, .nf-grid-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .nf-col-span { grid-column: 1 / -1 !important; }

  /* Tarjetas de paciente en sala: ancho razonable */
  .pac-item, .patient-directory-card { min-width: 0 !important; }

  /* Sesión: panel principal aprovecha ancho completo */
  #sesion-pane, .session-pane { padding: 10px !important; }

  /* Botones de acción: tamaño touch mínimo (44px) */
  .btn, button:not(.btn-link) {
    min-height: 40px !important;
    padding: 8px 14px !important;
  }
  .btn-sm { min-height: 36px !important; padding: 6px 12px !important; }

  /* Sidebar de ficha clínica: full-width arriba */
  .nf-form-sidebar {
    position: static !important;
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  .nf-form-toc {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .nf-toc-link {
    flex: 1 1 calc(33.333% - 6px) !important;
    text-align: center !important;
    font-size: 13px !important;
  }
}

/* =====================================================================
 * 2. MÓVIL (≤ 640px) — iPhone, Android
 * ===================================================================== */
@media (max-width: 640px) {
  /* Topbar: stacked, header arriba sin clipear */
  .topbar, .nf-patient-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .topbar-brand { flex-direction: row; align-items: center; gap: 8px; }
  .topbar h1, .topbar-brand h1 { font-size: 14px !important; line-height: 1.2 !important; }
  .topbar .user, .userbar { font-size: 12px; }

  /* Botones de navegación arriba (Inicio/Sala/Pacientes/Usuarios/Cerrar) */
  .topbar > div:last-child, .topbar nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  .topbar a, .topbar button { font-size: 12px !important; padding: 6px 10px !important; }

  /* Filtros: 1 columna en móvil */
  .filters, .sala-filters, [class*="filter"] {
    grid-template-columns: 1fr !important;
  }

  /* Formularios: 1 columna SIEMPRE en móvil */
  .form-grid, .nf-grid, .nf-grid-2, .nf-grid-3, .nf-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .nf-col-span { grid-column: 1 !important; }

  /* Inputs: ancho completo */
  input, select, textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cards de paciente: pantalla completa */
  .pac-item, .patient-directory-card, .ficha-patient-item {
    width: 100% !important;
    margin: 4px 0 !important;
  }

  /* Tabs (Apertura/Monitoreo/Cierre/Más): wrap y compactos */
  .tabs, .session-tabs, [role="tablist"] {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .tab, .tab-button { font-size: 13px !important; padding: 8px 12px !important; }

  /* Tablas en móvil: scroll horizontal solo si no hay alternativa
     Las tablas grandes (vitals-table, users-table) tendrán scroll-x. */
  table.vitals-table, table.users-table, .table-wrap table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Modales: aprovechan toda la pantalla */
  .modal-body, .modal-content {
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Login: card más compacta */
  .login-card {
    padding: 20px !important;
    margin: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: 400px !important;
  }
  .login-card h1, .login-card h2 { font-size: 22px !important; }

  /* Mascota del login: ocultar en móvil para más espacio */
  .login-mascot, [src*="mascota"] { display: none !important; }

  /* Sidebar de ficha (12 secciones): scroll horizontal */
  .nf-form-toc {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 8px !important;
  }
  .nf-toc-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Ficha del paciente: hero compacto */
  .nf-patient-hero {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .nf-photo-preview { margin: 0 auto !important; }
  .nf-toolbar-actions, .nf-hero-actions {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* Robot/asistente flotante: NO ocultar pero hacer más chico */
  .assistant-bot, [class*="assistant"], img[src*="robot"] {
    width: 50px !important;
    height: 50px !important;
    bottom: 10px !important;
    right: 10px !important;
  }

  /* Quitar márgenes laterales grandes */
  main { padding: 8px !important; }
  .panel { padding: 12px !important; margin: 8px 0 !important; }

  /* Tags (alergias/comorbilidades): wrap correcto */
  .pf-tags-list { padding: 8px !important; }
  .pf-tag { font-size: 12px !important; padding: 4px 8px !important; }
  .pf-tags-input { flex-direction: column !important; }
  .pf-tags-input input { width: 100% !important; }

  /* Ocultar columnas no críticas en algunas tablas */
  .hide-on-mobile { display: none !important; }
}

/* =====================================================================
 * 3. MÓVIL CHICO (≤ 380px) — iPhone SE
 * ===================================================================== */
@media (max-width: 380px) {
  .topbar h1, .topbar-brand h1 { font-size: 13px !important; }
  .topbar a, .topbar button { font-size: 11px !important; padding: 5px 8px !important; }
  .btn { font-size: 13px !important; }
  .nf-toc-link { font-size: 11px !important; padding: 6px 10px !important; }
}

/* =====================================================================
 * 4. ORIENTACIÓN HORIZONTAL en móvil (landscape)
 * ===================================================================== */
@media (max-width: 900px) and (orientation: landscape) {
  /* En landscape se pierde altura — compactar headers */
  .topbar { padding: 6px 12px !important; }
  .topbar-brand h1 { font-size: 13px !important; }
}

/* =====================================================================
 * 5. PERFORMANCE: reducir motion para usuarios que lo prefieren
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
 * 6. PRINT (informes impresos)
 * ===================================================================== */
@media print {
  .topbar, .sidebar, .assistant-bot, .nf-toolbar-actions, button { display: none !important; }
  body { background: white !important; }
  .panel, main { box-shadow: none !important; border: none !important; }
}