/* =========================
   GoCorte · Mobile Overrides (PRO)
   Forzar tamaño/espacios en 320–430px
   ========================= */
@media (max-width: 919.98px){

  /* Escala y variables móviles */
  html, body{ font-size: clamp(13px, 3.5vw, 15px) !important; }
  :root{
    --gc-scale: clamp(.86, calc((100vw - 320px)/110 * .14 + .86), 1) !important;
    --bn-h: 52px !important; /* bottom-nav más bajo en mobile */
  }

  /* ===== Header compacto ===== */
  body .header{ min-height: 54px !important; padding: 8px 12px !important; gap: 8px !important; }
  body .header .brand{ font-size: calc(14px * var(--gc-scale)) !important; font-weight: 700 !important; }
  body .head-actions .btn,
  body .head-actions .logout{ padding: 8px 10px !important; font-size: 12px !important; line-height: 1 !important; }
  body .bell{ transform: scale(.9) !important; }

  /* ===== Cards / textos ===== */
  body .card{ padding: clamp(12px, 3.4vw, 16px) !important; border-radius: 14px !important; }
  body .card h2{ font-size: clamp(16px, 5vw, 18px) !important; margin-bottom: 6px !important; }
  body .small{ font-size: 12.5px !important; }

  /* ===== Botones ===== */
  body .btn{ height: 38px !important; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; font-weight: 700 !important; }
  body .quick{ display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 8px !important; }
  body .quick .btn{ height: 40px !important; }

  /* Inputs (evitar zoom iOS) */
  body input, body select, body textarea{ font-size: 16px !important; }

  /* ===== KPIs compactos ===== */
  body .kpis{ display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 10px !important; }
  body .kpi h4{ font-size: 12.5px !important; margin-bottom: 4px !important; }
  body .kpi .num{ font-size: clamp(18px, 7.5vw, 24px) !important; line-height: 1.1 !important; }
  body .kpi .liquid-bar{ height: 28px !important; border-radius: 999px !important; }
  body .kpi .liquid-waves{ height: 18px !important; bottom: -4px !important; }
  body .kpi .capacity-hint{ font-size: 11.5px !important; }

  /* ===== Copybox / Links ===== */
  body .copybox input{ height: 40px !important; padding: 0 10px !important; }

  /* ===== Drawer (Accesos) ===== */
  body .m-drawer__panel{
    width: min(94vw, 520px) !important;
    max-height: min(72vh, 560px) !important;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom) + var(--bn-h)) !important;
  }
  body .m-drawer__item{ height: 44px !important; font-size: 13px !important; }

  /* ===== Bottom-Nav (más bajo y legible) ===== */
  body #bn{
    height: var(--bn-h) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    backdrop-filter: saturate(160%) blur(8px) !important;
  }
  body #bn .nav-item{ gap: 2px !important; padding-top: 4px !important; }
  body #bn .nav-icon svg{ width: 22px !important; height: 22px !important; }
  body #bn .nav-label{ font-size: 10.5px !important; }

  /* En pantallas MUY chicas: solo íconos */
  @media (max-width: 360px){
    :root{ --bn-h: 48px !important; }
    body #bn .nav-label{ display:none !important; }
    body #bn .nav-icon svg{ width: 24px !important; height: 24px !important; }
  }

  /* ===== Tutorial (card/tooltip) ===== */
  body .gc-tutorial-card{ max-width: 92vw !important; padding: 22px !important; border-radius: 16px !important; }
  body .gc-tutorial-card-title{ font-size: 20px !important; }
  body .gc-tutorial-card-subtitle{ font-size: 12.5px !important; }
  body .gc-tutorial-checklist{ gap: 10px !important; }
  body .gc-tutorial-checklist-item{ padding: 10px !important; border-radius: 10px !important; }
  body .gc-tutorial-checklist-text{ font-size: 13px !important; }
  body .gc-tutorial-card-btn{ padding: 12px !important; font-size: 14px !important; }

  body .gc-tutorial-tooltip{ max-width: min(92vw, 340px) !important; padding: 14px !important; border-radius: 14px !important; }
  body .gc-tutorial-title{ font-size: 16px !important; }
  body .gc-tutorial-description{ font-size: 13px !important; }
  body .gc-tutorial-progress{ padding: 8px !important; }
  body .gc-tutorial-btn{ padding: 9px 14px !important; font-size: 13px !important; }

  body .gc-tutorial-spotlight{
    border-width: 2px !important;
    box-shadow: 0 0 0 99999px rgba(11,15,25,.82),
                0 0 24px rgba(0,188,212,.45),
                inset 0 0 18px rgba(0,188,212,.12) !important;
  }

  /* ===== Notificaciones ===== */
  body #notifDrop{ width: min(92vw, 360px) !important; max-height: calc(100vh - 140px) !important; }
  body #notifDrop .note .small{ font-size: 12px !important; }

  /* ===== Achievements ===== */
  body #achvBox{ padding: 10px 12px !important; border-radius: 12px !important; }
  body #achvBox .small{ font-size: 12px !important; }

  /* ===== Grids ===== */
  body .grid{ gap: 10px !important; }
}

