/* ═══════════════════════════════════════════════════════════════════
   mobile.css — Capa responsive unificada (Fase 1 móvil, 2026-07-02)
   ═══════════════════════════════════════════════════════════════════

   SISTEMA DE BREAKPOINTS (usar SOLO estos tres):
     @media (max-width: 768px)  → móvil + tablet vertical (regla principal)
     @media (max-width: 480px)  → teléfono
     @media (max-width: 380px)  → teléfono chico (solo casos extremos)

   REGLAS DE ORO — dónde vive cada CSS responsive:
   1. Este archivo se carga DESPUÉS de style.css y colors_and_type.css
      en index.html → a igual especificidad, GANA en cascada.
   2. Aquí van SOLO pantallas cuyo CSS vive en style.css:
      Agenda, Pacientes, Pagos, Financiero, Billing, Welcome,
      Papelera, shell global (sidebar/header/modales).
   3. Los módulos que INYECTAN su CSS vía JS llevan sus @media DENTRO
      de su propio template literal (CLAUDE.md §11.B) — aquí NO aplican:
      confirmations.js, consents.js, prescriptions.js, medical-history.js,
      sofia-supervision.js, templates-admin.js, patient-timeline.js,
      patient-flags-banner.js, ai-assistant.js, visitadores.js,
      confirm-delete-modal.js.
   4. odontograma.html / presupuesto.html / perio.html: páginas standalone
      con CSS inline propio (CLAUDE.md §11.A) — su responsive va inline ahí.
   5. Touch target mínimo: 44×44px (Apple HIG / WCAG AA).
   6. Modo nocturno: todo fondo claro nuevo necesita su par html.theme-night
      (bug recurrente de contraste).
   7. Nuevo asset de shell ⇒ alta en SHELL_ASSETS + bump CACHE_VERSION
      en service-worker.js.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens móviles ─────────────────────────────────────────────── */
