/* ════════════════════════════════════════════════════════════════
   MI TURNO · base/blur-fix.css
   Fix global: backdrop-filter consistente durante scroll en iOS
   
   PROBLEMA: backdrop-filter en iOS Safari se "pega" al hacer scroll
   y no actualiza el blur con el contenido que pasa debajo.
   
   SOLUCIÓN: forzar GPU compositing + repaint en cada frame con
   transform: translateZ(0) y will-change estratégico.
   ════════════════════════════════════════════════════════════════ */

/* Fluidez global y comportamiento nativo */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none; /* Evita el bounce del body, se maneja en .scr */
}

/* ─── REGLA UNIVERSAL: cualquier elemento con backdrop-filter ─── */
[class*='card'],
.modal-card,
.ovl,
.hdr,
.tabs,
.btn-glass,
.dash-hero,
.kpi-card,
.tip-box,
  .num-glass-card,
  .auth-logo-box,
.auth-card,
.bar-track,
.hist-row,
.brk-row,
.chat-bubble {
  /* Forzar GPU compositing → backdrop-filter se actualiza correctamente */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Aislar el contexto de pintura */
  isolation: isolate;
}

/* ─── Para los elementos que tienen blur Y están dentro de scroll ─── */
.scr [class*='card'],
.scr .modal-card,
.scr .btn-glass,
.scr .kpi-card,
.scr .tip-box,
.scr .hist-row,
.scr .brk-row {
  /* Re-render durante scroll */
  will-change: transform, backdrop-filter;
  /* Mantener composición consistente */
  contain: layout style;
}

/* ─── Overlay: blur estático en su propia capa, nunca scrollea ─── */
.ovl {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* No will-change:backdrop-filter — queremos que el blur sea ESTÁTICO */
  contain: paint;
  overflow: hidden; /* refuerzo: el scroll va en .modal-card */
}

/* ─── Modal card: scroll propio, aislado del blur del overlay ─── */
.modal-card {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* Contener pintura: el scroll interno no afecta la capa del overlay */
  contain: paint layout;
}

/* ─── Reset will-change al terminar scroll (optimización iOS) ─── */
@supports (-webkit-touch-callout: none) {
  /* Solo iOS: composición agresiva */
  .hdr,
  .tabs,
  .modal-card,
  .dash-hero,
  .kpi-card,
  .tip-box {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
  }
}

/* ─── Para tarjetas en el .scr durante scroll activo ─── */
.scr {
  /* El contenedor scroll también debe estar en su capa GPU */
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
    overscroll-behavior-y: contain;
    scroll-padding-top: 80px; /* Evita que el contenido quede bajo el header al scrollear a un ID */
}