/* ═══════════════════════════════════════════════════════════════════
   cd-mobile.css — CoinDrop responsive · "se siente como una app"
   ───────────────────────────────────────────────────────────────────
   Capa aditiva. En ≤820px: el rail se esconde tras una hamburguesa y se
   desliza como drawer; el contenido usa todo el ancho; los grids de 2-3
   columnas colapsan a 1; aparece una barra de navegación inferior fija
   (estilo app nativa). No toca la lógica ni los selectores funcionales.
   ═══════════════════════════════════════════════════════════════════ */

/* Botón hamburguesa + backdrop: ocultos en escritorio */
#cd-burger, #cd-mobile-backdrop, #cd-bottomnav { display: none; }

@media (max-width: 820px) {

  /* ── El rail se vuelve un drawer deslizante ──
     FIX AUDITORÍA RESPONSIVE (causa raíz del "todo borroso y el menú no abre"):
     el skin <style id="sidebar-rail-css"> del index carga DESPUÉS de esta hoja
     y define aside.sidebar { z-index:60; width:var(--rail-w)!important }.
     Con z-index 60 el drawer quedaba DEBAJO del backdrop (z 100040): se
     deslizaba, pero tapado por el velo borroso. Y con width 76px era un rail
     de iconos, no un menú. Se blinda con selector de mayor especificidad
     (html aside.sidebar = 0,1,2 > aside.sidebar = 0,1,1) + !important en las
     propiedades en guerra, para ganar sin importar el orden de carga. */
  html aside.sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 254px !important;
    z-index: 100050 !important;
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: 12px 0 40px rgba(0,0,0,.5);
    padding: 8px 0 12px !important;
    align-items: stretch !important;   /* el rail centra; el drawer alinea a lo ancho */
    overflow-y: auto !important;
  }
  html.cd-rail-open aside.sidebar { transform: translateX(0) !important; }

  /* En modo drawer el rail muestra texto (no solo iconos).
     La media base de 900px esconde .sb-item span:not(.sb-ico) — que incluye
     .sb-tip — así que aquí se restaura el display explícitamente. */
  html aside.sidebar .sb-tip {
    display: inline-flex !important; flex-direction: column; align-items: flex-start;
    opacity: 1 !important; visibility: visible !important;
    position: static !important; transform: none !important;
    pointer-events: auto !important; box-shadow: none !important;
    background: none !important; border: none !important; padding: 0 !important;
    font-size: 12.5px; color: #e8e9f3; text-align: left; white-space: normal;
  }
  html aside.sidebar .sb-tip small { display: block !important; }
  html aside.sidebar .sb-item {
    justify-content: flex-start !important; padding: 0 14px !important;
    gap: 12px; width: 100%;
  }
  html aside.sidebar .sb-sec-lbl, html aside.sidebar .sb-uname,
  html aside.sidebar .sb-ulevel, html aside.sidebar .sb-logo em { display: block !important; }

  /* Submenús (flyout): con el drawer a z 100050 quedarían bajo el backdrop
     (su z base es 300) y anclados con left/top inline junto al rail. En móvil
     se convierten en HOJA INFERIOR estilo app: ancho completo, sobre todo. */
  html #sb-flyout {
    z-index: 100060 !important;
    left: 10px !important; right: 10px !important;
    top: auto !important; bottom: 78px !important;
    min-width: 0 !important; max-height: 55vh; overflow-y: auto;
    transform-origin: center bottom;
  }
  html #sb-flyout::before { display: none; }   /* la flecha del tooltip no aplica */

  /* ── Defensivos globales anti-desborde (que se sienta como app) ── */
  html, body { overflow-x: hidden !important; }
  img, video, canvas, svg { max-width: 100%; }
  .page table { display: block; max-width: 100%; overflow-x: auto; }

  /* ── El contenido usa todo el ancho ── */
  .app-wrap { height: auto !important; min-height: calc(100vh - 42px); }
  .app-wrap > *:not(aside):not(.cd-help-overlay) { margin-left: 0 !important; }

  /* ── Backdrop oscuro tras el drawer ── */
  #cd-mobile-backdrop {
    display: block; position: fixed; inset: 0; z-index: 100040;
    background: rgba(4,6,13,.6); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .28s;
  }
  html.cd-rail-open #cd-mobile-backdrop { opacity: 1; pointer-events: auto; }

  /* ── Barra superior móvil con hamburguesa ── */
  #cd-burger {
    display: flex; position: fixed; top: 3px; left: 8px; z-index: 100060;
    width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center;
    background: rgba(245,200,66,.14); border: 1px solid rgba(245,200,66,.3); cursor: pointer;
  }
  #cd-burger svg { width: 18px; height: 18px; }
  #cd-burger svg { width: 22px; height: 22px; stroke: #ffd98a; }

  /* El ticker superior ocupa todo el ancho en móvil (el rail ya no reserva 76px)
     y deja hueco a la derecha de la hamburguesa. */
  #prestige-bar { left: 0 !important; padding-left: 44px; }

  /* Las páginas: menos padding, hueco para hamburguesa arriba y nav abajo */
  .page { padding: 16px 14px 88px !important; }
  .page .topbar { padding-left: 50px; }   /* no chocar con la hamburguesa */

  /* ── Grids que colapsan a una columna ── */
  .cd-dash-grid { grid-template-columns: 1fr !important; padding: 0 4px 24px !important; gap: 14px !important; }
  .dash-grid, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  .lm-bottom { grid-template-columns: 1fr 1fr 1fr !important; }   /* métricas: se mantienen 3 mini */

  /* Cards a ancho completo, radios y padding más cómodos al tacto */
  .card { border-radius: 16px; }
  .dcw-sub, .dcw-tabs { gap: 3px; }
  .dcw-subtab span { font-size: 9.5px; }

  /* Tap targets mínimos 42px en botones clave */
  button, .sb-item, .dcw-tab, .dcw-subtab { min-height: 40px; }

  /* El salón (reloj + podios) se apila en móvil */
  .salon-side, #dash-top-droppers, #dash-top-streamers { width: 100% !important; }

  /* Modales full-width con margen */
  .cd-help-overlay > *, .modal, .drawer { max-width: 94vw !important; }

  /* ── NAVEGACIÓN INFERIOR (estilo app) ── */
  #cd-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100030;
    height: 62px; padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(20,24,38,.92), rgba(12,15,25,.98));
    border-top: 1px solid rgba(245,200,66,.14); backdrop-filter: blur(10px);
    justify-content: space-around; align-items: center;
  }
  #cd-bottomnav button {
    flex: 1; border: 0; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: #8b90b5; font: 700 9.5px Inter, sans-serif; padding: 4px 2px; position: relative;
    transition: color .2s;
  }
  #cd-bottomnav button svg { width: 21px; height: 21px; transition: transform .2s; }
  #cd-bottomnav button.on { color: #ffd98a; }
  #cd-bottomnav button.on svg { transform: translateY(-1px) scale(1.08);
    filter: drop-shadow(0 0 6px rgba(245,200,66,.45)); }
  /* botón central (Dropcerdito) resaltado como moneda */
  #cd-bottomnav .bn-coin {
    margin-top: -18px; width: 50px; height: 50px; flex: none; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffe9a8, #f5c842 46%, #e8a020 82%);
    box-shadow: 0 6px 18px rgba(245,166,35,.5); color: #6b4a08 !important;
    justify-content: center;
  }
  #cd-bottomnav .bn-coin svg { width: 24px; height: 24px; stroke: #6b4a08; }
  #cd-bottomnav .bn-coin span { display: none; }

  /* footer no debe quedar bajo la nav inferior */
  .cd-footer { padding-bottom: 80px !important; }
}

