/* ==========================================================================
   Evaluador Auténtica - Estilos VS Code Dark+ & Pygments
   ========================================================================== */

:root {
  --bg-darker: #181818;
  --bg-editor: #1e1e1e;
  --bg-sidebar: #252526;
  --bg-activity: #333333;
  --bg-titlebar: #323233;
  --bg-tab-active: #1e1e1e;
  --bg-tab-inactive: #2d2d2d;
  --bg-input: #3c3c3c;
  --bg-hover: #2a2d2e;
  --bg-active: #37373d;
  --border-color: #3f3f46;
  --border-subtle: #2d2d30;
  
  --accent-blue: #007acc;
  --accent-blue-hover: #0098ff;
  --accent-statusbar: #007acc;
  --accent-cyan: #4ec9b0;
  --accent-yellow: #dcdcaa;
  --accent-purple: #c586c0;
  --accent-orange: #ce9178;
  --accent-green: #6a9955;
  --accent-number: #b5cea8;
  
  --text-main: #cccccc;
  --text-bright: #ffffff;
  --text-muted: #858585;
  --text-danger: #f14c4c;
  --text-success: #73c991;
  --text-warning: #cca700;

  --badge-green: #1b5e20;
  --badge-green-text: #a5d6a7;

  --font-code: 'Fira Code', 'Consolas', 'Courier New', monospace;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  --code-font-size: 13.5px;
  --line-height-factor: 1.55;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Scrollbars modernos estilo VS Code */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(121, 121, 121, 0.4);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(121, 121, 121, 0.7);
}

body.vscode-theme {
  font-family: var(--font-ui);
  background-color: var(--bg-darker);
  color: var(--text-main);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* ==========================================================================
   Title Bar
   ========================================================================== */
.titlebar {
  height: 38px;
  background-color: var(--bg-titlebar);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-main);
  flex-shrink: 0;
  z-index: 100;
}

.titlebar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-name {
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-bright);
}

.role-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.role-maestro {
  background-color: #1b5e20;
  color: #a5d6a7;
  border: 1px solid #2e7d32;
}

.role-estudiante {
  background-color: #0d47a1;
  color: #90caf9;
  border: 1px solid #1976d2;
}

.student-active-tag {
  color: var(--accent-yellow);
  font-weight: 600;
  font-size: 12px;
}

.course-tag {
  color: var(--text-muted);
  font-size: 11px;
  padding-left: 8px;
  border-left: 1px solid var(--border-color);
}

.titlebar-center {
  background-color: #202020;
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid #444;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.titlebar-center .team-crumb {
  color: var(--accent-blue-hover);
  font-weight: 500;
}

.titlebar-center .student-crumb {
  color: var(--accent-yellow);
}

.titlebar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Font Zoom Controls */
.font-zoom-widget {
  display: flex;
  align-items: center;
  background-color: #252526;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  gap: 6px;
}

.font-zoom-title {
  font-size: 10px;
  color: var(--text-muted);
}

.font-btn {
  background: transparent;
  border: none;
  color: var(--text-main);
  font-family: var(--font-code);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
  transition: all 0.15s ease;
}

.font-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-bright);
}

.font-size-label {
  font-family: var(--font-code);
  font-size: 11px;
  color: var(--accent-cyan);
  min-width: 32px;
  text-align: center;
}

.tb-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.tb-btn:hover {
  background-color: var(--bg-hover);
  color: var(--text-bright);
  border-color: var(--accent-blue);
}

.tb-btn.btn-highlight {
  background-color: rgba(0, 122, 204, 0.2);
  border-color: var(--accent-blue);
  color: #ffffff;
}

.tb-btn.btn-highlight:hover {
  background-color: var(--accent-blue);
}

.tb-btn-logout:hover {
  background-color: rgba(241, 76, 76, 0.15);
  border-color: var(--text-danger);
  color: #ff8585;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  font-size: 11px;
}

.user-avatar-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-color);
}

.user-avatar-fallback {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
}

.user-name-label {
  color: var(--text-bright);
  font-weight: 500;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge-role-superadmin {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.4);
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.sync-indicator-pill {
  font-size: 10.5px;
  color: #73c991;
  background-color: rgba(115, 201, 145, 0.15);
  border: 1px solid rgba(115, 201, 145, 0.4);
  padding: 2px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Workbench & Panels Layout (Maestro)
   ========================================================================== */
.workbench {
  flex: 1;
  display: flex;
  overflow: hidden;
  position: relative;
}

/* Activity Bar */
.activity-bar {
  width: 48px;
  background-color: var(--bg-activity);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-right: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.activity-top, .activity-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease;
  position: relative;
  text-decoration: none;
}

.activity-icon:hover, .activity-icon.active {
  color: var(--text-bright);
}

.activity-icon.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background-color: var(--accent-blue);
}

/* Sidebar */
.sidebar {
  width: 280px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-title {
  color: var(--text-muted);
}

.badge-total {
  background-color: var(--bg-hover);
  color: var(--accent-cyan);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-family: var(--font-code);
}

.sidebar-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-search input {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--text-bright);
  font-size: 12px;
  outline: none;
}

.sidebar-search input:focus {
  border-color: var(--accent-blue);
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

/* Team Accordion Items */
.team-group {
  margin-bottom: 2px;
}

.team-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin: 0 4px;
  transition: background 0.15s ease;
}

.team-header-row:hover {
  background-color: var(--bg-hover);
}

.team-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chevron-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

.team-group.open .chevron-icon {
  transform: rotate(90deg);
}

.team-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
}

.team-score-badge {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  background-color: #1e3a5f;
  color: #79b8ff;
}

.team-students-list {
  display: none;
  padding-left: 18px;
  margin: 2px 0 6px 0;
}

.team-group.open .team-students-list {
  display: block;
}

.student-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 6px 8px;
  margin: 1px 4px 1px 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-main);
  transition: all 0.15s ease;
}

.student-row:hover {
  background-color: var(--bg-hover);
  color: var(--text-bright);
}

.student-row.selected {
  background-color: var(--accent-blue);
  color: #ffffff;
}

.student-name-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.student-status-badge {
  font-size: 10px;
  font-family: var(--font-code);
  padding: 1px 5px;
  border-radius: 3px;
}

.student-status-badge.evaluado {
  background-color: var(--badge-green);
  color: #a5d6a7;
}

.student-status-badge.pendiente {
  background-color: #383838;
  color: var(--text-muted);
}

/* ==========================================================================
   Main Editor Area (Maestro Layout)
   ========================================================================== */
.main-editor-area {
  flex: 1;
  display: grid;
  grid-template-columns: 56% 44%;
  overflow: hidden;
  background-color: var(--bg-editor);
}

.code-viewport {
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-editor);
}

.tabs-bar {
  height: 35px;
  background-color: var(--bg-tab-inactive);
  display: flex;
  align-items: flex-end;
  padding: 0 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.tab {
  height: 34px;
  padding: 0 14px;
  background-color: var(--bg-tab-inactive);
  color: var(--text-muted);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
  position: relative;
  transition: background 0.15s ease;
}

.tab.active {
  background-color: var(--bg-tab-active);
  color: var(--text-bright);
}

.tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-blue);
}

