/* Laboratorio de hidráulica: complementos sobre comun/lab.css (misma paleta y componentes). */
.cargando-app { padding: 40px 0; color: var(--ink-2); }
/* Los hijos de grid/flex no deben crecer más que la pantalla por una tabla o una lista ancha (móvil). */
#app, .panel, .sim, .practica-h > *, .sim-grid > *, .graficas > * { min-width: 0; }
.graficas { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
/* El título oculto (.sr, absoluto) de las tablas no debe escapar del contenedor con scroll y ensanchar la página en móvil. */
.tabla-wrap { position: relative; }
.tabs { overflow-x: auto; scrollbar-width: thin; }
.tab { white-space: nowrap; }
.card .num.legado { background: var(--surface-2); color: var(--ink-2); }

/* Origen de la información */
.origen { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; margin-left: 6px; vertical-align: middle; text-transform: uppercase; letter-spacing: .03em; }
.origen.ficha { background: var(--ok-bg); color: var(--ok); }
.origen.comp { background: var(--info-bg); color: var(--brand-2); }
.origen.fab { background: var(--obs-bg); color: var(--obs); }
.origen.norma { background: var(--ok-bg); color: var(--brand); }
.origen.sup { background: var(--surface-2); color: var(--ink-2); }
.datos-sim { margin: 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; }
.datos-sim > summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.datos-sim .origen { margin-left: 0; }
.datos-sim td.num-c { white-space: nowrap; }
.kv { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--ink-2); font-weight: 600; font-size: .9rem; }
.kv dd { margin: 0; }

/* Despiece */
.despiece-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.info-pieza dl { margin: 6px 0 0; }
.info-pieza dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); font-weight: 700; margin-top: 8px; }
.info-pieza dd { margin: 2px 0 0; font-size: .92rem; }
.visor .error-3d { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: var(--ink-2); }
.visor .error-3d img { max-height: 60%; background: #fff; border-radius: 12px; padding: 8px; margin: 0 auto 10px; }
.parametros-3d { font-size: .82rem; color: var(--ink-2); background: var(--surface-2); border-radius: 10px; padding: 8px 10px; }

/* Simulación */
.sim-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: start; }
.sim-ctrl, .sim-vis, .sim-calc { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
.sim-ctrl .campos { grid-template-columns: 1fr; }
.sim-vis { padding: 8px; position: relative; }
canvas.anim { width: 100%; height: 340px; display: block; border-radius: 12px; background: var(--surface-2); }
.sim-calc { margin-top: 16px; }
.sim-calc h4:first-child { margin-top: 0; }
.ctl label { display: flex; justify-content: space-between; gap: 8px; }
.ctl-fila { display: grid; grid-template-columns: 1fr 130px; gap: 10px; align-items: center; }
.ctl-fila input[type="range"] { width: 100%; accent-color: var(--brand-2); }
.campo small { font-weight: 400; color: var(--ink-2); font-size: .75rem; }
.campo.invalido .in { border-color: var(--cal); background: var(--cal-bg); }
.campo.invalido small { color: var(--cal); }
.valvulas { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ecuacion { background: var(--surface-2); border-left: 4px solid var(--brand-2); border-radius: 8px; padding: 10px 14px; margin: 8px 0; overflow-x: auto; }
.ecuacion code { font: 600 1.02rem/1.5 "Cambria Math", "STIX Two Math", Georgia, serif; color: var(--ink); white-space: nowrap; }
.ecuacion small { display: block; color: var(--ink-2); margin-top: 4px; }
.proc { padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
.proc li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.proc-t { font-weight: 600; min-width: 180px; }
.proc code { font-family: "Cambria Math", Georgia, serif; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.proc-s { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.proc strong { font-variant-numeric: tabular-nums; }
.ayuda { border-radius: 12px; padding: 10px 14px; margin: 10px 0; border: 1px solid var(--line); background: var(--surface); border-left-width: 5px; }
.ayuda strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.ayuda p { margin: 4px 0 0; font-size: .93rem; }
.ayuda.sabias, .ayuda.concepto { border-left-color: var(--brand-2); }
.ayuda.ocurre, .ayuda.observa { border-left-color: var(--s3); }
.ayuda.error { border-left-color: var(--cal); }
.ayuda.consejo { border-left-color: var(--accent); }
.interpreta { background: var(--info-bg); border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.interpreta h4 { margin-top: 0; }
.interpreta p { margin: 6px 0; }
.comp .badge { min-width: 64px; text-align: center; }
.badge.ok, .badge.obs, .badge.cal { font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .sim-grid { grid-template-columns: 1fr; } canvas.anim { height: 260px; } }

/* Práctica guiada */
.practica-h { display: grid; grid-template-columns: 250px 1fr; gap: 16px; align-items: start; }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 10px; position: sticky; top: 76px; }
.pasos-lista button { width: 100%; text-align: left; display: flex; gap: 8px; align-items: flex-start; border: 0; background: none; color: var(--ink); font: inherit; font-size: .88rem; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.pasos-lista button:hover:not([disabled]) { background: var(--surface-2); }
.pasos-lista button[disabled] { color: var(--ink-2); opacity: .6; cursor: not-allowed; }
.pasos-lista button.on { background: var(--info-bg); font-weight: 700; }
.pasos-lista .ic { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--surface-2); color: var(--ink-2); }
.pasos-lista .hecho .ic { background: var(--ok); color: #fff; }
.paso-tipo { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-2); }
.paso-cuerpo h2 { margin-top: .2em; }
.bloqueo { color: var(--obs); font-weight: 600; }
.panel-sim { border: 1px dashed var(--line); border-radius: 16px; padding: 12px; margin-top: 14px; }
.panel-sim > summary { cursor: pointer; font-weight: 700; color: var(--brand); }
.lectura-actual { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
@media (max-width: 860px) { .practica-h { grid-template-columns: 1fr; } .pasos-lista { position: static; flex-direction: row; overflow-x: auto; } .pasos-lista button { white-space: nowrap; } .pasos-lista .txt { display: none; } }

/* Registro de datos y resultados */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.toolbar .sep { flex: 1; }
.tabla-ed td.calc { background: var(--surface-2); color: var(--ink-2); padding: 6px 10px; white-space: nowrap; }
.tabla-ed th small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.tabla-ed tr.invalida td:not(.calc) input { color: var(--cal); }
.graficas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }

/* Evaluación */
.eval { max-width: 820px; }
.eval .pregunta { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; margin: 12px 0; }
.eval .pregunta h3 { font-size: 1rem; }
.eval .ops { margin: 10px 0 0; }
.eval .exp { margin: 8px 0 0; font-size: .9rem; }

/* Equipo del laboratorio anterior */
.legado-nota { font-size: .85rem; color: var(--ink-2); }

@media print {
  .top, .pie, .tabs, .eq-nav, .toolbar, .pasos-lista, .migas { display: none !important; }
  body { background: #fff; }
}