/* ARCA · Rede Comunitária de Enchentes — design system
   Produto de Defesa Civil: sóbrio, flat, legível na chuva, com pressa, uma mão, conexão ruim.
   Base única — as telas (index / admin / abrigo) herdam daqui. */
:root {
  /* superfícies */
  --bg: #0b1220;
  --bg-soft: #0e1826;
  --card: #121b29;
  --card-2: #182436;
  --card-hi: #1e2c42;          /* hover: card clareado ~5% */
  --line: rgba(148,170,197,.14);
  --line-2: rgba(148,170,197,.24);
  /* texto */
  --txt: #e8eef6;
  --txt-dim: #9db2c9;          /* >= 4.5:1 sobre --card */
  /* marca + semânticos */
  --brand: #2f81f7;
  --brand-d: #1f5fd0;
  --brand-hi: #418cff;
  --danger: #e5484d;
  --danger-d: #b7343a;
  --crit: #dc2626;
  --warn: #f5a524;
  --safe: #30a46c;
  --safe-d: #24824f;
  --info: #38bdf8;
  --purple: #8e6ee6;
  /* raios */
  --radius: 14px;
  --radius-btn: 11px;
  --radius-chip: 999px;
  /* elevação — sombra sutil, sem glow */
  --shadow: 0 1px 2px rgba(0,0,0,.30);
  --shadow-2: 0 4px 14px rgba(0,0,0,.32);
  --tap: 46px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--txt); overscroll-behavior-y: none; }
