/* ============================================================
   MX60 — components.css
   Sub-paso 2: HOME map, EQUIPMENT cards, DETAIL placeholder.
   ============================================================ */

/* ============================================================
   HOME MAP — split layout (sidebar plantas + map area)
   ============================================================ */
.home-map-wrap {
  position: relative;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 220px 1fr;
}

/* ── HomeMap — mobile vertical stack (casino pattern) ──
   Photo flows at its natural ratio (921×600 → ~244px tall on a 375px phone).
   Forces overflow visible on the wrapper so the photo never gets clipped
   by the desktop's overflow:hidden rule. */
@media (max-width: 768px) {
  .home-map-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .home-side-panel {
    order: 2;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--border);
    padding: 14px 12px;
    max-height: none;
    overflow: visible;
  }
  .home-map-area {
    order: 1;
    overflow: visible;
    width: 100%;
    min-height: 200px;
  }
  .home-map-inner {
    width: 100%;
  }
  .home-map-img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .planta-row {
    padding: 12px 10px;
  }
}

/* HomeMap mobile rules moved to AFTER the default .home-quick-stats rule
   (line ~289) so that source order overrides win. See block below the
   QUICK STATS default rules. */

/* ── Map popover max-width clamp (REQ-4, all widths) ── */
.home-popover {
  max-width: min(320px, calc(100vw - 32px));
}

/* ── Sidebar: plantas + counters (compact industrial) ─────── */
.home-side-panel {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.home-side-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  padding: 6px 4px 8px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  font-weight: 600;
}

.home-side-legend .legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.planta-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.planta-led.led-on      { background: #00e676; box-shadow: 0 0 5px #00e67688; }
.planta-led.led-standby { background: #06b6d4; box-shadow: 0 0 4px #06b6d488; }
.planta-led.led-alarm   { background: #ef4444; box-shadow: 0 0 5px #ef444488; }

.home-side-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.planta-row {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-left: 3px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  width: 100%;
  text-align: left;
  overflow: hidden;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Subtle moving sheen on hover/zone-hover (gradient overlay through ::before). */
.planta-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 212, 170, 0)  0%,
    rgba(0, 212, 170, 0.10) 45%,
    rgba(0, 212, 170, 0)  100%
  );
  opacity: 0;
  transform: translateX(-30%);
  transition: opacity 0.2s ease, transform 0.45s ease;
  pointer-events: none;
}

.planta-row:hover,
.planta-row.zone-hover {
  background: rgba(0, 212, 170, 0.06);
  border-color: rgba(0, 212, 170, 0.22);
  border-left-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, 0.18) inset,
    0 6px 14px rgba(0, 212, 170, 0.08);
  transform: translateX(2px);
}
.planta-row:hover::before,
.planta-row.zone-hover::before {
  opacity: 1;
  transform: translateX(20%);
}
.planta-row:hover .planta-name,
.planta-row.zone-hover .planta-name {
  color: var(--accent);
}

.planta-row.selected {
  border-left-color: var(--accent);
  background: rgba(0, 212, 170, 0.10);
  box-shadow:
    0 0 0 1px rgba(0, 212, 170, 0.32) inset,
    0 6px 18px rgba(0, 212, 170, 0.14);
}
.planta-row.selected .planta-name { color: var(--accent); }

.planta-row.has-alarm {
  border-left-color: var(--critical);
}
.planta-row.has-alarm .planta-name {
  color: var(--critical-fg);
}

.planta-info { min-width: 0; }

.planta-name {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.planta-sub {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.planta-sub .planta-count {
  color: var(--text-secondary);
  font-weight: 600;
}

.planta-leds {
  display: flex;
  gap: 8px;
  align-items: center;
}

.planta-led-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.planta-led-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  min-width: 12px;
  text-align: left;
}

/* ── Map area (right) ───────────────────────────────────────── */
.home-map-area {
  position: relative;
  background: var(--bg);
}

/* ============================================================
   QUICK STATS — two pill bands overlaying the photo's sky strip
   ============================================================ */
.home-quick-stats {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* bands shrink to content width */
  gap: 6px;
  max-width: calc(100% - 24px);     /* never overflow the area */
  pointer-events: none;             /* bands opt back in */
}

.qs-band {
  pointer-events: auto;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 8px 5px 5px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
}

/* Tag prefix: type icon + label + count, color-themed by type. */
.qs-band-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
.qs-band-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
  font-size: 13px;
}
.qs-band-title { color: var(--text-on-dark); }
.qs-band-count {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 99px;
  letter-spacing: 0;
}
.qs-band-carcamo .qs-band-tag {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.32);
}
.qs-band-carcamo .qs-band-icon  { background: rgba(59, 130, 246, 0.20); color: var(--info-fg); }
.qs-band-carcamo .qs-band-count { background: rgba(59, 130, 246, 0.18); color: var(--info-fg); }
.qs-band-datalogger .qs-band-tag {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.32);
}
.qs-band-datalogger .qs-band-icon  { background: rgba(245, 158, 11, 0.20); color: var(--warn-fg); }
.qs-band-datalogger .qs-band-count { background: rgba(245, 158, 11, 0.18); color: var(--warn-fg); }

/* Pills row — horizontal scroll if needed, but normally fits. */
.qs-pills {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  flex-wrap: nowrap;
  padding-right: 2px;
}
.qs-pills::-webkit-scrollbar { height: 4px; }
.qs-pills::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.qs-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 10px;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--state-color, var(--accent));
  border-radius: 99px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--text-on-dark);
  white-space: nowrap;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.qs-pill:hover {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.42);
  transform: translateY(-1px);
}

.qs-pill.state-0,
.qs-pill.status-cooling { --state-color: #00d4aa; }
.qs-pill.state-1        { --state-color: #fbbf24; }
.qs-pill.state-2,
.qs-pill.status-alarm   { --state-color: #ef4444; }
.qs-pill.status-offline { --state-color: #6b7280; opacity: 0.7; }

.qs-pill-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.qs-pill-value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--state-color, var(--accent));
}
.qs-pill.status-offline .qs-pill-value { color: var(--text-muted); }

/* ============================================================
   HomeMap mobile — pull quick-stats OUT of the absolute overlay so
   the Maquila photo is fully visible. Stats flow BELOW the photo as
   normal block content with all pills wrapping freely.
   These rules MUST come after the default .home-quick-stats rule
   above (source order beats a media query at the same specificity).
   ============================================================ */
@media (max-width: 768px) {
  .home-map-wrap .home-map-area {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
  }
  .home-map-wrap .home-map-inner {
    order: 1;
  }
  .home-map-wrap .home-quick-stats {
    order: 2;
    position: static;
    inset: auto;
    top: auto;
    left: auto;
    z-index: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: 100%;
    padding: 0;
    pointer-events: auto;
  }
  .home-map-wrap .qs-band {
    width: 100%;
    max-width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    grid-template-columns: auto 1fr;
    gap: 10px;
    background: var(--surface-solid);
  }
  .home-map-wrap .qs-band-tag {
    font-size: 10px;
    padding: 5px 9px;
    letter-spacing: 0.12em;
  }
  /* Pills become a horizontal scroll inside each band — every item
     stays reachable on touch even with 6+ pills per band. */
  .home-map-wrap .qs-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 0;
  }
  .home-map-wrap .qs-pill {
    flex: 0 1 auto;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .home-map-wrap .qs-band-tag { font-size: 9px; padding: 4px 7px; }
  .home-map-wrap .home-map-area { padding: 8px; gap: 10px; }
  .home-map-wrap .qs-pill {
    font-size: 10px;
    padding: 4px 8px;
  }
  .home-map-wrap .qs-pill-name { font-size: 10px; }
  .home-map-wrap .qs-pill-value { font-size: 11px; }
}

.qs-pill-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--state-color, var(--accent));
  box-shadow: 0 0 5px var(--state-color, var(--accent));
}
.qs-pill.state-2 .qs-pill-dot,
.qs-pill.status-alarm .qs-pill-dot {
  animation: qs-dot-pulse 1.3s infinite;
}
@keyframes qs-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6),  0 0 5px #ef4444; }
  50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0),  0 0 8px #ef4444; }
}

/* SanLuis Buildings pattern: photo flows at width:100%, height adapts
   to natural aspect; markers absolute in % over .inner. No transform,
   no canvas. Page scrolls normally if content exceeds viewport. */
.home-map-inner {
  position: relative;
  width: 100%;
}

.home-map-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ============================================================
   ZONES — clickable plant polygons (replaces individual markers)
   ============================================================ */

/* SVG host overlaying the photo at 100% — viewBox 0..100 lets us use
   percent coordinates directly for polygon points. */
.home-zones {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;       /* polygons opt back in below */
  z-index: 3;
}

.home-zone {
  fill: rgba(0, 212, 170, 0.0);             /* invisible by default */
  stroke: rgba(0, 212, 170, 0.0);
  stroke-width: 0.4;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}
/* Debug mode: append ?debugZones=1 to URL to outline zones */
.home-zones.debug .home-zone {
  fill: rgba(0, 212, 170, 0.18);
  stroke: rgba(0, 212, 170, 0.85);
  stroke-width: 0.6;
}
.home-zone:hover,
.home-zone.hover {
  fill: rgba(0, 212, 170, 0.18);
  stroke: rgba(0, 212, 170, 0.95);
  filter: drop-shadow(0 0 6px rgba(0, 212, 170, 0.55));
}
.home-zone.highlighted {
  fill: rgba(0, 212, 170, 0.22);
  stroke: rgba(0, 212, 170, 1);
  filter: drop-shadow(0 0 8px rgba(0, 212, 170, 0.7));
}
.home-zone.dimmed {
  fill: var(--surface);
}

/* ============================================================
   POPOVER — equipment list when a zone is clicked
   ============================================================ */
.home-zone-popover {
  position: absolute;
  z-index: 12;
  min-width: 240px;
  max-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface-solid);
  border: 1px solid rgba(0, 212, 170, 0.32);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: var(--text-primary);
  animation: zone-popover-in 0.12s ease-out;
}
@keyframes zone-popover-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.zone-popover-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.zone-popover-title {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: 1;
}
.zone-popover-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.zone-popover-close {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}
.zone-popover-close:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.zone-popover-list {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zone-popover-empty {
  padding: 18px 12px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

.zone-popover-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-primary);
  transition: background 0.12s ease;
}
.zone-popover-row:hover { background: rgba(0, 212, 170, 0.08); }

.zpr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--surface-hover);
  color: var(--text-muted);
}
.zpr-name {
  font-weight: 500;
  letter-spacing: 0.02em;
}
.zpr-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* Per-state row accents (matches sidebar leds + zone semantics). */
.zone-popover-row.status-cooling .zpr-icon,
.zone-popover-row.state-0 .zpr-icon { color: var(--ok-fg); background: rgba(0,230,118,0.10); }
.zone-popover-row.status-standby .zpr-icon { color: var(--offline-fg); background: rgba(203,213,225,0.08); }
.zone-popover-row.state-1 .zpr-icon { color: var(--warn-fg); background: rgba(251,191,36,0.10); }
.zone-popover-row.status-alarm .zpr-icon,
.zone-popover-row.state-2 .zpr-icon { color: var(--critical-fg); background: rgba(255,68,85,0.12); }
.zone-popover-row.status-offline .zpr-icon { color: var(--offline-fg); background: rgba(136,136,136,0.10); }


/* ============================================================
   EQUIPMENT — toolbar (planta tabs + search) + grid 3x4 + paginación
   ============================================================ */
