/*==============================================================
  Demonstrações de software nas páginas de área

  Um ecrã de programa dentro de uma moldura escura, no painel
  verde da página (como a maquete AngoWatt). O ecrã segue a
  linguagem do portal: fundo #f6f7f9, cartões brancos, verde
  de marca #059669, barra de topo #064e3b.

  .dm-wrap.is-zoomed ocupa a janela inteira.
==============================================================*/

.dm-wrap { position: relative; }

.dm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dm-hint { margin: 0; font-size: .875rem; color: rgb(209 250 229 / .7); }
.dm-hint .bi { margin-right: 4px; }
.dm-zoom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / .35);
  border-radius: 999px;
  background: rgb(255 255 255 / .06);
  color: #fff;
  font: 600 .875rem var(--sans);
  cursor: pointer;
  transition: background .15s;
}
.dm-zoom:hover { background: rgb(255 255 255 / .14); }
.dm-zoom:focus-visible { outline: 2px solid #a7f3d0; outline-offset: 2px; }

/* legendas por baixo */
.dm-captions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 28px;
  margin-top: 22px;
}
.dm-captions p { margin: 0; font-size: .875rem; line-height: 1.55; color: rgb(209 250 229 / .62); }
.dm-captions b { display: block; color: #fff; font-weight: 600; margin-bottom: 3px; }
@media (max-width: 767px) { .dm-captions { grid-template-columns: 1fr; } }

/* moldura */
.dm-frame {
  position: relative;
  background: #0b1220;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 24px 50px -24px rgb(0 0 0 / .6);
}

/* o ecrã do programa */
.dm-app {
  --dm-line: #e5e7eb;
  --dm-ink: #111827;
  --dm-muted: #6b7280;
  --dm-green: #059669;
  --dm-amber: #d97706;
  --dm-rose: #dc2626;
  background: #f6f7f9;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.5em;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
  user-select: none;
}

/* barra de topo */
.dm-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2em;
  padding: .6em 1.1em;
  background: #064e3b;
  color: #fff;
}
.dm-brand { display: flex; align-items: center; gap: .6em; min-width: 0; }
.dm-brand .mark {
  width: 2em; height: 2em;
  border-radius: .55em;
  background: #059669;
  display: grid; place-items: center;
  font-size: 1em;
}
.dm-brand .name { font-weight: 800; letter-spacing: -.02em; font-size: 1.1em; }
.dm-brand .site { font-size: .85em; color: rgb(209 250 229 / .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-tabs { display: flex; gap: .2em; }
.dm-tabs span {
  padding: .35em .8em;
  border-radius: .5em;
  font-size: .9em;
  font-weight: 500;
  color: rgb(209 250 229 / .75);
}
.dm-tabs span.on { background: rgb(255 255 255 / .12); color: #fff; font-weight: 600; }
.dm-topright { display: flex; align-items: center; gap: 1em; font-size: .85em; white-space: nowrap; }
.dm-live { display: inline-flex; align-items: center; gap: .4em; color: #a7f3d0; font-weight: 600; }
.dm-live i { width: .6em; height: .6em; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgb(52 211 153 / .6); animation: dm-pulse 2s infinite; }
.dm-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.dm-user { display: inline-flex; align-items: center; gap: .4em; color: rgb(209 250 229 / .8); }
.dm-user .bi { font-size: 1.2em; }

/* indicadores */
.dm-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--dm-line);
  border-bottom: 1px solid var(--dm-line);
}
.dm-kpi { background: #fff; padding: .55em 1.1em; display: flex; flex-direction: column; }
.dm-kpi span { font-size: .78em; color: var(--dm-muted); font-weight: 500; }
.dm-kpi b { font-size: 1.3em; font-weight: 800; color: var(--dm-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dm-kpi b small { font-size: .6em; font-weight: 600; color: var(--dm-muted); margin-left: .25em; }
.dm-kpi.is-alert b { color: var(--dm-rose); }

/* mapa */
.dm-map { position: relative; background: #cfc09a; min-height: 0; min-width: 0; }
.dm-map svg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.dm-legend {
  position: absolute;
  right: .8em; bottom: .8em;
  display: flex; gap: .9em;
  padding: .4em .8em;
  background: rgb(255 255 255 / .85);
  border-radius: .5em;
  font-size: .8em;
  color: #3b2f1a;
  backdrop-filter: blur(4px);
}
.dm-legend span { display: inline-flex; align-items: center; gap: .4em; }
.dm-legend i { width: .9em; height: .9em; border-radius: .2em; border: 1px solid rgb(0 0 0 / .25); }
.dm-legend i.ld { background: #f2b632; }
.dm-legend i.em { background: #fde68a; }
.dm-legend i.ex { background: #f59e0b; }
.dm-legend i.al { background: #dc2626; border-radius: 50%; }

/* elementos do mapa */
.dm-labels text, .dm-scale text, .dm-north text {
  font: 600 13px var(--sans);
  fill: #3b2f1a;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #e9dfc4;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.dm-gear { animation: dm-spin 3s linear infinite; }
.dm-conv { stroke-dasharray: 8 10; animation: dm-flow .9s linear infinite; }
.dm-ring { animation: dm-ring 2.4s ease-out infinite; transform-origin: 150px 32px; }
.dm-ring-2 { animation-delay: 1.2s; }
.dm-blink { animation: dm-blink 1.2s steps(1) infinite; }
.ex-arm { transform-box: fill-box; transform-origin: 0 50%; animation: dm-dig 5s ease-in-out infinite; }
.ex-arm-2 { animation-delay: -2.3s; }

/* máquinas e camiões */
.mc, .tk { cursor: pointer; }
.mc:focus, .tk:focus, .mc:focus-visible, .tk:focus-visible { outline: none; }
.mc .sel, .tk .sel {
  fill: rgb(5 150 105 / .12);
  stroke: #059669;
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
  display: none;
  animation: dm-spin 8s linear infinite;
}
.mc.is-sel .sel, .tk.is-sel .sel { display: block; }
.mc .lbl rect, .tk .lbl rect { fill: rgb(17 24 39 / .82); }
.mc .lbl text, .tk .lbl text {
  font: 700 10.5px var(--sans);
  fill: #fff;
  text-anchor: middle;
  letter-spacing: .02em;
  pointer-events: none;
}
.mc .bdg, .tk .bdg { display: none; }
.mc.is-alert .bdg, .tk.is-alert .bdg { display: block; }
.mc .bdg circle, .tk .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.mc .bdg text, .tk .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.mc.is-ack .bdg circle, .tk.is-ack .bdg circle { fill: #059669; animation: none; }
.mc.is-warn .lbl rect, .tk.is-warn .lbl rect { fill: #b91c1c; }

.tk .wh { fill: #1f2937; }
.tk .bd { fill: #fde68a; stroke: #92400e; stroke-width: 1.5; }
.tk .cb { fill: #1f2937; }
.tk .ld { fill: #6b4f2a; display: none; }
.tk.is-loaded .bd { fill: #f2b632; }
.tk.is-loaded .ld { display: block; }
.tk.is-parked { opacity: .55; }
.tk .hl { fill: #fef3c7; opacity: 0; }
.tk.is-moving .hl { opacity: .9; }

/* painel lateral */
.dm-side { position: relative; border-left: 1px solid var(--dm-line); background: #fff; min-height: 0; }
.dm-side-in { position: absolute; inset: 0; overflow: auto; padding: .9em 1em; scrollbar-width: thin; }

.dm-side h4 { margin: 0; font-size: 1em; font-weight: 700; color: var(--dm-ink); }
.dm-side .sub { display: block; font-size: .8em; color: var(--dm-muted); margin: .1em 0 .7em; }

.dm-row {
  display: grid;
  grid-template-columns: .7em 1fr auto;
  gap: .6em;
  align-items: center;
  width: 100%;
  padding: .5em .4em;
  border: 0;
  border-top: 1px solid #f1f5f9;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: .4em;
}
.dm-row:hover { background: #f0fdf4; }
.dm-row i.dot { width: .7em; height: .7em; border-radius: 50%; background: #d1d5db; }
.dm-row i.dot.ld { background: #f2b632; }
.dm-row i.dot.em { background: #a3e635; }
.dm-row i.dot.ex { background: #f59e0b; }
.dm-row i.dot.al { background: #dc2626; }
.dm-row i.dot.pk { background: #9ca3af; }
.dm-row b { display: block; font-weight: 700; color: var(--dm-ink); font-size: .95em; }
.dm-row small { display: block; font-size: .8em; color: var(--dm-muted); }
.dm-row .r { text-align: right; font-size: .85em; font-variant-numeric: tabular-nums; color: #374151; }
.dm-row .r b { font-size: 1em; }
.dm-row.is-warn b::after { content: " !"; color: var(--dm-rose); }

.dm-back {
  display: inline-flex; align-items: center; gap: .4em;
  border: 0; background: none; padding: 0; margin-bottom: .7em;
  font: 600 .85em var(--sans); color: #047857; cursor: pointer;
}
.dm-back:hover { text-decoration: underline; }

.dm-det-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3em .6em; }
.dm-det-head b { font-size: 1.35em; font-weight: 800; color: var(--dm-ink); letter-spacing: -.02em; }
.dm-det-head span { font-size: .85em; color: var(--dm-muted); }
.dm-pill {
  display: inline-block;
  padding: .15em .6em;
  border-radius: 999px;
  background: #ecfdf5; color: #047857;
  font-size: .78em; font-weight: 700; font-style: normal;
  margin-top: .3em;
}
.dm-pill.st-returning, .dm-pill.st-queued { background: #f3f4f6; color: #374151; }
.dm-pill.st-tofuel, .dm-pill.st-fueling { background: #fffbeb; color: #b45309; }
.dm-pill.st-workshop { background: #f3f4f6; color: #6b7280; }

.dm-driver {
  display: flex; gap: .7em; align-items: center;
  margin: .8em 0;
  padding: .7em;
  border: 1px solid var(--dm-line);
  border-radius: .7em;
}
.dm-driver .av {
  width: 2.6em; height: 2.6em; flex: none;
  border-radius: 50%;
  background: #064e3b; color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: .95em;
}
.dm-driver b { display: block; font-weight: 700; color: var(--dm-ink); }
.dm-driver small { display: block; font-size: .8em; color: var(--dm-muted); }

.dm-warnbox {
  display: flex; gap: .5em; align-items: flex-start;
  margin: 0 0 .8em;
  padding: .6em .7em;
  border-radius: .6em;
  background: #fef2f2; color: #991b1b;
  font-size: .85em; font-weight: 600;
}
.dm-warnbox .bi { font-size: 1.1em; }

.dm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6em .8em;
  margin: 0 0 .9em;
}
.dm-grid div { min-width: 0; }
.dm-grid dt { font-size: .75em; color: var(--dm-muted); font-weight: 500; }
.dm-grid dd { margin: 0; font-size: 1em; font-weight: 700; color: var(--dm-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-grid dd.wrap { white-space: normal; }
.dm-grid dd.is-bad { color: var(--dm-rose); }
.dm-grid .bar { display: block; height: .4em; margin-top: .3em; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.dm-grid .bar b { display: block; height: 100%; background: var(--dm-green); border-radius: 999px; }
.dm-grid .bar.is-bad b { background: var(--dm-rose); }

.dm-actions { display: grid; gap: .45em; }
.dm-actions button {
  display: flex; align-items: center; gap: .55em;
  width: 100%;
  padding: .6em .8em;
  border: 1px solid var(--dm-line);
  border-radius: .6em;
  background: #fff;
  color: var(--dm-ink);
  font: 600 .9em var(--sans);
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dm-actions button:hover { background: #f9fafb; border-color: #d1d5db; }
.dm-actions button.pri { background: #064e3b; border-color: #064e3b; color: #fff; }
.dm-actions button.pri:hover { background: #065f46; }
.dm-actions button.is-sent { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.dm-actions button.is-ack { background: #ecfdf5; border-color: #6ee7b7; color: #065f46; }
.dm-actions button.is-busy { background: #f3f4f6; color: var(--dm-muted); cursor: default; }
.dm-actions button .bi { font-size: 1.15em; }

/* registo */
.dm-log {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2em;
  align-items: start;
  padding: .55em 1.1em;
  background: #fff;
  border-top: 1px solid var(--dm-line);
  min-height: 4.6em;
}
.dm-log-title { display: inline-flex; align-items: center; gap: .4em; font-size: .8em; font-weight: 700; color: var(--dm-muted); text-transform: uppercase; letter-spacing: .06em; padding-top: .2em; }
.dm-log ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: .1em 1.4em;
  font-size: .85em;
}
.dm-log li { display: flex; gap: .6em; color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-log li time { color: var(--dm-muted); font-variant-numeric: tabular-nums; flex: none; }
.dm-log li.k-alert { color: #b91c1c; font-weight: 600; }
.dm-log li.k-ok { color: #047857; font-weight: 600; }
.dm-log li.is-new { animation: dm-in .4s ease-out; }

/* cursor guiado */
.dm-cursor {
  position: absolute;
  left: 0; top: 0;
  width: 26px; height: 26px;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity .35s;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / .4));
}
.dm-cursor.is-on { opacity: 1; }
.dm-cursor svg { width: 100%; height: 100%; display: block; }
.dm-cursor::after {
  content: "";
  position: absolute;
  left: 5px; top: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid #10b981;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
}
.dm-cursor.is-click::after { animation: dm-click .5s ease-out; }

/* ecrã inteiro */
.dm-wrap.is-zoomed {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #031d15;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
}
.dm-wrap.is-zoomed .dm-toolbar { margin-bottom: 8px; }
.dm-wrap.is-zoomed .dm-frame { flex: 1; min-height: 0; display: flex; }
.dm-wrap.is-zoomed .dm-app { flex: 1; min-height: 0; font-size: clamp(13px, 1vw, 17px); grid-template-columns: minmax(0, 1fr) 21em; }
.dm-wrap.is-zoomed .dm-map svg { height: 100%; aspect-ratio: auto; }
.dm-wrap.is-zoomed .dm-log ol { grid-template-columns: 1fr 1fr 1fr; }
.dm-wrap.is-zoomed + .dm-captions { display: none; }
body.dm-zoomed { overflow: hidden; }

/* carrossel do hero da home: a coluna é mais estreita do que o
   container inteiro, por isso usa sempre o esquema compacto,
   independentemente da largura da janela (o ecrã inteiro, que se
   liberta da coluna com position:fixed, continua à parte). */
.hero-demo-stage .dm-tabs { display: none; }
.hero-demo-stage .dm-kpis { grid-template-columns: repeat(3, 1fr); }
.hero-demo-stage .dm-kpi:nth-child(n+4) { border-top: 1px solid var(--dm-line); }
.hero-demo-stage .dm-wrap:not(.is-zoomed) .dm-app { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; font-size: 12px; }
.hero-demo-stage .dm-brand .site,
.hero-demo-stage .dm-user,
.hero-demo-stage .dm-live { display: none; }
.hero-demo-stage .dm-wrap:not(.is-zoomed) .dm-side { border-left: 0; border-top: 1px solid var(--dm-line); height: 15em; }
.hero-demo-stage .dm-legend { display: none; }
.hero-demo-stage .dm-hint { display: none; }
.hero-demo-stage .dm-log { display: none; }
.hero-demo-stage .dm-actions { display: none; }

/* ecrãs pequenos */
@media (max-width: 991px) {
  .dm-tabs { display: none; }
  .dm-kpis { grid-template-columns: repeat(3, 1fr); }
  .dm-kpi:nth-child(n+4) { border-top: 1px solid var(--dm-line); }
}
@media (max-width: 767px) {
  .dm-app, .dm-wrap.is-zoomed .dm-app { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto; font-size: 12px; }
  .dm-brand .site, .dm-user, .dm-live { display: none; }
  .dm-side { border-left: 0; border-top: 1px solid var(--dm-line); height: 15em; }
  .dm-legend { display: none; }
  .dm-log ol, .dm-wrap.is-zoomed .dm-log ol { grid-template-columns: 1fr; }
  .dm-log li:nth-child(n+3) { display: none; }
  .dm-wrap.is-zoomed { padding: 8px; overflow: auto; }
  .dm-wrap.is-zoomed .dm-frame { display: block; }
  .dm-wrap.is-zoomed .dm-map svg { height: auto; aspect-ratio: 4 / 3; }
  .dm-hint { display: none; }
}

/* movimento */
@keyframes dm-spin { to { transform: rotate(360deg); } }
@keyframes dm-flow { to { stroke-dashoffset: -18; } }
@keyframes dm-ring { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes dm-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes dm-dig { 0%, 100% { transform: rotate(-28deg); } 45% { transform: rotate(26deg); } 60% { transform: rotate(22deg); } }
@keyframes dm-pulse { 0% { box-shadow: 0 0 0 0 rgb(52 211 153 / .6); } 70% { box-shadow: 0 0 0 .6em rgb(52 211 153 / 0); } 100% { box-shadow: 0 0 0 0 rgb(52 211 153 / 0); } }
@keyframes dm-pulse-svg { 0%, 100% { r: 7; } 50% { r: 9; } }
@keyframes dm-click { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); } }
@keyframes dm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dm-gear, .dm-conv, .dm-ring, .dm-blink, .ex-arm, .dm-live i, .mc .sel, .tk .sel, .mc .bdg circle, .tk .bdg circle { animation: none; }
  .dm-ring { display: none; }
  .dm-cursor { display: none; }
}

/*--------------------------------------------------------------
# Linha de produção (COA Linha)
--------------------------------------------------------------*/
.dm-map-plant { background: #e9ebef; }
.dm-map-plant .nm {
  font: 600 12px var(--sans);
  fill: #374151;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #e9ebef;
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}
.tank .nm { font-size: 10.5px; }
.pl-pipe-legend text { font: 500 12px var(--sans); fill: #4b5563; }

/* estados das estações */
.st .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.5; }
.st.is-warn .lamp { fill: #f59e0b; animation: dm-blink 1s steps(1) infinite; }
.st.is-stopped .lamp { fill: #dc2626; animation: dm-blink .6s steps(1) infinite; }
.st.is-maint .lamp { fill: #3b82f6; }
.st.is-stopped .f-front, .st.is-stopped .f-top, .st.is-stopped .f-side { filter: saturate(.35) brightness(1.05); }
.st.is-warn .lbl rect { fill: #b45309; }
.st.is-stopped .lbl rect { fill: #b91c1c; }
.st .sel { fill: rgb(5 150 105 / .1); transform-box: fill-box; transform-origin: center; }
.st .lvl { transition: y .6s linear; }

/* movimento das máquinas */
.pl-belt { stroke-dasharray: 6 12; animation: dm-flow 1.1s linear infinite; }
.pl-flow { stroke-dasharray: 9 9; animation: dm-flow .8s linear infinite; }
.pl-steam { animation-duration: 1.4s; }
.pl-air { animation-duration: .5s; }
.pl-carousel { animation: dm-spin 4s linear infinite; }
.pl-fan { transform-box: fill-box; transform-origin: center; animation: dm-spin 1.2s linear infinite; }
.pl-roll { transform-box: fill-box; transform-origin: center; animation: dm-spin 2s linear infinite; }
.pl-head { animation: pl-press .9s ease-in-out infinite; }
.pl-arm { animation: pl-arm 1.6s ease-in-out infinite; }
.pl-lift { animation: pl-lift 3s ease-in-out infinite; }
.pl-heat { animation: pl-heat 1.6s ease-in-out infinite; }
.pl-flame { animation: pl-flame .5s ease-in-out infinite alternate; }
.pl-smoke circle { animation: pl-smoke 2.4s linear infinite; }
.pl-smoke circle:nth-child(2) { animation-delay: -.8s; }
.pl-smoke circle:nth-child(3) { animation-delay: -1.6s; }
.st.is-stopped .pl-carousel, .st.is-stopped .pl-head, .st.is-stopped .pl-roll,
.st.is-stopped .pl-arm, .st.is-stopped .pl-lift { animation-play-state: paused; }

/* artigos */
.it .body { fill: #f59e0b; stroke: #92400e; stroke-width: 1; }
.it .cap { fill: #1f2937; display: none; }
.it .lb { fill: #fff; opacity: .9; display: none; }
.it.is-capped .cap { display: block; }
.it.is-labeled .lb { display: block; }

.dm-legend i.bt { background: #f59e0b; }
.dm-legend i.bt2 { background: #f59e0b; border-left: 3px solid #1f2937; }
.dm-legend i.bx { background: #b07a3b; }
.dm-legend i.pa { background: #a16207; }
.dm-row i.dot.ok { background: #22c55e; }
.dm-row i.dot.mt { background: #3b82f6; }
.dm-pill.st-stopped { background: #fef2f2; color: #b91c1c; }
.dm-pill.st-warning { background: #fffbeb; color: #b45309; }
.dm-pill.st-maint { background: #eff6ff; color: #1d4ed8; }

/* linha de tendência */
.dm-spark { margin: 0 0 .9em; padding: .6em .7em; border: 1px solid var(--dm-line); border-radius: .7em; }
.dm-spark > span { display: block; font-size: .75em; color: var(--dm-muted); margin-bottom: .3em; }
.dm-spark svg { display: block; width: 100%; height: 3.2em; overflow: visible; }
.dm-spark polyline { fill: none; stroke: var(--dm-green); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dm-spark polyline.is-bad { stroke: var(--dm-rose); }
.dm-spark .lim { stroke: #f59e0b; stroke-width: 1; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }

@keyframes pl-press { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes pl-arm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
@keyframes pl-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(40px); } }
@keyframes pl-heat { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes pl-flame { from { r: 6; fill: #fde68a; } to { r: 9; fill: #f97316; } }
@keyframes pl-smoke { 0% { transform: translateY(0); opacity: .9; } 100% { transform: translateY(-28px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pl-belt, .pl-flow, .pl-carousel, .pl-fan, .pl-roll, .pl-head, .pl-arm, .pl-lift, .pl-heat, .pl-flame, .pl-smoke circle, .st .lamp { animation: none; }
}

/*--------------------------------------------------------------
# Energia (COA Energia)
--------------------------------------------------------------*/
.dm-map-energy { background: #f3f4f6; }
.nd .bx { fill: #fff; stroke: #d1d5db; stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgb(16 24 40 / .08)); }
.nd .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.nd.is-sel .sel { display: block; }
.nd .nm { font: 600 11.5px var(--sans); fill: #111827; }
.nd .id { font: 500 9px var(--sans); fill: #9ca3af; letter-spacing: .04em; }
.nd .kw { font: 800 15px var(--sans); fill: #111827; text-anchor: end; font-variant-numeric: tabular-nums; }
.nd .aux { font: 500 10.5px var(--sans); fill: #6b7280; }
.nd .row { font: 500 10.5px var(--sans); fill: #6b7280; }
.nd .rowv { font: 700 11px var(--sans); fill: #111827; text-anchor: end; font-variant-numeric: tabular-nums; }
.nd .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.5; }
.nd.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.nd.is-shed .lamp { fill: #3b82f6; }
.nd.is-off .lamp { fill: #9ca3af; animation: none; }
.nd.is-warn .bx { stroke: #dc2626; stroke-width: 2; }
.nd.is-shed .bx { stroke: #3b82f6; }
.nd.is-off .bx { fill: #f9fafb; stroke-dasharray: 4 3; }
.nd .bdg { display: none; }
.nd.is-alert .bdg { display: block; }
.nd .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.nd.is-ack .bdg circle { fill: #059669; animation: none; }
.nd .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

.ln-base { fill: none; stroke-linecap: round; transition: stroke-width .3s; }
.ln-flow { fill: none; stroke: #fff; stroke-linecap: round; stroke-dasharray: 10 16; animation: dm-flow 1s linear infinite; opacity: .8; }

.en-gauge .big { font: 800 20px var(--sans); fill: #111827; text-anchor: middle; font-variant-numeric: tabular-nums; }
.en-gauge .cap { font: 500 10.5px var(--sans); fill: #6b7280; text-anchor: middle; }
.en-profile .cap { font: 600 11px var(--sans); fill: #374151; }
.en-profile .tick { font: 500 9.5px var(--sans); fill: #9ca3af; text-anchor: middle; }
.en-profile .bar.past { fill: #a7f3d0; }
.en-profile .bar.now { fill: #059669; }
.en-profile .bar.future { fill: #e5e7eb; }
.en-sun { animation: dm-spin 12s linear infinite; transform-box: fill-box; transform-origin: center; }
.en-genrot { animation: dm-spin 1.5s linear infinite; animation-play-state: paused; }
.nd:not(.is-off) .en-genrot { animation-play-state: running; }
.en-air circle { animation: dm-blink 1.4s ease-in-out infinite; }
.en-air circle:nth-child(2) { animation-delay: .45s; }
.en-air circle:nth-child(3) { animation-delay: .9s; }

.dm-pill.st-outage { background: #fef2f2; color: #b91c1c; }
.dm-pill.st-shed { background: #eff6ff; color: #1d4ed8; }
.dm-pill.st-standby, .dm-pill.st-off { background: #f3f4f6; color: #6b7280; }
.dm-pill.st-running { background: #ecfdf5; color: #047857; }

@media (prefers-reduced-motion: reduce) {
  .ln-flow, .en-sun, .en-genrot, .en-air circle, .nd .lamp, .nd .bdg circle { animation: none; }
}

/*--------------------------------------------------------------
# Agricultura (COA Campo)
--------------------------------------------------------------*/
.dm-map-farm { background: #c9bb8f; }
.ag .sel { fill: rgb(5 150 105 / .1); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.ag.is-sel .sel { display: block; }
.ag .soil { stroke: #6b5d3a; stroke-width: 2; transition: fill .6s linear; }
.ag .rows line { stroke: rgb(255 255 255 / .28); stroke-width: 2; }
.ag .drip { display: none; }
.ag.is-on .drip { display: block; }
.ag .drip line { stroke: #7dd3fc; stroke-width: 2; stroke-dasharray: 3 9; animation: dm-flow 1.2s linear infinite; }
.ag.is-on .soil { stroke: #38bdf8; stroke-width: 3; }
.ag.is-cut .soil { stroke: #b91c1c; stroke-dasharray: 8 6; }
.ag.is-warn .soil { stroke: #dc2626; stroke-width: 3; }
.ag .probe circle { fill: #1f2937; stroke: #fff; stroke-width: 1.5; }
.ag .probe line { stroke: #1f2937; stroke-width: 2; }
.ag .probe .tip { fill: #22c55e; stroke: none; animation: dm-blink 2.2s steps(1) infinite; }
.ag .valve circle { fill: #e5e7eb; stroke: #374151; stroke-width: 2; }
.ag .valve path { stroke: #374151; stroke-width: 2; }
.ag.is-on .valve circle { fill: #38bdf8; stroke: #0369a1; }
.ag.is-on .valve path { stroke: #fff; }
.ag.is-cut .valve circle { fill: #dc2626; stroke: #7f1d1d; }
.ag.is-cut .valve path { stroke: #fff; }
.ag .lbl rect { fill: rgb(17 24 39 / .82); }
.ag .lbl text { font: 700 10.5px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.ag .nm { font: 600 12px var(--sans); fill: #1f2937; paint-order: stroke; stroke: rgb(255 255 255 / .6); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ag .val { font: 800 14px var(--sans); fill: #1f2937; paint-order: stroke; stroke: rgb(255 255 255 / .7); stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; pointer-events: none; }
.ag.is-warn .lbl rect { fill: #b91c1c; }
.ag .bdg { display: none; }
.ag.is-alert .bdg { display: block; }
.ag .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.ag.is-ack .bdg circle { fill: #059669; animation: none; }
.ag .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

/* pivôs */
.piv .ring { fill: none; stroke: rgb(255 255 255 / .35); stroke-width: 1.5; }
.piv .wet { fill: rgb(56 189 248 / .28); display: none; }
.piv.is-on .wet { display: block; }
.piv .arm line { stroke: #374151; stroke-width: 4; }
.piv .arm circle { fill: #9ca3af; stroke: #374151; stroke-width: 1.5; }
.piv .spray { display: none; }
.piv.is-on .spray { display: block; }
.piv .spray circle { fill: #bae6fd; animation: ag-spray .7s linear infinite; }
.piv .hub { fill: #374151; stroke: #fff; stroke-width: 2; }

/* condutas */
.pipe-flow path { stroke-dasharray: 8 10; opacity: 0; animation: dm-flow .9s linear infinite; transition: opacity .4s; }
.pipe-flow path.is-on { opacity: 1; }

/* charca, furo, bomba, estação */
.res .water { transition: y .6s linear; }
.res .wave { animation: ag-wave 3s ease-in-out infinite; }
.res.is-filling .water { fill: #2563eb; }
.ag-bore .bore-lamp { fill: #9ca3af; }
.ag-bore.is-on .bore-lamp { fill: #22c55e; animation: dm-blink 1s steps(1) infinite; }
.pump .lamp { fill: #9ca3af; }
.pump.is-on .lamp { fill: #22c55e; }
.pump .rotor { animation: dm-spin 1.2s linear infinite; animation-play-state: paused; }
.pump.is-on .rotor { animation-play-state: running; }
.pump.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.met .lamp { fill: #22c55e; }
.met .anemo { animation: dm-spin 2.4s linear infinite; }
.met.is-rain .anemo { animation-duration: 1.1s; }
.met .cloud { display: none; }
.met.is-rain .cloud { display: block; }
.met.is-rain .sun { display: none; }

/* chuva */
.ag-rain { display: none; pointer-events: none; }
.is-raining .ag-rain { display: block; }
.ag-rain line { stroke: #7dd3fc; stroke-width: 1.5; opacity: .7; animation: ag-rain 1s linear infinite; }

.dm-pill.st-irrigating, .dm-pill.st-running, .dm-pill.st-filling { background: #e0f2fe; color: #0369a1; }
.dm-pill.st-closed { background: #fef2f2; color: #b91c1c; }
.dm-pill.st-rain { background: #eff6ff; color: #1d4ed8; }

@keyframes ag-spray { from { transform: translateY(0); opacity: 1; } to { transform: translateY(10px); opacity: 0; } }
@keyframes ag-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-12px); } }
@keyframes ag-rain { from { transform: translateY(-20px); opacity: 0; } 30% { opacity: .7; } to { transform: translateY(40px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ag .drip line, .ag .probe .tip, .piv .spray circle, .pipe-flow path, .res .wave, .ag-bore .bore-lamp, .pump .rotor, .met .anemo, .ag-rain line, .ag .bdg circle, .pump .lamp { animation: none; }
}

/*--------------------------------------------------------------
# Água e ambiente (COA Água)
--------------------------------------------------------------*/
.dm-map-water { background: #eef2f7; }
.wt .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.wt.is-sel .sel { display: block; }
.wt .nm { font: 600 11.5px var(--sans); fill: #374151; paint-order: stroke; stroke: #eef2f7; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.wt .val { font: 800 15px var(--sans); fill: #1e3a8a; paint-order: stroke; stroke: rgb(255 255 255 / .8); stroke-width: 3px; font-variant-numeric: tabular-nums; pointer-events: none; }
.wt .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.5; }
.wt.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.wt .lbl rect { fill: rgb(17 24 39 / .82); }
.wt .lbl text { font: 700 10.5px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.wt.is-warn .lbl rect { fill: #b91c1c; }
.wt .bdg { display: none; }
.wt.is-alert .bdg { display: block; }
.wt .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.wt.is-ack .bdg circle { fill: #059669; animation: none; }
.wt .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

/* painéis de sensor */
.tag rect { fill: #fff; stroke: #94a3b8; stroke-width: 1.2; }
.tag .t { font: 600 9px var(--sans); fill: #64748b; letter-spacing: .04em; }
.tag .v { font: 700 12px var(--sans); fill: #111827; text-anchor: end; font-variant-numeric: tabular-nums; }
.tag.is-bad rect { stroke: #dc2626; stroke-width: 1.8; }
.tag.is-bad .v { fill: #b91c1c; }
.net .sp { fill: #1f2937; stroke: #fff; stroke-width: 1.5; }
.net .sl { stroke: #64748b; stroke-width: 1.2; stroke-dasharray: 2 2; }

/* condutas e válvulas */
.pipe-flow path { stroke-dasharray: 7 11; opacity: 0; animation: dm-flow .8s linear infinite; transition: opacity .4s; }
.pipe-flow path.is-on { opacity: 1; }
.vlv { cursor: pointer; }
.vlv:focus, .vlv:focus-visible { outline: none; }
.vlv .hit { fill: transparent; }
.vlv .body path { fill: #22c55e; stroke: #166534; stroke-width: 1.5; transition: fill .3s; }
.vlv .body { transform-box: fill-box; transform-origin: center; transition: transform .5s ease; }
.vlv .stem { stroke: #374151; stroke-width: 2.5; }
.vlv .hw { fill: #374151; }
.vlv .id { font: 600 9.5px var(--sans); fill: #475569; text-anchor: middle; pointer-events: none; }
.vlv.is-closed .body { transform: rotate(90deg); }
.vlv.is-closed .body path { fill: #dc2626; stroke: #7f1d1d; }
.vlv:hover .body path { filter: brightness(1.1); }

/* unidades */
.pump .shell { fill: #fff; stroke: #374151; stroke-width: 2.5; }
.pump .rotor path { fill: #2563eb; }
.pump .rotor { animation: dm-spin 1.1s linear infinite; animation-play-state: paused; }
.pump.is-on .rotor { animation-play-state: running; }
.pump .lamp { fill: #9ca3af; }
.pump.is-on .lamp { fill: #22c55e; }
.tank .mixer { animation: dm-spin 1.6s linear infinite; animation-play-state: paused; }
.tank.is-on .mixer { animation-play-state: running; }
.tank .water { transition: y .6s linear; }
.tank .wave { animation: ag-wave 3s ease-in-out infinite; }
.tank .dose circle { animation: wt-drip 1s linear infinite; }
.tank .gw-ring { animation: dm-ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.intake .wave { animation: ag-wave 2.5s ease-in-out infinite; }
.intake .wave:nth-of-type(2) { animation-delay: -1.2s; }
.filter .wash { display: none; }
.filter.is-washing .wash { display: block; animation: wt-wash .8s ease-in-out infinite alternate; }
.filter.is-washing .lamp { fill: #3b82f6; animation: dm-blink .6s steps(1) infinite; }
.wt-sector .houses { transition: fill .4s; }
.wt-sector.is-off .houses { fill: #dc2626; opacity: .6; }
.wt-sector .nm { font: 600 11px var(--sans); fill: #374151; }
.env .anemo { animation: dm-spin 2.4s linear infinite; }
.wt-chart .cap { font: 600 11px var(--sans); fill: #374151; }
.wt-chart .lg { font: 600 10px var(--sans); }

.dm-pill.st-washing, .dm-pill.st-running { background: #e0f2fe; color: #0369a1; }
.dm-pill.st-isolated { background: #fef2f2; color: #b91c1c; }

@keyframes wt-drip { from { transform: translateY(-4px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
@keyframes wt-wash { from { opacity: .3; } to { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
  .pipe-flow path, .pump .rotor, .tank .mixer, .tank .wave, .tank .dose circle, .tank .gw-ring, .intake .wave, .filter .wash, .filter.is-washing .lamp, .env .anemo, .wt .lamp, .wt .bdg circle { animation: none; }
}

/*--------------------------------------------------------------
# Petróleo e gás (COA Campo Petrolífero)
--------------------------------------------------------------*/
.dm-map-oil { background: #f4f6f9; }
.og .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.og.is-sel .sel { display: block; }
.og .nm { font: 600 11.5px var(--sans); fill: #374151; paint-order: stroke; stroke: #f4f6f9; stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.og .val { font: 800 14px var(--sans); fill: #78350f; paint-order: stroke; stroke: rgb(255 255 255 / .8); stroke-width: 3px; font-variant-numeric: tabular-nums; pointer-events: none; }
.og .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.5; }
.og.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.og .lbl rect { fill: rgb(17 24 39 / .82); }
.og .lbl text { font: 700 10.5px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.og.is-warn .lbl rect { fill: #b91c1c; }
.og .bdg { display: none; }
.og.is-alert .bdg { display: block; }
.og .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.og.is-ack .bdg circle { fill: #059669; animation: none; }
.og .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.zone-lbl { font: 600 12px var(--sans); fill: #b45309; }

/* poços */
.og.well.is-choked .lamp { fill: #f59e0b; }
.og.well.is-warn .lamp { fill: #dc2626; }

/* coletor isolado */
.og.man.is-isolated .lamp { fill: #3b82f6; }

/* separador */
.og.sep .oil-l, .og.sep .wat-l, .og.sep .gas-space { transition: none; }

/* tocha */
.og.flare .flame path { animation: og-flame .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom center; }
.og.flare .flame path:nth-child(2) { animation-delay: -.25s; }
.og.flare.is-low .flame { opacity: .4; }

/* pontos de proteção catódica */
.cp-pt circle { fill: #1f2937; stroke: #fff; stroke-width: 1.5; }
.cp-pt line { stroke: #1f2937; stroke-width: 2; }
.cp-pt .tip { fill: #22c55e; stroke: none; animation: dm-blink 2.4s steps(1) infinite; }
.og.pl.is-warn .cp-pt .tip { fill: #dc2626; animation: dm-blink .9s steps(1) infinite; }

/* gateway */
.og.gw .ring { animation: dm-ring 2.6s ease-out infinite; }
.og.gw .ring2 { animation-delay: 1.3s; }

.dm-pill.st-choked { background: #fffbeb; color: #b45309; }
.dm-pill.st-isolated { background: #eff6ff; color: #1d4ed8; }
.dm-pill.st-alarm { background: #fef2f2; color: #b91c1c; }

@keyframes og-flame { from { transform: scaleY(1); } to { transform: scaleY(1.18); } }

@media (prefers-reduced-motion: reduce) {
  .og.flare .flame path, .cp-pt .tip, .og.gw .ring, .og .lamp, .og .bdg circle { animation: none; }
}

/*--------------------------------------------------------------
# Logística e cadeia de frio (COA Frio)
--------------------------------------------------------------*/
.dm-map-cold { background: #eef1f6; }
.lg-flow { animation: dm-flow 1.4s linear infinite; opacity: .8; }
.wh-lbl { font: 700 12px var(--sans); fill: #475569; letter-spacing: .04em; text-transform: uppercase; }

/* câmaras e docas */
.lg .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.lg.is-sel .sel { display: block; }
.lg .nm { font: 700 11px var(--sans); fill: #1f2937; pointer-events: none; }
.lg .val { font: 800 11px var(--sans); fill: #374151; pointer-events: none; font-variant-numeric: tabular-nums; }
.lg .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.4; }
.lg.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.lg .bdg { display: none; }
.lg.is-alert .bdg { display: block; }
.lg .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.lg.is-ack .bdg circle { fill: #059669; animation: none; }
.lg .bdg text { font: 800 9px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.lg.cr .door { display: none; }
.lg.cr.is-open .door { display: block; }
.lg.cr.is-warn .box { stroke: #dc2626; stroke-width: 3; }
.lg.dock .door { opacity: .3; }
.lg.dock.is-occupied .door { opacity: 1; fill: #93c5fd; }
.lg.dock.is-occupied .bay { fill: #eff6ff; }
.lg.dock.is-warn .bay { stroke: #dc2626; stroke-width: 2; }
.lg .lbl rect { fill: rgb(17 24 39 / .82); }
.lg .lbl text { font: 700 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

/* pontos de entrega */
.lg-stop { pointer-events: none; }
.lg-stop .ring { fill: none; stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 4; animation: dm-spin 10s linear infinite; }
.lg-stop .dot { fill: #64748b; stroke: #fff; stroke-width: 1.5; }
.lg-stop .nm { font: 600 11px var(--sans); fill: #475569; paint-order: stroke; stroke: #eef1f6; stroke-width: 3px; stroke-linejoin: round; }

/* camiões */
.lg-truck .trailer { fill: #22c55e; stroke: #166534; stroke-width: 1.5; transition: fill .5s; }
.lg-truck.is-bad .trailer { fill: #dc2626; stroke: #7f1d1d; }
.lg-truck .cab { fill: #1f2937; }
.lg-truck .door-open { fill: #fde68a; display: none; }
.lg-truck.is-open .door-open { display: block; }
.lg-truck.is-moving .trailer { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }

.dm-row i.dot.bad { background: #dc2626; }
.dm-pill.st-toDeliver, .dm-pill.st-delivering, .dm-pill.st-loading, .dm-pill.st-atDock { background: #e0f2fe; color: #0369a1; }
.dm-pill.st-returning { background: #f3f4f6; color: #374151; }

@media (prefers-reduced-motion: reduce) {
  .lg-flow, .lg-stop .ring, .lg .lamp, .lg .bdg circle { animation: none; }
}

/*--------------------------------------------------------------
# Edifícios (COA Edifício) — planta com pessoas em circulação
--------------------------------------------------------------*/
.dm-map-plan { background: #f7f8fb; }
.corr-lbl { font: 700 16px var(--sans); fill: #cbd5e1; }

.bd .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.bd.is-sel .sel { display: block; }
.bd .nm { font: 700 13px var(--sans); fill: #1f2937; pointer-events: none; }
.bd .nm2 { font: 700 9.5px var(--sans); fill: #475569; pointer-events: none; }
.bd .lamp { fill: #22c55e; stroke: #fff; stroke-width: 1.4; }
.bd.is-warn .lamp { fill: #dc2626; animation: dm-blink .8s steps(1) infinite; }
.bd .bdg { display: none; }
.bd.is-alert .bdg { display: block; }
.bd .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.bd.is-ack .bdg circle { fill: #059669; animation: none; }
.bd .bdg text { font: 800 9px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

/* salas */
.bd.room .wall { stroke: #cbd5e1; stroke-width: 2; transition: opacity .3s; }
.bd.room.is-warn .wall { stroke: #dc2626; stroke-width: 3; }
.bd.room.is-cut .wall { opacity: .55; }
.bd.room .desks rect { transition: fill .3s; }
.tag.is-bad .v { fill: #b91c1c; }
.tag.is-bad rect { stroke: #dc2626; }

/* equipamento da sala técnica */
.bd.unit.is-on .fan { animation: dm-spin 1.4s linear infinite; }
.bd.unit.is-warn rect:first-of-type { stroke: #dc2626 !important; stroke-width: 3; }
.bd.door .leaf { transition: transform .4s; transform-box: fill-box; transform-origin: top center; }
.bd.door.is-open .leaf { transform: rotate(55deg); }
.bd.door.is-warn .leaf { stroke: #dc2626; stroke-width: 2.5; }

/* pessoas: marcador de tamanho constante, seguido em direto na planta */
.bd.person { cursor: pointer; }
.bd.person .dot { fill: #4f46e5; stroke: #fff; stroke-width: 2; transition: fill .3s; }
.bd.person .glyph { font: 800 9px var(--sans); fill: #fff; pointer-events: none; }
.bd.person .sel { animation: none; }
.bd.person.is-alert .dot { fill: #dc2626; }
.bd.person.is-ack .dot { fill: #059669; }
.bd.person .bdg circle { r: 6; }
.bd.person .bdg text { font-size: 8px; }

.dm-pill.st-work, .dm-pill.st-running { background: #ecfdf5; color: #047857; }
.dm-pill.st-meeting { background: #eff6ff; color: #1d4ed8; }
.dm-pill.st-break { background: #fffbeb; color: #b45309; }
.dm-pill.st-reception { background: #fff7ed; color: #c2410c; }
.dm-pill.st-walking { background: #f3f4f6; color: #374151; }
.dm-pill.st-open { background: #fef2f2; color: #b91c1c; }
.dm-pill.st-closed { background: #f3f4f6; color: #475569; }
.dm-pill.st-stopped { background: #fef2f2; color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
  .bd.unit.is-on .fan, .bd .lamp, .bd .bdg circle { animation: none; }
}

/* controlos de rotina por sala: persianas, luz e AC */
.ctrl-shutter .frame { fill: #dbeafe; stroke: #60a5fa; stroke-width: 1.2; }
.ctrl-shutter .slat { stroke: #60a5fa; stroke-width: 1; opacity: .55; }
.ctrl-shutter.is-closed .frame { fill: #94a3b8; stroke: #475569; }
.ctrl-shutter.is-closed .slat { stroke: #1f2937; opacity: .85; }
.ctrl-light .bulb { fill: #fde047; stroke: #ca8a04; stroke-width: 1.2; transition: fill .3s; }
.ctrl-light.is-off .bulb { fill: #d1d5db; stroke: #9ca3af; }
.ctrl-ac .frame { fill: #e0f2fe; stroke: #38bdf8; stroke-width: 1.2; }
.ctrl-ac .vent { stroke: #38bdf8; stroke-width: 1.4; stroke-linecap: round; }
.ctrl-ac.is-off .frame { fill: #e5e7eb; stroke: #9ca3af; }
.ctrl-ac.is-off .vent { stroke: #9ca3af; }

/*--------------------------------------------------------------
# Saúde (COA Saúde) — cadeia de frio médica
--------------------------------------------------------------*/
.dm-map-health { background: #f7f8fb; }
.genrot { animation: dm-spin 1.6s linear infinite; animation-play-state: paused; }
.nd.is-on .genrot { animation-play-state: running; }

/*--------------------------------------------------------------
# Iluminação pública (COA Luz)
--------------------------------------------------------------*/
.dm-map-street { background: #bcd4e6; overflow: hidden; }
/* os stops do gradiente são irmãos do <rect class="sky">, não descendentes
   dele — o seletor tem de os visar diretamente */
.sky-top { stop-color: #bfe3f7; transition: stop-color 1.2s linear; }
.sky-bot { stop-color: #eef7ff; transition: stop-color 1.2s linear; }
.dm-map-street.is-night .sky-top { stop-color: #0b1b33; }
.dm-map-street.is-night .sky-bot { stop-color: #1e3358; }
.stars { opacity: 0; transition: opacity 1.2s linear; }
.dm-map-street.is-night .stars { opacity: .9; }

.road { stroke-linecap: round; }
.road-line { stroke-linecap: round; opacity: .8; }

/* sol / lua */
.il.sensor .sel { fill: rgb(5 150 105 / .08); stroke: #059669; stroke-width: 2.5; stroke-dasharray: 8 6; display: none; animation: none; }
.il.sensor.is-sel .sel { display: block; }
.il.sensor .sun { fill: #fbbf24; transition: opacity .8s linear; }
.il.sensor .rays { stroke: #fbbf24; transition: opacity .8s linear; }
.il.sensor .moon { fill: #e5e7eb; transition: opacity .8s linear; }
.il.sensor .lbl rect { fill: rgb(17 24 39 / .82); }
.il.sensor .lbl text { font: 700 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.il.sensor .bdg { display: none; }
.il.sensor.is-alert .bdg { display: block; }
.il.sensor .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.il.sensor.is-ack .bdg circle { fill: #059669; animation: none; }
.il.sensor .bdg text { font: 800 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.il.sensor.is-warn .sun, .il.sensor.is-warn .moon { filter: drop-shadow(0 0 4px #dc2626); }

/* luminárias */
.il.lamp-post { cursor: pointer; }
.il.lamp-post .sel { fill: rgb(5 150 105 / .1); stroke: #059669; stroke-width: 2; stroke-dasharray: 6 5; display: none; animation: none; }
.il.lamp-post.is-sel .sel { display: block; }
.il.lamp-post .glow { fill: #fde047; opacity: 0; transition: opacity .4s; }
.il.lamp-post.is-on .glow { opacity: .55; }
.il.lamp-post .bulb { fill: #64748b; transition: fill .4s; }
.il.lamp-post.is-on .bulb { fill: #fde047; }
.il.lamp-post.is-fault .bulb { fill: #dc2626; animation: dm-blink .7s steps(1) infinite; }
.il.lamp-post.is-fault .glow { opacity: 0; }
.il.lamp-post .lbl rect { fill: rgb(17 24 39 / .7); }
.il.lamp-post .lbl text { font: 700 10px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }
.il.lamp-post .bdg { display: none; }
.il.lamp-post.is-alert .bdg { display: block; }
.il.lamp-post .bdg circle { fill: #dc2626; stroke: #fff; stroke-width: 1.5; animation: dm-pulse-svg 1s infinite; }
.il.lamp-post.is-ack .bdg circle { fill: #059669; animation: none; }
.il.lamp-post .bdg text { font: 800 9px var(--sans); fill: #fff; text-anchor: middle; pointer-events: none; }

.dm-pill.st-on { background: #fefce8; color: #a16207; }
.dm-pill.st-off { background: #f3f4f6; color: #6b7280; }
.dm-pill.st-fault { background: #fef2f2; color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
  .il.lamp-post.is-fault .bulb, .il.sensor .bdg circle, .il.lamp-post .bdg circle { animation: none; }
}