body { padding-bottom: 84px; -webkit-font-smoothing: antialiased; }
a { color: var(--brand-hi); text-decoration: none; }
h1,h2,h3 { margin: 0 0 8px; line-height: 1.18; font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
.muted { color: var(--txt-dim); }
.small { font-size: 13px; }
.hidden { display: none !important; }
svg { flex: none; }

/* ícones inline (window.icon) alinham com o texto */
.ic { display: inline-flex; vertical-align: -0.16em; }
.ttl-ic { color: var(--txt-dim); margin-right: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Crédito Data-Robotics (pedido da Selma/prefeitura) ---------- */
.credit-footer {
  margin: 18px 14px 10px; padding: 12px 14px; text-align: center;
  font-size: 12px; line-height: 1.55; color: var(--txt-dim);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.credit-footer b { color: var(--txt); }
.credit-footer a { font-weight: 600; white-space: nowrap; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.01em; min-width: 0; flex-shrink: 1; }
.logo .mark { width: 30px; height: 30px; flex-shrink: 0; }
.logo small { display:block; font-weight: 500; font-size: 10.5px; color: var(--txt-dim); letter-spacing: 0; }
/* co-marca oficial: brasão da Prefeitura + logo da SMICT — nunca encolhem */
.crests { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brasao-badge { width:32px; height:32px; border-radius:50%; background:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 5px rgba(0,0,0,.35); }
.brasao-badge img { height:22px; width:auto; }
.smict-badge { height:26px; width:auto; border-radius:6px; box-shadow:0 1px 5px rgba(0,0,0,.35); flex-shrink:0; }
.topbar .spacer { flex: 1; }
#cidBtn, .topbar .pill { flex-shrink: 0; }
.pill { font-size: 12px; padding: 5px 10px; border-radius: var(--radius-chip); background: var(--card-2); border:1px solid var(--line); color: var(--txt-dim); }
.pill.live::before { content:""; display:inline-block; width:7px;height:7px;border-radius:50%;background:var(--safe);margin-right:6px;vertical-align:middle;animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- Alert banner ---------- */
#alertBanner { display: flex; flex-direction: column; }
.alert-item { padding: 12px 14px; border-left: 4px solid var(--warn); background: #171a12; }
.alert-item.info { border-color: var(--info); background:#101a22; }
.alert-item.atencao { border-color: var(--warn); background:#1a1710; }
.alert-item.perigo { border-color: var(--danger); background:#1e1315; }
.alert-item.critico { border-color: var(--crit); background:#221214; }
.alert-item .t { font-weight: 700; font-size: 15px; display:flex; align-items:center; gap:8px; letter-spacing:-0.01em; }
.alert-item .m { font-size: 13.5px; color: #dfe7ef; margin-top: 3px; }
.alert-item .b { font-size: 11.5px; color: var(--txt-dim); margin-top: 5px; }
/* badge textual do nível (sem sirene) */
.lvl { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; color:#fff; }
.lvl.info { background: var(--info); color:#04202b; }
.lvl.atencao { background: var(--warn); color:#241a00; }
.lvl.perigo { background: var(--danger); }
.lvl.critico { background: var(--crit); }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 12px 14px 4px; }
.kpi { background: var(--card); border:1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align:center; }
.kpi .n { font-size: 19px; font-weight: 700; line-height:1; letter-spacing:-0.02em; }
.kpi .l { font-size: 10.5px; color: var(--txt-dim); margin-top: 5px; }
.kpi.warn .n { color: var(--warn); } .kpi.crit .n { color: var(--danger); } .kpi.safe .n { color: var(--safe); }

/* ---------- Map ---------- */
#map { width: 100%; height: 46vh; min-height: 300px; background:#0b1420; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.map-legend { display:flex; flex-wrap:wrap; gap:7px 14px; padding:9px 14px; font-size:11.5px; color:var(--txt-dim); }
.map-legend span { display:inline-flex; align-items:center; gap:6px; }
.dot { width:11px;height:11px;border-radius:50%; display:inline-block; }
.ring { width:12px;height:12px;border-radius:50%; display:inline-block; box-sizing:border-box; }

/* ---------- Section / cards ---------- */
.section { padding: 14px; }
.section h2 { display:flex; align-items:center; gap:8px; }
.card { background: var(--card); border:1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow); }
.card.tight { padding: 11px 12px; }
.card h3 { display:flex; align-items:center; gap:7px; }
.row { display:flex; align-items:center; gap:10px; }
.row.between { justify-content: space-between; }
.tag { font-size: 11px; font-weight:600; padding: 3px 8px; border-radius: var(--radius-chip); background: var(--card-2); border:1px solid var(--line); color: var(--txt-dim); }
.tag.safe{color:#052e16;background:var(--safe);border-color:transparent} .tag.warn{color:#241a00;background:var(--warn);border-color:transparent}
.tag.danger{color:#fff;background:var(--danger);border-color:transparent} .tag.crit{color:#fff;background:var(--crit);border-color:transparent}
.tag.info{color:#04202b;background:var(--info);border-color:transparent}

/* capacity bar */
.cap { margin-top: 9px; }
.cap .bar { position:relative; height: 10px; border-radius: var(--radius-chip); background: #0a1522; overflow: hidden; border:1px solid var(--line); }
.cap .fill { height: 100%; background: var(--safe); width: 0%; transition: width .4s; }
.cap .fill.high { background: var(--warn); }
.cap .fill.full { background: var(--crit); }
.cap .pct-in { position:absolute; top:50%; left:8px; transform:translateY(-50%); font-size:9px; font-weight:700; color:#04121f; letter-spacing:.02em; }
.cap .lbl { display:flex; justify-content: space-between; font-size: 12px; margin-top: 5px; color: var(--txt-dim); }
.chips { display:flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip { font-size: 11px; padding: 4px 9px; border-radius: 8px; background: var(--card-2); border:1px solid var(--line); color: var(--txt-dim); }
.chip.on { color: var(--txt); border-color: var(--line-2); }

/* risk list */
.risk-row { display:flex; align-items:center; gap:10px; padding: 9px 0; border-bottom:1px solid var(--line); }
.risk-row:last-child{border-bottom:none}
.risk-badge { min-width:54px; text-align:center; font-weight:700; font-size:13px; padding:6px 4px; border-radius:9px; letter-spacing:-0.01em; }
.rb-baixo{background:#0e2c1e;color:#7ee7ad} .rb-moderado{background:#2e2a10;color:#f5d97a}
.rb-alto{background:#301e10;color:#f7b17a} .rb-critico{background:#2e1214;color:#ff9c9c}
/* barra de prioridade (ranking) atrás do índice */
.prio-wrap { position:relative; flex:1; }
.prio-bar { position:absolute; left:0; bottom:-3px; height:3px; border-radius:2px; background:var(--brand); opacity:.55; }

/* ---------- Big action buttons ---------- */
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 14px 2px; }
.action { display:flex; align-items:center; gap:12px;
  min-height: 72px; border-radius: var(--radius); border:1px solid var(--line); background: var(--card);
  color: var(--txt); font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 12px 14px; text-align:left;
  transition: background .12s, transform .12s; }
.action:hover { background: var(--card-hi); }
.action:active { transform: scale(.985); }
.action:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--brand); }
/* disco de ícone à esquerda */
.action .disc { width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  color:#fff; flex:none; }
.action .disc svg { width:22px; height:22px; }
.action.help .disc { background: var(--brand-d); }
.action.report .disc { background: #a56511; }
.action.offer .disc { background: var(--safe-d); }
.action.need .disc { background: #6d54c0; }
.action.volunteer .disc { background: #0f766e; }
.action.road .disc { background: #b45309; }
/* SOS: única exceção com gradiente vermelho discreto, grande e dominante */
.action.sos { grid-column: 1 / -1; background: linear-gradient(180deg,#e5484d,#b7343a); border-color:#e5484d;
  font-size:18px; font-weight:700; min-height:66px; color:#fff; letter-spacing:.01em; box-shadow: var(--shadow-2); }
.action.sos:hover { background: linear-gradient(180deg,#eb5a5f,#c23a40); }
.action.sos .disc { background: rgba(255,255,255,.18); }
.action.sos .disc svg { width:26px; height:26px; }

/* WhatsApp opt-in bar */
.wa-bar { display:flex; align-items:center; gap:11px; width:calc(100% - 28px); margin:10px 14px 0;
  padding:13px 14px; border-radius: var(--radius); border:1px solid var(--line); cursor:pointer;
  background: var(--card); color:var(--txt); font-size:13.5px; text-align:left; transition: background .12s; }
.wa-bar:hover { background: var(--card-hi); }
.wa-bar:focus-visible { outline:none; box-shadow: 0 0 0 2px var(--brand); }
.wa-bar .wa-dot { width:11px; height:11px; border-radius:50%; background:var(--safe); flex:none; }
.wa-bar .arw { margin-left:auto; color:var(--txt-dim); display:inline-flex; }
.wa-bar.done { border-color: var(--safe); }

/* selo de tipo de abrigo */
.selo { font-size:10.5px; font-weight:600; padding:2px 8px; border-radius: var(--radius-chip); border:1px solid var(--line); }
.selo.oficial { background:#0f2740; color:#9cccff; border-color:transparent; }
.selo.voluntario { background:#123f39; color:#7fe6d5; border-color:transparent; }
/* botões waze */
.waze-row { display:flex; gap:8px; margin-top:9px; flex-wrap:wrap; }
.acaminho { background: transparent; border:1px solid var(--warn); color:#ffd9a3; }
.acaminho:hover { background: rgba(245,165,36,.10); }

/* ---------- Bottom nav ---------- */
.bottomnav { position: fixed; bottom:0; left:0; right:0; z-index: 950; display:flex;
  background: rgba(11,18,32,.92); backdrop-filter: blur(8px); border-top:1px solid var(--line); }
.bottomnav button { flex:1; background:none; border:none; color: var(--txt-dim); padding: 9px 4px 10px;
  font-size: 10.5px; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
.bottomnav button .ico { display:inline-flex; }
.bottomnav button .ico svg { width:20px; height:20px; }
.bottomnav button.active { color: var(--brand-hi); }

/* ---------- Modal / forms ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(4,10,18,.72); display:flex; align-items:flex-end; justify-content:center; }
.modal .sheet { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--bg-soft);
  border-top-left-radius: 20px; border-top-right-radius: 20px; border:1px solid var(--line); padding: 18px 16px 30px; animation: slideup .22s; }
@keyframes slideup { from{transform: translateY(40px); opacity:.6} to{transform:none;opacity:1} }
.sheet h2 { font-size: 18px; font-weight:700; display:flex; align-items:center; gap:8px; }
.sheet .close { float:right; background:var(--card-2); border:1px solid var(--line); color:var(--txt); width:36px;height:36px;border-radius:50%; font-size:18px; cursor:pointer; line-height:1; }
.sheet .close:hover { background: var(--card-hi); }
label { display:block; font-size: 12px; color: var(--txt-dim); margin: 13px 0 6px; font-weight:600; letter-spacing:.01em; }
input, select, textarea { width:100%; background: var(--card); border:1px solid var(--line); color: var(--txt);
  border-radius: var(--radius-btn); padding: 13px; font-size: 16px; outline: none; transition: border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(47,129,247,.25); }
textarea { min-height: 84px; resize: vertical; }
.optgrid { display:grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.opt { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius: var(--radius-btn); padding: 12px; cursor:pointer; font-size:14px; transition: background .12s, border-color .12s; }
.opt:hover { background: var(--card-hi); }
.opt.sel { border-color: var(--brand); background: var(--card-2); }
.opt .e { font-size: 20px; }
.checks { display:flex; flex-wrap:wrap; gap:8px; }
.check { display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13.5px; cursor:pointer; transition: background .12s, border-color .12s; }
.check:hover { background: var(--card-hi); }
.check.sel { border-color: var(--safe); background: var(--card-2); }
.check input { width:auto; }

/* botões — flat, hover clareia, focus ring, active leve */
.btn { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height: var(--tap);
  border:1px solid transparent; border-radius: var(--radius-btn); font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 16px; color:#fff;
  transition: background .12s, transform .12s, box-shadow .12s; letter-spacing:.01em; }
.btn svg { width:18px; height:18px; }
.btn:active { transform: scale(.985); }
.btn:focus-visible { outline:none; box-shadow: 0 0 0 2px var(--brand); }
.btn.primary { background: var(--brand-d); } .btn.primary:hover { background: var(--brand); }
.btn.danger { background: var(--danger-d); } .btn.danger:hover { background: var(--danger); }
.btn.safe { background: var(--safe-d); } .btn.safe:hover { background: var(--safe); }
.btn.warn { background:#a56511; color:#fff; } .btn.warn:hover { background:#c07a17; }
.btn.ghost { background: var(--card); border-color: var(--line); color: var(--txt); font-weight:600; }
.btn.ghost:hover { background: var(--card-hi); }
.btn[disabled] { opacity:.6; cursor:default; }
.hint { font-size: 12px; color: var(--txt-dim); margin-top: 6px; line-height:1.5; }
.geo-status { font-size: 12.5px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--card); border:1px solid var(--line); }
.geo-status.ok { border-color: var(--safe); color: #a7f3c8; }
.photo-prev { margin-top: 10px; width:100%; border-radius:12px; border:1px solid var(--line); }

/* chips de bairro (multi-select — disparo + alerta) */
.bairro-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.bchip { font-size:13px; font-weight:600; padding:8px 13px; border-radius: var(--radius-chip);
  background: var(--card); border:1px solid var(--line); color: var(--txt-dim); cursor:pointer;
  transition: background .12s, border-color .12s, color .12s; }
.bchip:hover { background: var(--card-hi); }
.bchip:focus-visible { outline:none; box-shadow: 0 0 0 2px var(--brand); }
.bchip.on { background: var(--brand-d); border-color: var(--brand); color:#fff; }
.wa-count { font-size:12.5px; color: var(--txt-dim); margin-top:8px; }
.wa-count b { color: var(--txt); }

/* toast */
#toast { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 1100;
  background: var(--card-2); border:1px solid var(--line-2); color:var(--txt); padding: 12px 18px; border-radius: 12px;
  font-size: 14px; box-shadow: var(--shadow-2); opacity:0; transition: opacity .22s, transform .22s; pointer-events:none; max-width:88vw; text-align:center; }
#toast.show { opacity:1; transform: translateX(-50%) translateY(-4px); }
#toast::before { content:""; display:inline-block; width:8px;height:8px;border-radius:50%;background:var(--safe);margin-right:8px;vertical-align:middle; }
#toast.err { border-color: var(--danger); }
#toast.err::before { background: var(--danger); }

/* emergency contacts */
.contacts { display:grid; grid-template-columns: repeat(3,1fr); gap:8px; }
.contacts a { display:flex; flex-direction:column; align-items:center; gap:4px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 6px; color:var(--txt); transition: background .12s; }
.contacts a:hover { background: var(--card-hi); }
.contacts a .n { font-weight:700; font-size:17px; color: var(--danger); letter-spacing:-0.01em; }
.contacts a .n svg { width:20px; height:20px; }
.contacts a .l { font-size:11px; color:var(--txt-dim); }

.leaflet-popup-content { font-size: 13px; line-height:1.45; }
.leaflet-popup-content b { font-size: 14px; }
.footer-note { text-align:center; font-size: 11px; color: var(--txt-dim); padding: 6px 16px 20px; line-height:1.6; }

/* co-marca no topo — sempre visível; compacta no mobile pra caber sem espremer */
@media (max-width: 560px) {
  .topbar { gap: 7px; padding: 10px 11px; }
  .logo small { font-size: 9px; line-height: 1.12; }
  .logo .mark { width: 26px; height: 26px; }
  .crests { gap: 6px; }
  .brasao-badge { width: 27px; height: 27px; }
  .brasao-badge img { height: 18px; }
  .smict-badge { height: 22px; }
}