/* ============================================================
   DESIGN SYSTEM — Sistemas de Segunda Ordem
   ============================================================ */

/* ── Gráficos ─────────────────────────────────────────────── */
.grafico-container {
  background:    #1e293b;
  border:        1px solid #334155;
  border-radius: 0.75rem;
  padding:       1.25rem 1.5rem;
}

.grafico-titulo {
  font-size:     0.85rem;
  color:         #94a3b8;
  text-align:    center;
  margin-bottom: 0.75rem;
}

/* ── Texto LaTeX ──────────────────────────────────────────── */
.latex-output {
  color:       #e2e8f0;
  line-height: 1.75;
}

.latex-output h1 {
  font-size:   1.75rem;
  font-weight: 700;
  color:       #f1f5f9;
  margin-bottom: 0.5rem;
}

.latex-output h2 {
  font-size:     1.3rem;
  font-weight:   600;
  color:         #e2e8f0;
  border-bottom: 1px solid #334155;
  padding-bottom: 0.4rem;
  margin-top:    1.75rem;
  margin-bottom: 0.75rem;
}

.latex-output h3 {
  font-size:     1.1rem;
  font-weight:   600;
  color:         #cbd5e1;
  margin-top:    1.25rem;
  margin-bottom: 0.5rem;
}

.latex-output p {
  line-height:   1.75;
  color:         #e2e8f0;
  margin-bottom: 0.75rem;
}

.latex-output strong {
  color:       #f1f5f9;
  font-weight: 600;
}

.latex-output hr {
  border:     none;
  border-top: 1px solid #334155;
  margin:     1.5rem 0;
}

.latex-output ul {
  list-style-type: disc;
  padding-left:    1.75rem;
  margin-bottom:   0.75rem;
}

.latex-output ol {
  list-style-type: decimal;
  padding-left:    1.75rem;
  margin-bottom:   0.75rem;
}

.latex-output li {
  color:         #e2e8f0;
  margin-bottom: 0.4rem;
  line-height:   1.75;
}

.latex-output table {
  display:                    block;
  overflow-x:                 auto;
  -webkit-overflow-scrolling: touch;
  width:                      100%;
  border-collapse:            collapse;
  margin:                     1rem 0;
  font-size:                  0.875rem;
}

.latex-output th {
  background:    #1e293b;
  color:         #94a3b8;
  font-weight:   600;
  padding:       0.6rem 1rem;
  border:        1px solid #334155;
  text-align:    left;
}

.latex-output td {
  color:         #e2e8f0;
  padding:       0.6rem 1rem;
  border:        1px solid #334155;
  vertical-align: top;
}

.latex-output tbody tr:hover td {
  background: #1e293b55;
}

/* ── Modal ────────────────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.72);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background:    #1e293b;
  border:        1px solid #334155;
  border-radius: 0.75rem;
  padding:       1.5rem 1.75rem;
  max-width:     640px;
  width:         90%;
  max-height:    85vh;
  overflow-y:    auto;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   1.25rem;
  padding-bottom:  0.75rem;
  border-bottom:   1px solid #334155;
}

.modal-title {
  font-size:   1.05rem;
  font-weight: 600;
  color:       #f1f5f9;
}

.modal-close {
  font-size:   1.6rem;
  line-height: 1;
  color:       #64748b;
  background:  none;
  border:      none;
  cursor:      pointer;
  padding:     0 0.2rem;
  transition:  color 0.15s;
}
.modal-close:hover { color: #f1f5f9; }

.link-modal-btn {
  font-size:     0.72rem;
  font-weight:   500;
  color:         #818cf8;
  background:    transparent;
  border:        1px solid #4338ca;
  border-radius: 0.375rem;
  padding:       0.15rem 0.55rem;
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background 0.15s, color 0.15s;
}
.link-modal-btn:hover {
  background: #4338ca33;
  color:      #a5b4fc;
}

.latex-output .katex-display {
  background:    #0f172a;
  border:        1px solid #334155;
  border-radius: 0.5rem;
  padding:       0.75rem 1rem;
  overflow-x:    auto;
  margin:        1rem 0;
}

/* ── Abas ─────────────────────────────────────────────────── */
.tab-nav {
  display:        flex;
  flex-wrap:      wrap;
  gap:            0.375rem;
  background:     #1e293b;
  border:         1px solid #334155;
  border-radius:  0.75rem;
  padding:        0.375rem;
}