.equipment-page-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.equipment-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.toolbar-row {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.toolbar-types { padding-top: 4px; }

.planta-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

/* REQ-2: vertical gap below schedule planta tabs row */
.schedule-planta-tabs { margin-bottom: 12px; }

.planta-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.planta-tab:hover {
  background: rgba(0, 212, 170, 0.06);
  color: var(--accent);
}
.planta-tab.active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.4);
  color: var(--accent);
}

/* Type tabs (second row) — slightly different visual to distinguish from planta. */
.type-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.type-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.type-tab .tt-icon {
  font-size: 13px;
  color: var(--text-muted);
}
.type-tab .tt-count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--border);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 22px;
  text-align: center;
}
.type-tab:hover {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.3);
  color: var(--accent);
}
.type-tab:hover .tt-icon { color: var(--accent); }
.type-tab.active {
  background: rgba(0, 212, 170, 0.16);
  border-color: var(--accent);
  color: var(--accent);
}
.type-tab.active .tt-icon { color: var(--accent); }
.type-tab.active .tt-count {
  background: rgba(0, 212, 170, 0.18);
  color: var(--accent);
}
.type-tab.empty {
  opacity: 0.5;
}
.type-tab.empty:hover {
  /* still clickable so the user can deactivate or notice */
  opacity: 0.85;
}

.equipment-search-wrap {
  position: relative;
  min-width: 240px;
}

@media (max-width: 480px) {
  .equipment-search-wrap {
    min-width: 0;
    width: 100%;
  }
  .equipment-search {
    min-width: 0;
    width: 100%;
  }
}

.equipment-search {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}
.equipment-search:focus { border-color: var(--accent); }

.equipment-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.equipment-section-header {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
}
.equipment-section-header.planta-header {
  font-size: 13px;
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--border);
  padding: 14px 0 6px;
}
.equipment-subsection-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 8px 0 4px;
  margin-top: 4px;
}
.equipment-subsection-header .ess-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--surface-hover);
  font-size: 12px;
  color: var(--text-muted);
}

.equipment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(140px, auto);
  gap: 14px;
}

@media (max-width: 1180px) {
  .equipment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.equipment-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.equipment-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--state-color, var(--accent));
  opacity: 0.7;
}
.equipment-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 2px;
  height: 28%;
  background: var(--type-color, var(--accent));
  opacity: 0.55;
}

