

<!DOCTYPE html>
<html lang="es" data-theme="fresh-green">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Mi Progreso — Panel del Estudiante</title>
    
    <link rel="canonical" href="https://sims.science/es/student/dashboard/">
    
    <link rel="alternate" hreflang="en" href="https://sims.science/en/student/dashboard/">
    <link rel="alternate" hreflang="es" href="https://sims.science/es/student/dashboard/">
    <link rel="alternate" hreflang="x-default" href="https://sims.science/en/student/dashboard/">
    
    
    <meta name="description" content="Sigue tu progreso en todas las simulaciones científicas interactivas. Ve simulaciones completadas, puntajes, tiempo dedicado y dominio por categoría.">
    
    <meta property="og:url" content="https://sims.science/es/student/dashboard/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Mi Progreso — Panel del Estudiante">
    <meta property="og:description" content="Sigue tu progreso en todas las simulaciones científicas interactivas. Ve simulaciones completadas, puntajes, tiempo dedicado y dominio por categoría.">
    <meta property="og:locale" content="es">
    
      <meta property="og:image" content="https://sims.science/assets/images/logo.png">
    
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mi Progreso — Panel del Estudiante">
    <meta name="twitter:description" content="Sigue tu progreso en todas las simulaciones científicas interactivas. Ve simulaciones completadas, puntajes, tiempo dedicado y dominio por categoría.">
    <!--
      PERF BUDGET: style.css (~20K) is render-blocking, loaded with fetchpriority="high".
      shared-layout.css (~20K) is non-blocking (no fetchpriority).
      home.css (~21K) loads only on landing pages.
      simulations-index.css (~338 bytes) loads only on sim index pages.
      simulations-custom.css (~201 bytes) loads only on individual sim pages.
      Total render-blocking CSS target: <30K. Monitor with Lighthouse.
    -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!--
      PERF BUDGET: Preload Inter font to prevent FOIT (Flash of Invisible Text).
      The style.css import is blocking — this preload+onload pattern loads fonts
      without blocking render. At ~16K woff2 this is negligible.
    -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" as="style" onload="this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"></noscript>
    <link rel="preload" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" as="style">
    <link rel="stylesheet" href="/assets/css/style.css?v=860946c8580b63be9471a3affe622ab52c574d69" fetchpriority="high">
    <link rel="stylesheet" href="/assets/css/shared-layout.css?v=860946c8580b63be9471a3affe622ab52c574d69">
    <script src="/assets/js/simulation-ui-utils.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>
    
    
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- Resource hints for third-party services -->
<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">

<!-- Consent and Analytics Script (loads on all pages) -->
<script src="/assets/js/consent.js" defer></script>

<!--
  PERF BUDGET: AI Feedback Panel scripts load ONLY on simulation pages.
  Total size: ~34K (sim-contexts.js: 11K + ai-feedback-panel.js: 23K).
  These add ~0.4s parse time. If latency budget is exceeded, consider
  lazy-loading the AI feedback module on user interaction with a Feedback button.
-->


    <!--
      PERF BUDGET: KaTeX CSS (~57K) loaded non-blocking via media="print" pattern.
      KaTeX JS (~62K gzipped) loaded with defer at bottom of body.
      Only ~5 pages (out of 900+) actually use math delimiters.
      If the latency budget for math pages is tight, consider lazy-loading KaTeX
      only when $ or $$ delimiters are detected in the page content.
    -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn" crossorigin="anonymous"></noscript>

    
  </head>
  <body>
    <a href="#main-content" class="sr-only sr-only-focusable">Skip to main content</a>
    

