/* Portal Energy Analyzer.
   Paleta e proporções seguem site/dashboard-preview.html, que ADR-0002 mantém
   como referência visual do portal. Alvo: desktop, notebook e tablet (§33). */

:root {
  color-scheme: light;
  --bg: #f4f6f8; --card: #fff; --soft: #edf1f4; --fg: #18212b; --mut: #66717d;
  --line: #d7dde3; --acc: #08747c; --ok: #2f7d52; --warn: #a06b08; --err: #b14343;
  --pa: #2b79d0; --pb: #e66b35; --pc: #1aa574; --pn: #d59a00; --grid: #e5e9ed;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.app { max-width: 1180px; margin: 0 auto; padding: 0 14px 40px; }
.boot { color: var(--mut); padding: 24px 0; }

/* ---------- topo ---------- */
.top { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
       padding: 16px 0 12px; border-bottom: 1px solid var(--line); }
.top__brand h1 { font-size: 18px; }
.top__env { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }

.device { margin-left: auto; }
.device__row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.device__select, .device__input, .cred__input {
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--fg); font: inherit;
}
.device__input { width: 118px; font-family: ui-monospace, Consolas, monospace; }
.device__select { font-family: ui-monospace, Consolas, monospace; }
.device__empty { color: var(--mut); font-size: 12px; }
.device__source, .cred__note { margin: 4px 0 0; font-size: 11px; color: var(--mut); max-width: 42ch; }
.device__feedback:not(:empty) { margin: 4px 0 0; font-size: 12px; color: var(--err); }