.equipment-card.type-up         { --type-color: #00d4aa; }
.equipment-card.type-carcamo    { --type-color: #3b82f6; }
.equipment-card.type-datalogger { --type-color: #f59e0b; }

.equipment-card.status-cooling, .equipment-card.state-0 { --state-color: #00d4aa; }
.equipment-card.status-online                           { --state-color: #00d4aa; }
.equipment-card.status-standby                          { --state-color: #94a3b8; }
.equipment-card.state-1                                 { --state-color: #fbbf24; }
.equipment-card.status-alarm, .equipment-card.state-2   { --state-color: #ef4444; }
.equipment-card.status-offline                          { --state-color: #475569; }

.equipment-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 212, 170, 0.05);
}
.equipment-card:hover::before { opacity: 1; }

.equipment-card-header {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 8px;
}

.card-type-icon {
  font-size: 13px;
  color: var(--text-muted);
}

.card-name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-status-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
}
.equipment-card.status-cooling .card-status-badge,
.equipment-card.state-0 .card-status-badge { background: rgba(0,230,118,0.14);   color: var(--ok-fg); }
.equipment-card.status-standby .card-status-badge { background: rgba(203,213,225,0.14); color: var(--offline-fg); }
.equipment-card.state-1 .card-status-badge        { background: rgba(251,191,36,0.14);  color: var(--warn-fg); }
.equipment-card.status-alarm .card-status-badge,
.equipment-card.state-2 .card-status-badge        { background: rgba(255,68,85,0.18);   color: var(--critical-fg); }
.equipment-card.status-offline .card-status-badge { background: rgba(136,136,136,0.18); color: var(--offline-fg); }

.equipment-card-metrics {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.card-metric {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-metric-label {
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-metric-value {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.equipment-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.card-type-label  { font-weight: 600; }
.card-planta-label { font-family: var(--font-mono); }

/* Pagination */
.equipment-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pag-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pag-btn:not(:disabled):hover {
  background: rgba(0, 212, 170, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.pag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pag-info {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.pag-info strong { color: var(--accent); font-family: var(--font-mono); }
.pag-count       { color: var(--text-muted); }

/* legacy status-badge (kept for detail shell + old widgets) */
.status-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
}
.status-badge.status-online  { background: rgba(0, 230, 118, 0.12); color: var(--ok-fg); }
.status-badge.status-alarm   { background: rgba(255, 68, 85, 0.14); color: var(--critical-fg); }
.status-badge.status-offline { background: rgba(136, 136, 136, 0.16); color: var(--offline-fg); }

/* ============================================================
   UP DETAIL — Cockpit estilo Casino
   ============================================================ */
.up-detail-shell {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

/* ---- Cockpit grid ---- */
.up-cockpit {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(440px, 1fr);
  grid-template-areas:
    "metrics metrics metrics"
    "left    center  right";
  gap: 12px;
  padding: 14px;
  background: var(--bg);
}
.up-cockpit__metrics {
  grid-area: metrics;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Desktop: 5 primary KPIs row 1, 6 secondary row 2 (user-defined split).
   Mobile (<768px): both rows reflow as auto-fit uniform grids so the 11
   KPIs wrap naturally without forcing the 5/6 split on a narrow viewport. */
.up-kpi-row {
  display: grid;
  gap: 8px;
}
.up-kpi-row--primary   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.up-kpi-row--secondary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .up-kpi-row--primary   { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .up-kpi-row--secondary { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .up-kpi-row--primary,
  .up-kpi-row--secondary {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
.up-cockpit__left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.up-cockpit__center {
  grid-area: center;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(0,212,170,0.05) 0%, transparent 60%),
    var(--bg);
  border: 1px solid var(--border-light);
  min-width: 0;
  min-height: 0;
}
.up-cockpit__right {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.up-cockpit__left::-webkit-scrollbar,
.up-cockpit__right::-webkit-scrollbar { width: 3px; }
.up-cockpit__left::-webkit-scrollbar-thumb,
.up-cockpit__right::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@media (max-width: 1280px) {
  .up-cockpit { grid-template-columns: 200px minmax(0, 1fr) 280px; }
}
@media (max-width: 960px) {
  .up-cockpit {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto var(--viewer-height) auto;
    grid-template-areas:
      "metrics"
      "right"
      "center"
      "left";
  }
  /* KPI columns at ≤960px are driven by --kpi-cols-primary/secondary tokens */
}

.up-viewer {
  position: absolute;
  inset: 0;
  background: transparent;
}
.up-viewer canvas { display: block; }

.up-hint-overlay {
  position: absolute;
  bottom: 10px; left: 10px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.up-rotate-toggle {
  position: absolute;
  bottom: 10px; right: 10px;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  z-index: 6;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: 1px solid rgba(0, 212, 170, 0.35);
  background: rgba(0, 212, 170, 0.12);
  color: var(--accent);
}
.up-rotate-toggle.is-on {
  border-color: rgba(0, 212, 170, 0.45);
  background: rgba(0, 212, 170, 0.16);
  color: var(--accent-light);
  box-shadow: 0 0 12px rgba(0, 212, 170, 0.18);
}
.up-rotate-toggle.is-off {
  border-color: var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  box-shadow: none;
}
.up-rotate-toggle:hover { filter: brightness(1.15); }
.up-rotate-toggle:active { transform: translateY(1px); }

.detail-planta-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(0, 212, 170, 0.10);
  border: 1px solid rgba(0, 212, 170, 0.28);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

/* ---- Generic panel + KPI ---- */
.up-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.25s ease;
  box-shadow: var(--shadow-md);
}
.up-panel:hover { border-color: var(--border-hover); }
.up-panel-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* Casino-style dense KPI with the signature top glow + radial halo.
   - top-bar 2px accent with 12px box-shadow glow (the "iluminada" line).
   - background combines a base gradient with a radial halo from the top
     blended via screen mode — gives the card a subtle colored aura.
   - hover lift 2px + deeper shadow + brighter border. */
.up-kpi {
  position: relative;
  background:
    var(--surface),
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--kpi-color, transparent) 0%, transparent 70%);
  background-blend-mode: normal, screen;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  color: var(--kpi-color, var(--text-primary));
  transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  box-shadow: var(--shadow-md);
}
.up-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kpi-color, var(--accent));
  opacity: 0.9;
  box-shadow: 0 0 12px var(--kpi-color, var(--accent)),
              0 0 20px color-mix(in srgb, var(--kpi-color, var(--accent)) 50%, transparent);
}
.up-kpi:hover {
  border-color: color-mix(in srgb, var(--kpi-color, var(--accent)) 35%, var(--border));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.up-kpi.is-offline { opacity: 0.45; filter: grayscale(0.6); }
.up-kpi-label {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Mobile KPI label abbreviations (REQ-13) ── */
/* At ≤480px: hide the full label text (font-size:0) and show the
   abbreviated form via ::before + attr(data-mobile-label).
   At ≥481px: default behavior — ::before not fired, font-size normal. */
@media (max-width: 480px) {
  .up-kpi-label[data-mobile-label] {
    font-size: 0;
  }
  .up-kpi-label[data-mobile-label]::before {
    content: attr(data-mobile-label);
    font-size: 9px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
}
.up-kpi-value {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--kpi-color, var(--text-primary));
  text-shadow: 0 0 12px color-mix(in srgb, var(--kpi-color, var(--accent)) 30%, transparent);
  display: flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1;
  margin-top: 1px;
}
.up-kpi-value small {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  text-shadow: none;
}

/* ============================================================
   COCKPIT — left column dense panels (casino-style)
   ============================================================ */

.up-panel-title-mini {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.up-identity-panel { padding: 12px 14px; }
.up-identity-name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.up-identity-sub {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.up-identity-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0, 212, 170, 0.12);
  border: 1px solid rgba(0, 212, 170, 0.28);
}
.up-identity-status.status-cooling { --state-color: #22c55e; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); }
.up-identity-status.status-online  { --state-color: #22c55e; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.28); }
.up-identity-status.status-standby { --state-color: #94a3b8; background: rgba(148, 163, 184, 0.10); border-color: var(--border); }
.up-identity-status.status-offline { --state-color: #475569; background: rgba(71, 85, 105, 0.12); border-color: var(--border); }
.up-identity-status.status-alarm   { --state-color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.32); }
.up-identity-status .up-side-status-dot {
  width: 7px;
  height: 7px;
  background: var(--state-color, var(--accent));
  box-shadow: 0 0 6px var(--state-color, var(--accent));
}
.up-identity-status [data-prop="status-label"] {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--state-color, var(--text-primary));
  text-transform: uppercase;
}
.up-identity-status.status-alarm .up-side-status-dot { animation: upPulse 1.1s ease-in-out infinite; }

.up-protections-panel .up-leds-protections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}

/* ============================================================
   COCKPIT — right column "Control de Sistemas" (casino-style)
   ============================================================ */

.up-control-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.up-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.up-control-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.up-control-pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: upPulse 2s ease-in-out infinite;
}
.up-control-pulse.status-alarm { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.up-control-pulse.status-offline { background: #475569; box-shadow: none; animation: none; }
.up-control-pulse.status-standby { background: #94a3b8; box-shadow: 0 0 6px #94a3b8; }

.up-modo-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.up-modo-btn {
  padding: 12px 4px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 200ms ease;
}
.up-modo-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-hover);
  color: var(--text-secondary);
}
.up-modo-btn.is-active {
  background: rgba(34, 197, 94, 0.07);
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--ok-fg);
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.08), inset 0 0 8px rgba(34, 197, 94, 0.06);
}

.up-control-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* REQ-CS2: mode-aware visibility — toggled by applyActiveModo() in UpDetail.js */
.up-control-section.is-hidden,
.up-setpoint-panel.is-hidden {
  display: none;
}
.up-control-section-title {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.up-control-section-hint {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 6px;
  opacity: 0.7;
}

.up-devices {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.up-device-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  transition: border-color 0.18s ease;
}
.up-device-row:hover { border-color: var(--border); }
.up-device-row .up-led {
  width: 10px; height: 10px;
  flex-shrink: 0;
}
.up-device-label {
  flex: 1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.up-device-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}
.up-device-badge.is-on {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: var(--ok-fg);
}
.up-device-badge.is-off {
  background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.up-device-badge:not(:disabled):hover {
  filter: brightness(1.25);
  box-shadow: 0 0 0 2px var(--border);
}
.up-device-badge:not(:disabled):active {
  transform: scale(0.96);
}
.up-device-badge:disabled {
  cursor: not-allowed;
  opacity: 0.78;
}
/* Locked container: no-op visual on rows; affordance lives on the badge. */
.up-devices.is-locked .up-device-badge {
  cursor: not-allowed;
}

/* ---- Status panel (left column header) ---- */
.up-status-panel {
  position: relative;
  border-left: 3px solid var(--state-color, var(--accent));
  overflow: hidden;
}
.up-status-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 0% 50%, var(--state-color, transparent) 0%, transparent 70%);
  opacity: 0.1;
  pointer-events: none;
}
.up-status-panel.status-cooling { --state-color: #00d4aa; }
.up-status-panel.status-online  { --state-color: #00d4aa; }
.up-status-panel.status-standby { --state-color: #94a3b8; }
.up-status-panel.status-offline { --state-color: #475569; }
.up-status-panel.status-alarm   { --state-color: #ef4444; }
.up-status-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.up-side-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--state-color, var(--accent));
  box-shadow: 0 0 12px var(--state-color, var(--accent)), 0 0 4px var(--state-color, var(--accent));
}
.up-side-status-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--state-color, var(--text-primary));
  text-shadow: 0 0 10px color-mix(in srgb, var(--state-color, var(--accent)) 40%, transparent);
}
.up-status-panel.status-alarm .up-side-status-dot { animation: upPulse 1.1s ease-in-out infinite; }

/* ---- Setpoint display (left column, readonly) ---- */
.up-setpoint-display {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 0 18px var(--accent-glow);
  line-height: 1;
  letter-spacing: -0.01em;
}
.up-setpoint-display small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ---- Edit Schedule button (per-UP, opens native WebScheduler) ---- */
.up-edit-schedule-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  border: 1px solid var(--accent-glow);
  border-radius: 4px;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.up-edit-schedule-btn:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}
.up-edit-schedule-btn:active { transform: translateY(1px); }
.up-edit-schedule-btn svg { flex: 0 0 auto; }

/* ---- Aire legend ---- */
.up-aire-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.up-aire-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.up-aire-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.up-aire-return { background: #ff5533; }
.up-aire-supply { background: #44bbff; }

/* ---- Analytics sections (casino-style) ---- */
.up-temperatures-section,
.up-trends-section {
  padding: 0 14px 14px;
  background: var(--bg);
}
.up-section-header {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 14px;
  padding-left: 2px;
}

/* ---- Temperatures: 3 cards (gauge + bigvalue + status) ---- */
.up-temperatures-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.up-temp-card {
  background: var(--surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent-dim);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.up-temp-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-bottom: 4px;
}
.up-temp-content {
  display: flex;
  align-items: center;
  gap: 14px;
}
.up-temp-gauge {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.up-temp-gauge .up-gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  pointer-events: none;
}
.up-temp-gauge .up-gauge-text span {
  font-size: 17.6px;
  font-weight: 700;
  line-height: 1.1;
}
.up-temp-gauge .up-gauge-text small {
  font-size: 9.6px;
  color: var(--text-muted);
}
.up-temp-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.up-temp-bigvalue {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  line-height: 1;
}
.up-temp-bigvalue span {
  font-size: 32px;
  font-weight: 700;
  transition: color 0.5s ease;
}
.up-temp-bigvalue small {
  font-size: 12.8px;
  color: var(--text-muted);
}
.up-temp-status {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.up-temp-status .up-temp-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}
.up-temp-status.tone-ok    { color: var(--ok-fg); }
.up-temp-status.tone-low   { color: var(--info-fg); }
.up-temp-status.tone-high  { color: var(--warn-fg); }
.up-temp-status.tone-muted { color: var(--text-muted); }

/* ---- Trends section: 2 cards with range tabs ---- */
.up-trends-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 14px;
}
@media (max-width: 1100px) {
  .up-trends-grid { grid-template-columns: 1fr; }
}
.up-trend-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-md);
}
.up-trend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.up-trend-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.up-trend-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.up-baseline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 200ms;
}
.up-baseline-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.up-baseline-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.up-baseline-btn.is-active svg line { stroke: var(--accent); }
.up-baseline-btn svg { flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────────
   SDD mx60-detail-charts-parity 2026-05-12 — Cárcamo & Datalogger
   baseline button + controls (replica de .up-baseline-btn).
   Notes:
     - Selectors use `--active` BEM modifier (not `is-active` as UP) to
       keep state-class naming local to each module's controller logic.
     - Visual identical to UP for consistency across detail views.
   ────────────────────────────────────────────────────────────────────── */
.carc-trends-controls,
.dt-trends-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.carc-baseline-btn,
.dt-baseline-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 200ms;
}
.carc-baseline-btn:hover,
.dt-baseline-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.carc-baseline-btn--active,
.dt-baseline-btn--active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.carc-baseline-btn--active svg line,
.dt-baseline-btn--active svg line { stroke: var(--accent); }
.carc-baseline-btn svg,
.dt-baseline-btn svg { flex-shrink: 0; }

/* ──────────────────────────────────────────────────────────────────────
   SDD mx60-version-notification 2026-05-12 — UpdateBanner
   Banner fixed top-center que aparece cuando hay un nuevo deploy.
   Visual: glass + cyan accent (matching MX60 design system).
   z-index 9999 → above Toast, AlarmNotesModal, Confirm, 3D canvas.
   ────────────────────────────────────────────────────────────────────── */
.mx60-update-banner {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--surface-solid);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--accent-glow);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--accent-dim);
  max-width: calc(100vw - 28px);
  font-family: var(--font-body);
}
.mx60-update-banner__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  animation: mx60-update-banner-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.mx60-update-banner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mx60-update-banner__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary, #f0f6ff);
  letter-spacing: 0.01em;
}
.mx60-update-banner__subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted, #94a3b8);
}
.mx60-update-banner__button {
  margin-left: 4px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--accent-glow);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 200ms, border-color 200ms;
  flex-shrink: 0;
}
.mx60-update-banner__button:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}
@keyframes mx60-update-banner-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ── Range tabs — wrap at narrow widths (REQ-9) ── */
.up-range-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.up-range-tab {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  transition: 150ms;
}
.up-range-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.up-range-tab.is-active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
}
.up-trend-canvas-wrap {
  position: relative;
  height: 200px;
}
.up-trend-canvas-wrap canvas { display: block; }

/* HTML legend — replaces Chart.js built-in legend so we control the layout.
   - .is-row: 1 row flex (≤2 datasets, e.g. Zona only or Zona + ayer).
   - .is-grid: 2-col grid (4 datasets: live × 2 + baseline × 2). Each
     baseline lands DIRECTLY below its live counterpart by source order. */
.up-trend-legend {
  margin-bottom: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--text-muted);
}
.up-trend-legend:empty { display: none; }
.up-trend-legend.is-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.up-trend-legend.is-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 6px;
}
.up-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  user-select: none;
  transition: opacity 0.15s ease;
  min-width: 0;
}
.up-legend-item:hover { opacity: 0.85; }
.up-legend-item.is-hidden { opacity: 0.4; }
.up-legend-item.is-hidden .up-legend-text { text-decoration: line-through; }
.up-legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}
.up-legend-dot.is-dashed {
  width: 18px;
  height: 0;
  border-radius: 0;
  border-bottom: 2px dashed currentColor;
  background: transparent !important;
  box-shadow: none !important;
}
.up-legend-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* ---- Estados (LEDs) ---- */
.up-leds {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.up-leds-protections {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.up-led-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.up-led {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.up-led.status-on,
.up-led.status-ok {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}
.up-led.status-alarm {
  background: var(--critical);
  box-shadow: 0 0 8px var(--critical), 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
  animation: upPulse 1.1s ease-in-out infinite;
}
.up-led.status-off {
  background: var(--border);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}
.up-led-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
@keyframes upPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---- Status legend (OFF / ON / ALARMA) ---- */
.up-status-legend {
  padding: 12px 14px;
}

@media (max-width: 768px) {
  .up-status-legend {
    width: 100%;
  }
  .up-status-legend-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
}
.up-status-legend-title {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.up-status-legend-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.up-status-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.up-status-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.up-status-legend-dot.is-off {
  background: #3aa6ff;
  box-shadow: 0 0 6px rgba(58, 166, 255, 0.533);
}
.up-status-legend-dot.is-on {
  background: #00ff66;
  box-shadow: 0 0 6px rgba(0, 255, 102, 0.533);
}
.up-status-legend-dot.is-alarm {
  background: #ff2233;
  box-shadow: 0 0 6px rgba(255, 34, 51, 0.533);
}
.up-status-legend-label {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-weight: 600;
}

/* ---- Modo de Operación (drag-drop chips → drop zone) ---- */
.up-modo-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.up-modo-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.up-modo-chip {
  padding: 8px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: grab;
  user-select: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 200ms ease;
}
.up-modo-chip:hover {
  background: var(--surface-dim);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.up-modo-chip.is-dragging {
  cursor: grabbing;
  opacity: 0.45;
}
.up-modo-chip.is-active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow), inset 0 0 8px var(--accent-dim);
}
.up-modo-drop {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-hover);
  text-align: center;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.up-modo-drop.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: inset 0 0 16px var(--accent-glow);
}
.up-modo-drop-label {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.up-modo-drop-current {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
  text-shadow: 0 0 12px var(--accent-glow);
  transition: color 250ms ease, text-shadow 250ms ease;
}
.up-modo-drop-hint {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── 3D viewer (casino pattern) ──
   The canvas stays visible at every breakpoint. No "Ver 3D" button, no
   fullscreen overlay. On mobile the cockpit collapses to a single column
   and the viewer takes 60vh of height (replaces the 360px hard-coded value
   in the existing 960px breakpoint when at <768px). */
@media (max-width: 768px) {
  .up-cockpit {
    grid-template-rows: auto auto 60vh auto !important;
  }
  /* Hint overlay shrinks; rotation toggle keeps full label */
  .up-hint-overlay {
    font-size: 9px;
    padding: 4px 8px;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 480px) {
  .up-cockpit {
    grid-template-rows: auto auto 55vh auto !important;
  }
  .up-hint-overlay {
    display: none; /* save space; controls still discoverable via touch */
  }
}

/* ── Casino-style aggressive trims at <480px ──
   Inverse visual hierarchy: keep critical signals (id, status dot, name),
   drop secondary text (status label, planta badge, type pill) so cards
   stay readable on phones. */
@media (max-width: 480px) {
  /* Equipment grid: hide verbose status badge — color stripe still signals */
  .equipment-card .card-status-badge {
    display: none;
  }
  /* Configuración cards: drop planta badge, keep id + label + status + chips */
  .cfg-card-planta {
    display: none;
  }
  /* Status legend in UpDetail: tighter padding */
  .up-status-legend {
    padding: 8px 10px;
  }
  .up-status-legend-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  /* Section headers: smaller letter-spacing for narrow viewports */
  .up-section-header {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

/* ── Modo panel — passive display at ≤768px (REQ-8) ── */
@media (max-width: 768px) {
  .up-modo-drop.is-touch-passive {
    border-style: solid;
    border-color: var(--border);
    cursor: default;
  }
  .up-modo-drop.is-touch-passive .up-modo-drop-hint {
    display: none;
  }
  .up-modo-chip {
    cursor: pointer;
  }
}

/* ---- Configuración page (dense matrix + filters + inline mini-chips) ---- */
.cfg-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.cfg-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cfg-title {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.cfg-subtitle {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.cfg-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .cfg-filters {
    flex-direction: column;
    align-items: stretch;
  }
  .cfg-filter {
    width: 100%;
  }
}
.cfg-filter {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2364748b' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.cfg-filter:hover {
  border-color: var(--accent);
}
.cfg-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.cfg-counter {
  margin-left: auto;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.cfg-table-wrap {
  flex: 1;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.cfg-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-primary);
}
.cfg-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-solid);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.cfg-table tbody td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.cfg-table tbody tr:hover td {
  background: var(--surface-hover);
}
.cfg-cell-id {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  width: 90px;
}
.cfg-cell-label {
  font-weight: 600;
  color: var(--text-primary);
}
.cfg-cell-planta {
  color: var(--text-muted);
  width: 110px;
}
.cfg-cell-status { width: 130px; }
.cfg-cell-modo  { width: 320px; }

.cfg-status-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cfg-status-chip.status-cooling {
  background: rgba(0, 255, 102, 0.12);
  border: 1px solid rgba(0, 255, 102, 0.4);
  color: var(--ok-fg);
}
.cfg-status-chip.status-standby {
  background: rgba(58, 166, 255, 0.1);
  border: 1px solid rgba(58, 166, 255, 0.3);
  color: var(--info-fg);
}
.cfg-status-chip.status-alarm {
  background: rgba(255, 34, 51, 0.14);
  border: 1px solid rgba(255, 34, 51, 0.5);
  color: var(--critical-fg);
  animation: cfgAlarmPulse 1.6s ease-in-out infinite;
}
.cfg-status-chip.status-offline {
  background: rgba(100, 116, 139, 0.1);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
@keyframes cfgAlarmPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.cfg-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  max-width: 300px;
}
.cfg-chip {
  padding: 5px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 200ms ease;
}
.cfg-chip:hover {
  background: var(--surface-dim);
  border-color: var(--accent);
  color: var(--text-primary);
}
.cfg-chip.is-active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow), inset 0 0 6px var(--accent-dim);
  cursor: default;
}
.cfg-chip.is-active:hover {
  background: var(--accent-glow);
}
/* ── Configuración matrix — mobile card layout (REQ-7, Path B) ── */
/* JS (Configuracion.js) swaps between rowHtml (table) and cardHtml (card list)
   based on matchMedia('(max-width: 768px)'). The CSS only styles the card
   elements; the table is always present in the markup at ≥769px. */
.cfg-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cfg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-md);
}
.cfg-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.cfg-card-id {
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.cfg-card-label {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.cfg-card-planta {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cfg-card-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.cfg-empty {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cfg-error {
  padding: 32px;
  text-align: center;
  color: var(--critical-fg);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
}

/* ---- Toast (bottom-right with 5s undo window) ---- */
.mx60-toast-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mx60-toast {
  pointer-events: auto;
  background: var(--surface-solid);
  border: 1px solid var(--accent-glow);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  min-width: 280px;
  max-width: 380px;
  position: relative;
  overflow: hidden;
  font-family: 'DM Sans', system-ui, sans-serif;
  animation: mx60ToastEnter 200ms ease-out;
}
.mx60-toast.is-leaving { animation: mx60ToastLeave 200ms ease-in forwards; }
@keyframes mx60ToastEnter { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes mx60ToastLeave { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }
.mx60-toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.mx60-toast-msg {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.3;
}
.mx60-toast-undo {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent-glow);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--accent);
  font-family: 'JetBrains Mono', 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.mx60-toast-undo:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.mx60-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ---- Control ---- */
.up-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.up-control-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  flex: 0 0 auto;
}
/* Modern stepper — circular buttons + center value display + unit pill.
   Casino-style: high contrast, generous touch targets, cyan accent. */
.up-stepper {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  align-items: center;
  gap: 8px;
  padding: 6px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
}
/* Input-only variant — used when +/- steppers are removed (integer entry).
   The unit (°C) sits flush against the input on the right side, sharing the
   same visual frame so the operator reads "21 °C" as a single chip. */
.up-stepper.up-stepper--input-only {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 0;
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  gap: 0;
}
.up-stepper.up-stepper--input-only .up-step-input {
  text-align: center;
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 8px 4px 8px 12px;
  margin: 0;
  width: 50px;
}
.up-stepper.up-stepper--input-only .up-step-input:focus {
  outline: none;
  background: var(--surface-hover);
}
.up-stepper.up-stepper--input-only .up-step-unit {
  /* Override the absolute-positioned floating chip from base .up-step-unit.
     Inside the input-only variant the unit sits inline, flush with input. */
  position: static;
  bottom: auto;
  right: auto;
  background: transparent;
  border-radius: 0;
  padding: 8px 12px 8px 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}
.up-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-glow);
  background: var(--accent-dim);
  color: var(--accent);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.18s ease;
  padding: 0;
}
.up-step:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.up-step:active { transform: scale(0.94); }

.up-step-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
  outline: none;
  text-shadow: 0 0 14px var(--accent-glow);
  letter-spacing: -0.01em;
}
.up-step-input:focus {
  background: var(--accent-dim);
  border-radius: 6px;
}
/* Hide native spinner buttons */
.up-step-input::-webkit-outer-spin-button,
.up-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.up-step-input[type="number"] { -moz-appearance: textfield; }

.up-step-unit {
  position: absolute;
  bottom: -10px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 4px;
  font-weight: 700;
}
.up-select {
  background: var(--surface-hover);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  min-width: 96px;
}
.up-select:focus {
  border-color: var(--accent);
}

/* ============================================================
   DETAIL — placeholder shell (sub-paso 3 will replace per-type)
   ============================================================ */
.detail-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 320px;
}

/* ============================================================
   Detail header — futurist minimalist (NO display:contents hack)
   ┌─────────────────────────────────────────────────────────────┐
   │ [‹]   UNIDAD PAQUETE  ·  PLANTA 1               ● PRENDIDO  │
   │       ▌ UP03                                       up03-p1  │
   └─────────────────────────────────────────────────────────────┘

   The title-wrap is a real grid with 4 areas. No more 110px-margin
   hack on the second tag — each tag has its own grid cell, fitting
   its content width naturally.
   ============================================================ */
.detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  margin-bottom: 28px;
  padding: 20px 4px 20px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.detail-header::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-stripe, #00d4aa), transparent);
  opacity: 0.7;
}

/* Back button — minimalist chevron icon, no text. */
.detail-back {
  grid-column: 1;
  align-self: center;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
}
.detail-back svg { display: block; }
.detail-back:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateX(-3px);
  box-shadow: 0 0 18px var(--accent-glow);
}
.detail-back:active { transform: translateX(-3px) scale(0.94); }

