/* Portal Atacadão — layout: cabeçalho branco com a marca + listras, faixa de conteúdo até 1320px,
   resumo antes do detalhe; cor de status sempre acompanhada de texto. */
:root {
  --verde: #009E62;        /* marca */
  --verde-tx: #00704A;     /* verde para texto (contraste) */
  --laranja: #F86402;      /* marca */
  --laranja-tx: #A13F00;
  --azul: #2B7BB9;  --azul-tx: #1D5F91;
  --roxo: #5E3A87;  --roxo-tx: #5E3A87;
  --cinza: #A3ABA6; --cinza-tx: #4A524E;
  --bg: #F3F6F4;  --surface: #FFFFFF;  --surface-2: #EEF3EF;  --line: #DCE3DE;
  --fg: #1B1F1D;  --fg-2: #4A524E;  --fg-3: #6B736F;
  --tint-laranja: #FFF2E8; --tint-verde: #EEF7F2; --tint-azul: #EDF4FA; --tint-roxo: #F3EEF8; --tint-cinza: #F0F2F1;
  --rodape: #009E62; --rodape-fg: #FFFFFF; --topo-bg: #FFFFFF; --verde-btn: #009E62;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --r: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --verde: #12B574; --verde-tx: #4FD49B; --laranja: #FF7A1F; --laranja-tx: #FFA463;
  --azul: #4A97D4; --azul-tx: #8EC3EE; --roxo: #9A72C9; --roxo-tx: #C3A6E6; --cinza: #6E7772; --cinza-tx: #B4BCB7;
  --bg: #0E1512; --surface: #16201B; --surface-2: #1D2924; --line: #2A3832;
  --fg: #E8EEEA; --fg-2: #B4BCB7; --fg-3: #8E9893;
  --tint-laranja: #33200F; --tint-verde: #13281E; --tint-azul: #142331; --tint-roxo: #251C31; --tint-cinza: #1C2421;
  --rodape: #009E62; --rodape-fg: #FFFFFF; --topo-bg: #131C18; --verde-btn: #00875A; color-scheme: dark } }
:root[data-theme="dark"] {
  --verde: #12B574; --verde-tx: #4FD49B; --laranja: #FF7A1F; --laranja-tx: #FFA463;
  --azul: #4A97D4; --azul-tx: #8EC3EE; --roxo: #9A72C9; --roxo-tx: #C3A6E6; --cinza: #6E7772; --cinza-tx: #B4BCB7;
  --bg: #0E1512; --surface: #16201B; --surface-2: #1D2924; --line: #2A3832;
  --fg: #E8EEEA; --fg-2: #B4BCB7; --fg-3: #8E9893;
  --tint-laranja: #33200F; --tint-verde: #13281E; --tint-azul: #142331; --tint-roxo: #251C31; --tint-cinza: #1C2421;
  --rodape: #009E62; --rodape-fg: #FFFFFF; --topo-bg: #131C18; --verde-btn: #00875A; color-scheme: dark }

* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { margin: 0 }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
a { color: var(--verde-tx) }
button, select, input { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; border-radius: 6px }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; margin: 0; letter-spacing: -0.01em }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }

/* cabeçalho */
.topo { background: var(--topo-bg); color: var(--fg) }
.topo .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-block: 10px }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit }
.marca img { height: 42px; width: auto }
.marca span { font-size: 13px; font-weight: 600; color: var(--verde-tx); border-left: 1px solid var(--line); padding-left: 14px; line-height: 1.2 }
.nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 340px }
.nav a { color: var(--fg-2); text-decoration: none; font-weight: 600; padding: 11px 13px; border-bottom: 3px solid transparent }
.nav a:hover { color: var(--fg) }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--laranja) }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 8px 15px; min-height: 38px; cursor: pointer; color: var(--fg-2); font-weight: 600; font-size: 14px }
.seg button[aria-pressed="true"] { background: var(--verde-btn); color: #FFFFFF }
.listras { display: grid; gap: 3px; padding-bottom: 3px; background: var(--topo-bg) }
.listras i { display: block; height: 3px; background: #009E62 } .listras i:last-child { background: #F86402 }
.usuario { font-size: 13px; color: var(--fg-2); display: flex; gap: 10px; align-items: center }
.usuario button, .tema { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 13px; min-height: 36px }
.tema { display: inline-flex; align-items: center; gap: 6px }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2 }

/* filtros em cascata */
.filtros { background: var(--surface); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px }
.filtros .linha { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center }
.filtros .rot { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); min-width: 74px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 999px; padding: 6px 12px; min-height: 36px; cursor: pointer; display: inline-flex; gap: 7px; align-items: center; font-size: 14px; font-weight: 600 }
.chip b { color: var(--fg) }
.chip[aria-pressed="true"] { border-color: var(--fg); background: var(--surface-2); color: var(--fg) }
.chip[disabled] { opacity: .45; cursor: default }
.limpar { border: 0; background: none; color: var(--verde-tx); font-weight: 700; cursor: pointer; padding: 6px 4px }

