/* fase05.css: estilos propios de esta parte. Usa los tokens de temas.css (var(--…)); los componentes comunes están en componentes.css. */

/* Consola de los bancos de ejecución (/h/js, /h/ts, /h/python, /h/sandbox) */
.consola {
  max-height: 26rem;
  min-height: 7rem;
  overflow: auto;
  padding: 10px 12px;
  border-radius: var(--radio-s);
  border: 1px solid var(--borde);
  background: var(--hundido);
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.consola:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.consola-vacia { margin: 0; color: var(--tenue); font-family: var(--sans); }
.linea-consola { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1px 0; border-bottom: 1px solid color-mix(in srgb, var(--borde) 45%, transparent); }
.linea-consola:last-child { border-bottom: 0; }
.linea-consola.nivel-error, .linea-consola.nivel-err { color: var(--error); }
.linea-consola.nivel-aviso { color: var(--atencion); }
.linea-consola.nivel-info { color: var(--info); }
.linea-consola.nivel-debug, .linea-consola.nivel-sistema { color: var(--tenue); }
.linea-consola.nivel-sistema { font-family: var(--sans); font-style: italic; }
.linea-consola.nivel-resultado { color: var(--ok); }

/* Botón de carga de lo pesado: el peso va escrito al lado, no en letra pequeña */
.boton .peso { margin-left: 6px; font-weight: 500; opacity: 0.8; font-size: var(--t-xs); }

/* Vista previa aislada de /h/sandbox: el documento del visitante lleva su propio fondo */
.vista-aislada { display: block; width: 100%; height: 26rem; border: 1px solid var(--borde); border-radius: var(--radio-s); background: #fff; }
.rejilla-sandbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--canalon, 16px); }
@media (max-width: 960px) { .rejilla-sandbox { grid-template-columns: minmax(0, 1fr); } }

/* Resultados de /h/sql y diagnósticos de /h/ts */
.resultado-sql + .resultado-sql { margin-top: 14px; }
.resultado-sql .sentencia { margin: 0 0 6px; font-family: var(--mono); font-size: var(--t-xxs); color: var(--tenue); white-space: pre-wrap; overflow-wrap: anywhere; }
.resultado-sql td.nulo { color: var(--tenue); font-style: italic; }
.esquema-sql { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: var(--t-xs); }
.esquema-sql button { font-family: var(--mono); }
.diagnosticos { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-s); }
.diagnosticos .donde { font-family: var(--mono); font-size: var(--t-xs); color: var(--tenue); margin-right: 6px; }