

<!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>Panel del Docente — Gestión de Clases</title>
    
    <link rel="canonical" href="https://sims.science/es/teacher/dashboard/">
    
    <link rel="alternate" hreflang="en" href="https://sims.science/en/teacher/dashboard/">
    <link rel="alternate" hreflang="es" href="https://sims.science/es/teacher/dashboard/">
    <link rel="alternate" hreflang="x-default" href="https://sims.science/en/teacher/dashboard/">
    
    
    <meta name="description" content="Gestiona tus clases, sigue el progreso de los estudiantes, ve percepciones impulsadas por IA y asigna simulaciones desde un solo panel.">
    
    <meta property="og:url" content="https://sims.science/es/teacher/dashboard/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Panel del Docente — Gestión de Clases">
    <meta property="og:description" content="Gestiona tus clases, sigue el progreso de los estudiantes, ve percepciones impulsadas por IA y asigna simulaciones desde un solo panel.">
    <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="Panel del Docente — Gestión de Clases">
    <meta name="twitter:description" content="Gestiona tus clases, sigue el progreso de los estudiantes, ve percepciones impulsadas por IA y asigna simulaciones desde un solo panel.">
    <!--
      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/" >Mi Progreso</a>
      <a href="https://sims.science/es/teacher/dashboard/" aria-current="page">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">Panel del Docente — Gestión de Clases</li>
          
        </ol>
      </nav>
      

      <div id="main-content" tabindex="-1">
        
          
        <style>
  /* ── Panel del Docente ──────────────────────────────────────────── */
  .teacher-dashboard-root {
    min-height: 60vh;
    position: relative;
    color: #e2e8f0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: #0f172a;
    border-radius: 12px;
    padding: 1.5rem;
  }

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

  .teacher-loading-sm {
    padding: 2rem 1rem;
  }

  .teacher-loading-sm p {
    font-size: 0.85rem;
  }

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

  .teacher-spinner-sm {
    width: 24px;
    height: 24px;
    border-width: 2px;
    margin-bottom: 0.5rem;
  }

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

  /* ── Tarjeta de Inicio de Sesión ─────────────────────────────────── */
  .teacher-login-card {
    max-width: 420px;
    margin: 2rem auto;
  }

  .teacher-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;
  }

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

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

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

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

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

  .teacher-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;
  }

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

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

  .teacher-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
    cursor: pointer;
  }

  .teacher-select option,
  .teacher-select optgroup {
    background: #1e293b;
    color: #f1f5f9;
  }

  .teacher-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;
  }

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

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

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

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

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

  .teacher-btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.8rem;
  }

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

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

  .teacher-success {
    color: #34d399;
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
    text-align: center;
  }

  .teacher-form-hint {
    color: #64748b;
    font-size: 0.75rem;
    margin: 0.25rem 0 0;
  }

  .teacher-login-mode {
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .teacher-header {
    margin-bottom: 1.5rem;
  }

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

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

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

  .teacher-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: 1rem;
    text-align: center;
  }

  .teacher-stat-icon {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
  }

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

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

  .teacher-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
    padding-bottom: 0;
  }

  .teacher-tab {
    padding: 0.65rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
  }

  .teacher-tab:hover {
    color: #e2e8f0;
  }

  .teacher-tab-active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
  }

  .teacher-panel {
    display: none;
  }

  .teacher-panel-active {
    display: block;
  }

  .teacher-classes-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .teacher-class-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
  }

  .teacher-class-card:hover {
    border-color: rgba(59, 130, 246, 0.25);
  }

  .teacher-class-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    gap: 1rem;
  }

  .teacher-class-card-header:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .teacher-class-info {
    flex: 1;
    min-width: 0;
  }

  .teacher-class-name {
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.3rem;
  }

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

  .teacher-class-dot {
    color: #475569;
  }

  .teacher-class-code {
    color: #64748b;
  }

  .teacher-class-code strong {
    color: #a78bfa;
    font-family: monospace;
    letter-spacing: 0.05em;
  }

  .teacher-class-stats-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }

  .teacher-mini-stat {
    text-align: center;
    min-width: 50px;
  }

  .teacher-mini-stat-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .teacher-mini-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #e2e8f0;
  }

  .teacher-expand-arrow {
    color: #64748b;
    font-size: 1rem;
    transition: transform 0.2s;
  }

  .teacher-class-card-header:hover .teacher-expand-arrow {
    color: #3b82f6;
  }

  .teacher-status-green {
    color: #34d399 !important;
  }

  .teacher-status-yellow {
    color: #facc15 !important;
  }

  .teacher-status-red {
    color: #f87171 !important;
  }

  .teacher-class-students-panel {
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    padding: 1rem 1.25rem;
  }

  .teacher-class-summary {
    margin-bottom: 1rem;
  }

  .teacher-class-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.75rem;
  }

  .teacher-summary-stat {
    background: rgba(15, 23, 42, 0.4);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    text-align: center;
  }

  .teacher-summary-label {
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.15rem;
  }

  .teacher-summary-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2e8f0;
  }

  .teacher-struggled-topics {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
  }

  .teacher-topics-label {
    font-size: 0.8rem;
    color: #94a3b8;
    flex-shrink: 0;
  }

  .teacher-topics-list {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
  }

  .teacher-topic-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(248, 113, 113, 0.15);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 4px;
    font-size: 0.7rem;
    color: #fca5a5;
    font-weight: 500;
  }

  .teacher-topic-badge-sm {
    padding: 0.1rem 0.4rem;
    font-size: 0.75rem;
  }

  .teacher-no-topics {
    color: #64748b;
    font-size: 0.85rem;
  }

  .teacher-student-table {
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    overflow: hidden;
  }

  @media (min-width: 481px) and (max-width: 767px) {
    .teacher-student-table {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  .teacher-student-table-header,
  .teacher-student-row {
    display: grid;
    grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    align-items: center;
  }

  .teacher-student-table-header {
    background: rgba(15, 23, 42, 0.6);
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
  }

  .teacher-student-row {
    font-size: 0.85rem;
    color: #e2e8f0;
    border-top: 1px solid rgba(148, 163, 184, 0.06);
    transition: background 0.15s;
  }

  .teacher-student-row:hover {
    background: rgba(255, 255, 255, 0.02);
  }

  .teacher-student-col-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .teacher-student-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .teacher-student-col-stat {
    text-align: center;
  }

  .teacher-last-active {
    color: #94a3b8;
    font-size: 0.8rem;
  }

  .teacher-insights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .teacher-insight-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    padding: 1rem 1.15rem;
    border-left: 3px solid transparent;
  }

  .teacher-insight-struggling_student {
    border-left-color: #f87171;
  }

  .teacher-insight-class_trend {
    border-left-color: #facc15;
  }

  .teacher-insight-milestone {
    border-left-color: #34d399;
  }

  .teacher-insight-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
  }

  .teacher-insight-icon {
    font-size: 1.1rem;
  }

  .teacher-insight-type {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    font-weight: 600;
  }

  .teacher-insight-student {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: auto;
  }

  .teacher-insight-body {
    padding-left: 1.6rem;
  }

  .teacher-insight-finding {
    color: #e2e8f0;
    font-size: 0.9rem;
    margin: 0 0 0.3rem;
    line-height: 1.4;
  }

  .teacher-insight-action {
    color: #3b82f6;
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.4;
  }

  .teacher-insight-action-label {
    color: #64748b;
  }

  .teacher-assign-form {
    max-width: 650px;
  }

  .teacher-assign-title {
    color: #f1f5f9;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1.25rem;
  }

  .teacher-assign-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  @media (max-width: 640px) {
    .teacher-assign-row,
    .teacher-student-table-header,
    .teacher-student-row {
      grid-template-columns: 1fr;
    }
    .teacher-student-table-header {
      display: none;
    }
    .teacher-student-row {
      border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: 8px;
      padding: 0.65rem 0.75rem;
      margin-bottom: 0.35rem;
    }
    .teacher-student-col-name {
      grid-column: 1;
    }
    .teacher-student-col-stat {
      text-align: left;
      display: flex;
      justify-content: space-between;
    }
    .teacher-student-col-stat::before {
      content: attr(data-label);
      color: #64748b;
      font-size: 0.75rem;
    }
  }

  .teacher-assign-required-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.3rem;
  }

  .teacher-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
  }

  .teacher-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #3b82f6;
    cursor: pointer;
  }

  .teacher-assign-submit-row {
    margin-top: 1.25rem;
  }

  .teacher-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;
  }

  .teacher-empty-sm {
    padding: 1.5rem 1rem;
  }

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

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

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

  .teacher-empty-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .teacher-empty-highlight {
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.95rem;
  }

  .teacher-empty-hint {
    color: #64748b;
    font-size: 0.75rem;
  }

  .teacher-error-state {
    text-align: center;
    padding: 3rem 1rem;
  }

  .teacher-error-state-sm {
    padding: 1.5rem 1rem;
  }

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

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

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

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

  /* ── Alerts Dashboard ───────────────────────────────────────────── */
  .teacher-alerts-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .teacher-alerts-title {
    color: #f1f5f9;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .teacher-alerts-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
  }
  .teacher-alerts-badge-info { background: rgba(59,130,246,0.2); color: #60a5fa; }
  .teacher-alerts-badge-warning { background: rgba(250,204,21,0.2); color: #facc15; }
  .teacher-alerts-badge-critical { background: rgba(248,113,113,0.2); color: #f87171; }
  .teacher-alerts-badge-unread { background: #f87171; color: #fff; }

  .teacher-alerts-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }

  .teacher-alerts-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(148,163,184,0.12);
    padding-bottom: 0;
  }

  .teacher-alert-tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: -1px;
  }
  .teacher-alert-tab:hover { color: #e2e8f0; }
  .teacher-alert-tab-active { color: #3b82f6; border-bottom-color: #3b82f6; }
  .teacher-alert-tab-count { margin-left: 0.35rem; font-size: 0.7rem; opacity: 0.7; }

  /* ── Alert Cards ────────────────────────────────────────────────── */
  .teacher-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .teacher-alert-card {
    background: rgba(30,41,59,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.1);
    overflow: hidden;
    transition: border-color 0.2s;
    border-left: 4px solid transparent;
  }
  .teacher-alert-card:hover { border-color: rgba(148,163,184,0.2); }

  .teacher-alert-severity-info { border-left-color: #3b82f6; }
  .teacher-alert-severity-warning { border-left-color: #facc15; }
  .teacher-alert-severity-critical { border-left-color: #f87171; }

  .teacher-alert-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
  }
  .teacher-alert-card-header:hover { background: rgba(255,255,255,0.02); }

  .teacher-alert-severity-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    margin-top: 2px;
  }
  .teacher-alert-severity-info .teacher-alert-severity-icon { background: rgba(59,130,246,0.2); color: #60a5fa; }
  .teacher-alert-severity-warning .teacher-alert-severity-icon { background: rgba(250,204,21,0.2); color: #facc15; }
  .teacher-alert-severity-critical .teacher-alert-severity-icon { background: rgba(248,113,113,0.2); color: #f87171; }

  .teacher-alert-content { flex: 1; min-width: 0; }

  .teacher-alert-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.15rem;
  }
  .teacher-alert-title-row h4 {
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
  }

  .teacher-alert-severity-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 3px;
  }
  .teacher-alert-severity-info .teacher-alert-severity-label { background: rgba(59,130,246,0.15); color: #60a5fa; }
  .teacher-alert-severity-warning .teacher-alert-severity-label { background: rgba(250,204,21,0.15); color: #facc15; }
  .teacher-alert-severity-critical .teacher-alert-severity-label { background: rgba(248,113,113,0.15); color: #f87171; }

  .teacher-alert-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: #94a3b8;
  }
  .teacher-alert-meta-dot { color: #475569; }
  .teacher-alert-student-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
  }
  .teacher-alert-student-link:hover { text-decoration: underline; }
  .teacher-alert-class-name { color: #64748b; }
  .teacher-alert-time {
    margin-left: auto;
    color: #64748b;
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  .teacher-alert-description {
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.4;
    margin: 0.3rem 0 0;
  }

  /* ── Collapsed Detail / Expanded Panel ──────────────────────────── */
  .teacher-alert-detail {
    border-top: 1px solid rgba(148,163,184,0.08);
    padding: 0.85rem 1rem 1rem;
    display: none;
  }
  .teacher-alert-detail-open { display: block; }

  .teacher-alert-detail-section { margin-bottom: 0.75rem; }
  .teacher-alert-detail-section:last-child { margin-bottom: 0; }

  .teacher-alert-detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.25rem;
  }

  .teacher-alert-detail-text {
    color: #cbd5e1;
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .teacher-alert-detail-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
  }

  .teacher-alert-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.3;
  }
  .teacher-alert-btn-primary {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
  }
  .teacher-alert-btn-primary:hover {
    background: #2563eb;
  }
  .teacher-alert-btn-outline {
    background: transparent;
    color: #94a3b8;
    border-color: rgba(148,163,184,0.25);
  }
  .teacher-alert-btn-outline:hover {
    border-color: #64748b;
    color: #e2e8f0;
  }
  .teacher-alert-btn-success {
    background: transparent;
    color: #34d399;
    border-color: rgba(52,211,153,0.3);
  }
  .teacher-alert-btn-success:hover {
    background: rgba(52,211,153,0.1);
    border-color: #34d399;
  }
  .teacher-alert-btn-warning {
    background: transparent;
    color: #facc15;
    border-color: rgba(250,204,21,0.3);
  }
  .teacher-alert-btn-warning:hover {
    background: rgba(250,204,21,0.1);
    border-color: #facc15;
  }

  /* ── Alert Grouping ─────────────────────────────────────────────── */
  .teacher-alert-group {
    margin-bottom: 1rem;
  }
  .teacher-alert-group:last-child { margin-bottom: 0; }

  .teacher-alert-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid rgba(148,163,184,0.06);
  }
  .teacher-alert-group-icon { font-size: 1rem; }
  .teacher-alert-group-name {
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .teacher-alert-group-count {
    color: #64748b;
    font-size: 0.75rem;
    margin-left: auto;
  }

  /* ── Empty State ────────────────────────────────────────────────── */
  .teacher-alerts-empty {
    text-align: center;
    padding: 3rem 1rem;
  }
  .teacher-alerts-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
  }
  .teacher-alerts-empty h3 {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0 0 0.3rem;
  }
  .teacher-alerts-empty p {
    color: #64748b;
    font-size: 0.85rem;
    margin: 0;
  }

  /* ── Alert History Filters ──────────────────────────────────────── */
  .teacher-alert-filters {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .teacher-alert-filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .teacher-alert-filter-group label {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
  }
  .teacher-alert-filter-select {
    font-size: 0.78rem;
    padding: 0.3rem 1.5rem 0.3rem 0.5rem;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    background: rgba(15,23,42,0.6);
    color: #e2e8f0;
    cursor: pointer;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.4rem center;
  }
  .teacher-alert-filter-select option {
    background: #1e293b;
    color: #f1f5f9;
  }

  .teacher-alert-filter-date {
    font-size: 0.78rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    background: rgba(15,23,42,0.6);
    color: #e2e8f0;
  }

  /* ── WS Connection Status ────────────────────────────────────────── */
  .teacher-ws-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: #64748b;
  }
  .teacher-ws-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
  }
  .teacher-ws-dot-connected { background: #34d399; }
  .teacher-ws-dot-disconnected { background: #f87171; }
  .teacher-ws-dot-connecting { background: #facc15; }

  /* ── Pagination ─────────────────────────────────────────────────── */
  .teacher-alert-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148,163,184,0.08);
  }
  .teacher-alert-page-btn {
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(148,163,184,0.2);
    border-radius: 6px;
    background: transparent;
    color: #94a3b8;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
  }
  .teacher-alert-page-btn:hover { border-color: #64748b; color: #e2e8f0; }
  .teacher-alert-page-btn:disabled { opacity: 0.4; cursor: default; }
  .teacher-alert-page-info { color: #64748b; font-size: 0.78rem; }

  /* ── Responsivo ─────────────────────────────────────────────────── */

  /* Tableta (768px) */
  @media (max-width: 768px) {
    .teacher-greeting {
      font-size: 1.25rem;
    }
    .teacher-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .teacher-tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      gap: 0;
    }
    .teacher-tabs::-webkit-scrollbar {
      display: none;
    }
    .teacher-tab {
      white-space: nowrap;
      flex-shrink: 0;
      padding: 0.65rem 0.9rem;
    }
    .teacher-class-summary-stats {
      grid-template-columns: repeat(2, 1fr);
    }
    .teacher-assign-form {
      max-width: 100%;
    }
    .teacher-alerts-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .teacher-alert-filters {
      flex-direction: column;
      align-items: flex-start;
    }
    .teacher-alert-card-header {
      flex-wrap: wrap;
    }
    .teacher-class-card-header {
      flex-wrap: wrap;
    }
    .teacher-class-stats-mini {
      gap: 0.5rem;
    }
  }

  /* Móvil (480px) */
  @media (max-width: 480px) {
    .teacher-welcome {
      flex-direction: column;
      align-items: flex-start;
    }
    .teacher-stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .teacher-class-card-header {
      flex-direction: column;
      align-items: flex-start;
    }
    .teacher-class-stats-mini {
      width: 100%;
      justify-content: space-between;
    }
    .teacher-class-summary-stats {
      grid-template-columns: repeat(2, 1fr);
    }
    .teacher-assign-row {
      grid-template-columns: 1fr;
    }
    .teacher-tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .teacher-tab {
      white-space: nowrap;
      padding: 0.65rem 1rem;
    }
    .teacher-alert-card {
      border-left-width: 3px;
    }
    .teacher-alert-title-row h4 {
      font-size: 0.82rem;
    }
    .teacher-alert-time {
      margin-left: 0;
      width: 100%;
      margin-top: 0.25rem;
    }
    .teacher-onboarding-guide {
      padding: 1.5rem 0.75rem;
    }
    .teacher-onboarding-step {
      padding: 0.75rem;
    }
  }

  /* ── Guía de incorporación (estado vacío) ────────────────────── */
  .teacher-onboarding-guide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    max-width: 640px;
    margin: 2rem auto;
  }

  .teacher-onboarding-guide-hidden {
    display: none !important;
  }

  .teacher-onboarding-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .teacher-onboarding-guide h2 {
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .teacher-onboarding-guide > p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
    max-width: 500px;
  }

  .teacher-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .teacher-onboarding-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    text-align: left;
    transition: border-color 0.2s;
  }

  .teacher-onboarding-step:hover {
    border-color: rgba(59, 130, 246, 0.25);
  }

  .teacher-onboarding-step-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 2px;
  }

  .teacher-onboarding-step-body h3 {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.2rem;
  }

  .teacher-onboarding-step-body p {
    color: #94a3b8;
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.45;
  }

  .teacher-onboarding-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .teacher-onboarding-actions .teacher-btn {
    padding: 0.55rem 1.3rem;
    font-size: 0.88rem;
  }

  .teacher-onboarding-dismiss {
    color: #64748b;
    font-size: 0.78rem;
    background: none;
    border: none;
    cursor: pointer;
    margin-top: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .teacher-onboarding-dismiss:hover {
    color: #94a3b8;
  }

  @media (max-width: 480px) {
    .teacher-onboarding-steps {
      gap: 0.6rem;
    }
    .teacher-onboarding-step {
      padding: 0.85rem;
    }
    .teacher-onboarding-guide h2 {
      font-size: 1.25rem;
    }
  }

  /* Extra small (360px) — evitar desbordamiento en teléfonos muy estrechos */
  @media (max-width: 360px) {
    .teacher-dashboard-root {
      overflow-x: clip;
    }
    .teacher-stats-grid {
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem;
    }
    .teacher-stat-card {
      padding: 0.6rem 0.4rem;
    }
    .teacher-stat-value {
      font-size: 1.3rem;
    }
    .teacher-stat-icon {
      font-size: 1.1rem;
      margin-bottom: 0.15rem;
    }
    .teacher-stat-label {
      font-size: 0.65rem;
    }
    .teacher-welcome {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    .teacher-greeting {
      font-size: 1.1rem;
    }
    .teacher-class-card-header {
      padding: 0.65rem 0.75rem;
      gap: 0.5rem;
    }
    .teacher-class-name {
      font-size: 0.88rem;
    }
    .teacher-class-meta {
      font-size: 0.68rem;
      gap: 0.2rem;
    }
    .teacher-class-stats-mini {
      gap: 0.35rem;
    }
    .teacher-mini-stat {
      min-width: 32px;
    }
    .teacher-mini-stat-label {
      font-size: 0.55rem;
    }
    .teacher-mini-stat-value {
      font-size: 0.85rem;
    }
    .teacher-class-students-panel {
      padding: 0.65rem 0.75rem;
    }
    .teacher-class-summary-stats {
      grid-template-columns: 1fr 1fr;
      gap: 0.35rem;
    }
    .teacher-summary-stat {
      padding: 0.4rem 0.5rem;
    }
    .teacher-summary-value {
      font-size: 0.95rem;
    }
    .teacher-tab {
      padding: 0.5rem 0.65rem;
      font-size: 0.78rem;
    }
    .teacher-alert-card {
      border-left-width: 2px;
    }
    .teacher-alert-card-header {
      padding: 0.6rem 0.7rem;
      gap: 0.5rem;
    }
    .teacher-alert-title-row h4 {
      font-size: 0.78rem;
    }
    .teacher-alert-meta {
      font-size: 0.68rem;
    }
    .teacher-alert-severity-icon {
      width: 22px;
      height: 22px;
      font-size: 0.65rem;
    }
    .teacher-onboarding-guide {
      padding: 1.25rem 0.6rem;
    }
    .teacher-onboarding-steps {
      gap: 0.45rem;
    }
    .teacher-onboarding-step {
      padding: 0.65rem;
      gap: 0.65rem;
    }
    .teacher-onboarding-step-num {
      width: 24px;
      height: 24px;
      font-size: 0.75rem;
    }
    .teacher-onboarding-step-body h3 {
      font-size: 0.82rem;
    }
    .teacher-onboarding-step-body p {
      font-size: 0.75rem;
    }
    .teacher-student-table-header,
    .teacher-student-row {
      grid-template-columns: 1fr;
      padding: 0.45rem 0.65rem;
    }
    .teacher-student-table-header {
      display: none;
    }
    .teacher-student-row {
      border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: 8px;
      padding: 0.55rem 0.65rem;
      margin-bottom: 0.35rem;
    }
    .teacher-student-col-name {
      grid-column: 1;
      font-size: 0.82rem;
    }
    .teacher-student-col-stat {
      text-align: left;
      display: flex;
      justify-content: space-between;
      font-size: 0.78rem;
    }
    .teacher-student-col-stat::before {
      content: attr(data-label);
      color: #64748b;
      font-size: 0.7rem;
    }
    .teacher-assign-form {
      max-width: 100%;
    }
  }
</style>

<div id="teacher-dashboard-root" class="teacher-dashboard-root">
  <!-- ── Guía de incorporación para primera visita ── -->
  <div class="teacher-onboarding-guide" id="teacher-onboarding-guide">
    <div class="teacher-onboarding-icon">👋</div>
    <h2>Bienvenido a tu Panel del Docente</h2>
    <p>Este es tu centro de mando para gestionar clases, dar seguimiento al progreso de los estudiantes y obtener información impulsada por IA.</p>
    <div class="teacher-onboarding-steps">
      <div class="teacher-onboarding-step">
        <div class="teacher-onboarding-step-num">1</div>
        <div class="teacher-onboarding-step-body">
          <h3>Regístrate o Inicia Sesión</h3>
          <p>Crea una cuenta de docente o inicia sesión para acceder a tu panel. Tu cuenta se sincroniza entre dispositivos.</p>
        </div>
      </div>
      <div class="teacher-onboarding-step">
        <div class="teacher-onboarding-step-num">2</div>
        <div class="teacher-onboarding-step-body">
          <h3>Crea una Clase</h3>
          <p>Asigna un nombre y nivel de grado a tu clase. Se genera automáticamente un código de clase único.</p>
        </div>
      </div>
      <div class="teacher-onboarding-step">
        <div class="teacher-onboarding-step-num">3</div>
        <div class="teacher-onboarding-step-body">
          <h3>Invita a tus Estudiantes</h3>
          <p>Comparte el código de clase con tus estudiantes. Ellos se unen desde el panel del estudiante — sin correo electrónico ni información personal.</p>
        </div>
      </div>
      <div class="teacher-onboarding-step">
        <div class="teacher-onboarding-step-num">4</div>
        <div class="teacher-onboarding-step-body">
          <h3>Da Seguimiento y Asigna</h3>
          <p>Ve las estadísticas de la clase de un vistazo, asigna simulaciones, monitorea el progreso e identifica estudiantes que necesitan ayuda adicional.</p>
        </div>
      </div>
    </div>
    <div class="teacher-onboarding-actions">
      <a href="/es/primeros-pasos/" class="teacher-btn teacher-btn-primary">Ver guía de primeros pasos →</a>
    </div>
    <button class="teacher-onboarding-dismiss" onclick="dismissTeacherOnboarding()">Entendido, ocultar esta guía</button>
  </div>
  <!-- JS renderiza el contenido del panel aquí después de esta guía -->
</div>

<script>
  window.__SCIENCE_ED_API_BASE = 'https://api.sims.science';

  // ── Guía de incorporación del panel del docente ──
  (function() {
    var guide = document.getElementById('teacher-onboarding-guide');
    if (!guide) return;

    // Verificar si ya fue descartado permanentemente
    if (localStorage.getItem('sims-teacher-onboarding-dismissed')) {
      guide.classList.add('teacher-onboarding-guide-hidden');
      return;
    }

    // Ocultar automáticamente cuando el JS del panel cargue contenido
    var root = document.getElementById('teacher-dashboard-root');
    if (root && window.MutationObserver) {
      var observer = new MutationObserver(function() {
        var childCount = root.children.length;
        var hasGuide = root.contains(guide);
        var hasDashboardContent = (hasGuide && childCount > 1) || (!hasGuide && childCount > 0);

        if (hasDashboardContent) {
          guide.classList.add('teacher-onboarding-guide-hidden');
          observer.disconnect();
        }
      });
      observer.observe(root, { childList: true, subtree: true });
    }
  })();

  function dismissTeacherOnboarding() {
    var guide = document.getElementById('teacher-onboarding-guide');
    if (guide) guide.classList.add('teacher-onboarding-guide-hidden');
    try { localStorage.setItem('sims-teacher-onboarding-dismissed', 'true'); } catch(e) {}
  }
</script>
<script src="/assets/js/teacher-dashboard.js?v=860946c8580b63be9471a3affe622ab52c574d69" defer></script>
<script src="/assets/js/ai-insights-panel.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>