/* trocar de loja */
.troca { display: flex; align-items: center; gap: 6px; position: relative; flex: 0 1 420px; min-width: 0 }
.troca > button { border: 1px solid var(--line); background: var(--surface); color: var(--fg); border-radius: 10px; width: 42px; height: 42px; cursor: pointer; font-size: 18px; flex: none }
.troca > button:disabled { opacity: .4; cursor: default }
.troca input { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 42px; color: var(--fg) }
.troca ul { position: absolute; top: 46px; left: 48px; right: 48px; z-index: 5; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto }
.troca li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-size: 14px }
.troca li span { color: var(--fg-3); font-size: 12px; white-space: nowrap }
.troca li[aria-selected="true"], .troca li:hover { background: var(--surface-2) }
.posicao { font-size: 13px; color: var(--fg-3); white-space: nowrap }

main.wrap { padding-block: 24px 40px; display: flex; flex-direction: column; gap: 20px; min-height: 70vh }
.cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px }
.cab h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 800 }
.cab p { margin: 4px 0 0; color: var(--fg-2) }
.campo { display: flex; align-items: center; gap: 8px; color: var(--fg-2); font-size: 14px }
.campo select, .campo input { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 42px; min-width: 0; color: var(--fg) }

.painel { background: var(--surface); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.painel > header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px }
.painel h2 { font-size: 18px; font-weight: 700 }
.nota { margin: 0; font-size: 13px; color: var(--fg-3) }

/* números grandes */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.kpi { background: var(--surface); border-radius: var(--r); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; border-top: 5px solid var(--verde); text-decoration: none; color: var(--fg); min-width: 0 }
.kpi .rot { font-size: 14px; color: var(--fg-2) }
.kpi .num { font-family: var(--f-display); font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1 }
.kpi .num small { font-size: 0.45em; font-weight: 600; color: var(--fg-2); letter-spacing: 0 }
.kpi .sub { font-size: 14px; color: var(--fg-2) }
.kpi.alerta { border-top-color: var(--laranja); background: var(--tint-laranja) }
.kpi.alerta .sub { color: var(--laranja-tx); font-weight: 700 }
.kpi:is(a):hover { outline: 2px solid var(--line) }
.bom { color: var(--verde-tx); font-weight: 700 } .ruim { color: var(--laranja-tx); font-weight: 700 }

/* barra de status */
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--fg-2) }
.legenda button { border: 0; background: none; padding: 4px 2px; cursor: pointer; color: inherit; display: inline-flex; gap: 6px; align-items: center }
.legenda b { color: var(--fg) }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none }
.barra { display: flex; gap: 2px; height: 26px; border-radius: 8px; overflow: hidden }
.barra.fina { height: 10px; border-radius: 5px }
.barra span { display: block; min-width: 3px }
.s-normal { background: var(--verde) } .s-acima { background: var(--laranja) } .s-abaixo { background: var(--azul) }
.s-sem_consumo { background: var(--roxo) } .s-sem_leitura { background: var(--cinza) } .s-novo { background: var(--line) }

/* regionais */
.grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.reg { background: var(--surface); border: 0; border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; color: var(--fg); min-width: 0 }
.reg:hover { outline: 2px solid var(--line) }
.reg .l1 { display: flex; justify-content: space-between; gap: 8px; align-items: baseline }
.reg strong { font-size: 16px; font-family: var(--f-display) }
.reg .m { font-family: var(--f-display); font-size: 24px; font-weight: 800 }
.reg .m small { font-size: 13px; font-weight: 600; color: var(--fg-2); font-family: var(--f-body) }
.reg .det { font-size: 13px; color: var(--fg-2) }