/* Title-wrap is a 4-area grid:
   row 1: type-tag | planta-tag | (flex space) | status
   row 2: title (spans first 3 cols)           | meta-id
   The accent stripe is rendered via ::before on the wrap itself. */
.detail-title-wrap {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "type   planta  .       status"
    "title  title   title   meta";
  align-items: center;
  column-gap: 10px;
  row-gap: 5px;
  position: relative;
  padding-left: 16px;
  min-width: 0;
}
.detail-title-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--accent-stripe, #00d4aa) 18%,
    var(--accent-stripe, #00d4aa) 82%,
    transparent 100%);
  box-shadow: 0 0 12px var(--accent-stripe, #00d4aa);
}

/* Subtitle row — tags as plain mono text, separated by a · */
.detail-type-tag,
.detail-planta-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0;
  border: none;
  background: transparent;
  line-height: 1;
  align-self: end;
  white-space: nowrap;
}
.detail-type-tag    { grid-area: type;   justify-self: start; }
.detail-planta-tag  { grid-area: planta; justify-self: start; }
.detail-type-tag.detail-type-up         { color: var(--accent-fg); }
.detail-type-tag.detail-type-carcamo     { color: var(--info-fg); }
.detail-type-tag.detail-type-datalogger  { color: var(--warn-fg); }
.detail-planta-tag {
  color: var(--text-muted);
  position: relative;
}
.detail-planta-tag::before {
  content: '·';
  color: var(--border);
  margin-right: 8px;
  font-weight: 400;
  display: inline-block;
}

