/* ── VARIABLES ── */
:root {
  --capi-bg:       #f5f4ff;
  --capi-surface:  #ffffff;
  --capi-border:   #e8e4f4;
  --capi-p:        #7c3aed;
  --capi-p-dark:   #4c1d95;
  --capi-p-light:  #ede9fe;
  --capi-muted:    #9ca3af;
  --capi-text:     #1f2937;
  --capi-thread-w: 840px;
  --capi-hdr-h:    52px;
}

/* ── FONDO ── */
body { background: var(--capi-bg) !important; }
#mainContent, #mainViewport, .app-view { background: var(--capi-bg) !important; }
#view-chat, #appShell, .chat-wrapper { background: transparent !important; }

/* ── LAYOUT RAÍZ ── */
#mainLayout {
  display: flex !important;
  height: 100vh !important;
  overflow: hidden !important;
}
#mainContent {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100vh !important;
}
#mainViewport {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── HEADER ── */
header {
  height: var(--capi-hdr-h) !important;
  min-height: var(--capi-hdr-h) !important;
  max-height: var(--capi-hdr-h) !important;
  padding: 0 1rem !important;
  background: linear-gradient(135deg, #3b0f8c 0%, #6d28d9 60%, #9333ea 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.18), 0 2px 20px rgba(76,29,149,.22) !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.hdr-logo-img { width: 28px !important; height: 28px !important; }
.logo-area .logo-text small { font-size: .6rem !important; opacity: .65 !important; display: block !important; }
.usage-badge {
  color: rgb(103,232,249) !important;
  border-color: rgba(103,232,249,.35) !important;
  background: rgba(103,232,249,.1) !important;
  font-size: .67rem !important;
  padding: .2rem .6rem !important;
}
#grupoHeaderBtn { background: rgba(57,120,69,.8) !important; border-color: rgba(57,120,69,.5) !important; }
.mode-pill {
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 8px !important;
  font-size: .67rem !important;
  font-weight: 800 !important;
  padding: .2rem .6rem !important;
}

/* ── APP VIEWS ── */
.app-view {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: none !important;
}
.app-view.is-active {
  display: flex !important;
  flex-direction: column !important;
}
#view-chat.is-active {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* Progreso & Practicar need their own scroll */
#view-progreso.is-active,
#view-practicar.is-active {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* ── APP SHELL — grid ── */
#appShell {
  flex: 1 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  overflow: hidden !important;
}
#appShell:has(#artPanel:not(.art-panel-hidden)),
#appShell.art-active {
  grid-template-columns: minmax(0,1fr) 400px !important;
}
@media (min-width:1400px) {
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active { grid-template-columns: minmax(0,1fr) 440px !important; }
}
@media (max-width:1100px) {
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active { grid-template-columns: minmax(0,1fr) 360px !important; }
}

/* ── CHAT WRAPPER ── */
.chat-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* ── CHAT MSGS ── */
.chat-msgs {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
  padding: 2.5rem 0 1.5rem !important;
  background: transparent !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(124,58,237,.2) transparent !important;
  word-break: break-word !important;
}
.chat-msgs::-webkit-scrollbar { width: 4px; }
.chat-msgs::-webkit-scrollbar-thumb { background: rgba(124,58,237,.2); border-radius: 2px; }