/* gráfico */
.graf { position: relative; width: 100%; min-width: 0 }
.graf svg { display: block; width: 100%; height: auto; overflow: visible }
.graf .eixo { fill: var(--fg-3); font-size: 11px; font-family: var(--f-body) }
.graf .grade-l { stroke: var(--line); stroke-width: 1 }
.dica { position: absolute; pointer-events: none; background: var(--fg); color: var(--bg); border-radius: 8px; padding: 7px 10px; font-size: 13px; line-height: 1.35; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); z-index: 3 }
.dica[hidden] { display: none !important }

/* supervisório */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px }
.tile { border: 0; text-align: left; cursor: pointer; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; border-left: 6px solid var(--cinza); background: var(--tint-cinza); color: var(--fg); min-width: 0 }
.tile:hover { filter: brightness(0.98); outline: 2px solid var(--line) }
.tile .l1 { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 14px }
.tile .l1 span:first-child { min-width: 0; overflow-wrap: anywhere }
.tile .v { font-family: var(--f-display); font-size: 28px; font-weight: 800 }
.tile .v small { font-size: 14px; font-weight: 600; font-family: var(--f-body) }
.tile .c { font-size: 13px; color: var(--fg-2) }
.st { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap }
.t-normal { border-left-color: var(--verde); background: var(--tint-verde) } .t-normal .st { color: var(--verde-tx) }
.t-acima { border-left-color: var(--laranja); background: var(--tint-laranja) } .t-acima .st { color: var(--laranja-tx) }
.t-abaixo { border-left-color: var(--azul); background: var(--tint-azul) } .t-abaixo .st { color: var(--azul-tx) }
.t-sem_consumo { border-left-color: var(--roxo); background: var(--tint-roxo) } .t-sem_consumo .st { color: var(--roxo-tx) }
.t-sem_leitura .st, .t-novo .st { color: var(--cinza-tx) }
.t-novo { border-left-color: var(--line) }

/* tabelas */
.tab-wrap { overflow-x: auto; margin: 0 -4px }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap }
th button { all: unset; cursor: pointer } th button:focus-visible { outline: 2px solid var(--laranja) }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle }
td.n, th.n { text-align: right }
tr.clic { cursor: pointer } tr.clic:hover td { background: var(--surface-2) }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--tint-cinza); color: var(--cinza-tx) }
.pill.normal { background: var(--tint-verde); color: var(--verde-tx) } .pill.acima { background: var(--tint-laranja); color: var(--laranja-tx) }
.pill.abaixo { background: var(--tint-azul); color: var(--azul-tx) } .pill.sem_consumo { background: var(--tint-roxo); color: var(--roxo-tx) }

/* atenção */
.grupo { display: flex; flex-direction: column; gap: 10px }
.grupo > h3 { font-size: 16px; display: flex; gap: 10px; align-items: center }
.grupo > p { margin: -4px 0 0; font-size: 14px; color: var(--fg-2); max-width: 75ch }
.cont { font-family: var(--f-body); font-size: 13px; font-weight: 700; color: var(--fg-2); background: var(--surface-2); border-radius: 999px; padding: 2px 9px }

/* loja */
.voltar { align-self: flex-start; border: 0; background: none; color: var(--verde-tx); font-weight: 700; cursor: pointer; padding: 4px 0 }
.dupla { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px }
.diag { border-radius: var(--r); padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; background: var(--tint-verde) }
.diag.acima { background: var(--tint-laranja) } .diag.abaixo { background: var(--tint-azul) } .diag.sem_consumo { background: var(--tint-roxo) } .diag.sem_leitura, .diag.novo { background: var(--tint-cinza) }
.diag strong { display: block; font-size: 16px }
.diag p { margin: 2px 0 0; color: var(--fg-2); max-width: 80ch }
.vazio { padding: 40px 20px; text-align: center; color: var(--fg-2) }
.demo { background: var(--tint-laranja); color: var(--laranja-tx); font-size: 13px; font-weight: 600; text-align: center; padding-block: 6px }

