/* ============================================================
   scada.css — Estilos base para scada.js widgets
   Variables CSS en :root → sobrescribibles por el tema de la app
   ============================================================ */

:root {
  --sc-bg:         #1a1d23;
  --sc-surface:    #22262f;
  --sc-border:     #2e3340;
  --sc-text:       #e2e6ef;
  --sc-text-dim:   #6b7280;
  --sc-radius:     8px;
  --sc-font:       'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Calidad */
  --sc-good:       #22c55e;
  --sc-bad:        #ef4444;
  --sc-uncertain:  #f59e0b;
  --sc-stale:      #6b7280;

  /* Acento */
  --sc-accent:     #3b82f6;
  --sc-accent-dim: #1d4ed8;

  /* Alarmas */
  --sc-crit:       #dc2626;
  --sc-warn:       #d97706;
}

/* ── Calidad en el elemento raíz del widget ─────────────────────────────── */
.sq-good      { --sc-q-color: var(--sc-good); }
.sq-bad       { --sc-q-color: var(--sc-bad);  opacity: .7; }
.sq-uncertain { --sc-q-color: var(--sc-uncertain); }
.sq-stale     { --sc-q-color: var(--sc-stale); opacity: .6; }

/* ── Base widget ─────────────────────────────────────────────────────────── */
.sw {
  display:        inline-flex;
  flex-direction: column;
  align-items:    center;
  gap:            6px;
  padding:        12px 14px;
  background:     var(--sc-surface);
  border:         1px solid var(--sc-border);
  border-radius:  var(--sc-radius);
  font-family:    var(--sc-font);
  color:          var(--sc-text);
  user-select:    none;
  min-width:      100px;
  box-sizing:     border-box;
}

.sw-label {
  font-size:   .70rem;
  color:       var(--sc-text-dim);
  text-align:  center;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
  max-width:   100%;
}

/* ── SSE status bar ──────────────────────────────────────────────────────── */
[data-scada-status]::before {
  content: '⬤  Sin señal';
  color:   var(--sc-bad);
}
[data-scada-status][data-sse-state="connected"]::before {
  content: '⬤  En línea';
  color:   var(--sc-good);
}
[data-scada-status][data-sse-state="disconnected"]::before {
  content: '⬤  Reconectando…';
  color:   var(--sc-uncertain);
}

/* ============================================================
   INDICATOR
   ============================================================ */
.sw-indicator {
  flex-direction: row;
  gap:            8px;
  min-width:      140px;
}

.sw-led {
  width:         14px;
  height:        14px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    var(--sc-stale);
  box-shadow:    0 0 0 2px color-mix(in srgb, var(--sc-stale) 30%, transparent);
  transition:    background .2s, box-shadow .2s;
}
.sw-led--on {
  background: var(--sc-good);
  box-shadow: 0 0 6px 2px color-mix(in srgb, var(--sc-good) 50%, transparent);
}
.sw-led--off {
  background: var(--sc-bad);
  box-shadow: 0 0 4px 1px color-mix(in srgb, var(--sc-bad) 30%, transparent);
}
.sq-bad .sw-led,
.sq-stale .sw-led {
  background: var(--sc-stale);
  box-shadow: none;
}

.sw-ind-state {
  font-size:   .72rem;
  font-weight: 600;
  min-width:   2.5em;
  text-align:  right;
  color:       var(--sc-text-dim);
}

/* ============================================================
   DISPLAY
   ============================================================ */
.sw-disp-row {
  display:     flex;
  align-items: baseline;
  gap:         3px;
}
.sw-disp-val {
  font-size:   1.9rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color:       var(--sc-q-color, var(--sc-text));
  transition:  color .3s;
}
.sw-disp-unit {
  font-size:  .80rem;
  color:      var(--sc-text-dim);
  align-self: flex-end;
  padding-bottom: 2px;
}

/* ============================================================
   GAUGE
   ============================================================ */
.sw-gauge { min-width: 160px; }

.sw-gauge-track {
  fill:         none;
  stroke:       var(--sc-border);
  stroke-width: 10;
  stroke-linecap: round;
}
.sw-gauge-fill {
  fill:         none;
  stroke:       var(--sc-accent);
  stroke-width: 10;
  stroke-linecap: round;
  transition:   d .35s ease, stroke .3s;
}
.sq-bad    .sw-gauge-fill,
.sq-stale  .sw-gauge-fill { stroke: var(--sc-stale); }
.sq-uncertain .sw-gauge-fill { stroke: var(--sc-uncertain); }

.sw-gauge-zone {
  fill:         none;
  stroke-width: 10;
  stroke-linecap: round;
  opacity: .35;
}
.sw-gauge-warn { stroke: var(--sc-warn); }
.sw-gauge-crit { stroke: var(--sc-crit); }