:root {
  --touch-target: 44px;   /* mínimo Apple HIG / WCAG AA */
  --mobile-pad: .75rem;   /* padding estándar de contenedores en móvil */
  --mobile-bottom-gap: 5rem; /* espacio para nav/FABs inferiores fijos */
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL ≤768px — shell y arreglos transversales
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* El síntoma #1 de "se ve rota en el cel": algo desborda y toda la
     página scrollea de lado. El scroll horizontal legítimo (agenda,
     tablas) vive DENTRO de sus contenedores (.fin-scroller, #agendaGrid,
     .table-scroll), nunca en el body. */
  html, body {
    overflow-x: hidden;
  }

  /* iOS Safari hace ZOOM automático al enfocar inputs con fuente <16px.
     Se percibe como "la app brinca / se descuadra al escribir". El !important
     es a propósito: varios controles nuevos (toggles de agenda, selects del
     cierre premium) traen font-size inline <16px que ganaría la cascada sin él
     y re-activaría el zoom (auditoría móvil 2026-07-04). */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Mata el delay de 300ms del doble-tap y el flash gris al tocar */
  button, a, [role="button"], .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Media nunca desborda su contenedor */
  img, svg, video, canvas {
    max-width: 100%;
    height: auto;
  }

  /* Headers de página: que envuelvan en vez de desbordar */
  .page-header {
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  /* ══ BUG tema+móvil (capturas iPhone 2026-07-02/03, cazado 07-03):
     html.theme-night/.theme-day .sidebar (style.css:4760/4841, glassmorphism
     de escritorio) declara position:relative + z-index:10 y LE GANA al drawer
     del media query (los @media NO suman especificidad) → con tema Diurno o
     Nocturno el sidebar entra al FLUJO, ocupa ~260px a la izquierda y aplasta
     todo el contenido a la derecha. En Clásico no pasa (sin clase de tema).
     Este archivo carga al final → misma especificidad, gana la cascada. ══ */
  html.theme-night .sidebar,
  html.theme-day .sidebar {
    position: fixed;
    z-index: 300; /* el drawer va SOBRE el overlay (299), como en style.css:2017 */
  }

  /* Mina hermana: html:is(.theme-night,.theme-day) :is(.col-time,...)
     (style.css:5477) pisa el sticky de la columna de horas → en vista Semana
     móvil las horas se iban con el scroll horizontal en temas Diurno/Nocturno. */
  html:is(.theme-night, .theme-day) .col-time {
    position: sticky;
  }

  /* ══ BUG RAÍZ "no funciona ningún panel en vertical" (verificado en
     vivo 2026-07-02, lab 390px, página Pagos):
     La arquitectura desktop usa .page{overflow:hidden} + scrollers
     internos de altura flex. En móvil los hermanos flex aplastan esos
     contenedores a 0px (payments-table-container: scrollH 2627 /
     clientH 0) y el contenido queda INALCANZABLE.
     Antídoto móvil: la página entera scrollea como documento y ningún
     hijo directo se comprime. Agenda se excluye (su grid con scroll
     interno propio funciona bien). ══ */
  .page:not(#pageAgenda) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .page:not(#pageAgenda) > * {
    flex-shrink: 0;
  }

  /* FABs flotantes (🔔 #notifFab, 🤖 .ai-fab) tapaban botones de modales
     y del panel de cita (z:1000 vs panel z:400). En móvil bajan a z:300:
     quedan sobre el contenido y la .mobile-nav (z:200) pero DEBAJO del
     panel de cita (z:400) y de los modales (z:1000). Inline styles en
     notifications.js → !important necesario (excepción documentada). */
  #notifFab { z-index: 300 !important; }
  #notifPanel { z-index: 310 !important; }
  .ai-fab { z-index: 300 !important; }
  .ai-panel { z-index: 310 !important; }
}

/* ── Utilidad transversal: tabla con scroll propio ──────────────
   Envolver tablas anchas en <div class="table-scroll"> (patrón de
   .fin-scroller/.billing-scroller generalizado). Aplica en todo ancho;
   en desktop simplemente no estorba. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-scroll > table {
  min-width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   PANTALLAS (se llenan pantalla por pantalla, Tier 1 → 2 → 3)
   ════════════════════════════════════════════════════════════════ */

/* ── Tier 1 · Agenda ────────────────────────────────────────────── */
/* Base móvil (mobile-list, mobile-appt-card, panel full-screen) vive
   en style.css:1591-2100 y funciona. Ajustes nuevos van aquí. */
@media (max-width: 768px) {
  /* Vista SEMANA en el cel: el swipe engancha por día (scroll-snap).
     La columna de horas (.col-time sticky left, 48px en móvil) y los
     encabezados de día (.col-header sticky top) ya vienen de style.css.
     scroll-padding deja visible la columna de horas al enganchar. */
  #agendaGrid {
    scroll-snap-type: x proximity;
    scroll-padding-left: 48px;
  }
  #agendaGrid .col-day {
    scroll-snap-align: start;
  }

  /* La barra inferior respeta el home-bar del iPhone (gesto de inicio) */
  .mobile-nav {
    padding-bottom: max(.5rem, env(safe-area-inset-bottom, .5rem));
  }

  /* Apilado de flotantes en Agenda móvil (de abajo hacia arriba):
       .mobile-nav (~52px) → 🤖 .ai-fab (64px, en ai-assistant.js §11.B)
       → 🔔 #notifFab (124px) → drawer #notifPanel (184px).
     #notifFab/#notifPanel usan estilos INLINE (notifications.js), por eso
     el override necesita !important — excepción documentada, no patrón. */
  body[data-page="agenda"] #notifFab {
    bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body[data-page="agenda"] #notifPanel {
    bottom: calc(184px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 60vh !important;
  }
}

/* ── Tier 1 · Pacientes ─────────────────────────────────────────── */

