/* ==========================================================
   AulaDigital Panamá — Design System CSS
   ========================================================== */
/* Las tipografías se cargan desde /css/fonts.css (local, generado por
   scripts/vendor-fonts.sh). El aula no tiene salida a Internet. */

:root {
  /* Paleta */
  --bg:          #0D1117;
  --surface:     #161B22;
  --surface2:    #1C2128;
  --border:      #30363D;
  --border-soft: #21262D;
  --primary:     #4F46E5;
  --primary-h:   #4338CA;
  --primary-glow: rgba(79,70,229,.3);
  --green:       #10B981;
  --yellow:      #F59E0B;
  --red:         #EF4444;
  --cyan:        #06B6D4;
  --pink:        #EC4899;
  --text:        #E6EDF3;
  --text-muted:  #8B949E;
  --text-dim:    #484F58;

  /* Layout */
  --sidebar-w: 220px;
  --header-h:  58px;
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;

  /* Font */
  --f-body:    'Outfit', sans-serif;
  --f-head:    'Fredoka', sans-serif;
  --f-mono:    'Fira Code', monospace;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}
button { font-family: var(--f-body); cursor: pointer; }
a { color: var(--primary); text-decoration: none; }
input, textarea, select {
  font-family: var(--f-body);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  padding: 9px 13px;
  width: 100%;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* ── Header ────────────────────────────────────────────── */
.app-header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand-flag { font-size: 28px; filter: drop-shadow(0 0 12px rgba(79,70,229,.5)); }
.brand-title { font-family: var(--f-head); font-size: 18px; color: var(--text); }
.brand-sub { font-size: 12px; color: var(--text-muted); margin-left: 4px; }

.top-nav {
  flex: 1;
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-tab:hover { background: var(--surface2); color: var(--text); }
.nav-tab.active { background: var(--primary); color: white; border-color: transparent; }
.nav-tab .badge {
  background: var(--red);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
  font-weight: 700;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.online-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.dot-green {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; }
  50% { opacity: .4; }
}
.user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px 5px 10px;
  font-size: 13px;
  font-weight: 600;
}
.xp-badge {
  background: linear-gradient(135deg, var(--yellow), #F97316);
  color: #0D1117;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
}
.btn-icon {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  padding: 6px 10px;
  font-size: 16px;
  transition: all .15s;
}
.btn-icon:hover { border-color: var(--red); color: var(--red); }

/* En pantalla estrecha la cabecera desbordaba y hacía que TODA la app se
   pudiera desplazar en horizontal: marca y bloque de usuario tenían
   flex-shrink: 0 y juntos medían más que el viewport. Ahora pueden encogerse,
   el nombre se recorta con puntos suspensivos y se retira lo prescindible
   (el subtítulo y el contador de gente en línea). El XP y el avatar siguen en
   el DOM: setXP() los busca por id. */
.app-header > * { min-width: 0; }
.brand, .header-right { flex-shrink: 1; }
#user-name-hdr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@media (max-width: 620px) {
  .app-header { padding: 0 10px; gap: 8px; }
  .brand { gap: 6px; }
  .brand-flag { font-size: 22px; }
  .brand-title { font-size: 15px; }
  .brand-sub { display: none; }
  .online-indicator { display: none; }
  .header-right { gap: 6px; }
  .user-pill { gap: 5px; padding: 4px 9px 4px 7px; font-size: 12px; }
  #user-name-hdr { max-width: 84px; }
  .xp-badge { font-size: 9px; padding: 2px 6px; }
  .btn-icon { padding: 5px 8px; font-size: 14px; }
}

/* Solo en lo más estrecho (SE y similares) se retira también el nombre de la
   app: a 375 px todavía sobran ~127 px, no hace falta esconderlo antes. */
@media (max-width: 340px) {
  .brand-title { display: none; }
  #user-name-hdr { max-width: 56px; }
}

/* ── Layout ────────────────────────────────────────────── */
.app-layout {
  display: flex;
  margin-top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-group-title {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  padding: 8px 10px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2.5px;
}

.section-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  padding: 8px 10px 4px;
}

.side-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  transition: all .16s ease;
  cursor: pointer;
}
.side-btn:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  transform: translateX(3px);
}
.side-btn:hover .icon {
  transform: scale(1.15);
}
.side-btn.active {
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.22) 0%, rgba(99, 102, 241, 0.06) 100%);
  border-left: 3.5px solid #818CF8;
  color: #A5B4FC;
  font-weight: 700;
  box-shadow: inset 0 0 16px rgba(99, 102, 241, 0.12);
}
.side-btn .icon {
  font-size: 18px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.side-btn .unread {
  margin-left: auto;
  background: var(--red);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  padding: 1px 6px;
}

/* Users online list */
.user-online-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  font-weight: 500;
  transition: background .15s;
  cursor: pointer;
}
.user-online-item:hover { background: var(--surface2); }
.user-online-item .uavatar { font-size: 18px; }
.user-online-item .ustatus {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  margin-left: auto;
  flex-shrink: 0;
}
.user-online-item.offline .ustatus { background: var(--text-dim); }

.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  /* Un elemento flex tiene min-width: auto, así que el ancho mínimo de su
     contenido lo empujaba más allá del viewport y toda la app se desplazaba
     en horizontal. Con min-width: 0 el contenido se reajusta dentro. */
  min-width: 0;
  padding: 24px;
  min-height: calc(100vh - var(--header-h));
}

/* ── Screens ────────────────────────────────────────────── */
.screen { display: none; animation: fadeUp .25s ease; }
.screen.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 20px;
}
.card-title {
  font-family: var(--f-head);
  font-size: 19px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Selector de Avatares Míticos de Panamá ─────────────── */
.avatar-pick-card {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  cursor: pointer;
  transition: all .16s ease;
  user-select: none;
}
.avatar-pick-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.avatar-pick-card.active {
  background: linear-gradient(145deg, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0.08) 100%);
  border-color: #F59E0B;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
  transform: scale(1.04);
}
.avatar-card-icon {
  font-size: 26px;
  line-height: 1;
  transition: transform .15s ease;
}
.avatar-pick-card:hover .avatar-card-icon {
  transform: scale(1.2);
}
.avatar-card-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.avatar-pick-card.active .avatar-card-name {
  color: #FDE047;
  font-weight: 800;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  border: none;
  transition: all .15s;
  cursor: pointer;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-h); transform: translateY(-1px); box-shadow: 0 4px 15px var(--primary-glow); }
.btn-secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: rgba(239,68,68,.15); color: var(--red); border: 1px solid rgba(239,68,68,.3); }
.btn-danger:hover { background: var(--red); color: white; }
.btn-green { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
.btn-green:hover { background: var(--green); color: #0D1117; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-lg { padding: 13px 28px; font-size: 15px; font-weight: 700; border-radius: var(--r); }

/* ── Home Dashboard ─────────────────────────────────────── */
.welcome-hero {
  background: linear-gradient(135deg, #1a1060 0%, #312E81 50%, #1e3a5f 100%);
  border: 1px solid rgba(79,70,229,.35);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.welcome-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(79,70,229,.25), transparent 70%);
  border-radius: 50%;
}
.welcome-hero h2 { font-family: var(--f-head); font-size: 28px; margin-bottom: 6px; }
.welcome-hero p { color: #93C5FD; font-size: 14px; max-width: 500px; }

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px;
  cursor: pointer;
  transition: all .2s cubic-bezier(.34,1.56,.64,1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mod-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(79,70,229,.15);
}
.mod-icon { font-size: 36px; }
.mod-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
}
.mod-title { font-family: var(--f-head); font-size: 16px; }
.mod-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── SimuMail ────────────────────────────────────────────── */
.mail-layout { display: grid; grid-template-columns: 218px 1fr; gap: 0; height: calc(100vh - 140px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.mail-sidebar { border-right: 1px solid var(--border); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.mail-main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

/* Dirección propia: se resaltan las tres partes usuario / @ / dominio */
.my-addr { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 10px; margin-bottom: 12px; }
.my-addr-val { font-family: var(--f-mono); font-size: 11.5px; margin-top: 2px; word-break: break-all; }
.my-addr-val .ad-user { color: var(--cyan); }
.my-addr-val .ad-at   { color: var(--yellow); font-weight: 700; }
.my-addr-val .ad-dom  { color: var(--text-muted); }

.mail-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.mail-folder-title { font-family: var(--f-head); font-size: 17px; }
.mail-toolbar input[type="search"] { width: 220px; max-width: 40vw; font-size: 13px; padding: 7px 12px; }

.mail-list { flex: 1 1 40%; overflow-y: auto; min-height: 90px; }
.mail-item {
  padding: 13px 18px;
  border-bottom: 1px solid var(--border-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background .12s;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: start;
}
.mail-item:hover { background: var(--surface2); }
.mail-item:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mail-item.unread { border-left-color: var(--primary); background: rgba(79,70,229,.04); }
.mail-item.unread .mail-sender { font-weight: 700; color: var(--text); }
.mail-item-main { min-width: 0; }
.mail-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mail-sender { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.mail-subject { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-preview { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.mail-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; background: rgba(6,182,212,.15); color: var(--cyan); border-radius: 5px; padding: 1px 5px; }
.mail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 180px; color: var(--text-muted); text-align: center; padding: 20px; }
.spin { font-size: 30px; animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Visor */
.mail-view { flex: 1 1 60%; overflow-y: auto; padding: 22px 24px; border-top: 1px solid var(--border); background: var(--bg); }
.mv-head { display: flex; align-items: flex-start; gap: 12px; }
.mv-subject { font-family: var(--f-head); font-size: 20px; flex: 1; word-break: break-word; }
.mv-star.on { border-color: var(--yellow); }
.mv-meta { font-size: 12.5px; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; margin: 12px 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.mv-label { display: inline-block; min-width: 46px; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .6px; color: var(--text-dim); }
.mv-addr { font-family: var(--f-mono); font-size: 11.5px; color: var(--cyan); }
.mv-body { white-space: pre-wrap; line-height: 1.75; font-size: 14.5px; word-break: break-word; }
.mv-attach {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-sm); text-decoration: none; color: var(--text); font-size: 13px;
}
.mv-attach:hover { border-color: var(--primary); }
.mv-attach.static { cursor: default; }
.mv-attach-ico { font-size: 20px; }
.mv-attach small { display: block; color: var(--text-muted); font-size: 11px; }
.mv-attach-dl { margin-left: auto; color: var(--primary); font-weight: 600; font-size: 12px; }
.mv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ── Redactar + asistente de netiqueta ───────────────────── */
.modal-back {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,.72); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .16s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.compose-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  width: 900px; max-width: 100%; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.compose-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.compose-body { display: grid; grid-template-columns: 1fr 262px; gap: 0; overflow: hidden; flex: 1; }
.compose-form { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--border); }

.c-row { display: grid; grid-template-columns: 66px 1fr; gap: 12px; align-items: start; }
.c-row > label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-dim); padding-top: 9px; }
.c-from { font-size: 13.5px; padding-top: 7px; }
.c-hint { font-size: 11.5px; color: var(--text-muted); line-height: 1.45; }
.c-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text-muted); font-size: 9px; cursor: help;
}
.c-note { font-size: 12px; background: rgba(6,182,212,.08); border: 1px solid rgba(6,182,212,.25); color: var(--cyan); border-radius: var(--r-sm); padding: 8px 12px; }
.c-file-info { font-size: 12px; margin-top: 6px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cc-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 20px; padding: 3px 6px 3px 10px;
}
.cc-chip button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; padding: 0 3px; }
.cc-chip button:hover { color: var(--red); }
#c-body { font-family: var(--f-body); font-size: 14px; line-height: 1.65; resize: vertical; min-height: 190px; }

.coach { border-left: 1px solid var(--border); background: var(--bg); padding: 16px; overflow-y: auto; }
.coach-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.coach-ring {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface2);
  transition: background .25s;
}
.coach-ring > span {
  width: 42px; height: 42px; border-radius: 50%; background: var(--surface);
  display: grid; place-items: center; font-family: var(--f-head); font-size: 16px;
}
.coach-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.coach-list li { display: flex; gap: 8px; font-size: 12.5px; align-items: flex-start; }
.coach-list li .ck { flex-shrink: 0; }
.coach-list li.ok { color: var(--text-muted); }
.coach-list li.ok strong { color: var(--green); }
.coach-list li.warn strong { color: var(--yellow); }

/* Resultado del envío */
.result-card { width: 420px; max-width: 100%; text-align: center; }
.result-score { font-family: var(--f-head); font-size: 40px; line-height: 1; margin-bottom: 14px; }
.result-score small { display: block; font-size: 12px; color: var(--text-muted); font-family: var(--f-body); }
.result-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin-bottom: 14px; }
.result-list li.no { color: var(--text-muted); }
.result-xp { font-family: var(--f-head); color: var(--green); font-size: 15px; }
.result-badges { margin-top: 8px; font-size: 13px; color: var(--yellow); }

