/* =========================================================================
   simuladores.css — Fase 5. Depende de design-system.css.
   ========================================================================= */
.sim-wrap { padding-top: calc(var(--header-h) + 30px); }

.sim-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.6rem; }
.sim-tab { background: var(--surface); border: 1px solid var(--stroke-strong); color: var(--text-soft);
  border-radius: var(--radius-pill); padding: .55rem 1rem; font-size: .88rem; cursor: pointer; transition: all .25s; }
.sim-tab:hover { color:#fff; border-color: var(--c); }
.sim-tab.is-active { background: var(--c); border-color: var(--c); color:#fff; }

.sim-layout { display: grid; grid-template-columns: 360px 1fr; gap: 24px; padding-bottom: 80px; }
@media (max-width: 900px){ .sim-layout { grid-template-columns: 1fr; } }

.sim-panel { padding: 22px; }
.sim-panel h2 { font-size: 1.3rem; margin: 0 0 .3rem; }
.sim-panel .sub { color: var(--text-soft); font-size: .9rem; margin-bottom: 1.4rem; }

.sim-field { display: block; margin-bottom: 1.2rem; }
.sim-field__top { display: flex; justify-content: space-between; align-items: baseline; font-size: .88rem; color: var(--text-soft); margin-bottom: .4rem; }
.sim-field__top b { color: var(--text); font-family: var(--font-mono); }
.sim-field input[type=range] { width: 100%; }

.sim-result { display: flex; flex-direction: column; gap: 18px; }
.sim-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim-kpi { padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--stroke); }
.sim-kpi__label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.sim-kpi__value { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; background: var(--grad-plan-act); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sim-chart-card { padding: 18px; }
#sim-chart { min-height: 300px; }
.sim-rel-box { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--plan-soft); border: 1px solid rgba(0,112,184,.3); border-left: 3px solid var(--pdca-plan); }
.sim-rel-box strong { color: var(--pdca-plan); }
.sim-rel-box p { margin: .4rem 0 0; line-height: 1.55; font-size: .92rem; }