/* ── MENSAJES — wrapper base ── */
.msg {
  max-width: var(--capi-thread-w) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 1.75rem !important;
  box-sizing: border-box !important;
  animation: msgFadeUp .22s ease both !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
@keyframes msgFadeUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── USUARIO ── */
.msg.user {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 1rem !important;
}
.msg.user .msg-bub {
  background: linear-gradient(135deg, #5b21b6, #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 20px 20px 5px 20px !important;
  padding: .8rem 1.15rem !important;
  max-width: 72% !important;
  width: auto !important;
  font-size: .9rem !important;
  line-height: 1.65 !important;
  box-shadow: 0 2px 18px rgba(124,58,237,.28) !important;
  word-break: break-word !important;
}

/* ── ASISTENTE ── */
.msg.assistant {
  display: flex !important;
  gap: .9rem !important;
  align-items: flex-start !important;
  margin-bottom: 2rem !important;
  max-width: var(--capi-thread-w) !important;
  width: 100% !important;
}
.msg.assistant .msg-av {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .88rem !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.2) !important;
}
.msg.assistant .msg-bub {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: .9rem !important;
  line-height: 1.78 !important;
  color: var(--capi-text) !important;
  overflow: visible !important;
}
.msg.assistant .msg-bub > p,
.msg.assistant .msg-bub > ul,
.msg.assistant .msg-bub > ol,
.msg.assistant .msg-bub > blockquote { max-width: 68ch; }
.msg.assistant .msg-bub p { margin-bottom: .7rem; }
.msg.assistant .msg-bub p:last-child { margin-bottom: 0; }
.msg.assistant .msg-bub strong { color: var(--capi-p-dark) !important; font-weight: 800; }
.msg.assistant .msg-bub em { color: #be123c !important; font-style: italic; }
.msg.assistant .msg-bub h2,
.msg.assistant .msg-bub h3 { color: var(--capi-p-dark) !important; font-weight: 900 !important; margin: 1.1rem 0 .4rem !important; }
.msg.assistant .msg-bub h2 { font-size: 1rem !important; }
.msg.assistant .msg-bub h3 { font-size: .9rem !important; }
.msg.assistant .msg-bub ul,
.msg.assistant .msg-bub ol { padding-left: 1.4rem; margin-bottom: .7rem; }
.msg.assistant .msg-bub li { margin-bottom: .25rem; }
.msg.assistant .msg-bub blockquote {
  border-left: 3px solid rgba(124,58,237,.35) !important;
  padding: .45rem 1rem !important;
  background: rgba(124,58,237,.05) !important;
  border-radius: 0 10px 10px 0 !important;
  margin: .6rem 0 !important;
  color: #6b7280 !important;
  font-style: italic !important;
}
.msg.assistant .msg-bub code {
  background: #ede9fe !important;
  border: 1px solid #c4b5fd !important;
  color: #5b21b6 !important;
  padding: .1em .38em !important;
  border-radius: 4px !important;
  font-size: .81em !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.msg.assistant .msg-bub pre {
  background: #1e1b4b !important;
  color: #e0e7ff !important;
  border-radius: 10px !important;
  padding: 1rem 1.2rem !important;
  overflow-x: auto !important;
  margin: .75rem 0 !important;
  font-size: .82rem !important;
}
.msg.assistant .msg-bub pre code { background: none !important; border: none !important; color: inherit !important; padding: 0 !important; }
.msg.assistant .msg-bub .section-title,
.msg.assistant .section-title {
  display: block !important;
  font-size: .68rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--capi-p) !important;
  margin: 1.2rem 0 .4rem !important;
  padding-bottom: .28rem !important;
  border-bottom: 1px solid rgba(124,58,237,.2) !important;
  background: none !important;
}

/* ── SHARE ROW ── */
.share-row {
  display: flex !important;
  gap: .4rem !important;
  margin-top: .8rem !important;
  padding-top: .65rem !important;
  border-top: 1px solid var(--capi-border) !important;
  flex-wrap: wrap !important;
}
.share-btn {
  font-size: .66rem !important;
  font-weight: 800 !important;
  padding: .22rem .65rem !important;
  border-radius: 6px !important;
  border: 1.5px solid var(--capi-border) !important;
  background: transparent !important;
  color: var(--capi-muted) !important;
  cursor: pointer !important;
  transition: all .15s !important;
  font-family: inherit !important;
}
.share-btn:hover { border-color: #c4b5fd !important; color: var(--capi-p) !important; background: rgba(124,58,237,.04) !important; }

/* ── NOTA BADGE ── */
.nota-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #78350f !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  padding: .4rem 1.1rem !important;
  border-radius: 10px !important;
  margin: .6rem 0 !important;
  box-shadow: 0 2px 12px rgba(245,158,11,.2) !important;
}

/* ── MAPA LEAFLET — fix dimensiones ── */
.msg-bub [id^="map-"],
.msg-bub [id^="vmap-"],
.msg-bub [id^="leaflet-"],
.msg-bub .map-container,
.msg-bub .leaflet-wrap {
  width: 100% !important;
  height: 420px !important;
  min-height: 380px !important;
  display: block !important;
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 1rem 0 !important;
  border: 1px solid var(--capi-border) !important;
  background: #e8eaed !important;
}
.msg-bub .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  border-radius: 12px !important;
  background: #e8eaed !important;
}
.leaflet-container img.leaflet-tile,
.leaflet-tile-pane img,
.msg-bub .leaflet-container img { max-width: none !important; width: 256px !important; }
#artPanel [id^="map-"], #artPanel [id^="vmap-"] { width:100% !important; height:380px !important; min-height:340px !important; }
#artPanel .leaflet-container { width:100% !important; height:100% !important; min-height:340px !important; }

/* ── IMÁGENES ── */
.msg-bub img:not(.msg-img-thumb):not(.hdr-xp-img):not(.obra-card-img):not(.hdr-logo-img):not(.sb-avatar-img) {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 60vh !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  margin: .85rem 0 !important;
  display: block !important;
  border: 1px solid var(--capi-border) !important;
}

/* ── CANVAS ── */
.msg-bub canvas:not(#siCanvas):not(#shareCanvas) {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: .85rem 0 !important;
  border-radius: 12px !important;
  border: 1px solid var(--capi-border) !important;
}

/* ── SVG ── */
.msg-bub svg { width:100% !important; height:auto !important; display:block !important; margin:.85rem 0 !important; }

/* ── IFRAMES ── */
.msg-bub iframe {
  width: 100% !important;
  min-height: 500px !important;
  border-radius: 12px !important;
  display: block !important;
  margin: .85rem 0 !important;
  border: 1px solid var(--capi-border) !important;
}

/* ── TABLAS ── */
.msg-bub table { width:100% !important; border-collapse:collapse !important; font-size:.82rem !important; margin:.85rem 0 !important; border-radius:12px !important; overflow:hidden !important; border:1px solid var(--capi-border) !important; }
.msg-bub th { background:rgba(124,58,237,.07) !important; color:var(--capi-p-dark) !important; font-weight:800 !important; padding:.52rem .85rem !important; text-align:left !important; font-size:.7rem !important; text-transform:uppercase !important; letter-spacing:.06em !important; border-bottom:1px solid rgba(124,58,237,.15) !important; }
.msg-bub td { padding:.5rem .85rem !important; border-bottom:1px solid #f0ecff !important; font-size:.83rem !important; color:#374151 !important; vertical-align:top !important; }
.msg-bub tr:last-child td { border-bottom:none !important; }
.msg-bub tr:hover td { background:rgba(124,58,237,.02) !important; }

/* ── OBRA CARD ── */
.obra-card { border:1px solid var(--capi-border) !important; background:linear-gradient(135deg,#faf5ff,#ede9fe) !important; border-radius:14px !important; overflow:hidden !important; margin:.85rem 0 !important; }
.obra-card-title { color:var(--capi-text) !important; }

/* ── RICH CARDS ── */
.msg-bub .rich-chart, .msg-bub .rich-map, .msg-bub .rich-mindmap, .msg-bub .rich-pdf, .msg-bub .rich-esquema {
  background:var(--capi-surface) !important; border:1px solid var(--capi-border) !important; border-radius:14px !important; overflow:hidden !important; margin:1rem 0 !important; box-shadow:0 2px 16px rgba(124,58,237,.06) !important;
}

/* ── OVERFLOW ── */
.chat-msgs, .msg-bub { overflow-x:hidden !important; }
.msg-bub [id^="map-"], .msg-bub [id^="vmap-"], .msg-bub .map-container { overflow:hidden !important; }
.msg-bub .leaflet-container, .msg-bub canvas, .msg-bub iframe { overflow:visible !important; }

/* ── ART PANEL — columna estática, NO popup ── */
#artPanel { display:none !important; position:static !important; }
#artPanel.art-panel-hidden { display:none !important; }
#artPanel:not(.art-panel-hidden),
#artPanel.art-panel-visible {
  display:flex !important;
  flex-direction:column !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  background:var(--capi-surface) !important;
  border-left:1px solid var(--capi-border) !important;
  position:static !important;
  height:100% !important;
  min-height:0 !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(124,58,237,.2) transparent !important;
}
#artPanelInner { padding:1.25rem !important; flex:1 !important; }
#artPanel img:not(.av-img) { max-width:100% !important; height:auto !important; }
#artPanel .av-img { position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:contain !important; }
.av-img-zone { position:relative !important; min-height:200px !important; background:#0f0d1a !important; }

/* ── COMPOSER ── */
.input-area {
  position:sticky !important;
  bottom:0 !important;
  z-index:200 !important;
  background:rgba(245,244,255,.96) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  border-top:1px solid var(--capi-border) !important;
  box-shadow:0 -2px 24px rgba(124,58,237,.07) !important;
  padding:.65rem 1rem .8rem !important;
  flex-shrink:0 !important;
}
.subject-bar { max-width:var(--capi-thread-w) !important; margin:0 auto .45rem !important; }
.quick-chips { max-width:var(--capi-thread-w) !important; margin:.4rem auto 0 !important; display:flex !important; gap:.35rem !important; overflow-x:auto !important; scrollbar-width:none !important; }
.quick-chips::-webkit-scrollbar { display:none !important; }
.qchip { font-size:.7rem !important; font-weight:700 !important; padding:.26rem .75rem !important; border-radius:8px !important; border:1.5px solid var(--capi-border) !important; background:var(--capi-surface) !important; color:var(--capi-muted) !important; cursor:pointer !important; white-space:nowrap !important; transition:all .15s !important; flex-shrink:0 !important; font-family:inherit !important; }
.qchip:hover { border-color:#c4b5fd !important; color:var(--capi-p) !important; background:rgba(124,58,237,.04) !important; }
.input-row { max-width:var(--capi-thread-w) !important; margin:0 auto !important; display:flex !important; align-items:flex-end !important; gap:.5rem !important; }
#userInput {
  background:var(--capi-surface) !important;
  border:1.5px solid var(--capi-border) !important;
  border-radius:14px !important;
  color:var(--capi-text) !important;
  font-family:inherit !important;
  font-size:.88rem !important;
  padding:.7rem 1.1rem !important;
  resize:none !important;
  outline:none !important;
  line-height:1.55 !important;
  min-height:44px !important;
  max-height:180px !important;
  transition:border-color .18s, box-shadow .18s !important;
  box-shadow:0 1px 6px rgba(124,58,237,.05) !important;
}
#userInput::placeholder { color:var(--capi-muted) !important; }
#userInput:focus { border-color:rgba(124,58,237,.5) !important; box-shadow:0 0 0 3px rgba(124,58,237,.08) !important; }
.send-btn {
  background:linear-gradient(135deg,#7c3aed,#9333ea) !important;
  border:none !important;
  border-radius:12px !important;
  color:#fff !important;
  width:42px !important;
  height:42px !important;
  font-size:1rem !important;
  box-shadow:0 3px 14px rgba(124,58,237,.35) !important;
  flex-shrink:0 !important;
  cursor:pointer !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:all .15s !important;
}
.send-btn:hover { transform:translateY(-1px) !important; box-shadow:0 5px 20px rgba(124,58,237,.45) !important; }
.tools-toggle-btn { background:#f5f3ff !important; border:1.5px solid #c4b5fd !important; border-radius:12px !important; color:var(--capi-p) !important; width:42px !important; height:42px !important; font-size:1.3rem !important; font-weight:700 !important; flex-shrink:0 !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important; transition:all .15s !important; }
.tools-toggle-btn:hover { background:var(--capi-p) !important; color:#fff !important; border-color:var(--capi-p) !important; }
.upload-btn, .voice-btn { background:var(--capi-surface) !important; border:1.5px solid var(--capi-border) !important; border-radius:12px !important; color:var(--capi-muted) !important; width:42px !important; height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:.95rem !important; flex-shrink:0 !important; cursor:pointer !important; transition:all .15s !important; }
.upload-btn:hover, .voice-btn:hover { border-color:#c4b5fd !important; color:var(--capi-p) !important; }
.mode-bar { display:none !important; }
.paywall-banner { max-width:var(--capi-thread-w) !important; margin:0 auto .5rem !important; }

/* ── WELCOME ── */
#welcomeScreen { max-width:var(--capi-thread-w) !important; margin:0 auto !important; padding:0 1.75rem !important; width:100% !important; box-sizing:border-box !important; }

/* ── SIDEBAR ── */
#mainSidebar { background:linear-gradient(180deg,#2a1760 0%,#1a0f42 100%) !important; border-right:1px solid rgba(124,58,237,.18) !important; }
.sb-section-title { color:rgba(196,181,253,.6) !important; font-size:.58rem !important; font-weight:900 !important; letter-spacing:.1em !important; text-transform:uppercase !important; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  :root { --capi-thread-w: 100%; }
  .msg { padding:0 1rem !important; }
  .msg.user .msg-bub { max-width:86% !important; }
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active { grid-template-columns:1fr !important; grid-template-rows:1fr 48vh !important; }
  #artPanel:not(.art-panel-hidden) { border-left:none !important; border-top:2px solid var(--capi-border) !important; }
  .msg-bub [id^="map-"], .msg-bub [id^="vmap-"], .msg-bub .leaflet-container, .msg-bub .map-container { height:300px !important; min-height:260px !important; }
}
@media (max-width:600px) {
  #appShell:has(#artPanel:not(.art-panel-hidden)),
  #appShell.art-active { grid-template-rows:1fr 55vh !important; }
  .msg.user .msg-bub { max-width:90% !important; }
}
</style>
</head>
<body>

<!-- DROP OVERLAY -->
<div class="drop-ov" id="dropOv">
  <div class="drop-box">
    <span class="drop-icon">📷</span>
    <h3 style="color:#fff;font-size:1.3rem;font-weight:900;">Suelta aquí la imagen</h3>
    <p style="color:rgba(255,255,255,.65);margin-top:.4rem;font-size:.85rem;">Foto de trabajo escrito · JPG, PNG, HEIC</p>
  </div>
</div>

<!-- DRAWER OVERLAY -->
<div class="drawer-overlay" id="drawerOverlay" onclick="closeDrawer()"></div>

<!-- DRAWER (móvil) -->
<aside class="drawer" id="drawer">
  <div class="drawer-head">
    <div class="drawer-head-title"><span><img src="https://capiebau.com/icons/icon-192.png" style="width:32px;height:32px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:2px;" alt="Capi"></span> CapiEBAU</div>
    <button class="drawer-close" onclick="closeDrawer()">✕</button>
  </div>
  <div class="drawer-body">

    <div class="drawer-profile" id="drawerProfile" onclick="openGrades()">
      <div class="dp-row">
        <div class="dp-avatar" id="dpAvatar">🎓</div>
        <div class="dp-info">
          <div class="dp-name" id="dpName">Estudiante</div>
          <div class="dp-sub" id="dpSub">Sin ejercicios corregidos aún</div>
        </div>
        <div class="dp-nota">
          <div class="dp-nota-val" id="dpNotaVal">—</div>
          <div class="dp-nota-label">Nota media</div>
        </div>
      </div>
      <div class="dp-stats">
        <div class="dp-stat"><strong id="dpStatCorr">0</strong><span>Correc.</span></div>
        <div class="dp-stat"><strong id="dpStatTest">0</strong><span>Tests</span></div>
        <div class="dp-stat"><strong id="dpStatEscr">0</strong><span>Escritos</span></div>
        <div class="dp-stat"><strong id="dpStatComt">0</strong><span>Coment.</span></div>
      </div>
    </div>

    <div style="font-size:.6rem;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:.1em;margin:.5rem 0 .3rem .2rem">ESTUDIAR</div>

    <button onclick="openFlashcards();closeDrawer()" style="display:flex;align-items:center;gap:.75rem;background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.28);border-radius:12px;padding:.6rem 1rem;cursor:pointer;font-family:inherit;color:#fff;margin-bottom:.35rem;width:100%;text-align:left">
      <span style="font-size:1.2rem">🃏</span>
      <div><div style="font-weight:800;font-size:.8rem">Flashcards</div><div style="font-size:.67rem;opacity:.5">Repasa con tarjetas IA</div></div>
    </button>

    <button onclick="openExam();closeDrawer()" style="display:flex;align-items:center;gap:.75rem;background:rgba(244,114,182,.14);border:1px solid rgba(244,114,182,.28);border-radius:12px;padding:.6rem 1rem;cursor:pointer;font-family:inherit;color:#fff;margin-bottom:.35rem;width:100%;text-align:left">
      <span style="font-size:1.2rem">🎯</span>
      <div><div style="font-weight:800;font-size:.8rem">Simulacro PAU</div><div style="font-size:.67rem;opacity:.5">Examen tipo selectividad</div></div>
    </button>

    <button onclick="openPodcast();closeDrawer()" style="display:flex;align-items:center;gap:.75rem;background:linear-gradient(135deg,rgba(124,58,237,.25),rgba(167,139,250,.15));border:1px solid rgba(124,58,237,.4);border-radius:12px;padding:.6rem 1rem;cursor:pointer;font-family:inherit;color:#fff;margin-bottom:.35rem;width:100%;text-align:left">
      <span style="font-size:1.2rem">🎙️</span>
      <div><div style="font-weight:800;font-size:.8rem">Podcast IA</div><div style="font-size:.67rem;opacity:.5">Escucha resúmenes de temas</div></div>
    </button>

    <div style="font-size:.6rem;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:.1em;margin:.5rem 0 .3rem .2rem">SUBIR Y CORREGIR</div>

    <button onclick="setMode('correccion',null,'mb-correccion');closeDrawer();setTimeout(function(){var fi=document.getElementById('fileInputMain');if(fi)fi.click();},300)" style="display:flex;align-items:center;gap:.75rem;background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.3);border-radius:12px;padding:.6rem 1rem;cursor:pointer;font-family:inherit;color:#fff;margin-bottom:.35rem;width:100%;text-align:left">
      <span style="font-size:1.2rem">📸</span>
      <div><div style="font-weight:800;font-size:.8rem">Corregir examen por foto</div><div style="font-size:.67rem;opacity:.5">Haz una foto y Capi lo corrige</div></div>
    </button>

    <button onclick="openResumenes();closeDrawer()" style="display:flex;align-items:center;gap:.75rem;background:rgba(59,130,246,.18);border:1px solid rgba(59,130,246,.28);border-radius:12px;padding:.6rem 1rem;cursor:pointer;font-family:inherit;color:#fff;margin-bottom:.35rem;width:100%;text-align:left">
      <span style="font-size:1.2rem">📄</span>
      <div><div style="font-weight:800;font-size:.8rem">Resumir apuntes</div><div style="font-size:.67rem;opacity:.5">Sube foto o escribe → resumen + esquema</div></div>
    </button>

    <div class="d-div"></div>
    <div class="d-item" onclick="openHistorial();closeDrawer()" style="color:#a78bfa;border-left-color:#a78bfa;">
      <span class="di">🕐</span><span class="dl">Historial de chats</span>
    </div>
    <div class="d-div"></div>
    <div class="d-item" id="manageSubBtn" onclick="openManageSub()" style="display:none;color:#a78bfa;">
      <span class="di">💳</span><span class="dl">Gestionar suscripción<small id="manageSubLabel">Pro · activa</small></span>
    </div>
    <div class="d-item logout-btn" id="drawerLogoutBtn" onclick="logoutUser()" style="display:none;">
      <span class="di">🚪</span><span class="dl">Cerrar sesión<small id="logoutUserLabel" style="max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;opacity:.6;"></small></span>
    </div>

    <div style="height:1.2rem;"></div>
  </div>
</aside>


/* ══ FIX: Progreso & Practicar text colors for light background ══ */

/* Progreso */
.prog-title { color: var(--capi-p-dark) !important; }
.prog-stat-label { color: var(--capi-muted) !important; }
.prog-level-text { color: var(--capi-muted) !important; }
.prog-level-pct { color: var(--capi-p) !important; }
.prog-level-bar { background: rgba(124,58,237,.1) !important; }
.prog-summary { background: var(--capi-surface) !important; border-color: var(--capi-border) !important; box-shadow: 0 2px 12px rgba(124,58,237,.08) !important; }

/* Progreso grid */
.prog-grid-2 { }
.prog-section-title { color: var(--capi-text) !important; }
.prog-section-sub { color: var(--capi-muted) !important; }
.prog-streak-box { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.prog-streak-day { background: rgba(124,58,237,.12) !important; }
.prog-streak-day.active { background: var(--capi-p) !important; }

/* Misiones */
.prog-mission-title { color: var(--capi-text) !important; }
.prog-mission-sub { color: var(--capi-muted) !important; }
.prog-mission-row { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.prog-mission-text { color: var(--capi-text) !important; }
.prog-mission-xp { color: var(--capi-p) !important; }
.prog-mission-cta { background: var(--capi-p) !important; color: #fff !important; }

/* Ranking */
.prog-ranking-name { color: var(--capi-text) !important; }
.prog-ranking-row.you .prog-ranking-name { color: var(--capi-p-dark) !important; }
.prog-ranking-xp { color: var(--capi-p) !important; }
.prog-ranking-empty { color: var(--capi-muted) !important; }
.prog-ranking-row { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.prog-ranking-row.you { background: var(--capi-p-light) !important; border-color: rgba(124,58,237,.3) !important; }

/* Logros */
.prog-logro-text { color: var(--capi-muted) !important; }
.prog-logro-unlocked .prog-logro-text { color: var(--capi-p) !important; }
.prog-logro { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }

/* Notas por asignatura */
.prog-subj-title { color: var(--capi-text) !important; }
.prog-subj-label { color: var(--capi-muted) !important; }
.prog-subj-nota { color: var(--capi-text) !important; }
.prog-subj-row { background: var(--capi-surface) !important; }
.prog-subj-bar-bg { background: rgba(124,58,237,.08) !important; }

/* Grupo */
.prog-grupo-box { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; box-shadow: 0 2px 12px rgba(124,58,237,.08) !important; }
.prog-grupo-title { color: var(--capi-text) !important; }
.prog-grupo-sub { color: var(--capi-muted) !important; }
.prog-grupo-name { color: var(--capi-text) !important; }
.prog-grupo-xp { color: var(--capi-p) !important; }

/* ── Practicar ── */
.pract-title { color: var(--capi-p-dark) !important; }
.pract-sub { color: var(--capi-muted) !important; }
.pract-card { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; box-shadow: 0 2px 12px rgba(124,58,237,.06) !important; }
.pract-card:hover { border-color: rgba(124,58,237,.35) !important; box-shadow: 0 4px 20px rgba(124,58,237,.12) !important; }
.pract-card-highlight { background: var(--capi-p-light) !important; border-color: rgba(124,58,237,.3) !important; }
.pract-card-title { color: var(--capi-text) !important; }
.pract-card-sub { color: var(--capi-muted) !important; }
.pract-card-btn { background: var(--capi-p) !important; color: #fff !important; }

/* Podcast section */
.pract-podcast-box { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; box-shadow: 0 2px 12px rgba(124,58,237,.06) !important; }
.pract-podcast-title { color: var(--capi-text) !important; }
.pract-podcast-sub { color: var(--capi-muted) !important; }
.pract-podcast-badge { background: rgba(124,58,237,.12) !important; color: var(--capi-p) !important; }
.pract-podcast-ep { background: rgba(124,58,237,.04) !important; border: 1px solid var(--capi-border) !important; }
.pract-podcast-play { background: var(--capi-p) !important; }
.pract-podcast-cta { color: var(--capi-p) !important; }

/* Historial reciente */
.pract-hist-title { color: var(--capi-text) !important; }
.pract-hist-row { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.pract-hist-type { color: var(--capi-text) !important; }
.pract-hist-topic { color: var(--capi-muted) !important; }
.pract-hist-date { color: var(--capi-muted) !important; }
.pract-hist-empty { color: var(--capi-muted) !important; }

/* ── Inner container padding for views ── */
.prog-inner, .pract-inner { padding: 1.5rem !important; }

/* ══ COMPREHENSIVE TEXT CONTRAST FIXES ══ */
/* Sidebar nav (only when sidebar is inside light content area) */
.sb-section-title { color: var(--capi-muted) !important; }

/* Welcome cards */
.wc-card { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.wc-card-title { color: var(--capi-text) !important; }
.wc-card-sub { color: var(--capi-muted) !important; }

/* Podcast episodes — inline styles in CTA items */
.pract-podcast-cta > div > div:first-child { color: var(--capi-text) !important; }
.pract-podcast-cta > div > div:last-child { color: var(--capi-muted) !important; }
.pract-podcast-cta { background: rgba(124,58,237,.04) !important; border: 1px solid var(--capi-border) !important; border-radius: 10px !important; }

/* Progreso — remaining unfixed elements */
.prog-stat-val { color: var(--capi-text) !important; }
.prog-heatmap-cell { background: rgba(124,58,237,.08) !important; }
.prog-heatmap-cell.active { background: var(--capi-p) !important; }
.prog-heatmap-label { color: var(--capi-muted) !important; }
.prog-group-empty { color: var(--capi-muted) !important; }
.prog-logro-icon { color: var(--capi-muted) !important; }
.prog-logro-unlocked .prog-logro-icon { color: var(--capi-p) !important; }

/* Practicar — remaining */
.pract-card-icon { font-size: 1.6rem !important; }
.pract-hist-score { color: var(--capi-p) !important; }
.pract-ep-title { color: var(--capi-text) !important; }
.pract-ep-sub { color: var(--capi-muted) !important; }

/* Tools dropdown */
.tools-dropdown { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; box-shadow: 0 8px 30px rgba(0,0,0,.12) !important; }
.tools-dropdown-item { color: var(--capi-text) !important; }
.tools-dropdown-item:hover { background: var(--capi-p-light) !important; }
.td-sub { color: var(--capi-muted) !important; }
.td-label { color: var(--capi-text) !important; }

/* Generic content areas with light-on-dark legacy */
#view-progreso, #view-practicar { color: var(--capi-text) !important; }
#view-progreso *, #view-practicar * { 
  scrollbar-color: rgba(124,58,237,.15) transparent !important; 
}

/* ══ REMAINING CONTRAST FIXES — cards, calendar, missions, groups ══ */

/* Progreso cards */
.prog-card { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.prog-card-title { color: var(--capi-text) !important; }
.prog-cal-header span { color: var(--capi-muted) !important; }
.prog-cal-cell { background: rgba(124,58,237,.06) !important; border: 1px solid var(--capi-border) !important; }
.prog-cal-cell.active { background: var(--capi-p) !important; color: #fff !important; }
/* Heatmap calendar overrides */
.prog-cal-day { background: var(--capi-p-light) !important; border: 1px solid var(--capi-border) !important; border-radius: 4px !important; }
.prog-cal-day.level-1 { background: rgba(124,58,237,.15) !important; }
.prog-cal-day.level-2 { background: rgba(124,58,237,.30) !important; }
.prog-cal-day.level-3 { background: rgba(124,58,237,.50) !important; }
.prog-cal-day.level-4 { background: rgba(124,58,237,.75) !important; }
.prog-cal-day.today { border: 2px solid var(--capi-p) !important; box-shadow: 0 0 6px rgba(124,58,237,.25) !important; }
.prog-cal-day:hover { transform: scale(1.3) !important; box-shadow: 0 2px 10px rgba(124,58,237,.25) !important; z-index: 2 !important; }
.prog-cal-header span { color: var(--capi-muted) !important; font-weight: 700 !important; }
#progStreakBadge { background: var(--capi-p-light) !important; color: var(--capi-p) !important; }
#progStreakBar span { color: var(--capi-muted) !important; }
#progStreakBar strong { color: var(--capi-p) !important; }
#progCalMotivation { color: var(--capi-muted) !important; }
#progCalLegend { color: var(--capi-muted) !important; }
#progCalLegend span[style*="background:rgba(255"] { background: var(--capi-p-light) !important; border: 1px solid var(--capi-border) !important; }
#progCalTooltip { background: #1e1b2e !important; color: #e2e8f0 !important; border: 1px solid rgba(124,58,237,.3) !important; }
.prog-missions-count { color: var(--capi-p) !important; }
.prog-mission { border-bottom-color: var(--capi-border) !important; }
.prog-mission-text { color: var(--capi-text) !important; }

/* Grupo card */
.prog-group-card { background: var(--capi-surface) !important; border: 1px solid rgba(16,185,129,.25) !important; box-shadow: 0 2px 12px rgba(16,185,129,.06) !important; }
.prog-group-title { color: var(--capi-text) !important; }
.prog-group-sub { color: var(--capi-muted) !important; }
.prog-group-invite { background: rgba(16,185,129,.1) !important; color: #059669 !important; border-color: rgba(16,185,129,.3) !important; }
.prog-group-row { background: var(--capi-surface) !important; border: 1px solid var(--capi-border) !important; }
.prog-group-name { color: var(--capi-text) !important; }
.prog-group-xp { color: var(--capi-p) !important; }

/* ═══ MATH RENDERING — LaTeX → HTML ═══ */
.math-inline {
  font-family: 'Cambria Math', 'Latin Modern Math', 'STIX Two Math', Georgia, serif;
  font-size: .95em;
  color: #4c1d95;
  background: rgba(124,58,237,.05);
  padding: .1em .35em;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: .02em;
}
.math-block {
  font-family: 'Cambria Math', 'Latin Modern Math', 'STIX Two Math', Georgia, serif;
  font-size: 1.1em;
  color: #4c1d95;
  background: rgba(124,58,237,.04);
  border-left: 3px solid rgba(124,58,237,.3);
  padding: .8rem 1.2rem;
  margin: .6rem 0;
  border-radius: 0 8px 8px 0;
  text-align: center;
  letter-spacing: .03em;
  line-height: 1.8;
  overflow-x: auto;
}
.mfrac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  margin: 0 .2em;
  line-height: 1;
}
.mfrac .mnum {
  border-bottom: 1.5px solid #4c1d95;
  padding: 0 .3em .15em;
  font-size: .85em;
}
.mfrac .mden {
  padding: .15em .3em 0;
  font-size: .85em;
}

/* ═══ INFO POPUP CARDS (XP + Credits) ═══ */
.info-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  backdrop-filter: blur(4px);
}
.info-popup-overlay.show { display: flex; }

.info-popup-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.2);
  max-width: 420px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(124,58,237,.2) transparent;
  animation: popupSlide .25s ease;
}
@keyframes popupSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.info-popup-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid #e5e7eb;
}
.info-popup-header h3 {
  font-size: 1rem;
  font-weight: 900;
  color: #1f2937;
  flex: 1;
  margin: 0;
}
.info-popup-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #9ca3af;
  cursor: pointer;
  padding: .3rem;
  border-radius: 50%;
  line-height: 1;
  transition: color .2s;
}
.info-popup-close:hover { color: #ef4444; }

.info-popup-intro {
  font-size: .8rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.info-popup-section {
  margin-bottom: 1rem;
}
.info-popup-section-title {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #9ca3af;
  margin-bottom: .4rem;
  text-transform: uppercase;
}
.info-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: .78rem;
  color: #374151;
}
.info-popup-row:last-child { border-bottom: none; }
.info-popup-val {
  font-weight: 800;
  color: #7c3aed;
  font-size: .75rem;
  white-space: nowrap;
}
.info-popup-val.good { color: #059669; }
.info-popup-val.bad { color: #dc2626; }

.info-popup-tip {
  background: #f8f4ff;
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 10px;
  padding: .7rem .9rem;
  font-size: .72rem;
  color: #6b7280;
  line-height: 1.5;
  margin-top: .5rem;
}

@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }