/* ============================================================
   modelo.css — Modelo de Proyección | SolBESS Design System
   Integrates with 00_tokens.css / 10_base.css / 30_components.css
   ============================================================ */

/* ── Page layout ────────────────────────────────────────────────────── */
.modelo-page {
  display: flex; flex-direction: column; gap: var(--gap-stack);
  padding: var(--gap-stack) 18px 40px;
  max-width: 1520px; margin: 0 auto;
}

/* ── Top bar — project identity ──────────────────────────────────────── */
.modelo-top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.modelo-top__title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 700;
  color: var(--sb-blue-700); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.modelo-top__meta {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-mute);
  white-space: nowrap;
}

/* ── Cards — match sb-card from 30_components.css ───────────────────── */
.modelo-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.modelo-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
}
.modelo-card__title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: var(--sb-blue-700);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.modelo-card__body {
  padding: 16px;
  overflow: visible; /* allow dropdown menus to render outside */
}

/* ── Form grid — replaces modelo-grid ────────────────────────────────── */
.modelo-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px 14px;
  margin-bottom: 14px;
}
.modelo-form-grid:last-child { margin-bottom: 0; }

.modelo-field { display: flex; flex-direction: column; gap: 3px; }
.modelo-field--2 { grid-column: span 2; }
.modelo-field--3 { grid-column: span 3; }
.modelo-field--4 { grid-column: span 4; }
.modelo-field--6 { grid-column: span 6; }
.modelo-field--12{ grid-column: span 12; }

.modelo-field__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); font-weight: 700;
}

.modelo-section-title {
  font-family: var(--font-display);
  font-size: 0.75rem; font-weight: 700;
  color: var(--text-soft);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--grid-line);
}

/* ── Inputs — match existing dash overrides ──────────────────────────── */
.modelo-field .dash-input,
.modelo-field input[type="number"],
.modelo-field input[type="text"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--panel) !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-family: var(--font-body) !important;
  color: var(--text) !important;
  width: 100%; height: 30px;
}
.modelo-field .dash-input:focus,
.modelo-field input:focus {
  border-color: var(--sb-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(46,154,255,.12) !important;
  outline: none;
}

/* ── Toggle (checklist) ───────────────────────────────────────────────── */
.modelo-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sb-red-soft); color: var(--sb-red);
  border: 1px solid var(--sb-red);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; font-weight: 600;
}
.modelo-toggle .form-check-input:checked {
  background-color: var(--sb-red) !important;
  border-color: var(--sb-red) !important;
}

/* ── Project selector row ────────────────────────────────────────────── */
.modelo-proj-row {
  display: flex; gap: 10px; align-items: flex-end;
  margin-bottom: 16px; flex-wrap: wrap;
}
.modelo-proj-row .modelo-field { flex: 1; min-width: 200px; }

/* ── Matrix ──────────────────────────────────────────────────────────── */
.modelo-matriz-wrap {
  overflow-x: auto; overflow-y: auto; max-height: 420px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-top: 8px;
}
.matrix-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 500;
  width: max-content; min-width: 100%;
}
.matrix-table td, .matrix-table th {
  padding: 3px 5px; text-align: center;
  min-width: 2.1rem; height: 1.55rem; white-space: nowrap;
}
.matrix-th {
  background: var(--panel-alt);
  font-weight: 600; font-size: 0.65rem;
  color: var(--text-mute);
  position: sticky; top: 0; z-index: 2;
}
.matrix-th--rowhead {
  position: sticky; left: 0; z-index: 3;
  min-width: 2.6rem; font-weight: 700;
  color: var(--text-soft);
}
.matrix-tr--header .matrix-th--colhead {
  background: var(--panel-alt);
  border-bottom: 2px solid var(--border);
}
.matrix-td {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--grid-line);
  color: var(--text-faint);
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.matrix-td:hover {
  background: var(--sb-blue-100);
  border-color: var(--sb-blue-300);
}
.matrix-td--code {
  color: var(--sb-blue-700); font-weight: 700;
  background: #EAF2FB;
}
.matrix-td--number {
  color: var(--pos); font-weight: 600;
  background: var(--pos-bg);
}
.matrix-td--selected {
  background: #C8DEF7 !important;
  border-color: var(--sb-blue-500) !important;
  outline: 1px solid var(--sb-blue-500);
  outline-offset: -1px;
}
.matrix-td--editing {
  padding: 0 !important;
  background: var(--panel) !important;
  border-color: var(--sb-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(46,154,255,.28);
}
.matrix-cell-input {
  width: 100%; height: 100%; border: none; outline: none;
  padding: 3px 5px; font-size: 0.7rem;
  font-family: var(--font-mono); text-align: center;
  background: transparent; color: var(--text);
}
.cell-error {
  background: var(--neg-bg) !important;
  border-color: var(--sb-red) !important;
  color: var(--sb-red) !important;
}
.matrix-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--sb-red); color: #fff;
  padding: 4px 8px; border-radius: 4px;
  font-size: 0.7rem; font-family: var(--font-body);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