/* Menos animaciones en móviles viejos */
@media (prefers-reduced-motion: reduce){
  .kpi .liquid-fill, .kpi .liquid-waves .wave, .kpi .liquid-waves .wave2,
  .gc-tutorial-tooltip, .gc-tutorial-card{ animation:none !important; transition:none !important; }
}
/* =========================
   Tutorial – compactar en móviles
   ========================= */
@media (max-width: 919.98px){

  /* Más ancho y menos alto + scroll interno */
  body .gc-tutorial-card{
    width: 96vw !important;
    max-width: 96vw !important;           /* un poquito más ancho */
    max-height: min(86vh, 520px) !important; /* más bajo */
    overflow: auto !important;            /* si se pasa, scrollea adentro */
    padding: 18px !important;             /* menos padding */
    border-radius: 16px !important;
  }
  /* Extra en pantallas MUY chicas: usar casi todo el ancho */
  @media (max-width: 360px){
    body .gc-tutorial-card{
      width: 98vw !important;
      max-width: 98vw !important;
      max-height: min(86vh, 500px) !important;
    }
  }

  /* Header de la tarjeta más compacto */
  body .gc-tutorial-card-header{ margin-bottom: 12px !important; }
  body .gc-tutorial-card-emoji{
    font-size: 40px !important;
    margin-bottom: 8px !important;
  }
  /* En iPhones angostos oculto el emoji para ganar alto */
  @media (max-width: 380px){
    body .gc-tutorial-card-emoji{ display: none !important; }
  }
  body .gc-tutorial-card-title{
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  body .gc-tutorial-card-subtitle{
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Checklist más corto (menos paddings/gap) */
  body .gc-tutorial-checklist{
    gap: 8px !important;
    margin: 14px 0 !important;
  }
  body .gc-tutorial-checklist-item{
    padding: 8px 10px !important;
    border-radius: 10px !important;
  }
  body .gc-tutorial-checklist-icon{
    width: 26px !important; height: 26px !important;
    font-size: 16px !important;
  }
  body .gc-tutorial-checklist-text{
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  /* Botonera más compacta */
  body .gc-tutorial-card-actions{ gap: 8px !important; }
  body .gc-tutorial-card-btn{
    padding: 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* Tooltip un toque más corto también */
  body .gc-tutorial-tooltip{
    max-width: min(94vw, 360px) !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }
  body .gc-tutorial-title{ font-size: 16px !important; }
  body .gc-tutorial-description{ font-size: 13px !important; }
  body .gc-tutorial-progress{ padding: 8px !important; }
  body .gc-tutorial-btn{ padding: 9px 14px !important; font-size: 13px !important; }

  /* Spotlight más fino (menos “halo” → menos sensación de alto) */
  body .gc-tutorial-spotlight{
    border-width: 2px !important;
    box-shadow:
      0 0 0 99999px rgba(11,15,25,.80),
      0 0 20px rgba(0,188,212,.40),
      inset 0 0 14px rgba(0,188,212,.10) !important;
  }

  /* Bottom-nav un pelín más bajo para liberar viewport */
  :root{ --bn-h: 50px !important; }
  body #bn{ height: var(--bn-h) !important; }
}