/* ============================================
   Atria — Energy Operator Console
   Design tokens + global styles
   Banatria guía de estilo + approved product-UI extension
   ============================================ */

:root {
  /* Atria brand — fixed, from the guide. Never substitute. */
  --naranja: #f55b1b;
  --arena: #ebc7a2;
  --gris-azulado: #cad8da;
  --grafito: #1b1918;
  --paper: #ffffff;

  /* Brand (legacy names retained, remapped to Atria values) */
  --brand-orange: #f55b1b;
  --brand-orange-soft: rgba(245, 91, 27, 0.12);
  --brand-orange-line: rgba(245, 91, 27, 0.35);
  --brand-teal: #8FB9A8;              /* teal retired → ok green */
  --brand-teal-soft: rgba(143, 185, 168, 0.14);
  --brand-teal-line: rgba(143, 185, 168, 0.4);

  /* Accent (overridable via tweaks) */
  --accent: var(--brand-orange);
  --accent-soft: var(--brand-orange-soft);
  --accent-line: var(--brand-orange-line);
  --accent-text: #FA7742;             /* small text / links on dark — AA 5.3:1 */

  /* Ground — grafito at four lightnesses */
  --bg-0: #1B1918;
  --bg-1: #221F1E;
  --bg-2: #2D2928;
  --bg-3: #3A3634;

  /* Surfaces */
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hi: rgba(255, 255, 255, 0.06);
  --surface-hov: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.10);
  --border-hi: rgba(255, 255, 255, 0.18);

  /* Text — white over grafito */
  --t-1: rgba(255, 255, 255, 0.95);
  --t-2: rgba(255, 255, 255, 0.72);
  --t-3: rgba(255, 255, 255, 0.52);
  --t-4: rgba(255, 255, 255, 0.34);

  /* Semantic */
  --ok: #8FB9A8;
  --ok-soft: rgba(143, 185, 168, 0.14);
  --success: #8FB9A8;
  --success-soft: rgba(143, 185, 168, 0.14);
  --warn: #ebc7a2;
  --warning: #ebc7a2;
  --warning-soft: rgba(235, 199, 162, 0.16);
  --alarm: #FA6B7E;
  --alarm-soft: rgba(250, 107, 126, 0.16);
  --danger: #FA6B7E;
  --danger-soft: rgba(250, 107, 126, 0.16);
  --info: #cad8da;
  --info-soft: rgba(202, 216, 218, 0.16);

  /* Energy-flow palette (instrument surfaces only) */
  --energy-grid: #cad8da;
  --energy-pv: #ebc7a2;
  --energy-bat: #8FB9A8;
  --energy-load: #f55b1b;
  --energy-ev: #B49BC4;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* Radii — Atria 3/6/10 (restrained; border + fill carry separation) */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 10px;

  /* Type — IBM Plex */
  --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display: 'IBM Plex Serif', Georgia, serif;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;

  /* Elevation */
  --atria-shadow: rgba(0, 0, 0, 0.5);
}

/* ============================================
   Light theme — token overrides. Applied when
   [data-atria-theme="light"] is set on <html>.
   ============================================ */
