.lab-suitebar{
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--border,#d6dde5);
  background:var(--panel,#fff);
}
.lab-suitebar-inner{
  width:min(1120px,calc(100% - 28px));
  margin:auto;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:7px 0;
}
.lab-suitebrand{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text,#1f2937);
  text-decoration:none;
  font-weight:800;
}
.lab-suitebrand-mark{
  width:29px;height:29px;border-radius:var(--r-sm,10px);
  display:grid;place-items:center;
  background:var(--accent,#2989b3);
  color:#fff;font-weight:800;font-size:.85rem;
}
.lab-suitenav{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.lab-suite-link,.lab-complete-btn{
  border:1px solid var(--border,#d6dde5);
  border-radius:var(--r-sm,10px);
  padding:6px 10px;
  background:var(--panel,#fff);
  color:var(--text,#1f2937);
  text-decoration:none;
  cursor:pointer;
  font:inherit;
  font-size:.86rem;
}
.lab-suite-link:hover,.lab-complete-btn:hover{border-color:var(--accent,#2989b3)}
.lab-complete-btn.is-complete{
  background:var(--accent,#2989b3);
  color:#fff;border-color:var(--accent,#2989b3);
}
@media(max-width:560px){
  .lab-suitebar-inner{align-items:flex-start}
  .lab-suitenav{width:100%}
  .lab-suite-link,.lab-complete-btn{flex:1;text-align:center}
}

/* --- Modo docente: clave de respuestas imprimible (compartido por los 6 módulos) --- */
.answer-key{margin-top:14px;padding:14px 16px;border:1px dashed var(--border,#c7ccd3);border-radius:var(--r-sm,10px)}
.answer-key h2{margin-top:0}
.answer-key p{margin:0 0 10px}
@media print{
  /* El botón "Clave de respuestas" mueve .answer-key a hijo directo de <body> y añade
     la clase print-answer-key SOLO durante esa impresión (ver JS). Sin la clase, la
     impresión normal de la página no se ve afectada. */
  body.print-answer-key>*:not(.answer-key){display:none!important}
  body.print-answer-key .answer-key{display:block!important;border:none;margin:0}
}

/* --- Tipografía Inter empaquetada localmente (antes solo se declaraba y nunca cargaba) --- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-latin-800-normal.woff2") format("woff2")}

/* --- Tokens de radio de borde (3 tamaños en vez de 10 valores dispersos) --- */
:root{--r-sm:10px;--r-md:14px;--r-lg:18px}

/* --- Impresión general: al imprimir la página completa (no la clave de respuestas),
       ocultar controles de navegación e interacción para dejar solo el contenido --- */
@media print{
  .tabs,.lab-suitebar,footer,button,.action-row{display:none!important}
}

/* --- Endurecimiento responsivo compartido --- */
canvas,svg,img,video{max-width:100%;height:auto}
.toolbar{flex-wrap:wrap}
@media(max-width:560px){
  .toolbar .btn,.toolbar button{flex:1 1 auto;min-width:0}
  input[type="range"]{min-height:28px}   /* objetivo táctil más cómodo */
}

/* --- Foco de teclado visible y consistente (antes dependía del outline por defecto
       del navegador, delgado e inconsistente, casi invisible sobre tarjetas oscuras) --- */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,
[tabindex]:focus-visible,.tab:focus-visible,.btn:focus-visible,.molbtn:focus-visible,
.era:focus-visible,.simcard:focus-visible,canvas:focus-visible{
  outline:3px solid var(--accent,#2989b3);
  outline-offset:2px;
  border-radius:var(--r-sm,10px);
}
/* no quitar el foco cuando el navegador no lo marca como :focus-visible, pero
   evitar el doble contorno feo en elementos que ya lo dibujan */
:focus:not(:focus-visible){outline:none}