/* Title — protagonist. Spans first 3 cols of the wrap grid. */
.detail-title {
  grid-area: title;
  align-self: start;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Per-type stripe color */
.detail-header:has(.detail-type-up)         { --accent-stripe: #00d4aa; }
.detail-header:has(.detail-type-carcamo)     { --accent-stripe: #3b82f6; }
.detail-header:has(.detail-type-datalogger)  { --accent-stripe: #f59e0b; }

/* Status pill — right-anchored on row 1 */
.detail-status {
  grid-area: status;
  align-self: end;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.detail-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor, 0 0 18px currentColor;
}
.detail-status.status-cooling,
.detail-status.status-online  { color: var(--ok-fg); border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.detail-status.status-cooling::before,
.detail-status.status-online::before  { animation: upPulse 1.8s ease-in-out infinite; }
.detail-status.status-standby { color: var(--offline-fg); border-color: var(--border); background: rgba(148, 163, 184, 0.06); }
.detail-status.status-offline { color: var(--text-muted); border-color: var(--border); background: rgba(71, 85, 105, 0.08); }
.detail-status.status-alarm   { color: var(--critical-fg); border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.10); animation: upPulse 1.2s ease-in-out infinite; }

/* ID meta — under status pill, right-aligned */
.detail-meta-id {
  grid-area: meta;
  align-self: start;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

@media (max-width: 768px) {
  .detail-header {
    column-gap: 14px;
    padding: 16px 0;
    margin-bottom: 18px;
  }
  .detail-back { width: 36px; height: 36px; }
  .detail-back svg { width: 16px; height: 16px; }
  .detail-title { font-size: 26px; }
  .detail-title-wrap { padding-left: 14px; column-gap: 8px; }
  .detail-status { padding: 6px 14px; font-size: 10px; gap: 7px; }
  .detail-status::before { width: 7px; height: 7px; }
  .detail-meta-id { font-size: 9px; }
}
@media (max-width: 480px) {
  /* Phone: drop to 2 rows on title-wrap — status moves below title */
  .detail-title-wrap {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "type   planta  ."
      "title  title   title"
      "status status  status";
    row-gap: 6px;
  }
  .detail-status {
    justify-self: start;
    margin-top: 4px;
  }
  .detail-meta-id { display: none; }
  .detail-title { font-size: 22px; }
  .detail-type-tag, .detail-planta-tag { font-size: 9px; }
  .detail-planta-tag::before { margin-right: 6px; }
}

.placeholder-card {
  text-align: center;
  padding: 32px 24px;
  border: 1px dashed rgba(0, 212, 170, 0.2);
  border-radius: var(--radius);
  background: rgba(0, 212, 170, 0.02);
}

.placeholder-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.placeholder-title {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.placeholder-body {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 18px;
}

.placeholder-body code {
  background: rgba(0, 212, 170, 0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-light);
}

.placeholder-data {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  text-align: left;
  max-width: 720px;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 11px;
}

.placeholder-data dt {
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.placeholder-data dd {
  color: var(--text-secondary);
  margin: 0;
  word-break: break-all;
}

.detail-not-found {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

/* ============================================================
   Alarms page
   Sub-paso (a): shelves + dense table + pagination + mobile cards.
   Tokens: reuses --accent, --critical, --warn, --ok, --border,
   --text-*, --font-mono, --surface, --radius from main.css :root.
   Source markers match HomeMap.js per-type palette:
     UP (Unidad Paquete) → green  #00d4aa  (var(--accent))
     Cárcamo             → blue   #3b82f6  (matches qs-band-carcamo)
     Datalogger          → amber  #f59e0b  (matches qs-band-datalogger)
   ============================================================ */

/* ── Shell layout ─────────────────────────────────────────── */
.alm-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}

.alm-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.alm-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.alm-counter {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ── Shelves container ────────────────────────────────────── */
.alm-shelves {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.alm-shelf {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alm-shelf-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 64px;
}

/* ── Filter chips (priority + type) — casino style ─────────
   Active: 2px top glow + cyan border.
   Hover: lift + border glow.
   ─────────────────────────────────────────────────────────── */
.alm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.18s ease,
    transform 0.15s ease;
}

.alm-chip:hover {
  background: rgba(0, 212, 170, 0.06);
  border-color: rgba(0, 212, 170, 0.28);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Active state: casino glow — top border accent + box-shadow ring */
.alm-chip.is-active {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.50);
  color: var(--accent);
  box-shadow:
    0 -2px 0 0 var(--accent) inset,
    0 0 10px rgba(0, 212, 170, 0.20),
    0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: default;
  transform: none;
}

.alm-chip-count {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--border-light);
  color: var(--text-muted);
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.alm-chip.is-active .alm-chip-count {
  background: rgba(0, 212, 170, 0.15);
  color: var(--accent);
}

/* Priority chip accents */
.alm-chip--high.is-active {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.50);
  color: var(--critical-fg);
  box-shadow:
    0 -2px 0 0 #ef4444 inset,
    0 0 10px rgba(239, 68, 68, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
.alm-chip--high.is-active .alm-chip-count {
  background: rgba(239, 68, 68, 0.15);
  color: var(--critical-fg);
}

.alm-chip--med.is-active {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.50);
  color: var(--warn-fg);
  box-shadow:
    0 -2px 0 0 #f59e0b inset,
    0 0 10px rgba(245, 158, 11, 0.20),
    0 2px 8px rgba(0, 0, 0, 0.25);
}
.alm-chip--med.is-active .alm-chip-count {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn-fg);
}

/* Type chip icons */
.alm-chip-icon {
  font-size: 12px;
  line-height: 1;
}
.src-icon--up         { color: var(--accent-fg); }
.src-icon--carcamo    { color: var(--info-fg); }
.src-icon--datalogger { color: var(--warn-fg); }

/* Type chip active — per-type palette */
.alm-chip--up.is-active {
  background: rgba(0, 212, 170, 0.10);
  border-color: rgba(0, 212, 170, 0.50);
  color: var(--accent-fg);
  box-shadow:
    0 -2px 0 0 #00d4aa inset,
    0 0 10px rgba(0, 212, 170, 0.20);
}
.alm-chip--up.is-active .alm-chip-count {
  background: rgba(0, 212, 170, 0.15);
  color: var(--accent-fg);
}

.alm-chip--carcamo.is-active {
  background: rgba(59, 130, 246, 0.10);
  border-color: rgba(59, 130, 246, 0.50);
  color: var(--info-fg);
  box-shadow:
    0 -2px 0 0 #3b82f6 inset,
    0 0 10px rgba(59, 130, 246, 0.20);
}
.alm-chip--carcamo.is-active .alm-chip-count {
  background: rgba(59, 130, 246, 0.15);
  color: var(--info-fg);
}

.alm-chip--datalogger.is-active {
  background: rgba(245, 158, 11, 0.10);
  border-color: rgba(245, 158, 11, 0.50);
  color: var(--warn-fg);
  box-shadow:
    0 -2px 0 0 #f59e0b inset,
    0 0 10px rgba(245, 158, 11, 0.20);
}
.alm-chip--datalogger.is-active .alm-chip-count {
  background: rgba(245, 158, 11, 0.15);
  color: var(--warn-fg);
}

/* ── Source markers — icon-based, color by type ────────────
   Holds the same ▭ ◯ ⬡ icons as HomeMap.js _typeIcon().
   UP        → ▭ green  (#00d4aa)
   Cárcamo   → ◯ blue   (#3b82f6)
   Datalogger→ ⬡ amber  (#f59e0b)
   ─────────────────────────────────────────────────────────── */
.src-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid;
  flex-shrink: 0;
}

.src-marker--up {
  border-color: rgba(0, 212, 170, 0.55);
  background: rgba(0, 212, 170, 0.10);
  color: var(--accent-fg);
}

.src-marker--carcamo {
  border-radius: 99px;
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.10);
  color: var(--info-fg);
}

.src-marker--datalogger {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.10);
  color: var(--warn-fg);
}

/* Equipo cell — marker + name + planta locator */
.alm-source-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.alm-source-loc {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* ── Dense table ──────────────────────────────────────────── */
.alm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.alm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.alm-th {
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.alm-th--source   { min-width: 180px; }
.alm-th--priority { width: 80px; }
.alm-th--class    { min-width: 150px; }
.alm-th--message  { min-width: 200px; }
.alm-th--when     { width: 110px; white-space: nowrap; }

.alm-row {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.12s ease;
}

.alm-row:last-child { border-bottom: 0; }

/* Sub-paso (a): rows not clickable — no hover lift, cursor default */
.alm-row { cursor: default; }

.alm-td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--text-secondary);
}

.alm-td--source {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.alm-td--message {
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
}

.alm-td--when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Priority badges */
.alm-priority {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.alm-priority--high {
  background: rgba(239, 68, 68, 0.14);
  border: 1px solid rgba(239, 68, 68, 0.45);
  color: var(--critical-fg);
}

.alm-priority--med {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.40);
  color: var(--warn-fg);
}

.alm-priority--low {
  background: rgba(100, 116, 139, 0.10);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* Class pills */
.alm-class-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────── */
.alm-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: radial-gradient(
    ellipse at 50% 60%,
    rgba(0, 212, 170, 0.04) 0%,
    transparent 70%
  );
  border-radius: var(--radius);
  border: 1px dashed rgba(0, 212, 170, 0.12);
}

/* ── Pagination ──────────────────────────────────────────── */
.alm-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 0 4px;
}

.alm-pager-btn {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.alm-pager-btn:hover:not(:disabled) {
  background: rgba(0, 212, 170, 0.08);
  border-color: rgba(0, 212, 170, 0.35);
  color: var(--accent);
}

.alm-pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.alm-pager-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ── Mobile card list (<768px) ───────────────────────────── */
.alm-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.alm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-md);
}

.alm-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.alm-card-class {
  display: flex;
}

.alm-card-message {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}

.alm-card-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Error state ─────────────────────────────────────────── */
.alm-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--critical);
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Mobile overrides ────────────────────────────────────── */
@media (max-width: 768px) {
  .alm-shelf-label {
    min-width: 56px;
    font-size: 9px;
  }

  .alm-chip {
    padding: 5px 10px;
    font-size: 10px;
  }

  .alm-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .alm-shelves {
    gap: 6px;
  }

  .alm-chip {
    padding: 4px 8px;
    font-size: 9px;
  }

  .alm-chip-icon {
    font-size: 11px;
  }
}

/* =========================================================================
   Datalogger detail
   Hero (color-coded JPG per planta) + reading panel + editable thresholds.
   Tones reuse the project palette: verde #22c55e, naranja #f59e0b, rojo #ef4444.
   ========================================================================= */
.dt-detail-shell {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 320px;
  gap: 14px;
  padding: 14px;
  background: var(--bg);
}
@media (max-width: 900px) {
  .dt-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Hero ---- */
.dt-hero {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.dt-hero-frame {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4 / 3;
  background: var(--bg);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dt-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.25s ease;
}
.dt-hero-state {
  position: absolute;
  bottom: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 5px;
  background: var(--surface-dim);
  border: 1px solid var(--border);
}
.dt-hero-state.tone-verde   { color: var(--ok-fg); border-color: rgba(34, 197, 94, 0.30); }
.dt-hero-state.tone-naranja { color: var(--warn-fg); border-color: rgba(245, 158, 11, 0.30); }
.dt-hero-state.tone-rojo    { color: var(--critical-fg); border-color: rgba(239, 68, 68, 0.30); }

/* ---- Side column ---- */
.dt-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dt-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.25s ease;
  box-shadow: var(--shadow-md);
}
.dt-panel:hover { border-color: var(--border-hover); }
.dt-panel-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ---- Reading panel ---- */
.dt-readout {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dt-readout-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dt-readout-value {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1;
}
.dt-readout-unit {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.dt-readout-row--secondary {
  margin-top: 2px;
}
.dt-readout-value-sm {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary, #cbd5e1);
}
.dt-readout-unit-sm {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* ---- Status pill (header) ---- */
.dt-status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.dt-status-pill.tone-ok    { background: rgba(34, 197, 94, 0.10);  border-color: rgba(34, 197, 94, 0.30);  color: var(--ok-fg); }
.dt-status-pill.tone-warn  { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: var(--warn-fg); }
.dt-status-pill.tone-alarm { background: rgba(239, 68, 68, 0.10);  border-color: rgba(239, 68, 68, 0.30);  color: var(--critical-fg); }

/* ---- Thresholds form ---- */
.dt-thresholds-help {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.dt-threshold-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dt-threshold-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.dt-threshold-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dt-threshold-input {
  width: 96px;
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 5px;
  text-align: right;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dt-threshold-input:focus {
  outline: none;
  border-color: rgba(245, 158, 11, 0.50);
  background: var(--surface-dim);
}
.dt-threshold-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  min-width: 24px;
}
.dt-threshold-validation {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--critical-fg);
  min-height: 14px;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dt-threshold-validation.is-visible { opacity: 1; }

/* =========================================================================
   UP — Umbrales de Protección (collapsible section inside Control de Sistemas)
   ========================================================================= */
.up-control-section--collapsible {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 4px;
}
.up-control-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.up-control-section-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin: 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.up-control-section-toggle:hover { color: var(--text-primary); }
.up-control-section-toggle .up-control-section-title {
  margin: 0;
}
.up-alarm-reset-all {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 9px;
  border-radius: 5px;
  cursor: pointer;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.40);
  color: var(--critical-fg);
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.up-alarm-reset-all:hover {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.65);
}
.up-alarm-reset-all:active { transform: scale(0.96); }
.up-alarm-reset-all[hidden] { display: none; }
.up-control-section-chevron {
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.up-control-section--collapsible.is-open .up-control-section-chevron {
  transform: rotate(0deg);
}
.up-thresholds-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.up-thresholds-body[hidden] { display: none; }

.up-threshold-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface-hover);
  border: 1px solid var(--border-light);
  transition: background 0.18s ease, border-color 0.18s ease;
}
.up-threshold-row[data-latched="true"] {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.32);
  border-left-width: 3px;
  border-left-color: #ef4444;
}
.up-threshold-main {
  /* Two-row layout: label on top (full width, can wrap), controls below.
     Dot spans both rows on the left so the row reads as a single unit. */
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "dot label"
    "dot controls";
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
}
.up-threshold-main > .up-threshold-dot {
  grid-area: dot;
  align-self: center;
}
.up-threshold-main > .up-threshold-label {
  grid-area: label;
  align-self: end;
}
.up-threshold-main > .up-threshold-controls {
  grid-area: controls;
  display: flex;
  align-items: center;
  gap: 8px;
}
.up-alarm-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: var(--warn-fg);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.up-alarm-btn:hover {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.55);
}
.up-alarm-btn:active { transform: scale(0.95); }
.up-alarm-btn.is-latched {
  background: rgba(148, 163, 184, 0.10);
  border-color: var(--border);
  color: var(--offline-fg);
}
.up-alarm-btn.is-latched:hover {
  background: rgba(148, 163, 184, 0.18);
  border-color: var(--border-hover);
}
.up-threshold-latch {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 4px 2px 4px;
  border-top: 1px dashed rgba(239, 68, 68, 0.20);
}
.up-threshold-latch[hidden] { display: none; }
.up-latch-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--critical-fg);
}
.up-latch-note {
  width: 100%;
  resize: vertical;
  min-height: 38px;
  padding: 6px 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--surface-dim);
  border: 1px solid var(--border);
  border-radius: 5px;
  outline: none;
  line-height: 1.35;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.up-latch-note:focus {
  border-color: rgba(239, 68, 68, 0.45);
  background: var(--surface-dim);
}
.up-latch-note::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
/* Locked device badge — visual cue that it can't be toggled. */
.up-device-badge.is-locked {
  position: relative;
}
.up-device-badge.is-locked::after {
  content: '🔒';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 9px;
  filter: drop-shadow(0 0 2px rgba(239, 68, 68, 0.55));
}
.up-threshold-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(148, 163, 184, 0.30);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.20) inset;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.up-threshold-dot.is-muted {
  background: rgba(148, 163, 184, 0.30);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.20) inset;
}
.up-threshold-dot.is-ok {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.45);
}
.up-threshold-dot.is-alarm {
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.55);
  animation: up-threshold-pulse 1.4s ease-in-out infinite;
}
@keyframes up-threshold-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 14px rgba(239, 68, 68, 0.85); }
}
.up-threshold-label {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.up-threshold-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.up-threshold-input {
  width: 70px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: right;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.up-threshold-input:focus {
  outline: none;
  border-color: rgba(245, 158, 11, 0.50);
  background: var(--surface-dim);
}
.up-threshold-unit {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  min-width: 18px;
  text-align: left;
}

/* =========================================================================
   Carcamo detail — 3D scene + level bar + reading panel
   ========================================================================= */
.carc-detail-shell {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.carc-grid {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 320px;
  gap: 14px;
  padding: 14px;
  background: var(--bg);
  min-height: 540px;
}
@media (max-width: 980px) {
  .carc-grid {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: minmax(420px, 1fr) auto;
  }
  .carc-side { grid-column: 1 / -1; flex-direction: row; }
}
@media (max-width: 640px) {
  .carc-grid { grid-template-columns: 48px minmax(0, 1fr); }
  .carc-side { flex-direction: column; }
}

/* ---- Level bar (left column) ---- */
.carc-level-bar {
  position: relative;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.carc-level-bar-inner {
  position: relative;
  flex: 1;
  width: 100%;
  background: var(--surface-dim);
  border-radius: 3px;
  overflow: hidden;
}
.carc-level-fill {
  position: absolute;
  left: 0; bottom: 0; width: 100%;
  background: linear-gradient(180deg, #00d4aa, rgba(0, 212, 170, 0.4));
  transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
  height: 0;
}
.carc-level-marks {
  position: absolute; inset: 0;
  pointer-events: none;
}
.carc-level-mark {
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: var(--border);
}
.carc-level-bar-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  padding-top: 6px;
  text-transform: uppercase;
}

/* ---- Scene host ---- */
.carc-scene-frame {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 420px;
}
.carc-scene-host {
  width: 100%;
  height: 100%;
  min-height: 420px;
}
.carc-scene-host canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.carc-scene-hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--text-muted);
  pointer-events: none;
  text-transform: uppercase;
}

/* ---- Side ---- */
.carc-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.carc-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  flex: 1;
  box-shadow: var(--shadow-md);
}
.carc-panel-title {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.carc-readout-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.carc-readout-card {
  position: relative;
  padding: 10px 12px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.carc-readout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.carc-readout-value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-primary);
  display: inline;
}
.carc-readout-value--state { color: var(--accent-fg); transition: color 0.3s ease; }
.carc-readout-suffix {
  display: inline;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 4px;
  font-weight: 400;
}

/* ---- Status pill (header) ---- */
.carc-status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.carc-status-pill.tone-ok    { background: rgba(0, 212, 170, 0.10);  border-color: rgba(0, 212, 170, 0.30);  color: var(--accent-fg); }
.carc-status-pill.tone-warn  { background: rgba(245, 167, 66, 0.10); border-color: rgba(245, 167, 66, 0.30); color: var(--warn-fg); }
.carc-status-pill.tone-alarm { background: rgba(255, 71, 87, 0.10);  border-color: rgba(255, 71, 87, 0.30);  color: var(--critical-fg); }

/* ---- Threshold reference ---- */
.carc-threshold-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}
.carc-threshold-row:last-child { border-bottom: 0; }
.carc-th-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.carc-th-dot.tone-warn  { background: #f5a742; box-shadow: 0 0 6px rgba(245, 167, 66, 0.55); }
.carc-th-dot.tone-alarm { background: #ff4757; box-shadow: 0 0 6px rgba(255, 71, 87, 0.55); }
.carc-threshold-row span:nth-child(2) { flex: 1; }
.carc-th-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ---- Carcamo editable threshold form ---- */
.carc-thresholds-help {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.carc-threshold-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-light);
}
.carc-threshold-field:last-of-type { border-bottom: 0; }
.carc-threshold-label {
  flex: 1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.carc-threshold-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.carc-threshold-cmp {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
}
.carc-threshold-input {
  width: 64px;
  padding: 5px 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: right;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.carc-threshold-input:focus {
  outline: none;
  border-color: rgba(0, 212, 170, 0.50);
  background: var(--surface-dim);
}
.carc-threshold-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.carc-threshold-validation {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 11px;
  color: var(--critical-fg);
  min-height: 14px;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.carc-threshold-validation.is-visible { opacity: 1; }

/* =========================================================================
   Confirm dialog (MX60.Confirm) — single global modal
   ========================================================================= */
.mx60-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: var(--surface-dim);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: mx60-confirm-fade-in 0.14s ease;
}
@keyframes mx60-confirm-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mx60-confirm-dialog {
  min-width: 320px;
  max-width: 460px;
  width: calc(100% - 40px);
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--shadow-lg);
  animation: mx60-confirm-slide-in 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mx60-confirm-slide-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mx60-confirm-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mx60-confirm-message {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.45;
  margin-bottom: 20px;
}
.mx60-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.mx60-confirm-btn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-primary);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.mx60-confirm-btn:hover {
  background: var(--surface-dim);
  border-color: var(--border-hover);
}
.mx60-confirm-btn:active { transform: scale(0.97); }
.mx60-confirm-btn.mx60-confirm-ok {
  background: rgba(0, 212, 170, 0.16);
  border-color: rgba(0, 212, 170, 0.40);
  color: var(--accent-fg);
}
.mx60-confirm-btn.mx60-confirm-ok:hover {
  background: rgba(0, 212, 170, 0.24);
  border-color: rgba(0, 212, 170, 0.60);
}
.mx60-confirm-btn.mx60-confirm-ok.is-danger {
  background: rgba(255, 71, 87, 0.16);
  border-color: rgba(255, 71, 87, 0.40);
  color: var(--critical-fg);
}
.mx60-confirm-btn.mx60-confirm-ok.is-danger:hover {
  background: rgba(255, 71, 87, 0.24);
  border-color: rgba(255, 71, 87, 0.60);
}
.mx60-confirm-btn:focus-visible {
  outline: 2px solid rgba(0, 212, 170, 0.55);
  outline-offset: 2px;
}

/* ============================================================
   C4 chihuahua-reflow-sanluis-replica — Alarms Reflow (D6)
   All selectors use .mx60- namespace to avoid collisions.
   ============================================================ */

/* ── Shared buttons ─────────────────────────────────────────── */
.mx60-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.mx60-btn:hover  { background: var(--surface-dim); }
.mx60-btn:active { transform: translateY(1px); }
.mx60-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }
.mx60-btn--primary {
  background: rgba(0, 212, 170, 0.18);
  border-color: rgba(0, 212, 170, 0.45);
  color: var(--accent-fg);
}
.mx60-btn--primary:hover { background: rgba(0, 212, 170, 0.28); }
.mx60-btn--danger {
  background: rgba(237, 63, 20, 0.15);
  border-color: rgba(237, 63, 20, 0.40);
  color: var(--critical-fg);
}
.mx60-btn--danger:hover { background: rgba(237, 63, 20, 0.25); }
.mx60-btn--secondary {
  background: rgba(255, 153, 0, 0.12);
  border-color: rgba(255, 153, 0, 0.35);
  color: var(--warn-fg);
}
.mx60-btn--secondary:hover { background: rgba(255, 153, 0, 0.20); }

/* ── Priority badges ─────────────────────────────────────────── */
.mx60-pri-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--text-muted);
}
.mx60-pri-high { background: rgba(237, 63, 20, 0.18); color: var(--critical-fg); }
.mx60-pri-med  { background: rgba(255, 153, 0, 0.15); color: var(--warn-fg); }
.mx60-pri-low  { background: rgba(25, 190, 107, 0.15); color: var(--ok-fg); }

