:root {
  --tml-primaria: #0b5d6b;
  --tml-primaria-escura: #08434d;
  --tml-gelo: #e8f6f8;
  --tml-alerta: #c0392b;
  --tml-ok: #1e8449;
}
body { background: #f5f8f9; }
.tml-topo { background: var(--tml-primaria); color: #fff; }
.tml-topo a, .tml-topo .btn-link { color: #fff; text-decoration: none; }
.tml-marca { font-weight: 700; letter-spacing: .02em; font-size: 1.25rem; }
.tml-marca span { color: #8fd3de; }
.module-tabs { border-bottom: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; }
.module-tabs .nav-link { border-radius: 999px; border: 0; color: var(--tml-primaria-escura); white-space: nowrap; }
.module-tabs .nav-link.active { background: var(--tml-primaria); color: #fff; }
.tml-card-sensor { border-left: 6px solid var(--tml-ok); }
.tml-card-sensor.alerta { border-left-color: var(--tml-alerta); }
.tml-card-sensor.sem-leitura { border-left-color: #adb5bd; }
.tml-temp { font-size: 2rem; font-weight: 700; line-height: 1; }
.tml-token { font-family: ui-monospace, monospace; word-break: break-all; }
.btn-primary { --bs-btn-bg: var(--tml-primaria); --bs-btn-border-color: var(--tml-primaria); --bs-btn-hover-bg: var(--tml-primaria-escura); --bs-btn-hover-border-color: var(--tml-primaria-escura); --bs-btn-active-bg: var(--tml-primaria-escura); }
.btn-outline-primary { --bs-btn-color: var(--tml-primaria); --bs-btn-border-color: var(--tml-primaria); --bs-btn-hover-bg: var(--tml-primaria); --bs-btn-hover-border-color: var(--tml-primaria); }
/* Campos editaveis dentro da tabela (que rola de lado no celular). */
.table .form-control-sm { min-width: 5rem; }
.table input[name="nome"] { min-width: 11rem; }
.table .form-select-sm { min-width: 8rem; }
.tml-admin td.text-end, .tml-admin th.text-end { white-space: nowrap; }
.tml-grafico { width: 100%; height: auto; display: block; }
.tml-grafico .g-faixa { fill: var(--tml-gelo); }
.tml-grafico .g-grade { stroke: #e3ecee; stroke-width: 1; }
.tml-grafico .g-rotulo { font-size: 11px; fill: #6c7f84; }
.tml-grafico .g-linha { fill: none; stroke: var(--tml-primaria); stroke-width: 2; stroke-linejoin: round; }
.tml-grafico .g-fora { fill: var(--tml-alerta); }