/* Pantallas muy angostas: métricas a 1 fila apretada legible */
@media (max-width: 380px) {
  .lm-bottom { grid-template-columns: 1fr 1fr !important; }
  #cd-bottomnav button span { font-size: 8.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORÍA RESPONSIVE GLOBAL (2026-07-12)
   Rupturas detectadas en la auditoría del sitio y corregidas mobile-first.
   ═══════════════════════════════════════════════════════════════════════ */

/* Dashboard: grid de 3 columnas (0.8fr 1.2fr 280px) → apilado en tablet/mobile */
@media (max-width: 1100px) {
  .cd-dash-grid { grid-template-columns: 1fr 280px !important; }
}
@media (max-width: 900px) {
  .cd-dash-grid { grid-template-columns: 1fr !important; }
  .cd-dash-grid > * { min-width: 0; }
}

/* Modal cerrar sesión: en mobile más aire lateral, sin desbordarse */
@media (max-width: 400px) {
  .lg-card { padding: 28px 20px 20px !important; max-width: calc(100vw - 32px) !important; }
  .lg-title { font-size: 17px !important; }
  .lg-emblem { width: 64px !important; height: 64px !important; margin-bottom: 14px !important; }
  .lg-btns button { padding: 11px !important; font-size: 12px !important; }
}

/* Toasts: en mobile ocupan casi todo el ancho, sin desbordar */
@media (max-width: 480px) {
  .cd-toast { left: 12px !important; right: 12px !important; max-width: none !important;
    transform: none !important; }
}

/* Prevención de scroll horizontal global (regla de barrido) */
html, body { overflow-x: hidden; }

/* Cards genéricas: no permitir que su contenido las estire */
.card, .kpi, .rk-item, .camp-card { min-width: 0; }

/* Tablas con min-width: siempre en wrapper con scroll horizontal */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Imágenes: nunca desbordan su contenedor */
img { max-width: 100%; height: auto; }

/* Botones con SVG: el SVG no debe forzar el ancho */
button svg { max-width: 100%; }

/* Inputs y textareas: siempre dentro de su contenedor */
input, textarea, select { max-width: 100%; box-sizing: border-box; }