/* ── TimeRangePicker (C7) ────────────────────────────────────── */
.mx60-time-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mx60-time-picker-label {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.mx60-time-picker-select {
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  padding: 5px 28px 5px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23d1d5db' d='M6 8L0 0h12L6 8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.mx60-time-picker-select:focus {
  outline: 2px solid rgba(0, 212, 170, 0.50);
  outline-offset: 2px;
}

/* SDD-A: PriorityShelf removed — replaced by state-tabs in AlarmsPage toolbar. */

/* ── AlarmsPage shell wrapper (SDD-A ADR-A1: spec-literal gradient) ── */
.mx60-alarms-shell {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  transition: box-shadow 150ms ease;
}

/* ── AlarmsPage container (SDD-A: now hosts equipment-page-wrap) ───── */
.mx60-alarms-page { display: flex; flex-direction: column; gap: 12px; }
/* SDD-A: SourceGroupsTable + filter-chips + planta-select removed.
   AlarmsPage now uses .equipment-toolbar + .equipment-grid + .equipment-pagination. */

/* ── source_type badges ─────────────────────────────────────── */
.mx60-src-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 4px;
}
.mx60-src-badge--latch  { background: rgba(237, 63, 20, 0.15); color: var(--critical-fg); }
.mx60-src-badge--alarm  { background: rgba(255, 153, 0, 0.12); color: var(--warn-fg); }

/* ── AlarmDetailsTable (C3) ─────────────────────────────────── */
.mx60-adt { width: 100%; }
.mx60-adt-wrap { overflow-x: auto; }
.mx60-adt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.mx60-adt-table th {
  padding: 7px 10px;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.mx60-adt-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-light); }
