/* MecaFind – estilos do diagnóstico rápido, da calculadora e dos mapas (app e site).
   Usa as variáveis de cor de cada página: --petroleo, --ambar, --ambar-suave, --bg, --surface, --ink, --muted, --line, --ok, --bad. */

/* ---------- diagnóstico rápido ---------- */
.dg{--dg-r:12px}
.dg-in{display:flex;flex-direction:column;gap:12px;animation:dg-entra .22s ease-out}
@keyframes dg-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dg-cab{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:24px}
.dg-k{font-size:14px;font-weight:600;color:var(--muted)}
.dg-trilho{font-size:13px;color:var(--muted);font-weight:600;min-width:0;overflow-wrap:anywhere}
.dg-volta,.dg-recomeca{border:0;background:none;color:var(--muted);font:700 14px inherit;font-family:inherit;cursor:pointer;padding:6px 2px;text-decoration:underline;text-underline-offset:3px;flex:none;min-height:36px}
.dg-volta:hover,.dg-recomeca:hover{color:var(--ink)}
.dg-p{font-size:20px;font-weight:800;margin:0;outline:none}
.dg-ops{display:flex;flex-wrap:wrap;gap:8px}
.dg-ops button{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);padding:10px 14px;border-radius:99px;font:600 15px inherit;font-family:inherit;cursor:pointer;min-height:44px;text-align:left;transition:border-color .15s,background .15s}
.dg-ops button:hover{border-color:var(--ambar);background:var(--ambar-suave)}
.dg-urg{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border-radius:99px;padding:6px 14px 6px 10px;font-size:14px}
.dg-urg.u0{background:#E3F4EA;color:#1B7F4B}
.dg-urg.u1{background:#FFF1CC;color:#7A5600}
.dg-urg.u2{background:#FFE2C2;color:#8A3B00}
.dg-urg.u3{background:#B3412F;color:#fff}
.dg-urgtxt{margin:-4px 0 0;font-weight:600}
.dg-tit{font-size:22px}
.dg-txt{margin:0;color:var(--muted)}
.dg-via{border:1.5px solid var(--line);border-radius:var(--dg-r);padding:12px;display:flex;flex-direction:column;gap:8px}
.dg-via p{margin:0;font-size:14px}
.dg-vias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dg-vias span{border-radius:9px;padding:7px 6px;font-size:13px;font-weight:700;text-align:center;color:var(--muted);background:var(--bg)}
.dg-vias span.on{background:var(--ambar);color:#10232B}
.dg-dica{margin:0;font-size:14px;background:var(--bg);border-radius:var(--dg-r);padding:10px 12px}
.dg-acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.dg-nota{margin:0;font-size:13px;color:var(--muted)}

/* ---------- calculadora ---------- */
.cc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.cc-in{display:flex;flex-direction:column;gap:18px}
.cc-campo{display:flex;flex-direction:column;gap:6px}
.cc-lab{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cc-lab label,.cc-lab span{font-weight:700;font-size:14px;margin:0}
.cc-lab output{font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-ajuda{font-size:13px;color:var(--muted)}
.cc input[type=range]{width:100%;accent-color:var(--petroleo);min-height:32px;margin:0}
.cc-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg);padding:4px;border-radius:12px}
.cc-seg button{border:0;background:transparent;padding:10px 6px;border-radius:9px;font:700 14px inherit;font-family:inherit;cursor:pointer;color:var(--muted);min-height:44px}
.cc-seg button[aria-checked="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(16,35,43,.18)}
.cc-out{background:var(--bg);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.cc-k{font-size:14px;font-weight:600;color:var(--muted)}
.cc-big{font:800 44px/1 var(--display,inherit);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cc-big.neg{color:var(--bad)}
.cc-ano{color:var(--muted);font-size:15px;margin-top:-2px}
.cc-barra{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--line)}
.cc-barra span{display:block;height:100%;transition:width .25s}
.b-cus{background:#B9C9CD}.b-com{background:var(--petroleo)}.b-fic{background:var(--ambar)}
.cc-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted)}
.cc-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.cc-cada{flex-basis:100%;color:var(--ink);font-weight:600}
.cc-t{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.cc-t td{padding:7px 0;border-bottom:1px solid var(--line)}
.cc-t td+td{text-align:right;white-space:nowrap;padding-left:10px}
.cc-tot td{font-weight:800;border-bottom:0}
.cc-aviso{margin:0;font-size:14px;font-weight:700;color:var(--bad)}
.cc-nota{margin:0;font-size:13px;color:var(--muted)}
.cc-out .btn{align-self:flex-start}
@media(max-width:720px){.cc{grid-template-columns:minmax(0,1fr)}.cc-big{font-size:38px}}

/* ---------- mapas ---------- */
.mapa-caixa{display:flex;flex-direction:column;gap:8px}
.mapa{height:360px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#E7EEEF;position:relative;z-index:0}
.mapa-perfil{height:220px}
.mapa-editor{height:320px}
@media(max-width:600px){.mapa{height:300px}.mapa-editor{height:280px}}
.mapa-barra{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mapa-barra .btn svg{flex:none}
.mapa-leg{display:flex;gap:14px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.mapa-leg i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.lg-exata{background:var(--ambar);border:2px solid var(--petroleo)}
.lg-aprox{background:#fff;border:2px dashed #E3A000}
.mp-erro{height:100%;display:grid;place-items:center;text-align:center;padding:20px;color:var(--muted);font-size:14px;font-weight:600}
.mp-pino{background:none;border:0}
.mp-pino svg{display:block;filter:drop-shadow(0 2px 2px rgba(16,35,43,.3))}
.mp-eu span{display:block;width:22px;height:22px;border-radius:50%;background:#1A73E8;border:3px solid #fff;box-shadow:0 0 0 6px rgba(26,115,232,.22),0 1px 4px rgba(0,0,0,.35)}
.mp-pop{display:flex;flex-direction:column;gap:4px;font:14px/1.4 var(--body,inherit);color:#10232B;min-width:180px}
.mp-pop b{font-size:15px}
.mp-pop .muted{color:#4F636B}
.mp-pop-acoes{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap}
.mp-pop-acoes a{font-weight:700;color:#0E4A5A}
.leaflet-container{font-family:var(--body,inherit)}
.leaflet-container a.leaflet-popup-close-button{width:28px;height:28px;font-size:20px}

@media (prefers-reduced-motion:reduce){.dg-in{animation:none}.cc-barra span{transition:none}}