/* ── Catalog row ──────────────────────────────────────────────────────── */
.modelo-catalog-row {
  display: flex; gap: 10px; align-items: flex-end;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--grid-line);
  flex-wrap: wrap;
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.modelo-tabs { margin-bottom: 0; }
.modelo-tab {
  padding: 6px 16px !important;
  font-size: 11px !important; font-weight: 600 !important;
  font-family: var(--font-body) !important;
  border-bottom: 2px solid transparent !important;
}
.modelo-tab--selected {
  border-bottom-color: var(--sb-blue-500) !important;
  color: var(--sb-blue-700) !important;
}

/* ── Leyenda ──────────────────────────────────────────────────────────── */
.modelo-leyenda {
  padding: 4px 0; margin-bottom: 4px;
}
.modelo-leyenda__text {
  font-size: 0.65rem; color: var(--text-mute);
  font-family: var(--font-mono);
  background: var(--panel-alt);
  padding: 3px 8px; border-radius: 3px;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
.modelo-msg {
  padding: 6px 10px; border-radius: var(--radius);
  font-size: 0.78rem; font-weight: 500; margin-top: 6px;
}
.modelo-msg--ok    { background: var(--pos-bg); color: var(--pos); border: 1px solid var(--pos); }
.modelo-msg--err   { background: var(--neg-bg); color: var(--sb-red); border: 1px solid var(--sb-red); }
.modelo-msg--warn  { background: #FFF9E6; color: #92400E; border: 1px solid var(--sb-amber); }
.modelo-msg--info  { background: var(--sb-blue-100); color: var(--sb-blue-700); border: 1px solid var(--sb-blue-300); }

/* ── KPI strip ────────────────────────────────────────────────────────── */
.sim-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0; border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 12px;
}
.sim-kpi {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.sim-kpi__label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); font-weight: 700; margin-bottom: 4px;
}
.sim-kpi__value {
  font-family: var(--font-mono); font-size: 1.1rem;
  font-weight: 600; color: var(--sb-blue-700); line-height: 1.15;
}
.sim-kpi__unit {
  font-size: 0.65rem; color: var(--text-mute); margin-left: 3px;
  font-family: var(--font-body);
}

/* ── Results table ────────────────────────────────────────────────────── */
.modelo-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.72rem; font-family: var(--font-mono);
  margin-top: 8px;
}
.modelo-table th {
  padding: 5px 10px; text-align: right; font-weight: 700;
  font-size: 0.65rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-mute);
  border-bottom: 2px solid var(--border);
  background: var(--panel-alt);
}
.modelo-table th:first-child { text-align: left; }
.modelo-table td {
  padding: 4px 10px; border-bottom: 1px solid var(--grid-line);
  text-align: right; color: var(--text); font-variant-numeric: tabular-nums;
}
.modelo-table td:first-child { text-align: left; color: var(--text-soft); font-weight: 600; }
.modelo-table tr:hover td { background: var(--sb-blue-100); }

/* ── Progress bar ──────────────────────────────────────────────────────── */
.sim-progress {
  height: 5px; background: var(--border);
  border-radius: 3px; overflow: hidden; margin: 8px 0;
}
.sim-progress__fill {
  height: 100%; border-radius: 3px;
  background: var(--sb-blue-500);
  transition: width 0.6s ease;
}
.sim-progress__fill--done { background: var(--pos); }
.sim-progress__fill--fail { background: var(--sb-red); }