.tab-btn {
  flex:            1 1 auto;
  min-width:       0;
  padding:         0.55rem 1rem;
  border-radius:   0.5rem;
  font-size:       0.875rem;
  font-weight:     500;
  color:           #94a3b8;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  transition:      background 0.15s, color 0.15s;
  text-align:      center;
}

.tab-btn:hover {
  background: #334155;
  color:      #e2e8f0;
}

.tab-btn.active {
  background: #4f46e5;
  color:      #f1f5f9;
  font-weight: 600;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ── Inner tabs (regime examples) ────────────────────────── */
.inner-tab-nav {
  display:       flex;
  flex-wrap:     wrap;
  gap:           0.25rem;
  background:    #0f172a;
  border:        1px solid #1e293b;
  border-radius: 0.5rem;
  padding:       0.25rem;
  margin-bottom: 1.25rem;
}

.inner-tab-btn, .method-tab-btn {
  flex:        1 1 auto;
  min-width:   0;
  padding:     0.4rem 0.75rem;
  border-radius: 0.375rem;
  font-size:   0.8125rem;
  font-weight: 500;
  color:       #64748b;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  transition:  background 0.15s, color 0.15s;
  text-align:  center;
}

.inner-tab-btn:hover, .method-tab-btn:hover {
  background: #1e293b;
  color:      #cbd5e1;
}

.inner-tab-btn.active, .method-tab-btn.active {
  background:  #7c3aed;
  color:       #f1f5f9;
  font-weight: 600;
}

.inner-tab-panel {
  display: none;
}

.inner-tab-panel.active {
  display: block;
}

.rlc-method-panel {
  display: none;
}

.rlc-method-panel.active {
  display: block;
}

/* ── function-plot (dark) ─────────────────────────────────── */
.function-plot .x.axis text,
.function-plot .y.axis text {
  fill:        #94a3b8;
  font-family: "Inter", sans-serif;
  font-size:   12px;
}

.function-plot .x.axis path,
.function-plot .y.axis path,
.function-plot .x.axis line,
.function-plot .y.axis line {
  stroke: #475569;
}

.function-plot .grid line {
  stroke: #2d3f52;
}

.function-plot .canvas-container rect {
  fill: #1e293b;
}

/* ── Range sliders (dark) ─────────────────────────────────── */
.mm-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: #334155;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.mm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #64748b;
  cursor: pointer;
}
.mm-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #64748b;
  cursor: pointer;
}

/* ── Responsive overrides ───────────────────────────────── */
@media (max-width: 639px) {
  .tab-btn {
    font-size: 0.75rem;
    padding:   0.4rem 0.6rem;
  }
  .inner-tab-btn, .method-tab-btn {
    font-size: 0.7rem;
    padding:   0.3rem 0.5rem;
  }
  .grafico-container {
    padding: 1rem;
  }
  /* Slider layout: label on top, slider+value+unit below */
  .grid > div > .flex.flex-wrap {
    gap: 0.5rem;
  }
  .mm-slider {
    min-width: 5rem;
  }
}

/* ── Val box ─────────────────────────────────────────────── */
.val-box {
  min-width:   3.2rem;
  padding:     0.3rem 0.6rem;
  background:  #111827;
  border:      1px solid #334155;
  border-radius: 0.5rem;
  color:       #f1f5f9;
  font-size:   0.875rem;
  font-weight: 500;
  text-align:  center;
  white-space: nowrap;
  flex-shrink: 0;
}