/* =====================================================================
   Panel del maestro / administrador — misma identidad, más denso
   ===================================================================== */
body.panel { background-size: 32px 32px; }
.panel-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--e4) var(--e3);
  background: var(--tinta); color: #DCE3F2; display: flex; flex-direction: column; gap: var(--e4);
}
.lateral .marca-app { color: #fff; padding: 4px 8px; }
.lateral .logo i { border-color: #fff; }
.lateral .logo i:nth-child(3) { border-color: var(--mt-cielo); background: var(--mt-cielo); }
.lateral nav { display: grid; gap: 2px; }
.lateral nav p { margin: 12px 10px 4px; font-size: 12px; font-weight: 700; color: #8C99B5; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: #DCE3F2;
  text-decoration: none; font-weight: 700; font-size: var(--t-sm);
}
.lateral nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.lateral nav a[aria-current="page"] { background: #fff; color: var(--tinta); }
.lateral nav a .punto { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--mt-amarillo); color: var(--tinta); font-size: 12px; display: grid; place-items: center; }
.lateral .yo { margin-top: auto; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.06); font-size: var(--t-sm); display: grid; gap: 8px; }
.lateral .yo b { color: #fff; }
.lateral .yo .btn { --b-fondo: transparent; --b-texto: #DCE3F2; --b-borde: rgba(255,255,255,.25); --b-sombra: transparent; }

.contenido { padding: var(--e5) clamp(16px, 3vw, 40px) var(--e8); min-width: 0; }
.cab-panel { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.cab-panel h1 { font-size: var(--t-2xl); }
.cab-panel p { margin: 4px 0 0; color: var(--tinta-2); }
.barra-filtros { display: flex; gap: var(--e3); flex-wrap: wrap; align-items: center; margin-bottom: var(--e4); }
.barra-filtros .selector, .barra-filtros .entrada { width: auto; min-width: 160px; min-height: 40px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e3); margin-bottom: var(--e5); }
.tile { padding: var(--e4) var(--e5); background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-m); display: grid; gap: 2px; }
.tile b { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; font-weight: 800; }
.tile span { color: var(--tinta-2); font-weight: 700; font-size: var(--t-sm); }
.tile.alerta { border-color: var(--ambar); background: var(--ambar-claro); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--e4); }
.bloque { padding: var(--e5); background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--r-m); min-width: 0; }
.bloque h2 { font-size: var(--t-lg); }
.bloque > h2 { margin-bottom: var(--e3); }
.bloque + .bloque { margin-top: var(--e4); }

