.ai-theme { background:#0d1117; color:#c9d1d9; font-family:system-ui,sans-serif; margin:0; }
.ai-header { text-align:center; padding:2rem 1rem; border-bottom:1px solid #30363d; }
.ai-header h1 { color:#58a6ff; margin:0 0 .5rem; font-size:2rem; }
.ai-header p { color:#8b949e; margin:0; }
.ai-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
           gap:1rem; padding:1.5rem; max-width:1100px; margin:0 auto; }
.ai-card { display:block; background:#161b22; border:1px solid #30363d;
           border-radius:10px; padding:1.2rem; text-decoration:none;
           color:inherit; transition:transform .12s,border-color .12s; }
.ai-card:hover { transform:translateY(-3px); border-color:#58a6ff; }
.ai-card-num { font-size:.8rem; color:#8b949e; display:block; margin-bottom:.3rem; }
.ai-card h3 { margin:.3rem 0 .8rem; font-size:1rem; }
.ai-badge { display:inline-block; font-size:.75rem; padding:.15rem .5rem;
            border-radius:6px; background:#21262d; color:#8b949e; }
.ai-badge.done { background:#196127; color:#7ee787; }
.ai-nav { padding:.8rem 1.5rem; border-bottom:1px solid #30363d; }
.ai-nav a { color:#58a6ff; text-decoration:none; font-size:.9rem; }
.ai-content { max-width:820px; margin:0 auto; padding:1.5rem; }
.markdown-body h2 { color:#58a6ff; border-bottom:1px solid #30363d; padding-bottom:.3rem; }
.markdown-body h3 { color:#e6edf3; }
.markdown-body table { border-collapse:collapse; width:100%; margin:1rem 0; display:block; overflow:auto; }
.markdown-body th,.markdown-body td { border:1px solid #30363d; padding:.4rem .7rem; white-space:nowrap; }
.markdown-body th { background:#161b22; color:#58a6ff; }
.markdown-body code { background:#161b22; padding:.1rem .3rem; border-radius:4px; font-size:.87em; }
.markdown-body pre { background:#161b22; padding:1rem; border-radius:8px; overflow:auto; }
.markdown-body pre code { background:none; padding:0; font-size:.9em; }
.markdown-body blockquote { border-left:3px solid #30363d; margin:0; padding:.5rem 1rem; color:#8b949e; }
.ai-quiz { max-width:820px; margin:2rem auto; padding:0 1.5rem 3rem; }
.ai-quiz h2 { color:#58a6ff; }
.ai-q { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:1rem; margin:.8rem 0; }
.ai-q.ok { border-color:#196127; background:#0d1f12; }
.ai-q.bad { border-color:#8b1a1a; background:#1a0d0d; }
.ai-q label { display:block; margin:.3rem 0; cursor:pointer; }
.ai-expl { color:#8b949e; font-size:.9rem; margin-top:.5rem; font-style:italic; }
.ai-btn { background:#238636; color:#fff; border:0; padding:.6rem 1.2rem;
          border-radius:8px; cursor:pointer; font-size:1rem; margin-top:1rem;
          transition:background .12s; }
.ai-btn:hover { background:#2ea043; }
.ai-score { font-size:1.2rem; color:#7ee787; font-weight:bold; margin-top:1rem; }
.ai-loading { color:#8b949e; text-align:center; padding:3rem; }
/* Calculadora VRAM */
.vram-calc { max-width:820px; margin:2rem auto; padding:1.2rem;
             background:#161b22; border:1px solid #30363d; border-radius:10px; }
.vram-calc h2 { color:#58a6ff; margin-top:0; }
.vram-calc label { display:block; margin:.6rem 0 .2rem; color:#8b949e; font-size:.9rem; }
.vram-calc input,.vram-calc select { width:100%; padding:.5rem; box-sizing:border-box;
             background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; }
.vram-out { margin-top:1rem; }
.vram-gpus { list-style:none; padding:0; margin:.5rem 0; columns:2; gap:1rem; }
.vram-gpus li { padding:.2rem 0; font-size:.9rem; }
.vram-gpu-ok { color:#7ee787; }
.vram-gpu-no { color:#f85149; }
/* Search */
.ai-search { margin:1rem auto; padding:0 1.5rem; max-width:600px; }
.ai-search input { width:100%; padding:.8rem 1rem; background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:8px; font-size:1rem; }
.ai-search input:focus { border-color:#58a6ff; outline:none; }
.ai-search-results { max-width:820px; margin:0 auto 2rem; padding:0 1.5rem; }
/* Auth Form */
.ai-auth-form { max-width:400px; margin:2rem auto; padding:1.5rem;
                background:#161b22; border:1px solid #30363d; border-radius:10px; }
.auth-tabs { display:flex; margin-bottom:1rem; }
.auth-tab { background:#21262d; color:#8b949e; border:1px solid #30363d; padding:.5rem 1rem;
            cursor:pointer; border-radius:6px; margin-right:.5rem; }
.auth-tab.active { background:#238636; color:#fff; }
.auth-form { display:none; }
.auth-form label { display:block; margin:.6rem 0 .2rem; color:#8b949e; font-size:.9rem; }
.auth-form input { width:100%; padding:.5rem; box-sizing:border-box;
                    background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; }
.auth-error { color:#f85149; font-size:.85rem; margin-top:.5rem; }
/* Dashboard de Progreso */
.ai-dashboard { max-width:820px; margin:2rem auto; padding:1.5rem; }
.ai-dashboard h2 { color:#58a6ff; }
.ai-progress-bar { height:20px; background:#21262d; border-radius:10px; overflow:hidden; margin:.5rem 0; }
.ai-progress-fill { height:100%; background:#238636; transition:width .3s; }
.ai-stat { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid #30363d; }
/* Model Comparator */
.ai-comparator { max-width:820px; margin:2rem auto; padding:1.5rem; }
.ai-comparator h2 { color:#58a6ff; }
.ai-comparator-filters { display:flex; gap:1rem; margin-bottom:1rem; }
.ai-filter-input { flex:1; padding:.5rem; background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; }
.ai-filter-select { padding:.5rem; background:#0d1117; color:#c9d1d9; border:1px solid #30363d; border-radius:6px; }
.ai-comparator-table { overflow-x:auto; }
.ai-comparator-table table { width:100%; border-collapse:collapse; }
.ai-comparator-table th { background:#161b22; color:#58a6ff; padding:.5rem; }
.ai-comparator-table td { padding:.5rem; border:1px solid #30363d; }
.ai-comparator-table tr:hover { background:#161b22; }
/* Mermaid */
.mermaid { background:#161b22; border:1px solid #30363d; border-radius:8px; padding:1rem; margin:1rem 0; }
.mermaid svg { max-width:100%; }

/* === ADICIONES === */

/* Variables CSS */
:root {
  --color-bg:      #0d1117;
  --color-surface: #161b22;
  --color-border:  #30363d;
  --color-text:    #c9d1d9;
  --color-muted:   #8b949e;
  --color-primary: #58a6ff;
  --color-success: #238636;
  --color-danger:  #f85149;
}

/* Body base */
body.ai-theme { min-height:100vh; }

/* Focus states globales */
.auth-form input:focus,
.vram-calc input:focus,
.vram-calc select:focus,
.ai-filter-input:focus,
.ai-filter-select:focus { border-color:#58a6ff; outline:none; }

/* Nav flex con slot para usuario */
.ai-nav { display:flex; justify-content:space-between; align-items:center; }
.ai-nav-user { display:flex; gap:.8rem; align-items:center; font-size:.85rem; color:#8b949e; }

/* Logout button */
.ai-logout-btn { background:transparent; color:#8b949e; border:1px solid #30363d;
                 padding:.3rem .8rem; border-radius:6px; cursor:pointer; font-size:.85rem;
                 transition:color .12s,border-color .12s; }
.ai-logout-btn:hover { color:#f85149; border-color:#f85149; }

/* Estado vacío */
.ai-empty-state { color:#8b949e; text-align:center; padding:2rem; font-style:italic; font-size:.9rem; }

/* Card progress bar (nice to have) */
.ai-card { position:relative; overflow:hidden; }
.ai-card-progress { position:absolute; bottom:0; left:0; height:3px; background:#238636;
                    border-radius:0 0 10px 10px; }

/* Fade-in en contenido de módulo */
.ai-content { animation:fadeIn .22s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Tooltip via data-tooltip */
[data-tooltip] { position:relative; cursor:help; }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; bottom:120%; left:50%;
  transform:translateX(-50%); background:#21262d; color:#c9d1d9; padding:.3rem .6rem;
  border-radius:4px; font-size:.78rem; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s; border:1px solid #30363d; z-index:10; }
[data-tooltip]:hover::after { opacity:1; }

/* Top navbar con usuario */
.ai-topnav { display:flex; justify-content:space-between; align-items:center;
             padding:.7rem 1.5rem; background:#161b22; border-bottom:1px solid #30363d;
             position:sticky; top:0; z-index:100; }
.ai-topnav-brand { color:#58a6ff; font-weight:600; font-size:.95rem; text-decoration:none; }
.ai-user-bar { display:flex; align-items:center; gap:.8rem; font-size:.85rem; color:#8b949e; }
.ai-user-bar span { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Responsive mobile */
@media (max-width:768px) {
  .ai-header { padding:1.2rem .8rem; }
  .ai-header h1 { font-size:1.4rem; }
  .ai-grid { grid-template-columns:1fr; padding:1rem .8rem; }
  .ai-content,.ai-quiz { padding:1rem .8rem; }
  .ai-auth-form { margin:1.5rem .8rem; }
  .ai-comparator-filters { flex-direction:column; }
  .vram-gpus { columns:1; }
  .ai-comparator-table th,.ai-comparator-table td { padding:.35rem; font-size:.85rem; }
}