<nav class="site-nav" id="site-nav" aria-label="Main navigation">
  <a href="https://sims.science/es/" class="site-nav-brand">
    sims.science
  </a>

  <button class="site-nav-toggle" id="nav-toggle" aria-label="Alternar navegación" aria-expanded="false" aria-controls="nav-links">
    <svg viewBox="0 0 24 24">
      <line x1="3" y1="12" x2="21" y2="12"></line>
      <line x1="3" y1="6" x2="21" y2="6"></line>
      <line x1="3" y1="18" x2="21" y2="18"></line>
    </svg>
  </button>

  <div class="site-nav-links" id="nav-links">
    
      <a href="https://sims.science/es/simulaciones/" >Todas las simulaciones</a>
      <a href="https://sims.science/es/simulaciones/ciencias-fisicas/" >Ciencias físicas</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-vida/" >Ciencias de la vida</a>
      <a href="https://sims.science/es/simulaciones/ciencias-de-la-tierra-y-el-espacio/" >Tierra y Espacio</a>
      <a href="https://sims.science/es/student/dashboard/" aria-current="page">Mi Progreso</a>
      <a href="https://sims.science/es/teacher/dashboard/" >Panel del Docente</a>
      <a href="https://sims.science/es/#about">Acerca de</a>
    
    
    <div id="locale-switcher" class="site-locale-switcher" role="group" aria-label="Language switcher" data-slug-map-url="/assets/data/navbar-slug-map.json?v=860946c8580b63be9471a3affe622ab52c574d69">
      <!-- Locale links injected by /assets/js/navbar.js -->
    </div>
    
  </div>
</nav>