.mx60-adt-row { cursor: pointer; }
.mx60-adt-row:hover { background: var(--surface-hover); }
.mx60-adt-msg { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx60-adt-empty { padding: 28px; text-align: center; color: var(--text-muted); }
.mx60-adt-transition { font-size: 0.78rem; }
.mx60-adt-trans--normal { color: var(--ok-fg); }
.mx60-adt-trans--fault  { color: var(--critical-fg); }

/* ── AlarmNotesModal (C5) ──────────────────────────────────── */
.mx60-notes-overlay {
  position: fixed; inset: 0;
  background: var(--surface-dim);
  display: flex; align-items: center; justify-content: center;
  z-index: 1200;
}
.mx60-notes-modal {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(560px, 94vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mx60-notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.mx60-notes-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.mx60-notes-close {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center;
  padding: 4px;
  border-radius: 4px;
}
.mx60-notes-close:hover { color: var(--text-secondary); background: var(--surface-hover); }
.mx60-notes-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; overflow-y: auto; flex: 1; }
.mx60-notes-history { flex: 1; overflow-y: auto; }
.mx60-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mx60-notes-item { background: var(--surface-hover); border-radius: 6px; padding: 10px 12px; }
.mx60-notes-meta { display: flex; gap: 12px; margin-bottom: 5px; }
.mx60-notes-author { font-size: 0.78rem; font-weight: 600; color: var(--accent); }
.mx60-notes-date   { font-size: 0.75rem; color: var(--text-muted); }
.mx60-notes-message { font-size: 0.84rem; color: var(--text-secondary); }
.mx60-notes-empty { color: var(--text-muted); font-size: 0.84rem; padding: 8px 0; }
.mx60-notes-loading { color: var(--text-muted); font-size: 0.84rem; }
.mx60-notes-compose { border-top: 1px solid var(--border); padding-top: 12px; }
.mx60-notes-textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.85rem;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
}
.mx60-notes-textarea:focus { outline: 2px solid rgba(0,212,170,0.45); outline-offset: 2px; }
.mx60-notes-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.mx60-notes-error { font-size: 0.80rem; color: var(--critical-fg); }

/* ── AlarmModalActions poptip (C4) ─────────────────────────── */
.mx60-poptip-root {
  position: absolute;
  z-index: 1100;
}
.mx60-poptip {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  min-width: 180px;
  overflow: hidden;
}
.mx60-poptip-body { display: flex; flex-direction: column; }
.mx60-poptip-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: 9px 16px;
  color: var(--text-secondary);
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 80ms;
}
.mx60-poptip-btn:last-child { border-bottom: none; }
.mx60-poptip-btn:hover { background: var(--surface-hover); }
.mx60-poptip-btn:disabled { opacity: 0.38; cursor: default; }

/* ── AlarmCards modal (C6) ──────────────────────────────────── */
.mx60-alarmcard-overlay {
  position: fixed; inset: 0;
  background: var(--surface-dim);
  display: flex; align-items: center; justify-content: center;
  z-index: 1300;
}
.mx60-alarmcard-modal {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: min(720px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mx60-alarmcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.mx60-alarmcard-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.mx60-alarmcard-close {
  background: none; border: none;
  color: var(--text-muted); cursor: pointer; padding: 4px; border-radius: 4px; display: flex;
}
.mx60-alarmcard-close:hover { color: var(--text-secondary); background: var(--surface-hover); }
.mx60-alarmcard-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
}
.mx60-alarmcard-tab {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 100ms, border-color 100ms;
}
.mx60-alarmcard-tab:hover { color: var(--text-primary); }
.mx60-alarmcard-tab--active { color: var(--accent-fg); border-bottom-color: var(--accent-fg); }
.mx60-alarmcard-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.mx60-alarmcard-panel { display: none; }
.mx60-alarmcard-panel--active { display: block; }
.mx60-alarmcard-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.mx60-alarmcard-summary-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.mx60-acs-key {
  width: 130px; padding: 7px 10px;
  font-weight: 600; color: var(--text-muted); font-size: 0.78rem;
  border-bottom: 1px solid var(--border-light);
  text-align: right; vertical-align: top;
}
.mx60-acs-value {
  padding: 7px 10px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  word-break: break-all;
}
.mx60-alarmcard-notes-tab { display: flex; flex-direction: column; gap: 12px; }
.mx60-alarmcard-notes-history { max-height: 240px; overflow-y: auto; }
.mx60-alarmcard-notes-compose { border-top: 1px solid var(--border); padding-top: 12px; }

/* ── Schedule modal already defined in ScheduleView styles;
   no duplicate needed — mx60-shelf/alarm namespaced above ── */

/* ── D3/D4: Trends sections (carcamo nivelCm + datalogger PSI/bar) ── */
.carc-trends-section,
.dt-trends-section {
  margin-top: 24px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.carc-trends-header,
.dt-trends-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.carc-trends-title,
.dt-trends-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.carc-trends-tabs,
.dt-trends-tabs {
  display: flex;
  gap: 4px;
}
.carc-trends-tab,
.dt-trends-tab {
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 80ms, color 80ms;
}
.carc-trends-tab:hover,
.dt-trends-tab:hover { color: var(--text-primary); background: var(--surface-hover); }
.carc-trends-tab--active,
.dt-trends-tab--active {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.30);
  color: var(--accent-fg);
}
.carc-trends-canvas-wrap,
.dt-trends-canvas-wrap {
  height: 200px;
  padding: 12px 16px;
  position: relative;
}
.carc-trends-canvas,
.dt-trends-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* --- Schedule Modal v=67 MARKER (defensive: explicit values + !important on
       structural rules to avoid silent overrides). Hard-coded colors instead of
       var() to rule out cascade resolution issues. CSS-only, no libraries. --- */
.schedule-modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--surface-dim) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.schedule-modal {
  background: var(--surface-solid) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--border) !important;
  width: 100% !important;
  max-width: 1400px !important;
  height: 88vh !important;
  min-height: 600px !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.schedule-modal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  background: var(--bg-elevated) !important;
}

.schedule-modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--text-primary) !important;
  margin: 0 !important;
}

.schedule-modal-close {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-hover) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.schedule-modal-close:hover {
  border-color: var(--critical-fg) !important;
  color: var(--critical-fg) !important;
  background: rgba(239, 68, 68, 0.1) !important;
}

