/* ============================================================
   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(--sw-off, var(--sc-border));
  position:       relative;
  transition:     background .2s;
}
.sw-switch--on .sw-switch-track {
  background: var(--sw-on, 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); }

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

.sw-slider-input {
  width:         100%;
  cursor:        pointer;
  accent-color:  var(--sc-accent);
  margin:        4px 0;
}
.sw-slider-input:disabled { opacity: .5; cursor: not-allowed; }

.sw-slider-valrow {
  display:     flex;
  align-items: center;
  gap:         6px;
}

.sw-slider-bubble {
  font-size:   1rem;
  font-weight: 700;
  color:       var(--sc-accent);
  font-variant-numeric: tabular-nums;
}

.sw-slider-rangerow {
  display:         flex;
  justify-content: space-between;
  font-size:       .68rem;
  color:           var(--sc-text-dim);
  margin-top:      -2px;
}

.sw-slider-minmax { }

/* ============================================================
   TANK
   ============================================================ */
.sw-tank { min-width: 80px; align-items: center; }

.sw-tank-bg {
  fill:   var(--sc-bg);
}

.sw-tank-border {
  fill:         none;
  stroke:       var(--sc-border);
  stroke-width: 2;
}

.sw-tank-fill {
  fill:       var(--sc-accent);
  transition: y .5s ease, height .5s ease, fill .3s;
}
.sw-tank-fill[data-state="warn"] { fill: var(--sc-warn); }
.sw-tank-fill[data-state="crit"] { fill: var(--sc-bad);  }
.sq-bad   .sw-tank-fill,
.sq-stale .sw-tank-fill { fill: var(--sc-stale); }

.sw-tank-zone {
  opacity: .25;
}
.sw-tank-zone-warn { fill: var(--sc-warn); }
.sw-tank-zone-crit { fill: var(--sc-bad);  }

.sw-tank-value {
  font-size:   11px;
  font-weight: 700;
  fill:        var(--sc-text);
  text-anchor: middle;
  font-family: var(--sc-font);
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke:      var(--sc-bg);
  stroke-width: 3px;
}

/* ============================================================
   THERMOMETER
   ============================================================ */
.sw-thermometer { min-width: 70px; align-items: center; }

.sw-thermo-tube-bg {
  fill: var(--sc-bg);
}
.sw-thermo-tube-border {
  fill:         none;
  stroke:       var(--sc-border);
  stroke-width: 1.5;
}

.sw-thermo-mercury {
  fill:       var(--sc-accent);
  transition: y .4s ease, height .4s ease, fill .3s;
}
.sw-thermo-mercury[data-state="warn"] { fill: var(--sc-warn); }
.sw-thermo-mercury[data-state="crit"] { fill: var(--sc-bad);  }
.sq-bad   .sw-thermo-mercury,
.sq-stale .sw-thermo-mercury { fill: var(--sc-stale); }

.sw-thermo-zone       { opacity: .3; }
.sw-thermo-zone-warn  { fill: var(--sc-warn); }
.sw-thermo-zone-crit  { fill: var(--sc-bad);  }

.sw-thermo-bulb-bg {
  fill:   var(--sc-border);
}
.sw-thermo-bulb {
  fill:       var(--sc-accent);
  transition: fill .3s;
}
.sw-thermo-bulb[data-state="warn"] { fill: var(--sc-warn); }
.sw-thermo-bulb[data-state="crit"] { fill: var(--sc-bad);  }
.sq-bad   .sw-thermo-bulb,
.sq-stale .sw-thermo-bulb { fill: var(--sc-stale); }

.sw-thermo-tick {
  stroke:       var(--sc-border);
  stroke-width: 1;
}
.sw-thermo-tick-lbl {
  font-size:   7px;
  fill:        var(--sc-text-dim);
  font-family: var(--sc-font);
}