<script src="/assets/js/navbar.js" defer></script>

    <main class="container-lg px-3 my-5 markdown-body">
      
      <nav aria-label="breadcrumb" class="breadcrumb-nav">
        <ol>
          
          <li><a href="https://sims.science/es/">Inicio</a></li>
          
          
            <li aria-current="page">Mi Progreso — Panel del Estudiante</li>
          
        </ol>
      </nav>
      

      <div id="main-content" tabindex="-1">
        
          
        <style>
  /* ── Estilos del Panel del Estudiante ───────────────────────────── */
  .dashboard-root {
    min-height: 60vh;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Estado de carga */
  .dashboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    color: #94a3b8;
    text-align: center;
  }

  .dashboard-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #1e293b;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: dashboard-spin 0.8s linear infinite;
    margin-bottom: 1rem;
  }

  @keyframes dashboard-spin {
    to { transform: rotate(360deg); }
  }

  /* Tarjeta de inicio de sesión */
  .dashboard-login-card {
    max-width: 420px;
    margin: 2rem auto;
  }

  .dashboard-login-inner {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
  }

  .dashboard-login-inner h2 {
    color: #f1f5f9;
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
  }

  .dashboard-login-subtitle {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
  }

  .dashboard-login-form {
    text-align: left;
  }

  .dashboard-form-group {
    margin-bottom: 1.25rem;
  }

  .dashboard-form-group label {
    display: block;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.35rem;
  }

  .dashboard-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6);
    color: #f1f5f9;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }

  .dashboard-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
  }

  .dashboard-input::placeholder {
    color: #64748b;
  }

  .dashboard-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    line-height: 1.4;
  }

  .dashboard-btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #ffffff;
  }

  .dashboard-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .dashboard-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .dashboard-btn-outline {
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94a3b8;
  }

  .dashboard-btn-outline:hover {
    border-color: #64748b;
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.05);
  }

  .dashboard-btn-full {
    width: 100%;
    margin-top: 0.5rem;
  }

  .dashboard-error {
    color: #f87171;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
    text-align: center;
  }

  /* Encabezado del panel */
  .dashboard-header {
    margin-bottom: 2rem;
  }

  .dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .dashboard-greeting {
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
  }

  .dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
  }

  .dashboard-stat-card {
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
  }

  .dashboard-stat-icon {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
  }

  .dashboard-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
  }

  .dashboard-stat-label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  /* Secciones de categorías */
  .dashboard-category {
    margin-bottom: 1.75rem;
  }

  .dashboard-category-title {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.6rem 0.25rem;
  }

  .dashboard-sim-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .dashboard-sim-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.1rem;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
    gap: 1rem;
  }

  .dashboard-sim-card:hover {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
  }

  .dashboard-sim-info {
    flex: 1;
    min-width: 0;
  }

  .dashboard-sim-name {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
  }

  .dashboard-sim-card:hover .dashboard-sim-name {
    color: #f1f5f9;
  }

  .dashboard-sim-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .dashboard-sim-score {
    color: #a78bfa;
  }

  .dashboard-sim-dot {
    color: #475569;
  }

  .dashboard-sim-arrow {
    color: #64748b;
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .dashboard-sim-card:hover .dashboard-sim-arrow {
    transform: translateX(3px);
    color: #3b82f6;
  }

  /* Estado vacío */
  .dashboard-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px dashed rgba(148, 163, 184, 0.2);
    border-radius: 12px;
  }

  .dashboard-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }

  .dashboard-empty h3 {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
  }

  .dashboard-empty p {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
  }

  /* Estado de error */
  .dashboard-error-state {
    text-align: center;
    padding: 3rem 1rem;
  }

  .dashboard-error-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }

  .dashboard-error-state h3 {
    color: #f87171;
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
  }

  .dashboard-error-state p {
    color: #94a3b8;
    font-size: 0.9rem;
    margin: 0 0 1.25rem;
  }

  .dashboard-error-state .dashboard-btn {
    margin: 0.25rem;
  }

  /* Modo inicio de sesión: centrar verticalmente */
  .dashboard-login-mode {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dashboard-login-mode .dashboard-loading {
    width: 100%;
  }

  /* Fondo oscuro para el tema */
  .dashboard-root {
    color: #e2e8f0;
    overflow-x: clip;
  }

  /* ── Títulos de sección ──────────────────────────────── */
  .dashboard-section-title {
    color: #f1f5f9;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1rem 0.25rem;
    padding-top: 0.75rem;
  }

  /* ── Dominio de Habilidades ──────────────────────────── */
  .dashboard-mastery-section {
    margin-bottom: 1.75rem;
  }

  .dashboard-mastery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
  }

  .dashboard-mastery-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    padding: 0.85rem 1rem;
  }

  .dashboard-mastery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }

  .dashboard-mastery-code {
    color: #94a3b8;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    letter-spacing: 0.02em;
  }

  .dashboard-mastery-pct {
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 700;
  }

  .dashboard-mastery-bar-track {
    height: 6px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.4rem;
  }

  .dashboard-mastery-bar {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
  }

  .dashboard-mastery-bar-red {
    background: linear-gradient(90deg, #ef4444, #f87171);
  }

  .dashboard-mastery-bar-yellow {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
  }

  .dashboard-mastery-bar-green {
    background: linear-gradient(90deg, #22c55e, #4ade80);
  }

  .dashboard-mastery-meta {
    font-size: 0.75rem;
    color: #64748b;
  }

  /* ── Recomendaciones ─────────────────────────────────── */
  .dashboard-recs-section {
    margin-bottom: 1.75rem;
  }

  .dashboard-recs-card .dashboard-sim-name {
    color: #93c5fd;
  }

  .dashboard-recs-card:hover .dashboard-sim-name {
    color: #bfdbfe;
  }

  .dashboard-recs-reason {
    color: #a78bfa;
    font-size: 0.8rem;
  }

  .dashboard-recs-skill {
    color: #64748b;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
  }
</style>

<link rel="stylesheet" href="/assets/css/student-dashboard.css?v=860946c8580b63be9471a3affe622ab52c574d69">

<div id="student-dashboard-root" class="dashboard-root">
  <!-- JS renderiza el contenido aquí -->
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
  window.__SCIENCE_ED_API_BASE = 'https://api.sims.science';
</script>
<script src="/assets/js/student-dashboard.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>

      </div>

      
    </main>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous" defer></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        if (typeof anchors !== 'undefined') {
          anchors.add();
        }
      });
    </script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js" integrity="sha384-cpW21h6RZv/phavutF+AuVYrr+dA8xD9zs6FwLpaCct6O9ctzYFfFr4dgmgccOTx" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        if (typeof renderMathInElement === 'function') {
          var mathRoot = document.getElementById('main-content') || document.querySelector('.markdown-body') || document.body;
          renderMathInElement(mathRoot, {
            delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
            ],
            // Prevent KaTeX from rendering inside code/pre blocks and similar tags
            ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            throwOnError: false
          });
        }
      });
    </script>
  </body>
</html>