/* login: só o cartão, sem menus nem rodapé */
body.modo-login .topo, body.modo-login .rod, body.modo-login .demo { display: none }
body.modo-login main.wrap { min-height: 100vh; min-height: 100dvh; justify-content: center; padding-block: 32px }
.login { display: grid; place-items: center }
.login form { background: var(--surface); border-radius: 18px; padding: 30px 28px 22px; width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 10px 40px rgba(15, 61, 43, .10) }
.login .l-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 6px }
.login .l-logo img { height: 52px; width: auto }
.login .l-logo i { display: grid; gap: 3px; width: 100% } .login .l-logo i b { height: 3px; background: #009E62 } .login .l-logo i b:last-child { background: #F86402 }
.login h1 { font-size: 22px; text-align: center }
.login .l-sub { margin: -6px 0 4px; text-align: center; font-size: 14px; color: var(--fg-2) }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg-2) }
.login input { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; color: var(--fg); min-height: 44px }
.login .l-rod { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; text-align: center; font-size: 12px; color: var(--fg-3) }
.login .l-rod strong { color: var(--fg-2) }
.btn { border: 0; border-radius: 10px; padding: 12px 16px; background: var(--verde-btn); color: #FFFFFF; font-weight: 700; cursor: pointer; min-height: 44px }
.btn.sec { background: transparent; color: var(--verde-tx); padding: 6px 0; min-height: 0 }
.erro { color: var(--laranja-tx); font-size: 14px; margin: 0 }

footer.rod { background: var(--rodape); color: #FFFFFF; margin-top: 8px }
.rod-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 28px 40px; padding-block: 32px 28px }
.rod-marca { display: flex; flex-direction: column; gap: 12px; max-width: 46ch }
.rod-marca img { height: 19px; width: auto; align-self: flex-start }
.rod p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5 }
.rod .rod-fino { font-size: 14px; opacity: .92 }
.rod-col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start }
.rod h2 { font-family: var(--f-display); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 2px }
.rod a { color: #FFFFFF; font-weight: 600; font-size: 15px; text-decoration: none }
.rod a:hover { text-decoration: underline }
.rod-sup { display: flex; flex-direction: column; gap: 4px }
.rod-sup span { font-size: 14px; font-weight: 500 }
.rod-sup a { display: inline-flex; align-items: center; gap: 8px; background: rgba(0, 0, 0, .16); border-radius: 999px; padding: 7px 14px 7px 10px; min-height: 40px }
.rod-sup a:hover { background: rgba(0, 0, 0, .26); text-decoration: none }
.rod-sup svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round }
.rod-base { background: rgba(0, 0, 0, .18) }
.rod-base .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; padding-block: 12px; font-size: 13px; font-weight: 500 }
@media (max-width: 760px) { .rod-cols { grid-template-columns: minmax(0, 1fr) } }

@media (max-width: 1000px) { .kpis, .grade { grid-template-columns: repeat(2, minmax(0, 1fr)) } .dupla { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 520px) { .kpis { grid-template-columns: minmax(0, 1fr) } .grade { grid-template-columns: minmax(0, 1fr) } .marca span { display: none } }
@media (prefers-reduced-motion: no-preference) { .tile, .reg, .kpi { transition: filter .15s } }

/* usuários */
.form-usu { border: 2px solid var(--verde) }
.campos2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.campo-v { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--fg-2) }
.campo-v input, .acesso select { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; min-height: 42px; color: var(--fg); min-width: 0 }
.campo-v input[readonly] { background: var(--surface-2) }
.acessos { display: flex; flex-direction: column; gap: 8px }
.acesso { display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px 42px; gap: 8px; align-items: center }
.acesso .x { border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); border-radius: 10px; height: 42px; cursor: pointer; font-size: 20px }
.acesso .x:disabled { opacity: .35; cursor: default }
.chk { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fg-2) }
.acoes { display: flex; flex-wrap: wrap; gap: 10px }
.btn.sec2 { background: var(--surface); color: var(--fg); border: 1px solid var(--line) }
.ok-msg { color: var(--verde-tx); font-weight: 600; margin: 0 }
.painel.erro, .painel.ok-msg { font-size: 14px }
@media (max-width: 700px) { .campos2 { grid-template-columns: minmax(0, 1fr) } .acesso { grid-template-columns: minmax(0, 1fr) 42px } .acesso > :nth-child(2), .acesso > :nth-child(3) { grid-column: 1 / -1 } .acesso .x { grid-column: 2; grid-row: 1 } }