/* Estilos da página individual, usados na prévia estática e na view MVC. */
.pagina-ponto .navbar { min-height: 94px; }
.marca-oficial { display: flex; align-items: center; gap: 20px; }
.marca-oficial img { width: 190px; height: 78px; object-fit: contain; mix-blend-mode: multiply; }
.marca-oficial > span { font-size: 8px; letter-spacing: .16em; padding-left: 18px; border-left: 1px solid var(--linha); color: #667a71; }
.pagina-ponto .hero-ponto { gap: 42px; padding-bottom: 44px; }
.pagina-ponto .hero-ponto h1 { font-size: clamp(2.2rem, 3.4vw, 3.3rem); }
.pagina-ponto .titulo-complemento { margin-top: 22px; line-height: 1.15; }
.pagina-ponto .hero-ponto .texto-destaque { font-size: 16px; }
.foto-real-referencia > img { height: 420px; object-position: 40% center; }
.foto-real-referencia .selo-recurso { top: auto; bottom: 18px; right: 18px; box-shadow: 0 8px 22px #17353d14; }
.pagina-ponto .visual-ponto figcaption { font-size: 10px; }
.pagina-ponto .aviso-finalidade p { font-size: 13px; }
.painel-publico { padding-block: 68px; }
.contexto-indicadores { text-align: right; }
.contexto-indicadores p { font-size: 11px; line-height: 1.7; margin: 12px 0 0; }
.grade-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.metrica { position: relative; min-width: 0; border: 1px solid var(--linha); border-radius: 12px; background: white; padding: 24px; }
.metrica-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; font-weight: 650; color: #536c60; margin-bottom: 22px; }
.metrica-titulo .icone { width: 18px; height: 18px; color: var(--verde); }
.metrica > strong { display: block; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -.05em; margin-bottom: 13px; }
.metrica strong > small { font-size: 20px; color: var(--texto); font-weight: 500; }
.metrica h3 { font-size: 13px; letter-spacing: -.01em; line-height: 1.4; margin-bottom: 9px; }
.metrica p { font-size: 11px; line-height: 1.75; margin-bottom: 15px; }
.metrica-ruido { background: #edf5ef; }
.rodape-metrica { color: #698172; font-size: 8px; font-weight: 650; letter-spacing: .08em; }
.onda-mini { display: flex; gap: 5px; align-items: center; height: 35px; }
.onda-mini i { width: 5px; height: 30%; border-radius: 3px; background: #80b39b; }
.onda-mini i:nth-child(3n) { height: 75%; }
.onda-mini i:nth-child(3n + 1) { height: 45%; }
.onda-mini i:nth-child(4n) { height: 90%; background: var(--verde); }
.grade-perfil { display: grid; grid-template-columns: 1fr 1.1fr .9fr; gap: 18px; margin-top: 18px; }
.ano-frota { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ano-frota strong { font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -.06em; }
.ano-frota > span { font-size: 11px; color: var(--texto); line-height: 1.6; }
.perfil-cidades .metrica-titulo { margin-bottom: 12px; }
.ranking-cidades { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 16px; }
.ranking-cidades li { display: flex; align-items: center; gap: 12px; }
.posicao-ranking { font-size: 11px; color: #80968b; }
.ranking-cidades li > div { flex: 1; min-width: 0; }
.ranking-cidades li div > span { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; gap: 10px; }
.ranking-cidades b { font-size: 10px; color: var(--verde); }
.ranking-cidades i { display: block; height: 5px; width: var(--largura); background: #7aa890; border-radius: 4px; }
.grafico-eletrificados { width: 160px; height: 160px; margin: 15px auto 24px; border-radius: 50%; background: conic-gradient(var(--verde) 0% 7.8%, #e8eeea 7.8% 100%); padding: 12px; }
.grafico-eletrificados > div { width: 100%; height: 100%; border-radius: 50%; background: white; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.grafico-eletrificados strong { font-size: 35px; font-weight: 600; letter-spacing: -.05em; }
.grafico-eletrificados strong small { font-size: 17px; }
.grafico-eletrificados span { font-size: 9px; color: var(--texto); margin-top: 3px; }
.grade-estado { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.grade-estado .metrica-titulo { margin-bottom: 15px; }
.grade-estado h3 { font-size: 16px; }
.grade-estado p { margin-bottom: 0; }
.grade-estado .link-texto { padding-bottom: 0; font-size: 11px; }
.resumo-luz { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.introducao-recursos { padding-block: 56px 30px; }
.introducao-recursos h2 { font-size: 38px; margin-bottom: 18px; }
.introducao-recursos p:not(.sobretitulo) { font-size: 14px; max-width: 620px; }
.atalhos-recursos { display: flex; overflow-x: auto; gap: 8px; padding: 15px 0 10px; scrollbar-width: thin; }
.atalhos-recursos a { flex-shrink: 0; padding: 9px 12px; border: 1px solid #cbdacf; border-radius: 6px; font-size: 10px; background: #fbfcf9; }
.atalhos-recursos a:hover { background: #dbeade; }
.setor-recurso { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 76px; padding-block: 64px; border-bottom: 1px solid var(--linha); }
.setor-invertido .imagem-setor, .setor-invertido .visual-dados { order: 2; }
.setor-invertido .texto-setor { order: 1; }
.imagem-setor { margin: 0; border-radius: 13px; overflow: hidden; background: #e9efea; }
.imagem-setor img { width: 100%; height: 320px; object-fit: cover; }
.imagem-setor figcaption { font-size: 9px; color: #5d7668; padding: 11px 16px; line-height: 1.5; }
.texto-setor .sobretitulo { margin-bottom: 16px; }
.numero-setor { display: inline-flex; justify-content: center; align-items: center; font-size: 10px; letter-spacing: 0; width: 27px; height: 27px; border: 1px solid #bcd5c7; border-radius: 50%; }
.texto-setor h2 { font-size: clamp(26px, 2.6vw, 35px); margin-bottom: 22px; line-height: 1.15; }
.texto-setor > p:not(.sobretitulo):not(.nota) { font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
.texto-setor .nota { font-size: 11px; }
.destaque-setor { display: flex; gap: 13px; align-items: start; padding: 18px 0 5px; }
.destaque-setor .icone { color: var(--verde); margin-top: 2px; width: 22px; height: 22px; }
.destaque-setor > span { font-size: 12px; color: var(--texto); line-height: 1.8; }
.destaque-setor strong { display: block; color: var(--tinta); font-size: 13px; font-weight: 650; }
.visual-dados { border-radius: 13px; background: #edf4ef; padding: 28px; min-height: 330px; overflow: hidden; }
.rotulo-visual { font-size: 9px; font-weight: 700; color: #537768; letter-spacing: .08em; }
.rotulo-visual .icone { width: 18px; height: 18px; margin-right: 5px; }
.visual-dados > svg { width: 100%; height: auto; margin-block: 20px; }
.legenda-visual { font-size: 9px; color: #688273; line-height: 1.7; }
.numeros-setor { display: flex; gap: 40px; padding-block: 15px 5px; }
.numeros-setor strong { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.045em; margin-bottom: 7px; }
.numeros-setor span { display: block; font-size: 11px; line-height: 1.7; color: var(--texto); }
.visual-assistente { background: #e8eeec; }
.conversa-exemplo { margin-block: 30px; }
.pergunta-exemplo { padding: 17px 20px; border-radius: 10px 10px 2px 10px; background: var(--tinta); color: white; font-size: 13px; max-width: 320px; margin-left: auto; }
.resposta-exemplo { display: flex; align-items: start; gap: 13px; padding: 18px; border-radius: 10px 10px 10px 2px; background: white; font-size: 13px; margin: 20px 0 15px; }
.resposta-exemplo p { margin: 0; }
.resposta-exemplo .icone-bloco { width: 32px; height: 32px; border-radius: 7px; }
.resposta-exemplo .icone { width: 18px; height: 18px; }
.medicao-ruido { display: flex; align-items: center; gap: 22px; margin-block: 25px; }
.medicao-ruido > strong { font-size: 42px; font-weight: 600; letter-spacing: -.045em; flex-shrink: 0; }
.medicao-ruido small { font-size: 18px; color: var(--texto); font-weight: 500; }
.medicao-ruido p { font-size: 10px; margin: 8px 0 0; }
.imagem-noturna img { object-fit: contain; background: #030405; }
.mensagem-audio { padding: 21px; border-left: 3px solid var(--verde); background: #edf4ef; border-radius: 0 9px 9px 0; margin-top: 24px; }
.mensagem-audio h3 { font-size: 17px; margin-top: 15px; }
.mensagem-audio blockquote { font-size: 13px; color: #587062; line-height: 1.8; margin-block: 14px; }
.mensagem-audio > span:last-child { display: block; font-size: 9px; color: #6a8073; line-height: 1.7; }
/* Aparência adaptada do simulador giroflex.css do MVC existente. */
.painel-led { display: flex; justify-content: center; gap: 3px; padding: 12px 10px; background: #101a20; border: 2px solid #23373d; border-radius: 7px; width: fit-content; max-width: 100%; margin: 0 auto; }
.gf-cluster { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 1px; padding: 2px; background: #18272d; border: 1px solid #24343a; border-radius: 3px; }
.gf-led { width: 4px; height: 4px; border-radius: 50%; background: #30414a; transition: background-color .12s, box-shadow .12s; }
.gf-cluster.blue.active .gf-led { background-color: #3e97ee; box-shadow: 0 0 5px #0066ff80; }
.gf-cluster.red.active .gf-led { background-color: #f26975; box-shadow: 0 0 5px #ff003360; }
.painel-led-mini { padding: 9px 7px; gap: 2px; margin: 0; }
.painel-led-mini .gf-cluster { padding: 1px; }
.painel-led-mini .gf-led { width: 2px; height: 2px; }
.pagina-ponto .como-usar { margin-top: 45px; }
.secao-relato { display: flex; justify-content: space-between; gap: 50px; align-items: center; }
.secao-relato h2 { margin-bottom: 18px; }
.secao-relato p:not(.sobretitulo) { font-size: 14px; max-width: 570px; margin: 0; }
.acao-relato { flex-shrink: 0; }
.acao-relato > span { display: block; font-size: 9px; margin-top: 13px; text-align: center; color: var(--texto); }
.marca-rodape { display: flex; align-items: center; gap: 12px; }
.marca-rodape > img { border-radius: 6px; }
.marca-rodape > span { font-size: 25px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; }
.marca-rodape small { display: block; font-size: 7px; margin-top: 6px; letter-spacing: .13em; }
.modal-relato .modal-dialog { max-width: 600px; }
.modal-relato .modal-content { border: 0; border-radius: 16px; color: var(--tinta); }
.modal-relato .modal-header { padding: 26px 28px 20px; align-items: start; border-bottom: 1px solid var(--linha); }
.modal-relato .sobretitulo { font-size: 8px; margin-bottom: 10px; }
.modal-relato .modal-title { font-size: 25px; letter-spacing: -.035em; }
.modal-relato .btn-close { margin: 0 0 0 15px; flex-shrink: 0; }
.modal-relato .modal-body { padding: 22px 28px 28px; }
.modal-relato .modal-body > p { font-size: 13px; }
.aviso-formulario { background: #f6f1e4; border-radius: 8px; padding: 13px 16px; color: #7b642f; font-size: 11px; line-height: 1.7; margin-bottom: 24px; }
.aviso-formulario strong { display: block; font-weight: 650; }
.modal-relato legend { font-size: 13px; font-weight: 650; float: none; margin-bottom: 12px; }
.opcao-relato { display: flex; gap: 13px; align-items: center; border: 1px solid var(--linha); border-radius: 8px; padding: 14px 16px; margin-bottom: 9px; cursor: pointer; }
.opcao-relato:has(input:checked) { border-color: var(--verde); background: #f0f7f1; }
.opcao-relato input { width: 17px; height: 17px; accent-color: var(--verde); flex-shrink: 0; }
.opcao-relato strong { display: block; font-size: 12px; font-weight: 650; }
.opcao-relato small { display: block; font-size: 10px; color: var(--texto); margin-top: 5px; }
.rotulo-descricao { font-size: 13px; font-weight: 650; margin-block: 22px 10px; }
.rotulo-descricao span { font-size: 10px; font-weight: 400; color: var(--texto); }
.modal-relato textarea { display: block; width: 100%; padding: 14px; border: 1px solid #bacec0; border-radius: 7px; color: var(--tinta); font-size: 13px; line-height: 1.6; min-height: 125px; resize: vertical; }
.modal-relato [aria-invalid="true"] { border-color: #b84135; }
.ajuda-campo { display: flex; justify-content: space-between; gap: 15px; font-size: 9px; color: #728575; line-height: 1.6; margin-top: 8px; }
.erro-formulario { color: #a5362d; font-size: 11px; margin: 8px 0 0; }
.botoes-relato { display: flex; justify-content: flex-end; gap: 12px; margin-top: 25px; }
.sucesso-relato { text-align: center; padding: 20px 10px 8px; }
.sucesso-relato .icone-bloco { margin-bottom: 20px; }
.sucesso-relato h3 { font-size: 24px; margin-bottom: 15px; }
.sucesso-relato p { font-size: 13px; line-height: 1.8; margin-bottom: 25px; }
@media (max-width: 1100px) {
    .marca-oficial > span { display: none; }
    .marca-oficial img { width: 170px; }
    .grade-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-perfil { grid-template-columns: 1fr 1fr; }
    .perfil-eletrificados { grid-column: 1 / -1; }
    .grafico-eletrificados { margin-top: 0; }
    .setor-recurso { gap: 40px; }
    .imagem-setor img { height: 300px; }
    .numeros-setor { gap: 25px; }
    .painel-led { gap: 2px; padding: 10px 7px; }
    .gf-led { width: 3px; height: 3px; }
    .gf-cluster { padding: 1px; }
    .pagina-ponto .navbar-nav > button { font-size: 10px; padding-inline: 10px; }
}
@media (max-width: 767px) {
    .pagina-ponto .navbar { min-height: 76px; padding-block: 3px; }
    .marca-oficial img { width: 165px; height: 65px; }
    .pagina-ponto .navbar-nav > button { margin-block: 12px; min-height: 44px; font-size: 12px; }
    .pagina-ponto .hero-ponto { gap: 28px; }
    .pagina-ponto .hero-ponto h1 { font-size: 2.3rem; }
    .foto-real-referencia > img { height: 280px; object-position: 35% center; }
    .foto-real-referencia .selo-recurso { bottom: 12px; right: 12px; font-size: 9px; }
    .pagina-ponto .visual-ponto figcaption { padding: 10px 14px; font-size: 9px; line-height: 1.6; }
    .painel-publico { padding-block: 48px; }
    .contexto-indicadores { text-align: left; margin-top: 18px; }
    .grade-metricas { grid-template-columns: 1fr; gap: 12px; }
    .metrica { padding: 18px 15px; }
    .metrica-titulo { font-size: 10px; gap: 6px; margin-bottom: 18px; }
    .metrica > strong { font-size: 32px; }
    .metrica h3 { font-size: 12px; }
    .metrica p { font-size: 11px; }
    .grade-perfil, .grade-estado { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
    .perfil-eletrificados { grid-column: auto; }
    .grade-perfil .metrica, .grade-estado .metrica { padding: 24px; }
    .grafico-eletrificados { margin: 20px auto; }
    .introducao-recursos { padding-block: 42px 24px; }
    .introducao-recursos h2 { font-size: 30px; }
    .introducao-recursos p:not(.sobretitulo) { font-size: 13px; }
    .atalhos-recursos { gap: 7px; }
    .setor-recurso { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
    .setor-invertido .imagem-setor, .setor-invertido .visual-dados { order: 0; }
    .setor-invertido .texto-setor { order: 0; }
    .imagem-setor img { height: 240px; }
    .imagem-setor figcaption { font-size: 9px; }
    .texto-setor h2 { font-size: 29px; }
    .texto-setor > p:not(.sobretitulo):not(.nota) { font-size: 14px; }
    .texto-setor .sobretitulo { font-size: 8px; }
    .visual-dados { padding: 22px; min-height: auto; }
    .numeros-setor strong { font-size: 30px; }
    .numeros-setor { gap: 35px; }
    .resposta-exemplo { padding: 16px; font-size: 12px; }
    .rotulo-visual { font-size: 8px; }
    .medicao-ruido { flex-wrap: wrap; gap: 15px; }
    .gf-led { width: 3px; height: 3px; }
    .pagina-ponto .como-usar { margin-top: 20px; }
    .secao-relato { flex-direction: column; align-items: start; gap: 25px; }
    .secao-relato h2 { font-size: 29px; }
    .modal-relato .modal-dialog { margin: 12px; }
    .modal-relato .modal-header { padding: 23px 20px 18px; }
    .modal-relato .modal-body { padding: 20px; }
    .modal-relato .modal-title { font-size: 23px; }
    .opcao-relato { padding: 13px 12px; }
    .opcao-relato strong { font-size: 11px; }
    .ajuda-campo { font-size: 9px; }
}
@media (max-width: 380px) {
    .grade-metricas { grid-template-columns: 1fr; }
    .medicao-ruido > strong { font-size: 36px; }
    .painel-led { gap: 1px; padding: 8px 6px; }
    .gf-led { width: 2px; height: 2px; }
    .numeros-setor { gap: 25px; }
    .botoes-relato .botao { padding-inline: 17px; }
}

.selo-camera-ok { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #bad8c4; border-radius: 30px; background: #eaf5ed; color: #236447; font-size: 11px; font-weight: 650; line-height: 1.4; }
.selo-camera-ok .icone { width: 18px; height: 18px; }
.perfil-frota { display: flex; flex-direction: column; }
.perfil-frota .ano-frota { flex: 1; margin-bottom: 0; }