/* ════════════════════════════════════════════════════════════════
   CINKIFY · Responsive móvil/tablet (cargar DESPUÉS del <style> de cada página)
   - SHELL (sidebar→barra inferior): hasta 1024px (cubre móvil + tablet táctil).
   - Ajustes de contenido (chat, landing, grids…): hasta 768px (móvil).
   ════════════════════════════════════════════════════════════════ */

html, body { max-width: 100%; }
img, video, canvas, svg { max-width: 100%; }

/* ─── SHELL: sidebar como barra de navegación inferior (móvil + tablet) ─── */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  body { height: auto !important; min-height: 100vh; overflow-y: auto !important; }
  .app-shell { height: auto !important; min-height: 100dvh; overflow: visible !important; flex-direction: column; }
  .main { height: auto !important; overflow: visible !important; padding-bottom: 74px; }

  .sidebar {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100% !important; height: 62px;
    flex-direction: row; align-items: center; justify-content: space-around;
    padding: 0 4px; border-right: none; border-top: 1px solid rgba(0,0,0,.07);
    background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 22px rgba(31,38,135,.10);
    overflow-x: auto; overflow-y: hidden; z-index: 7000; transition: none;
  }
  .sidebar:hover { width: 100% !important; background: rgba(255,255,255,0.97); box-shadow: 0 -4px 22px rgba(31,38,135,.10); }
  .s-logo, .s-divider, .s-label, .s-section-hdr, .s-section-lbl, .s-section-arrow, .s-ai-usage { display: none !important; }
  .s-sections { flex-direction: row; flex: 1; width: auto; overflow-x: auto; overflow-y: hidden; min-height: 0; align-items: center; }
  .s-section, .s-section-body { width: auto; }
  .s-section-body, .s-section.open .s-section-body, .sidebar:hover .s-section.open .s-section-body { max-height: none !important; opacity: 1 !important; overflow: visible; }
  .s-nav, .s-section-body .s-nav { flex-direction: row; padding: 0; gap: 2px; width: auto; }
  .s-item, .s-back-item, .s-trab-item, .s-section-body .s-nav .s-item {
    flex-direction: column; height: 54px; width: 62px; min-width: 62px;
    gap: 2px; justify-content: center; border-radius: 12px; margin: 0 !important; padding: 6px 2px; flex: none;
  }
  .s-item .s-icon, .sidebar:hover .s-item .s-icon, .s-back-item .s-icon { width: auto !important; min-width: 0 !important; font-size: 18px; }
  .s-item .s-name, .sidebar:hover .s-item .s-name, .s-back-item .s-name {
    opacity: 1 !important; transform: none !important;
    font-size: 9.5px; font-weight: 700; flex: none; text-align: center;
    max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .s-item.disabled, .s-soon, .s-new-btn, .s-empty, .s-trab-input-row { display: none !important; }

  /* contenido principal a ancho completo (sin el hueco del sidebar) */
  .main { width: 100% !important; }
  /* FABs por encima de la barra inferior */
  .chat-fab { bottom: 78px !important; }
}