.cred { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cred__label { font-size: 12px; color: var(--mut); }
.cred__input { width: 190px; }

.btn { padding: 6px 12px; border: 1px solid var(--acc); border-radius: 6px;
       background: var(--acc); color: #fff; font: inherit; cursor: pointer; }
.btn--ghost { background: var(--card); color: var(--acc); }
.btn:hover { filter: brightness(1.06); }

/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 216px 1fr; gap: 20px; padding-top: 16px; align-items: start; }
.nav { position: sticky; top: 14px; }
.nav__group + .nav__group { margin-top: 14px; }
.nav__title { margin: 0 0 4px; font-size: 11px; text-transform: uppercase;
              letter-spacing: .07em; color: var(--mut); }
.nav ul { list-style: none; margin: 0; padding: 0; }
.nav__link { display: flex; align-items: center; gap: 6px; padding: 6px 9px;
             border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 13px; }
.nav__link:hover { background: var(--soft); }
.nav__link--active { background: var(--acc); color: #fff; font-weight: 600; }
.nav__link--pending { color: var(--mut); }
.nav__tag { margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 4px;
            background: var(--soft); color: var(--mut); }
.nav__link--active .nav__tag { background: rgba(255,255,255,.2); color: #fff; }

.content { min-width: 0; }

/* ---------- cartões ---------- */
.overview { display: grid; gap: 14px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; }
.card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.card h3 { font-size: 15px; }
.card h4 { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }

.badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650;
         background: var(--soft); color: var(--mut); }
.badge--ok { background: #e6f2ec; color: var(--ok); }
.badge--warn { background: #fdf1da; color: var(--warn); }
.badge--error { background: #f9e6e6; color: var(--err); }

.meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin-bottom: 10px; }
.muted { color: var(--mut); font-size: 12px; margin: 0 0 8px; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; font-size: 13px; }
.facts dt { color: var(--mut); }
.facts dd { margin: 0; }

.frequency { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.frequency__label { font-size: 12px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }
.frequency__value { font-size: 24px; font-weight: 650; font-variant-numeric: tabular-nums; }

.quantities { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.quantity { background: var(--soft); border-radius: 7px; padding: 9px 11px; }
.quantity__absent { margin: 6px 0 0; color: var(--mut); font-size: 13px; }
.phases { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.phase { display: flex; flex-direction: column; min-width: 62px; }
.phase__label { font-size: 10px; font-weight: 700; color: var(--mut); }
.phase__value { font-variant-numeric: tabular-nums; font-size: 14px; }
.phase--a .phase__label { color: var(--pa); }
.phase--b .phase__label { color: var(--pb); }
.phase--c .phase__label { color: var(--pc); }
.phase--n .phase__label { color: var(--pn); }
/* Canal ausente fica visivelmente vazio; nunca é preenchido com zero. */
.phase--absent .phase__value { color: var(--mut); }
/* Bloco do neutro: In medido, In calculado e ΔIn. Os rótulos são mais largos
   que "A"/"B"/"C", então a largura maior fica ESCOPADA aqui — aplicá-la a
   `.phase` alargaria também tensão, corrente e THD. */
.quantity--neutral .phase { min-width: 108px; }
/* Procedência da grandeza, não valor: discreta e sem cor de veredito, que aqui
   afirmaria uma política de qualidade que ainda não existe. */
.quantity--neutral .phase__note { font-size: 10px; color: var(--mut); margin-top: 2px; }

.unavailable { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.unavailable ul { margin: 6px 0 0; padding-left: 18px; color: var(--mut); font-size: 12px; }

.note { margin: 8px 0 0; font-size: 12px; color: var(--mut); }
.note--warn { color: var(--warn); }
.detail { background: var(--soft); border-radius: 6px; padding: 8px 10px;
          font-size: 12px; overflow-x: auto; margin: 0 0 10px; }
.endpoint { display: inline-block; margin-top: 8px; padding: 4px 8px;
            background: var(--soft); border-radius: 5px; font-size: 12px; }

/* ---------- tempos ---------- */
.times { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
         display: grid; gap: 3px; font-size: 12px; }
.times__row { display: flex; gap: 8px; align-items: baseline; }
.times__label { width: 74px; color: var(--mut); flex: none; }
.times__value { font-variant-numeric: tabular-nums; }
.times__value--suspect { text-decoration: underline dotted var(--warn); text-underline-offset: 3px; }
.times__age { color: var(--mut); }

/* ---------- estados ---------- */
.state { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 18px 16px; }
.state--loading { display: flex; align-items: center; gap: 10px; color: var(--mut); }
.state--error { border-color: #e6c4c4; }
.state__title { margin: 0; font-weight: 600; }
.state__hint, .state__code { margin: 6px 0 0; font-size: 12px; color: var(--mut); }
.state--error .btn { margin-top: 10px; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--line);
           border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* Tablet: a navegação vira uma faixa horizontal; as grandezas mantêm largura
   útil em vez de serem espremidas (§33). */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .nav { position: static; display: flex; gap: 14px; flex-wrap: wrap; }
  .nav ul { display: flex; gap: 4px; flex-wrap: wrap; }
  .device { margin-left: 0; }
}

/* ---------- filtros do histórico ---------- */
.filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: center;
           padding: 10px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.filters__group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.filters__label { font-size: 11px; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; }
.filters__device { font-family: ui-monospace, Consolas, monospace; background: var(--soft);
                   padding: 3px 7px; border-radius: 5px; font-size: 13px; }
.filters__select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px;
                   background: var(--card); color: var(--fg); font: inherit; }
.chip { padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
        background: var(--card); color: var(--fg); font: inherit; font-size: 12px; cursor: pointer; }
.chip--on { background: var(--acc); border-color: var(--acc); color: #fff; font-weight: 600; }

/* ---------- gráfico ---------- */
.chart { margin: 4px 0 16px; }
.chart--empty { background: var(--soft); border-radius: 7px; padding: 16px; }
.chart__head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.chart__count { font-size: 12px; color: var(--mut); }
.chart__svg { width: 100%; height: 240px; display: block;
              background: var(--card); border: 1px solid var(--line); border-radius: 7px; }
.chart__grid { stroke: var(--grid, #e5e9ed); stroke-width: 1; }
.chart__axis { font-size: 10px; fill: var(--mut); }
.chart__line { stroke-width: 1.6; vector-effect: non-scaling-stroke;
               stroke-linejoin: round; stroke-linecap: round; }
.chart__legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font-size: 12px; }
.chart__key { display: inline-flex; gap: 5px; align-items: center; }
.chart__key--absent { color: var(--mut); }
.chart__swatch { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- tabela do histórico ---------- */
/* Tabela larga rola no próprio contêiner; o corpo da página nunca rola na
   horizontal. */
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.table { border-collapse: collapse; width: 100%; font-size: 12px; }
.table th, .table td { padding: 5px 9px; text-align: left; white-space: nowrap;
                       border-bottom: 1px solid var(--line); }
.table th { background: var(--soft); font-weight: 650; color: var(--mut);
            position: sticky; top: 0; }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.num--absent { color: var(--mut); }

.pager { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-top: 12px; }
.pager .state__hint { margin: 0; }

/* Detalhe do evento: JSON livre por contrato, mostrado como veio. Trunca na
   célula e revela o valor inteiro no title, sem quebrar a linha da tabela. */
.detail-inline { display: inline-block; max-width: 34ch; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
                 font-size: 11px; color: var(--mut); }

/* ---------- espectro harmônico ---------- */
.spectra { display: grid; gap: 12px; margin-top: 12px; }
.spectrum { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.spectrum--empty { background: var(--soft); }
.spectrum__head { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.spectrum__worst { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }
.spectrum__svg { width: 100%; height: 150px; display: block; margin-top: 4px; }
.spectrum__bar { shape-rendering: crispEdges; }
.spectrum__bar:hover { opacity: .78; }
/* Ordem ausente: marca fina na base, jamais barra de altura zero — que se leria
   como "medido e igual a zero". */
.spectrum__absent { fill: var(--line); }
.spectrum__axis-note { margin: 4px 0 0; font-size: 11px; color: var(--mut); }

/* Em telas estreitas o espectro ganha a largura toda antes de encolher. */
@media (min-width: 1100px) {
  .spectra { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
}

/* ---------- semântica declarada (fasores) ---------- */
.semantics { background: var(--soft); border-radius: 7px; padding: 10px 12px; margin-bottom: 12px; }
.semantics__row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.semantics__key { font-size: 11px; color: var(--mut); }
.semantics__value { font-size: 12px; background: var(--card); padding: 1px 6px; border-radius: 4px; }
.semantics__text { margin: 3px 0 10px; font-size: 12px; color: var(--fg); max-width: 78ch; }
.semantics__text:last-child { margin-bottom: 0; }

/* ---------- mostradores de PAngle ---------- */
.dials { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: 12px; margin: 10px 0 6px; }
.dial { background: var(--card); border: 1px solid var(--line); border-radius: 7px; padding: 10px 12px; }
.dial--empty { background: var(--soft); }
.dial__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dial__value { font-variant-numeric: tabular-nums; font-weight: 650; }
.dial__svg { width: 100%; height: auto; display: block; margin: 4px 0; }
.dial__ring { stroke: var(--line); stroke-width: 1; }
.dial__tick { stroke: var(--line); stroke-width: 1; }
/* O eixo de referência é local a esta fase — tracejado para não parecer um
   eixo comum às três. */
.dial__zero { stroke: var(--mut); stroke-width: 1; stroke-dasharray: 3 3; }
.dial__hand { stroke-width: 2.5; stroke-linecap: round; }
.dial__facts { grid-template-columns: max-content 1fr; margin: 4px 0 0; font-size: 12px; }

/* ---------- cards de qualidade ---------- */
.policy-notice { background: #fdf1da; border: 1px solid #e3c98d; border-radius: 7px;
                 padding: 10px 12px; margin-bottom: 12px; }
.policy-notice__title { margin: 0 0 4px; font-weight: 650; color: var(--warn); }
.policy-notice__text { margin: 0 0 4px; font-size: 12px; color: #6a4f13; max-width: 82ch; }
.policy-notice__text:last-child { margin-bottom: 0; font-family: ui-monospace, Consolas, monospace; }

.qcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.qcard { background: var(--soft); border-radius: 7px; padding: 10px 12px; }
/* `unknown` fica deliberadamente sem cor de veredito: verde leria como
   aprovação e vermelho como reprovação, e nenhuma das duas foi afirmada. */
.qcard--neutral { border-left: 3px solid var(--line); }
.qcard--ok { border-left: 3px solid var(--ok); }
.qcard--warn { border-left: 3px solid var(--warn); }
.qcard--error { border-left: 3px solid var(--err); }
.qcard__head { display: flex; justify-content: space-between; align-items: baseline;
               gap: 8px; margin-bottom: 6px; }
.qcard__value { margin: 0; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.qcard__facts { margin: 8px 0 0; font-size: 12px; }
.qcard__reason { margin: 6px 0 0; font-size: 11px; color: var(--mut); }

/* ---------- aquisição remota ---------- */
.acquisition { display: grid; gap: 20px; }
.acquisition__panel { border-top: 1px solid var(--line); padding-top: 14px; }
.acquisition__panel:first-child { border-top: 0; padding-top: 0; }
.acquisition__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
                     gap: 12px 16px; align-items: end; max-width: 960px; }
.acquisition__field { display: grid; gap: 5px; min-width: 0; }
.acquisition__label { color: var(--mut); font-size: 11px; text-transform: uppercase;
                      letter-spacing: .05em; }
.acquisition__input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px;
                      border: 1px solid var(--line); border-radius: 6px;
                      background: var(--card); color: var(--fg); font: inherit; }
.acquisition__actions { display: flex; align-items: center; min-height: 34px; }
.acquisition__actions .btn:disabled { cursor: not-allowed; opacity: .55; }
.segmented { display: inline-grid; grid-template-columns: repeat(2, minmax(64px, 1fr));
             border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented__option { position: relative; cursor: pointer; text-align: center; }
.segmented__option + .segmented__option { border-left: 1px solid var(--line); }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }
.segmented__option span { display: block; padding: 6px 10px; background: var(--card); }
.segmented__option input:checked + span { background: var(--acc); color: #fff; font-weight: 650; }
.segmented__option input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: -2px; }
.command-id { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .acquisition__form { grid-template-columns: 1fr; }
  .acquisition__actions .btn { width: 100%; }
}