/* ── Export links ──────────────────────────────────────────────────────── */
.modelo-export-links {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; margin-bottom: 4px;
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .modelo-form-grid { grid-template-columns: repeat(6, 1fr); }
  .modelo-page { padding: 10px 12px 30px; }
}
@media (max-width: 640px) {
  .modelo-form-grid { grid-template-columns: repeat(3, 1fr); }
  .sim-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Datos de Fabricantes — degradation table editor
   ═══════════════════════════════════════════════════════════════════════════ */

.fab-selector {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}
.fab-selector > label {
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  color: var(--sb-text-secondary, #555);
  min-width: fit-content;
}
.fab-selector .dash-dropdown {
  flex: 1;
}

/* New combo form */
.fab-form-row {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.fab-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fab-form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sb-text-secondary, #555);
}
.fab-input {
  padding: 6px 10px;
  border: 1px solid var(--sb-border, #ccc);
  border-radius: 4px;
  font-size: 13px;
  width: 200px;
}
.fab-input:focus {
  outline: none;
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 2px rgba(13,110,253,0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Datos de Fabricantes — editable table (same pattern as matrix editor)
   ═══════════════════════════════════════════════════════════════════════════ */

.fab-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--sb-border, #ddd);
}
.fab-table-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.fab-table-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.fab-table-rows {
  font-size: 12px;
  color: var(--sb-text-muted, #888);
}

/* ── Fab table (editable, same pattern as .matrix-table) ───────────── */
.fab-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.72rem; font-weight: 500;
  width: max-content; min-width: 100%;
}
.fab-table td, .fab-table th {
  padding: 3px 6px; text-align: center;
  min-width: 5.5rem; height: 1.6rem; white-space: nowrap;
}
.fab-th {
  background: var(--panel-alt);
  font-weight: 600; font-size: 0.68rem;
  color: var(--text-mute);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 2px solid var(--border);
  text-transform: uppercase;
}
.fab-tr--header .fab-th {
  background: var(--panel-alt);
  border-bottom: 2px solid var(--border);
}
.fab-td {
  cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--grid-line);
  color: var(--text-faint);
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}
.fab-td:hover {
  background: var(--sb-blue-100);
  border-color: var(--sb-blue-300);
}
.fab-td--number {
  color: var(--pos); font-weight: 600;
  background: var(--pos-bg);
}
.fab-td--selected {
  background: #C8DEF7 !important;
  border-color: var(--sb-blue-500) !important;
  outline: 1px solid var(--sb-blue-500);
  outline-offset: -1px;
}
.fab-td--editing {
  padding: 0 !important;
  background: var(--panel) !important;
  border-color: var(--sb-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(46,154,255,.28);
}
.fab-cell-input {
  width: 100%; height: 100%; border: none; outline: none;
  padding: 3px 6px; font-size: 0.72rem;
  font-family: var(--font-mono); text-align: center;
  background: transparent; color: var(--text);
}
.fab-cell-error {
  background: var(--neg-bg) !important;
  border-color: var(--sb-red) !important;
  color: var(--sb-red) !important;
}
.fab-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--sb-red); color: #fff;
  padding: 4px 8px; border-radius: 4px;
  font-size: 0.7rem; font-family: var(--font-body);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
}

.fab-error {
  padding: 15px;
  background: var(--sb-red-bg, #fff0f0);
  border: 1px solid var(--sb-red, #dc3545);
  border-radius: 6px;
  color: var(--sb-red, #dc3545);
  font-size: 13px;
}
.fab-empty {
  padding: 40px;
  text-align: center;
  color: var(--sb-text-muted, #999);
  font-size: 14px;
}

.afrr-stats {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--panel-alt);
  border-radius: 6px;
  flex-wrap: wrap;
}
.afrr-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.afrr-stat__value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.afrr-stat__label {
  font-size: 0.72rem;
  color: var(--text-mute);
  text-transform: uppercase;
}

.afrr-ctrls {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 16px; flex-wrap: wrap;
}
.afrr-sliders-scroll {
  overflow-x: auto; max-height: 70vh; overflow-y: auto;
}
.afrr-sliders-table {
  border-collapse: collapse; font-size: 12px; width: max-content; min-width: 100%;
}
.afrr-year-label {
  position: sticky; left: 0; z-index: 2;
  background: var(--panel-alt); font-weight: 700; font-size: 11px;
  padding: 6px 10px; text-align: right; min-width: 60px; white-space: nowrap;
}
.afrr-concept-header {
  padding: 6px 8px; text-align: center; min-width: 110px;
  background: var(--panel-alt); font-weight: 600; position: sticky; top: 0; z-index: 2;
}
.afrr-slider-cell {
  padding: 2px 6px; min-width: 110px;
}
.afrr-slider-cell .dash-slider { margin: 0; }
.afrr-slider-cell .rc-slider-mark { font-size: 8px; }
.afrr-slider-cell .rc-slider-track { background: var(--sb-blue-500); }
.afrr-slider-cell .rc-slider-handle { border-color: var(--sb-blue-500); }
.afrr-year-row:hover { background: var(--sb-blue-50); }

/* ═══════════════════════════════════════════════════════════════════════════
   aFFR scenario editor — editable color-coded table
   ═══════════════════════════════════════════════════════════════════════════ */
.afrr-editor-table {
  border-collapse: collapse; font-family: var(--font-mono);
  font-size: 0.7rem; font-weight: 600; width: max-content; min-width: 100%;
}
.afrr-editor-table td, .afrr-editor-table th {
  padding: 3px 6px; text-align: center; min-width: 5rem; height: 1.5rem; white-space: nowrap;
}
.afrr-editor-th {
  background: var(--panel-alt); font-weight: 600; font-size: 0.65rem;
  color: var(--text-mute); position: sticky; top: 0; z-index: 2;
}
.afrr-editor-rowhead {
  position: sticky; left: 0; z-index: 2; background: var(--panel-alt);
  font-weight: 700; font-size: 0.68rem; min-width: 55px;
}
.afrr-td {
  cursor: pointer; background: var(--panel); border: 1px solid var(--grid-line);
  transition: background 0.12s; user-select: none;
}
.afrr-td:hover { background: var(--sb-blue-100); border-color: var(--sb-blue-300); }

/* Color scale: 0 = amber, negative = red gradient, positive = green gradient */
.afrr-td--zero   { background: #FFF8E1 !important; color: #F57F17 !important; }
.afrr-td--pos1   { background: #E8F5E9 !important; color: #2E7D32 !important; }
.afrr-td--pos2   { background: #C8E6C9 !important; color: #1B5E20 !important; }
.afrr-td--pos3   { background: #81C784 !important; color: #1B5E20 !important; }
.afrr-td--pos4   { background: #388E3C !important; color: #fff !important; }
.afrr-td--neg1   { background: #FFEBEE !important; color: #C62828 !important; }
.afrr-td--neg2   { background: #FFCDD2 !important; color: #B71C1C !important; }
.afrr-td--neg3   { background: #EF9A9A !important; color: #7F0000 !important; }
.afrr-td--neg4   { background: #C62828 !important; color: #fff !important; }

.afrr-td--selected {
  background: #C8DEF7 !important; border-color: var(--sb-blue-500) !important;
  outline: 1px solid var(--sb-blue-500); outline-offset: -1px;
}
.afrr-td--editing {
  padding: 0 !important; background: var(--panel) !important;
  border-color: var(--sb-blue-500) !important;
  box-shadow: 0 0 0 2px rgba(46,154,255,.28);
}
.afrr-cell-input {
  width: 100%; height: 100%; border: none; outline: none;
  padding: 3px 6px; font-size: 0.7rem;
  font-family: var(--font-mono); text-align: center;
  background: transparent; color: var(--text);
}
.afrr-cell-error { background: var(--neg-bg) !important; border-color: var(--sb-red) !important; color: var(--sb-red) !important; }
.afrr-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--sb-red); color: #fff; padding: 4px 8px;
  border-radius: 4px; font-size: 0.7rem; font-family: var(--font-body);
  white-space: nowrap; box-shadow: var(--shadow-md);
}
/* Remove old slider styles we no longer need */
.afrr-sliders-scroll, .afrr-sliders-table, .afrr-year-label,
.afrr-concept-header, .afrr-slider-cell, .afrr-year-row { display: none; }

.mfrr-editor-table { border-collapse: collapse; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; width: max-content; min-width: 100%; }
.mfrr-editor-table td, .mfrr-editor-table th { padding: 3px 6px; text-align: center; min-width: 5rem; height: 1.5rem; white-space: nowrap; }
.mfrr-editor-th { background: var(--panel-alt); font-weight: 600; font-size: 0.65rem; color: var(--text-mute); position: sticky; top: 0; z-index: 2; }
.mfrr-editor-rowhead { position: sticky; left: 0; z-index: 2; background: var(--panel-alt); font-weight: 700; font-size: 0.68rem; min-width: 55px; }
.mfrr-td { cursor: pointer; background: var(--panel); border: 1px solid var(--grid-line); transition: background 0.12s; user-select: none; }
.mfrr-td:hover { background: var(--sb-blue-100); border-color: var(--sb-blue-300); }
.mfrr-td--zero   { background: #FFF8E1 !important; color: #F57F17 !important; }
.mfrr-td--pos1   { background: #E8F5E9 !important; color: #2E7D32 !important; }
.mfrr-td--pos2   { background: #C8E6C9 !important; color: #1B5E20 !important; }
.mfrr-td--pos3   { background: #81C784 !important; color: #1B5E20 !important; }
.mfrr-td--pos4   { background: #388E3C !important; color: #fff !important; }
.mfrr-td--neg1   { background: #FFEBEE !important; color: #C62828 !important; }
.mfrr-td--neg2   { background: #FFCDD2 !important; color: #B71C1C !important; }
.mfrr-td--neg3   { background: #EF9A9A !important; color: #7F0000 !important; }
.mfrr-td--neg4   { background: #C62828 !important; color: #fff !important; }
.mfrr-td--selected { background: #C8DEF7 !important; border-color: var(--sb-blue-500) !important; outline: 1px solid var(--sb-blue-500); outline-offset: -1px; }
.mfrr-td--editing { padding: 0 !important; background: var(--panel) !important; border-color: var(--sb-blue-500) !important; box-shadow: 0 0 0 2px rgba(46,154,255,.28); }
.mfrr-cell-input { width: 100%; height: 100%; border: none; outline: none; padding: 3px 6px; font-size: 0.7rem; font-family: var(--font-mono); text-align: center; background: transparent; color: var(--text); }
.mfrr-cell-error { background: var(--neg-bg) !important; border-color: var(--sb-red) !important; color: var(--sb-red) !important; }
.mfrr-tooltip { position: fixed; z-index: 9999; pointer-events: none; background: var(--sb-red); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-family: var(--font-body); white-space: nowrap; box-shadow: var(--shadow-md); }

/* ═══════════════════════════════════════════════════════════════════════
   Page Headers — breadcrumb + title + subtitle pattern
   ═══════════════════════════════════════════════════════════════════════ */
.page-header {
  margin-bottom: 0.5rem;
}
.page-header__kicker {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--sb-blue-500);
  text-transform: uppercase; margin-bottom: 0.25rem;
  display: flex; align-items: center; gap: 6px;
}
.page-header__kicker--solar {
  color: #d97706;
}
.page-header__kicker--market {
  color: #2563eb;
}
.page-header__title {
  margin: 0; font-size: 1.5rem; font-weight: 800;
  color: var(--text); font-family: var(--font-display);
}
.page-header__subtitle {
  margin: 0.15rem 0 0; font-size: 0.83rem;
  color: var(--text-mute);
}

/* ═══════════════════════════════════════════════════════════════════════
   OMIE Stats — extended from mfrr-stats with 4-col support
   ═══════════════════════════════════════════════════════════════════════ */
.omie-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 12px;
}
.omie-stat {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.omie-stat:last-child { border-right: none; }
.omie-stat__value {
  font-family: var(--font-mono); font-size: 1.15rem;
  font-weight: 700; color: var(--sb-blue-700); line-height: 1.15;
}
.omie-stat__label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-mute); font-weight: 600;
}
.omie-stat__trend {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.65rem; font-weight: 600;
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════════════
   OMIE Scenarios Grid
   ═══════════════════════════════════════════════════════════════════════ */
.omie-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.omie-scenario-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s;
  overflow: hidden;
}
.omie-scenario-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-color: var(--sb-blue-300);
}
.omie-scenario-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-alt);
}
.omie-scenario-card__title {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700;
  color: var(--sb-blue-700);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.omie-scenario-card__badge {
  font-family: var(--font-mono); font-size: 0.62rem;
  color: var(--text-mute); font-weight: 600;
  background: var(--panel);
  padding: 2px 8px; border-radius: 12px;
  border: 1px solid var(--border);
}
.omie-scenario-card__kpis {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--grid-line);
}
.omie-scenario-card__kpi {
  flex: 1; padding: 10px 14px;
  border-right: 1px solid var(--grid-line);
  text-align: center;
}
.omie-scenario-card__kpi:last-child { border-right: none; }
.omie-scenario-card__kpi-value {
  font-family: var(--font-mono); font-size: 0.95rem;
  font-weight: 700; color: var(--text); line-height: 1.2;
}
.omie-scenario-card__kpi-label {
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-mute); font-weight: 600; margin-top: 2px;
}
.omie-scenario-card__body {
  padding: 12px 16px 16px;
}
.omie-scenario-card__actions {
  display: flex; gap: 8px; align-items: center;
  padding: 0 16px 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Planta FV — specific components
   ═══════════════════════════════════════════════════════════════════════ */
.planta-fv-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 16px;
}
.planta-fv-kpi {
  padding: 14px 16px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.planta-fv-kpi:last-child { border-right: none; }
.planta-fv-kpi__value {
  font-family: var(--font-mono); font-size: 1.15rem;
  font-weight: 700; color: #92400e;
  line-height: 1.15;
}
.planta-fv-kpi__label {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-mute); font-weight: 600;
}
.planta-fv-kpi__icon {
  opacity: 0.6; margin-right: 2px;
}

/* Planta FV upload area */
.planta-fv-upload {
  width: 100%; min-height: 56px;
  border: 2px dashed #d4a574;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; font-size: 13px; color: #92400e;
  cursor: pointer; background: #fffbeb;
  transition: border-color 0.2s, background 0.2s;
  padding: 12px;
}
.planta-fv-upload:hover {
  border-color: #b45309;
  background: #fef3c7;
}

/* Planta FV method chips */
.planta-fv-methods {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.planta-fv-method-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 12px; font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
  outline: none;
}
.planta-fv-method-chip:hover {
  border-color: #d97706;
  background: #fffbeb;
}
.planta-fv-method-chip--active {
  border-color: #b45309;
  background: #fef3c7;
}
.planta-fv-method-chip__badge {
  font-size: 0.55rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--pos); color: #fff;
  padding: 1px 6px; border-radius: 10px;
}
.planta-fv-method-chip__detail {
  font-size: 10px; color: var(--text-mute);
  font-family: var(--font-mono);
}

/* Planta FV controls row */
.planta-fv-ctrls {
  display: flex; gap: 12px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 16px;
}
.planta-fv-ctrls > * { flex: 1; min-width: 180px; }

/* ═══════════════════════════════════════════════════════════════════════
   Section divider & period pills
   ═══════════════════════════════════════════════════════════════════════ */
.section-hr {
  margin: 16px 0 12px;
  border: none; border-top: 1px solid var(--border);
}
.period-pills {
  display: inline-flex; gap: 4px;
  background: var(--panel-alt);
  border-radius: 6px; padding: 3px;
}
.period-pill {
  padding: 3px 10px; font-size: 0.65rem; font-weight: 600;
  border: none; border-radius: 4px;
  background: transparent; color: var(--text-mute);
  cursor: pointer; transition: all 0.15s;
  font-family: var(--font-body);
}
.period-pill:hover { color: var(--text); }
.period-pill--active {
  background: var(--panel); color: var(--sb-blue-700);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive extensions
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .omie-stats { grid-template-columns: repeat(2, 1fr); }
  .omie-stats .omie-stat:nth-child(2) { border-right: none; }
  .planta-fv-kpis { grid-template-columns: repeat(2, 1fr); }
  .planta-fv-kpis .planta-fv-kpi:nth-child(2) { border-right: none; }
  .omie-scenarios-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .omie-stats { grid-template-columns: 1fr; }
  .omie-stats .omie-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .omie-stats .omie-stat:last-child { border-bottom: none; }
  .planta-fv-kpis { grid-template-columns: 1fr; }
  .planta-fv-kpis .planta-fv-kpi { border-right: none; border-bottom: 1px solid var(--border); }
  .planta-fv-kpis .planta-fv-kpi:last-child { border-bottom: none; }
  .omie-scenario-card__kpis { flex-direction: column; }
  .omie-scenario-card__kpi { border-right: none; border-bottom: 1px solid var(--grid-line); }
  .omie-scenario-card__kpi:last-child { border-bottom: none; }
}