/* EAUT Smart Meter — identidade: âmbar da EAUT, grafite e status em azul */
:root {
  --fundo: #ECEEF1; --painel: #FFFFFF; --borda: #D5D9DF; --linha: #ECEEF1; --texto: #1B2430; --suave: #5B6573; --medio: #3D4755;
  --escuro: #1B2430; --escuro2: #263241; --escuro3: #3A4656; --menu-txt: #C9D1DB; --menu-grp: #8A95A3;
  --ambar: #F6B111; --laranja: #E8890C; --marca-txt: #9A4A06; --marca-esc: #6E3504; --marca-claro: #FFF3DC; --marca-borda: #F5CF8A;
  --azul: #1D5FB4; --azul-esc: #164A8C;
  --aviso-txt: #8A5A00; --aviso-fundo: #FFF9E8; --aviso-borda: #E8CF8F;
  --falha: #B42318; --falha-forte: #D92D20; --falha-fundo: #FEF3F2; --falha-borda: #F4B4AE; --incendio: #B42318; --incendio-esc: #8F1C13;
  --sans: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
[hidden] { display: none !important; }
a { color: var(--marca-txt); } a:hover { color: var(--marca-esc); }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
h1 { margin: 0; font-size: 26px; font-weight: 600; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
h3 { margin: 14px 0 8px; font-size: 15px; font-weight: 600; }
.sub { color: var(--suave); font-size: 14px; margin: 4px 0 0; }
.mono, .num { font-family: var(--mono); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--borda); background: #FFFFFF; color: var(--texto); font: inherit; font-weight: 500; cursor: pointer; text-decoration: none; }
.btn:hover:not(:disabled) { border-color: #9AA3AE; color: var(--texto); }
.btn:disabled { background: #F5F6F8; color: #8A929C; cursor: not-allowed; }
.btn-p { background: var(--ambar); border-color: var(--ambar); color: var(--texto); font-weight: 600; }
.btn-p:hover:not(:disabled) { background: #E9A30A; border-color: #E9A30A; }
.btn-perigo { color: var(--falha); border-color: var(--falha-borda); }
.btn-s { min-height: 34px; padding: 0 10px; font-size: 13px; }
.btn.sel { background: var(--marca-claro); border-color: var(--laranja); color: var(--marca-txt); }

label { font-size: 13px; color: var(--suave); }
input, select, textarea { min-height: 40px; border: 1px solid var(--borda); border-radius: 6px; padding: 0 10px; font: inherit; color: var(--texto); background: #FFFFFF; width: 100%; }
textarea { padding: 8px 10px; min-height: 80px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.erro { color: var(--falha); font-size: 14px; min-height: 1.2em; margin: 0; }

.chave { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px 0 58px; border-radius: 20px;
  border: 1px solid var(--escuro3); background: #FFFFFF; font: inherit; font-size: 14px; cursor: pointer; min-width: 140px; color: var(--texto); }
.chave::before { content: ""; position: absolute; left: 10px; top: 50%; width: 38px; height: 22px; margin-top: -11px; border-radius: 11px; background: #C9CED6; }
.chave::after { content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #FFFFFF; transition: transform .15s; }
.chave[aria-checked="true"] { border-color: var(--laranja); color: var(--marca-txt); }
.chave[aria-checked="true"]::before { background: var(--laranja); }
.chave[aria-checked="true"]::after { transform: translateX(16px); }
.chave:disabled { opacity: .55; cursor: not-allowed; }
.ck { width: 26px; height: 26px; border-radius: 6px; border: 2px solid #9AA3AE; background: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--texto); }
.ck[aria-checked="true"] { background: var(--ambar); border-color: var(--laranja); }
.ck:disabled { cursor: not-allowed; opacity: .6; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--suave); font-weight: 500; font-size: 13px; padding: 8px; border-bottom: 1px solid var(--borda); }
td { padding: 10px 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.rolagem { overflow-x: auto; }

/* ---------- aplicação */
.casca { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }
.lateral { flex: 1 1 240px; max-width: 100%; background: var(--escuro); color: #FFFFFF; padding: 18px 12px; display: flex; flex-direction: column; gap: 6px; }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; padding: 0 8px 10px; color: #FFFFFF; text-decoration: none; }
.marca img { width: 32px; height: 32px; }
.lateral select { background: var(--escuro2); color: #FFFFFF; border-color: var(--escuro3); }
.planta-fixa { margin: 0 4px 6px; padding: 10px 12px; border-radius: 8px; background: var(--escuro2); border: 1px solid var(--escuro3); }
.planta-fixa span { display: block; font-size: 12px; color: var(--menu-grp); }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu .grp { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--menu-grp); margin: 14px 12px 4px; }
.menu a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 6px; color: var(--menu-txt); text-decoration: none; }
.menu a:hover { background: var(--escuro2); color: #FFFFFF; }
.menu a.on { background: var(--ambar); color: var(--texto); font-weight: 600; }
.badge { margin-left: auto; background: var(--falha-forte); color: #FFFFFF; border-radius: 10px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.produto { margin-top: auto; padding: 12px 8px 14px; display: flex; flex-direction: column; gap: 6px; }
.produto span { font-size: 11px; color: var(--menu-grp); }
.produto img { width: 150px; height: auto; }
.quem { padding: 14px 8px 0; border-top: 1px solid var(--escuro3); display: flex; align-items: center; gap: 10px; }
.avatar { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--escuro3); align-items: center; justify-content: center; font-weight: 600; flex: none; }
.quem div { display: flex; flex-direction: column; font-size: 13px; color: var(--menu-txt); flex: 1; min-width: 0; }
.quem strong { color: #FFFFFF; font-weight: 500; }
.quem .btn { background: var(--escuro2); border-color: var(--escuro3); color: #FFFFFF; }

.conteudo:focus { outline: none; }
.conteudo { flex: 999 1 560px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.titulo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: #FFFFFF; border: 1px solid var(--borda); font-size: 13px; color: var(--medio); text-decoration: none; }
.chip.ruim { background: var(--falha-fundo); border-color: var(--falha-borda); color: var(--falha); }
.chip.demo { background: var(--marca-claro); border-color: var(--marca-borda); color: var(--marca-esc); }
.pn { background: var(--painel); border: 1px solid var(--borda); border-radius: 8px; padding: 18px; min-width: 0; }
.cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.cab h2 { margin: 0; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.flex { display: flex; flex-wrap: wrap; gap: 16px; }
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.cartao { background: #FFFFFF; border: 1px solid var(--borda); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cartao .rot { font-size: 13px; color: var(--suave); }
.cartao .val { font-family: var(--mono); font-size: 26px; font-weight: 500; }
.cartao .val.txt { font-family: var(--sans); font-weight: 600; }
.cartao .det { font-size: 13px; color: var(--suave); }
.cartao.aviso { background: var(--aviso-fundo); border-color: var(--aviso-borda); } .cartao.aviso * { color: var(--aviso-txt); }
.cartao.falha { background: var(--falha-fundo); border-color: var(--falha-borda); } .cartao.falha * { color: var(--falha); }
.cartao.azul { background: #E3ECF8; border-color: #B9CDEB; } .cartao.azul .rot, .cartao.azul .det { color: #164A8C; }
.cartao.fogo { background: var(--incendio); border-color: var(--incendio); } .cartao.fogo * { color: #FFFFFF; }

.faixa-incendio { background: var(--incendio); color: #FFFFFF; padding: 16px 20px; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.faixa-incendio strong { font-size: 20px; }
.faixa-incendio .btn { background: #FFFFFF; color: var(--incendio-esc); border-color: #FFFFFF; }
@media (prefers-reduced-motion: no-preference) { .faixa-incendio { animation: pulsar 1.6s ease-in-out infinite; } @keyframes pulsar { 50% { background: var(--incendio-esc); } } }

.tanques { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.tanque { display: flex; gap: 14px; align-items: stretch; }
.tanque-corpo { width: 56px; height: 140px; border: 2px solid #9AA3AE; border-radius: 6px; background: #F5F6F8; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; flex: none; }
.tanque-agua { background: var(--azul); transition: height .8s ease; }
.tanque-agua.baixo { background: var(--laranja); }
.tanque-info { display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.tanque-info .num { font-size: 22px; }
.medidas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.medida { border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px; }
.medida .rot { font-size: 13px; color: var(--suave); }
.medida .num { font-size: 22px; }
.medida.larga { grid-column: span 2; }
.medida.falha { background: var(--falha-fundo); border-color: var(--falha-borda); }
.pressao { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 14px; }
.pressao.falha { background: var(--falha-fundo); border-color: var(--falha-borda); }
.pressao .num { font-size: 22px; }
.barra { position: relative; flex: 1 1 220px; height: 10px; border-radius: 5px; background: #E3E6EA; }
.barra.fina { flex: none; width: 100%; }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--azul); }
.barra b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--falha); }
.bomba { border: 1px solid var(--borda); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bomba.fora { background: #F5F6F8; }
.bomba-cab { display: flex; justify-content: space-between; align-items: center; }
.bomba-cab strong { font-size: 16px; }
.estado { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.estado::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.estado.on { color: var(--azul-esc); } .estado.on::before { background: var(--azul); border-color: var(--azul-esc); }
.estado.off { color: var(--suave); }
.estado.falha { color: var(--falha); } .estado.falha::before { background: var(--falha-forte); border-color: var(--falha); }
.dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dados div { display: flex; flex-direction: column; font-size: 13px; color: var(--suave); }
.dados .num { font-size: 16px; color: var(--texto); }
.botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.bloco { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 10px; }
.bloco .grande { font-size: 17px; font-weight: 600; }
.bloco.fogo { background: var(--incendio); border-color: var(--incendio); color: #FFFFFF; }
.bloco.falha { background: var(--falha-fundo); border-color: var(--falha-borda); color: var(--falha); }
.elev .andar { font-family: var(--mono); font-size: 22px; text-align: right; }
.elev .andar small { display: block; font-family: var(--sans); font-size: 12px; color: var(--suave); }

.alarmes { display: flex; flex-direction: column; gap: 8px; }
.alarme { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border-radius: 6px; border: 1px solid var(--borda); }
.alarme.critico { background: #FDECEA; border-color: #E9A39C; }
.alarme.alto { background: var(--falha-fundo); border-color: var(--falha-borda); }
.alarme.medio { background: var(--aviso-fundo); border-color: var(--aviso-borda); }
.alarme .msg { font-weight: 500; }
.alarme .quando { font-size: 13px; color: var(--suave); }
.vazio { color: var(--suave); padding: 8px 0; margin: 0; }
.grafico svg { width: 100%; height: auto; display: block; }
.legenda { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--medio); margin-top: 8px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 18px; height: 0; border-top: 3px solid; display: inline-block; }

.aviso-info { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; background: var(--marca-claro); border: 1px solid var(--marca-borda); color: var(--marca-esc); font-size: 14px; }
.linha-param { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.linha-param .rotulo { flex: 1 1 220px; }
.linha-param .det { font-size: 13px; color: var(--suave); }
.linha-param input { width: 110px; text-align: right; font-family: var(--mono); }
.uni { color: var(--suave); min-width: 34px; }
.barra-acao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 8px; background: #FFFFFF; border: 1px solid var(--borda); position: sticky; bottom: 12px; }

.elo { flex: 1 1 210px; background: #FFFFFF; border: 1px solid var(--borda); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.elo .l { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.elo .l span:last-child { text-align: right; overflow-wrap: anywhere; min-width: 0; }
.elo .l span:first-child { color: var(--suave); }
.seta { align-self: center; color: #9AA3AE; font-size: 22px; }

.grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.grupo { border: 1px solid var(--borda); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.grupo .k { color: var(--suave); }
.painel-lateral { flex: 1 1 320px; display: flex; flex-direction: column; gap: 12px; }
.caixa-cinza { padding: 12px; border-radius: 8px; background: #F5F6F8; border: 1px solid var(--borda); font-size: 14px; }

.etapas { display: flex; flex-wrap: wrap; gap: 8px; }
.etapa { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 20px; font: inherit; font-size: 14px; cursor: pointer; border: 1px solid var(--borda); background: #FFFFFF; color: var(--medio); }
.etapa b { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--linha); color: var(--suave); }
.etapa.feita b { background: var(--escuro); color: #FFFFFF; }
.etapa.atual { border-color: var(--laranja); background: var(--marca-claro); color: var(--marca-esc); font-weight: 600; }
.etapa.atual b { background: var(--ambar); color: var(--texto); }
.modelos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.modelo { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 10px; font: inherit; cursor: pointer; background: #FFFFFF; border: 1px solid var(--borda); }
.modelo[aria-pressed="true"] { background: var(--marca-claro); border: 2px solid var(--laranja); }
.modelo:disabled { cursor: not-allowed; opacity: .55; }
.info { border: 1px solid var(--borda); border-radius: 8px; padding: 12px; }
.info span { display: block; font-size: 13px; color: var(--suave); }
.info strong { font-family: var(--mono); font-size: 18px; font-weight: 500; overflow-wrap: anywhere; word-break: break-word; }
.destaque { background: var(--marca-claro); border-color: var(--marca-borda); }

dialog { border: 1px solid var(--borda); border-radius: 10px; padding: 24px; max-width: 460px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(27, 36, 48, .45); }
.acoes-dlg { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--escuro); color: #FFFFFF; padding: 12px 18px; border-radius: 8px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); z-index: 50; }
.toast.ver { opacity: 1; }
.toast.ruim { background: var(--falha); }

@media (max-width: 600px) { .conteudo { padding: 16px; } .dados { grid-template-columns: repeat(2, minmax(0, 1fr)); } .medidas { grid-template-columns: 1fr; } .medida.larga { grid-column: auto; } }

/* ---------- apresentação e login */
.publico { min-height: 100vh; background: linear-gradient(160deg, #FFF1D6 0%, #F6F8FB 38%, #FFFFFF 70%); font-size: 16px; line-height: 1.5; }
.topo-publico { max-width: 1180px; margin: 0 auto; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca-publica { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: var(--texto); text-decoration: none; }
.marca-publica img { width: 34px; height: 34px; }
.btn-escuro { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 8px; background: var(--escuro); color: #FFFFFF; text-decoration: none; font-weight: 600; }
.btn-escuro:hover { color: #FFFFFF; background: #000000; }
.heroi { max-width: 1180px; margin: 0 auto; padding: 48px 28px 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.heroi h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.04; letter-spacing: -0.02em; }
.heroi p { margin: 0; font-size: 19px; color: var(--medio); max-width: 34em; }
.cta { display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px; border-radius: 10px; background: var(--ambar); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 17px; }
.cta:hover { background: #E9A30A; color: var(--texto); }
.vitrine { flex: 1 1 460px; background: #FFFFFF; border: 1px solid var(--borda); border-radius: 16px; padding: 18px; box-shadow: 0 24px 60px rgba(27, 36, 48, .12); display: flex; flex-direction: column; gap: 14px; }
.beneficios { max-width: 1180px; margin: 0 auto; padding: 0 28px 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.beneficio { background: #FFFFFF; border: 1px solid var(--borda); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.beneficio .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--marca-claro); display: flex; align-items: center; justify-content: center; color: var(--marca-txt); }
.beneficio strong { font-size: 17px; }
.beneficio span { color: var(--medio); }
.rodape { background: var(--escuro); color: #FFFFFF; }
.rodape .in { max-width: 1180px; margin: 0 auto; padding: 44px 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.rodape h2 { margin: 0; font-size: 28px; }
.rodape p { margin: 6px 0 0; color: var(--menu-txt); }
.rodape .base { padding: 16px 28px 28px; border-top: 1px solid var(--escuro3); font-size: 14px; color: var(--menu-grp); }
.rodape .base a { color: var(--menu-txt); }
.rodape .btn-claro { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 10px; background: #FFFFFF; color: var(--texto); text-decoration: none; font-weight: 600; }
.pagina-login { min-height: 100vh; background: linear-gradient(180deg, #FFF1D6 0%, #FFFFFF 45%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; }
.login { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.login-marca { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--texto); text-decoration: none; }
.login-marca img { width: 60px; height: 60px; }
.login form { width: 100%; background: #FFFFFF; border: 1px solid var(--borda); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.login input { min-height: 46px; }
.senha { position: relative; }
.senha input { padding-right: 84px; }
.senha button { position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--marca-txt); font: inherit; font-size: 14px; cursor: pointer; }
.login .btn-p { min-height: 48px; font-size: 16px; }

/* ---------- v4: dicas, Saiba mais, janelas, aviso de cobrança */
[data-dica] { position: relative; }
[data-dica]:hover::after, [data-dica]:focus-visible::after { content: attr(data-dica); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  background: var(--escuro); color: #FFFFFF; font-size: 12px; font-weight: 400; line-height: 1.35; padding: 6px 10px; border-radius: 6px; width: max-content; max-width: 240px; text-align: center; z-index: 30; pointer-events: none; white-space: normal; }
[data-dica]:hover::before, [data-dica]:focus-visible::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--escuro); border-bottom: 0; z-index: 30; }
@media (hover: none) { [data-dica]:hover::after, [data-dica]:hover::before { display: none; } }
.saiba { margin-top: 8px; }
.saiba > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; border-radius: 6px; color: var(--menu-txt); }
.saiba > summary::-webkit-details-marker { display: none; }
.saiba > summary:hover { background: var(--escuro2); color: #FFFFFF; }
.saiba a { min-height: 36px !important; padding-left: 24px !important; font-size: 14px; }
.saiba hr { border: 0; border-top: 1px solid var(--escuro3); margin: 6px 12px; }
.produto a { display: inline-flex; align-items: flex-start; gap: 1px; text-decoration: none; align-self: flex-start; }
.marca-sup { font-size: 11px; line-height: 1; color: #FFFFFF; font-weight: 600; }
.janela { position: fixed; inset: 0; background: rgba(27, 36, 48, .45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 40; }
.janela > div { width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow: auto; background: #FFFFFF; border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .25); }
.faixa-cobranca { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 10px; }
.faixa-cobranca.aviso { background: var(--aviso-fundo); border: 1px solid var(--aviso-borda); color: #6B4700; }
.faixa-cobranca.restrito { background: var(--falha-fundo); border: 1px solid var(--falha-borda); color: #7A271A; }
.btn-perigo-cheio { background: var(--falha); border-color: var(--falha); color: #FFFFFF; font-weight: 600; }
.btn-perigo-cheio:hover:not(:disabled) { background: #8F1C13; color: #FFFFFF; }
.regua { display: flex; flex-wrap: wrap; gap: 10px; }
.regua > div { flex: 1 1 150px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.regua .ponto { display: flex; align-items: center; gap: 8px; }
.regua .ponto i { width: 14px; height: 14px; border-radius: 50%; flex: none; background: #C9CED6; }
.regua .ponto b { height: 2px; flex: 1; background: var(--borda); }
.regua .feito i, .regua .feito b { background: var(--escuro); }
.regua .atual i { background: var(--falha-forte); }
.doc h2 { font-size: 20px; margin: 18px 0 6px; }
.doc p { margin: 0 0 10px; color: var(--medio); }
.resumo-doc { padding: 16px 18px; border-radius: 10px; background: var(--marca-claro); border: 1px solid var(--marca-borda); }
.resumo-doc ul { margin: 8px 0 0; padding-left: 20px; color: var(--medio); }
.passo { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.passo b { width: 30px; height: 30px; border-radius: 50%; background: var(--escuro); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 14px; }
.indice a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--texto); text-decoration: none; font-size: 15px; }
.indice a.on { background: var(--marca-claro); color: var(--marca-esc); font-weight: 600; }
.indice .grp-i { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin: 14px 0 6px; }
.rodape-login { display: flex; gap: 14px; font-size: 13px; flex-wrap: wrap; justify-content: center; color: var(--suave); }
.rodape-login a { color: var(--suave); }
.logo-eaut { display: inline-flex; align-items: flex-start; gap: 1px; text-decoration: none; }
.logo-eaut span { font-size: 12px; line-height: 1; font-weight: 600; color: var(--texto); }