/* ─── CONTENIDO: ajustes de móvil ─── */
@media (max-width: 768px) {
  /* INDEX: chat + landing */
  .chat-wrap { padding: 16px 14px 18px; overflow: visible; }
  .input-wrap, .messages, .chat-empty, .suggestions { max-width: 100% !important; }
  .input-wrap { position: sticky; bottom: 0; background: var(--bg); padding-top: 8px; z-index: 30; }
  .suggestions { grid-template-columns: 1fr; gap: 8px; }
  .chat-title { font-size: 28px; letter-spacing: -.6px; }
  .chat-empty { padding-top: 24px; }
  .msg { max-width: 92%; padding: 12px 16px; font-size: 14.5px; }
  .topbar { padding: 12px 14px; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .lw { padding: 0 20px; }
  .l-hero { padding: 64px 20px 48px; }
  .l-cta { padding: 72px 20px; }
  .l-compare, .l-flow, .l-tools, .l-profiles, .l-dash { padding: 56px 0; }
  .l-tools-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .l-tool { padding: 24px 16px 20px; }
  .l-flow-steps { flex-direction: column; gap: 4px; }
  .l-flow-step { width: 100%; max-width: 320px; }
  .l-flow-arrow { transform: rotate(90deg); margin: 4px 0; }
  .l-compare-inner { grid-template-columns: 1fr; gap: 16px; }
  .l-vs { margin: 4px auto; }
  .l-bubble { max-width: 100%; }
  .l-profiles-grid { grid-template-columns: 1fr; gap: 16px; }
  .l-profile { padding: 32px 24px; }
  .l-dash-layout { grid-template-columns: 1fr; gap: 28px; }
  .lw-stats { grid-template-columns: 1fr 1fr; }
  .l-cta-btns { flex-direction: column; align-items: stretch; }
  .l-btn-w, .l-btn-o { width: 100%; }

  /* SINTAXIS */
  .canvas-wrap { padding: 16px 12px 24px; }
  .label-panel { padding: 12px 12px 0; }
  #sentence-container { flex-wrap: wrap; justify-content: center; }
  .canvas-topbar { flex-wrap: wrap; gap: 10px; padding: 12px 12px 8px; }
  .canvas-input-field { font-size: 17px; padding: 16px 18px; }
  .word, .word-inline-input { font-size: 17px; }
  .chat-widget { width: auto !important; left: 10px; right: 10px; bottom: 150px; max-height: 68vh; }
  .chat-fab { right: 14px !important; width: 50px; height: 50px; }
  .cw-bubble { max-width: 78vw; }
  .label-line .lbl-delete, .label-line .lbl-edit-btn-icon, .label-line .lbl-color-btn, .word .word-edit-btn { opacity: 1 !important; }
  .lbl-handle { width: 26px; }
  .practice-bar { padding: 8px 12px; gap: 8px; }
  .filter-chips { flex: 1 1 100%; }
  .mode-chooser { margin: 24px auto 0 !important; padding: 0 16px !important; }
  .mode-card { padding: 22px 18px !important; }

  /* CÁLCULO */
  main { overflow-y: auto; overflow-x: hidden; height: auto; }
  .page-header { padding: 16px 16px 10px; }
  .workspace { flex-direction: column; padding: 0 14px; overflow: visible; }
  .photo-panel.open { width: 100%; margin-left: 0; margin-top: 14px; }
  .canvas-container { min-height: 46vh; flex: 0 0 auto; height: 46vh; }
  #draw-canvas { touch-action: none; }
  .canvas-toolbar { flex-wrap: wrap; justify-content: center; gap: 6px 4px; padding: 8px; }
  .tool-btn, .size-btn { width: 40px; height: 40px; }
  .zona-enun, .transcription-strip, .zona-ejer-head { margin-left: 14px; margin-right: 14px; }
  .calculo-footer { justify-content: stretch; padding: 14px 16px 22px; }
  .btn-visualizar, .btn-corregir { width: 100%; justify-content: center; margin-right: 0; }
  .result-overlay { padding: 12px; align-items: flex-end; }
  .result-modal, #editor-overlay .result-modal { max-width: 100% !important; width: 100%; max-height: 94vh; border-radius: 20px 20px 0 0; }
  math-field { min-height: 160px; }
  .error-toast { bottom: 76px !important; max-width: 92vw; }

  /* PERFIL / PROGRESO / PANEL PROFESOR / CLASE-DETALLE (comunes) */
  .page-body { padding-left: 14px !important; padding-right: 14px !important; max-width: 100%; }
  .profile-card { padding: 20px 16px; }
  .form-grid, .perfil-grid, .stats-grid, .cards-grid, .clases-grid, .alumnos-grid { grid-template-columns: 1fr !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }

  /* MODALES comunes */
  .overlay { padding: 12px; }
  .modal { padding: 32px 22px 26px; border-radius: 22px; }
  .role-grid { gap: 8px; }

  /* LOGIN */
  .login-card, .auth-card { width: auto !important; max-width: none !important; margin: 14px !important; padding: 30px 22px 26px !important; border-radius: 22px; }
  .role-tabs { gap: 6px; }
  .role-tab { padding: 10px 8px; font-size: 12.5px; }
}

/* La clase .auth-modal (modal "Unirse a una clase") no estaba definida */
.auth-modal {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  border: 1px solid #fff; border-radius: 28px;
  padding: 40px 32px 32px; width: 100%; max-width: 400px;
  position: relative; margin: 16px;
  box-shadow: 0 24px 64px rgba(15,20,60,0.15);
}
@media (max-width: 480px) {
  .auth-modal { padding: 30px 20px 24px; border-radius: 22px; }
  .lw-stats { grid-template-columns: 1fr 1fr; }
}