.sw-thermo-value {
  font-size:   9px;
  font-weight: 700;
  fill:        var(--sc-text);
  text-anchor: end;
  font-family: var(--sc-font);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ALARM-BADGE
   ============================================================ */
.sw-alarm-badge {
  align-items: stretch;
  min-width:   260px;
  max-width:   400px;
  padding:     0;
  overflow:    hidden;
  gap:         0;
}

.sw-ab-hdr {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 14px;
  border-bottom:   1px solid var(--sc-border);
  background:      var(--sc-bg);
}

.sw-ab-title {
  font-size:      .80rem;
  font-weight:    600;
  color:          var(--sc-text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sw-ab-count {
  font-size:     .72rem;
  font-weight:   700;
  padding:       2px 8px;
  border-radius: 99px;
  background:    var(--sc-border);
  color:         var(--sc-text-dim);
  transition:    background .3s, color .3s;
}
.sw-ab-count[data-sev="CRITICAL"] { background: var(--sc-crit); color: #fff; }
.sw-ab-count[data-sev="HIGH"]     { background: #ea580c;        color: #fff; }
.sw-ab-count[data-sev="MEDIUM"]   { background: var(--sc-warn); color: #fff; }
.sw-ab-count[data-sev="LOW"]      { background: var(--sc-uncertain); color: #fff; }

.sw-ab-list {
  display:        flex;
  flex-direction: column;
  max-height:     240px;
  overflow-y:     auto;
}

.sw-ab-empty {
  padding:    16px 14px;
  font-size:  .78rem;
  color:      var(--sc-good);
  text-align: center;
}

.sw-ab-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  padding:       10px 14px;
  border-bottom: 1px solid var(--sc-border);
  transition:    background .15s;
}
.sw-ab-row:last-child { border-bottom: none; }
.sw-ab-row:hover      { background: color-mix(in srgb, var(--sc-border) 50%, transparent); }

.sw-ab-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    var(--sc-text-dim);
}
.sw-ab-row[data-sev="CRITICAL"] .sw-ab-dot { background: var(--sc-crit); box-shadow: 0 0 5px var(--sc-crit); }
.sw-ab-row[data-sev="HIGH"]     .sw-ab-dot { background: #ea580c; }
.sw-ab-row[data-sev="MEDIUM"]   .sw-ab-dot { background: var(--sc-warn); }
.sw-ab-row[data-sev="LOW"]      .sw-ab-dot { background: var(--sc-uncertain); }

.sw-ab-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.sw-ab-msg {
  font-size:     .82rem;
  font-weight:   600;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.sw-ab-row[data-sev="CRITICAL"] .sw-ab-msg { color: var(--sc-crit); }
.sw-ab-row[data-sev="HIGH"]     .sw-ab-msg { color: #ea580c; }
.sw-ab-row[data-sev="MEDIUM"]   .sw-ab-msg { color: var(--sc-warn); }

.sw-ab-meta { font-size: .68rem; color: var(--sc-text-dim); }

.sw-ab-ack {
  appearance:    none;
  border:        1px solid var(--sc-border);
  background:    transparent;
  color:         var(--sc-text-dim);
  border-radius: 6px;
  padding:       3px 8px;
  font-size:     .72rem;
  cursor:        pointer;
  flex-shrink:   0;
  transition:    background .15s, color .15s;
}
.sw-ab-ack:hover:not(:disabled)     { background: var(--sc-accent); color: #fff; border-color: var(--sc-accent); }
.sw-ab-ack--done                    { color: var(--sc-good); border-color: var(--sc-good); cursor: default; }
.sw-ab-ack:disabled:not(.sw-ab-ack--done) { opacity: .5; cursor: not-allowed; }

/* ── Switch theme: heat (frío=azul / calor=naranja) ────────────────────────── */
.sw-switch[data-theme=heat] .sw-switch-track {
  background: #3b82f6;
}
.sw-switch[data-theme=heat] .sw-switch--on .sw-switch-track {
  background: #f97316;
  box-shadow: 0 0 8px rgba(249,115,22,.4);
}
.sq-bad .sw-switch[data-theme=heat] .sw-switch-track,
.sw-switch[data-theme=heat].sq-bad .sw-switch-track {
  background: var(--sc-stale);
  box-shadow: none;
}