/* SSR Company — simulador interativo de telemetria (página Telemetria)
   Usa as variáveis e classes já existentes em style.css. */

.sim {
    background: #0E2550; border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px; color: #C9DAF2; font-family: var(--mono);
    box-shadow: 0 24px 50px rgba(11, 31, 63, .28);
    overflow: hidden;
}

/* ---------- abas de processo ---------- */
.sim-tabs {
    display: flex; gap: .4rem; padding: .9rem 1rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    overflow-x: auto; scrollbar-width: thin;
}
.sim-tab {
    position: relative; flex: none; cursor: pointer;
    padding: .7rem 1.2rem .8rem; border: 0; border-bottom: 3px solid transparent;
    background: transparent; color: #8FA9D0;
    font: 600 .88rem var(--display);
    transition: color .2s, border-color .2s, background .2s;
}
.sim-tab:hover { color: #fff; }
.sim-tab[aria-selected="true"] { color: #fff; border-bottom-color: var(--yellow); background: rgba(255, 255, 255, .06); border-radius: 8px 8px 0 0; }
.sim-tab.alarm::after {
    content: ''; display: inline-block; width: 8px; height: 8px; margin-left: .55rem;
    border-radius: 50%; background: #FF6B5B; box-shadow: 0 0 0 3px rgba(255, 107, 91, .22);
    vertical-align: middle;
}

/* ---------- corpo ---------- */
.sim-body { display: grid; grid-template-columns: 1.7fr 1fr; }
.sim-main { padding: 1.5rem 1.6rem 1.4rem; min-width: 0; }
.sim-side { padding: 1.5rem 1.6rem 1.4rem; border-left: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .12); display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }

.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .78rem; }
.sim-head strong { color: #fff; font: 600 .98rem var(--display); }
.sim-chip {
    display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem;
    border-radius: 999px; font-size: .74rem; font-weight: 500; white-space: nowrap;
    color: #5BE49B; background: rgba(91, 228, 155, .12);
}
.sim-chip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sim-chip.alarm { color: #FF8A7B; background: rgba(255, 107, 91, .16); }
.sim-chip.paused { color: #A9BFDF; background: rgba(255, 255, 255, .1); }

.sim-value { display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0 .4rem; }
.sim-value b { font-size: clamp(2.8rem, 6vw, 3.8rem); line-height: 1; color: #fff; font-weight: 500; letter-spacing: -.03em; transition: color .2s; }
.sim-value span { color: #8FA9D0; font-size: 1.05rem; }
.sim.is-alarm .sim-value b { color: #FF8A7B; }

/* gráfico */
.sim-chart { position: relative; margin: .8rem 0 1.1rem; padding-left: 2.6rem; touch-action: pan-y; cursor: crosshair; }
.sim-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.sim-grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sim-ax { position: absolute; left: 0; font-size: .66rem; color: #6F89B3; }
.sim-ax.top { top: -.4rem; }
.sim-ax.bot { bottom: -.4rem; }
.sim-limit { position: absolute; right: 0; transform: translateY(-115%); font-size: .68rem; color: var(--yellow); pointer-events: none; }
.sim.is-alarm .trace { stroke: #FF8A7B; }
.sim-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .35); pointer-events: none; display: none; }
.sim-pt { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(242, 194, 0, .25); pointer-events: none; display: none; }
.sim-tip {
    position: absolute; top: -.2rem; padding: .35rem .6rem; border-radius: 6px;
    background: #fff; color: var(--navy); font-size: .74rem; font-weight: 500; white-space: nowrap;
    pointer-events: none; display: none; z-index: 3; box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.sim-chart.hover .sim-cross, .sim-chart.hover .sim-pt, .sim-chart.hover .sim-tip { display: block; }

.sim-reads { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 1rem; }
.sim-reads small { display: block; font-size: .7rem; color: #8FA9D0; }
.sim-reads b { font-size: 1.05rem; color: #fff; font-weight: 500; }

/* ---------- controles ---------- */
.sim-ctl label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .8rem; color: #C9DAF2; margin-bottom: .6rem; }
.sim-ctl output { color: var(--yellow); font-weight: 500; font-size: .92rem; }
.sim-ctl input[type="range"] { width: 100%; accent-color: var(--yellow); cursor: pointer; }
.sim-ctl p { margin-top: .5rem; font-size: .7rem; color: #8FA9D0; }

.sim-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.sim-btn {
    flex: 1 1 auto; cursor: pointer; padding: .7rem 1rem; border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, .3); background: transparent; color: #fff;
    font: 600 .85rem var(--display); transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.sim-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.sim-btn.primary { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.sim-btn.primary:hover { background: #FFD21F; color: var(--navy); transform: translateY(-1px); }

.sim-range { display: inline-flex; align-self: flex-start; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; padding: 3px; gap: 2px; }
.sim-range button { cursor: pointer; border: 0; border-radius: 999px; padding: .35rem .9rem; background: transparent; color: #A9BFDF; font: 500 .78rem var(--mono); }
.sim-range button[aria-pressed="true"] { background: rgba(255, 255, 255, .16); color: #fff; }

.sim-logbox { display: flex; flex-direction: column; min-height: 0; }
.sim-logtitle { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .6rem; font-size: .74rem; color: #8FA9D0; }
.sim-logtitle h3 { color: #fff; font: 600 .95rem var(--display); }
.sim-logtitle b { color: #fff; font-weight: 500; }
.sim-log { list-style: none; display: grid; gap: .45rem; min-height: 9rem; align-content: start; }
.sim-log li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding: .55rem .7rem; border-radius: 6px; background: rgba(255, 255, 255, .06); border-left: 3px solid #5BE49B; font-size: .74rem; line-height: 1.45; }
.sim-log li.alarm { border-left-color: #FF6B5B; background: rgba(255, 107, 91, .1); }
.sim-log time { color: #8FA9D0; }
.sim-log li.vazio { display: block; background: none; border-left: 0; color: #8FA9D0; padding: .2rem 0; }
@media (prefers-reduced-motion: no-preference) {
    .sim-log li.novo { animation: simIn .35s ease-out; }
    .sim.is-alarm { animation: simAlarm 1.6s ease-in-out infinite; }
}
@keyframes simIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes simAlarm { 50% { box-shadow: 0 24px 50px rgba(11, 31, 63, .28), 0 0 0 3px rgba(255, 107, 91, .45); } }

.sim-note { padding: .8rem 1.6rem 1rem; font-size: .7rem; color: #6F89B3; border-top: 1px solid rgba(255, 255, 255, .1); }

@media (max-width: 900px) {
    .sim-body { grid-template-columns: 1fr; }
    .sim-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
}
@media (max-width: 560px) {
    .sim-main, .sim-side { padding: 1.2rem 1rem; }
    .sim-btn { width: auto; }
    .sim-chart svg { height: 160px; }
}