.tab-dirty {
  font-size: 9px;
  text-transform: uppercase;
  background-color: #3c3c3c;
  color: #a0a0a0;
  padding: 1px 4px;
  border-radius: 2px;
}

.additional-tabs {
  display: flex;
}

.file-breadcrumb {
  height: 25px;
  background-color: var(--bg-editor);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.bc-sep {
  color: #555;
}

.symbol-scope {
  color: var(--accent-yellow);
}

.file-selector-box {
  display: flex;
  align-items: center;
}

.repo-file-dropdown {
  background-color: var(--bg-darker, #1e1e1e);
  color: var(--text-bright, #e6edf3);
  border: 1px solid var(--border-color, #30363d);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: var(--font-code, 'Consolas', monospace);
  outline: none;
  cursor: pointer;
  max-width: 280px;
  text-overflow: ellipsis;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.repo-file-dropdown:hover,
.repo-file-dropdown:focus {
  border-color: var(--accent-blue, #58a6ff);
  box-shadow: 0 0 0 1px var(--accent-blue, #58a6ff);
}

.repo-file-dropdown option {
  background: #1e1e1e;
  color: #e6edf3;
  padding: 4px;
}

/* Estado de bloqueo del selector y pestañas durante la carga */
.repo-file-dropdown:disabled {
  opacity: 0.55 !important;
  cursor: wait !important;
  border-color: rgba(88, 166, 255, 0.4) !important;
}

.tabs-bar.loading-locked {
  pointer-events: none !important;
  opacity: 0.65;
  cursor: wait !important;
}

/* Overlay y Loader Visual del Visor de Código */
.code-loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  height: 100%;
  padding: 40px 20px;
  background-color: var(--bg-editor, #1e1e1e);
  color: var(--text-muted, #9da5b4);
  user-select: none;
}

.code-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px 32px;
  background: rgba(30, 34, 42, 0.7);
  border: 1px solid var(--border-subtle, #282c34);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  text-align: center;
  max-width: 440px;
}

.code-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(88, 166, 255, 0.18);
  border-top-color: var(--accent-blue, #58a6ff);
  border-radius: 50%;
  animation: codeSpin 0.85s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes codeSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.code-loading-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-bright, #e6edf3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  word-break: break-all;
}

.code-loading-title code {
  color: var(--accent-blue, #58a6ff);
  background: rgba(56, 139, 253, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-code, 'Consolas', monospace);
  font-size: 12.5px;
}

.code-loading-sub {
  font-size: 11.5px;
  color: var(--text-dim, #7d8590);
  line-height: 1.4;
}

/* Code Container & Pygments Syntax Rendering */
.code-container {
  flex: 1;
  overflow: auto;
  background-color: var(--bg-editor);
  position: relative;
}

.code-content-wrapper {
  padding: 10px 0;
  min-width: 100%;
  display: inline-block;
}

.empty-code-notice {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

/* Líneas de código con Pygments */
.code-line {
  display: flex;
  align-items: stretch;
  font-family: var(--font-code);
  font-size: var(--code-font-size);
  line-height: var(--line-height-factor);
  width: 100%;
  position: relative;
  cursor: text;
}

.code-line:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.line-num {
  width: 55px;
  padding-right: 14px;
  text-align: right;
  color: #636363;
  user-select: none;
  background-color: var(--bg-editor);
  flex-shrink: 0;
  border-right: 1px solid #2b2b2b;
  cursor: pointer;
}

.line-num:hover {
  color: var(--text-bright);
}

.line-code {
  padding-left: 14px;
  padding-right: 20px;
  white-space: pre;
  tab-size: 4;
  -moz-tab-size: 4;
  color: #d4d4d4;
  user-select: text;
  flex: 1;
}

/* Pygments Token Color Palette (VS Code Dark+) */
.k, .kd, .kn, .kp, .kr { color: var(--accent-purple) !important; font-weight: 500; }
.nf, .fm { color: var(--accent-yellow) !important; }
.s, .s1, .s2, .sa, .sb, .sc, .sd, .se, .sh, .si, .sx, .sr, .ss { color: var(--accent-orange) !important; }
.c, .c1, .ch, .cm, .cp, .cpf, .cs { color: var(--accent-green) !important; font-style: italic; }
.m, .mf, .mh, .mi, .il, .mo, .mb { color: var(--accent-number) !important; }
.nc { color: var(--accent-cyan) !important; font-weight: 600; }
.nb { color: #4ec9b0 !important; }
.p, .o, .ow { color: #d4d4d4; }
.n, .na, .nv, .no, .nd { color: #9cdcfe; }
.w { color: #ffffff; }

/* ==========================================================================
   Sincronización de Selección de Código y Cursores Remotos
   ========================================================================== */
/* Línea activa local */
.code-line.active-local-line {
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 2px 0 0 0 rgba(255, 255, 255, 0.4);
}

/* Cursor / Selección remota del Maestro (visible en pantalla del estudiante) */
.code-line.remote-line-maestro {
  background-color: rgba(0, 122, 204, 0.22) !important;
  box-shadow: inset 3px 0 0 0 #007acc;
  position: relative;
}

.code-line.remote-line-maestro.remote-badge-maestro::after {
  content: '👨‍🏫 Profesor';
  position: absolute;
  right: 16px;
  top: 2px;
  font-size: 10px;
  font-family: var(--font-ui);
  background-color: #007acc;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.95;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Cursor / Selección remota del Estudiante (visible en pantalla del maestro) */
.code-line.remote-line-estudiante {
  background-color: rgba(78, 201, 176, 0.22) !important;
  box-shadow: inset 3px 0 0 0 #4ec9b0;
  position: relative;
}

.code-line.remote-line-estudiante.remote-badge-estudiante::after {
  content: '🧑‍🎓 Alumno';
  position: absolute;
  right: 16px;
  top: 2px;
  font-size: 10px;
  font-family: var(--font-ui);
  background-color: #00897b;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.95;
  z-index: 10;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Línea Resaltada por Pregunta */
.code-line-highlight {
  background-color: rgba(38, 79, 120, 0.45) !important;
  box-shadow: inset 4px 0 0 0 var(--accent-blue);
}

.code-line-highlight.pulse {
  animation: pulseLine 1.2s ease-in-out;
}

@keyframes pulseLine {
  0% { background-color: rgba(220, 220, 170, 0.45) !important; }
  50% { background-color: rgba(0, 122, 204, 0.6) !important; }
  100% { background-color: rgba(38, 79, 120, 0.45) !important; }
}

/* ==========================================================================
   Right Panel: Evaluador del Maestro
   ========================================================================== */
.evaluator-panel {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: #1a1a1a;
  border-left: 1px solid var(--border-color);
}

.empty-eval-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  height: 100%;
  color: var(--text-muted);
}

.instructions-card {
  background-color: #222222;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
  text-align: left;
  max-width: 440px;
  margin-top: 14px;
}

.instructions-card h4 {
  color: var(--accent-blue-hover);
  font-size: 13px;
  margin-bottom: 10px;
}

.instructions-card ul {
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.6;
}

.active-eval-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
}

/* Student Hero Card */
.student-hero-card {
  background: linear-gradient(135deg, #25282d 0%, #1e2024 100%);
  border: 1px solid #383d47;
  border-radius: 8px;
  padding: 14px;
}

.student-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.student-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #007acc, #005a9e);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 122, 204, 0.3);
  flex-shrink: 0;
}

.student-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.student-team-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-blue-hover);
  text-transform: uppercase;
}

.student-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-bright);
}

.eval-status-pill {
  font-size: 10px;
  color: var(--text-muted);
}

/* Scoreboard */
.scoreboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px;
}

.score-card {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-card.final {
  background-color: rgba(0, 122, 204, 0.15);
  border-color: rgba(0, 122, 204, 0.4);
}

.sc-label {
  font-size: 9.5px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.sc-value {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-code);
  color: var(--text-bright);
}

.sc-sub {
  font-size: 9px;
  color: var(--text-muted);
}

.sc-meter-bar {
  width: 100%;
  height: 4px;
  background-color: #333;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
}

.sc-meter-fill {
  display: block;
  height: 100%;
  background-color: var(--accent-blue-hover);
  transition: width 0.3s ease;
}

/* Mode Selector */
.mode-selector-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

.mode-buttons-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mode-btn {
  background-color: #242424;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 9px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  transition: all 0.2s ease;
}

.mode-btn:hover {
  background-color: var(--bg-hover);
  border-color: var(--text-muted);
}

.mode-btn.active {
  background-color: #1a324a;
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(0, 122, 204, 0.3);
}

.mode-btn:disabled,
.mode-btn.locked {
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(40%);
}

.mode-btn:disabled:hover,
.mode-btn.locked:hover {
  background-color: #242424;
  border-color: var(--border-color);
}

.mode-btn.active.locked,
.mode-btn.active:disabled {
  opacity: 1;
  cursor: default;
  filter: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(0, 122, 204, 0.4);
}

.mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mode-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-bright);
}

.mode-badge {
  font-size: 9.5px;
  font-family: var(--font-code);
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background-color: #2d3748;
  color: #63b3ed;
}

.mode-btn.active .mode-badge {
  background-color: var(--accent-blue);
  color: #fff;
}

.mode-desc {
  font-size: 9.5px;
  color: var(--text-muted);
}

/* ==========================================================================
   Cronómetro Contrarreloj Maestro
   ========================================================================== */
.timer-control-panel {
  background: linear-gradient(135deg, #1f232b 0%, #181a20 100%);
  border: 1px solid #323946;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timer-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timer-readout-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timer-icon {
  font-size: 16px;
}

.timer-digits {
  font-family: var(--font-code);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: 1px;
}

.timer-digits.time-warning {
  color: #ffb74d;
}

.timer-digits.time-danger {
  color: var(--text-danger);
  animation: timerBlink 1s infinite alternate;
}

@keyframes timerBlink {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}

.timer-status-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  text-transform: uppercase;
}

.timer-status-badge.badge-ready {
  background-color: #2b303a;
  color: #9cb2c9;
}

.timer-status-badge.badge-running {
  background-color: #1b4d2e;
  color: #81c784;
}

.timer-status-badge.badge-paused {
  background-color: #4a3800;
  color: #ffd54f;
}

.timer-status-badge.badge-timeout {
  background-color: #5c1818;
  color: #ff8a80;
}

.timer-controls-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.timer-duration-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
}

.timer-cfg-label {
  font-size: 11px;
  color: var(--text-muted);
}

.timer-select {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

.timer-input-custom {
  width: 55px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  outline: none;
  font-family: var(--font-code);
}

.timer-btn {
  background-color: #272d38;
  border: 1px solid #3e4656;
  color: var(--text-bright);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.timer-btn:hover {
  background-color: #353d4c;
  border-color: #535e75;
}

.btn-timer-toggle {
  background-color: #1a4268;
  border-color: #28649c;
  color: #64b5f6;
}

.btn-timer-toggle:hover {
  background-color: #205485;
  color: #ffffff;
}

.btn-timer-toggle.running {
  background-color: #4a3800;
  border-color: #8c6b00;
  color: #ffd54f;
}

.timer-sound-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-main);
  cursor: pointer;
  user-select: none;
  margin-left: 2px;
}

.timer-sound-label input[type="checkbox"] {
  accent-color: var(--accent-blue);
  cursor: pointer;
}

.timer-timeout-banner {
  background-color: rgba(241, 76, 76, 0.15);
  border: 1px solid rgba(241, 76, 76, 0.4);
  color: #ff8a80;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   Preguntas: Vista Previa Maestro y Envío al Alumno
   ========================================================================== */
.questions-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.questions-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.q-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Checkbox estilizado para ayuda de líneas al alumno */
.toggle-help-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-yellow);
  cursor: pointer;
  user-select: none;
  background-color: rgba(220, 220, 170, 0.1);
  border: 1px solid rgba(220, 220, 170, 0.3);
  padding: 3px 9px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.toggle-help-checkbox:hover {
  background-color: rgba(220, 220, 170, 0.18);
  border-color: var(--accent-yellow);
}

/* Botón Barajar Preguntas */
.btn-shuffle-questions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #5eead4;
  background-color: rgba(20, 184, 166, 0.14);
  border: 1px solid rgba(20, 184, 166, 0.38);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.btn-shuffle-questions:hover {
  background-color: rgba(20, 184, 166, 0.28);
  border-color: #2dd4bf;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.btn-shuffle-questions:active {
  transform: translateY(0);
}

.toggle-help-checkbox input[type="checkbox"] {
  accent-color: var(--accent-yellow);
  cursor: pointer;
  width: 14px;
  height: 14px;
}

.hint-reveal-text {
  font-size: 10.5px;
  color: var(--accent-cyan);
}

.questions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjeta de Pregunta en Vista del Maestro */
.question-card {
  background-color: #22252a;
  border: 1px solid #333842;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  transition: border-color 0.2s ease;
}

.question-card.active-focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(0, 122, 204, 0.25);
}

.question-card.sent-to-student {
  border-left: 4px solid #73c991;
}

.question-card.correcta {
  border-color: rgba(115, 201, 145, 0.7);
  background-color: #1c2720;
}

.question-card.parcial {
  border-color: rgba(204, 167, 0, 0.75);
  background-color: #262113;
}

.question-card.incorrecta {
  border-color: rgba(241, 76, 76, 0.7);
  background-color: #2b1d1d;
}

.q-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.q-tags-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.q-points-tag {
  font-family: var(--font-code);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background-color: #007acc;
  color: #fff;
}

.q-category-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: #2b303c;
  color: #9bb7d4;
}

.q-category-tag.sospechosa {
  background-color: #4a2800;
  color: #ffb86c;
  border: 1px solid #7a4200;
}

.q-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Botón Enviar Pregunta al Alumno */
.btn-send-to-student {
  background-color: #007acc;
  border: 1px solid #0098ff;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 122, 204, 0.3);
}

.btn-send-to-student:hover {
  background-color: #0098ff;
}

.badge-sent-to-student {
  background-color: rgba(115, 201, 145, 0.2);
  border: 1px solid #73c991;
  color: #a5d6a7;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.q-btn-viewcode {
  background: transparent;
  border: 1px solid #444c56;
  color: var(--accent-yellow);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.q-btn-viewcode:hover {
  background-color: rgba(220, 220, 170, 0.15);
  border-color: var(--accent-yellow);
}

.q-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.45;
}

/* Guía de Respuesta Esperada (Solo Maestro) */
.q-expected-details {
  background-color: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px 10px;
}

.q-expected-details summary {
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  font-weight: 600;
}

.q-expected-text {
  font-size: 12px;
  line-height: 1.45;
  color: #b5c7d8;
  margin-top: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--accent-blue);
}

/* Botones de Calificación Oral con Soporte de Puntaje Parcial */
.q-actions-bar {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.btn-grade-correct, .btn-grade-partial, .btn-grade-incorrect {
  flex: 1;
  padding: 8px 8px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-grade-correct {
  background-color: #1e3a29;
  border-color: #2e6241;
  color: #73c991;
}

.btn-grade-correct:hover, .btn-grade-correct.selected {
  background-color: #1b5e20;
  border-color: #81c784;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(115, 201, 145, 0.4);
}

.btn-grade-partial {
  background-color: #352d14;
  border-color: #57481b;
  color: #e5c052;
}

.btn-grade-partial:hover, .btn-grade-partial.selected {
  background-color: #614902;
  border-color: #ffd54f;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(229, 192, 82, 0.4);
}

.btn-grade-incorrect {
  background-color: #3d1c1c;
  border-color: #632d2d;
  color: #f14c4c;
}

.btn-grade-incorrect:hover, .btn-grade-incorrect.selected {
  background-color: #b71c1c;
  border-color: #e57373;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(241, 76, 76, 0.4);
}

.btn-grade-tune {
  background-color: #272a30;
  border: 1px solid #3c424d;
  color: var(--text-muted);
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.btn-grade-tune:hover, .btn-grade-tune.active {
  background-color: #383e4a;
  border-color: var(--accent-yellow);
  color: var(--accent-yellow);
}

/* Panel Desplegable de Ajuste Fino de Puntaje Parcial */
.q-partial-panel {
  background-color: #191c22;
  border: 1px solid #3c424e;
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 11px;
}

.partial-panel-title {
  color: #cca700;
  font-weight: 700;
}

.partial-quick-btns {
  display: flex;
  gap: 4px;
}

.btn-pct-opt {
  background-color: #262b35;
  border: 1px solid #3a4252;
  color: #d1d9e6;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-pct-opt:hover, .btn-pct-opt.active {
  background-color: #3c495e;
  border-color: #64b5f6;
  color: #ffffff;
}

.partial-custom-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.partial-custom-input-group label {
  color: var(--text-muted);
}

.input-deduction {
  width: 50px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  font-size: 11px;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: var(--font-code);
  text-align: center;
}

.pts-suffix {
  color: var(--text-muted);
}

.btn-apply-deduction {
  background-color: #1e3a5f;
  border: 1px solid #2f5a94;
  color: #90caf9;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
}

.btn-apply-deduction:hover {
  background-color: #264a78;
  color: #ffffff;
}

.partial-current-badge {
  font-family: var(--font-code);
  font-size: 10.5px;
  font-weight: 700;
  color: #ffd54f;
  background-color: rgba(255, 213, 79, 0.15);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(255, 213, 79, 0.3);
}

/* Footer Section */
.eval-footer-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.observations-box textarea {
  width: 100%;
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text-bright);
  font-size: 12px;
  font-family: var(--font-ui);
  outline: none;
  resize: vertical;
}

.actions-row {
  display: flex;
  gap: 10px;
}

.btn-primary, .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.btn-primary {
  flex: 2;
  background-color: var(--accent-blue);
  border: 1px solid var(--accent-blue-hover);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--accent-blue-hover);
}

.btn-secondary {
  flex: 1;
  background-color: #333333;
  border: 1px solid var(--border-color);
  color: var(--text-main);
}

.btn-secondary:hover {
  background-color: #444444;
  color: var(--text-bright);
}

/* ==========================================================================
   VISTA DEL ESTUDIANTE (Monitor 2 Layout)
   ========================================================================== */
.student-titlebar {
  background-color: #1e2638;
}

.student-main-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 62% 38%;
  overflow: hidden;
  background-color: var(--bg-editor);
}

.student-code-panel {
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--bg-editor);
}

.scroll-sync-hint {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
}

.student-question-panel {
  background-color: #17191d;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  overflow-y: auto;
}

.student-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background-color: #21252d;
  border: 1px solid #323846;
  border-radius: 8px;
  padding: 12px 14px;
}

.st-avatar {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0d47a1, #1976d2);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(13, 71, 161, 0.4);
}

.st-team {
  font-size: 10.5px;
  font-weight: 700;
  color: #64b5f6;
  text-transform: uppercase;
}

.st-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-bright);
}

/* Selector de Modalidad en el Estudiante */
.student-mode-selector {
  background-color: #1d212a;
  border: 1px solid #2e3544;
  border-radius: 8px;
  padding: 10px 12px;
}

/* Cronómetro del Estudiante (Sin gráficos, solo texto claro) */
.student-timer-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #181c25;
  border: 1px solid #2b3342;
  border-radius: 8px;
  padding: 9px 14px;
}

