/* Estilo común de simuladores FQ (sin CDN) */
:root { --azul:#0369a1; --azul-osc:#0c4a6e; --tinta:#0f172a; --gris:#475569; --linea:#cbd5e1; --suave:#f1f5f9; --ok:#047857; --mal:#b91c1c; --naranja:#c2410c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Arial, sans-serif; color: var(--tinta); background: #f8fafc; }
header.sim-h { background: var(--azul); color:#fff; padding: .7rem 1rem; }
header.sim-h h1 { margin:0; font-size: 1.15rem; }
header.sim-h p { margin:.15rem 0 0; opacity:.9; font-size:.9rem; }
main.sim-m { max-width: 1100px; margin: 0 auto; padding: .8rem; display: grid; gap: .8rem; }
.panel { background:#fff; border:1px solid var(--linea); border-radius: 12px; padding: .8rem 1rem; }
.panel h2 { margin: 0 0 .5rem; font-size: 1rem; color: var(--azul-osc); }
.fila { display:flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.dos-col { display:grid; gap:.8rem; }
@media (min-width: 860px) { .dos-col { grid-template-columns: 1.3fr 1fr; } }
button, select, input { font: inherit; }
button.b { min-height: 40px; padding: .4rem .9rem; border-radius: 10px; border: 2px solid var(--azul); background: #fff; color: var(--azul); font-weight: 700; cursor: pointer; }
button.b.prim { background: var(--azul); color: #fff; }
button.b[aria-pressed="true"] { background: var(--azul); color: #fff; }
button.b:disabled { opacity: .5; cursor: default; }
label.ctl { display:grid; gap:.2rem; font-size:.9rem; color: var(--gris); }
input[type=range] { width: 100%; }
canvas { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--linea); border-radius: 10px; }
.dato { font-size: 1.6rem; font-weight: 800; color: var(--azul-osc); }
.nota { font-size: .88rem; color: var(--gris); }
.aviso { background:#fff7ed; border:1px solid #fdba74; border-radius:10px; padding:.6rem .8rem; font-size:.92rem; }
.ok { color: var(--ok); font-weight: 700; } .mal { color: var(--mal); font-weight: 700; }
table.t { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.t th, table.t td { border: 1px solid var(--linea); padding: .25rem .45rem; text-align: center; }
table.t th { background: var(--suave); }
.scroll { max-height: 260px; overflow: auto; }
.pild { display:inline-block; padding:.15rem .6rem; border-radius:999px; background: var(--suave); border:1px solid var(--linea); font-weight:700; font-size:.85rem; }
footer.sim-f { text-align:center; font-size:.8rem; color: var(--gris); padding: .6rem; }
[hidden] { display: none !important; }