/* ─────────────────────────────────────────────────────────────────────
 * css/responsive.css · S 27e
 *
 * Hoja única de adaptaciones para tablet (≤1024px) y móvil (≤640px).
 * Se carga DESPUÉS de app.css y expedientes.css para sobrescribir.
 *
 * Diseño:
 *   · Mobile-first NO: el desktop ya funciona, aquí solo bajamos.
 *   · Usamos !important en reglas que sobrescriben `style=""` inline
 *     de las vistas (necesario por especificidad CSS).
 *   · Breakpoints:
 *       1024px  · tablet (sidebar más estrecha, grids 2 cols)
 *        640px  · móvil  (sidebar overlay, tablas scroll, todo apilado)
 *        400px  · móvil pequeño (paddings y tipografía reducidos)
 * ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
 * TABLET · ≤ 1024px
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sidebar { width: 200px; }
  .page { padding: 14px; }

  /* KPI cards: 2 columnas en lugar de 5 */
  .ops-cards { grid-template-columns: repeat(2, 1fr) !important; }

  /* Grids inline 1.4fr 1fr (cronología + motivos · sparkline + módulos):
     pasan a 1 columna */
  .page > section > div[style*="grid-template-columns:1.4fr"],
  .page div[style*="grid-template-columns:1.4fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Toolbar de agenda y otros headers: flex-wrap aplicable */
  .agenda-toolbar { flex-wrap: wrap; }
  .ops-header { flex-wrap: wrap; gap: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * MÓVIL · ≤ 640px
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Sidebar overlay · sale desde la izquierda con hamburguesa ──── */
  .shell {
    display: block !important;
    position: relative;
  }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 18px rgba(0,0,0,0.15);
  }
  /* Si el shell NO está colapsado (sidebar visible), mostramos overlay */
  .shell:not(.sidebar-collapsed) .sidebar { transform: translateX(0); }
  /* Backdrop tras el sidebar cuando está abierto */
  .shell:not(.sidebar-collapsed)::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
    pointer-events: auto;
  }
  /* En móvil el "colapsado" por defecto es oculto (al revés que escritorio) */
  .shell.sidebar-collapsed .sidebar { transform: translateX(-100%); }

  .main { width: 100%; }
  .topbar { padding: 10px 12px; flex-wrap: wrap; }
  .topbar h1 { font-size: 18px; }
  .page { padding: 10px; }

  /* ── KPI cards: 1 columna ──────────────────────────────────────── */
  .ops-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .ops-card-value { font-size: 26px !important; }

  /* ── ops-tr (tablas con grid inline): scroll horizontal ────────── */
  .ops-table { overflow-x: auto; }
  .ops-trh, .ops-tr { min-width: 700px; }

  /* ── Modales · fullscreen con padding mínimo ───────────────────── */
  .modal-backdrop { padding: 0 !important; align-items: stretch !important; }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .modal-body { padding: 12px !important; }
  .modal-foot { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
  .modal-foot .btn { font-size: 12px; padding: 8px 10px; }

  /* Grids inline 1fr 1fr (KPI modales detalle, formularios 2 cols):
     pasan a 1 columna */
  .modal-body div[style*="grid-template-columns:1fr 1fr"],
  .modal-body form[style*="grid-template-columns:1fr 1fr"],
  .modal-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Agenda · semana con scroll horizontal ─────────────────────── */
  .week-grid {
    grid-template-columns: 40px repeat(7, minmax(140px, 1fr)) !important;
    overflow-x: auto;
  }
  .month-grid {
    grid-template-columns: repeat(7, minmax(70px, 1fr));
    overflow-x: auto;
    display: grid;
  }

  /* ── ops-header: stack vertical ───────────────────────────────── */
  .ops-header { flex-direction: column; align-items: stretch; }
  .ops-header > div { width: 100%; }

  /* ── Brief modal: secciones más compactas ─────────────────────── */
  .brief-head { flex-direction: column; }
  .brief-info h2 { font-size: 16px; }
  .brief-section { padding: 10px 12px; }
  .brief-asistentes { gap: 4px; }
  .brief-asistente { font-size: 12px; }
  .brief-enlaces { grid-template-columns: 1fr !important; }

  /* ── Modal Brief / EventoForm: foot apilado ───────────────────── */
  .modal-foot { justify-content: flex-end; }
  .modal-foot > .left { width: 100%; }
  .modal-foot .btn { flex: 1; min-width: 100px; }

  /* ── Formularios: inputs/selects al 100% ──────────────────────── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid label { width: 100%; }

  /* ── Tabs (vistas Día/Semana/Mes/Lista) ───────────────────────── */
  .tab-group { flex-wrap: wrap; }
  .tab { padding: 6px 10px; font-size: 12px; }

  /* ── Cuotas SEPA: la tabla scrollea horizontal ────────────────── */
  .ops-table .ops-tr,
  .ops-table .ops-trh {
    min-width: 900px;
  }

  /* Esconder algunas columnas no críticas en pantallas pequeñas si
     procede - vista log de errores y SEPA siguen siendo usables
     gracias al scroll horizontal. */
}

/* ═══════════════════════════════════════════════════════════════════
 * MÓVIL PEQUEÑO · ≤ 400px
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .topbar h1 { font-size: 16px; }
  .page { padding: 8px; }
  .ops-card-value { font-size: 22px !important; }
  .btn { font-size: 12px; padding: 6px 10px; }
  .modal-head h2 { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Mejoras táctiles · cualquier pantalla con touch
 * ═══════════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .btn, .menu-item, .tab, .ops-tr {
    min-height: 38px;       /* área táctil mínima */
  }
  .icon-btn { padding: 8px; }
  /* Hover-cards: usar long-press o tap en lugar de hover */
  .hover-card-root { display: none !important; }
}