/* KASAI MOBILE — Solo activo en móvil <= 768px */

.km-header { display: none; }
.km-nav-bottom { display: none; }
.km-menu-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 600; }
.km-menu { position: fixed; top: 0; right: -280px; width: 280px; height: 100vh; background: #0f0f0f; z-index: 700; transition: right 0.3s ease; flex-direction: column; padding: 30px 0; overflow-y: auto; display: flex; }
.km-privacy { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; }
  img, canvas, video { max-width: 100% !important; }

  .km-sidebar-desktop,
  .sidebar,
  nav[style*="width:240px"] { display: none !important; }

  div[style*="left:240px"][style*="bottom:0"],
  div[style*="left: 240px"][style*="bottom: 0"] { display: none !important; }

  .main, main, #mainContent, #dashboard,
  div[style*="margin-left:240px"] {
    margin-left: 0 !important;
    padding-top: 72px !important;
    padding-bottom: 80px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .km-header {
    display: flex !important;
    align-items: center;
    background: #fff;
    padding: 0 16px;
    border-bottom: 1px solid #E8ECF0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    height: 64px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  }
  .km-header img { height: 46px; width: auto; display: block; }
  .km-header-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: #1A1A1A; font-family: Poppins, sans-serif; }
  .km-header-actions { display: flex; align-items: center; gap: 8px; }
  .km-status-dot { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; flex-shrink: 0; }
  .km-hamburger { background: none; border: none; cursor: pointer; padding: 4px; color: #1A1A1A; display: flex; }

  .km-nav-bottom {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #0f0f0f;
    padding: 8px 0 12px;
    z-index: 500;
    border-top: 1px solid rgba(255,255,255,0.08);
    justify-content: space-around;
    align-items: center;
  }
  .km-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-family: Poppins, sans-serif;
    font-size: 10px;
    padding: 4px 8px;
  }
  .km-nav-item svg { width: 20px; height: 20px; }
  .km-nav-item.active { color: #e53935; }

  .km-menu-overlay.open { display: block !important; }
  .km-menu.open { right: 0 !important; }

  .km-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 16px;
  }
  .km-menu a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    font-size: 13px;
    text-decoration: none;
    font-family: Poppins, sans-serif;
    color: rgba(255,255,255,0.5);
  }
  .km-menu a.active,
  .km-menu a:hover { color: #fff !important; background: rgba(255,255,255,0.05); border-left: 2px solid #e53935; }
  .km-menu-section {
    padding: 12px 24px 4px;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e53935;
    font-weight: 700;
    font-family: Poppins, sans-serif;
  }
  .km-menu-logout {
    margin-top: auto;
    padding: 12px 24px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    font-family: Poppins, sans-serif;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  /* Ocultar footer de escritorio */
  div[style*="position:fixed;bottom:0;left:240px"],
  div[style*="position:fixed;bottom:0;left: 240px"] { display: none !important; }

  /* Aviso privacidad móvil */
  .km-privacy {
    display: block !important;
    text-align: center;
    padding: 12px 16px 16px;
    font-size: 11px;
    color: #aaa;
    font-family: Poppins, sans-serif;
  }
  .km-privacy a { color: #aaa; text-decoration: none; }

  .cal-layout { grid-template-columns: 1fr !important; }
  .charts { grid-template-columns: 1fr !important; }
  .tables { grid-template-columns: 1fr !important; }
  .metrics { grid-template-columns: repeat(2,1fr) !important; }
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
}

/* Fix: evitar zoom en inputs iOS - SOLO MÓVIL */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
  }
}