/* Gráfica de barras (una serie) */
.grafica { position: relative; }
.grafica svg { width: 100%; height: 220px; overflow: visible; }
.grafica .eje { stroke: var(--linea-f); stroke-width: 1; }
.grafica .reja { stroke: var(--linea); stroke-width: 1; }
.grafica text { font-size: 11px; fill: var(--tinta-3); font-family: var(--f-texto); }
.grafica rect.barra { fill: var(--azul); }
.grafica rect.zona { fill: transparent; cursor: default; }
.grafica rect.zona:hover + rect.barra, .grafica g:hover rect.barra { fill: var(--azul-osc); }
.tip { position: absolute; pointer-events: none; background: var(--tinta); color: #fff; padding: 6px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; white-space: nowrap; transform: translate(-50%, -110%); z-index: 5; }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tabla th { text-align: left; padding: 10px 12px; font-size: 12px; color: var(--tinta-3); border-bottom: 2px solid var(--linea); white-space: nowrap; background: var(--hoja); position: sticky; top: 0; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid #EEF2F8; vertical-align: middle; }
.tabla tr.clic { cursor: pointer; }
.tabla tr.clic:hover td { background: #F5F8FF; }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow: auto; max-height: 70vh; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--hoja); }
.pildora { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #EEF2F8; color: var(--tinta-2); }
.pildora.si { background: var(--verde-claro); color: var(--verde); }
.pildora.no { background: var(--rojo-claro); color: var(--rojo); }
.pildora.amb { background: var(--ambar-claro); color: var(--ambar); }
.medidor { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.medidor i { flex: 1; height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.medidor i b { display: block; height: 100%; border-radius: 4px; }
.medidor span { font-variant-numeric: tabular-nums; font-weight: 700; width: 3.2em; text-align: right; }

/* Mapa de calor */
.calor { border-collapse: separate; border-spacing: 2px; font-size: 12px; }
.calor th, .calor td { padding: 0; }
.calor thead th { height: 24px; color: var(--tinta-3); font-weight: 700; text-align: center; }
.calor thead tr.mods th { text-align: left; padding: 0 4px; border-bottom: 2px solid var(--linea); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; font-size: 11px; }
.calor tbody th { position: sticky; left: 0; background: var(--hoja); text-align: left; padding: 0 12px 0 4px; white-space: nowrap; font-weight: 700; z-index: 1; }
.calor td i { display: block; width: 22px; height: 22px; border-radius: 5px; background: #EEF2F8; }
.calor td i.c0 { background: #D7E2F6; outline: 2px dashed #9FB4DE; outline-offset: -3px; }
.calor td i.c1 { background: #B9EBCB; }
.calor td i.c2 { background: #4FC983; }
.calor td i.c3 { background: #0F8F4E; }
.calor td i.q { border-radius: 50%; }
.leyenda { display: flex; gap: var(--e4); flex-wrap: wrap; font-size: 12px; color: var(--tinta-2); font-weight: 700; margin-top: var(--e3); }
.leyenda span { display: inline-flex; gap: 6px; align-items: center; }
.leyenda i { width: 16px; height: 16px; border-radius: 4px; display: inline-block; }

/* Revisiones */
.revision { display: block; }
.pila > .bloque + .bloque { margin-top: 0; }
.revision summary { cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: var(--e3); align-items: center; list-style: none; }
.revision summary::-webkit-details-marker { display: none; }
.revision .cuerpo-rev { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e4); margin-top: var(--e4); }
.mensaje-alumno { background: #F5F8FF; border-left: 4px solid var(--azul); padding: var(--e3); border-radius: 0 8px 8px 0; }

/* Editor de contenido */
.editor-contenido { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--e4); align-items: start; }
.arbol { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: var(--e3); }
.arbol details { margin: 2px 0; }
.arbol summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; font-weight: 700; font-size: var(--t-sm); }
.arbol summary::-webkit-details-marker { display: none; }
.arbol summary:hover, .arbol .hoja-arbol:hover { background: #F0F4FC; }
.arbol details details { margin-left: 14px; }
.arbol .hoja-arbol { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 34px; border-radius: 6px; font-size: 13.5px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.arbol .hoja-arbol[aria-current="true"], .arbol summary[aria-current="true"] { background: var(--azul-claro); color: var(--azul-osc); }
.arbol .agregar { font-size: 12.5px; color: var(--azul); font-weight: 700; padding: 4px 8px 4px 34px; background: none; border: none; cursor: pointer; }
.arbol .tenue-x { opacity: .5; }
.lista-act { display: grid; gap: var(--e2); }
.fila-act { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--e3); align-items: center; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--hoja); }
.fila-act .n { width: 30px; height: 30px; border-radius: 8px; background: #EEF2F8; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.fila-act .txt { min-width: 0; }
.fila-act .txt b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-act .txt small { color: var(--tinta-3); font-weight: 700; }
.form-grid { display: grid; gap: var(--e4); }
.form-grid .dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.form-grid .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
.opcion-edit { display: grid; grid-template-columns: auto 1fr auto; gap: var(--e2); align-items: center; }
.editor-mini .CodeMirror { min-height: 120px; height: 180px; }
.resultado-prueba { font-size: var(--t-sm); display: grid; gap: 4px; }
.resultado-prueba .ok { color: var(--verde); font-weight: 700; }
.resultado-prueba .no { color: var(--rojo); font-weight: 700; }
.ayuda-pruebas { font-size: 12.5px; background: #F5F8FF; border-radius: 8px; padding: 10px 12px; color: var(--tinta-2); }
.ayuda-pruebas code { font-size: 12px; }

/* Acceso del maestro */
.acceso-panel { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); }
.acceso-panel .hoja { width: min(100%, 420px); padding: var(--e6); display: grid; gap: var(--e4); }

@media (max-width: 1000px) {
  .panel-shell { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .lateral nav { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .lateral nav p { grid-column: 1 / -1; }
  .dos-col, .editor-contenido, .revision .cuerpo-rev { grid-template-columns: 1fr; }
  .arbol { position: static; max-height: 50vh; }
}
@media (max-width: 600px) {
  .form-grid .dos, .form-grid .tres { grid-template-columns: 1fr; }
}

/* ---------- Usuarios ---------- */
.paginacion { display: flex; align-items: center; justify-content: center; gap: var(--e4); margin-top: var(--e4); font-weight: 700; color: var(--tinta-2); }
.datos-cuenta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0 0 var(--e4); font-size: var(--t-sm); }
.datos-cuenta dt { color: var(--tinta-3); font-weight: 700; }
.datos-cuenta dd { margin: 0; overflow-wrap: anywhere; }
.acceso-panel .aviso-suave { background: var(--ambar-claro); border-left: 4px solid var(--ambar); padding: var(--e3); border-radius: 0 var(--r-s) var(--r-s) 0; font-size: var(--t-sm); margin: 0; }
@media (max-width: 520px) { .datos-cuenta { grid-template-columns: minmax(0, 1fr); gap: 2px; } .datos-cuenta dd { margin-bottom: 8px; } }
.dos-col > .bloque { margin-top: 0; margin-bottom: 0; }
.dos-col { margin-bottom: var(--e4); }