[data-atria-theme="light"] {
  --bg-0: #FFFFFF;
  --bg-1: #F7F5F3;
  --bg-2: #FCFBFA;
  --bg-3: #EFECE8;

  --surface:     rgba(27, 25, 24, 0.025);
  --surface-hi:  rgba(27, 25, 24, 0.05);
  --surface-hov: rgba(27, 25, 24, 0.08);
  --border:      rgba(27, 25, 24, 0.11);
  --border-hi:   rgba(27, 25, 24, 0.20);

  --t-1: rgba(27, 25, 24, 0.96);
  --t-2: rgba(27, 25, 24, 0.74);
  --t-3: rgba(27, 25, 24, 0.56);
  --t-4: rgba(27, 25, 24, 0.42);

  --accent-text: #C2440F;
  --accent-soft: rgba(245, 91, 27, 0.10);
  --accent-line: rgba(245, 91, 27, 0.42);

  /* grid is "gris azulado" — the old #5B7D84 was a teal that sat almost on top of the battery
     green wherever the two traces ran together */
  --energy-grid: #4A6E8A;
  --energy-pv:   #A9732C;
  --energy-bat:  #3C7A62;
  --energy-ev:   #75558F;

  /* Semantic — Atria names + legacy aliases the app uses */
  --ok: #2E6B53;        --ok-soft: rgba(46, 107, 83, 0.12);
  --success: #2E6B53;   --success-soft: rgba(46, 107, 83, 0.12);
  --warn: #96601A;      --warn-soft: rgba(150, 96, 26, 0.12);
  --warning: #96601A;   --warning-soft: rgba(150, 96, 26, 0.12);
  --info: #4A6F76;      --info-soft: rgba(74, 111, 118, 0.12);
  --alarm: #C22C3C;     --alarm-soft: rgba(194, 44, 60, 0.12);
  --danger: #C22C3C;    --danger-soft: rgba(194, 44, 60, 0.12);

  /* Retired teal name kept working, themed to ok green */
  --brand-teal: #3C7A62;
  --brand-teal-soft: rgba(60, 122, 98, 0.12);
  --brand-teal-line: rgba(60, 122, 98, 0.4);

  --atria-shadow: rgba(27, 25, 24, 0.14);
}
body:has([data-atria-theme="light"]),
html[data-atria-theme="light"] { background: #FFFFFF; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--t-1);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
  letter-spacing: -0.005em;
  overflow: hidden;
}

#root { width: 100vw; height: 100vh; }

button { font-family: inherit; cursor: pointer; }
a { color: inherit; }

/* ========== App shell ========== */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245, 91, 27, 0.05), transparent 70%),
    var(--bg-0);
}
.app.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app.sidebar-top {
  grid-template-columns: 1fr;
  grid-template-rows: var(--topbar-h) auto 1fr;
}

/* ========== Sidebar ========== */
.sidebar {
  grid-row: 1 / -1;
  grid-column: 1;
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
}
.sidebar-brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Brand marks — SVG masked with the accent, per Atria logo rules.
   Never redraw the mark; always the supplied vectors. */
.brand-logotipo {
  width: 120px; height: 28px;
  background: var(--accent);
  -webkit-mask: url(assets/atria-logotipo.svg) left center / contain no-repeat;
  mask: url(assets/atria-logotipo.svg) left center / contain no-repeat;
  flex-shrink: 0;
}
.brand-isotipo {
  width: 30px; height: 30px;
  background: var(--accent);
  -webkit-mask: url(assets/atria-isotipo.svg) center / contain no-repeat;
  mask: url(assets/atria-isotipo.svg) center / contain no-repeat;
  flex-shrink: 0;
  display: none;
}
.sidebar-section {
  padding: 18px 12px 8px;
  font-size: 10px;
  color: var(--t-4);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.app.sidebar-collapsed .sidebar-section { opacity: 0; pointer-events: none; height: 0; padding: 8px 0 0; overflow: hidden; }
.app.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
.app.sidebar-collapsed .brand-logotipo { display: none; }
.app.sidebar-collapsed .brand-isotipo { display: block; }
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px;
  flex: 1;
  overflow-y: auto;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-2);
  color: var(--t-2);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background 0.12s, color 0.12s;
  position: relative;
  cursor: pointer;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover { background: var(--surface-hi); color: var(--t-1); }
.nav-item.active {
  background: var(--accent-soft);
  color: var(--t-1);
  border-color: var(--accent-line);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}
.nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: inherit;
}
.nav-label { white-space: nowrap; overflow: hidden; }
.nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.nav-badge.warn { background: var(--warning); color: #1a1100; }
.nav-badge.danger { background: var(--danger); }
.app.sidebar-collapsed .nav-label,
.app.sidebar-collapsed .nav-badge { display: none; }
.app.sidebar-collapsed .nav-item { justify-content: center; padding: 10px; }

.sidebar-foot {
  padding: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--t-3);
}
.app.sidebar-collapsed .sidebar-foot { display: none; }