.st-timer-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.st-timer-icon {
  font-size: 16px;
}

.st-timer-label {
  font-size: 11.5px;
  color: var(--text-muted);
}

.st-timer-digits {
  font-family: var(--font-code);
  font-size: 19px;
  font-weight: 700;
  color: #64b5f6;
  letter-spacing: 1px;
}

.st-timer-digits.time-warning {
  color: #ffb74d;
}

.st-timer-digits.time-danger {
  color: #ff7043;
}

.st-timer-status-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* Tarjeta de Pregunta Activa para el Estudiante */
.student-active-question-card {
  background: linear-gradient(145deg, #1f242d 0%, #171a21 100%);
  border: 1.5px solid #2e3748;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.st-waiting-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 35px 10px;
  color: var(--text-muted);
  gap: 10px;
}

.waiting-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(100, 181, 246, 0.2);
  border-top-color: #64b5f6;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.st-question-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-q-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.st-q-number {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #90caf9;
  background-color: rgba(144, 202, 249, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
}

.st-q-points {
  font-family: var(--font-code);
  font-size: 12px;
  font-weight: 700;
  color: #ffb74d;
  background-color: rgba(255, 183, 77, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
}

.st-q-text {
  font-size: 15.5px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.5;
}

.st-q-lines-hint {
  font-size: 12px;
  color: var(--accent-yellow);
  background-color: rgba(220, 220, 170, 0.1);
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid var(--accent-yellow);
}

.st-instructions-box {
  background-color: rgba(115, 201, 145, 0.1);
  border: 1px solid rgba(115, 201, 145, 0.25);
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: #a5d6a7;
  line-height: 1.4;
}

/* Navegación entre preguntas enviadas al estudiante */
.student-questions-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.st-nav-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.st-nav-btn {
  background-color: #252a33;
  border: 1px solid #3c4452;
  color: var(--text-main);
  padding: 6px 12px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.st-nav-btn:hover, .st-nav-btn.active {
  background-color: #0d47a1;
  border-color: #1976d2;
  color: #ffffff;
}

/* ==========================================================================
   Modals & Statusbar
   ========================================================================== */
.statusbar {
  height: 24px;
  background-color: var(--accent-statusbar);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 11px;
  flex-shrink: 0;
  z-index: 90;
}

.student-statusbar {
  background-color: #1565c0;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.modal-window {
  background-color: #202227;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  width: 90vw;
  max-width: 1000px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title-group h3 {
  font-size: 16px;
  color: var(--text-bright);
}

.modal-subtitle {
  font-size: 12px;
  color: var(--text-muted);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}

.modal-close-btn:hover {
  color: var(--text-bright);
}

.modal-toolbar {
  padding: 10px 20px;
  background-color: #191a1e;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-group select {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-bright);
  padding: 5px 10px;
  border-radius: 4px;
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.gradebook-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.gradebook-table th {
  text-align: left;
  padding: 8px 10px;
  background-color: #18191c;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
}

.gradebook-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
}

.gradebook-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.03);
}

.temas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.tema-card {
  background-color: #272a30;
  border: 1px solid #3c4049;
  border-radius: 6px;
  padding: 12px;
}

.tema-code-badge {
  font-family: var(--font-code);
  font-weight: 700;
  font-size: 11px;
  color: #79b8ff;
  background-color: #1e3a5f;
  padding: 2px 6px;
  border-radius: 3px;
}

.tema-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
  margin: 6px 0 4px 0;
}

.tema-desc {
  font-size: 11px;
  color: #a0a6b2;
}

.toast-notification {
  position: fixed;
  bottom: 35px;
  right: 25px;
  background-color: #282c34;
  border: 1px solid var(--accent-blue);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  font-size: 13px;
  z-index: 2000;
}

/* ==========================================================================
   Botón Toggle de Tema (Claro / Oscuro)
   ========================================================================== */
.theme-toggle-btn {
  background-color: #262c36;
  border: 1px solid #3c4656;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle-btn:hover {
  background-color: #353f4e;
  border-color: #5c6a82;
}

/* ==========================================================================
   TEMA CLARO (VS Code Light+)
   ========================================================================== */
body.vscode-light {
  --bg-darker: #f3f3f3;
  --bg-editor: #ffffff;
  --bg-sidebar: #f8f8f8;
  --bg-activity: #f3f3f3;
  --bg-titlebar: #e8e8e8;
  --bg-tab-active: #ffffff;
  --bg-tab-inactive: #ececec;
  --bg-input: #ffffff;
  --bg-hover: #e8e8e8;
  --bg-active: #d6d6d6;
  --border-color: #d4d4d4;
  --border-subtle: #e5e5e5;
  
  --accent-blue: #0066b8;
  --accent-blue-hover: #007acc;
  --accent-statusbar: #0066b8;
  --accent-cyan: #098658;
  --accent-yellow: #795e26;
  --accent-purple: #af00db;
  --accent-orange: #a31515;
  --accent-green: #008000;
  --accent-number: #098658;
  
  --text-main: #333333;
  --text-bright: #111111;
  --text-muted: #666666;
  --text-danger: #e51400;
  --text-success: #166534;
  --text-warning: #b45309;

  background-color: var(--bg-darker);
  color: var(--text-main);
}

/* Barra superior en Modo Claro */
body.vscode-light .titlebar {
  background-color: #e8e8e8;
  border-bottom-color: #d4d4d4;
  color: #333333;
}

body.vscode-light .app-name {
  color: #111111;
}

body.vscode-light .titlebar-center {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #444444;
}

body.vscode-light .student-titlebar {
  background-color: #e3ebf6;
  border-bottom-color: #c5d7ed;
}

body.vscode-light .student-active-tag {
  color: #0066b8;
}

body.vscode-light .course-tag {
  border-left-color: #cccccc;
  color: #666666;
}

body.vscode-light .theme-toggle-btn {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

body.vscode-light .theme-toggle-btn:hover {
  background-color: #f0f0f0;
  border-color: #aaaaaa;
}

body.vscode-light .font-zoom-widget {
  background-color: #ffffff;
  border-color: #cccccc;
}

body.vscode-light .font-btn {
  background-color: #f3f3f3;
  border-color: #cccccc;
  color: #333333;
}

body.vscode-light .font-btn:hover {
  background-color: #e5e5e5;
  color: #111111;
}

body.vscode-light .font-size-label {
  color: #222222;
}

body.vscode-light .tb-btn {
  background-color: #ffffff;
  border-color: #cccccc;
  color: #333333;
}

body.vscode-light .tb-btn:hover {
  background-color: #f0f0f0;
  color: #111111;
}

body.vscode-light .tb-btn.btn-highlight {
  background-color: #0066b8;
  border-color: #005a9e;
  color: #ffffff;
}

body.vscode-light .tb-btn.btn-highlight:hover {
  background-color: #005a9e;
}

/* Activity Bar en Modo Claro */
body.vscode-light .activity-bar {
  background-color: #f3f3f3;
  border-right-color: #d4d4d4;
}

body.vscode-light .activity-icon {
  color: #475569;
}

body.vscode-light .activity-icon:hover {
  color: #0f172a;
  background-color: rgba(0, 0, 0, 0.06);
}

body.vscode-light .activity-icon.active {
  color: #0066b8;
  background-color: #ffffff;
}

body.vscode-light .activity-icon.active::before {
  background-color: #0066b8;
}

/* Sidebar en Modo Claro */
body.vscode-light .sidebar {
  background-color: #f8fafc;
  border-right-color: #d4d4d4;
}

body.vscode-light .sidebar-header {
  background-color: #f1f5f9;
  border-bottom-color: #e2e8f0;
}

body.vscode-light .sidebar-title {
  color: #334155;
  font-weight: 700;
  letter-spacing: 0.5px;
}

body.vscode-light .badge-total {
  background-color: #e2e8f0;
  color: #334155;
  border: 1px solid #cbd5e1;
  font-weight: 600;
}

body.vscode-light .sidebar-search {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

body.vscode-light .sidebar-search input {
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}

body.vscode-light .sidebar-search input::placeholder {
  color: #94a3b8;
}

body.vscode-light .sidebar-search input:focus {
  border-color: #0066b8;
  box-shadow: 0 0 0 2px rgba(0, 102, 184, 0.15);
  background-color: #ffffff;
}

body.vscode-light .team-header-row {
  background-color: #f8fafc;
  border-bottom-color: #e2e8f0;
}

body.vscode-light .team-header-row:hover {
  background-color: #f1f5f9;
}

body.vscode-light .team-label {
  color: #0f172a;
  font-weight: 600;
}

body.vscode-light .team-chevron {
  color: #64748b;
}

body.vscode-light .team-score-badge {
  background-color: #e0f2fe;
  color: #0284c7;
  border: 1px solid #bae6fd;
  font-weight: 600;
}

body.vscode-light .student-row {
  color: #334155;
  border-bottom-color: #f1f5f9;
}

body.vscode-light .student-row:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

body.vscode-light .student-row.selected,
body.vscode-light .student-row.active {
  background-color: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
  border-left: 3px solid #0284c7;
}

body.vscode-light .student-row.selected .student-name-text,
body.vscode-light .student-row.active .student-name-text {
  color: #0369a1;
  font-weight: 600;
}

/* Badges de Estado del Alumno en Modo Claro (Legibles y estilizados) */
body.vscode-light .student-status-badge.pendiente {
  background-color: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
  font-weight: 500;
}

body.vscode-light .student-status-badge.evaluado {
  background-color: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
  font-weight: 600;
}

body.vscode-light .student-row.selected .student-status-badge.pendiente,
body.vscode-light .student-row.active .student-status-badge.pendiente {
  background-color: #ffffff;
  color: #0369a1;
  border-color: #93c5fd;
}

body.vscode-light .student-row.selected .student-status-badge.evaluado,
body.vscode-light .student-row.active .student-status-badge.evaluado {
  background-color: #ffffff;
  color: #166534;
  border-color: #86efac;
}

/* Scrollbars en Modo Claro */
body.vscode-light ::-webkit-scrollbar-thumb {
  background-color: rgba(148, 163, 184, 0.45);
  border-radius: 4px;
}

body.vscode-light ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.7);
}

body.vscode-light ::-webkit-scrollbar-track {
  background: transparent;
}

/* Editor & Pestañas en Modo Claro */
body.vscode-light .code-viewport {
  background-color: #ffffff;
}

body.vscode-light .tabs-bar {
  background-color: #f3f3f3;
  border-bottom-color: #d4d4d4;
}

body.vscode-light .tab {
  background-color: #ececec;
  color: #555555;
  border-right-color: #d4d4d4;
}

body.vscode-light .tab.active {
  background-color: #ffffff;
  color: #111111;
}

body.vscode-light .tab.active::after {
  background-color: #0066b8;
}

body.vscode-light .tab-dirty {
  background-color: #e0e0e0;
  color: #666666;
}

body.vscode-light .file-breadcrumb {
  background-color: #ffffff;
  border-bottom-color: #e5e5e5;
  color: #666666;
}

body.vscode-light .code-container {
  background-color: #ffffff;
}

body.vscode-light .line-num {
  background-color: #ffffff;
  color: #237893;
  border-right-color: #e5e5e5;
}

body.vscode-light .line-num:hover {
  color: #000000;
}

body.vscode-light .line-code {
  color: #000000;
}

body.vscode-light .code-line:hover {
  background-color: rgba(0, 0, 0, 0.035);
}

body.vscode-light .code-line.active-local-line {
  background-color: rgba(0, 102, 184, 0.08) !important;
  box-shadow: inset 3px 0 0 0 #0066b8;
}

/* Pygments Syntax Highlighting (VS Code Light+ Oficial) */
body.vscode-light .k, body.vscode-light .kd, body.vscode-light .kn, body.vscode-light .kp, body.vscode-light .kr {
  color: #af00db !important;
  font-weight: 600;
}

body.vscode-light .nf, body.vscode-light .fm {
  color: #795e26 !important;
  font-weight: 600;
}

body.vscode-light .s, body.vscode-light .s1, body.vscode-light .s2, body.vscode-light .sa, body.vscode-light .sb, body.vscode-light .sc, body.vscode-light .sd, body.vscode-light .se, body.vscode-light .sh, body.vscode-light .si, body.vscode-light .sx, body.vscode-light .sr, body.vscode-light .ss {
  color: #a31515 !important;
}

body.vscode-light .c, body.vscode-light .c1, body.vscode-light .ch, body.vscode-light .cm, body.vscode-light .cp, body.vscode-light .cpf, body.vscode-light .cs {
  color: #008000 !important;
  font-style: italic;
}

body.vscode-light .m, body.vscode-light .mf, body.vscode-light .mh, body.vscode-light .mi, body.vscode-light .il, body.vscode-light .mo, body.vscode-light .mb {
  color: #098658 !important;
}

body.vscode-light .nc {
  color: #267f99 !important;
  font-weight: 600;
}

body.vscode-light .nb {
  color: #267f99 !important;
}

body.vscode-light .p, body.vscode-light .o, body.vscode-light .ow {
  color: #000000 !important;
}

body.vscode-light .n, body.vscode-light .na, body.vscode-light .nv, body.vscode-light .no, body.vscode-light .nd {
  color: #001080 !important;
}

/* Sombreado de código en Modo Claro */
body.vscode-light .code-line-highlight {
  background-color: rgba(254, 240, 138, 0.6) !important;
  box-shadow: inset 4px 0 0 0 #eab308;
}

body.vscode-light .code-line.remote-line-maestro {
  background-color: rgba(0, 102, 184, 0.12) !important;
  box-shadow: inset 3px 0 0 0 #0066b8;
}

body.vscode-light .code-line.remote-line-estudiante {
  background-color: rgba(16, 185, 129, 0.15) !important;
  box-shadow: inset 3px 0 0 0 #059669;
}

/* Panel Evaluador del Maestro en Modo Claro */
body.vscode-light .evaluator-panel {
  background-color: #f8fafc;
  border-left-color: #d4d4d4;
}

body.vscode-light .empty-eval-state {
  color: #64748b;
}

body.vscode-light .instructions-card {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body.vscode-light .student-hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body.vscode-light .student-name {
  color: #0f172a;
}

body.vscode-light .score-card {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

body.vscode-light .score-card.final {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

body.vscode-light .sc-value {
  color: #0f172a;
}

body.vscode-light .mode-btn {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

body.vscode-light .mode-btn:hover {
  background-color: #f1f5f9;
}

body.vscode-light .mode-btn.active {
  background-color: #eff6ff;
  border-color: #0066b8;
  box-shadow: 0 0 8px rgba(0, 102, 184, 0.18);
}

body.vscode-light .mode-btn:disabled,
body.vscode-light .mode-btn.locked {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

body.vscode-light .mode-btn:disabled:hover,
body.vscode-light .mode-btn.locked:hover {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
}

body.vscode-light .mode-btn.active.locked,
body.vscode-light .mode-btn.active:disabled {
  opacity: 1;
  cursor: default;
  background-color: #eff6ff;
  border-color: #0066b8;
}

body.vscode-light .mode-title {
  color: #0f172a;
}

body.vscode-light .mode-badge {
  background-color: #e2e8f0;
  color: #0369a1;
}

/* Cronómetro Maestro en Modo Claro */
body.vscode-light .timer-control-panel {
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

body.vscode-light .timer-digits {
  color: #0f172a;
}

body.vscode-light .timer-select,
body.vscode-light .timer-input-custom {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.vscode-light .timer-btn {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
}

body.vscode-light .timer-btn:hover {
  background-color: #f1f5f9;
}

body.vscode-light .btn-timer-toggle {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #0284c7;
}

body.vscode-light .btn-timer-toggle.running {
  background-color: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}

body.vscode-light .timer-status-badge.badge-ready {
  background-color: #e2e8f0;
  color: #475569;
}

body.vscode-light .timer-status-badge.badge-running {
  background-color: #dcfce7;
  color: #15803d;
}

body.vscode-light .timer-status-badge.badge-paused {
  background-color: #fef3c7;
  color: #b45309;
}

body.vscode-light .timer-status-badge.badge-timeout {
  background-color: #fee2e2;
  color: #b91c1c;
}

body.vscode-light .timer-timeout-banner {
  background-color: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

/* Preguntas en Modo Claro */
body.vscode-light .question-card {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

body.vscode-light .question-card.active-focus {
  border-color: #0066b8;
  box-shadow: 0 0 10px rgba(0, 102, 184, 0.2);
}

body.vscode-light .question-card.correcta {
  background-color: #f0fdf4;
  border-color: #86efac;
}

body.vscode-light .question-card.parcial {
  background-color: #fefce8;
  border-color: #fde047;
}

body.vscode-light .question-card.incorrecta {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

body.vscode-light .q-text {
  color: #0f172a;
}

body.vscode-light .q-category-tag {
  background-color: #f1f5f9;
  color: #475569;
}

body.vscode-light .q-category-tag.sospechosa {
  background-color: #ffedd5;
  color: #c2410c;
  border-color: #fed7aa;
}

body.vscode-light .q-btn-viewcode {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #795e26;
}

body.vscode-light .q-btn-viewcode:hover {
  background-color: #fefce8;
  border-color: #eab308;
}

body.vscode-light .q-expected-details {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

body.vscode-light .q-expected-text {
  color: #334155;
  border-left-color: #0066b8;
}

body.vscode-light .toggle-help-checkbox {
  background-color: #fef9c3;
  border-color: #fde047;
  color: #854d0e;
}

body.vscode-light .btn-grade-correct {
  background-color: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

body.vscode-light .btn-grade-correct:hover, body.vscode-light .btn-grade-correct.selected {
  background-color: #16a34a;
  border-color: #15803d;
  color: #ffffff;
}

body.vscode-light .btn-grade-partial {
  background-color: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

body.vscode-light .btn-grade-partial:hover, body.vscode-light .btn-grade-partial.selected {
  background-color: #d97706;
  border-color: #b45309;
  color: #ffffff;
}

body.vscode-light .btn-grade-incorrect {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

body.vscode-light .btn-grade-incorrect:hover, body.vscode-light .btn-grade-incorrect.selected {
  background-color: #dc2626;
  border-color: #b91c1c;
  color: #ffffff;
}

body.vscode-light .btn-grade-tune {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #475569;
}

body.vscode-light .btn-grade-tune:hover, body.vscode-light .btn-grade-tune.active {
  background-color: #e2e8f0;
  border-color: #b45309;
  color: #b45309;
}

body.vscode-light .q-partial-panel {
  background-color: #f8fafc;
  border-color: #cbd5e1;
}

body.vscode-light .btn-pct-opt {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

body.vscode-light .btn-pct-opt:hover, body.vscode-light .btn-pct-opt.active {
  background-color: #eff6ff;
  border-color: #93c5fd;
  color: #0369a1;
}

body.vscode-light .input-deduction {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.vscode-light .btn-apply-deduction {
  background-color: #0066b8;
  border-color: #005a9e;
  color: #ffffff;
}

body.vscode-light .observations-box textarea {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.vscode-light .btn-secondary {
  background-color: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
}

body.vscode-light .btn-secondary:hover {
  background-color: #e2e8f0;
  color: #0f172a;
}

/* Monitor de Estudiante en Modo Claro */
body.vscode-light .student-main-layout {
  background-color: #ffffff;
}

body.vscode-light .student-code-panel {
  background-color: #ffffff;
  border-right-color: #d4d4d4;
}

body.vscode-light .student-question-panel {
  background-color: #f8fafc;
}

body.vscode-light .student-card-header {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

body.vscode-light .st-name {
  color: #0f172a;
}

body.vscode-light .student-mode-selector {
  background-color: #ffffff;
  border-color: #cbd5e1;
}

body.vscode-light .student-timer-strip {
  background-color: #eff6ff;
  border-color: #bfdbfe;
}

body.vscode-light .st-timer-digits {
  color: #0284c7;
}

body.vscode-light .student-active-question-card {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.vscode-light .st-q-text {
  color: #0f172a;
}

body.vscode-light .st-q-lines-hint {
  background-color: #fef9c3;
  color: #854d0e;
  border-left-color: #eab308;
}

body.vscode-light .st-instructions-box {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}

body.vscode-light .st-nav-btn {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

body.vscode-light .st-nav-btn.active {
  background-color: #eff6ff;
  border-color: #0066b8;
  color: #0066b8;
}

/* Modales y Acta en Modo Claro */
body.vscode-light .modal-window {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
}

body.vscode-light .modal-header {
  border-bottom-color: #e2e8f0;
}

body.vscode-light .modal-title-group h3 {
  color: #0f172a;
}

body.vscode-light .modal-toolbar {
  background-color: #f8fafc;
  border-bottom-color: #e2e8f0;
}

body.vscode-light .filter-group select {
  background-color: #ffffff;
  border-color: #cbd5e1;
  color: #0f172a;
}

body.vscode-light .gradebook-table th {
  background-color: #f1f5f9;
  color: #475569;
  border-bottom-color: #cbd5e1;
}

body.vscode-light .gradebook-table td {
  border-bottom-color: #e2e8f0;
  color: #1e293b;
}

body.vscode-light .gradebook-table tr:hover td {
  background-color: rgba(0, 0, 0, 0.025);
}

body.vscode-light .tema-card {
  background-color: #f8fafc;
  border-color: #e2e8f0;
}

body.vscode-light .tema-title {
  color: #0f172a;
}

body.vscode-light .tema-desc {
  color: #475569;
}

body.vscode-light .toast-notification {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #0066b8;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Estilos de Calificación Manual Directa
   ========================================================================== */
.btn-manual-grade {
  transition: all 0.2s ease;
  font-weight: 500;
}

.btn-manual-grade:hover {
  background: rgba(86, 156, 214, 0.25) !important;
  border-color: #4fc1ff !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.btn-edit-manual-score {
  border-radius: 3px;
  transition: background-color 0.15s ease;
}

.btn-edit-manual-score:hover {
  background-color: rgba(86, 156, 214, 0.2) !important;
  color: #79b8ff !important;
}

.quick-score-btn {
  background: var(--bg-tertiary, #2d2d2d);
  color: var(--text-primary, #cccccc);
  border: 1px solid var(--border-color, #3e3e42);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}

.quick-score-btn:hover {
  background: #569cd6;
  color: #ffffff;
  border-color: #569cd6;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(86, 156, 214, 0.3);
}

.quick-score-btn.active {
  background: #007acc;
  color: #ffffff;
  border-color: #007acc;
  box-shadow: 0 0 0 2px rgba(86, 156, 214, 0.4);
}

.quick-score-btn.text-danger:hover {
  background: #f48771;
  border-color: #f48771;
  color: #ffffff;
}

body.vscode-light .quick-score-btn {
  background: #f1f5f9;
  color: #1e293b;
  border-color: #cbd5e1;
}

body.vscode-light .quick-score-btn:hover {
  background: #0066b8;
  color: #ffffff;
  border-color: #0066b8;
}

/* ==========================================================================
   CANVAS LMS DOCVIEWER & DOCUMENT RENDERING (PDF, DOCX, IMÁGENES)
   ========================================================================== */
.code-content-wrapper:has(.docviewer-root) {
  padding: 0 !important;
  display: block !important;
  height: 100% !important;
  width: 100% !important;
}

.code-container:has(.docviewer-root) {
  overflow: hidden !important;
}

.docviewer-root {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: calc(100vh - 200px);
  width: 100%;
  background: var(--bg-primary, #1e1e1e);
  color: var(--text-primary, #e0e0e0);
  box-sizing: border-box;
}

.docviewer-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--bg-secondary, #252526);
  border-bottom: 1px solid var(--border-color, #333333);
  flex-wrap: wrap;
  gap: 12px;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.docviewer-meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}

.docviewer-type-icon {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
}

.docviewer-filename {
  font-weight: 600;
  color: var(--text-primary, #ffffff);
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 13px;
  max-width: 450px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docviewer-pill {
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.pdf-pill {
  background: rgba(248, 81, 73, 0.15);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.35);
}

.word-pill {
  background: rgba(88, 166, 255, 0.15);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.35);
}

.image-pill {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.35);
}

.docviewer-filesize {
  font-size: 11px;
  color: var(--text-secondary, #8b949e);
  font-family: var(--font-mono, monospace);
}

.docviewer-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.docviewer-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--border-color, #3a3d41);
  background: var(--bg-primary, #1e1e1e);
  color: var(--text-primary, #c9d1d9);
  user-select: none;
}

.docviewer-action-btn:hover {
  background: var(--bg-hover, #2d3139);
  border-color: #58a6ff;
  color: #58a6ff;
  transform: translateY(-1px);
}

.docviewer-action-btn.btn-primary {
  background: #238636;
  color: #ffffff;
  border-color: rgba(240, 246, 252, 0.1);
}

.docviewer-action-btn.btn-primary:hover {
  background: #2ea043;
  color: #ffffff;
  border-color: rgba(240, 246, 252, 0.2);
  box-shadow: 0 2px 6px rgba(46, 160, 67, 0.3);
}

/* PDF Viewer Frame */
.docviewer-frame-wrapper {
  flex: 1;
  width: 100%;
  height: calc(100vh - 215px);
  min-height: 500px;
  position: relative;
  background: #525659;
  display: flex;
}

.docviewer-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  flex: 1;
}

/* Word / DOCX Canvas LMS Paper Sheet */
.docviewer-paper-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px 20px;
  background: #1e2022;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.docviewer-paper-sheet {
  background: #ffffff;
  color: #24292f;
  max-width: 820px;
  width: 100%;
  min-height: 900px;
  padding: 50px 60px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  transition: max-width 0.25s ease, padding 0.25s ease;
  box-sizing: border-box;
}

.docviewer-paper-sheet.wide-sheet {
  max-width: 96%;
  padding: 40px 48px;
}

.docviewer-paper-sheet h1,
.docviewer-paper-sheet h2,
.docviewer-paper-sheet h3,
.docviewer-paper-sheet h4,
.docviewer-paper-sheet h5,
.docviewer-paper-sheet h6 {
  color: #1f2328;
  font-weight: 600;
  margin-top: 26px;
  margin-bottom: 12px;
  line-height: 1.3;
  border-bottom: 1px solid #d0d7de;
  padding-bottom: 6px;
}

.docviewer-paper-sheet h1 { font-size: 1.85rem; }
.docviewer-paper-sheet h2 { font-size: 1.45rem; }
.docviewer-paper-sheet h3 { font-size: 1.2rem; }
.docviewer-paper-sheet h4 { font-size: 1.05rem; }

.docviewer-paper-sheet p {
  margin-top: 0;
  margin-bottom: 14px;
  color: #24292f;
}

.docviewer-paper-sheet ul,
.docviewer-paper-sheet ol {
  padding-left: 28px;
  margin-bottom: 14px;
}

.docviewer-paper-sheet li {
  margin-bottom: 5px;
}

.docviewer-paper-sheet table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
  border: 1px solid #d0d7de;
}

.docviewer-paper-sheet th,
.docviewer-paper-sheet td {
  border: 1px solid #d0d7de;
  padding: 8px 12px;
  text-align: left;
}

.docviewer-paper-sheet th {
  background-color: #f6f8fa;
  font-weight: 600;
  color: #1f2328;
}

.docviewer-paper-sheet tr:nth-child(even) {
  background-color: #fcfcfc;
}

.docviewer-paper-sheet img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.docviewer-paper-sheet blockquote {
  margin: 16px 0;
  padding: 8px 16px;
  color: #57606a;
  border-left: 4px solid #0969da;
  background: #f6f8fa;
  border-radius: 0 4px 4px 0;
}

.docviewer-paper-sheet code {
  background: #eff1f3;
  color: #24292f;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 0.9em;
}

.docviewer-paper-sheet pre {
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 14px;
  overflow-x: auto;
  font-family: var(--font-mono, 'Consolas', monospace);
  font-size: 13px;
  margin: 16px 0;
}

/* Image Viewer Mode */
.docviewer-image-wrapper {
  flex: 1;
  overflow: auto;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414;
}

.docviewer-image-content {
  max-width: 95%;
  max-height: calc(100vh - 250px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  border: 1px solid #333333;
}

/* Light Theme Adjustments */
body.vscode-light .docviewer-header-bar {
  background: #f3f3f3;
  border-color: #e5e5e5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.vscode-light .docviewer-filename {
  color: #1f2328;
}

body.vscode-light .docviewer-action-btn {
  background: #ffffff;
  border-color: #d0d7de;
  color: #24292f;
}

body.vscode-light .docviewer-action-btn:hover {
  background: #f6f8fa;
  border-color: #0969da;
  color: #0969da;
}

body.vscode-light .docviewer-paper-scroll {
  background: #eaedf0;
}

body.vscode-light .docviewer-image-wrapper {
  background: #e5e5e5;
}