/* ── Detective del Correo ────────────────────────────────── */
.quiz-intro, .quiz-result { padding: 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.quiz-intro h3, .quiz-result h3 { font-family: var(--f-head); font-size: 22px; }
.quiz-intro p { font-size: 13.5px; color: var(--text-muted); max-width: 560px; line-height: 1.6; }
.flag-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; text-align: left; width: 100%; max-width: 720px; margin: 6px 0; }
.flag-legend-item { display: flex; gap: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; }

.quiz-wrap { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.quiz-progress { height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; }
.quiz-progress > div { height: 100%; background: var(--primary); transition: width .3s; }
.quiz-mail { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; }
.qm-head { border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 12px; font-size: 13px; }
.qm-subject { font-family: var(--f-head); font-size: 17px; }
.quiz-flags { display: flex; flex-direction: column; gap: 8px; }
.flag-row { display: flex; flex-wrap: wrap; gap: 7px; }
.flag-btn {
  font-size: 12px; padding: 6px 11px; border-radius: 20px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  transition: all .15s;
}
.flag-btn:hover { color: var(--text); border-color: var(--primary); }
.flag-btn.on { background: rgba(245,158,11,.18); border-color: var(--yellow); color: var(--yellow); }
.quiz-actions { display: flex; gap: 12px; justify-content: center; margin-top: 4px; }
.quiz-actions .btn { min-width: 170px; justify-content: center; }

.quiz-review { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; max-width: 720px; margin-top: 8px; }
.qr-item { border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--r-sm); padding: 11px 14px; background: var(--surface2); }
.qr-item.ok { border-left-color: var(--green); }
.qr-item.no { border-left-color: var(--red); }
.qr-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; flex-wrap: wrap; }
.qr-verdict { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.qr-flags { margin-top: 7px; font-size: 11px; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qr-flags span { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1px 8px; }
.qr-flags span.hit { border-color: var(--green); color: var(--green); }

/* ── Challenges / Leaderboard ─────────────────────────────── */
.challenge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.challenge-card .ch-icon { font-size: 32px; flex-shrink: 0; }
.challenge-card .ch-info { flex: 1; }
.challenge-card .ch-title { font-family: var(--f-head); font-size: 16px; }
.challenge-card .ch-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.challenge-card .ch-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-waiting { background: rgba(245,158,11,.15); color: var(--yellow); }
.status-active  { background: rgba(16,185,129,.15); color: var(--green); animation: glowPulse 2s infinite; }
.status-finished{ background: rgba(139,92,246,.15); color: #A78BFA; }
@keyframes glowPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(16,185,129,.4); } 50%{ box-shadow: 0 0 0 6px rgba(16,185,129,0); } }

.leaderboard { list-style: none; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  margin-bottom: 6px;
  background: var(--surface2);
  border: 1px solid var(--border-soft);
  transition: all .15s;
}
.lb-row.top-1 { border-color: var(--yellow); background: rgba(245,158,11,.08); }
.lb-row.top-2 { border-color: #9CA3AF; }
.lb-row.top-3 { border-color: #CD7C2F; }
.lb-rank { font-family: var(--f-head); font-size: 18px; width: 28px; text-align: center; }
.lb-avatar { font-size: 24px; }
.lb-name { flex: 1; font-weight: 600; font-size: 14px; }
.lb-score { font-family: var(--f-mono); font-size: 15px; color: var(--green); font-weight: 600; }

/* ── MecaSprint ──────────────────────────────────────────── */
.meca-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.meca-head h2 { font-size: 22px; }
.meca-head-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 700;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  white-space: nowrap;
}
.pill-live { background: rgba(16,185,129,.15); color: var(--green); border-color: transparent; }
@keyframes xpBump { 0%{ transform: scale(1); } 40%{ transform: scale(1.28); } 100%{ transform: scale(1); } }
.xp-bump { animation: xpBump .45s ease; }

.meca-bar { display: flex; gap: 14px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-row-modes { margin-left: auto; }
.chip {
  padding: 6px 13px; border-radius: 20px; font-size: 12.5px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--border-soft);
  color: var(--text-muted); transition: all .15s; white-space: nowrap;
}
.chip:hover { border-color: var(--primary); color: var(--text); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-mode.on { background: var(--green); border-color: var(--green); color: #0D1117; }
.meca-hint {
  font-size: 13px; color: var(--text-muted); margin-bottom: 16px;
  padding-left: 2px; min-height: 19px;
}

.typing-stats { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stat-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px 16px; text-align: center; flex: 1; min-width: 88px;
}
.stat-val { font-family: var(--f-head); font-size: 30px; color: var(--primary); line-height: 1.1; }
.stat-lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

/* Texto a escribir: ventana de 3 líneas que se desplaza sola */
.typing-display {
  --tsize: 23px;
  --tlh: 40px;
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  font-family: var(--f-mono);
  font-size: var(--tsize);
  line-height: var(--tlh);
  letter-spacing: 1px;
  cursor: text;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.typing-display.big { --tsize: 30px; --tlh: 52px; letter-spacing: 3px; }
.typing-display.focused { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
/* Recorta exactamente 3 líneas: sin este contenedor el overflow se corta en el
   borde del padding y asoma media cuarta línea. */
.t-clip { height: calc(var(--tlh) * 3); overflow: hidden; }
.t-flow { transition: transform .18s ease; will-change: transform; }
.tw { display: inline-block; white-space: pre; }
.tc { color: var(--text-dim); border-radius: 3px; transition: color .1s; }
.tc.ok   { color: var(--green); }
.tc.ok.soft { color: var(--yellow); }        /* correcto pero sin tilde */
.tc.bad  { color: var(--red); background: rgba(239,68,68,.16); text-decoration: underline wavy var(--red); }
.t-caret {
  position: absolute; left: 26px; top: 22px; width: 2px;
  background: var(--primary); border-radius: 2px;
  transition: transform .07s linear;
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink { 0%,55% { opacity: 1; } 56%,100% { opacity: .15; } }
.t-focus-note {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,17,23,.7); backdrop-filter: blur(2px);
  font-family: var(--f-body); font-size: 14px; color: var(--text-muted);
  transition: opacity .2s; border-radius: var(--r-lg);
}
.typing-display.focused .t-focus-note { opacity: 0; pointer-events: none; }
.t-progress { height: 4px; background: var(--surface2); border-radius: 4px; overflow: hidden; margin: 8px 0 18px; }
.t-progress > span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .15s; }
.t-catch { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.shake { animation: shake .3s ease !important; }

/* ── Guía: manos + teclado ───────────────────────────────── */
.meca-guide { display: flex; gap: 18px; align-items: center; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.hands { display: flex; gap: 6px; flex-shrink: 0; }
.hand { width: 82px; height: auto; }
.hand .palm, .hand .fg {
  fill: #1E2533; stroke: #2C3446; stroke-width: 2; transition: fill .12s, filter .12s;
}
.hand .fg.on { stroke: none; }
.hand .fg[data-f$="pinky"].on  { fill: var(--pink);    filter: drop-shadow(0 0 6px var(--pink)); }
.hand .fg[data-f$="ring"].on   { fill: var(--yellow);  filter: drop-shadow(0 0 6px var(--yellow)); }
.hand .fg[data-f$="middle"].on { fill: var(--green);   filter: drop-shadow(0 0 6px var(--green)); }
.hand .fg[data-f$="index"].on  { fill: var(--cyan);    filter: drop-shadow(0 0 6px var(--cyan)); }
.hand .fg[data-f$="thumb"].on  { fill: var(--primary); filter: drop-shadow(0 0 6px var(--primary)); }
.hand-lbl { fill: var(--text-dim); font-size: 15px; font-family: var(--f-body); text-anchor: middle; }

.vkbd {
  background: #0A0E16;
  border-radius: var(--r-lg);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 460px;
  max-width: 660px;
  border: 1px solid var(--border);
}
.vkbd-row { display: flex; gap: 5px; }
.vkey {
  position: relative;
  flex: var(--w, 1) 1 0;
  min-width: 0;
  height: 40px;
  padding: 0 2px;
  background: #1E2533;
  border: none;
  border-top: 2px solid transparent;
  border-bottom: 3px solid #060910;
  border-radius: 6px;
  color: var(--text);
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .08s, transform .08s, box-shadow .08s;
  user-select: none;
}
.vk-main { line-height: 1; }
.vk-sub { font-size: 9px; color: var(--text-dim); line-height: 1; margin-bottom: 1px; }
.vkey-mod { font-size: 10px; color: var(--text-muted); }
.vkey-home::after {
  content: ''; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 2px; border-radius: 2px; background: var(--text-dim);
}
.vkey.pressed { background: var(--primary-h); transform: translateY(2px); border-bottom-width: 1px; box-shadow: 0 0 10px var(--primary-glow); }
.vkey.target { background: var(--yellow); color: #0D1117; border-bottom-color: #B45309; animation: keyPulse .55s infinite alternate; z-index: 1; }
.vkey.target .vk-sub { color: #7C4A05; }
.vkey.target-mod { background: rgba(245,158,11,.28); color: var(--yellow); border-bottom-color: #B45309; }
@keyframes keyPulse { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Banda de color del dedo que corresponde a cada tecla */
.f-pinky  { border-top-color: var(--pink); }
.f-ring   { border-top-color: var(--yellow); }
.f-middle { border-top-color: var(--green); }
.f-index  { border-top-color: var(--cyan); }
.f-thumb  { border-top-color: var(--primary); }

.finger-legend {
  display: flex; justify-content: center; gap: 18px;
  font-size: 12px; color: var(--text-muted); flex-wrap: wrap;
}
.finger-legend span { display: flex; align-items: center; gap: 5px; }
.fl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ── Resultados ──────────────────────────────────────────── */
.meca-results { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,9,16,.72); backdrop-filter: blur(4px); }
.meca-results.hidden { display: none; }
.res-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 26px 30px; max-width: 480px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  animation: resPop .28s cubic-bezier(.2,1.3,.5,1);
  max-height: 92vh; overflow-y: auto;
}
@keyframes resPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.res-emoji { font-size: 46px; line-height: 1; }
.res-card h3 { font-size: 21px; margin: 6px 0 18px; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.res-grid > div { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 6px; }
.res-grid b { display: block; font-family: var(--f-head); font-size: 24px; color: var(--text); }
.res-grid span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.res-xp b { color: var(--green); }
.res-note { font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; text-align: left; }
.res-worst { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; }
.res-worst i { font-style: normal; color: var(--red); font-size: 11px; margin-right: 4px; }
kbd {
  display: inline-block; min-width: 22px; padding: 2px 6px; background: var(--surface2);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px;
  font-family: var(--f-mono); font-size: 12px; color: var(--text);
}
.res-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Con un grupo grande (15+ alumnos) esta lista podía crecer sin límite y
   empujar el resto de la pantalla; se limita su alto y se hace scrolleable. */
.live-lb-card .leaderboard { max-height: 260px; overflow-y: auto; }

.lb-bar { flex: 1; background: var(--surface); border-radius: 20px; height: 8px; overflow: hidden; margin: 0 10px; }
.lb-bar > div { height: 100%; background: var(--green); border-radius: 20px; transition: width .3s; }
.lb-row.lb-me { border-color: var(--primary); background: rgba(79,70,229,.1); }

/* Las laptops y netbooks de los laboratorios suelen ser anchas pero bajas
   (1366×768, 1024×600): con el layout completo el teclado guía —la parte
   que un estudiante necesita ver mientras escribe— quedaba fuera de la
   pantalla y solo se veía haciendo scroll. Reusamos el modo compacto
   también por altura, no solo por ancho.

   Las manos se encogen, pero NO se ocultan. Antes desaparecían con
   max-height:800px, que caza a casi cualquier laptop del laboratorio: el
   niño se quedaba sin saber qué dedo usar, que es justo lo que viene a
   aprender aquí. Además no ahorraba nada de alto: en pantalla ancha las
   manos van al lado del teclado, y el teclado es más alto que ellas. */
@media (max-width: 860px), (max-height: 800px) {
  .meca-guide { gap: 12px; }
  .typing-display { --tsize: 19px; --tlh: 34px; padding: 16px 18px; }
  .typing-display.big { --tsize: 24px; --tlh: 42px; }
  .t-caret { left: 18px; top: 16px; }
  .vkey { height: 34px; font-size: 11px; }
  .vk-sub { display: none; }
  .res-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) { .hand { width: 66px; } }
@media (max-width: 560px)  { .hand { width: 52px; } .hands { gap: 4px; } }

/* ── Mouse Maestro ───────────────────────────────────────── */
.mouse-canvas-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  cursor: crosshair;
}
#mouse-canvas { display: block; width: 100%; height: 100%; }

.mouse-pop {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--f-head);
  font-weight: 700;
  font-size: 15px;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
  animation: mousePop .7s ease-out forwards;
  z-index: 5;
}
.mouse-pop.perfect { color: var(--green); font-size: 18px; }
.mouse-pop.good    { color: var(--yellow); }
.mouse-pop.ok      { color: #F59E0B; }
.mouse-pop.miss    { color: var(--red); font-size: 20px; }
@keyframes mousePop {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.8); }
  30%  { transform: translate(-50%, -50%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}

/* ── Audio Studio ────────────────────────────────────────── */
.audio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.waveform-canvas { background: #0A0E16; border-radius: var(--r); border: 1px solid var(--border); display: block; width: 100%; height: 80px; }
.btn-record-big {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--red);
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(239,68,68,.4);
  transition: transform .15s;
  display: flex; align-items: center; justify-content: center;
}
.btn-record-big.recording { animation: recordPulse 1s infinite alternate; }
@keyframes recordPulse { from { transform: scale(1); box-shadow: 0 0 0 0 rgba(239,68,68,.5); } to { transform: scale(1.08); box-shadow: 0 0 0 14px rgba(239,68,68,0); } }

/* ── Call Overlay ────────────────────────────────────────── */
.call-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 600px;
  max-width: 95vw;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
.call-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  font-size: 32px;
}
.call-partner-name { font-family: var(--f-head); font-size: 18px; }
.call-status { font-size: 12px; color: var(--text-muted); }
.call-videos {
  background: #000;
  position: relative;
  aspect-ratio: 16/9;
}
#video-remote { width: 100%; height: 100%; object-fit: cover; }
/* Llamada solo de voz: avatar en vez de un rectángulo negro */
.call-remote-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; background: var(--surface2);
}
.call-remote-ph span { font-size: 72px; }
.call-remote-ph small { font-size: 12px; color: var(--text-muted); }
.video-local-pip {
  position: absolute;
  bottom: 12px; right: 12px;
  width: 140px;
  border-radius: var(--r-sm);
  border: 2px solid var(--border);
  object-fit: cover;
}
.call-controls {
  padding: 14px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.btn-call-ctrl {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  font-size: 22px;
  transition: all .15s;
}
.btn-call-ctrl:hover { transform: scale(1.1); }
.btn-call-ctrl.off { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.4); }
.btn-call-ctrl:disabled { opacity: .4; cursor: not-allowed; }
.btn-call-ctrl:disabled:hover { transform: none; }
.end-btn { background: var(--red); border-color: var(--red); }
.end-btn:hover { background: #B91C1C; }

/* ── Incoming call ───────────────────────────────────────── */
.incoming-call {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 600;
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
  animation: slideIn .3s cubic-bezier(.34,1.56,.64,1);
  min-width: 320px;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } }
.ic-avatar { font-size: 36px; }
.ic-info { flex: 1; }
.ic-name { font-weight: 700; font-size: 15px; }
.ic-sub  { font-size: 12px; color: var(--text-muted); }
.btn-accept { background: var(--green); color: #0D1117; border: none; border-radius: var(--r-sm); padding: 8px 14px; font-weight: 700; font-size: 13px; }
.btn-reject { background: var(--red); color: white; border: none; border-radius: var(--r-sm); padding: 8px 14px; font-weight: 700; font-size: 13px; }

/* ── Floating Call Bar (Persistente en Segundo Plano) ───── */
.floating-call-bar {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 480;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(79, 70, 229, 0.2);
  animation: floatIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 95vw;
}
@keyframes floatIn {
  from { transform: translateY(30px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.fcb-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  white-space: nowrap;
}
.fcb-dot {
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  animation: fcbPulse 1.6s infinite;
}
@keyframes fcbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}

.fcb-speaking {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 110px;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fcb-speaking.is-speaking {
  color: var(--green);
  font-weight: 700;
}
.fcb-speaking.is-speaking #fcb-speaking-avatar {
  animation: bounceSpeaker 0.6s infinite alternate;
}
@keyframes bounceSpeaker {
  from { transform: scale(1); }
  to   { transform: scale(1.25); }
}

.fcb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-fcb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-fcb:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.08);
}
.btn-fcb.fcb-muted {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #F87171;
}
.btn-fcb.fcb-hand-up {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.6);
  animation: handWave 1.4s infinite;
}
.btn-fcb.fcb-end {
  background: rgba(239, 68, 68, 0.85);
  border-color: transparent;
}
.btn-fcb.fcb-end:hover {
  background: #DC2626;
}

/* ── AulaCall (pantalla) ─────────────────────────────────── */
.btn-yellow { background: rgba(245,158,11,.18); color: var(--yellow); border: 1px solid rgba(245,158,11,.4); }
.btn-yellow:hover { background: var(--yellow); color: #0D1117; }

.room-card { background: linear-gradient(135deg, rgba(79,70,229,.10), transparent); margin-bottom: 20px; }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.room-sub { font-size: 13px; color: var(--text-muted); margin: 6px 0 14px; min-height: 19px; }
.room-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Medidor de voz propio */
.mic-meter { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.mic-meter-ico { font-size: 18px; }
.mic-bar {
  flex: 1; height: 10px; max-width: 320px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
}
.mic-bar > i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--green), #34D399);
  transition: width .07s linear;
}
.mic-bar > i.hot { background: linear-gradient(90deg, var(--yellow), var(--red)); }
.mic-meter-label { font-size: 12px; color: var(--text-muted); }

/* Malla de participantes */
.room-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px; margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.ptile {
  text-align: center; padding: 14px 8px;
  background: var(--surface2); border: 2px solid transparent;
  border-radius: var(--r); transition: border-color .15s, box-shadow .15s;
}
.ptile.is-me { border-color: rgba(79,70,229,.5); }
/* El anillo verde indica quién está hablando ahora mismo */
.ptile.speaking { border-color: var(--green); box-shadow: 0 0 0 4px rgba(16,185,129,.18); }
.ptile-av { font-size: 38px; line-height: 1.1; position: relative; display: inline-block; }
.ptile-hand, .ptile-mute {
  position: absolute; bottom: -2px; right: -12px; font-size: 17px;
}
.ptile-hand { animation: handWave 1.4s ease-in-out infinite; }
@keyframes handWave { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.ptile-name {
  margin-top: 6px; font-weight: 600; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ptile-status { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }

/* Lista de llamada directa */
.call-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.call-user {
  display: flex; align-items: center; gap: 14px; padding: 13px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
}
.cu-av { font-size: 30px; }
.cu-info { flex: 1; min-width: 0; }
.cu-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-status { color: var(--green); font-size: 11px; font-weight: 700; }
.btn-call {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: 1px solid rgba(16,185,129,.35);
  background: rgba(16,185,129,.15); color: var(--green); font-size: 16px;
  transition: all .15s;
}
.btn-call:hover { background: var(--green); transform: scale(1.08); }
.empty-inline { grid-column: 1/-1; padding: 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Normas */
.rules-list { list-style: none; display: grid; gap: 12px; }
.rules-list li { display: flex; gap: 12px; align-items: flex-start; }
.rule-ico { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.rules-list b { display: block; font-size: 13.5px; font-weight: 600; }
.rules-list small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.rules-kinder { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.rule-k {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 12px; text-align: center;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r);
}
.rule-k span { font-size: 40px; }
.rule-k b { font-family: var(--f-head); font-size: 14px; }

/* ── Toast ────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  z-index: 700;
  box-shadow: 0 10px 25px rgba(0,0,0,.3);
  animation: toastIn .3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ── Admin panel ─────────────────────────────────────────── */
.user-table { width: 100%; border-collapse: collapse; }
.user-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--text-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); }
.user-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); font-size: 13px; }
.user-table tr:hover td { background: var(--surface2); }

/* ── Utilities ────────────────────────────────────────────── */
.hidden { display: none !important; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 12px; }
.font-head { font-family: var(--f-head); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .main-content { margin-left: 0; padding: 16px; }
  .audio-grid { grid-template-columns: 1fr; }
  .call-box { width: 100%; border-radius: 0; }

  /* SimuMail en pantalla estrecha: la barra lateral pasa a ser una fila
     desplazable arriba. Antes se ocultaba y el módulo quedaba sin
     "Redactar" ni carpetas, es decir, inservible en tablet. */
  .mail-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 120px); }
  .mail-sidebar {
    flex-direction: row; align-items: center; gap: 8px;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 10px 12px; overflow-x: auto; overflow-y: hidden;
  }
  .mail-sidebar .btn { width: auto !important; margin: 0 !important; flex-shrink: 0; }
  .mail-sidebar .side-btn { width: auto; flex-shrink: 0; white-space: nowrap; }
  .mail-sidebar .section-label, .mail-sidebar .my-addr { display: none; }

  .mail-toolbar { flex-wrap: wrap; padding: 10px 14px; }
  .mail-toolbar input[type="search"] { width: 100%; max-width: none; }
  .compose-body { grid-template-columns: 1fr; }
  .coach { border-left: none; border-top: 1px solid var(--border); }
  .c-row { grid-template-columns: 1fr; gap: 4px; }
  .c-row > label { padding-top: 0; }
  .quiz-actions { flex-direction: column; }
  .quiz-actions .btn { width: 100%; }
}

/* ── PixelPad (Kinder–3°) ──────────────────────────────────────────────────
   Objetivos táctiles grandes a propósito: el público son niños de 5 a 9 años
   que todavía están afinando el control del mouse. */
.pp-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.pp-head h2 { font-size: 22px; }
.pp-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; }

.pp-tools { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-tool {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 74px; padding: 10px 8px;
  background: var(--surface2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: transform .12s, border-color .12s, background .12s;
}
.pp-tool:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--primary); }
.pp-tool.active { border-color: var(--primary); background: var(--primary-glow); }
.pp-tool:disabled { opacity: .35; cursor: not-allowed; }
.pp-tool-ico { font-size: 24px; line-height: 1; }
.pp-tool-lbl { font-size: 12px; font-weight: 600; }

.pp-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.pp-row-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.pp-sizes, .pp-modes { display: flex; align-items: center; gap: 8px; }
.pp-size {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--surface2); border: 2px solid var(--border);
  border-radius: 50%; cursor: pointer;
}
.pp-size.active { border-color: var(--primary); background: var(--primary-glow); }
.pp-dot { background: var(--text); border-radius: 50%; display: block; }
.pp-mode {
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  background: var(--surface2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--r-sm); cursor: pointer;
}
.pp-mode.active { border-color: var(--primary); background: var(--primary-glow); }

.pp-palette { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pp-color {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--border); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .12s, border-color .12s;
}
.pp-color:hover { transform: scale(1.12); }
.pp-color.active { border-color: #FFF; transform: scale(1.16); }
.pp-color-name { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }

.pp-hint {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-size: 14px;
  background: var(--surface2); border-left: 4px solid var(--yellow);
  border-radius: var(--r-sm);
}
.pp-hint-x {
  margin-left: auto; background: none; border: none;
  color: var(--text-muted); cursor: pointer; font-size: 14px;
}

.pp-stage {
  position: relative; width: 100%;
  height: clamp(280px, 52vh, 480px);
  background: #FFF; border-radius: var(--r); overflow: hidden;
  box-shadow: inset 0 0 12px rgba(0,0,0,.18);
}
#pp-canvas { display: block; cursor: crosshair; touch-action: none; }
.pp-grid { position: absolute; inset: 0; pointer-events: none; }

.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pp-spacer { flex: 1 1 auto; }

.pp-save {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 14px; background: var(--surface2); border-radius: var(--r-sm);
}
.pp-save label { font-size: 14px; font-weight: 600; }
.pp-save input {
  flex: 1 1 200px; padding: 10px 12px; font-size: 15px; font-family: var(--f-body);
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--r-sm);
}
.pp-save input:focus { outline: none; border-color: var(--primary); }

.pp-activities { margin-top: 16px; }
.pp-activities h3 { font-size: 17px; margin-bottom: 4px; }
.pp-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.pp-act-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.pp-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; text-align: center;
  background: var(--surface2); color: var(--text);
  border: 2px solid var(--border); border-radius: var(--r);
  cursor: pointer; transition: transform .12s, border-color .12s;
}
.pp-act:hover { transform: translateY(-3px); border-color: var(--primary); }
.pp-act.active { border-color: var(--yellow); background: rgba(245,158,11,.12); }
.pp-act-ico { font-size: 28px; line-height: 1; }
.pp-act-lbl { font-size: 12px; font-weight: 600; }

.pp-gallery-card { margin-top: 16px; }
.pp-gallery-card h3 { font-size: 17px; margin-bottom: 12px; }
.pp-gal-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.pp-gal {
  position: relative; margin: 0;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.pp-gal img { display: block; width: 100%; height: 120px; object-fit: contain; background: #FFF; }
.pp-gal figcaption { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.pp-gal figcaption b { font-size: 13px; }
.pp-gal figcaption small { font-size: 11px; color: var(--text-muted); }
.pp-gal-del {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(13,17,23,.78); color: #FFF;
  border: none; cursor: pointer; font-size: 13px; opacity: 0; transition: opacity .15s;
}
.pp-gal:hover .pp-gal-del, .pp-gal-del:focus { opacity: 1; }
.pp-gal-note { grid-column: 1 / -1; margin: 0; }

@media (max-width: 640px) {
  .pp-tool { min-width: 62px; padding: 8px 6px; }
  .pp-tool-ico { font-size: 20px; }
  .pp-color { width: 36px; height: 36px; }
  .pp-row { gap: 14px; }
  .pp-actions .btn { flex: 1 1 auto; }
}

/* ── CodeBot / RoboLab ───────────────────────────────────── */
.codebot-layout {
  display: grid;
  grid-template-columns: minmax(300px, 1.2fr) minmax(320px, 1fr);
  gap: 20px;
}
@media (max-width: 768px) {
  .codebot-layout { grid-template-columns: 1fr; }
}

/* Bloques de instrucciones: piezas con canto inferior, para que se vean
   pulsables y no como texto plano. El color codifica la categoría y es el
   mismo que la barra lateral de cada paso en la tira de código. */
.cb-block {
  --c1: #64748B; --c2: #475569; --c3: #29323F;
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px;
  border: none; border-radius: 11px;
  font-family: var(--f-body); font-size: 13px; font-weight: 700;
  color: #fff; letter-spacing: .2px; cursor: pointer;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%);
  box-shadow:
    0 4px 0 var(--c3),
    0 9px 18px -8px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.30);
  transition: transform .09s, box-shadow .09s, filter .15s;
}
.cb-block::after {
  content: ''; position: absolute; inset: 1px 1px 46% 1px;
  border-radius: 10px 10px 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  pointer-events: none;
}
.cb-block:hover { filter: brightness(1.09); }
.cb-block:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--c3), inset 0 2px 6px rgba(0,0,0,.45);
}
.cb-block:disabled { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.cb-block:disabled:active { transform: none; }
.cb-block[data-kind="move"] { --c1:#60A5FA; --c2:#2563EB; --c3:#1A3A80; }
.cb-block[data-kind="turn"] { --c1:#A78BFA; --c2:#7C3AED; --c3:#4C1D95; }
.cb-block[data-kind="loop"] { --c1:#FBBF24; --c2:#D97706; --c3:#7C2D12; color:#301A05; }
.cb-block[data-kind="go"]   { --c1:#34D399; --c2:#059669; --c3:#065F46; }
.cb-block[data-kind="stop"] { --c1:#94A3B8; --c2:#64748B; --c3:#3A4453; }
.cb-block.cb-big { font-size: 15px; padding: 13px 21px; border-radius: 13px; }

/* Selector de niveles */
.cb-lvl {
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--f-body); font-size: 12px; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
  background: linear-gradient(180deg, #1E2634, #161C27);
  border: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: all .15s;
}
.cb-lvl:hover { color: var(--text); border-color: #4B5563; transform: translateY(-1px); }
.cb-lvl.done { color: #FCD34D; border-color: rgba(251,191,36,.35); }
.cb-lvl.on, .cb-lvl.done.on {
  color: #fff; border-color: #818CF8;
  background: linear-gradient(180deg, #6366F1, #4338CA);
  box-shadow: 0 2px 0 #312E81, 0 7px 18px -7px var(--primary-glow);
}
.cb-lvl-big { padding: 9px 16px; font-size: 14px; }

/* Marco del tablero: hundido, con brillo de canto y sombra proyectada */
.cb-board-wrap {
  position: relative;
  width: 100%; max-width: 520px;
  display: flex; justify-content: center;
  padding: 14px; border-radius: 20px;
  background: linear-gradient(160deg, #232F45 0%, #131A28 46%, #090E18 100%);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow:
    0 26px 50px -24px rgba(0,0,0,.95),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -20px 32px -22px rgba(0,0,0,.9);
}
.cb-board-wrap::before {
  content: ''; position: absolute; inset: 8px; border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.10);
  pointer-events: none;
}
.cb-board-wrap canvas { display: block; border-radius: 12px; }

@keyframes cb-shake {
  10%,90% { transform: translateX(-2px); }
  20%,80% { transform: translateX(4px); }
  30%,50%,70% { transform: translateX(-8px); }
  40%,60% { transform: translateX(8px); }
}
.cb-shake { animation: cb-shake .42s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes cb-win {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.5),  0 26px 50px -24px rgba(0,0,0,.95); }
  100% { box-shadow: 0 0 0 30px rgba(16,185,129,0), 0 26px 50px -24px rgba(0,0,0,.95); }
}
.cb-win { animation: cb-win 1.1s ease-out; }

/* Estado de ejecución */
.cb-status {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 7px 17px; border-radius: 999px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
  background: linear-gradient(180deg, #1B2331, #141A25);
  border: 1px solid var(--border);
  box-shadow: 0 2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  text-align: center;
}
.cb-status .cb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .55; flex: none;
}
.cb-status.run  { color:#C7D2FE; border-color:#4F46E5; box-shadow:0 2px 0 #312E81, 0 0 22px -6px var(--primary-glow); }
.cb-status.run .cb-dot { animation: cb-pulse 1s infinite; }
.cb-status.ok   { color:#6EE7B7; border-color:rgba(16,185,129,.5); }
.cb-status.err  { color:#FCA5A5; border-color:rgba(239,68,68,.5); }
.cb-status.warn { color:#FCD34D; border-color:rgba(245,158,11,.5); }
@keyframes cb-pulse { 0%,100% { transform:scale(1); opacity:.5 } 50% { transform:scale(1.6); opacity:1 } }

/* Tira de código */
.cb-tape {
  min-height: 168px; max-height: 232px; overflow-y: auto;
  border-radius: 12px; padding: 9px;
  display: flex; flex-direction: column; gap: 6px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.2)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 27px);
  border: 1px solid var(--border);
  box-shadow: inset 0 7px 16px -9px rgba(0,0,0,.95);
}
.cb-step {
  --c: #64748B;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px 7px 15px;
  border-radius: 9px; font-size: 12.5px; font-weight: 600;
  background: linear-gradient(180deg, #202937, #161C27);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .12s, box-shadow .12s;
}
.cb-step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--c), rgba(0,0,0,.4));
}
.cb-step-n {
  min-width: 20px; text-align: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--text-dim);
}
.cb-step-txt { flex: 1; }
.cb-step.on {
  color: #fff; border-color: #A5B4FC; transform: translateX(3px);
  background: linear-gradient(180deg, #6366F1, #4338CA);
  box-shadow: 0 2px 0 #312E81, 0 0 20px -3px var(--primary-glow);
}
.cb-step.on .cb-step-n { color: rgba(255,255,255,.8); }
.cb-tape-empty {
  margin-block: auto; align-self: stretch;
  text-align: center; padding: 20px 14px;
  color: var(--text-dim); font-size: 12.5px; line-height: 1.7;
  border: 1.5px dashed rgba(148,163,184,.2); border-radius: 10px;
}
.cb-tape-empty b { display: block; font-size: 22px; margin-bottom: 4px; opacity: .55; }

/* ── FileMaster OS ───────────────────────────────────────── */
.btn-side-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-side-nav:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.btn-side-nav.active {
  background: rgba(79, 70, 229, 0.18);
  border-color: rgba(79, 70, 229, 0.4);
  color: #fff;
}

.file-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateY(-2px);
}
.file-item.selected {
  background: rgba(79, 70, 229, 0.25) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary-glow);
}

/* ==========================================================
   Chat rápido flotante
   Vive fuera de .screen: acompaña al alumno por todos los
   módulos para que pueda escribir sin perder dónde estaba.
   ========================================================== */
.chat-bubble {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 470;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-h) 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 1px var(--primary-glow);
  transition: transform .16s cubic-bezier(.34, 1.5, .64, 1), box-shadow .2s ease;
}
.chat-bubble:hover { transform: translateY(-3px) scale(1.06); }
.chat-bubble:active { transform: translateY(1px) scale(.98); }
.chat-bubble:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }
.chat-bubble-ico { font-size: 26px; line-height: 1; }

/* Si hay llamada en curso, la barra ocupa la esquina: el chat sube. */
body:has(.floating-call-bar:not(.hidden)) .chat-bubble { bottom: 92px; }
body:has(.floating-call-bar:not(.hidden)) .chat-dock { bottom: 92px; }

.chat-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red, #EF4444);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
}

.chat-dock {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 471;
  width: 330px;
  max-width: calc(100vw - 28px);
  height: 460px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .6);
  animation: floatIn .25s cubic-bezier(.16, 1, .3, 1);
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-title {
  flex: 1;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-back, .chat-close {
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 2px 7px;
  border-radius: 8px;
}
.chat-back:hover, .chat-close:hover { background: var(--border-soft); color: var(--text); }

/* ── Lista de contactos ─────────────────────────────────────────────────── */
.chat-list { flex: 1; overflow-y: auto; }

.chat-person {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  text-align: left;
  color: var(--text);
}
.chat-person:hover { background: var(--surface2); }
.chat-person-av { font-size: 24px; position: relative; flex-shrink: 0; }
.chat-person-on {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green, #22C55E);
  border: 2px solid var(--surface);
}
.chat-person-main { flex: 1; min-width: 0; }
.chat-person-name { font-weight: 700; font-size: 13px; }
.chat-person-last {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-person-n {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--red, #EF4444);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ── Conversación ───────────────────────────────────────────────────────── */
.chat-thread { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.chat-msg {
  max-width: 82%;
  padding: 7px 11px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-msg.mine {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.theirs {
  align-self: flex-start;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg-time { display: block; font-size: 10px; opacity: .65; margin-top: 3px; }

.chat-composer {
  display: flex;
  gap: 7px;
  padding: 9px;
  border-top: 1px solid var(--border);
  background: var(--surface2);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}
.chat-input:focus { outline: none; border-color: var(--primary); }
.chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-send:hover { background: var(--primary-h); }
.chat-send:disabled { opacity: .45; cursor: default; }

.chat-warn {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  color: #FFD8D8;
  background: rgba(239, 68, 68, .22);
  border-top: 1px solid rgba(239, 68, 68, .45);
}

@media (max-width: 560px) {
  .chat-dock { width: calc(100vw - 20px); right: 10px; bottom: 10px; height: min(70vh, 440px); }
  .chat-bubble { right: 14px; bottom: 14px; width: 50px; height: 50px; }
  .chat-bubble-ico { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-dock { animation: none; }
  .chat-bubble { transition: none; }
  .chat-bubble:hover { transform: none; }
}

/* Fila de la vista de moderación: quién le escribió a quién */
.chat-mod { background: rgba(79, 70, 229, .10); }
.chat-mod-row { max-width: 100%; align-self: stretch; }
.chat-mod-who {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  margin-bottom: 3px;
}

/* ==========================================================
   Compartir pantalla del docente
   Todo vive fuera de .screen para acompañar al alumno por
   los módulos. Capas: píldora 469 · visor 460 · aviso 590
   (debajo de .incoming-call 600: una llamada es más urgente).
   ========================================================== */

/* ── Aviso de que el profe empezó a compartir ───────────────────────────── */
.screen-invite {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  z-index: 590;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  border-radius: 22px;
  background: linear-gradient(160deg, #1E1B4B 0%, #0F172A 100%);
  border: 3px solid var(--primary);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6), 0 0 0 1px var(--primary-glow);
  max-width: min(560px, calc(100vw - 24px));
  animation: floatIn .3s cubic-bezier(.16, 1, .3, 1);
}
.screen-invite-av { font-size: 40px; flex-shrink: 0; }
.screen-invite-txt {
  flex: 1;
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  line-height: 1.25;
}
.screen-invite-btns { display: flex; gap: 10px; flex-shrink: 0; }
.screen-invite-yes, .screen-invite-no {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  border-radius: 16px;
  cursor: pointer;
  border: 3px solid;
  transition: transform .14s cubic-bezier(.34, 1.5, .64, 1);
}
/* Botones grandes: hay niños de Kinder usando esto. */
.screen-invite-yes {
  font-size: 19px;
  padding: 12px 26px;
  color: #06240F;
  background: linear-gradient(180deg, #86EFAC 0%, #22C55E 100%);
  border-color: #14532D;
  box-shadow: 0 5px 0 #15803D;
}
.screen-invite-no {
  font-size: 15px;
  padding: 10px 18px;
  color: var(--text-muted);
  background: transparent;
  border-color: var(--border);
}
.screen-invite-yes:hover, .screen-invite-no:hover { transform: translateY(-2px); }
.screen-invite-yes:active { transform: translateY(3px); box-shadow: 0 2px 0 #15803D; }

/* ── Píldora persistente ────────────────────────────────────────────────── */
.screen-pill {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 469;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2);
  background: linear-gradient(160deg, var(--primary) 0%, var(--primary-h) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  animation: screenPulse 2.6s ease-in-out infinite;
}
.screen-pill.is-host {
  background: linear-gradient(160deg, #DC2626 0%, #991B1B 100%);
}
.screen-pill:hover { transform: translateY(-2px); }
@keyframes screenPulse {
  0%, 100% { box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
  50%      { box-shadow: 0 10px 26px rgba(0, 0, 0, .5), 0 0 24px var(--primary-glow); }
}

/* ── Visor ──────────────────────────────────────────────────────────────── */
.screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 460;
  background: #000;
  display: flex;
  flex-direction: column;
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.screen-live {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 12px;
  color: #FCA5A5;
  letter-spacing: .06em;
}
.screen-host {
  flex: 1;
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Con la palabra "Cerrar", no solo una ✕: un niño pequeño no la reconoce. */
.screen-close {
  font-family: var(--f-head, sans-serif);
  font-weight: 900;
  font-size: 15px;
  color: #fff;
  background: #DC2626;
  border: 0;
  border-radius: 14px;
  padding: 9px 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.screen-close:hover { background: #B91C1C; }

.screen-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen-canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.screen-ph, .screen-warn {
  position: absolute;
  font-family: var(--f-head, sans-serif);
  font-weight: 800;
  color: var(--text-muted);
  font-size: 17px;
  text-align: center;
  padding: 0 20px;
}
.screen-warn {
  bottom: 24px;
  font-size: 15px;
  color: #FDE68A;
  background: rgba(120, 53, 15, .9);
  border: 2px solid #F59E0B;
  border-radius: 14px;
  padding: 8px 18px;
}

/* La esquina inferior derecha ya tiene inquilinos: si aparece la píldora de
   pantalla, el chat y la barra de llamada suben para no solaparse. */
body:has(.screen-pill:not(.hidden)) .chat-bubble,
body:has(.screen-pill:not(.hidden)) .chat-dock { bottom: 150px; }
body:has(.floating-call-bar:not(.hidden)) .screen-pill { bottom: 158px; }

@media (max-width: 560px) {
  .screen-invite { flex-direction: column; gap: 10px; text-align: center; padding: 14px 18px; bottom: 14px; }
  .screen-invite-txt { font-size: 15px; }
  .screen-invite-yes { font-size: 17px; padding: 11px 22px; }
  .screen-pill { right: 14px; bottom: 76px; font-size: 12px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .screen-invite, .screen-pill { animation: none !important; }
  .screen-invite-yes:hover, .screen-invite-no:hover, .screen-pill:hover { transform: none; }
}

/* Tarjeta de compartir pantalla dentro de AulaCall */
.sc-card.hidden { display: none; }
.sc-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.sc-txt { flex: 1; min-width: 160px; font-size: 14px; color: var(--text); }
.sc-live {
  font-family: var(--f-head, sans-serif);
  font-weight: 900; font-size: 12px; color: #FCA5A5;
  background: rgba(220, 38, 38, .18); border: 1px solid #7F1D1D;
  border-radius: 999px; padding: 4px 12px; flex-shrink: 0;
}
.sc-warn {
  font-size: 13px; line-height: 1.45; color: #FDE68A;
  background: rgba(120, 53, 15, .35); border: 1px solid #B45309;
  border-radius: 12px; padding: 10px 14px; margin: 8px 0 0;
}
.sc-note { font-size: 12px; color: var(--text-muted); margin: 8px 0 0; }
.sc-q { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.sc-stats { margin-top: 8px; font-size: 13px; color: var(--text-muted); }
.sc-missing {
  margin-top: 6px; font-size: 12px; color: #FCD34D;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Recursos ────────────────────────────────────────────── */
.rec-cargando { padding: 40px; text-align: center; color: var(--text-muted); font-size: 14px; }

.rec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.rec-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: 20px; text-align: left; cursor: pointer;
  font-family: var(--f-body); color: var(--text);
  background: linear-gradient(165deg, #1C2333, var(--surface));
  border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rec-card:hover {
  transform: translateY(-3px); border-color: var(--primary);
  box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 14px 26px -14px var(--primary-glow);
}
.rec-ico {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; font-size: 27px;
  background: linear-gradient(160deg, rgba(79,70,229,.28), rgba(79,70,229,.10));
  border: 1px solid rgba(129,140,248,.28);
}
.rec-titulo { font-family: var(--f-head); font-size: 16px; font-weight: 600; line-height: 1.3; }
.rec-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.rec-pie { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.rec-badge {
  padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700;
  color: #A5B4FC; background: rgba(79,70,229,.16); border: 1px solid rgba(129,140,248,.28);
}
.rec-meta { font-size: 11px; color: var(--text-dim); font-family: var(--f-mono); }

.rec-vacio { text-align: center; padding: 46px 24px; }
.rec-vacio-ico { font-size: 44px; margin-bottom: 10px; opacity: .75; }
.rec-vacio code {
  font-family: var(--f-mono); font-size: 12px; padding: 2px 6px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 5px;
}

/* Visor: el material es de tema claro, así que va enmarcado y no a sangre */
.rec-visor {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px;
}
.rec-visor:fullscreen { border-radius: 0; padding: 12px; background: var(--bg); }
.rec-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-barra-tit {
  font-family: var(--f-head); font-size: 16px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw;
}
.rec-marco {
  width: 100%; height: calc(100vh - 260px); min-height: 420px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: #fff; display: block;
}
.rec-visor:fullscreen .rec-marco { height: calc(100vh - 70px); }

@media (max-width: 640px) {
  .rec-barra-tit { max-width: 100%; }
  .rec-marco { height: calc(100vh - 300px); }
}

/* Emitir a la escuela equivocada no da error en ninguna capa: el docente ve
   todo normal y los alumnos no reciben nada. El aviso tiene que cantar. */
.sc-mismatch {
  margin-top: 10px; padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.55; color: #FCD34D;
  background: rgba(245, 158, 11, .12);
  border: 1px solid rgba(245, 158, 11, .45);
}
.sc-mismatch b { color: #FDE68A; }

/* El diagnóstico es un enlace, no una pantalla: hereda el aspecto de los
   botones del menú pero marca que abre fuera de la aplicación. */
a.side-btn { text-decoration: none; }
.side-ext { margin-left: auto; font-size: 11px; opacity: .5; }
a.side-btn:hover .side-ext { opacity: .9; }

/* ── MecaSprint · Tutorial animado ───────────────────────── */
/* Vive dentro de la pantalla de mecanografía (no en <body>), así que se va
   solo cuando el router desmonta el módulo. */
.meca-tut {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(3, 6, 12, .82);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.meca-tut.hidden { display: none; }

.meca-tut-caja {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  width: min(980px, 100%);
  max-height: 100%;
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.meca-tut-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.meca-tut-head h3 { font-family: var(--f-head); font-size: 20px; margin-top: 2px; }
.meca-tut-paso {
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.meca-tut-texto {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  margin: 10px 0 4px;
  max-width: 76ch;
  /* Alto fijo: sin esto el teclado sube y baja al cambiar de paso según lo
     largo que sea el texto, y la animación pega un salto en cada transición. */
  min-height: 4.9em;
}

.meca-tut-guide { margin: 4px 0 6px; gap: 26px; }
/* Más grandes que en la práctica: allí las manos acompañan al texto, aquí son
   lo que el alumno ha venido a mirar. A 92 px el dedo encendido apenas se
   distinguía del resto. */
.meca-tut-guide .hand { width: 118px; }
.meca-tut-guide .hand-lbl { font-size: 13px; }

.meca-tut-nota {
  text-align: center;
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--yellow);
  min-height: 1.4em;
  margin-bottom: 12px;
}

.meca-tut-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
}
.meca-tut-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.meca-tut-btns button:disabled { opacity: .35; cursor: default; }

.meca-tut-puntos { display: flex; gap: 6px; }
.tut-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border);
  transition: background .2s, transform .2s;
}
.tut-punto.visto { background: var(--text-dim); }
.tut-punto.on { background: var(--primary); transform: scale(1.5); }

@media (max-width: 720px) {
  .meca-tut-caja { padding: 16px; }
  .meca-tut-head h3 { font-size: 17px; }
  .meca-tut-texto { min-height: 0; font-size: 13px; }
  .meca-tut-guide .hand { width: 58px; }
  .meca-tut-pie { justify-content: center; }
}

/* En secundaria el tutorial también pierde el redondeo y el emoji del botón
   pesa menos que el resto de la interfaz; el contenido no cambia. */
body.teen .meca-tut-caja { border-radius: var(--r); }
body.teen .meca-tut-paso { color: var(--teen-accent); }
body.teen .tut-punto.on { background: var(--teen-accent); }

/* ══ FileMaster OS ═══════════════════════════════════════════════════════ */
/* Antes esta pantalla se montaba con estilos en línea, y de ahí venía el aire
   genérico: cada recuadro con su propio radio, su propio fondo y su propio
   padding, sin relación entre ellos. */

.fm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fm-title { font-family: var(--f-head); font-size: 21px; display: flex; align-items: center; gap: 10px; }
.fm-title .fi-folder { width: 26px; height: auto; }
.fm-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.fm-misiones { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── Banda de misión ─────────────────────────────────────── */
.fm-mision {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(79,70,229,.14), transparent 65%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--r);
  padding: 13px 16px;
  margin-bottom: 14px;
}
.fm-mision-tag {
  display: inline-block;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; color: var(--primary);
  background: rgba(79,70,229,.16); border: 1px solid rgba(79,70,229,.35);
  border-radius: 4px; padding: 2px 9px;
}
.fm-mision-desc { font-size: 13.5px; margin-top: 7px; line-height: 1.5; max-width: 62ch; }
.fm-mision-btns { display: flex; gap: 8px; }

/* ── La ventana del explorador ───────────────────────────── */
.fm-ventana {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
}

.fm-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 9px 12px;
}
.fm-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 2px; }
.fm-acciones { display: flex; gap: 5px; flex-wrap: wrap; }

/* Un solo botón para toda la barra: mismo tamaño, mismo trazo, mismo estado.
   Los que llevan texto solo añaden el <span>. */
.fm-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; min-width: 32px; padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  font-size: 12.5px; font-weight: 600;
  transition: background .14s, color .14s, border-color .14s;
}
.fm-tool-txt { padding: 0 11px; }
.fm-tool .ic { width: 16px; height: 16px; flex-shrink: 0; }
.fm-tool:hover { background: rgba(255,255,255,.07); color: var(--text); border-color: var(--border); }
.fm-tool:active { background: rgba(255,255,255,.12); }
.fm-tool-peligro:hover { background: rgba(239,68,68,.14); color: var(--red); border-color: rgba(239,68,68,.35); }

/* Ruta: se lee como una ruta de verdad, con separadores y la hoja actual
   destacada. El emoji de carpeta que iba delante no aportaba nada. */
.fm-ruta {
  flex: 1; min-width: 140px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-family: var(--f-mono); font-size: 12px;
  color: var(--text-muted);
  overflow-x: auto; white-space: nowrap;
}
.fm-ruta > span:last-child { color: var(--text); font-weight: 600; }
.fm-ruta-raiz { color: var(--text-dim); }
.fm-ruta-sep { color: var(--text-dim); }

.fm-cuerpo { display: grid; grid-template-columns: 190px 1fr; flex: 1; min-height: 0; }
@media (max-width: 700px) { .fm-cuerpo { grid-template-columns: 1fr; } }

.fm-lugares {
  background: rgba(0,0,0,.16);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.fm-lugares-t {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-dim);
  padding: 0 4px 8px;
}
.btn-side-nav .ic { width: 16px; height: 16px; flex-shrink: 0; opacity: .9; }

.fm-panel { padding: 16px; display: flex; flex-direction: column; min-width: 0; }

/* ── Rejilla de archivos ─────────────────────────────────── */
.fm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
  align-content: start;
  overflow-y: auto;
  max-height: 430px;
}
.fm-grid-jr { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }

.fm-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: grab;
  text-align: center;
  user-select: none;
  transition: background .13s, border-color .13s;
}
.fm-grid-jr .fm-item { cursor: pointer; padding: 16px 8px 12px; }
.fm-item:hover { background: rgba(255,255,255,.05); }
.fm-item.selected { background: rgba(79,70,229,.20); border-color: var(--primary); }
.fm-item.carrying {
  border-color: var(--yellow);
  background: rgba(245,158,11,.14);
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.4);
}

.fm-item-ico { width: 46px; height: 52px; display: flex; align-items: center; justify-content: center; }
.fm-grid-jr .fm-item-ico { width: 58px; height: 64px; }
.fm-item-ico .fi { width: 100%; height: 100%; }
.fm-item-ico .fi-folder { width: 100%; height: auto; }

.fm-item-nom {
  font-size: 11.5px; font-weight: 600; line-height: 1.32;
  max-width: 100%;
  color: var(--text);
  /* Dos líneas y a partir de ahí se recorta (el nombre completo está en el
     title). Antes era word-break:break-word, que partía "poema_patrio.docx"
     en "poema_patrio.d" / "ocx" y dejaba la extensión ilegible — justo el
     dato que este módulo enseña a mirar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.fm-grid-jr .fm-item-nom { font-size: 13px; }
/* La extensión, atenuada y en monoespaciada: es la parte del nombre que hay
   que aprender a mirar, no la que hay que ignorar. */
.fm-item-ext {
  font-family: var(--f-mono); color: var(--text-muted); font-weight: 400;
  white-space: nowrap;   /* la extensión salta entera de línea, nunca se parte */
}
.fm-item.peligro .fm-item-ext { color: var(--red); font-weight: 700; }
.fm-item-tam { font-size: 9.5px; color: var(--text-dim); font-family: var(--f-mono); }

/* Silueta de la hoja: gris claro sobre el fondo oscuro, como el papel. */
.fi-hoja { fill: #E9EEF4; }
.fi-dobles { fill: #B9C4D0; }
.fi-badge { fill: #fff; font-family: var(--f-mono); font-weight: 700; text-anchor: middle; }

.fm-vacio {
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 20px; color: var(--text-dim);
}
.fm-vacio .fi-folder { width: 56px; height: auto; opacity: .55; }
.fm-vacio p { font-size: 13px; }

.fm-carry-banner {
  display: none; align-items: center; gap: 10px;
  background: rgba(245,158,11,.14);
  border: 1px dashed var(--yellow);
  border-radius: var(--r-sm);
  padding: 9px 14px; margin-bottom: 12px; font-size: 13px;
}
.fm-carry-banner .ic { width: 20px; height: 20px; color: var(--yellow); flex-shrink: 0; }
.btn-side-nav.carry-target:hover { outline: 2px dashed var(--yellow); }

/* ── Previsualizador ─────────────────────────────────────── */
.fm-modal {
  display: none; position: fixed; inset: 0; z-index: 400;
  background: rgba(3,6,12,.78); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; padding: 20px;
}
.fm-modal-caja {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); width: 440px; max-width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.fm-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--f-mono); font-size: 13px; font-weight: 600;
  word-break: break-all;
}
.fm-modal-body { padding: 18px; }

.fm-prev-ico { display: flex; justify-content: center; margin-bottom: 14px; }
.fm-prev-ico .fi { width: 62px; height: 76px; }
.fm-prev-ico .fi-folder { width: 76px; height: auto; }

.fm-prev-datos { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.fm-prev-datos > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 11px; background: rgba(0,0,0,.22);
}
.fm-prev-datos > div:first-child { border-radius: var(--r-sm) var(--r-sm) 0 0; }
.fm-prev-datos > div:last-child { border-radius: 0 0 var(--r-sm) var(--r-sm); }
.fm-prev-datos dt { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.fm-prev-datos dd { font-size: 12.5px; font-family: var(--f-mono); text-align: right; word-break: break-all; }
.fm-prev-datos dd.peligro { color: var(--red); font-weight: 700; }

.fm-prev-aviso {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
  border-radius: var(--r-sm); padding: 11px 13px;
  background: rgba(255,255,255,.035);
}
.fm-prev-aviso.ok { border-left: 2px solid var(--green); }
.fm-prev-aviso.peligro {
  background: rgba(239,68,68,.10); border-left: 2px solid var(--red); color: #FCA5A5;
}
.fm-prev-aviso strong { display: block; color: var(--red); margin-bottom: 4px; font-size: 13px; }

/* En secundaria, menos redondeo y acento cian, igual que el resto del nivel. */
body.teen .fm-mision { border-left-color: var(--teen-accent);
  background: linear-gradient(90deg, rgba(34,211,238,.09), transparent 65%); }
body.teen .fm-mision-tag { color: var(--teen-accent); background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.35); }
body.teen .fm-item.selected { background: rgba(34,211,238,.14); border-color: var(--teen-accent); }
body.teen .fm-ventana { box-shadow: none; }

.fm-mision-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: 12px; }
.fm-mision-btn .ic { width: 13px; height: 13px; }
.fm-mision-btn.hecha .ic { color: var(--green); }
.fm-mision-desc b { color: var(--text); }
.fm-ico-btn { display: inline-flex; align-items: center; gap: 6px; }
.fm-ico-btn .ic { width: 15px; height: 15px; }

/* ── Diálogos de la plataforma (dialogo.mjs) ───────────────
   Reemplazan a prompt()/confirm() nativos: en tableta el diálogo del sistema
   no se reconoce como parte del programa, y el navegador puede bloquearlo. */
.dlg-fondo {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(3, 6, 12, .72);
  backdrop-filter: blur(3px);
  animation: dlg-entra .14s ease-out;
}
.dlg {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
  animation: dlg-sube .16s ease-out;
}
.dlg-titulo { font-family: var(--f-head); font-size: 17px; color: var(--text); }
.dlg-campo { display: flex; flex-direction: column; gap: 6px; }
.dlg-campo span { font-size: 12px; color: var(--text-muted); }
.dlg-campo input { font-size: 15px; padding: 11px 13px; }
.dlg-ayuda { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.dlg-error {
  font-size: 12px; color: var(--red);
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: var(--r-sm);
  padding: 7px 10px;
}
.dlg-botones { display: flex; justify-content: flex-end; gap: 8px; }
.dlg-botones .btn { min-width: 96px; justify-content: center; }

@keyframes dlg-entra { from { opacity: 0; } }
@keyframes dlg-sube  { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Kinder usa el mismo diálogo, pero todo más grande: se toca con el dedo. */
body.kinder .dlg { max-width: 460px; padding: 26px; }
body.kinder .dlg-titulo { font-size: 20px; }
body.kinder .dlg-campo input { font-size: 18px; padding: 14px; }
body.kinder .dlg-botones .btn { font-size: 15px; padding: 11px 18px; }

@media (prefers-reduced-motion: reduce) {
  .dlg-fondo, .dlg { animation: none; }
}

/* ── Retos ─────────────────────────────────────────────────────────────
   Sustituyen a los estilos en línea que tenía challenges.js: cada tarjeta
   traía su propio radio, su propio fondo y su propio padding, sin relación
   entre ellos ni con el resto del sistema. */
.ret-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
}
.ret-h2 { font-size: 22px; margin-bottom: 2px; }
.ret-rotulo {
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); margin: 22px 0 10px;
}
.ret-rotulo:first-child { margin-top: 0; }
.ret-cargando { padding: 24px; color: var(--text-muted); font-size: 13px; }
.ret-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 24px; color: var(--text-muted); text-align: center;
}
.ret-vacio .ic { width: 38px; height: 38px; color: var(--text-dim); }
.ret-vacio p { max-width: 380px; font-size: 13.5px; line-height: 1.6; }

.ret-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px;
}
.ret-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ret-card-txt { flex: 1 1 320px; min-width: 0; }
.ret-title { font-family: var(--f-head); font-size: 16.5px; color: var(--text); }
.ret-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ret-tag {
  font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  color: #A5B4FC; background: rgba(79,70,229,.16); border: 1px solid rgba(79,70,229,.35);
}
.ret-tag.suave { color: var(--text-muted); background: var(--surface2); border-color: var(--border); }
.ret-tag.meta  { color: var(--yellow); background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.35); }
.ret-como { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin-top: 9px; max-width: 62ch; }
.ret-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }
.ret-ganador { font-size: 12px; color: var(--yellow); margin-top: 5px; font-weight: 600; }

.ret-card-btns { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.ret-espera-txt { font-size: 11.5px; color: var(--text-dim); }
.ret-est { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; }
.ret-est-espera { background: rgba(245,158,11,.15); color: var(--yellow); }
.ret-est-vivo   { background: rgba(16,185,129,.15); color: var(--green); }
.ret-est-fin    { background: rgba(139,92,246,.15); color: #A78BFA; }

.ret-tabla { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ret-lb-vacio { list-style: none; font-size: 12.5px; color: var(--text-muted); padding: 10px 4px; }
.ret-meta-ok {
  margin-left: 8px; font-size: 10px; font-weight: 800; text-transform: uppercase;
  color: var(--green); background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.35); border-radius: 999px; padding: 1px 7px;
}
.lb-score small { font-family: var(--f-body); font-size: 10.5px; color: var(--text-dim); margin-left: 4px; }

/* Modal de creación */
.ret-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,6,12,.72); backdrop-filter: blur(4px);
}
.ret-modal[hidden] { display: none; }
.ret-modal-caja {
  width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.ret-modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ret-modal-t { font-family: var(--f-head); font-size: 18px; }
.ret-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.ret-campo > span { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); }
.ret-form { display: grid; grid-template-columns: 1fr 140px; gap: 0 12px; }
.ret-form .ret-campo.ancho { grid-column: 1 / -1; }
@media (max-width: 560px) { .ret-form { grid-template-columns: 1fr; } }

.ret-plantillas-t { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.ret-plantillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ret-plantilla {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  transition: border-color .15s, background .15s;
}
.ret-plantilla:hover { border-color: var(--primary); background: rgba(79,70,229,.1); }
.ret-plantilla.activa { border-color: var(--primary); background: rgba(79,70,229,.18); box-shadow: 0 0 0 1px var(--primary); }
.ret-plantilla-t { font-size: 13px; font-weight: 700; }
.ret-plantilla-s { font-size: 11px; color: var(--text-muted); }

.ret-sep { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--text-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.ret-sep::before, .ret-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }
.ret-nota { font-size: 12px; line-height: 1.55; color: var(--text-muted); background: var(--surface2); border-left: 3px solid var(--primary); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 10px 13px; margin-top: 4px; }
.ret-modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── CodeBot: brújula e interruptor del recorrido ──────────────────────
   La orientación del robot es la pregunta que más traba a los niños. El
   dibujo del chasis girado no siempre se lee a tamaño de casilla, así que
   va también escrita, con flecha y con la palabra. */
.cb-brujula {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding: 7px 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px; color: var(--text-muted);
}
.cb-brujula:empty { display: none; }
.cb-bruj-ico {
  display: inline-block; font-size: 15px; line-height: 1; color: var(--cyan);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.cb-bruj-txt b { color: var(--text); }
.cb-bruj-fin {
  padding-left: 10px; border-left: 1px solid var(--border);
  color: var(--text-dim);
}
.cb-bruj-fin b { color: var(--cyan); }

.cb-ojo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; font-family: var(--f-body);
  background: var(--surface2); color: var(--text-dim);
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, background .15s;
}
.cb-ojo:hover { color: var(--text-muted); }
.cb-ojo .cb-ojo-ico { font-size: 12px; opacity: .5; transition: opacity .15s; }
.cb-ojo.on {
  color: var(--cyan); border-color: rgba(6,182,212,.45);
  background: rgba(6,182,212,.12);
}
.cb-ojo.on .cb-ojo-ico { opacity: 1; }

body.kinder .cb-brujula { font-size: 15px; padding: 9px 16px; }
body.kinder .cb-bruj-ico { font-size: 18px; }

/* ── Fogón Digital ─────────────────────────────────────────────────────
   La cocina se dibuja en canvas; esto es el marco: recetario, paleta de
   instrucciones y la tira de la receta. */
.ck-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.ck-h2 { font-size: 22px; margin-bottom: 2px; }

/* Recetario: el progreso del módulo, siempre a la vista */
.ck-recetario { display: flex; align-items: center; gap: 12px; }
.ck-recetario-tot { font-family: var(--f-head); font-size: 22px; color: var(--yellow); line-height: 1; }
.ck-recetario-tot span { font-size: 13px; color: var(--text-dim); }
.ck-recetario-tira { display: flex; gap: 5px; flex-wrap: wrap; max-width: 460px; }
.ck-receta-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 34px; padding: 4px 6px; border-radius: var(--r-sm);
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--f-body); transition: border-color .15s, background .15s;
}
.ck-receta-chip:hover { border-color: var(--primary); }
.ck-receta-chip.hecha { color: var(--text-muted); }
.ck-receta-chip.on { border-color: var(--primary); background: rgba(79,70,229,.18); color: var(--text); }
.ck-chip-n { font-size: 11px; font-weight: 800; }
.ck-chip-estrellas { font-size: 9px; letter-spacing: -.5px; color: var(--yellow); }

.ck-layout { display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(300px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ck-layout { grid-template-columns: 1fr; } }
.ck-panel-izq { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ck-panel-der { padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.ck-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ck-titulo { font-family: var(--f-head); font-size: 16px; }
.ck-medidores { display: flex; gap: 6px; }
.ck-medidor {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.ck-medidor.bien { color: var(--green); border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.12); }
.ck-medidor.mal  { color: var(--red);   border-color: rgba(239,68,68,.4);  background: rgba(239,68,68,.12); }

/* Lienzo de la cocina */
.ck-lienzo-wrap { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: #0F1622; }
.ck-lienzo-wrap canvas { display: block; width: 100%; }

/* Lo que dice Sazón mientras cocina */
.ck-burbuja {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: rgba(10,16,26,.93); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; line-height: 1.5;
  backdrop-filter: blur(3px);
  animation: ck-sube .18s ease-out;
}
.ck-burbuja[hidden] { display: none; }
.ck-burbuja.malo { border-color: rgba(239,68,68,.5); background: rgba(40,12,12,.95); color: #FCA5A5; }
@keyframes ck-sube { from { opacity: 0; transform: translateY(8px); } }

/* Veredicto al final de la ejecución */
.ck-veredicto { display: flex; flex-direction: column; gap: 6px; }
.ck-veredicto-estrellas { font-size: 24px; color: var(--yellow); letter-spacing: 3px; line-height: 1; }
.ck-veredicto-motivo { font-family: var(--f-head); font-size: 15px; color: var(--text); }
.ck-veredicto-datos { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ck-veredicto-lista { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-top: 4px; max-height: 130px; overflow-y: auto; }
.ck-veredicto-lista li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.ck-veredicto-xp { font-size: 13px; font-weight: 800; color: var(--green); margin-top: 4px; }

/* El pedido: qué hay que lograr */
.ck-pedido { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 13px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.ck-pedido-t { font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--text-dim); }
.ck-pedido-lista { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }
.ck-pedido-item { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.05); font-size: 12px; }
.ck-pedido-item b { color: var(--text); }
.ck-pedido-item i { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.ck-pedido-tiempo { font-size: 11px; font-weight: 700; color: var(--cyan); }

/* Botones de acción */
.ck-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ck-btn {
  padding: 10px 20px; border-radius: var(--r-sm); border: none;
  font-family: var(--f-body); font-size: 14px; font-weight: 700; color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.28); transition: transform .1s, filter .15s;
}
.ck-btn:hover { filter: brightness(1.1); }
.ck-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.28); }
.ck-btn-go { background: linear-gradient(180deg, #10B981, #059669); flex: 1; max-width: 220px; }
.ck-btn-alt { background: var(--surface2); color: var(--text-muted); box-shadow: 0 4px 0 rgba(0,0,0,.2); }

.ck-ritmo { display: flex; gap: 3px; margin-left: auto; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.ck-ritmo[hidden] { display: none; }
.ck-ritmo button { border: none; background: transparent; color: var(--text-dim); font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 999px; font-family: var(--f-body); }
.ck-ritmo button.on { background: var(--primary); color: #fff; }

/* Paleta de instrucciones */
.ck-sub { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-muted); }
.ck-brief { font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-top: 5px; }
.ck-paleta { display: flex; flex-wrap: wrap; gap: 7px; }
.ck-bloque {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-sm); border: none;
  background: var(--c); color: #fff; font-family: var(--f-body);
  font-size: 12.5px; font-weight: 700;
  box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .1s, filter .15s;
}
.ck-bloque:hover { filter: brightness(1.12); transform: translateY(-1px); }
.ck-bloque:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.ck-bloque.grande { font-size: 15px; padding: 12px 18px; }
.ck-bloque-pin { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); flex-shrink: 0; }

/* La receta escrita */
.ck-receta-cab { display: flex; justify-content: space-between; align-items: center; }
.ck-limpiar { background: transparent; border: 1px solid var(--border); color: var(--text-dim); font-size: 11px; padding: 2px 9px; border-radius: 999px; font-family: var(--f-body); }
.ck-limpiar:hover { color: var(--red); border-color: rgba(239,68,68,.4); }
.ck-receta { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.ck-receta-vacia { text-align: center; padding: 30px 14px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); border: 1px dashed var(--border); border-radius: var(--r-sm); }
.ck-paso {
  display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  border-radius: var(--r-sm); background: var(--surface2);
  border-left: 3px solid var(--c); font-size: 13px;
  transition: background .15s, transform .15s;
}
.ck-paso.on { background: rgba(79,70,229,.22); transform: translateX(3px); box-shadow: 0 0 0 1px var(--primary); }
.ck-paso.malo { border-left-color: var(--red); background: rgba(239,68,68,.1); }
.ck-paso-n { width: 18px; font-size: 10.5px; font-weight: 800; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ck-paso-txt { flex: 1; color: var(--text); }
.ck-paso-min { font-size: 10.5px; color: var(--cyan); font-variant-numeric: tabular-nums; }
.ck-paso-x { background: transparent; border: none; color: var(--text-dim); font-size: 11px; padding: 2px 4px; }
.ck-paso-x:hover { color: var(--red); }

body.kinder .ck-paso { font-size: 15px; padding: 10px 13px; }
body.kinder .ck-brief { font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .ck-burbuja, .ck-paso { animation: none; transition: none; }
}

/* ══════════════════════════ La Jugada (fútbol) ══════════════════════════ */

.jg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.jg-h2 { margin: 0 0 2px; }

.jg-recetario { display: flex; align-items: center; gap: 10px; }
.jg-recetario-tot { font-family: var(--f-head); font-size: 20px; color: var(--yellow); line-height: 1; }
.jg-recetario-tot span { font-size: 12px; color: var(--text-dim); }
.jg-recetario-tira { display: flex; gap: 4px; flex-wrap: wrap; max-width: 420px; }
.jg-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 30px; padding: 4px 5px; border-radius: 8px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--f-body); transition: border-color .15s, background .15s;
}
.jg-chip:hover { border-color: var(--primary); }
.jg-chip.hecha { color: var(--text-muted); }
.jg-chip.on { border-color: var(--primary); background: rgba(79,70,229,.18); color: var(--text); }
.jg-chip-n { font-size: 11px; font-weight: 800; }
.jg-chip-estrellas { font-size: 9px; letter-spacing: -.5px; color: var(--yellow); }

/* El campo manda: se lleva la columna ancha. */
.jg-layout { display: grid; grid-template-columns: minmax(340px, 1.9fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .jg-layout { grid-template-columns: 1fr; } }
.jg-panel-izq { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.jg-panel-der { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

.jg-barra { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.jg-titulo { font-family: var(--f-head); font-size: 16px; }
.jg-medidores { display: flex; gap: 6px; }
.jg-medidor {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.jg-medidor.bien { color: var(--green); border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.12); }
.jg-medidor.mal  { color: var(--red);   border-color: rgba(239,68,68,.4);  background: rgba(239,68,68,.12); }

.jg-lienzo-wrap { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: #070C16; }
.jg-lienzo-wrap canvas { display: block; width: 100%; }

.jg-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.jg-btn {
  padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border);
  font-family: var(--f-body); font-weight: 700; font-size: 13.5px; cursor: pointer;
  background: var(--surface2); color: var(--text); transition: filter .15s, transform .1s;
}
.jg-btn:hover { filter: brightness(1.15); }
.jg-btn:active { transform: translateY(1px); }
.jg-btn-go { background: linear-gradient(135deg, #16A34A, #22C55E); border-color: transparent; color: #06210F; }

/* ── Panel derecho: objetivo y tabla de decisión ────────────────────────── */
.jg-sub { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim); }
.jg-brief { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.jg-pista { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); font-style: italic; }

.jg-objetivo { display: flex; gap: 6px; flex-wrap: wrap; }
.jg-obj {
  padding: 5px 11px; border-radius: 999px; font-size: 11.5px; color: var(--text-muted);
  background: var(--surface2); border: 1px solid var(--border);
}
.jg-obj b { color: var(--text); font-variant-numeric: tabular-nums; }

.jg-tabla-cab { display: flex; justify-content: space-between; align-items: center; }
.jg-tabla { display: flex; flex-direction: column; gap: 4px; }
.jg-tabla-vacia { font-size: 12px; color: var(--text-dim); line-height: 1.5; padding: 6px 0; }
/* Cada renglón es una condicional que el alumno ejecutó de verdad, con sus
   números. Es el módulo entero: la regla no se escribe, se descubre aquí. */
.jg-fila {
  display: grid; grid-template-columns: 1.25fr 1fr .85fr; gap: 8px; align-items: center;
  padding: 7px 10px; border-radius: 9px; font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border); border-left: 3px solid var(--border);
}
.jg-fila.bien { border-left-color: var(--green); }
.jg-fila.mal  { border-left-color: var(--red); }
.jg-fila-si { color: var(--cyan); font-weight: 600; }
.jg-fila-hice { color: var(--text); }
.jg-fila-res { color: var(--text-muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ── La tapa: antes de empezar y al terminar ────────────────────────────── */
.jg-tapa {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(4, 8, 16, .72); backdrop-filter: blur(2px); padding: 16px;
}
.jg-tapa[hidden] { display: none; }
.jg-tapa-caja {
  text-align: center; max-width: 460px; padding: 20px 24px; border-radius: var(--r);
  background: rgba(10, 16, 28, .94); border: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}
.jg-tapa-caja h3 { font-family: var(--f-head); font-size: 24px; margin-bottom: 6px; color: var(--yellow); }
.jg-tapa-caja p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; }

.jg-teclas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.jg-tecla-grupo { display: flex; align-items: center; gap: 3px; }
.jg-tecla-grupo i { font-style: normal; font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.jg-teclas kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 6px; font-size: 11px; font-weight: 700; font-family: var(--f-body);
  background: var(--surface2); border: 1px solid var(--border); border-bottom-width: 2px; color: var(--text);
}
.jg-teclas kbd.ancha { min-width: 74px; }

/* ── El consejo en vivo: la condicional dicha en el momento ─────────────── */
.jg-consejo {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 6px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(6, 11, 20, .88); border: 1px solid var(--border); color: var(--text);
  pointer-events: none; white-space: nowrap;
}
.jg-consejo.bien  { border-color: rgba(74, 222, 128, .6); color: #BBF7D0; }
.jg-consejo.aviso { border-color: rgba(250, 204, 21, .6); color: #FDE68A; }
.jg-consejo.malo  { border-color: rgba(248, 113, 113, .6); color: #FECACA; }

/* ── Mando en pantalla: son las teclas del teclado, dibujadas ───────────── */
/* Mismos glifos (← ↑ ↓ →) y misma barra ESPACIO que en el teclado de verdad,
   con relieve de tecla. En tablet se juega con ellas; en PC sirven de mapa. */
.jg-mando { display: flex; justify-content: center; align-items: flex-start; gap: 26px; flex-wrap: wrap; }
.jg-mando[hidden] { display: none; }
.jg-cruz { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.jg-cruz > div { display: flex; gap: 4px; }
.jg-mando-acc { display: flex; gap: 12px; align-items: flex-start; }
.jg-mando-acc > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.jg-kb {
  min-width: 46px; height: 44px; padding: 0 10px; border-radius: 8px;
  cursor: pointer; user-select: none; touch-action: none;
  background: linear-gradient(180deg, var(--surface2), var(--surface));
  border: 1px solid var(--border); border-bottom-width: 3px;
  color: var(--text); font-family: var(--f-body); font-size: 17px; font-weight: 800;
  transition: transform .05s, border-bottom-width .05s;
}
.jg-kb-larga { min-width: 132px; font-size: 12px; letter-spacing: .08em; }
/* Al pulsar, la tecla se hunde. Es la señal que un niño espera de un botón. */
.jg-kb:active { transform: translateY(2px); border-bottom-width: 1px; background: var(--primary); }
.jg-kb-pie { font-size: 10.5px; color: var(--text-dim); font-weight: 700; }

body.kinder .jg-brief { font-size: 15px; }
body.kinder .jg-tapa-caja h3 { font-size: 27px; }
body.kinder .jg-tapa-caja p { font-size: 15px; }
body.kinder .jg-consejo { font-size: 15px; padding: 8px 18px; }
body.kinder .jg-kb { min-width: 58px; height: 54px; font-size: 21px; }
body.kinder .jg-kb-larga { min-width: 152px; font-size: 14px; }
body.kinder .jg-kb-pie { font-size: 12.5px; }
body.kinder .jg-fila { font-size: 13.5px; }

@media (max-width: 560px) {
  .jg-fila { grid-template-columns: 1fr; gap: 2px; }
  .jg-fila-res { text-align: left; }
}

/* ══════════════ Tutorial animado de los módulos de lienzo ══════════════ */
/* Carcasa compartida por Fogón Digital y La Jugada (`shared/tutorial.mjs`).
   Vive dentro de la pantalla del módulo, no en <body>, así que se va sola
   cuando el router desmonta el módulo. */

.gtut {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(3, 6, 12, .84);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 18px; overflow-y: auto;
}
.gtut.hidden { display: none; }

.gtut-caja {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 20px 24px;
  width: min(860px, 100%); max-height: 100%; overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
}

.gtut-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gtut-head h3 { font-family: var(--f-head); font-size: 20px; margin-top: 2px; }
.gtut-paso { font-size: 11px; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.gtut-texto {
  color: var(--text-muted); font-size: 14px; line-height: 1.6;
  margin: 9px 0 12px; max-width: 78ch;
  /* Alto fijo: sin esto la escena sube y baja al cambiar de paso según lo
     largo que sea el texto, y la animación pega un salto en cada transición. */
  min-height: 4.4em;
}

.gtut-escena { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); background: #0A0F18; }
.gtut-escena canvas { display: block; width: 100%; }
.gtut-nota {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  max-width: 88%; padding: 6px 14px; border-radius: 999px; text-align: center;
  background: rgba(6, 11, 20, .88); border: 1px solid rgba(148, 163, 184, .3);
  font-size: 12.5px; font-weight: 600; color: var(--text); pointer-events: none;
}
.gtut-nota:empty { display: none; }
.gtut-nota.mal { border-color: rgba(248, 113, 113, .6); color: #FECACA; }

/* La tira de abajo: la receta en Fogón, el plan de reglas en La Jugada. Usa
   el mismo lenguaje visual que el módulo, para que el alumno reconozca en el
   juego lo que acaba de ver en el tutorial. */
.gtut-franja { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; min-height: 34px; align-items: center; }
.gtut-franja:empty { display: none; }
.gtut-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 8px; font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-dim);
  border-left: 3px solid var(--c, var(--border));
}
.gtut-item.on { color: var(--text); background: rgba(79, 70, 229, .2); border-color: var(--primary); border-left-color: var(--c, var(--primary)); }
.gtut-item.malo { color: #FECACA; background: rgba(239, 68, 68, .14); border-color: rgba(239, 68, 68, .5); }
.gtut-item.muerta { opacity: .55; border-style: dashed; }
.gtut-item-n { font-size: 10px; font-weight: 800; opacity: .65; font-variant-numeric: tabular-nums; }

.gtut-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gtut-puntos { display: flex; gap: 5px; }
.gtut-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: background .2s, transform .2s; }
.gtut-punto.visto { background: var(--text-dim); }
.gtut-punto.on { background: var(--primary); transform: scale(1.5); }

.gtut-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.gtut-btn {
  padding: 7px 13px; border-radius: 9px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--f-body); font-weight: 700; font-size: 12.5px;
}
.gtut-btn:hover:not(:disabled) { filter: brightness(1.2); border-color: var(--primary); }
.gtut-btn:disabled { opacity: .35; cursor: default; }
.gtut-btn-go { background: var(--primary); border-color: transparent; }

body.kinder .gtut-texto { font-size: 16px; line-height: 1.65; }
body.kinder .gtut-head h3 { font-size: 23px; }
body.kinder .gtut-btn { font-size: 14px; padding: 9px 15px; }
body.kinder .gtut-item { font-size: 14px; padding: 7px 12px; }

body.teen .gtut-caja { border-radius: var(--r); }
body.teen .gtut-paso { color: var(--teen-accent); }
body.teen .gtut-punto.on { background: var(--teen-accent); }
body.teen .gtut-btn-go { background: var(--teen-accent); }

@media (prefers-reduced-motion: reduce) {
  .gtut-punto { transition: none; }
}