/*
 * Tarjetas Mablo del chat (simuladores y visuales propios). Mismo lenguaje que las
 * tarjetas de diagrama de chat.css: claro, borde fino, radio 18/14. La escena del
 * simulador es oscura a propósito para que el lazo animado destaque.
 * Los tokens viven en la propia tarjeta/diálogo porque el modal cuelga de <body>.
 */
.mb-card,
.mb-modal {
  --mb-ink: #0f172a;
  --mb-muted: #64748b;
  --mb-border: #e2e8f0;
  --mb-blue: #2563eb;
  --mb-ok: #166534;
  --mb-ok-soft: #dcfce7;
  --mb-warn: #92400e;
  --mb-warn-soft: #fef3c7;
  --mb-fail: #991b1b;
  --mb-fail-soft: #fee2e2;
  --mb-scene: #17303f;
  box-sizing: border-box;
  min-width: 0;
  color: #334155;
  background: #fff;
  border: 1px solid var(--mb-border);
  border-radius: 18px;
  font: 400 13px/1.5 Arial, sans-serif;
  overflow: hidden;
}

.mb-card { margin: 20px 0; box-shadow: 0 3px 18px rgb(15 23 42 / 4%); }
.mb-card-header { position: relative; padding: 18px 20px 14px; background: linear-gradient(125deg, #f8fbff, #fff 75%); }
.mb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mb-eyebrow { display: block; color: var(--mb-blue); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mb-card .mb-card-title,
.mb-modal .mb-card-title { margin: 6px 0 0; padding: 0; color: var(--mb-ink); font-size: 16px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.mb-card .mb-card-subtitle,
.mb-modal .mb-card-subtitle { margin: 4px 0 0; color: var(--mb-muted); font-size: 12px; line-height: 1.5; }

.mb-sim-status { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--mb-ok-soft); color: var(--mb-ok); transition: background-color .2s, color .2s; }
.mb-sim-status[hidden] { display: none; }
.mb-sim-status[data-level="warn"] { background: var(--mb-warn-soft); color: var(--mb-warn); }
.mb-sim-status[data-level="fail"] { background: var(--mb-fail-soft); color: var(--mb-fail); }

.mb-sim { display: flex; flex-direction: column; gap: 16px; padding: 4px 20px 18px; }
.mb-sim-readouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; text-align: center; }
.mb-sim-readout { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.mb-sim-readout-label { color: var(--mb-muted); font-size: 12px; }
.mb-sim-readout-value { color: var(--mb-ink); font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.mb-sim-readout-unit { color: var(--mb-muted); font-size: 11px; font-weight: 700; min-height: 14px; }

.mb-sim-scene { border-radius: 18px; background: var(--mb-scene); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%), inset 0 -40px 60px rgb(0 0 0 / 14%); overflow: hidden; }
.mb-sim-svg { display: block; width: 100%; height: auto; }
.mb-wire { fill: none; stroke: #8fb0c4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s; }
.mb-wire.is-off { stroke: #4b6372; stroke-dasharray: 6 8; }
.mb-wire-flow { fill: none; stroke: #fcd34d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .1 18; opacity: 0; filter: none; }
.mb-wire-flow.is-active { opacity: 1; animation: mb-flow var(--mb-flow-duration, 1.6s) linear infinite; }
.mb-dot { fill: #fcd34d; stroke: var(--mb-scene); stroke-width: 2; }
.mb-node-box { fill: #35657f; stroke: #9fcbe3; stroke-width: 2; }
.mb-role-equipo .mb-node-box { fill: #3a6a84; stroke: #9fcbe3; }
.mb-role-control .mb-node-box { fill: #35547f; stroke: #9db8e3; }
.mb-role-fuente .mb-node-box { fill: #2f6b58; stroke: #8fd9bd; }
.mb-role-sensor .mb-node-box { fill: #2f6577; stroke: #8ed3e3; }
.mb-role-accion .mb-node-box { fill: #2f6b4a; stroke: #8fe0b0; }
.mb-role-fallo .mb-node-box { fill: #7c3333; stroke: #f1a3a3; }
.mb-role-atencion .mb-node-box { fill: #7a5a1c; stroke: #f3d68a; }
.mb-role-dato .mb-node-box { fill: #334155; stroke: #94a3b8; }
.mb-node-label { fill: #e8f1f6; font: 600 17px Arial, sans-serif; }
.mb-node-sub,
.mb-scene-caption,
.mb-scene-text { fill: #b9ccd8; font: 400 13px Arial, sans-serif; }
.mb-scene-caption { font-size: 14px; fill: #c7d7e1; }
.mb-node-value { fill: #86efac; font: 700 22px Arial, sans-serif; font-variant-numeric: tabular-nums; transition: fill .2s; }
.mb-sim-svg[data-tone="warn"] .mb-node-value { fill: #fcd34d; }
.mb-sim-svg[data-tone="fail"] .mb-node-value { fill: #fca5a5; }
.mb-gauge-track { fill: none; stroke: #2c4757; stroke-width: 10; stroke-linecap: round; }
.mb-gauge-fill { fill: none; stroke: #86efac; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .25s; }
.mb-sim-svg[data-tone="warn"] .mb-gauge-fill { stroke: #fcd34d; }
.mb-sim-svg[data-tone="fail"] .mb-gauge-fill { stroke: #fca5a5; }
.mb-tank-frame { fill: #1e3a4b; stroke: #9fcbe3; stroke-width: 2; }
.mb-tank-liquid { fill: #38bdf8; opacity: .85; transition: y .25s, height .25s; }
.mb-led-lamp { fill: #334155; stroke: #94a3b8; stroke-width: 2; transition: fill .2s; }
.mb-led-lamp.is-on { fill: #86efac; }
.mb-led.mb-role-fallo .mb-led-lamp.is-on { fill: #fca5a5; }
.mb-led.mb-role-atencion .mb-led-lamp.is-on { fill: #fcd34d; }
@keyframes mb-flow { to { stroke-dashoffset: -18.1; } }

.mb-sim-controls { display: flex; flex-direction: column; gap: 14px; }
.mb-sim-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mb-sim-label { color: var(--mb-ink); font-size: 13px; font-weight: 650; }
.mb-sim-output { color: var(--mb-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mb-sim-ends { display: flex; justify-content: space-between; gap: 12px; color: var(--mb-muted); font-size: 11px; }
.mb-sim-group-title { color: var(--mb-ink); font-size: 12px; font-weight: 650; }
.mb-sim-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.mb-sim-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mb-sim-field .mb-sim-label { color: var(--mb-muted); font-size: 12px; font-weight: 500; }
/* Doble clase: el plugin de formularios de Tailwind (cargado después) iguala la especificidad de [type=number]. */
.mb-sim .mb-sim-number { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid #d9e0e8; border-radius: 999px; color: var(--mb-ink); background: #fff; font: 500 14px Arial, sans-serif; box-shadow: none; }
.mb-sim .mb-sim-number:focus { border-color: #93c5fd; }
.mb-sim-number:focus-visible,
.mb-sim-button:focus-visible,
.mb-button:focus-visible,
.mb-icon-button:focus-visible,
.mb-sim-range:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.mb-sim-toggle { width: 44px; height: 28px; accent-color: var(--mb-blue); }
.mb-sim-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 32px; margin: 4px 0 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.mb-sim-range::-webkit-slider-runnable-track { height: 14px; border-radius: 999px; background: #eef2f6; }
.mb-sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -7px; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgb(15 23 42 / 22%); }
.mb-sim-range::-moz-range-track { height: 14px; border-radius: 999px; background: #eef2f6; }
.mb-sim-range::-moz-range-thumb { width: 26px; height: 26px; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgb(15 23 42 / 22%); }
.mb-sim .is-overridden { opacity: .55; }

.mb-sim-fault-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; margin-top: 8px; }
.mb-sim-faults { display: flex; flex-direction: column; }
.mb-sim-button,
.mb-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border: 1px solid #d9e0e8; border-radius: 999px; color: #475569; background: #fff; font: 600 13px/1.2 Arial, sans-serif; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.mb-sim-button:hover,
.mb-button:hover { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.mb-sim-button.is-active { background: var(--mb-fail-soft); border-color: #fca5a5; color: var(--mb-fail); }
.mb-sim-button-reset { color: var(--mb-ink); }

.mb-sim-interpretation { padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #edf2f7; }
.mb-sim-interpretation[hidden] { display: none; }
.mb-sim .mb-sim-interpretation-title { display: block; margin-bottom: 4px; color: var(--mb-ink); font-size: 13px; font-weight: 650; }
.mb-sim .mb-sim-interpretation-text p { margin: 4px 0 0; color: #334155; font-size: 13px; line-height: 1.55; }

.mb-card .mb-note,
.mb-modal .mb-note { margin: 0; padding: 12px 20px; border-top: 1px solid #edf2f7; color: var(--mb-muted); font: 400 11px/1.6 Arial, sans-serif; }
.mb-details { border-top: 1px solid #edf2f7; background: #f8fafc; padding: 0 20px; }
.mb-details summary { padding: 11px 0; color: var(--mb-muted); font-size: 11px; cursor: pointer; }
.mb-details summary:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.mb-card .mb-details p,
.mb-card .mb-details ul,
.mb-modal .mb-details p,
.mb-modal .mb-details ul { margin: 0 0 10px; padding-left: 0; color: #475569; font-size: 12px; line-height: 1.55; list-style: none; }
.mb-card .mb-details strong,
.mb-modal .mb-details strong { display: block; margin-top: 4px; color: var(--mb-ink); font-size: 12px; }
.mb-card .mb-details pre { margin: 0 0 12px; max-height: 240px; padding: 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: var(--mb-ink); font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-card-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid #edf2f7; }
.mb-button { min-height: 40px; padding: 0 16px; font-size: 12px; }

.mb-placeholder { display: flex; min-height: 120px; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: var(--mb-muted); font-size: 12px; background: #f8fafc; }
.mb-loading-mark { width: 18px; height: 18px; border: 2px solid #dbeafe; border-top-color: #3b82f6; border-radius: 50%; animation: mb-spin 1s linear infinite; }
.mb-fallback { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #f8fafc; }
.mb-fallback strong { color: #475569; font-size: 12px; font-weight: 650; }
@keyframes mb-spin { to { transform: rotate(360deg); } }

.mb-modal { position: fixed; inset: 0; width: min(920px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow-y: auto; box-shadow: 0 24px 80px rgb(15 23 42 / 20%); }
.mb-modal::backdrop { background: rgb(15 23 42 / 48%); backdrop-filter: blur(4px); }
.mb-icon-button { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #475569; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }
.mb-icon-button:hover { background: #eff6ff; color: #1d4ed8; }
.mb-modal .mb-card-header { padding-right: 60px; }

/* ---- mablo-visual: procedimientos y árboles de diagnóstico ---- */
.mb-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mb-chip-documented { background: var(--mb-ok-soft); color: var(--mb-ok); }
.mb-chip-provided { background: #dbeafe; color: #1e40af; }
.mb-chip-history { background: #ede9fe; color: #5b21b6; }
.mb-chip-web { background: var(--mb-warn-soft); color: var(--mb-warn); }
.mb-chip-derived { background: #e0f2fe; color: #075985; }

.mb-card-visual .mb-role-equipo, .mb-modal .mb-role-equipo { --mb-role: #3b82f6; --mb-role-soft: #dbeafe; }
.mb-card-visual .mb-role-sensor, .mb-modal .mb-role-sensor { --mb-role: #0891b2; --mb-role-soft: #cffafe; }
.mb-card-visual .mb-role-control, .mb-modal .mb-role-control { --mb-role: #6366f1; --mb-role-soft: #e0e7ff; }
.mb-card-visual .mb-role-accion, .mb-modal .mb-role-accion { --mb-role: #22c55e; --mb-role-soft: #dcfce7; }
.mb-card-visual .mb-role-fuente, .mb-modal .mb-role-fuente { --mb-role: #10b981; --mb-role-soft: #d1fae5; }
.mb-card-visual .mb-role-fallo, .mb-modal .mb-role-fallo { --mb-role: #ef4444; --mb-role-soft: #fee2e2; }
.mb-card-visual .mb-role-atencion, .mb-modal .mb-role-atencion { --mb-role: #f59e0b; --mb-role-soft: #fef3c7; }
.mb-card-visual .mb-role-dato, .mb-modal .mb-role-dato { --mb-role: #94a3b8; --mb-role-soft: #f1f5f9; }

.mb-visual-body { padding: 4px 20px 16px; }
.mb-card .mb-progress,
.mb-modal .mb-progress { min-height: 18px; margin: 0 0 8px; color: var(--mb-muted); font-size: 12px; }
.mb-card .mb-steps,
.mb-modal .mb-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mb-card .mb-step,
.mb-modal .mb-step { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--mb-border); border-left: 4px solid var(--mb-role, #94a3b8); border-radius: 14px; background: #fff; }
.mb-step.is-done { background: #f8fafc; }
.mb-step.is-done .mb-item-label { color: var(--mb-muted); text-decoration: line-through; }
.mb-step-mark { position: relative; flex: none; width: 34px; height: 34px; padding: 0; border: 1.5px solid var(--mb-role, #94a3b8); border-radius: 50%; background: var(--mb-role-soft, #f1f5f9); color: var(--mb-ink); font: 700 13px/1 Arial, sans-serif; cursor: pointer; }
.mb-step-mark::before { content: ''; position: absolute; inset: -6px; }
.mb-step-mark[aria-pressed="true"] { background: #22c55e; border-color: #22c55e; color: #fff; }
.mb-step-mark:focus-visible,
.mb-branch-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.mb-item-body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.mb-item-label { color: var(--mb-ink); font-size: 15px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.mb-item-detail { color: #475569; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.mb-item-source { align-self: flex-start; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: var(--mb-muted); font-size: 11px; }

.mb-card .mb-tree,
.mb-card .mb-branch,
.mb-modal .mb-tree,
.mb-modal .mb-branch { margin: 0; padding: 0; list-style: none; }
.mb-card .mb-branch,
.mb-modal .mb-branch { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 0 15px; padding-left: 16px; border-left: 2px solid #e2e8f0; }
.mb-branch[hidden] { display: none; }
.mb-node { margin: 0; }
.mb-edge-label { display: inline-block; margin: 0 0 5px; padding: 1px 9px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: 11px; font-weight: 700; }
.mb-node-card { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid var(--mb-border); border-left: 4px solid var(--mb-role, #94a3b8); border-radius: 14px; background: #fff; }
.mb-node.is-root > .mb-node-card { background: var(--mb-role-soft, #f1f5f9); }
.mb-branch-toggle { position: relative; flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.mb-branch-toggle::before { content: ''; position: absolute; inset: -10px; }
.mb-branch-toggle::after { content: ''; position: absolute; top: 6px; left: 8px; width: 6px; height: 6px; border-right: 2px solid #64748b; border-bottom: 2px solid #64748b; transform: rotate(45deg); transition: transform .15s; }
.mb-branch-toggle[aria-expanded="false"]::after { transform: rotate(-45deg); top: 8px; }

.mb-card-actions { flex-wrap: wrap; align-items: center; }
.mb-action-status { margin-right: auto; color: var(--mb-muted); font-size: 12px; }
.mb-confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mb-confirm[hidden],
.mb-button[hidden] { display: none; }
.mb-confirm-question { color: var(--mb-ink); font-size: 12px; font-weight: 600; }
.mb-button-primary { border-color: var(--mb-blue); background: var(--mb-blue); color: #fff; }
.mb-button-primary:hover:not(:disabled) { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.mb-button:disabled { opacity: .6; cursor: default; }

@media (max-width: 520px) {
  .mb-card { border-radius: 14px; }
  .mb-card-header { padding: 16px 16px 12px; }
  .mb-sim { padding: 4px 16px 16px; }
  .mb-visual-body { padding: 4px 16px 14px; }
  .mb-card .mb-branch,
  .mb-modal .mb-branch { margin-left: 10px; padding-left: 12px; }
  .mb-sim-readout-value { font-size: 24px; }
  /* El SVG se reduce con el ancho de la tarjeta: en móvil se compensa el texto de la escena. */
  .mb-node-label { font-size: 21px; }
  .mb-node-value { font-size: 26px; }
  .mb-node-sub,
  .mb-scene-text { font-size: 18px; }
  .mb-scene-caption { font-size: 19px; }
  .mb-details { padding: 0 16px; }
  .mb-card .mb-note,
  .mb-modal .mb-note { padding-inline: 16px; }
  .mb-modal { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  .mb-wire-flow.is-active,
  .mb-loading-mark { animation: none; }
  .mb-branch-toggle::after { transition: none; }
  .mb-wire-flow.is-active { stroke-dasharray: 2 10; }
  .mb-sim-status,
  .mb-tank-liquid,
  .mb-gauge-fill,
  .mb-sim-button,
  .mb-button { transition: none; }
}