/* Top nav variant */
.app.sidebar-top .sidebar {
  grid-row: 2;
  grid-column: 1;
  width: 100%;
  height: auto;
  border-right: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.app.sidebar-top .sidebar-brand { display: none; }
.app.sidebar-top .sidebar-section { display: none; }
.app.sidebar-top .sidebar-foot { display: none; }
.app.sidebar-top .sidebar-nav {
  flex-direction: row;
  overflow-x: auto;
  padding: 0 18px;
  gap: 0;
}
.app.sidebar-top .nav-item {
  padding: 14px 14px;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  border-left: none;
  border-right: none;
  border-top: none;
  width: auto;
  flex-shrink: 0;
}
.app.sidebar-top .nav-item.active {
  background: none;
  border-bottom-color: var(--accent);
  color: var(--t-1);
}
.app.sidebar-top .nav-item.active::before { display: none; }
.app.sidebar-top .topbar { border-bottom: none; }

/* ========== Topbar ========== */
.topbar {
  grid-row: 1;
  grid-column: 2;
  /* A grid item defaults to `min-width: auto`, so this flex row refused to be narrower than the
     sum of its children — a building called "CL MARCELINO RGUEZ G VALLE 10 GOZON (LUANCO)
     (ASTURIAS)" made that 1107px. The `1fr` track then grew past the window and took `.content`
     with it, so the whole console sat wider than the viewport until the name arrived and it
     settled. The topbar must be allowed to shrink; the breadcrumb below absorbs it. */
  min-width: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  z-index: 4;
}
.app.sidebar-top .topbar { grid-column: 1; }

.topbar-toggle {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--t-2);
}
.topbar-toggle:hover { background: var(--surface-hi); color: var(--t-1); }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--t-2);
  font-size: 13px;
  /* The one part of the topbar that may give: a long address shortens with an ellipsis rather
     than pushing the layout past the window. A floor, though — with `min-width: 0` it collapsed to
     width 0 at 1024px, so the building you were looking at went unnamed and the row *still* spilled
     14px. The pills give up their labels first (below); this keeps its place in the row. */
  min-width: 120px;
  flex: 0 1 auto;
}
.breadcrumb .sep { color: var(--t-4); flex-shrink: 0; }
.breadcrumb .current {
  color: var(--t-1);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-spacer { flex: 1; }

.topbar-status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.topbar-status .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 var(--success-soft);
  animation: pulse 2s infinite;
}

/* The API-activity dot: a slow pulse while a query is running. It respects the reduce-motion
   preference, where it simply holds at full opacity rather than disappearing. */
.topbar-status .dot.spin { animation: atria-api-pulse 1.1s ease-in-out infinite; }
@keyframes atria-api-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
[data-atria-motion="reduced"] .topbar-status .dot.spin { animation: none; opacity: 1; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(143,185,168,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(143,185,168,0); }
}
.topbar-status .label { color: var(--t-2); }
.topbar-status .val { font-variant-numeric: tabular-nums; color: var(--t-1); font-weight: 500; }

.profile-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
  max-width: 132px;
  overflow: hidden;
}
.topbar-clock {
  font-variant-numeric: tabular-nums;
  color: var(--t-2);
  font-size: 13px;
  font-family: var(--font-mono);
}

.topbar-icon-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-2);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--t-2);
  position: relative;
}
.topbar-icon-btn:hover { background: var(--surface-hi); color: var(--t-1); }
.topbar-icon-btn .dot-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 6px; height: 6px;
  background: var(--warning);
  border-radius: 50%;
  border: 1.5px solid var(--bg-1);
}

.topbar-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface-hi);
  display: grid;
  place-items: center;
  color: var(--t-1);
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--border-hi);
}

/* ========== Content ========== */
.content {
  grid-row: 2;
  grid-column: 2;
  min-width: 0;                 /* same reason as .topbar */
  overflow: auto;
  padding: 24px;
}
.app.sidebar-top .content { grid-row: 3; grid-column: 1; }

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-sub {
  color: var(--t-3);
  font-size: 13px;
  margin-top: 4px;
}

.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--t-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-weight: 500;
}
.tab:hover { color: var(--t-2); }
.tab.active { color: var(--t-1); border-bottom-color: var(--accent); }

/* ========== Cards ========== */
.card {
  min-width: 0;                 /* see the grid note: an item must be allowed to shrink */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: 18px;
}
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-3);
}
.card-title-lg {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 300;
  color: var(--t-1);
  letter-spacing: 0;
  text-transform: none;
}

