/* Ricentra Broadcast OS — sistema visual do cockpit.
   Sem @import de fontes externas de propósito: os sites vivem atrás de VPN e há
   locais técnicos sem saída para a Internet. Uma fonte que não carrega faz o cockpit
   abrir torto exatamente onde ele é mais preciso. */

:root {
    color-scheme: dark;
    --bg: #050a11;
    --panel: #0b1420;
    --panel2: #0f1b29;
    --line: #1d3348;
    --line2: #294863;
    --text: #f2f9ff;
    --ink: #e6f0f8;   /* texto sobre fundos ligeiramente mais claros (chips, barras) */
    /* Legibilidade: o cinzento-texto anterior (#7891a6) tinha pouco contraste sobre o
       fundo escuro. Este passa o rácio de contraste para nível legível. */
    --muted: #93a9bd;
    --cyan: #00c8ff;
    --green: #25e47b;
    --amber: #ffb020;
    --red: #ff435d;
    --purple: #9b5cff;
    --shadow: 0 24px 80px rgba(0,0,0,.32);
    --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    /* "Text" e não "Display": a variante Display é desenhada para títulos grandes e fica
       mal definida em texto pequeno, que é a maior parte deste cockpit. */
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    font-size: 15.5px;              /* base maior para leitura mais folgada */
    /* SEM -webkit-font-smoothing: antialiased. É uma definição de Mac; no Windows desliga
       o ClearType (subpixel) e é o que fazia as letras parecerem esborratadas. Também sem
       text-rendering: optimizeLegibility, que não traz nada aqui e piora o espaçamento. */
}

