/* HyperForge · capa visual: el marco de instrumento común a memoria viva, cristalizaciones y verificación (diseño v2).
   Sigue el tema de la página con los tokens de tokens.css (carbón o marfil; brasa = acción, verdín = verificado, rojo solo
   para fallas). Sin degradados, sin vidrio y sin recursos externos.
   (registro.css va enlazado en marco.html desde la integración del diseño.) */

.vis {
  --v-bg: var(--hf-fondo); --v-sup: var(--hf-panel); --v-sup-2: var(--hf-panel-2); --v-linea: var(--hf-linea);
  --v-viva: var(--hf-linea-2); --v-texto: var(--hf-texto); --v-apagado: var(--hf-tenue); --v-tenue: var(--hf-tenue);
  --v-azul: var(--hf-verdin-texto); --v-brasa: var(--hf-brasa-texto); --v-calor: var(--hf-brasa-texto);
  --v-bien: var(--hf-verdin-texto); --v-alerta: var(--hf-alerta-texto); --v-foco: var(--hf-foco); --v-facil: var(--hf-facil);
}
.vis .bajada { max-width: 62ch; color: var(--hf-tenue); margin: 0 0 var(--hf-e5); font: 400 var(--hf-t-base)/1.55 var(--hf-f-texto); }
.vis-eyebrow { display: block; font: 400 var(--hf-t-label)/1.4 var(--hf-f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--hf-tenue); margin-bottom: var(--hf-e2); }
.vis-aviso { border: 1px dashed var(--hf-linea-2); border-radius: var(--hf-r-fila); padding: var(--hf-e4); color: var(--hf-tenue);
  margin-bottom: var(--hf-e5); max-width: 70ch; }
.vis-inst { border: 1px solid var(--hf-linea); border-radius: var(--hf-r-tarjeta); background: var(--hf-panel); color: var(--hf-texto);
  overflow: hidden; }
.vis-cab { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--hf-e3) var(--hf-e4); padding: var(--hf-e4) var(--hf-e5);
  border-bottom: 1px solid var(--hf-linea); background: var(--hf-panel-2); }
.vis-cab .q { flex: 1 1 300px; min-width: 0; }
.vis-cab .q small { display: block; font: 400 var(--hf-t-xs)/1.4 var(--hf-f-mono); color: var(--hf-tenue); letter-spacing: var(--hf-track-label);
  text-transform: uppercase; }
.vis-cab input { width: 100%; min-height: 44px; margin-top: var(--hf-e2); padding: 0 var(--hf-e4); border: 1px solid var(--hf-linea-fuerte);
  border-radius: var(--hf-r-pildora); background: var(--hf-fondo); color: var(--hf-texto); font: 400 var(--hf-t-base) var(--hf-f-texto); }
.vis-cab input:focus { border-color: var(--hf-brasa); }
.vis-cab input:disabled { opacity: .6; }
.vis-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.vis-lienzo { position: relative; touch-action: pan-y; min-width: 0; background: var(--hf-panel); }
.vis-lienzo canvas { display: block; width: 100%; }
.vis-lado { border-left: 1px solid var(--hf-linea); background: var(--hf-panel-2); display: flex; flex-direction: column; min-width: 0; }

/* botones del instrumento: el principal es la pastilla brasa; el fantasma, borde punteado */
.vis-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--hf-e2); min-height: 44px; padding: 0 var(--hf-e5);
  border-radius: var(--hf-r-pildora); cursor: pointer; white-space: nowrap; border: 1px solid var(--hf-brasa); background: var(--hf-brasa);
  color: var(--hf-sobre-brasa); font: 600 var(--hf-t-sm) var(--hf-f-texto); word-spacing: var(--hf-ws-display);
  transition: transform var(--hf-dur-rapida) var(--hf-facil); }
.vis-boton:hover:not([disabled]) { transform: translateY(-2px); }
.vis-boton:active:not([disabled]) { transform: scale(.97); }
.vis-boton.fantasma { border: 1px dashed var(--hf-linea-fuerte); background: transparent; color: var(--hf-texto); }
.vis-boton[disabled] { opacity: .5; cursor: not-allowed; }
.vis :focus-visible { outline: 2px solid var(--hf-foco); outline-offset: 2px; }

/* medidor grande al lado de la forja y de la inspección */
.vis-medidor { padding: var(--hf-e5); display: grid; gap: var(--hf-e4); align-content: start; }
.vis-dato small { display: block; font: 400 var(--hf-t-label) var(--hf-f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hf-tenue); }
.vis-dato b { display: block; font: 600 clamp(2rem, 1.4rem + 2vw, 3rem)/1.05 var(--hf-f-display); font-feature-settings: 'tnum';
  word-spacing: var(--hf-ws-display); color: var(--hf-texto); }
.vis-dato s, .vis-dato i { font: 400 var(--hf-t-sm)/1.4 var(--hf-f-mono); color: var(--hf-tenue); font-style: normal; text-decoration: none; }
.vis-dato.brasa b { color: var(--hf-brasa-texto); } .vis-dato.azul b, .vis-dato.bien b { color: var(--hf-verdin-texto); }
.vis-dato.alerta b { color: var(--hf-alerta-texto); }
.vis-dato.sin b { color: var(--hf-tenue); font: 500 var(--hf-t-lg)/1.3 var(--hf-f-mono); }
.vis-chips { display: flex; flex-wrap: wrap; gap: var(--hf-e2); }
.vis-chips span { font: 500 var(--hf-t-xs) var(--hf-f-mono); padding: 6px 10px; border-radius: var(--hf-r-pildora); border: 1px dashed var(--hf-linea-2);
  color: var(--hf-tenue); transition: opacity var(--hf-dur-lenta); }
.vis-chips span.on { color: var(--hf-verdin-texto); border: 1px solid var(--hf-verdin); }
.vis-chips span.on.brasa { color: var(--hf-brasa-texto); border-color: var(--hf-brasa); }
.vis-pie { margin: var(--hf-e3) 0 0; font: 400 var(--hf-t-data)/1.6 var(--hf-f-mono); color: var(--hf-tenue); }
.vis-pie a { color: var(--hf-brasa-texto); }
.vis-lista { margin-top: var(--hf-e4); }
.vis-lista summary { cursor: pointer; color: var(--hf-tenue); font-size: var(--hf-t-sm); min-height: 44px; display: flex; align-items: center; }
.vis-lista ul { list-style: none; display: grid; gap: 4px; margin: var(--hf-e3) 0 0; padding: 0; font: 400 var(--hf-t-data)/1.5 var(--hf-f-mono); }
.vis-lista li { border-bottom: 1px dashed var(--hf-linea); padding: 4px 0; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .vis-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .vis-lado { border-left: 0; border-top: 1px solid var(--hf-linea); }
  .vis-medidor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vis-medidor .vis-chips, .vis-medidor .ancho { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .vis-cab { padding: var(--hf-e3); } .vis-medidor { padding: var(--hf-e4); } }
@media (prefers-reduced-motion: reduce) { .vis *, .vis *::before, .vis *::after { transition-duration: .01ms !important; animation: none !important; } }
.vis-titular, .vis-titular-v { color: var(--hf-texto); }