/* ========== KPI ========== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 14px;
}
.kpi {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  position: relative;
  overflow: hidden;
}
.kpi-label {
  font-size: 11px;
  color: var(--t-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.kpi-unit { font-size: 14px; color: var(--t-3); font-weight: 500; }
.kpi-delta {
  font-size: 12px;
  margin-top: 4px;
  color: var(--success);
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-delta.down { color: var(--danger); }
.kpi-spark {
  position: absolute;
  inset: auto 0 0 0;
  height: 36px;
  opacity: 0.7;
  pointer-events: none;
}
.kpi-accent-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* ========== Pills / tags ========== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-hi);
  color: var(--t-2);
  border: 1px solid var(--border);
  letter-spacing: 0.01em;
}
.pill.success { background: var(--success-soft); color: var(--success); border-color: rgba(143,185,168,0.3); }
.pill.warn { background: var(--warning-soft); color: var(--warning); border-color: rgba(235,199,162,0.3); }
.pill.danger { background: var(--danger-soft); color: var(--danger); border-color: rgba(250,107,126,0.3); }
.pill.info { background: var(--info-soft); color: var(--info); border-color: rgba(202,216,218,0.3); }
.pill.accent { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-line); }

/* ========== Buttons ========== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-2);
  background: var(--surface-hi);
  border: 1px solid var(--border);
  color: var(--t-1);
  font-size: 13px;
  font-weight: 500;
  transition: 0.12s;
}
.btn:hover { background: var(--surface-hov); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #1B1918;
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost {
  background: transparent;
  border-color: var(--border);
}
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ========== Grids ========== */
.grid {
  display: grid;
  gap: 16px;
}
/* `minmax(0, …)` rather than a bare `1fr`, which means `minmax(auto, 1fr)` and so refuses to
   shrink a track below its content's min-content width. Defensive, not the fix for the console
   sitting wider than the window — that was `.topbar` (see there); measuring these grids before
   and after the change showed no difference. Kept because the same trap is one wide table or
   unbroken label away, and a track that may shrink cannot spring it. */
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .g-2, .g-3, .g-12, .g-21 { grid-template-columns: minmax(0, 1fr); }
  /* Between 769px and 899px the sidebar still takes its full 250px while the topbar has run out of
     things to drop, so the breadcrumb gives up its 120px floor here and truncates further. Below
     769px the sidebar collapses and the pressure goes away. */
  .breadcrumb { min-width: 0; }
}

/* ========== Tables ========== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-3);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--t-2);
}
.table tr:hover td { background: var(--surface-hi); color: var(--t-1); }
.table tr:last-child td { border-bottom: none; }
.table td.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ========== Bars/meters ========== */
.bar {
  height: 8px;
  background: var(--surface-hi);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.bar > .fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(.2,.7,.2,1);
}
.bar.teal > .fill { background: var(--brand-teal); }
.bar.amber > .fill { background: var(--warning); }
.bar.danger > .fill { background: var(--danger); }