.schedule-modal-iframe {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  border: none !important;
  background: #fff !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Schedule Modal · Preview State (state #1 before iframe editor) --- */
.schedule-modal--preview {
  height: auto !important;
  min-height: 0 !important;
  max-width: 520px !important;
}

.schedule-preview-body {
  padding: 28px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  background: var(--surface-solid) !important;
  box-sizing: border-box !important;
}

.schedule-preview-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: var(--surface-hover) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.schedule-preview-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.schedule-preview-row:last-child {
  border-bottom: none !important;
}

.schedule-preview-label {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

.schedule-preview-value {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.schedule-preview-value--big {
  font-size: 18px !important;
  color: var(--accent-fg) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

.schedule-preview-status {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid currentColor !important;
}

.schedule-preview-status.tone-ok {
  color: var(--ok-fg) !important;
  background: rgba(16, 185, 129, 0.1) !important;
}

.schedule-preview-status.tone-warn {
  color: var(--warn-fg) !important;
  background: rgba(245, 158, 11, 0.1) !important;
}

.schedule-preview-edit-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 24px !important;
  background: linear-gradient(135deg, #00d4aa, #00b894) !important;
  color: #06080d !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  transition: all 0.15s !important;
  box-shadow: 0 4px 16px rgba(0, 212, 170, 0.25) !important;
}

.schedule-preview-edit-btn:hover {
  background: linear-gradient(135deg, #00e8bc, #00d4aa) !important;
  box-shadow: 0 6px 20px rgba(0, 212, 170, 0.35) !important;
  transform: translateY(-1px) !important;
}

.schedule-preview-edit-btn:active {
  transform: translateY(0) !important;
}

.schedule-preview-edit-btn svg {
  flex-shrink: 0 !important;
}

/* --- Schedule Modal · Editor State (back button in header) --- */
.schedule-modal-back {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: var(--surface-hover) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
  margin-right: auto !important;
}

.schedule-modal-back:hover {
  border-color: var(--accent-fg) !important;
  color: var(--accent-fg) !important;
  background: rgba(0, 212, 170, 0.08) !important;
}

.schedule-modal[data-state] .schedule-modal-header {
  gap: 12px !important;
}

/* --- SCHEDULES GRID (ported from SanLuis dashboard.css 699-808) --- */

.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(140px, auto);
  gap: 16px;
}

@media (max-width: 1024px) {
  .schedule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .schedule-grid { grid-template-columns: 1fr; }
}

.schedule-card {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 20px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  transition: all 0.2s;
  cursor: pointer;
}

.schedule-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-left-color: var(--accent);
}

.schedule-card.schedule-card-active {
  border-left-color: var(--ok);
}

.schedule-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 8px;
}

.schedule-card-title {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}

.schedule-card-parent {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.schedule-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.schedule-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.schedule-row-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.schedule-row-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

.schedule-type-tag {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 1px 8px;
  border-radius: 99px;
}

.schedule-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.schedule-edit-hint {
  font-size: 12px;
  color: var(--text-muted);
  transition: color 0.15s;
}

.schedule-card:hover .schedule-edit-hint {
  color: var(--accent);
}

.schedule-card:hover .schedule-card-footer svg {
  color: var(--accent);
}

.schedule-status-pill {
  flex-shrink: 0;
  font-size: 10px;
}

/* ============================================================
   SDD-A chihuahua-alarms-redesign-equipment-style:
   - .mx60-alarmsv2-header / .mx60-alarmsv2-title removed (REQ-A1)
   - .mx60-total-card* removed (PriorityShelf v2 deleted, REQ-A2.3)
   - .mx60-action-* + .mx60-popover* + .mx60-dd-* PRESERVED (used by
     AlarmDetailsTable popover + custom dropdowns).
   ============================================================ */

/* ── Action dot button ────────────────────────────────────────────────────── */

.mx60-action-dot {
  background: none;
  border: none;
  color: var(--text-muted, #9ca3af);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}

.mx60-action-dot:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.mx60-adt-action {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

/* ── Action popover panel ────────────────────────────────────────────────── */

.mx60-action-popover {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.mx60-action-popover-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
}

.mx60-action-popover-btn:hover:not(:disabled) {
  background: var(--surface-hover);
}

.mx60-action-popover-btn:disabled {
  color: var(--text-muted, #9ca3af);
  cursor: not-allowed;
}

/* ── Shared popover node ─────────────────────────────────────────────────── */

.mx60-popover {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  min-width: 200px;
}

/* ── Custom dropdown (MX60.util.Dropdown) ────────────────────────────────── */

.mx60-dd {
  position: relative;
  display: inline-block;
}

.mx60-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-hover);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s;
  min-width: 160px;
}

.mx60-dd-trigger:hover {
  border-color: var(--accent, #2d8cf0);
}

.mx60-dd--open .mx60-dd-trigger {
  border-color: var(--accent, #2d8cf0);
}

.mx60-dd-trigger-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mx60-dd-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
}

.mx60-dd--open .mx60-dd-chevron {
  transform: rotate(180deg);
}

.mx60-dd-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 280px;
  overflow-y: auto;
  min-width: 100%;
}

.mx60-dd-item {
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}

.mx60-dd-item:hover {
  background: rgba(45,140,240,0.12);
}

.mx60-dd-item--selected {
  color: var(--accent, #2d8cf0);
  font-weight: 600;
}

/* ── Time picker with custom dropdown ───────────────────────────────────── */

.mx60-time-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mx60-time-picker-label {
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
}

.mx60-time-picker-dd {
  display: inline-block;
}

/* ============================================================
   SDD-A chihuahua-alarms-redesign-equipment-style
   New classes: alarm-card overlays, alarm-detail page, breadcrumb,
   AlarmDetailsTable transition + ack styling.
   ============================================================ */

/* ── AlarmsPage: planta-tabs + state-tabs + time-picker layout ───────────── */

.mx60-alarms-page .toolbar-row.toolbar-types {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mx60-alarms-page .toolbar-row.toolbar-types [data-alarms-time-picker] {
  margin-left: auto;
  flex-shrink: 0;
}

/* ── Alarm-source card overlay (uses .equipment-card base) ──────────────── */

.equipment-card.type-alarm  { --type-color: #ff4455; }
.equipment-card.type-latch  { --type-color: #fbbf24; }

.mx60-alarm-source-name {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.mx60-alarm-priority-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--offline-fg);
  flex-shrink: 0;
}
.mx60-alarm-priority-dot--high { background: var(--critical-fg); }
.mx60-alarm-priority-dot--med  { background: var(--warn-fg); }
.mx60-alarm-priority-dot--low  { background: var(--ok-fg); }

.mx60-alarm-type-icon {
  display: inline-block;
  vertical-align: middle;
}

.mx60-alarm-state-badge--unacked,
.mx60-alarm-state-badge--active,
.mx60-alarm-state-badge--acked,
.mx60-alarm-state-badge--latch {
  /* Mantenerlos en una sola línea — usan textos compactos ("30 sin ack",
     "Activa", "Latch", "Reconocida") para que entren en el ancho que les
     deja el card-header sin romper a 3 renglones. */
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 3px 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mx60-alarm-state-badge--unacked {
  background: rgba(255, 68, 85, 0.18) !important;
  color: var(--critical-fg) !important;
}
.mx60-alarm-state-badge--active {
  background: rgba(251, 191, 36, 0.18) !important;
  color: var(--warn-fg) !important;
}
.mx60-alarm-state-badge--acked {
  background: rgba(74, 222, 128, 0.16) !important;
  color: var(--ok-fg) !important;
}
.mx60-alarm-state-badge--latch {
  background: rgba(245, 158, 11, 0.16) !important;
  color: var(--warn-fg) !important;
}

/* Card alarm: dejar que el source-name absorba el espacio sobrante
   y que el badge de estado quede pegado a la derecha sin wrappear. */
.equipment-card.type-alarm .equipment-card-header,
.equipment-card.type-latch .equipment-card-header {
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.equipment-card.type-alarm .mx60-alarm-source-name,
.equipment-card.type-latch .mx60-alarm-source-name {
  margin-right: auto;
}

/* ── AlarmDetailPage layout ─────────────────────────────────────────────── */

.mx60-alarm-detail-page-wrap {
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.mx60-alarm-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.mx60-alarm-detail-body {
  width: 100%;
}

/* ── Breadcrumb (used by AlarmDetailPage) ───────────────────────────────── */

.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text-muted, #9ca3af);
}

.breadcrumb-link {
  color: var(--accent-fg);
  text-decoration: none;
  transition: color 100ms;
}
.breadcrumb-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--border);
  font-weight: 300;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* ── AlarmDetailsTable: ack-state cell + transition cell ────────────────── */

.mx60-adt-ack {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}
.mx60-adt-ack--acked   { color: var(--ok-fg); }
.mx60-adt-ack--unacked { color: var(--warn-fg); }

.mx60-adt-transition {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
}
.mx60-adt-trans--normal { color: var(--ok-fg); }
.mx60-adt-trans--fault  { color: var(--critical-fg); }

.mx60-adt-arrow {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 2px;
}

/* AlarmDetailsTable structure */
.mx60-adt {
  width: 100%;
  overflow: hidden;
}
.mx60-adt-wrap { overflow-x: auto; }
.mx60-adt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.mx60-adt-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.mx60-adt-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.mx60-adt-row { transition: background 80ms; }
.mx60-adt-row:hover { background: var(--surface-hover); }
.mx60-adt-msg {
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mx60-adt-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ============================================================
   SDD-B chihuahua-alarms-bulk-and-export
   Bulk select + bulk action bar + CSV export styling.
   ============================================================ */

/* ── Bulk checkbox (cards + rows) ───────────────────────────────────────── */

.mx60-bulk-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #00d4aa;
  cursor: pointer;
  margin: 0;
}

.mx60-bulk-checkbox-card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--surface);
  border-radius: 3px;
  padding: 1px;
}

/* Make .equipment-card relative so checkbox can absolute-position inside */
.equipment-card { position: relative; }

.mx60-adt-check {
  width: 36px;
  text-align: center;
  vertical-align: middle;
  padding: 6px 8px !important;
}

/* ── Bulk action bar (sticky-top) ───────────────────────────────────────── */

.mx60-bulk-bar-host {
  position: sticky;
  top: 0;
  z-index: 10;
}

.mx60-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--surface-solid);
  border: 1px solid rgba(0, 212, 170, 0.35);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mx60-bulk-bar-text {
  font-size: 0.86rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.mx60-bulk-bar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.mx60-bulk-bar-btn {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms, border-color 100ms, color 100ms;
}
.mx60-bulk-bar-btn:not(:disabled):hover {
  background: var(--surface-dim);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.mx60-bulk-bar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.mx60-bulk-bar-btn--danger {
  background: rgba(255, 68, 85, 0.15);
  border-color: rgba(255, 68, 85, 0.40);
  color: var(--critical-fg);
}
.mx60-bulk-bar-btn--danger:not(:disabled):hover {
  background: rgba(255, 68, 85, 0.25);
  border-color: rgba(255, 68, 85, 0.65);
}
.mx60-bulk-bar-btn--warning {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.40);
  color: var(--warn-fg);
}
.mx60-bulk-bar-btn--warning:not(:disabled):hover {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.60);
}
.mx60-bulk-bar-btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-muted);
}

/* ── CSV export button ──────────────────────────────────────────────────── */

.mx60-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.mx60-csv-btn:hover {
  background: rgba(0, 212, 170, 0.12);
  border-color: rgba(0, 212, 170, 0.40);
  color: var(--accent-fg);
}

/* ── Toolbar right-side cluster (CSV + TimeRangePicker) ─────────────────── */

.mx60-alarms-page .toolbar-types-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Alarm-detail header right-side cluster ─────────────────────────────── */

.mx60-alarm-detail-header-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ============================================================
   SDD chihuahua-perf-staging
   Loading state for UpDetail 3D viewer (staged async setup).
   ============================================================ */

.up-3d-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  min-height: 300px;
  background: var(--bg-elevated);
  border-radius: 8px;
  color: var(--text-muted);
}

.up-3d-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 212, 170, 0.18);
  border-top-color: #00d4aa;
  border-radius: 50%;
  animation: up3dSpin 720ms linear infinite;
}

@keyframes up3dSpin {
  to { transform: rotate(360deg); }
}

.up-3d-loading-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ---- Mode pill (card header) ---- */
.card-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  max-width: 88px;
}
.card-mode-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}
.card-mode-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Modifier classes — drive color via currentColor (dot) + tinted bg (pill). */
.mode-manual   { color: var(--warn-fg); background: rgba(251,191,36,0.14); }
.mode-setpoint { color: var(--info-fg); background: rgba(59,130,246,0.14); }
.mode-schedule { color: var(--accent-fg); background: rgba(0,212,170,0.14); }

/* ---- Toolbar legend ---- */
.toolbar-row.toolbar-types {
  justify-content: space-between;
}
.toolbar-legend {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-wrap: wrap;
}
.legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* ---- Header grid: widen to fit 4th column (mode pill) ---- */
/* Override of .equipment-card-header at line 898-903 — keeps 22px type-icon,
   flexible name, and two auto-sized badges on the right. */
.equipment-card-header {
  grid-template-columns: 22px 1fr auto auto;
}

/* ============================================================
   SDD mx60-theme-light-dark-per-user — Theme toggle button
   Button lives in the header bar (index.html #theme-toggle).
   Icons: .theme-icon-sun (shown in dark mode → click = go light),
          .theme-icon-moon (shown in light mode → click = go dark).
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--surface-dim);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.theme-toggle:active {
  transform: scale(0.93);
}

/* In dark mode: show sun icon (clicking switches to light) */
[data-theme="dark"] .theme-icon-moon  { display: none; }
[data-theme="dark"] .theme-icon-sun   { display: block; }

/* In light mode: show moon icon (clicking switches to dark) */
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }

/* ============================================================
   Logout button — same sizing/hover as .theme-toggle.
   Intentionally NOT in _applyWriteGuard: every authenticated
   user (viewer or writer) must be able to log out.
   Color uses --text-muted for a calm, non-alarming tone;
   hover shifts to --critical-fg (red) to signal session end.
   ============================================================ */
.logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-hover);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.logout-btn:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--critical-fg);
}
.logout-btn:active {
  transform: scale(0.93);
}

/* Hide the text label on narrow screens — icon alone is enough */
@media (max-width: 480px) {
  .logout-btn-label { display: none; }
  .logout-btn { padding: 0; width: 34px; }
}

/* === mx60-frontend-modo-manual-hide ===========================
 * Hide MANUAL operation-mode affordances from the dashboard until
 * MANUAL is reimplemented end-to-end. Backend `applyProtections`
 * skips protections when modoOperacion=MANUAL, so any UI write of
 * MANUAL would create a safety gap. The `.card-mode-badge.mode-manual`
 * color rule is intentionally LEFT INTACT — Workbench-set MANUAL must
 * still be visible to operators on equipment cards.
 *
 * REVERT path to re-enable MANUAL in UI:
 *  1) Delete this block (4 rules below)
 *  2) Delete the `.filter(...) MANUAL` line in Configuracion.js (~262)
 *  3) Coordinate with backend MANUAL guard policy — see engram #1556
 * ============================================================ */
.up-modo-btn[data-modo="MANUAL"]  { display: none; }
.legend-pill.mode-manual          { display: none; }
.cfg-chip[data-cfg-modo="MANUAL"] { display: none; }
.cfg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================================================
   VERSION INDICATOR — fixed bottom-right build-id chip
   Subtle, non-interactive. Confirms deployed build at a glance.
   z-index 50 — below Toast (9999), UpdateBanner (9999), modals
   (1100-1300) and alarm indicator (1050).
   ============================================================ */
.mx60-version-indicator {
  position: fixed;
  bottom: 8px;
  right: 10px;
  z-index: 50;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  opacity: 0.45;
  padding: 3px 6px;
  border-radius: 4px;
  background: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}