body {
    background-image:
        radial-gradient(circle at 70% -20%, rgba(0,200,255,.10), transparent 36rem),
        linear-gradient(rgba(15,37,57,.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15,37,57,.12) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
    background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }

/* --- Estrutura ---------------------------------------------------------- */

.shell { min-height: 100vh; display: grid; grid-template-columns: 246px minmax(0,1fr); }

.sidebar {
    position: sticky; top: 0; height: 100vh; padding: 22px 16px;
    background: linear-gradient(180deg, rgba(6,13,22,.98), rgba(7,15,24,.97));
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    z-index: 100; /* acima do conteúdo, senão o flyout do submenu fica atrás das caixas */
}

.brand { display: flex; align-items: center; gap: 12px; padding: 4px 2px; }
/* O logo é um PNG com fundo preto; screen faz o preto desaparecer e deixa só o
   desenho brilhar sobre a barra lateral, sem a caixa preta a destoar. */
.brand-logo { width: 100%; max-width: 200px; height: auto; display: block; }
/* Um logótipo por tema (têm fundo próprio): mostra-se o certo, esconde-se o outro. */
.light-only { display: none; }
:root[data-theme="light"] .light-only { display: block; }
:root[data-theme="light"] .dark-only { display: none; }

.nav-menu { display: grid; gap: 4px; margin-top: 32px; }
.nav-menu a {
    display: flex; align-items: center; gap: 12px; padding: 10px 13px;
    color: #89a0b3; border: 1px solid transparent; border-radius: 10px;
    font-size: .87rem; font-weight: 600; transition: .18s;
}
.nav-menu a i { width: 20px; text-align: center; font-style: normal; font-size: 1rem; color: #618097; }
.nav-menu a:hover { color: #fff; background: #0d1a27; }
.nav-menu a.active {
    color: #fff; background: linear-gradient(90deg, rgba(22,119,255,.25), rgba(0,200,255,.07));
    border-color: #1d65ae; box-shadow: inset 3px 0 var(--cyan);
}
.nav-menu a.active i { color: var(--cyan); }
.nav-menu a .count {
    margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
    background: var(--red); color: #fff; font-size: .65rem; text-align: center;
}

/* Grupo Administração. Um <div> simples — o <details> era escondido pelo Chrome através
   do pseudo-elemento ::details-content e o flyout nunca aparecia. */
.nav-group { display: grid; gap: 4px; }
.nav-group-head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 13px; cursor: pointer;
    color: #89a0b3; background: transparent; border: 1px solid transparent; border-radius: 10px;
    font-size: .87rem; font-weight: 600; font-family: inherit; text-align: left; transition: .18s;
}
.nav-group-head i { width: 20px; text-align: center; font-style: normal; font-size: 1rem; color: #618097; }
.nav-group-head::after { content: "⌄"; margin-left: auto; font-size: .9rem; transition: transform .18s; }
.nav-group.open > .nav-group-head::after { transform: rotate(180deg); }
.nav-group-head:hover { color: #fff; background: #0d1a27; }
:root[data-theme="light"] .nav-group-head { color: #2a3f52; }
:root[data-theme="light"] .nav-group-head:hover { background: #e9f0f7; }

/* Telemóvel: acordeão por toque. Fechado esconde-se, aberto empurra a lista. */
.nav-sub { display: none; gap: 4px; margin: 4px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.nav-group.open > .nav-sub { display: grid; }

/* Ecrã grande: abre À DIREITA por PASSAGEM DO RATO. Sem botão de abrir/fechar. */
@media (min-width: 861px) {
    .nav-group { position: relative; }
    .nav-group > .nav-sub {
        display: grid; position: absolute; left: calc(100% + 8px); top: 0; z-index: 300;
        min-width: 214px; margin: 0; padding: 8px; border: 1px solid var(--line2);
        border-radius: 12px; background: #0b1420; box-shadow: var(--shadow);
        opacity: 0; visibility: hidden; pointer-events: none;
        /* Ao SAIR fica ~1s aberto: dá tempo de chegar lá sem correr. */
        transition: opacity .2s ease 1s, visibility 0s linear 1.2s;
    }
    /* Ponte invisível sobre o vão entre o item e o flyout, senão o hover cai a meio. */
    .nav-group > .nav-sub::before {
        content: ""; position: absolute; left: -16px; top: -10px; width: 16px; height: calc(100% + 20px);
    }
    .nav-group:hover > .nav-sub {
        opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity .12s ease 0s, visibility 0s linear 0s;
    }
    /* A seta "⌄" (que sugeria clique) passa a "›": há mais coisas AO LADO. */
    .nav-group-head { cursor: default; }
    .nav-group-head::after { content: "›"; font-size: 1rem; transform: none !important; opacity: .55; }
    .nav-group:hover > .nav-group-head { color: #fff; background: #0d1a27; }
    :root[data-theme="light"] .nav-group:hover > .nav-group-head { background: #e9f0f7; }
    :root[data-theme="light"] .nav-group > .nav-sub { background: #ffffff; }
}
.sidebar-foot {
    margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 11px;
    border: 1px solid var(--line); background: #09131e; border-radius: 11px;
}
.sidebar-foot b { font-size: .74rem; display: block; }
.sidebar-foot small { font-size: .66rem; color: var(--muted); }

.theme-toggle {
    margin-top: 10px; width: 100%; padding: 9px 12px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; background: #0d1a27; color: #cfe0ec;
    font-size: .78rem; font-weight: 600; text-align: left; transition: border-color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--line2); background: #10202f; }
:root[data-theme="light"] .theme-toggle { background: #f3f7fb; color: #2a3f52; }
:root[data-theme="light"] .theme-toggle:hover { background: #e8eff6; }
/* O rótulo vem do CSS a partir do tema real — nunca fica dessincronizado. */
.theme-toggle::before { content: "☾  Tema escuro"; }
:root[data-theme="dark"] .theme-toggle::before { content: "☀  Tema claro"; }

.pulse {
    width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex: 0 0 auto;
    box-shadow: 0 0 0 5px rgba(37,228,123,.09), 0 0 15px var(--green);
    animation: pulse 2s infinite;
}
.pulse.off { background: var(--red); box-shadow: 0 0 0 5px rgba(255,67,93,.09), 0 0 15px var(--red); }
@keyframes pulse { 50% { opacity: .4; } }

.main { min-width: 0; }

.topbar {
    height: 72px; position: sticky; top: 0; z-index: 15;
    display: flex; align-items: center; justify-content: space-between; padding: 0 26px;
    border-bottom: 1px solid var(--line); background: rgba(5,10,17,.86); backdrop-filter: blur(20px);
}
/* Tagline por baixo do título, discreta. */
.eyebrow { display: block; color: var(--muted); font-size: .62rem; font-weight: 600; letter-spacing: .04em; margin-top: 2px; }
/* Título da página em destaque — grande, forte, com brilho da marca. */
.topbar-title {
    font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -.02em;
    background: linear-gradient(90deg, #eaf3fb, #7fd0ff);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme="light"] .topbar-title { background: linear-gradient(90deg, #12324a, #1f77ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }

.topbar-search { display: flex; align-items: center; gap: 7px; padding: 7px 12px; width: 260px;
    border: 1px solid var(--line); background: #09131e; border-radius: 999px; }
.topbar-search .ts-icon { color: var(--muted); font-size: .95rem; }
.topbar-search input { border: 0; background: transparent; padding: 0; font-size: .78rem; box-shadow: none; }
.topbar-search input:focus { box-shadow: none; }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line);
    background: #101c29; color: #cfe0ec; cursor: pointer; font-size: 1rem; display: grid; place-items: center; position: relative; }
.icon-btn:hover { border-color: var(--line2); }
.icon-btn.notif { text-decoration: none; }
.notif-count { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--red); color: #fff; font-size: .6rem; font-weight: 700;
    display: grid; place-items: center; }
.chip.clock { font-variant-numeric: tabular-nums; border-radius: 10px; }
/* O chip de vigilância também com cantos de botão (é clicável, como a ajuda/alertas). */
.chip.live { border-radius: 10px; }
.topbar-user { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
    border: 1px solid var(--line); background: #09131e; border-radius: 999px; }
.avatar-sm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, #0879c9, #00b8eb); color: #fff; font-size: .7rem; font-weight: 700; }
.tu-id { display: grid; }
.tu-id b { font-size: .74rem; }
.tu-id small { font-size: .62rem; color: var(--cyan); }
.tu-logout { display: flex; margin: 0; }
.tu-logout button {
    width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--line); background: #101c29; color: #ff93a1;
    font-size: 1rem; display: grid; place-items: center; padding: 0;
}
.tu-logout button:hover { border-color: var(--red); background: rgba(255,67,93,.1); }

@media (max-width: 1350px) { .topbar-search { display: none; } }
@media (max-width: 1100px) { .topbar-user .tu-id { display: none; } }
.chip {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    border: 1px solid var(--line); background: #09131e; border-radius: 999px;
    font-size: .74rem; color: #9db1c1; font-variant-numeric: tabular-nums;
}
.chip.live { border-color: rgba(37,228,123,.28); background: rgba(37,228,123,.07); color: #9ef4c2; }
.chip.live span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.content { padding: 24px 26px 60px; max-width: 1740px; margin: auto; }

.page-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.page-heading h1 { font-size: 2.1rem; letter-spacing: -.045em; }
.page-heading p { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }

/* --- KPIs ---------------------------------------------------------------- */

/* 4 caixas sobre a coluna dos estúdios; a "Sintomas" vive na coluna do mapa (alinhada). */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
    position: relative; overflow: hidden; padding: 16px;
    border: 1px solid var(--line); background: linear-gradient(145deg, #0e1b29, #09131e);
    border-radius: 13px; box-shadow: var(--shadow);
}
.kpi:before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 100% 0, rgba(0,200,255,.12), transparent 48%);
}
.kpi.green:before { background: radial-gradient(circle at 100% 0, rgba(37,228,123,.14), transparent 48%); }
.kpi.red:before   { background: radial-gradient(circle at 100% 0, rgba(255,67,93,.16), transparent 48%); }
.kpi.amber:before { background: radial-gradient(circle at 100% 0, rgba(255,176,32,.15), transparent 48%); }
.kpi .label { display: block; color: #89a1b4; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; }
.kpi .value { display: block; font-size: 2rem; font-weight: 700; margin-top: 8px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi .foot { display: block; font-size: .68rem; color: var(--muted); margin-top: 4px; }

/* KPI enriquecido: ícone temático + mini-gráfico */
.kpi-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; z-index: 1; }
.kpi-icon { width: 40px; height: 40px; flex: 0 0 auto; color: var(--cyan); opacity: .85; }
.kpi-icon svg { width: 100%; height: 100%; }
.kpi.green .kpi-icon { color: var(--green); }
.kpi.red .kpi-icon { color: var(--red); }
.kpi.amber .kpi-icon { color: var(--amber); }
.kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; color: var(--cyan);
             opacity: .5; pointer-events: none; }
.kpi-spark svg { width: 100%; height: 100%; display: block; }
.kpi.green .kpi-spark { color: var(--green); }
.kpi.red .kpi-spark { color: var(--red); }
.kpi.amber .kpi-spark { color: var(--amber); }
.kpi { padding-bottom: 22px; }
.kpi.red .value { color: var(--red); }
.kpi.amber .value { color: var(--amber); }
.kpi.green .value { color: var(--green); }

/* --- Estação e cadeia de sinal ------------------------------------------- */

.station {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(11,22,34,.96), rgba(7,15,24,.96));
    border-radius: 15px; padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.station.alarm { border-color: rgba(255,67,93,.45); }
.station-head { display: flex; justify-content: space-between; align-items: center; gap: 16px;
                border-bottom: 1px solid var(--line); padding-bottom: 13px; }
.station-head h2 { font-size: 1.15rem; }
.station-head small { color: var(--muted); font-size: .74rem; }
/* A bola antes do nome = estado do FMDX (verde responde, vermelho sem dados). A cor da
   rádio não vem aqui — vai no nome, senão perdia-se o estado, que é o que importa ler. */
.site-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 8px;
    vertical-align: middle; }
.site-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.site-dot.bad { background: var(--red); box-shadow: 0 0 8px var(--red); }
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field input[type="color"] { width: 42px; height: 34px; padding: 2px; cursor: pointer; }
.color-field .color-hex { flex: 1; min-width: 0; }
/* Quebra de linha permitida: sem isto, num ecrã estreito o nome empurrava os botões
   "ao vivo"/"minimizar" para fora do ecrã e ficavam cortados. */
.station-head { flex-wrap: wrap; }
.station-id { flex: 1 1 auto; min-width: 0; }
.station-id h2 { overflow-wrap: anywhere; }
.station-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 860px) {
    /* Nome numa linha, estado + botões na seguinte, sempre dentro do ecrã. */
    .station-id { flex: 1 1 100%; }
    .station-head h2 { font-size: 1.02rem; }
    .station-actions { flex: 1 1 auto; }
    .collapse-btn, .mini-play { padding: 6px 10px; font-size: .68rem; }
}
.collapse-btn { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--line2); background: rgba(0,200,255,.08); color: var(--cyan); font-size: .72rem; font-weight: 700; }
.collapse-btn:hover { background: rgba(0,200,255,.16); border-color: var(--cyan); }
.mini-sq { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px;
    border-radius: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .03em;
    background: rgba(37,228,123,.14); color: var(--green); border: 1px solid rgba(37,228,123,.3); }
.mini-sq b { font-family: var(--mono); font-weight: 700; }
.mini-sq.amber { background: rgba(255,176,32,.14); color: var(--amber); border-color: rgba(255,176,32,.3); }
.mini-sq.red { background: rgba(255,67,93,.14); color: var(--red); border-color: rgba(255,67,93,.35); }
.mini-play { padding: 6px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; margin-left: auto;
    border: 1px solid rgba(0,200,255,.4); background: rgba(0,200,255,.1); color: var(--cyan); font-size: .7rem; font-weight: 700; }
.mini-play:hover { background: rgba(0,200,255,.2); }

/* Minimizada: esconde o corpo grande e mostra a vista compacta (cadeia + PCs + play). */
.station.collapsed { padding-top: 12px; padding-bottom: 14px; }
.station.collapsed .station-head { margin: 0; border-bottom: 0; padding-bottom: 0; }
.station.collapsed > *:not(.station-head):not(.station-mini-body) { display: none; }
.station-mini-body { display: none; }
.station.collapsed > .station-mini-body { display: grid; gap: 12px; margin-top: 12px; }

.mini-chain { display: flex; gap: 8px; flex-wrap: wrap; }
.mini-node { flex: 1 1 130px; min-width: 118px; display: grid; gap: 2px; padding: 9px 11px;
    border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 10px; background: #0b1621; }
.mini-node .mini-kind { font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mini-node .mini-name { font-size: .8rem; }
.mini-node .mini-nstate { font-size: .58rem; font-weight: 700; color: var(--green); }
.mini-node.bad { border-left-color: var(--red); } .mini-node.bad .mini-nstate { color: var(--red); }
.mini-node.warn { border-left-color: var(--amber); } .mini-node.warn .mini-nstate { color: var(--amber); }
.mini-node.unknown { border-left-color: var(--line2); } .mini-node.unknown .mini-nstate { color: var(--muted); }
.mini-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:root[data-theme="light"] .mini-node { background: #fff; }

.badge {
    display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px;
    border: 1px solid; border-radius: 999px; font-size: .63rem; font-weight: 700;
    letter-spacing: .06em; white-space: nowrap;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.s-ok       { color: var(--green);  border-color: rgba(37,228,123,.28); background: rgba(37,228,123,.07); }
.s-warn     { color: var(--amber);  border-color: rgba(255,176,32,.28); background: rgba(255,176,32,.07); }
.s-bad      { color: var(--red);    border-color: rgba(255,67,93,.32);  background: rgba(255,67,93,.08); }
.s-unknown  { color: #8196a7;       border-color: var(--line);          background: #0b1621; }

.chain { display: flex; align-items: stretch; overflow-x: auto; padding: 14px 0 6px; }
.chain-node {
    flex: 1 0 180px; max-width: 250px; position: relative; padding: 12px 12px 10px;
    border: 1px solid var(--line); background: linear-gradient(180deg, #0d1a28, #0a1420); border-radius: 12px;
}
.chain-node:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
                     border-radius: 12px 12px 0 0; background: var(--green); }
.chain-node.warn:before    { background: var(--amber); }
.chain-node.bad:before     { background: var(--red); }
.chain-node.unknown:before { background: #33506b; }
.node-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.chain-node .kind { color: #8aa2b8; font-size: .6rem; font-weight: 700; letter-spacing: .12em; }
.node-state { font-size: .56rem; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 999px;
              color: var(--green); background: rgba(37,228,123,.1); }
.node-state.warn { color: var(--amber); background: rgba(255,176,32,.1); }
.node-state.bad { color: var(--red); background: rgba(255,67,93,.1); }
.node-state.unknown { color: #7891a6; background: #0d1a27; }
.chain-node .name { font-size: .86rem; margin: 3px 0 9px; display: block; font-weight: 600; color: var(--text); }
.device-img { background: radial-gradient(circle at 50% 0, #0a1a2b, #060e17); border: 1px solid #1a2f43;
              border-radius: 9px; padding: 10px 12px; box-shadow: inset 0 0 24px rgba(0,0,0,.4); }
.device-img svg { width: 100%; height: auto; display: block; min-height: 62px;
                  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.chain-node .mini { display: flex; gap: 12px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.chain-node .mini span { display: grid; }
.chain-node .mini small { font-size: .58rem; color: #8397aa; }
.chain-node .mini b { font-size: .74rem; margin-top: 2px; font-family: var(--mono); color: var(--text); }

/* --- Fila de cartões de destaque (como no conceito) ---------------------- */
.keymetrics { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.km-card { position: relative; overflow: hidden; padding: 13px 14px 8px; border: 1px solid var(--line);
    background: linear-gradient(160deg, #0e1b29, #09131e); border-radius: 12px; min-height: 108px; }
.km-card.km-sim { border-style: dashed; border-color: #2a3f56; }
.km-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.km-label { color: #8ba1b6; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-simtag { font-size: .52rem; font-weight: 700; color: var(--amber); background: rgba(255,176,32,.1);
    padding: 2px 6px; border-radius: 999px; }
.km-value { display: block; margin-top: 8px; font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
    letter-spacing: -.02em; color: var(--text); }
.km-value small { font-size: .62rem; color: var(--muted); font-weight: 600; }
.km-spark { height: 28px; margin-top: 6px; color: var(--cyan); }
.km-spark.green { color: var(--green); } .km-spark.amber { color: var(--amber); }
.km-spark svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1250px) { .keymetrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .keymetrics { grid-template-columns: repeat(2, 1fr); } }

/* --- Painéis FMDX (simulados até haver hardware) ------------------------- */
.fmdx-grid { display: grid; grid-template-columns: 1.3fr .9fr 1.3fr; gap: 12px; margin-top: 12px; }
.fmdx-grid .panel { padding: 13px; }
.panel-title .sim { font-size: .58rem; font-weight: 700; letter-spacing: .08em; color: var(--amber);
                    background: rgba(255,176,32,.1); padding: 3px 8px; border-radius: 999px; }
.spectrum { width: 100%; height: 130px; background: linear-gradient(180deg, #041019, #071a2b); border-radius: 8px; }
.audiowave { width: 100%; height: 90px; background: #050f0a; border-radius: 8px; }
.stereo { font-size: .62rem; color: var(--green); font-weight: 700; }
.rds { display: grid; gap: 9px; padding-top: 4px; }
.rds-row { display: flex; align-items: baseline; gap: 12px; }
.rds-row span { width: 24px; color: #8397aa; font-size: .64rem; font-weight: 700; }
.rds-row b { font-family: var(--mono); font-size: .82rem; color: var(--cyan); }
.rds-row b.rt { color: var(--text); font-size: .74rem; }
.rds-flags { display: flex; gap: 8px; margin-top: 4px; }
.rds-flags .flag { font-size: .58rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
                   color: #7891a6; background: #0d1a27; }
.rds-flags .flag.on { color: var(--green); background: rgba(37,228,123,.1); }

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

.chain-link { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; position: relative; color: var(--green); }
.chain-link.bad { color: var(--red); }
.chain-link.unknown { color: #33506b; }
.chain-link i { position: absolute; width: 80%; height: 1px; background: currentColor; opacity: .5; }
.chain-link span { position: relative; background: #08121c; padding: 2px 3px; font-style: normal; }

/* --- Telemetria ---------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px,1fr)); gap: 10px; margin-top: 10px; }
.tile {
    position: relative; overflow: hidden; min-height: 104px; padding: 13px 14px;
    border: 1px solid var(--line); background: linear-gradient(160deg, #0e1b29, #09131e); border-radius: 11px;
}
.tile .metric { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                color: #8ba1b6; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; }
.tile .value { display: block; margin-top: 7px; font-family: var(--mono); font-size: 1.5rem; font-weight: 700;
               letter-spacing: -.02em; color: var(--text); }
.tile .when { display: block; font-size: .58rem; color: #708aa0; margin-top: 3px; }
.tile.warn { border-color: rgba(255,176,32,.5); background: #1d1a10; }
.tile.bad  { border-color: rgba(255,67,93,.5);  background: #1d1114; }
.tile.stale { opacity: .45; }
.tile.stale .value:after { content: " ⟳"; color: var(--amber); }

.device-group { margin: 14px 0 6px; font-size: .64rem; font-weight: 700; letter-spacing: .13em;
                text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.device-group:after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --- Incidentes ---------------------------------------------------------- */

.incident {
    border: 1px solid var(--line); border-left: 3px solid var(--amber);
    background: #0a1520; border-radius: 11px; padding: 15px; margin-top: 12px;
}
.incident.sev-Critico    { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255,67,93,.07), #0a1520 30%); }
.incident.sev-Emergencia { border-left-color: var(--red); background: linear-gradient(90deg, rgba(255,67,93,.12), #0a1520 34%); }
.incident header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.incident h3 { font-size: 1rem; }
.incident .explain { color: #9cb0bf; font-size: .82rem; line-height: 1.55; margin: 8px 0 0; }
.incident .since { font-size: .66rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.symptoms { margin: 12px 0 0; padding: 10px 12px; background: #08121b; border: 1px solid var(--line); border-radius: 8px; }
.symptoms .cap { font-size: .55rem; color: var(--cyan); font-weight: 700; letter-spacing: .1em; }
.symptoms ul { margin: 6px 0 0; padding-left: 18px; }
.symptoms li { font-size: .74rem; color: #92a7b7; margin: 3px 0; }
.symptoms.unrelated .cap { color: var(--amber); }

.runbook { margin-top: 12px; }
.runbook summary { cursor: pointer; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
                   color: var(--cyan); text-transform: uppercase; }
.runbook p { margin: 8px 0 0; font-size: .78rem; line-height: 1.6; color: #a4b5c2; white-space: pre-line; }

.alert-row { display: flex; align-items: center; gap: 10px; padding: 10px;
             border-left: 2px solid var(--amber); background: #0b1621; border-radius: 6px; margin-bottom: 6px; }
.alert-row.sev-Critico, .alert-row.sev-Emergencia { border-color: var(--red); background: rgba(255,67,93,.06); }
.alert-row i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; color: var(--amber); font-style: normal; flex: 0 0 auto; }
.alert-row.sev-Critico i, .alert-row.sev-Emergencia i { color: var(--red); }
.alert-row div { display: grid; flex: 1; min-width: 0; }
.alert-row b { font-size: .78rem; }
.alert-row span { font-size: .64rem; color: var(--muted); margin-top: 2px; }
.alert-row time { font-size: .64rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* --- Painéis e vazios ---------------------------------------------------- */

.panels { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.panel { border: 1px solid var(--line); background: linear-gradient(180deg, #0d1925, #08131d);
         border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.panel-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.panel-title h3 { font-size: .95rem; }
.panel-title span { font-size: .68rem; color: var(--cyan); }

.empty { padding: 46px 20px; text-align: center; color: var(--muted);
         border: 1px dashed var(--line2); border-radius: 12px; }
.empty strong { display: block; font-size: 2.4rem; color: var(--cyan); margin-bottom: 10px; }
.empty small { display: block; margin-top: 6px; font-size: .75rem; }
.empty code { font-family: var(--mono); color: #9ef4c2; }

.all-good { display: flex; align-items: center; gap: 10px; padding: 14px;
            border: 1px solid rgba(37,228,123,.25); background: rgba(37,228,123,.05);
            border-radius: 10px; color: #9ef4c2; font-size: .82rem; }

/* --- Responsivo ---------------------------------------------------------- */

@media (max-width: 1250px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .panels { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; padding: 12px; }
    .nav-menu { margin-top: 12px; display: flex; overflow-x: auto; }
    .nav-menu a { flex: 0 0 auto; }
    .sidebar-foot { display: none; }
    .topbar { position: static; padding: 0 16px; }
    .content { padding: 18px 16px 50px; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .page-heading { flex-direction: column; align-items: flex-start; }
    .page-heading h1 { font-size: 1.7rem; }
}

/* --- Cockpit: mapa + sparklines ------------------------------------------ */

.cockpit-top { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 14px; align-items: start; }
.stations-col { min-width: 0; }

.map-wrap { display: flex; flex-direction: column; align-items: center; }
.map { width: 100%; max-width: 240px; height: auto; }
.map-distritos .distrito {
    fill: rgba(17,42,68,.55); stroke: #35618a; stroke-width: .6;
    vector-effect: non-scaling-stroke;   /* borda fina, não engorda ao escalar */
    transition: fill .15s;
}
.map-distritos .distrito:hover { fill: rgba(0,200,255,.20); stroke: var(--cyan); }
/* Pontos clicáveis. O <g> exterior leva a posição; este só o efeito — nunca pôr um
   transform de CSS no mesmo elemento que tem o translate do SVG (substitui-o). */
.map-pin { cursor: pointer; transform-origin: 0 0; }
.map-pin:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 50%; }

/* Só onde HÁ rato: no telemóvel o :hover fica "colado" depois do toque e o ponto
   ficava crescido e fora do sítio. E anima-se o raio, não o transform. */
@media (hover: hover) {
    .map-pin .map-dot, .map-pin .map-halo { transition: r .12s ease-out; }
    .map-pin:hover .map-dot { r: 8.5; }
    .map-pin:hover .map-halo { r: 16; opacity: .32; }
}

.map-halo { opacity: .2; animation: haloPulse 2.4s infinite; }
.map-dot, .map-halo { }
.map-dot.ok, .map-halo.ok { fill: var(--green); }
.map-dot.warn, .map-halo.warn { fill: var(--amber); }
.map-dot.bad, .map-halo.bad { fill: var(--red); }
.map-dot.unknown, .map-halo.unknown { fill: #5c6577; }
@keyframes haloPulse { 50% { opacity: .04; } }

.map-legend { display: grid; gap: 5px; margin-top: 12px; width: 100%; font-size: .68rem; color: var(--muted); }
.map-legend span { display: flex; align-items: center; gap: 7px; }
.map-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
.map-legend .dot.ok { background: var(--green); }
.map-legend .dot.warn { background: var(--amber); }
.map-legend .dot.bad { background: var(--red); }
.map-legend .dot.unknown { background: #5c6577; }
.map-note { margin-top: 10px; font-size: .64rem; color: var(--amber); line-height: 1.4; }

.spark { display: block; width: 100%; height: 24px; margin: 4px 0 2px; color: var(--cyan); }
.spark.warn { color: var(--amber); }
.spark.bad { color: var(--red); }

/* Lista de estações (painel lateral) */
.station-list { display: grid; gap: 2px; }
.station-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px;
                border-bottom: 1px solid rgba(29,51,72,.5); }
.station-item:last-child { border-bottom: 0; }
.station-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.station-item .dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.station-item .dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.station-item .dot.bad { background: var(--red); box-shadow: 0 0 8px var(--red); }
.station-item .grow { flex: 1; min-width: 0; display: grid; }
.station-item b { font-size: .78rem; }
.station-item small { font-size: .64rem; color: var(--muted); }
.st-state { font-size: .58rem; font-weight: 700; letter-spacing: .05em; padding: 3px 7px;
            border-radius: 999px; white-space: nowrap; }
.st-state.ok { color: var(--green); background: rgba(37,228,123,.08); }
.st-state.warn { color: var(--amber); background: rgba(255,176,32,.08); }
.st-state.bad { color: var(--red); background: rgba(255,67,93,.08); }
.map-col { display: grid; gap: 14px; }

@media (max-width: 1150px) {
    .cockpit-top { grid-template-columns: 1fr; }
    .map-col { position: static; order: -1; }
    .map { max-width: 180px; }
}

/* --- Backoffice ---------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 14px; min-height: 36px;
    border: 1px solid #1f84cf; border-radius: 9px;
    background: linear-gradient(135deg, #0879c9, #00b8eb); color: #fff;
    font-weight: 700; font-size: .8rem; cursor: pointer; white-space: nowrap;
    text-decoration: none; line-height: 1;
    /* Um pouco de relevo e um movimento curto ao passar/carregar: dá a sensação de
       botão a sério em vez de rectângulo pintado. */
    box-shadow: 0 1px 2px rgba(0,0,0,.18);
    transition: filter .14s, transform .06s, border-color .14s, background .14s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
/* Todos os "pequenos" com a MESMA altura: antes uns eram 28px e outros 36px na mesma
   linha, e ficava desalinhado. */
.btn.sm { padding: 6px 11px; font-size: .73rem; min-height: 30px; }
.btn.ghost { background: #0c1b29; border-color: var(--line2); box-shadow: none; color: #cfe0ec; }
.btn.danger { background: #2a1116; border-color: rgba(255,67,93,.4); color: #ff93a1; }

.kpi.cfg { text-decoration: none; transition: .15s; }
.kpi.cfg:hover { border-color: var(--line2); transform: translateY(-2px); }

.how { margin: 0; padding-left: 20px; color: #a4b5c2; font-size: .82rem; line-height: 1.8; }
.how b { color: var(--text); }
.shortcuts { display: grid; gap: 8px; }
.shortcuts a { padding: 12px 14px; border: 1px solid var(--line); background: #09131e;
               border-radius: 9px; font-size: .82rem; font-weight: 600; color: #cfe0ec; }
.shortcuts a:hover { border-color: var(--line2); color: #fff; }

.head-controls { display: flex; gap: 10px; align-items: center; }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.cat-card { border: 1px solid var(--line); background: linear-gradient(180deg, #0d1925, #08131d);
            border-radius: 13px; padding: 12px; display: grid; gap: 10px; }
.cat-img { background: #060e17; border: 1px solid #16283a; border-radius: 9px; padding: 8px; min-height: 70px;
           display: grid; place-items: center; }
.cat-img svg, .cat-img img { width: 100%; height: auto; display: block; border-radius: 6px; }
.cat-body b { font-size: .9rem; display: block; }
.cat-body span { font-size: .68rem; color: var(--muted); }
.cat-body .tag { display: inline-block; margin-top: 4px; font-style: normal; font-size: .58rem;
                 color: var(--cyan); background: rgba(0,200,255,.08); padding: 2px 7px; border-radius: 999px; }
.cat-upload { font-size: .64rem; color: #8397aa; display: grid; gap: 4px; }

.form { margin-bottom: 16px; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 16px; align-items: start; }
/* A etiqueta ocupa uma faixa de altura fixa e o campo vem a seguir: assim os campos
   alinham todos na mesma linha de base, mesmo quando umas etiquetas têm duas linhas de
   texto e outras uma. Sem isto, cada coluna começava a uma altura diferente. */
.field-grid label { display: grid; grid-template-rows: minmax(2.5em, auto) auto; gap: 6px; align-content: start; color: #8199aa; font-size: .74rem; }
.field-grid label > input, .field-grid label > select, .field-grid label > .color-field { align-self: start; }
.field-grid label.wide { grid-column: 1 / -1; }
.field-grid label.inline { display: flex; align-items: center; gap: 8px; color: #cfe0ec; font-size: .8rem; }
.field-grid label.inline input { width: auto; }
.field-grid small { color: #5f788c; font-size: .66rem; line-height: 1.4; }
.field-grid code { font-family: var(--mono); color: #9ef4c2; }

.form-subhead { margin: 20px 0 10px; border-top: 1px solid var(--line); padding-top: 16px; }
.form-subhead h4 { margin: 0 0 3px; font-size: .82rem; color: #cfe0ec; }
.form-subhead p { margin: 0; font-size: .68rem; color: var(--muted); }

/* Confirmação inline de apagar (ConfirmButton) — sem diálogo do browser. */
.confirm-inline { display: inline-flex; align-items: center; gap: 8px; }
.confirm-q { font-size: .72rem; color: var(--amber); font-weight: 600; }

input, select, textarea {
    width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: #07111a; color: #fff; outline: 0; font-size: .82rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0,200,255,.08); }
input:disabled, select:disabled { opacity: .55; }
input[type=checkbox] { width: 16px; height: 16px; }

.model-pick { margin-bottom: 16px; }
.model-pick-label { display: block; font-size: .72rem; color: #8397aa; margin-bottom: 10px; }
.model-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.model-chip { flex: 0 0 130px; display: grid; gap: 4px; padding: 8px; cursor: pointer; text-align: left;
              border: 1px solid var(--line); background: #0a1520; border-radius: 10px; color: var(--text); }
.model-chip:hover { border-color: var(--line2); }
.model-chip.on { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(0,200,255,.15); }
.model-chip-img { background: #060e17; border: 1px solid #16283a; border-radius: 6px; padding: 3px; }
.model-chip-img svg, .model-chip-img img { width: 100%; height: auto; display: block; }
.model-chip b { font-size: .72rem; }
.model-chip small { font-size: .6rem; color: var(--muted); }

.subform { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.subblock { margin-top: 16px; }
.subblock h4 { margin: 0 0 4px; font-size: .8rem; color: #cfe0ec; }
.subblock .hint { margin: 0 0 10px; font-size: .68rem; color: #5f788c; line-height: 1.5; }
.subblock .hint code { font-family: var(--mono); color: #9ef4c2; }

.kv { display: grid; gap: 6px; }
.kv-head, .kv-row { display: grid; grid-template-columns: 1fr 1fr 34px; gap: 8px; align-items: center; }
.kv-head span { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; color: #688398; }

/* Acções à DIREITA, como em qualquer formulário sério: a acção principal é a última. */
.form-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }
.form-error { margin-top: 14px; padding: 10px; border: 1px solid rgba(255,67,93,.35);
              background: rgba(255,67,93,.08); color: #ff93a1; border-radius: 8px; font-size: .76rem; }
.form-ok { margin-top: 14px; padding: 10px; border: 1px solid rgba(37,228,123,.3);
           background: rgba(37,228,123,.06); color: #9ef4c2; border-radius: 8px; font-size: .76rem; }

/* Painel do ar condicionado: o estado pedido em cima, o que a sala mede a seguir. */
.ac-now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px;
          border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.ac-now b { font-size: .9rem; }
.ac-now .dot.off { background: #55697c; box-shadow: none; }

.ac-sala { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
           margin-top: 8px; padding: 10px 14px; border-radius: 10px;
           border: 1px solid rgba(0,200,255,.22); background: rgba(0,200,255,.05); }
.ac-sala span { font-size: .68rem; color: #7f97a9; }
.ac-sala b { font-size: .95rem; color: #cfe8f6; font-variant-numeric: tabular-nums; }
.ac-sala .stale { color: #ffb27a; }

/* Diz em texto o que a configuração vai fazer, porque a diferença é invisível. */
.mode-note { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: .72rem;
             line-height: 1.55; display: grid; gap: 3px; }
.mode-note b { font-size: .76rem; }
.mode-note.ok { border: 1px solid rgba(37,228,123,.28); background: rgba(37,228,123,.05); color: #9ef4c2; }
.mode-note.ok span { color: #7fae94; }
.mode-note.warn { border: 1px solid rgba(255,178,122,.3); background: rgba(255,178,122,.06); color: #ffc79c; }
.mode-note.warn span { color: #b58e70; }
.lbl-hint { color: #5f788c; font-weight: 400; }

.cfg-list { display: grid; gap: 8px; }
.cfg-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
           border: 1px solid var(--line); background: #09131e; border-radius: 10px; }
.cfg-row.off { opacity: .5; }
.cfg-row .grow { flex: 1; min-width: 0; display: grid; }
.cfg-row .grow b { font-size: .84rem; display: flex; align-items: center; gap: 8px; }
.cfg-row .grow span { font-size: .68rem; color: var(--muted); margin-top: 2px; }
.cfg-row .avatar { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
                   background: rgba(0,200,255,.08); border: 1px solid #1c6582; color: var(--cyan);
                   font-family: var(--mono); font-size: .72rem; font-weight: 700; flex: 0 0 auto; overflow: hidden; }
.cfg-row .avatar img, .avatar img { width: 100%; height: 100%; object-fit: cover; }
.cfg-row .avatar.ph { }
.freq { font-family: var(--mono); font-size: .62rem; color: var(--cyan); font-weight: 600; }
.warn-txt { color: var(--amber); font-size: .62rem; font-weight: 700; }
.preview { max-width: 120px; max-height: 60px; border-radius: 8px; border: 1px solid var(--line); margin-top: 6px; }

/* --- Autenticação -------------------------------------------------------- */

/* Cartão ao centro do ecrã, nos dois eixos. A fotografia é o cenário e ele é o assunto. */
.login-page { min-height: 100vh; position: relative; overflow: hidden; background: #04080f;
              display: grid; place-items: center;
              padding: 5vh max(20px, 4vw); box-sizing: border-box; }

/* A sala de controlo. `fixed` para não deslizar com o teclado do telemóvel a abrir. */
.login-bg { position: fixed; inset: 0; z-index: 0;
            background: url('login-bg.jpg') center/cover no-repeat; }
/* Véu: sem ele o texto branco perde-se nas zonas claras da fotografia. */
/* Véu leve e só do lado do cartão: a fotografia nova tem painéis desenhados à esquerda
   que se querem ver, e escurecê-los apagava o trabalho todo. */
.login-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, rgba(4,8,15,.15) 0%, rgba(4,8,15,0) 40%, rgba(4,8,15,.45) 100%); }

/* A marca vive DENTRO do cartão. Sobre a fotografia colidia com os painéis que ela já
   traz desenhados, e o recorte da imagem muda com o formato do ecrã — o cartão é a única
   superfície onde se garante que fica legível.
   logo-login.png é o logo.png com o fundo preto recortado (nenhum dos ficheiros originais
   é transparente, e mix-blend-mode não pega dentro de um contexto com z-index). */
.login-logo { width: 354px; max-width: 92%; height: auto; display: block; margin: 0 auto 22px; }

/* O cartão: vidro sobre a fotografia, com um canto aceso em cima à esquerda.
   Largura própria porque já não vive numa coluna da grelha — está centrado. */
.login-card { width: min(460px, 100%); z-index: 2; position: relative; padding: 34px 34px 26px;
    border-radius: 18px; border: 1px solid rgba(120,180,215,.22);
    background: linear-gradient(160deg, rgba(13,27,42,.88), rgba(7,16,26,.92));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.login-card::before, .login-card::after { content: ''; position: absolute; width: 26px; height: 26px;
    border: 2px solid #29d9ff; border-radius: 4px; }
.login-card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.login-card::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }

/* Antena com anéis a pulsar. Puro CSS — nada que precise de rede. */
.login-radar { position: relative; width: 132px; height: 132px; margin: 4px auto 22px; }
.login-radar .ring { position: absolute; inset: 0; margin: auto; border-radius: 50%;
    border: 1px solid rgba(41,217,255,.28); animation: pulsar 3.4s ease-out infinite; }
.login-radar .r1 { width: 62px; height: 62px; }
.login-radar .r2 { width: 96px; height: 96px; animation-delay: .5s; }
.login-radar .r3 { width: 132px; height: 132px; animation-delay: 1s; border-style: dashed; }
@keyframes pulsar { 0% { opacity: .15; } 45% { opacity: .8; } 100% { opacity: .15; } }
.login-radar .hub { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px;
    display: grid; place-items: center; border-radius: 50%; color: #cdeeff;
    border: 1px solid rgba(41,217,255,.55); background: rgba(0,174,239,.12); }
.login-radar .sat { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
.login-radar .s1 { top: 8%; right: 18%; background: #20d98b; box-shadow: 0 0 12px #20d98b; }
.login-radar .s2 { bottom: 16%; right: 10%; background: #20d98b; box-shadow: 0 0 12px #20d98b; }
.login-radar .s3 { bottom: 30%; left: 6%; background: #ff4d61; box-shadow: 0 0 12px #ff4d61; }

/* Branco explícito: o h1 herdava a cor de título do tema e ficava escuro sobre escuro —
   lia-se só o "volta!" em ciano e o resto desaparecia. */
.login-card h1 { font-size: 1.85rem; text-align: center; margin: 0 0 6px; letter-spacing: -.02em;
                 color: #f2f8fc; }
.login-card h1 span { color: #29d9ff; }
.login-sub { text-align: center; color: #8ba5b8; font-size: .8rem; margin: 0 0 24px; }

.login-form { display: grid; gap: 13px; }
/* Campo com ícone dentro: o ícone não pode roubar o clique ao input. */
.field-icon { position: relative; display: flex; align-items: center; }
.field-icon > svg { position: absolute; left: 14px; width: 17px; height: 17px;
                    color: #6d879b; pointer-events: none; }
.field-icon input { width: 100%; box-sizing: border-box; padding: 14px 44px;
    border-radius: 11px; border: 1px solid rgba(120,180,215,.2); background: rgba(6,14,23,.7);
    color: #e6eef6; font: inherit; font-size: .86rem; }
.field-icon input::placeholder { color: #6d879b; }
.field-icon input:focus { outline: 0; border-color: rgba(41,217,255,.6);
    box-shadow: 0 0 0 3px rgba(41,217,255,.12); }
.field-icon .peek { position: absolute; right: 8px; width: 32px; height: 32px; display: grid;
    place-items: center; background: none; border: 0; color: #6d879b; cursor: pointer; }
.field-icon .peek svg { width: 17px; height: 17px; }
.field-icon .peek:hover { color: #29d9ff; }

.login-row { display: flex; align-items: center; justify-content: space-between; font-size: .76rem; }
.remember { display: flex; align-items: center; gap: 8px; color: #9db3c3; cursor: pointer; }
.remember input { width: 15px; height: 15px; accent-color: #00aeef; }

.login-go { width: 100%; justify-content: center; gap: 10px; padding: 14px; margin-top: 4px;
            font-size: .9rem; border-radius: 11px;
            background: linear-gradient(90deg, #0090d6, #29d9ff); border: 0; color: #04121c; font-weight: 600; }
.login-go:hover { filter: brightness(1.08); }

.login-error { padding: 11px; border: 1px solid rgba(255,77,97,.35);
    background: rgba(255,77,97,.1); color: #ff93a1; border-radius: 9px; font-size: .78rem; }

.login-foot { display: flex; align-items: center; justify-content: center; gap: 7px;
    margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(120,180,215,.14);
    color: #6d879b; font-size: .68rem; }

.login-copy { position: absolute; bottom: 16px; left: 0; right: 0; z-index: 2; text-align: center;
              color: #4d6a7f; font-size: .66rem; }

@media (max-width: 900px) {
    /* No telemóvel a fotografia passa a pano de fundo e o cartão manda. */
    .login-page { grid-template-columns: 1fr; gap: 26px; padding: 32px 20px 60px; }
    .login-side { text-align: center; margin: 0 auto; }
    .login-logo { width: 90%; max-width: 90%; }
    .login-claim { font-size: .92rem; }
    .login-card { width: 100%; max-width: 100%; box-sizing: border-box; padding: 28px 20px 22px; }
    .login-radar { width: 104px; height: 104px; margin-bottom: 16px; }
    .login-radar .r3 { width: 104px; height: 104px; }
    .login-radar .r2 { width: 78px; height: 78px; }
    .login-card h1 { font-size: 1.5rem; }
}

/* utilizador na barra lateral */
.user-box { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px;
    border: 1px solid var(--line); background: #09131e; border-radius: 11px; }
.user-id { flex: 1; min-width: 0; display: grid; }
.user-id b { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-id small { font-size: .64rem; color: var(--cyan); }
.logout { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line2);
    background: #101c29; color: #ff93a1; cursor: pointer; font-size: 1rem; }
.logout:hover { border-color: var(--red); }

.auth-loading { padding: 60px; text-align: center; color: var(--muted); }

/* auditoria */
.audit { display: grid; gap: 2px; }
.audit-head, .audit-row { display: grid; grid-template-columns: 130px 160px 150px 1fr 1.4fr; gap: 12px;
    align-items: center; padding: 9px 12px; }
.audit-head { color: #688398; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--line); }
.audit-row { border-bottom: 1px solid rgba(29,51,72,.5); font-size: .74rem; }
.audit-row time { font-family: var(--mono); font-size: .68rem; color: #92a9ba; }
.audit-row .act { font-weight: 600; color: var(--cyan); }
.audit-row.bad .act { color: var(--red); }
.audit-row .det { color: var(--muted); font-size: .68rem; }

/* --- Comandos ------------------------------------------------------------ */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 12px; margin-top: 8px; }
.cmd-card { border: 1px solid var(--line); background: #0a1520; border-radius: 12px; padding: 15px;
    display: grid; gap: 8px; border-left: 3px solid var(--green); }
.cmd-card.risk-Fisico { border-left-color: var(--amber); }
.cmd-card.risk-Critico { border-left-color: var(--red); opacity: .85; }
.cmd-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmd-head b { font-size: .9rem; }
.cmd-card p { margin: 0; color: #9cb0bf; font-size: .78rem; line-height: 1.5; }
.risk-tag { font-size: .56rem; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; }
.risk-tag.risk-Seguro { color: var(--green); background: rgba(37,228,123,.1); }
.risk-tag.risk-Fisico { color: var(--amber); background: rgba(255,176,32,.1); }
.risk-tag.risk-Critico { color: var(--red); background: rgba(255,67,93,.1); }
.cmd-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.cmd-rev { font-size: .62rem; color: var(--muted); }
.cmd-human { font-size: .64rem; color: var(--red); font-weight: 600; }
.empty-inline { padding: 20px; text-align: center; color: var(--muted); font-size: .82rem; }

/* --- Tabelas, barras e pills (automações, relatórios, gravações) --------- */

.grid-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.grid-table th { text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.grid-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.grid-table tr:last-child td { border-bottom: none; }
.grid-table code { font-size: .74rem; color: #b98bff; background: rgba(150,110,255,.1); padding: 1px 6px; border-radius: 5px; }
.grid-table .row-off { opacity: .5; }
.grid-table td.num, .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid-table td.row-actions { text-align: right; white-space: nowrap; }

/* Página Dispositivos: uma linha por equipamento, colunas alinhadas.
   Larguras fixas para as colunas caírem no mesmo sítio em TODAS as estações — com
   larguras automáticas cada painel media-se a si próprio e os cabeçalhos dançavam. */
.dev-table { table-layout: fixed; }
.dev-table th:nth-child(1), .dev-table td:nth-child(1) { width: 26%; }
.dev-table th:nth-child(2), .dev-table td:nth-child(2) { width: 16%; }
.dev-table th:nth-child(3), .dev-table td:nth-child(3) { width: 10%; }
.dev-table th:nth-child(4), .dev-table td:nth-child(4) { width: 26%; }
.dev-table th:nth-child(5), .dev-table td:nth-child(5) { width: 12%; }
.dev-table th:nth-child(6), .dev-table td:nth-child(6) { width: 10%; }
.dev-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-table td.vals { color: var(--muted); font-family: var(--mono); font-size: .74rem; }
.dev-table .tag {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .64rem;
    font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--cyan); background: rgba(0,200,255,.10); border: 1px solid rgba(0,200,255,.22);
}
.dev-table time { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
/* Interface do recetor dentro do cockpit: quase ecrã inteiro, é uma página completa. */
.modal.ui-modal { max-width: min(1200px, 96vw); width: 96vw; height: 88vh; max-height: 88vh; }
.fmdx-frame { flex: 1; width: 100%; border: 0; background: #0b1420; border-radius: 0 0 14px 14px; }

/* Árvore SNMP lida do equipamento (mapear OIDs à mão). */
.walk-tools { display: flex; gap: 8px; margin: 8px 0; }
.walk-tools input { flex: 1; }
.walk-tools select { min-width: 190px; }
.walk-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.walk-list td.vals { font-family: var(--mono); font-size: .72rem; color: var(--muted); }

/* Lista de equipamentos vinda da conta Shelly Cloud. */
.cloud-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin: 8px 0 10px; }
.cloud-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; }
.cloud-item:hover:not(:disabled) { border-color: var(--cyan); }
.cloud-item.no-ip { opacity: .5; cursor: default; }
.cloud-item b { font-size: .78rem; }
.cloud-item small { color: var(--muted); font-size: .66rem; margin-left: auto; }

/* Setas de reordenar (lista de estações). */
.order-arrows { display: grid; gap: 2px; margin-right: 2px; }
.order-arrows button {
    width: 24px; height: 18px; padding: 0; cursor: pointer; font-size: .6rem; line-height: 1;
    border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--muted);
}
.order-arrows button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.order-arrows button:disabled { opacity: .3; cursor: default; }

/* Construtor da cadeia por estação (backoffice). */
.chain-builder { display: grid; gap: 12px; }
.chain-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px;
    padding: 10px; border: 1px dashed var(--line2); border-radius: 10px; }
.chain-picked .dim { color: var(--muted); font-size: .74rem; }
.chain-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px;
    background: rgba(0,200,255,.10); border: 1px solid rgba(0,200,255,.28); color: var(--cyan);
    font-size: .74rem; font-weight: 700; }
.chain-chip b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
    background: rgba(0,200,255,.22); font-size: .6rem; }
.chain-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 2px;
    font-size: .74rem; opacity: .75; }
.chain-chip button:hover:not(:disabled) { opacity: 1; }
.chain-chip button:disabled { opacity: .25; cursor: default; }
.chain-chip button.x { color: var(--red); }
.chain-arrow { color: var(--muted); font-size: .8rem; }
.chain-add { display: flex; flex-wrap: wrap; gap: 6px; }

/* Barra de filtros (histórico de alertas) — alinhada, quebra em ecrã estreito. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 4px 0 14px; }
.filter-bar label { display: grid; gap: 5px; font-size: .68rem; color: var(--muted); font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; }
.filter-bar select, .filter-bar input { min-width: 150px; }
.filter-bar .btn { margin-left: auto; }

.hist-table td small.dim { color: var(--muted); font-size: .68rem; }
.hist-table time { font-variant-numeric: tabular-nums; }
.sev-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .62rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.sev-pill.sev-emergencia, .sev-pill.sev-critico { background: rgba(255,67,93,.14); color: var(--red); border: 1px solid rgba(255,67,93,.34); }
.sev-pill.sev-aviso { background: rgba(255,176,32,.14); color: var(--amber); border: 1px solid rgba(255,176,32,.34); }
.sev-pill.sev-info { background: rgba(0,200,255,.12); color: var(--cyan); border: 1px solid rgba(0,200,255,.3); }

.panel-actions { display: inline-flex; align-items: center; gap: 10px; }
.muted-count { color: var(--muted); font-size: .72rem; }
.muted { color: var(--muted); font-size: .74rem; }

/* --- Ficha do equipamento -------------------------------------------------------- */
/* Um nome que abre uma ficha tem de parecer clicável sem parecer um botão. */
.link-cell { background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
             font: inherit; text-align: left; border-bottom: 1px dashed transparent; }
.link-cell:hover { color: var(--accent, #00c8ff); border-bottom-color: currentColor; }

z-index: 2; position: relative; padding: 34px 32px 26px; { max-width: min(920px, 94vw); width: 100%; }
.dev-head { display: flex; align-items: center; gap: 12px; }
.dev-head h3 { margin: 0; }
.dev-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
            background: rgba(0,200,255,.1); border: 1px solid rgba(0,200,255,.25);
            color: #7fd8f5; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.dev-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
           font-size: .72rem; color: var(--muted); }

.dev-state { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
             border-radius: 10px; border: 1px solid var(--line); font-size: .78rem; }
.dev-state span:last-child { color: var(--muted); font-size: .72rem; }
.dev-state.ok { border-color: rgba(37,228,123,.28); background: rgba(37,228,123,.05); }
.dev-state.bad { border-color: rgba(255,67,93,.3); background: rgba(255,67,93,.06); }

.dev-tabs { display: flex; gap: 4px; margin: 16px 0 12px; border-bottom: 1px solid var(--line); }
.dev-tabs button { background: none; border: 0; border-bottom: 2px solid transparent;
                   padding: 8px 14px; cursor: pointer; color: var(--muted);
                   font: inherit; font-size: .78rem; }
.dev-tabs button:hover { color: #cfe0ec; }
.dev-tabs button.on { color: #e6eef6; border-bottom-color: var(--accent, #00c8ff); }
.dev-tabs .pill { margin-left: 6px; padding: 1px 6px; border-radius: 10px;
                  background: rgba(255,67,93,.18); color: #ff93a1; font-size: .66rem; }

.dev-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.dev-cell { padding: 12px; border: 1px solid var(--line); border-radius: 10px;
            background: rgba(255,255,255,.02); display: grid; gap: 4px; }
.dev-cell .metric { font-size: .68rem; color: var(--muted); text-transform: uppercase;
                    letter-spacing: .05em; }
.dev-cell .value { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dev-cell small.vals { font-size: .62rem; color: #52697c; }
.dev-cell.bad { border-color: rgba(255,67,93,.35); background: rgba(255,67,93,.05); }
.dev-cell.warn { border-color: rgba(255,178,122,.3); background: rgba(255,178,122,.05); }

.row-open td { background: rgba(255,67,93,.06); }

/* --- Estado geral das estações --------------------------------------------------- */
.estacoes-geral { margin-bottom: 16px; }
.tabela-wrap { overflow-x: auto; }
.estacoes-table { width: 100%; min-width: 900px; }
.estacoes-table th.col-elo { text-align: center; font-size: .6rem; }
.estacoes-table td { padding-top: 13px; padding-bottom: 13px; }
.estacoes-table td.col-elo { text-align: center; white-space: nowrap; }
.estacoes-table td.col-elo .valor { font-size: .82rem; font-variant-numeric: tabular-nums;
                                    color: #cfe0ec; }
.estacoes-table td.col-elo .valor.mau { color: #ff6f80; }
.estacoes-table td.col-elo .valor.aviso { color: #ffb27a; }
.estacoes-table td.col-elo .valor.sem-dados { color: #4d6a7f; }

/* A estação numa janela: larga, com o conteúdo a rolar por dentro e o ✕ sempre à vista. */
/* Larga porque a cadeia de emissão é horizontal: 1600 px cabem os sete elos lado a lado
   sem rolar. min() em vez de max-width fixo para no portátil encolher em vez de cortar. */
/* ".modal.station-modal" e não só ".station-modal": a regra base .modal aparece MAIS
   ABAIXO neste ficheiro com max-width: 520px e, com a mesma especificidade, ganhava —
   a janela da estação saía estreita e a cadeia ficava a rolar. */
.modal.station-modal { width: min(1600px, 90vw); max-width: none; height: 90vh; max-height: 90vh;
                       padding: 0; display: flex; flex-direction: column; position: relative; }
.modal.station-modal > .station { margin: 0; border-radius: 14px 14px 0 0; overflow-y: auto; flex: 1; }
.station-modal-x { position: absolute; top: 14px; right: 14px; z-index: 3; }
.modal.station-modal .modal-foot { border-top: 1px solid var(--line); }

/* Identidade da estação: logo + nome + frequência, como numa lista de canais. */
.col-estacao { display: flex; align-items: center; gap: 11px; }
.est-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none;
            border: 1px solid var(--line); background: #0b1622; }
.est-logo.ph { display: grid; place-items: center; font-size: .68rem; font-weight: 700;
               color: #7fd8f5; border-color: rgba(0,200,255,.25); background: rgba(0,200,255,.08); }
.est-id b { display: block; letter-spacing: .01em; }
.est-id span { font-size: .68rem; color: var(--muted); }

/* Medidor de 4 segmentos: mostra QUANTO, não só se está bom. */
/* Todos os segmentos com a MESMA geometria: 9px, sem contorno. O apagado usa um
   box-shadow para dentro em vez de border — um contorno mudava o tamanho aparente e
   os que não estavam verdes pareciam maiores que os outros. */
.medidor { display: inline-flex; gap: 5px; align-items: center; }
.medidor .seg { display: block; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
                background: #25e47b; box-shadow: 0 0 6px rgba(37,228,123,.4); }
.medidor .seg.aviso { background: #ffb27a; box-shadow: 0 0 6px rgba(255,178,122,.4); }
.medidor .seg.mau { background: #ff435d; box-shadow: 0 0 6px rgba(255,67,93,.45); }
/* currentColor herda a cor do texto da célula, por isso funciona nos dois temas:
   um cinzento fixo ficava invisível no escuro ou agressivo no claro. */
.medidor .seg.vazio { background: transparent; box-shadow: inset 0 0 0 1px currentColor;
                      color: var(--muted); opacity: .45; }
.medidor .seg.sem-dados { background: currentColor; color: var(--muted); opacity: .35; box-shadow: none; }

/* O ponto é o que se varre com os olhos. Tem de ser legível a um metro do ecrã. */
.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
         background: #2f4759; }
.ponto.bom { background: #25e47b; box-shadow: 0 0 8px rgba(37,228,123,.5); }
.ponto.aviso { background: #ffb27a; box-shadow: 0 0 8px rgba(255,178,122,.5); }
.ponto.mau { background: #ff435d; box-shadow: 0 0 10px rgba(255,67,93,.6); }
.ponto.sem-dados { background: #2f4759; box-shadow: none; }

.estacoes-table .idade { font-size: .72rem; color: var(--muted); }
.estacoes-table .idade.velha { color: #ffb27a; }
/* Nome próprio, não ".vazio": esse nome já era dos segmentos apagados do medidor, e o
   padding desta regra aplicava-se-lhes — 9 px de bola passavam a 44 px. */
.estacoes-table .sem-linhas { text-align: center; color: var(--muted); padding: 22px; }
.linha-aviso td { background: rgba(255,178,122,.05); }
.linha-ma td { background: rgba(255,67,93,.06); }

.badge { display: inline-block; padding: 3px 9px; border-radius: 20px;
         font-size: .62rem; letter-spacing: .06em; font-weight: 600; border: 1px solid; }
.badge.no-ar { color: #9ef4c2; border-color: rgba(37,228,123,.35); background: rgba(37,228,123,.08); }
.badge.degradada { color: #ffc79c; border-color: rgba(255,178,122,.4); background: rgba(255,178,122,.1); }
.badge.critica { color: #ff93a1; border-color: rgba(255,67,93,.42); background: rgba(255,67,93,.1); }
.badge.offline { color: #94a8b8; border-color: rgba(148,168,184,.35); background: rgba(148,168,184,.08); }

/* No tema claro estas pastilhas eram claro-sobre-claro e não se liam. Texto escuro e
   contorno mais firme; a cor continua a ser a mesma linguagem, só legível. */
:root[data-theme="light"] .badge.no-ar { color: #0a6b3d; border-color: rgba(10,107,61,.35); background: rgba(37,228,123,.16); }
:root[data-theme="light"] .badge.degradada { color: #8a4a0a; border-color: rgba(138,74,10,.35); background: rgba(255,178,122,.22); }
:root[data-theme="light"] .badge.critica { color: #a11226; border-color: rgba(161,18,38,.35); background: rgba(255,67,93,.16); }
:root[data-theme="light"] .badge.offline { color: #3f5364; border-color: rgba(63,83,100,.3); background: rgba(148,168,184,.16); }

/* Mesmo problema, mesmas causas: ciano claro sobre branco. */
:root[data-theme="light"] .est-logo.ph { color: #0b6b86; border-color: rgba(11,107,134,.3); background: rgba(0,174,239,.12); }
:root[data-theme="light"] .dev-icon { color: #0b6b86; border-color: rgba(11,107,134,.28); background: rgba(0,174,239,.1); }
:root[data-theme="light"] .est-logo { background: #f3f7fb; }

/* Diário de bordo: linhas densas, a gravidade a dar a cor pela esquerda. */
.log-list { display: grid; gap: 2px; max-height: 46vh; overflow-y: auto; }
.log-row { display: grid; grid-template-columns: 130px 1fr auto auto; gap: 10px;
           align-items: baseline; padding: 8px 10px; border-left: 3px solid #2a4258;
           background: rgba(255,255,255,.02); border-radius: 0 6px 6px 0; font-size: .76rem; }
.log-row time { color: var(--muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.log-row div span { display: block; color: var(--muted); font-size: .7rem; margin-top: 2px; }
.log-row.aviso { border-left-color: #ffb27a; }
.log-row.critico, .log-row.emergencia { border-left-color: #ff435d; background: rgba(255,67,93,.05); }

/* Etiqueta de "isto ainda não está confirmado". Tem de se distinguir de um facto. */
.tag.warn { border-color: rgba(255,178,122,.4); background: rgba(255,178,122,.1); color: #ffc79c; }

.bar-wrap { position: relative; display: flex; align-items: center; gap: 8px; min-width: 160px; }
.bar-wrap { background: rgba(255,255,255,.05); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-wrap .bar { height: 100%; border-radius: 6px; transition: width .3s; }
.bar-wrap span { position: absolute; right: 8px; font-size: .72rem; font-weight: 700; color: var(--ink); }

.kpi-strip { display: flex; gap: 12px; flex-wrap: wrap; }
.kpi-strip .kpi { flex: 1; min-width: 140px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-strip .kpi span { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.kpi-strip .kpi b { font-size: 1.4rem; }

.pill { font-size: .62rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.06); }
.pill.ok { color: var(--green); background: rgba(37,228,123,.1); }
.pill.bad { color: var(--red); background: rgba(255,67,93,.1); }

/* Extras / plugins */
.plugins { display: grid; gap: 12px; max-width: 720px; }
.plugin { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.plugin.on { border-color: rgba(37,228,123,.4); }
.plugin-icon { font-size: 1.5rem; color: var(--cyan); flex: 0 0 auto; }
.plugin-body { flex: 1; min-width: 0; }
.plugin-body b { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.plugin-body p { margin: 4px 0 0; font-size: .74rem; color: var(--muted); line-height: 1.45; }
.plugin-ro { font-size: .72rem; color: var(--muted); }

/* Interruptor on/off reutilizável */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: #33475a; border-radius: 999px; transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + .slider { background: var(--green); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Botão de tema na barra de topo — ícone dado pelo tema real. */
.theme-btn::before { content: "☾"; font-size: .95rem; }
:root[data-theme="dark"] .theme-btn::before { content: "☀"; }
/* Botão de ajuda */
.help-btn { font-weight: 700; }
/* Chip "no ar" apagado quando não há sites ligados. */
.chip.live.off span { background: var(--muted); animation: none; }
.chip.live.off { color: var(--muted); }

/* Janelas modais (alertas, ajuda) — abrem por cima, sem mudar de página. */
.modal-scrim { position: fixed; inset: 0; background: rgba(3,8,14,.55); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center; padding: 68px 16px 16px; z-index: 200; }
.modal { width: 100%; max-width: 520px; max-height: 82vh; display: flex; flex-direction: column;
    background: var(--panel); border: 1px solid var(--line2); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.modal.help-modal { max-width: 640px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 10px; }
.modal-body { padding: 14px 16px; overflow-y: auto; }
.modal-foot { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }

/* Modal de formulário (criar/editar no backoffice): largo, com corpo que rola. */
.modal.form-modal { max-width: 780px; max-height: 88vh; }
.modal.form-modal .modal-body { padding: 18px; }
.modal.form-modal .form { margin: 0; }
.modal.form-modal .panel-title { display: none; }
.modal.form-modal .form-actions { margin-top: 0; }

/* Modal da estação (vinda do mapa). Leva a cadeia inteira, com as caixas dos
   equipamentos: 80% da largura do ecrã, para caber sem esmagar. */
.modal.map-modal { width: 80vw; max-width: 80vw; max-height: 86vh; }
.modal.map-modal .modal-head h3 { gap: 8px; }
.modal.map-modal .mini-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
/* A cadeia quebra em linhas em vez de encolher as caixas até ficarem ilegíveis. */
.modal.map-modal .chain { display: flex; flex-wrap: wrap; gap: 10px; }
.modal.map-modal .chain-node { flex: 1 1 190px; min-width: 170px; }

@media (max-width: 860px) {
    /* No telemóvel 80% deixava margens absurdas — ocupa o ecrã. */
    .modal.map-modal { width: 100%; max-width: 100%; }
    .modal.map-modal .chain-node { flex: 1 1 100%; }
}
.modal-sub { margin: 0 0 12px; font-size: .76rem; color: var(--muted); }
.help-lead { margin: 0 0 14px; font-size: .82rem; color: var(--text); line-height: 1.5; }
.help-sec { padding: 10px 0; border-top: 1px solid var(--line); }
.help-sec b { font-size: .8rem; color: var(--cyan); }
.help-sec p { margin: 4px 0 0; font-size: .76rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 640px) { .modal-scrim { padding: 12px; align-items: center; } }

.form-info { padding: 12px 14px; border-radius: 10px; font-size: .8rem; color: #9cc4e8; background: rgba(90,160,240,.08); border: 1px solid rgba(90,160,240,.2); }
.heading-actions { display: flex; align-items: center; gap: 10px; }

/* --- Copilot ------------------------------------------------------------- */

.copilot-tag { font-size: .56rem; font-weight: 700; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; color: #b98bff; background: rgba(150,110,255,.12); vertical-align: middle; margin-left: 8px; }
.copilot { display: flex; flex-direction: column; height: calc(100vh - 210px); min-height: 420px; max-width: 900px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.copilot-thread { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.copilot-empty { color: var(--muted); font-size: .82rem; margin: auto 0; }
.copilot-empty p { margin: 0 0 10px; }
.copilot-suggests { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--ink); font-size: .74rem; padding: 8px 12px; border-radius: 999px; cursor: pointer; transition: border-color .15s, background .15s; }
.chip:hover:not(:disabled) { border-color: #966eff; background: rgba(150,110,255,.08); }
.chip:disabled { opacity: .5; cursor: default; }
.copilot-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; }
.copilot-msg.me { align-self: flex-end; align-items: flex-end; }
.copilot-msg.ai { align-self: flex-start; }
.copilot-who { font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.copilot-body { white-space: pre-wrap; line-height: 1.55; font-size: .86rem; padding: 11px 14px; border-radius: 12px; }
.copilot-msg.me .copilot-body { background: rgba(150,110,255,.14); border: 1px solid rgba(150,110,255,.25); }
.copilot-msg.ai .copilot-body { background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.copilot-thinking { color: var(--muted); font-style: italic; }
.copilot-input { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--line); }
.copilot-input input { flex: 1; }

/* --- Mobile (tablet e telemóvel) ---------------------------------------- */
/* O layout é desktop-first; aqui só se ajusta o que não cabe em ecrã estreito.
   Nada disto toca no desktop — está tudo dentro de media queries. */

/* Barra móvel e escurecimento: escondidos no desktop, ligados nas media queries. */
.mobile-bar { display: none; }
.scrim { display: none; }

@media (max-width: 820px) {
    /* Backstop contra scroll horizontal do corpo. 'clip' não parte o sticky. */
    html, body { overflow-x: clip; }

    /* --- Menu próprio do telemóvel: barra de topo + gaveta lateral --- */
    .mobile-bar {
        display: flex; align-items: center; gap: 12px;
        position: sticky; top: 0; z-index: 40; height: 56px; padding: 10px 14px;
        background: rgba(5,10,17,.92); backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--line);
    }
    .mobile-logo { height: 26px; width: auto; }
    .hamburger {
        width: 40px; height: 40px; padding: 0; cursor: pointer;
        border: 1px solid var(--line); border-radius: 10px; background: #101c29;
        display: grid; place-content: center; gap: 4px;
    }
    .hamburger span { display: block; width: 18px; height: 2px; background: #cfe0ec; border-radius: 2px; }

    .shell { display: block; }

    /* A barra lateral vira gaveta: fora do ecrã até se abrir o menu. */
    .sidebar {
        position: fixed; top: 0; left: 0; z-index: 50;
        width: 268px; max-width: 84vw; height: 100vh; overflow-y: auto;
        transform: translateX(-100%); transition: transform .22s ease;
        border-right: 1px solid var(--line);
    }
    .shell.menu-open .sidebar { transform: translateX(0); }

    /* Na gaveta a navegação é uma LISTA vertical (o breakpoint antigo de 900px punha-a
       horizontal e só cabiam Cockpit/Estações). Aqui repõe-se vertical, a menu a sério. */
    .nav-menu { display: grid; gap: 4px; overflow: visible; margin-top: 22px; }
    .nav-menu a { flex: none; }

    /* Fundo escurecido por trás da gaveta; tocar fecha. */
    .scrim {
        display: block; position: fixed; inset: 0; z-index: 45;
        background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .22s;
    }
    .shell.menu-open .scrim { opacity: 1; pointer-events: auto; }

    /* A barra de topo da página deixa de ser fixa (não colide com a barra móvel). */
    .topbar { position: static; height: auto; flex-wrap: wrap; gap: 8px; padding: 8px 14px; }
    .content { padding: 16px 14px 48px; }

    .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
    .page-heading h1 { font-size: 1.55rem; }
    .heading-actions { flex-wrap: wrap; }

    /* Grelhas lado a lado passam a caber: no máximo duas colunas. */
    .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

    /* Lista "Estações" abaixo do mapa é redundante no mobile (já há a caixa Estações + os estúdios). */
    .stations-list-panel { display: none; }

    /* Tabelas largas deslizam DENTRO do painel, não empurram a página. */
    .panel { overflow-x: auto; }
    .grid-table { min-width: 480px; }

    .copilot { height: calc(100vh - 200px); }
}

@media (max-width: 520px) {
    .page-heading h1 { font-size: 1.35rem; }
    /* Em telemóvel estreito, tudo numa coluna. */
    .kpi-grid,
    .cmd-grid,
    .field-grid { grid-template-columns: 1fr; }
    .kpi-strip .kpi { min-width: 100%; }
    /* Menos ruído na barra de topo estreita. */
    .topbar-search, .chip.live, .chip.clock { display: none; }
}

/* --- FMDX ao vivo -------------------------------------------------------- */

.live-tag { font-size: .56rem; font-weight: 700; letter-spacing: .06em; color: var(--green); }
.fmdx-sig { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .72rem; color: var(--muted); }
.fmdx-sig b { color: var(--text); font-family: var(--mono); }
.rds-row .pi-ok { color: var(--green); font-style: normal; margin-left: 6px; }
.rds-row .pi-bad { color: var(--red); font-style: normal; margin-left: 6px; }
.rds-row .tx { font-size: .74rem; color: #9ef4c2; font-weight: 600; }
/* Valor RDS nas tiles do FMDX: o RT pode ser longo, por isso mais pequeno e quebra linha. */
.tile .value.rds-val { font-size: .82rem; line-height: 1.25; word-break: break-word; }
.tile-add { font-size: .62rem; color: var(--green); font-weight: 700; margin-left: 4px; }
/* RDS em linhas dentro da caixa. */
.rds-lines { display: grid; gap: 3px; margin-top: 2px; }
.rds-line { font-family: var(--mono); font-size: .8rem; color: var(--cyan); line-height: 1.25; word-break: break-word; }
.rds-line:first-child { font-weight: 700; }
.tile-add-line { display: block; font-size: .7rem; color: var(--green); font-weight: 700; margin-top: 2px; }
.mono { font-size: .58rem; font-weight: 700; letter-spacing: .06em; color: var(--amber); }
.fmdx-player { margin-top: 14px; }
.fmdx-player-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.fmdx-audio-player { flex: 1 1 auto; min-width: 0; }
.btn.live-now {
    flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid rgba(37,228,123,.5); background: rgba(37,228,123,.12); color: var(--green);
    font-size: .72rem; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.btn.live-now:hover { background: rgba(37,228,123,.22); border-color: var(--green); }
@media (max-width: 640px) { .fmdx-player-row { flex-wrap: wrap; } .btn.live-now { width: 100%; } }
.fmdx-note { margin: 8px 0 0; font-size: .68rem; color: var(--muted); line-height: 1.4; }
.rds-loop { margin: 8px 0 4px; padding: 7px 10px; font-size: .72rem; color: var(--amber); background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.3); border-radius: 8px; line-height: 1.4; }

.ack-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ack-done { font-size: .78rem; color: var(--green); }
.ack-pending { font-size: .74rem; color: var(--muted); }

/* --- Segurança / 2FA ----------------------------------------------------- */
.sec-note { color: var(--muted); font-size: .84rem; margin: 4px 0 14px; }
.sec-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sec-steps { color: #a9bccd; font-size: .82rem; line-height: 1.7; margin: 4px 0 14px; padding-left: 20px; }
.sec-qr { display: inline-block; background: #fff; padding: 10px; border-radius: 12px; }
.sec-qr svg { width: 190px; height: 190px; display: block; }
.sec-key { font-size: .8rem; color: var(--muted); margin: 12px 0; }
.sec-key code { color: var(--text); font-family: var(--mono); letter-spacing: .05em; background: rgba(255,255,255,.04); padding: 3px 8px; border-radius: 6px; }
.sec-recovery { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--amber); background: rgba(255,176,32,.06); border-radius: 10px; }
.sec-recovery b { color: var(--amber); } .sec-recovery p { font-size: .76rem; color: var(--muted); margin: 6px 0 10px; }
.sec-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sec-codes code { font-family: var(--mono); font-size: .82rem; background: rgba(255,255,255,.04); padding: 5px 8px; border-radius: 6px; text-align: center; }
.login-form .chk { display: flex; flex-direction: row; align-items: center; gap: 8px; color: #9db1c1; font-size: .78rem; }
.login-form .chk input { width: auto; }

/* --- Página de estado pública ------------------------------------------- */
.status-page { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.status-card { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.status-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.status-brand img { height: 40px; width: auto; mix-blend-mode: screen; }
.status-brand h1 { font-size: 1.5rem; }
.status-overall { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; margin-bottom: 18px; }
.status-overall .dot { width: 12px; height: 12px; border-radius: 50%; }
.status-overall b { font-size: 1.05rem; }
.status-overall time { margin-left: auto; font-size: .68rem; color: var(--muted); }
.status-overall.green { background: rgba(37,228,123,.08); border: 1px solid rgba(37,228,123,.3); }
.status-overall.green .dot { background: var(--green); box-shadow: 0 0 12px var(--green); }
.status-overall.amber { background: rgba(255,176,32,.08); border: 1px solid rgba(255,176,32,.3); }
.status-overall.amber .dot { background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.status-overall.red { background: rgba(255,67,93,.08); border: 1px solid rgba(255,67,93,.3); }
.status-overall.red .dot { background: var(--red); box-shadow: 0 0 12px var(--red); }
.status-list { display: grid; gap: 8px; }
.status-site { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; }
.status-site b { font-size: .9rem; } .status-site small { color: var(--muted); font-size: .7rem; margin-left: 8px; }
.status-pill { font-size: .66rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.status-pill.green { color: var(--green); background: rgba(37,228,123,.1); }
.status-pill.amber { color: var(--amber); background: rgba(255,176,32,.1); }
.status-pill.red { color: var(--red); background: rgba(255,67,93,.1); }
.status-empty { padding: 16px; text-align: center; color: var(--muted); font-size: .82rem; }
.status-foot { margin: 18px 0 0; text-align: center; font-size: .68rem; color: var(--muted); }

/* --- Tema claro ---------------------------------------------------------- */
/* O design é dark-first; este bloco reescreve as superfícies e as cores de texto
   fixas para um modo claro coerente. Ativa-se pelo atributo data-theme="light" no
   <html> (aplicado no App.razor, alternado no TopBar, guardado no localStorage). */

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #eef2f7;
    /* Verde mais escuro no tema claro — o verde vivo tinha pouca leitura sobre branco. */
    --green: #0f9d58;
    --panel: #ffffff;
    --panel2: #f3f7fb;
    --line: #d7e0ea;
    --line2: #c3d2df;
    --text: #10202e;
    --ink: #14222f;
    --muted: #566a7d;
    --shadow: 0 18px 50px rgba(30,55,90,.10);
}

:root[data-theme="light"] body {
    background-image:
        radial-gradient(circle at 70% -20%, rgba(0,150,210,.06), transparent 36rem),
        linear-gradient(rgba(40,90,130,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,90,130,.05) 1px, transparent 1px);
}

/* Superfícies (fundos escuros → claros) */
:root[data-theme="light"] .sidebar { background: linear-gradient(180deg, #ffffff, #eef3f8); }
:root[data-theme="light"] .topbar { background: rgba(255,255,255,.86); }
:root[data-theme="light"] .mobile-bar { background: rgba(255,255,255,.92); }
:root[data-theme="light"] .chip,
:root[data-theme="light"] .topbar-search,
:root[data-theme="light"] .topbar-user,
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .hamburger,
:root[data-theme="light"] .sidebar-foot,
:root[data-theme="light"] .btn.ghost,
:root[data-theme="light"] .tu-logout button,
:root[data-theme="light"] .shortcuts a,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { background: #f3f7fb; }
:root[data-theme="light"] .panel,
:root[data-theme="light"] .kpi,
:root[data-theme="light"] .cmd-card,
:root[data-theme="light"] .cat-card,
:root[data-theme="light"] .chain-node,
:root[data-theme="light"] .tile,
:root[data-theme="light"] .node,
:root[data-theme="light"] .copilot,
:root[data-theme="light"] .copilot-msg.ai .copilot-body,
:root[data-theme="light"] .device-img { background: #ffffff; }
:root[data-theme="light"] .kpi { background: linear-gradient(145deg, #ffffff, #f2f6fb); }
:root[data-theme="light"] .nav-menu a:hover { background: #e9f0f7; }
:root[data-theme="light"] .s-unknown,
:root[data-theme="light"] .node-state.unknown,
:root[data-theme="light"] .chain-link span { background: #eef3f8; }
:root[data-theme="light"] .incident,
:root[data-theme="light"] .incident.sev-Critico,
:root[data-theme="light"] .incident.sev-Emergencia,
:root[data-theme="light"] .symptoms { background: #f4f8fb; }
:root[data-theme="light"] .map-distritos .distrito { fill: rgba(70,120,165,.20); stroke: #7ba0c2; }
:root[data-theme="light"] .station { background: linear-gradient(180deg, #ffffff, #f4f8fb); }
:root[data-theme="light"] .km-card,
:root[data-theme="light"] .tile { background: #ffffff; }
:root[data-theme="light"] .tile.warn { background: #fff6e6; }
:root[data-theme="light"] .tile.bad { background: #ffe9ec; }
/* Linhas/cartões que tinham fundo escuro fixo — no claro ficavam texto escuro sobre escuro. */
:root[data-theme="light"] .alert-row { background: #ffffff; border-left-color: var(--line2); }
:root[data-theme="light"] .cfg-row { background: #ffffff; }
:root[data-theme="light"] .model-chip { background: #ffffff; }
:root[data-theme="light"] .alert-row b,
:root[data-theme="light"] .cfg-row .grow b { color: var(--text); }
/* Botão de apagar: no claro o vinho escuro parecia preto. Vermelho suave legível. */
:root[data-theme="light"] .btn.danger { background: #ffe4e8; border-color: rgba(214,45,64,.45); color: #c0293b; }

/* Texto que estava fixo em tons claros → escuro */
:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .btn.ghost,
:root[data-theme="light"] .topbar-title,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .nav-menu a,
:root[data-theme="light"] .kpi .label,
:root[data-theme="light"] .chain-node .kind,
:root[data-theme="light"] .chain-node .mini small,
:root[data-theme="light"] .symptoms li,
:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea { color: #2a3f52; }
:root[data-theme="light"] .hamburger span { background: #2a3f52; }

/* --- Blazor -------------------------------------------------------------- */

h1:focus { outline: none; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "Ocorreu um erro."; }