.sw-gauge-needle {
  stroke:       var(--sc-text);
  stroke-width: 2;
  stroke-linecap: round;
  transition:   x2 .35s ease, y2 .35s ease;
}
.sw-gauge-dot {
  fill: var(--sc-text);
}
.sw-gauge-value {
  font-size:     14px;
  font-weight:   700;
  fill:          var(--sc-text);
  text-anchor:   middle;
  font-family:   var(--sc-font);
  font-variant-numeric: tabular-nums;
}
.sw-gauge-minmax {
  font-size:   9px;
  fill:        var(--sc-text-dim);
  font-family: var(--sc-font);
}
.sw-gauge-unit {
  font-size: .72rem;
  color:     var(--sc-text-dim);
}

/* ============================================================
   SWITCH
   ============================================================ */
.sw-switch {
  flex-direction: row;
  gap:            10px;
  min-width:      unset;
}

.sw-switch-btn {
  appearance:     none;
  border:         none;
  background:     none;
  padding:        0;
  cursor:         pointer;
  border-radius:  20px;
  outline-offset: 3px;
}
.sw-switch-btn:disabled { cursor: not-allowed; opacity: .5; }

.sw-switch-track {
  display:        block;
  width:          46px;
  height:         26px;
  border-radius:  13px;
  background:     var(--sc-border);
  position:       relative;
  transition:     background .2s;
}
.sw-switch--on .sw-switch-track {
  background: var(--sc-accent);
}

.sw-switch-thumb {
  display:       block;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  background:    #fff;
  position:      absolute;
  top:           3px;
  left:          3px;
  transition:    left .2s;
  box-shadow:    0 1px 3px rgba(0,0,0,.4);
}
.sw-switch--on .sw-switch-thumb { left: 23px; }

.sw-switch-status {
  font-size:   .72rem;
  font-weight: 600;
  color:       var(--sc-text-dim);
  min-width:   2rem;
}

/* ============================================================
   SETPOINT
   ============================================================ */
.sw-setpoint { align-items: stretch; min-width: 180px; }

.sw-sp-currow {
  display:     flex;
  align-items: baseline;
  gap:         4px;
  font-size:   .78rem;
}
.sw-sp-curlbl  { color: var(--sc-text-dim); }
.sw-sp-curval  { font-weight: 600; font-variant-numeric: tabular-nums; }
.sw-sp-curunit { color: var(--sc-text-dim); font-size: .72rem; }

.sw-sp-row {
  display:     flex;
  align-items: center;
  gap:         4px;
}

.sw-sp-input {
  flex:         1;
  background:   var(--sc-bg);
  border:       1px solid var(--sc-border);
  border-radius: 6px;
  color:        var(--sc-text);
  padding:      5px 8px;
  font-size:    .88rem;
  font-family:  var(--sc-font);
  outline:      none;
  transition:   border-color .15s;
  min-width:    0;
}
.sw-sp-input:focus { border-color: var(--sc-accent); }
.sw-sp-input:disabled { opacity: .5; cursor: not-allowed; }

.sw-sp-btn {
  appearance:    none;
  border:        none;
  background:    var(--sc-accent);
  color:         #fff;
  border-radius: 6px;
  padding:       5px 10px;
  cursor:        pointer;
  font-size:     .88rem;
  transition:    background .15s;
  flex-shrink:   0;
}
.sw-sp-btn:hover:not(:disabled) { background: var(--sc-accent-dim); }
.sw-sp-btn:disabled { opacity: .5; cursor: not-allowed; }

.sw-sp-unit   { font-size: .78rem; color: var(--sc-text-dim); flex-shrink: 0; }

.sw-sp-status { font-size: .78rem; font-weight: 600; min-width: 1.5rem; text-align: center; }
.sw-sp-status--ok  { color: var(--sc-good); }
.sw-sp-status--err { color: var(--sc-bad);  }

/* ============================================================
   TREND
   ============================================================ */
.sw-trend { align-items: stretch; min-width: 200px; }

.sw-trend-hdr {
  display:     flex;
  align-items: baseline;
  gap:         3px;
}
.sw-trend-val  {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--sc-accent);
  font-variant-numeric: tabular-nums;
}
.sw-trend-unit { font-size: .72rem; color: var(--sc-text-dim); }

.sw-trend-grid {
  stroke:       var(--sc-border);
  stroke-width: 1;
}
.sw-trend-area {
  fill:    color-mix(in srgb, var(--sc-accent) 15%, transparent);
}
.sw-trend-line {
  fill:         none;
  stroke:       var(--sc-accent);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap:  round;
}
.sw-trend-dot {
  fill: var(--sc-accent);
}
.sq-bad   .sw-trend-line,
.sq-stale .sw-trend-line { stroke: var(--sc-stale); }
.sq-bad   .sw-trend-dot,
.sq-stale .sw-trend-dot  { fill:   var(--sc-stale); }