/* ========== Scrollbar ========== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ========== SLD shared ========== */
.sld-svg { width: 100%; height: 100%; display: block; }
.sld-svg .energy-line { stroke-linecap: round; }
.sld-svg .node-icon-bg {
  fill: var(--bg-2);
  stroke: var(--border-hi);
}
.sld-svg .label {
  fill: var(--t-2);
  font-size: 10px;
  font-family: var(--font);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sld-svg .label.sub {
  fill: var(--t-3);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0;
}
.sld-svg .val {
  fill: var(--t-1);
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* settings selects + inputs */
.settings-select, .settings-input {
  background: var(--surface-hi);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--t-1);
  font-family: var(--font);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
  min-width: 140px;
}
.settings-select:focus, .settings-input:focus { border-color: var(--accent); }

/* ========== Animations ========== */
@keyframes flow-dash {
  to { stroke-dashoffset: -28; }
}
.flow-line {
  stroke-dasharray: 4 6;
  animation: flow-dash 1.3s linear infinite;
}
@keyframes appear {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.appear { animation: appear 0.35s cubic-bezier(.2,.7,.2,1) both; }

/* ========== Console preferences (Settings → General) ==========
   Set on <html> by app.jsx from /system/preferences. These are the preferences the console can
   actually honour — anything it cannot is not offered as a setting. */

/* Nothing arriving from the field → nothing should look like it is moving. The flow dots are the
   console's strongest "this is happening now" signal, and animating them over a frozen snapshot is
   the same lie as a LIVE badge on stale data. Set from the header indicator (app.jsx). */
[data-atria-telemetry="interrupted"] .flow-line,
[data-atria-telemetry="never"] .flow-line,
[data-atria-telemetry="unknown"] .flow-line { animation: none; opacity: 0.45; }
[data-atria-telemetry="interrupted"] .topbar-status .dot,
[data-atria-telemetry="never"] .topbar-status .dot { animation: none; }
/* the travelling dots are SVG SMIL and cannot be stopped from here — components.jsx and sld.jsx
   drop the <animateMotion> elements instead (see useTelemetryFlowing in lib.jsx) */

/* Live animations off — stops the power-flow dots on the SLD and the live status pulse. */
[data-atria-animations="off"] .flow-line { animation: none; }
[data-atria-animations="off"] .topbar-status .dot { animation: none; }

/* Reduce motion — drops the non-essential entrance animation and transitions. Also honours the
   OS-level setting on its own, whatever the stored preference says. */
[data-atria-motion="reduced"] .appear { animation: none; }
[data-atria-motion="reduced"] * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .appear { animation: none; }
  * { transition: none !important; }
}

/* Base row padding lives here (not inline) so the compact override below can win. */
.setting-row { padding: 12px 0; }

/* Compact density — tighter cards, KPI tiles and list rows. */
[data-atria-density="compact"] .card { padding: 12px; }
[data-atria-density="compact"] .card-h { margin-bottom: 10px; }
[data-atria-density="compact"] .kpi { padding: 10px 12px; }
[data-atria-density="compact"] .kpi-grid { gap: 8px; }
[data-atria-density="compact"] .setting-row { padding: 10px 0; }
[data-atria-density="compact"] .apt-card { padding: 10px; }

/* ========== Apartment cards ========== */
.apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr));
  gap: 10px;
}
.apt-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  padding: 12px;
  cursor: pointer;
  transition: 0.15s;
  position: relative;
}
.apt-card:hover { border-color: var(--accent-line); background: var(--surface-hi); transform: translateY(-1px); }
.apt-card.alert { border-color: rgba(250,107,126,0.4); }
.apt-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.apt-name { font-size: 13px; font-weight: 600; }
.apt-power { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.apt-unit { font-size: 11px; color: var(--t-3); }
.apt-meta { font-size: 11px; color: var(--t-3); margin-top: 4px; display: flex; gap: 8px; }
.apt-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* ========== Login ========== */
@media (max-width: 880px) {
  .login-brand { display: none !important; }
}

/* The topbar is the one row whose contents cannot wrap or scroll, and it is measured in whole
   pills. At 1024px (784px of topbar, once the sidebar has its 250px) the two status pills, the
   clock, the notification button and the profile switcher came to more than fitted, so the row
   overflowed by 14px. The labels are the cheapest thing to drop: "Telemetría en directo" becomes
   the dot plus "en directo", "Red 50.01 Hz · 230.4 V" keeps its numbers. */
@media (max-width: 1200px) {
  .topbar-status .label { display: none; }
}
/* Narrower still and the labels are not enough: the profile switcher's name and role (132px of it)
   and the clock go, leaving the avatar and its chevron. Which building you are in and who you are
   both survive; the wall clock and your own name, which you know, are what give way. */
@media (max-width: 1120px) {
  .topbar .profile-meta { display: none; }
  .topbar-clock { display: none; }
}

/* ========== Mobile responsive ========== */
@media (max-width: 768px) {
  .app:not(.sidebar-top) {
    grid-template-columns: var(--sidebar-w-collapsed) 1fr;
  }
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .nav-label,
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .nav-badge,
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .brand-logotipo,
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .sidebar-section,
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .sidebar-foot {
    display: none;
  }
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .brand-isotipo { display: block; }
  .app:not(.sidebar-top):not(.sidebar-collapsed) .sidebar .sidebar-brand { padding: 0; justify-content: center; }
  .content { padding: 16px; }
  .page-title { font-size: 20px; }
}