/* RadioAds360 — arreglos del dashboard en móvil (Parche E, parte CSS).
 * Archivo compartido: se carga con un <link> DESPUÉS del <style> en línea de
 * cada página, así estas reglas ganan la cascada. Cubre:
 *   P2 — desbordamiento horizontal (la página se sale de la pantalla)
 *   P3 — la pastilla verde "Payments" rota en el topbar
 * El menú (P1) lo arma dash-mobile.js; aquí van sus estilos.
 * Nada de esto afecta a escritorio: todo va bajo @media(max-width:920px) o
 * sobre elementos que en escritorio están ocultos. */

/* ---- P1: botón hamburguesa (solo cuando el sidebar se oculta, ≤920px) ---- */
.dm-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  margin-right:auto;padding:0;border:1px solid #e4e7ec;border-radius:11px;background:#fff;
  color:#0c0e11;cursor:pointer;flex:0 0 auto}
.dm-burger svg{width:22px;height:22px}
@media(max-width:920px){ .dm-burger{display:inline-flex} }

/* ---- P1: menú móvil — UN solo overlay fixed con las 4 aristas (patrón
        corregido: sin scrim aparte, sin position:absolute colgado de sticky) - */
.dm-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(16,24,40,.45);z-index:2000;overflow:hidden}
.dm-menu.open{display:block}
.dm-panel{position:absolute;top:0;left:0;bottom:0;width:82%;max-width:300px;background:#fff;
  box-shadow:0 0 40px rgba(16,24,40,.35);overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
  transform:translateX(-100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.dm-menu.open .dm-panel{transform:translateX(0)}
.dm-brand{display:flex;align-items:center;gap:10px;padding:4px 10px 14px;
  font-weight:800;font-size:17px;color:#0c0e11}
.dm-brand img{width:32px;height:32px;border-radius:9px}
.dm-panel a{display:flex;align-items:center;gap:13px;padding:12px 12px;border-radius:11px;
  color:#475467;font-size:15px;font-weight:600;text-decoration:none}
.dm-panel a svg{width:20px;height:20px;flex:0 0 20px;color:#98a2b3}
.dm-panel a.active{background:#ecfdf3;color:#15803d}
.dm-panel a.active svg{color:#16a34a}
.dm-panel a:active{background:#f2f4f7}

/* ---- P3: la pastilla verde "Payments" — quitar el fondo sobrante -------- */
/* .balance a arrastraba un degradado verde de un botón viejo de "Add funds",
   que ahora envuelve un enlace de texto verde → verde sobre verde, desbordado.
   Se deja como enlace plano dentro de su caja blanca. */
.balance a{background:transparent !important;box-shadow:none}

/* ---- P2: desbordamiento horizontal ------------------------------------- */
@media(max-width:920px){
  /* El contenedor de scroll recorta en horizontal: nada de su interior puede
     ensanchar la página. El scroll vertical (overflow-y:auto) se conserva. */
  .scroll{overflow-x:hidden}
  /* Las tablas anchas scrollean dentro de su propia caja, no en la página. */
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Tarjetas de estadísticas (.stats): apilar una por fila en móvil. El
   !important es imprescindible porque algunas se renderizan con un
   grid-template-columns INLINE (p. ej. facturacion.js:155,259) que, sin él,
   vence a la regla y deja las tarjetas en varias columnas → recortadas por el
   guardián de overflow. Con esto se apilan, que es lo más legible. */
@media(max-width:600px){ .stats{ grid-template-columns:1fr !important } }