/* ============ MODO ESTUDIANTE (también lo usa el instructor para ver entregas) ============ */
.caja-entrar{max-width:420px; margin:40px auto}
.titulo-entrar{margin:0 0 6px; font-size:15px; color:var(--azul)}
.caja-entrar input{width:100%}

.insignia{font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:12px; background:#fdf8e8;
  color:#7a5c00; border:1px solid #e8d28a; white-space:nowrap}
.insignia.ok{background:#eef7f1; color:#14603a; border-color:#9fd3b3}
.insignia.gris{background:#eef3f8; color:var(--gris); border-color:#dbe3ea}
.al-alumno{margin:0 0 6px; font-size:13px; color:var(--gris)}
.al-enunciado{margin:0 0 10px; white-space:pre-wrap; line-height:1.5}
.al-secuencia{font-size:13px; margin-bottom:10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.al-secuencia .sim-paso{font-size:15px; border:1px solid #dbe3ea; background:#fff}
.al-es{margin-top:10px; border-top:1px solid #e6ecf2; padding-top:8px}
.al-es summary{cursor:pointer; font-size:12.5px; font-weight:600; color:var(--azul); padding:4px 0}
.al-es .columnas{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; margin-top:8px}
@media (max-width:1000px){ .al-es .columnas{grid-template-columns:1fr} }
.al-es table{font-size:12px}
.al-es td{padding:4px 6px}

.fuente-barra{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center; margin:12px 0 0;
  padding:8px 12px; background:#f5f9fd; border:1px dashed #a9c8e6; border-radius:8px; font-size:13px}
.fuente-barra label{display:inline-flex; gap:5px; align-items:center; cursor:pointer}

.btn-mini{background:#fff; border:1px solid var(--linea); color:var(--azul); border-radius:6px;
  padding:4px 9px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; line-height:1.3}
.btn-mini:hover:not(:disabled){background:#eef3f8}
.btn-mini:disabled{opacity:.4; cursor:not-allowed}
.btn-mini.on{background:var(--azul); color:#fff; border-color:var(--azul)}
.btn-mini.peligro{color:var(--peligro); border-color:#e3b4b0}
.btn-mini.peligro:hover{background:#fdf1f0}
.seg{display:inline-flex}
.seg .btn-mini{border-radius:0; margin-left:-1px}
.seg .btn-mini:first-child{border-radius:6px 0 0 6px; margin-left:0}
.seg .btn-mini:last-child{border-radius:0 6px 6px 0}

/* ---------- escalera ---------- */
.lad-red{border:1px solid var(--linea); border-radius:9px; margin-bottom:10px; background:#fff}
.lad-cab{display:flex; justify-content:space-between; align-items:center; padding:6px 10px;
  border-bottom:1px solid #eef2f6; font-size:12.5px; color:var(--azul)}
.lad-dibujo{overflow-x:auto; padding:4px 6px}
.lad-svg{display:block}
.lad-herr{padding:6px 10px 9px; border-top:1px solid #f1f4f7}
.lad-ayuda{margin:0}
.lad-barra{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.lad-in{width:90px; font-family:var(--mono); text-transform:uppercase}
.lad-riel{stroke:#1d2731; stroke-width:3}
.lad-hilo{stroke:#1d2731; stroke-width:1.6}
.lad-sim{stroke:#1d2731; stroke-width:2.2; fill:none}
.lad-caja{fill:transparent; stroke:none}
.lad-el{cursor:pointer}
.lad-el:hover .lad-caja{fill:#eef3f8}
.lad-el.sel .lad-caja{fill:#e3eefa; stroke:var(--azul2); stroke-width:1.5}
.lad-el.falta .lad-dir{fill:var(--peligro)}
.lad-dir{font:700 12px var(--mono); text-anchor:middle; fill:#1f4e79}
.lad-etq{font:10px "Segoe UI", sans-serif; text-anchor:middle; fill:#7a8794}
.lad-letra{font:700 12px var(--mono); text-anchor:middle; fill:#1d2731}
.al-pre{background:#f8fafc; border:1px solid #e6ecf2; border-radius:7px; padding:10px; font-family:var(--mono);
  font-size:12.5px; max-height:300px; overflow:auto}

/* ---------- lista IL ---------- */
.il-editor{display:flex; border:1px solid var(--linea); border-radius:8px; overflow:hidden; background:#fff; margin-top:8px}
.il-nums{margin:0; padding:10px 8px; background:#f1f5f9; color:#9aa5ae; text-align:right; font:13px/1.55 var(--mono);
  user-select:none; overflow:hidden; min-width:38px; height:380px}
#txtIL{flex:1; border:none; padding:10px; font:13px/1.55 var(--mono); height:380px; resize:vertical; outline:none;
  text-transform:uppercase; white-space:pre; overflow:auto}
#txtIL[readonly]{background:#f8fafc}

/* ---------- neumático ---------- */
.np-editor{display:grid; grid-template-columns:210px minmax(0,1fr); gap:12px}
@media (max-width:800px){ .np-editor{grid-template-columns:1fr} }
.np-paleta{border:1px solid var(--linea); border-radius:9px; padding:8px; background:#f8fafc; max-height:720px; overflow:auto}
.np-paleta h4{margin:8px 2px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--gris)}
.np-pieza{display:flex; align-items:center; gap:8px; width:100%; background:#fff; border:1px solid #dbe3ea;
  border-radius:7px; padding:4px 6px; margin-bottom:4px; cursor:pointer; text-align:left; font:12px "Segoe UI", sans-serif; color:#1d2731}
.np-pieza:hover{border-color:var(--azul2); background:#eef3f8}
.np-mini{width:54px; height:32px; flex:none}
.np-centro{min-width:0}
.np-props{display:flex; flex-wrap:wrap; gap:8px; align-items:center; min-height:36px; padding:6px 10px;
  border:1px solid #e6ecf2; border-radius:8px; margin-bottom:8px; font-size:12.5px; background:#fff}
.np-in{width:120px}
.np-in.corto{width:70px; font-family:var(--mono)}
.np-ej{display:inline-block; width:10px; height:10px; border-radius:50%; border:2px solid #2e6da4; vertical-align:middle}
.np-lienzo{overflow:auto; border:1px solid var(--linea); border-radius:9px; background:#fff; max-height:720px; touch-action:none}
.np-lienzo.np-ro{border:none; max-height:none; touch-action:auto}
.np-svg{display:block; user-select:none}
.np-punto{fill:#d5dde5}
.np-l{stroke:#1d2731; stroke-width:1.4}
.np-c{stroke:#1d2731; stroke-width:1.6; fill:#fff}
.np-mini .np-c, .np-mini .np-l{stroke-width:2}
.np-f, .np-relleno{fill:#1d2731}
.np-disc{stroke-dasharray:5 3}
.np-hit{fill:transparent; stroke:none}
.np-comp{cursor:move}
.np-comp:hover .np-hit{fill:#eef3f8}
.np-comp.sel .np-hit{fill:#e3eefa; stroke:var(--azul2); stroke-width:1.2; stroke-dasharray:4 3}
.np-etq{font:700 12px "Segoe UI", sans-serif; fill:#1f4e79}
.np-bob{font:700 10px var(--mono); fill:#b3261e}
.np-pnum{font:9px var(--mono); fill:#7a8794}
.np-texto{font:13px "Segoe UI", sans-serif; fill:#1d2731}
.np-puerto{fill:#fff; stroke:#2e6da4; stroke-width:1.6; cursor:crosshair}
.np-puerto:hover{fill:#a9c8e6}
.np-puerto.con{fill:#2e6da4}
.np-puerto.pend{fill:#f0a92e; stroke:#a8761b}
.np-ro .np-puerto{display:none}
.np-manguera{fill:none; stroke:#2e6da4; stroke-width:2}
.np-manguera.sel{stroke:#f0a92e; stroke-width:3}
.np-hit-m{fill:none; stroke:transparent; stroke-width:12; cursor:pointer}
.np-pend{stroke:#f0a92e; stroke-width:2; stroke-dasharray:6 4; pointer-events:none}

/* ---------- simulación del estudiante ---------- */
.al-sim{display:block; max-width:100%}
.al-sim-l{font:700 22px "Segoe UI", sans-serif; fill:var(--azul)}
.al-sim-cuerpo{fill:#eef3f8; stroke:#1d2731; stroke-width:1.5}
.al-sim-piston{fill:#5b6570}
.al-sim-vastago{fill:#9aa5ae; stroke:#5b6570}
.al-sim-sensor{fill:#fff; stroke:#a8761b; stroke-width:1.5}
.al-sim-sensor.on{fill:#f0a92e}
.al-sim-bob{fill:#fff; stroke:#2e9d5b; stroke-width:1.5}
.al-sim-bob.on{fill:#3fb36b}
.al-sim-t{font:11px var(--mono); fill:#5b6570}
.al-sim-tc{font:700 11px var(--mono); fill:#1d2731; text-anchor:middle}
.sim-paso.malo{background:#fdf1f0; outline:2px solid #e3b4b0}

/* ---------- revisión ---------- */
.rev-cab{margin-top:12px; font-size:14px}
.rev-lista{list-style:none; padding:0; margin:8px 0 0; display:flex; flex-direction:column; gap:6px}
.rev-lista li{padding:8px 12px; border-radius:7px; font-size:12.5px; display:flex; flex-direction:column; gap:2px}
.rev-lista li.ok{border-left:4px solid var(--ok); background:#eef7f1}
.rev-lista li.mal{border-left:4px solid var(--peligro); background:#fdf1f0}
.rev-lista li span{color:#5b6570}

/* ---------- panel del instructor ---------- */
.inst-salir{color:#fff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28)}
.inst-salir:hover{background:rgba(255,255,255,.25)}
.inst-ver{border:1px solid #a9c8e6; border-radius:10px; padding:14px; margin-top:14px; background:#fbfdff}
.inst-ver h3{margin-top:14px}
.inst-nota{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:10px}
.inst-nota textarea{width:100%; min-height:70px; padding:7px 9px; border:1px solid var(--linea); border-radius:7px; font-family:inherit}
.inst-tabla td{font-size:12.5px}
.lad-rapido{display:flex; flex-wrap:wrap; gap:4px; margin-top:8px}
.btn-dir{display:inline-flex; flex-direction:column; align-items:center; min-width:44px; padding:2px 6px;
  border:1px solid #cfd6dc; border-radius:6px; background:#fff; font:700 11.5px var(--mono); color:#1f4e79;
  cursor:pointer; line-height:1.2}
.btn-dir small{font:400 9px "Segoe UI", sans-serif; color:#7a8794; max-width:72px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.btn-dir:hover{background:#eef3f8; border-color:var(--azul2)}
.inst-area{width:100%; padding:7px 9px; border:1px solid var(--linea); border-radius:7px; font-family:inherit; font-size:13.5px; resize:vertical}
.inst-ver .columnas{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:1000px){ .inst-ver .columnas{grid-template-columns:1fr} }
tr.activa td{background:#eef3f8}
.lad-k{width:80px; padding:5px 7px; border:1px solid var(--linea); border-radius:6px; font-family:var(--mono)}
.lad-tiempo{margin:0; font-weight:700; color:var(--azul)}
.ejemplos-barra{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; margin:10px 0}
.ejemplos-barra .pista{margin:0; flex:1 1 260px}
.ref-h2u table{font-size:12px}
.ref-h2u td{padding:5px 8px; vertical-align:top}
.ref-h2u code{font-family:var(--mono); background:#eef3f8; padding:1px 5px; border-radius:4px; white-space:nowrap}
.inst-dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start}
@media (max-width:900px){ .inst-dos{grid-template-columns:1fr} }
.asig-valvulas{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:8px}
.asig-valvulas label{display:flex; align-items:center; gap:6px; font-size:12.5px}
.asig-valvulas b{font-size:15px; color:var(--azul)}
.chip-alumno{display:inline-block; margin:2px 4px 2px 0; padding:2px 8px; border-radius:12px; font-size:11.5px;
  border:1px solid #dbe3ea; background:#f8fafc}
.chip-alumno.entregado{background:#eef7f1; border-color:#9fd3b3; color:#14603a}
.chip-alumno.progreso{background:#fdf8e8; border-color:#e8d28a; color:#7a5c00}
.chip-alumno.falta{background:#fdf1f0; border-color:#e3b4b0; color:#8c1d18}
.al-metodo{font-size:13px; margin:-4px 0 10px; padding:6px 10px; border-left:4px solid var(--azul2);
  background:#f5f9fd; border-radius:4px}

/* que el atributo hidden siempre oculte, aunque la clase tenga display */
[hidden]{display:none !important}

.chip-alumno.tarde{background:#fdf8e8; border-color:#d18a2a; color:#7a5c00; font-weight:700}
.inp-fecha{padding:6px 8px; border:1px solid var(--linea); border-radius:7px; font-family:inherit}