/* ── Tier 1 · Pagos ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* La tabla colapsaba a 0px (ver nota BUG RAÍZ arriba); además es ancha:
     scroll horizontal propio, nunca de la página. */
  .payments-table-container {
    height: auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Tier 1 · Dashboard (Welcome) ───────────────────────────────── */
/* Causa raíz (verificada en vivo 2026-07-02, lab 390px): .welcome-container
   es flex-item con min-width:auto → NO se encoge por debajo del ancho
   intrínseco de sus grids internos (quick-actions 2×234px, dashboard-stats
   503px) y desborda a ~545px en un viewport de 374px. */
@media (max-width: 768px) {
  .welcome-container {
    min-width: 0;
    max-width: 100%;
    padding: 1.25rem .9rem;
  }
  /* Deja que TODO el contenido del dashboard se encoja (grids/flex anidados
     heredan el mismo problema de min-width:auto) */
  .welcome-container * {
    min-width: 0;
  }
  .quick-actions-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Tier 2 · Financiero (solo lectura) ─────────────────────────── */

/* ── Tier 2 · Billing ───────────────────────────────────────────── */

/* ── Tier 3 · Aviso "mejor en pantalla grande" ──────────────────── */
/* Pantallas densas (Ajustes/Usuarios/Auditoría/Papelera/Plantillas viven
   como tabs dentro de pageClinicSettings; Import GCal y Supervisión Sofía
   son páginas propias). Aviso amable NO bloqueante — la pantalla sigue
   usable con scroll. Perio/odontograma/presupuesto son standalone (§11.A). */
@media (max-width: 768px) {
  #pageClinicSettings::before,
  #pageGcalImport::before,
  #pageSofiaSupervision::before {
    content: '💻 Esta sección es densa — se trabaja mejor en computadora o tablet. Aquí puedes consultarla con scroll.';
    display: block;
    margin: .75rem .9rem 0;
    padding: .6rem .8rem;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    color: #92400e;
    font-size: .8rem;
    line-height: 1.4;
  }
  /* Par de modo nocturno (regla §6 de este archivo) */
  html.theme-night #pageClinicSettings::before,
  html.theme-night #pageGcalImport::before,
  html.theme-night #pageSofiaSupervision::before {
    background: rgba(120, 53, 15, .35);
    border-color: #92400e;
    color: #fcd34d;
  }
}

/* ── Tier 3 → usable · Usuarios y Ajustes en cel (T5 2026-07-09) ── */
/* Lo mínimo que un admin_clinica CLIENTE necesita hacer desde el cel:
   ver/crear usuarios y tocar los settings de su clínica. Auditoría/Papelera/
   Plantillas/Import GCal/Supervisión conservan solo el banner de arriba.
   OJO: users.js INYECTA su CSS en <style> al final del <head> (patrón §11.B
   de CLAUDE.md) — gana el empate de especificidad, por eso los !important. */
@media (max-width: 768px) {
  /* Usuarios: la tabla ancha se desplaza horizontal en vez de aplastarse */
  .users-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .users-table { min-width: 640px; }
  .users-table th, .users-table td { padding: .5rem .6rem !important; font-size: .8rem !important; }
  /* Ajustes (Mi Clínica): tarjetas a una columna, sin apretarse */
  .clinic-settings-grid { display: block !important; padding: 1rem !important; }
  .clinic-settings-grid > * { margin-bottom: .9rem; }
  /* Modales de usuarios a pantalla casi completa en cel */
  .users-modal { max-width: 100% !important; max-height: 94vh !important; }
  .users-modal .modal-body { -webkit-overflow-scrolling: touch; }
}

/* ── Agenda · toolbar compacta en cel ───────────────────────────── */
@media (max-width: 768px) {
  /* Exportar CSV en el cel no tiene caso; el botón ＋ de la toolbar
     duplica el ＋ de la barra inferior (.mobile-nav). Menos filas de
     controles = más agenda visible. display:none !important vence al
     style inline que el JS usa para mostrarlos por rol. */
  #btnExportAppointmentsCsv,
  #btnNewAppt {
    display: none !important;
  }
}

/* ── Pagos · acciones de la tabla al mínimo táctil ──────────────── */
@media (max-width: 768px) {
  #payments-table button {
    min-width: 40px;
    min-height: 40px;
    padding: .4rem;
  }
}

/* ── Ficha de paciente · targets táctiles (auditoría móvil 2026-07-18) ── */
@media (max-width: 768px) {
  /* Botones 🗑/✕ de fotos clínicas y documentos: patients.js les pone
     width/height 24px INLINE → !important necesario (excepción
     documentada, mismo caso que #notifFab arriba). */
  [data-doc-delete],
  [data-cp-delete] {
    width: 38px !important;
    height: 38px !important;
  }
  /* Accesos rápidos de la ficha (🦷 Odontograma, 🫧 Perio, 📲 Pre-registro,
     📜 Línea de tiempo): links/botones sin clase, con estilos inline en
     patients.js:1032-1049 — se seleccionan por href/data-action para no
     tocar otros elementos del modal. El padding inline gana; min-height +
     inline-flex garantizan el target y el centrado vertical. */
  #patientModalBody a[href^="/odontograma.html"],
  #patientModalBody a[href^="/perio.html"],
  #patientModalBody button[data-action="send-preregister"],
  #patientModalBody button[data-action="open-timeline"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}