/* ============================================================================
   FireWatch PT — styles.css — v2.4 (2025-11-13)
   - Base v2.3 atualizada: otimizações de performance, acessibilidade e novos
     seletores compatíveis com main.js v2.5.2
   ============================================================================ */

/* ---------------------------- Variáveis base ------------------------------- */
:root{
  --vh: 1vh;

  /* Alturas base (ajustadas por media queries) */
  --map-h: calc(var(--vh) * 55);
  --list-h: calc(var(--vh) * 60);

  /* Header sticky */
  --header-height: 64px;

  /* Safe-area (iOS/Android com notch) */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);

  /* Cores/UI */
  --glass: rgba(15,23,42,.8);
  --glass-light: rgba(15,23,42,.6);
  --border: rgba(148,163,184,.15);

  /* Tipografia fluida base */
  --fs-11: clamp(10px, 1.6vw, 11px);
  --fs-12: clamp(10px, 1.7vw, 12px);
  --fs-13: clamp(11px, 1.8vw, 13px);
  --fs-14: clamp(12px, 1.9vw, 14px);
  --fs-16: clamp(13px, 2.1vw, 16px);
  --fs-18: clamp(14px, 2.4vw, 18px);
  --fs-20: clamp(16px, 2.8vw, 20px);

  /* Sombras */
  --shadow-1xl: 0 20px 35px rgba(2,6,23,.45), 0 2px 6px rgba(2,6,23,.25);
  --shadow-2xl: 0 28px 50px rgba(2,6,23,.55), 0 4px 12px rgba(2,6,23,.28);

  /* Acentos */
  --accent: #f59e0b;
  --accent-2: #fbbf24;

  /* Larguras máximas */
  --container-max: 1400px;

  /* Performance tuning */
  --fw-blur: 10px; /* controlar blur global (usar valores baixos em mobile) */
}

/* Desktop: header maior */
@media (min-width:640px){
  :root{ --header-height:72px; }
}

/* ------------------------------- Resets ----------------------------------- */
* { box-sizing: border-box; min-width: 0; }
html, body { height: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
img { max-width: 100%; height: auto; display:block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; }

/* Tipografia + background global
   - fallback sem imagem para perf. móvel; evita heavy painting em small devices */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #f8fafc;
  overflow-x: hidden;
  background-color: #0f172a;
  background-image:
    linear-gradient(rgba(15,23,42,.88),rgba(15,23,42,.92));
  background-size: cover;
  background-position: center;
  text-wrap: balance;
}

/* heavy image only for larger screens to avoid jank on old mobiles */
@media (min-width:900px){
  body{
    background-image:
      linear-gradient(rgba(15,23,42,.88),rgba(15,23,42,.92)),
      url('https://images.unsplash.com/photo-1509610696553-9243b9e23dbf?q=80&w=1980&auto=format&fit=crop'),
      radial-gradient(ellipse 120% 80% at 50% -20%, rgba(220,38,38,.12), rgba(0,0,0,0)),
      linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
    background-attachment: fixed, fixed, fixed, fixed;
    background-size: cover, cover, cover, cover;
  }
}

/* Evita jank do background em mobiles antigos */
@media (max-width: 540px){
  body { background-attachment: scroll; background-image: linear-gradient(rgba(15,23,42,.88),rgba(15,23,42,.92)); }
}

/* -------------------------- Utilitários e helpers ------------------------- */
.container{ width:100%; max-width: var(--container-max); margin-inline:auto; padding-inline: clamp(12px, 3vw, 24px); }

.custom-scrollbar{ scrollbar-width: thin; scrollbar-color: rgba(71,85,105,.8) transparent; }
.custom-scrollbar::-webkit-scrollbar{ width:6px; height:6px; }
.custom-scrollbar::-webkit-scrollbar-thumb{ background:rgba(71,85,105,.8); border-radius:3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover{ background:rgba(71,85,105,1); }

.glass{ backdrop-filter: blur(var(--fw-blur)); background: var(--glass); border: 1px solid rgba(148,163,184,.1); }
.glass-light{ backdrop-filter: blur(calc(var(--fw-blur) * .8)); background: var(--glass-light); }

.shadow-1xl { box-shadow: var(--shadow-1xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* Botões base */
.btn-primary {
  background: linear-gradient(135deg,#ef4444,#dc2626);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .06s ease, filter .2s ease, background .2s ease;
  border-radius: .75rem;
  padding: .5rem .75rem;
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

.btn-secondary {
  background: rgba(30,41,59,.6);
  border: 1px solid rgba(148,163,184,.25);
  color: #e5e7eb;
  border-radius: .75rem;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
  padding: .45rem .7rem;
}
.btn-secondary:hover { background: rgba(30,41,59,.7); }
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary[disabled]{ opacity:.55; cursor:not-allowed; }

.focus-ring:focus { outline: 2px solid rgba(255,255,255,.18); outline-offset: 2px; }

/* Tamanho tátil mínimo */
.touch-44 { min-width: 44px; min-height: 44px; padding: .5rem .6rem; display: inline-flex; align-items: center; justify-content: center; }

/* Chips (Chat IA) */
.fw-chip{
  background: rgba(253,230,138,.12);
  border: 1px solid rgba(253,230,138,.35);
  color: #fde68a;
  border-radius: .75rem;
  padding: .35rem .6rem;
  font-size: var(--fs-12);
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.fw-chip:hover{ background: rgba(253,230,138,.18); }
.fw-chip:active{ transform: translateY(1px); }

/* Toast genérico (ex.: “Ligação copiada”) */
.toast{
  background: rgba(2,6,23,.9);
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.25);
  border-radius:.75rem;
  padding:.5rem .75rem;
  font-size: var(--fs-12);
}

/* Skeletons */
.skeleton {
  background: linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.12),rgba(255,255,255,.06));
  background-size: 200% 100%;
  animation: sk 1.2s linear infinite;
  border-radius: .75rem;
}
@keyframes sk { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* Badges / Cards */
.card {
  background: rgba(15,23,42,.75);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.1rem .5rem; border-radius:999px; border:1px solid rgba(255,255,255,.12); font-size: var(--fs-12); }
.badge.green{ color:#34d399; background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.25);}
.badge.amber{ color:#f59e0b; background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.25);}
.badge.red{ color:#f87171; background:rgba(248,113,113,.12); border-color:rgba(248,113,113,.25);}

/* --------------------------- Mapa e Lista (core) -------------------------- */
.h-screen-safe{ height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)); }

.h-map{ height: var(--map-h); min-height: 180px; }
.h-list{ max-height: var(--list-h); overflow: auto; }

/* Responsivo de altura (largura) */
@media (min-width: 360px){ :root{ --map-h: calc(var(--vh) * 56); --list-h: calc(var(--vh) * 61); } }
@media (min-width: 400px){ :root{ --map-h: calc(var(--vh) * 57); --list-h: calc(var(--vh) * 62); } }
@media (min-width: 600px){ :root{ --map-h: calc(var(--vh) * 58); --list-h: calc(var(--vh) * 63); } }
@media (min-width: 768px){ :root{ --map-h: calc(var(--vh) * 60); --list-h: calc(var(--vh) * 64); } }
@media (min-width:1024px){ :root{ --map-h: min(68vh, 720px); --list-h: min(70vh, 740px); } }
@media (min-width:1280px){ :root{ --map-h: min(70vh, 760px); --list-h: min(72vh, 780px); } }
@media (min-width:1440px){ :root{ --map-h: min(72vh, 820px); --list-h: min(74vh, 840px); } }
@media (min-width:1920px){ :root{ --map-h: min(74vh, 900px); --list-h: min(76vh, 920px); } }
@media (min-width:2560px){ :root{ --map-h: min(76vh, 980px); --list-h: min(78vh,1000px); } }

/* Landscape smartphones / tablets baixos */
@media (orientation: landscape) and (max-height: 480px){
  :root{ --map-h: calc(var(--vh) * 80); --list-h: calc(var(--vh) * 84); }
  .leaflet-control-zoom a { min-width: 40px; min-height: 40px; }
}

/* Alturas muito baixas (ex. 12-13cm) */
@media (max-height: 600px){
  :root{ --map-h: calc(var(--vh) * 68); --list-h: calc(var(--vh) * 70); }
  body { font-size: var(--fs-13); }
}

/* Ultrawide: limita largura do conteúdo para legibilidade */
@media (min-aspect-ratio: 21/9){
  .container, main, header, footer { max-width: var(--container-max); margin-inline:auto; }
}

/* Controles/Legenda (safe-area) */
.map-controls{ position:absolute; top:1rem; right:1rem; z-index:1000; display:flex; flex-direction:column; gap:.5rem; }
.map-legend{ position:absolute; bottom: calc(1rem + var(--safe-area-inset-bottom)); left:1rem; z-index:1000; }

/* Header sticky (compat) */
header[style*="--header-height"] { height: var(--header-height); }

/* ------------------------------ Leaflet tweaks ---------------------------- */
.leaflet-container{ background:#0f172a!important; font-family:'Inter',sans-serif!important; will-change: transform; }
.leaflet-popup-content-wrapper{
  background:rgba(15,23,42,.95)!important; color:#f8fafc!important;
  border:1px solid rgba(148,163,184,.2)!important; border-radius:8px!important; backdrop-filter: blur(calc(var(--fw-blur) * .8))!important;
}
.leaflet-popup-tip{ background:rgba(15,23,42,.95)!important; border:1px solid rgba(148,163,184,.2)!important; }

.leaflet-control-container .leaflet-top .leaflet-control,
.leaflet-control-container .leaflet-bottom .leaflet-control {
  background: rgba(15,23,42,.8) !important;
  border: 1px solid rgba(148,163,184,.25) !important;
  color: #e5e7eb !important;
  backdrop-filter: blur(6px);
}
.leaflet-container a { color:#93c5fd; }

/* small screens: enlarge hit target */
@media (max-width:480px){
  .marker-cluster-small, .marker-cluster-medium, .marker-cluster-large{ transform: scale(1.08); }
  .leaflet-control-zoom a { min-width: 44px; min-height: 44px; } /* hit-area */
}

/* --------------------------- Marker styles (OTIMIZADOS) ------------------- */
/* Minimizar HTML por marker; usar classes controladas pelo JS */
.fw-icon { display:inline-block; line-height:0; }
.fw-marker{
  position:relative; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:#0f172a; box-shadow:0 0 0 2px #fff;
  transform-origin:center;
}
.fw-marker .fw-emoji{ font-size:16px; line-height:1; display:block; }
.fw-marker .fw-badge{
  position:absolute; right:-6px; top:-6px; min-width:18px; height:18px; padding:0 4px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#0f172a; background:#e2e8f0;
  border:1px solid #94a3b8; border-radius:999px;
}
.fw-icon .fw-halo{ /* halo gerido aqui como pseudo-bg leve, evita pseudo-elementos caros */
  position:absolute; inset:-6px; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 6px var(--halo, rgba(34,197,94,.28));
  opacity:.95;
}
/* classes de risco definem --halo */
.fw-risk-low  { --halo: rgba(34,197,94,.28); }
.fw-risk-med  { --halo: rgba(245,158,11,.3); }
.fw-risk-high { --halo: rgba(249,115,22,.34); }
.fw-risk-crit { --halo: rgba(239,68,68,.38); }

.leaflet-marker-icon.fw-icon { cursor: pointer; transform-origin:center center; }

/* Nearby (recursos) marker */
.fw-nearby .fw-nearby-marker{
  display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  font-size:14px; line-height:1; box-shadow: 0 1px 4px rgba(0,0,0,.25);
  border:1px solid rgba(148,163,184,.18);
}

/* ----------------------------- Modais & Alertas --------------------------- */
.emergency-overlay{
  background: radial-gradient(circle at center, rgba(185,28,28,.97) 0%, rgba(127,29,29,.985) 100%);
  backdrop-filter: blur(calc(var(--fw-blur) * .9));
}

/* Variante full-screen do alerta (só conteúdo crítico) */
#proximityAlert.emergency-full .panel{
  max-width: 720px;
  width: 100%;
  border: 2px solid rgba(254,226,226,.65);
  background: rgba(127,29,29,.9);
  box-shadow: 0 30px 60px rgba(0,0,0,.5);
}
#proximityAlert.emergency-full .title{
  font-size: clamp(22px,3.6vw,30px);
  color: #fee2e2;
  font-weight: 900;
  letter-spacing: .2px;
}
#proximityAlert.emergency-full .subtitle{
  color: #fecaca;
  font-size: var(--fs-14);
}
#proximityAlert .evac-steps{
  background: rgba(239,68,68,.10);
  border: 1px dashed rgba(254,226,226,.45);
  border-radius: .9rem;
  padding: .75rem .9rem;
  color: #fee2e2;
}
#proximityAlert{
  background: radial-gradient(circle at top, rgba(248,113,113,.24) 0%, rgba(69,10,10,.92) 55%, rgba(15,4,4,.97) 100%);
  backdrop-filter: blur(10px);
}
#proximityAlert .em-alert-card{
  background: linear-gradient(135deg, rgba(127,29,29,.95), rgba(67,7,7,.95));
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  color: #fee2e2;
}
#proximityAlert .em-alert-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1.25rem;
}
#proximityAlert .em-alert-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .85rem;
  border-radius: 999px;
  background: rgba(248,113,113,.12);
  border:1px solid rgba(254,226,226,.4);
  color:#fecaca;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.25px;
}
#proximityAlert .em-alert-header h4{
  font-size:1.25rem;
  font-weight:800;
  margin:.35rem 0;
}
#proximityAlert .em-alert-location{ color:#ffe4e6; font-weight:600; }
#proximityAlert .em-alert-distance{ color:#fecaca; font-size:.9rem; }
#proximityAlert .em-alert-risk{
  min-width:120px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(248,113,113,.35);
  border-radius:1rem;
  padding:1rem;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
#proximityAlert .em-alert-risk span{ font-size:.8rem; text-transform:uppercase; letter-spacing:.15em; color:#fecaca; }
#proximityAlert .em-alert-risk strong{ font-size:2rem; color:#fff; }
#proximityAlert .em-alert-body{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  margin-top:1.5rem;
}
#proximityAlert .em-precautions,
#proximityAlert .em-routes{
  background: rgba(0,0,0,.15);
  border:1px solid rgba(248,113,113,.2);
  border-radius:1.25rem;
  padding:1.1rem;
}
#proximityAlert .em-precautions h5,
#proximityAlert .em-routes h5{
  font-size:.95rem;
  font-weight:700;
  margin-bottom:.75rem;
  color:#fff5f5;
}
#proximityAlert .em-precautions ul{
  list-style:disc;
  padding-left:1rem;
  color:#ffe4e6;
  display:grid;
  gap:.45rem;
  font-size:.9rem;
}
#proximityAlert .em-routes p{ color:#fecaca; font-size:.9rem; margin-bottom:.9rem; }
#proximityAlert .em-route-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
#proximityAlert .route-btn{
  background: rgba(239,68,68,.15);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: .9rem;
  padding: .75rem 1rem;
  transition: filter .2s ease, transform .06s ease;
}
#proximityAlert .route-btn--maps{ background: rgba(251,191,36,.15); border-color:rgba(251,191,36,.6); color:#fffbeb; }
#proximityAlert .route-btn--cta{ background:#fde047; color:#1c1917; border-color:#fef08a; }
#proximityAlert .route-btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fef2f2; }
#proximityAlert .route-btn:hover{ filter: brightness(1.05); }
#proximityAlert .route-btn:active{ transform: translateY(1px); }

/* Notif badge/notifications UI */
#notifBadge{
  min-width:18px; height:18px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center;
  background:#ef4444; color:#fff; border-radius:999px; font-size:12px; font-weight:700;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}

/* Nearby legend (dinâmico) */
#nearbyLegend{
  pointer-events:auto;
  transition: transform .18s ease, opacity .18s ease;
}

/* ----------------------------- Map markers helpers ------------------------ */
/* evita repaint no hover */
.leaflet-marker-icon.fw-icon img, .leaflet-marker-icon.fw-icon svg { display:block; }

/* ----------------------------- Modais dinâmicos --------------------------- */
#historyModal canvas{ display:block; width:100%; height:120px; }

/* ----------------------------- Renderer / Cards -------------------------- */
.renderer-placeholder{ min-height: 48px; }

.list-container { overflow: auto; }
#cards > article{ padding: 1rem; }

.card .kpis{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.75rem;
}
@media (min-width:480px){
  .card .kpis{ gap: .9rem; }
}
@media (min-width:768px){
  .card .kpis{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width:1280px){
  .card .kpis{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* Barra de risco */
.card .riskbar{
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.08);
  overflow: hidden; margin: .5rem 0 .75rem;
}
.card .riskbar > span{
  display:block; height:100%;
  background: linear-gradient(90deg,#22c55e,#f59e0b,#ef4444);
}

/* Ações */
.card .actions{ display:flex; flex-wrap:wrap; gap:.5rem; }
.card .actions > button, .card .actions > a{
  min-height: 44px; padding: .5rem .9rem;
  border-radius: .75rem; font-weight: 600; font-size: var(--fs-13);
}

/* pequenos componentes usados pelo JS */
.btn-history { text-decoration: underline; background: transparent; border: none; color: #f8fafc; cursor: pointer; padding: 0; }
.btn-details, .btn-center, .btn-perimeter, .btn-evac { min-width: 84px; }

/* --------------------------- Utilitário de animação ----------------------- */
.animate-in{ animation: fadeInUp .24s ease-out both; }
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}

/* --------------------------- Ajustes muito pequenos ----------------------- */
@media (max-width: 360px){
  .map-controls{ right: .5rem; }
  .map-legend{ left: .5rem; }
  body { font-size: var(--fs-12); }
}

/* ---------------------- Viewport dinâmica (svh/dvh) ----------------------- */
@supports (height: 1svh) {
  :root{ --map-h: 78svh; --list-h: 72svh; }
}
@supports (height: 1dvh) and (not (height: 1svh)) {
  :root{ --map-h: 78dvh; --list-h: 72dvh; }
}
@supports (-webkit-touch-callout: none) {
  .h-map { height: -webkit-fill-available; }
}

/* ===== Loading Global ===== */
.loader-ring {
  border: 3px solid rgba(255,255,255,.12);
  border-right-color: transparent;
  border-top-color: transparent;
  border-radius: 50%;
  width: 36px; height: 36px;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

body[data-loading="true"] main,
body[data-loading="true"] #firesList,
body[data-loading="true"] #mapWrap,
body[data-loading="true"] #filtersSection { visibility: hidden; }

body:not([data-loading="true"]) main,
body:not([data-loading="true"]) #firesList,
body:not([data-loading="true"]) #mapWrap,
body:not([data-loading="true"]) #filtersSection {
  visibility: visible;
  animation: fwFadeIn .24s ease-out both;
}
@keyframes fwFadeIn { from { opacity:0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }

#pageLoader.error .loader-ring { border-color: rgba(248,113,113,.6); border-right-color: transparent; border-top-color: transparent; }
#pageLoader.error [data-msg] { color: #fca5a5; }

/* ----------------------- Modal Buy Me a Coffee ---------------------------- */
#btnOpenCoffee{
  background: var(--accent);
  color: #111827;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .75rem;
  padding: .5rem .75rem;
  font-weight: 700;
  transition: filter .2s ease, transform .06s ease, background .2s ease;
}
#btnOpenCoffee:hover{ background: var(--accent-2); filter: brightness(1.02); }
#btnOpenCoffee:active{ transform: translateY(1px); }

#coffeeModal{ background: rgba(0,0,0,.8); }
#coffeeModal .glass{ background: rgba(15,23,42,.92); border-color: rgba(148,163,184,.18); }
#coffeeModal a[href^="https://buymeacoffee.com"]{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:44px; border-radius:.9rem;
  background: var(--accent); color:#111827; font-weight:800;
  border:1px solid rgba(0,0,0,.2);
  transition: background .2s ease, transform .06s ease, filter .2s ease;
}
#coffeeModal a[href^="https://buymeacoffee.com"]:hover{ background: var(--accent-2); filter: brightness(1.02); }
#coffeeModal a[href^="https://buymeacoffee.com"]:active{ transform: translateY(1px); }
#coffeeModal input[type="text"]{ font-size: var(--fs-14); }

/* ------------------------------- Print ------------------------------------ */
.no-print{ display: block; }
@media print{
  body{ background:#fff; color:#000; }
  header, #filtersSection, .map-controls, .map-legend, footer, .no-print { display:none !important; }
  #mapWrap, #firesList{ box-shadow:none !important; border:1px solid #ddd; }
}

/* ------------------------------- Accessibility ---------------------------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[aria-hidden="true"] :focus{ outline: none; }
:focus-visible { outline: 2px solid rgba(147,197,253,.85); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* prefers-contrast */
@media (prefers-contrast: more){
  .btn-primary, .btn-secondary { border-width: 2px; }
  .card { border-color: rgba(255,255,255,.25); }
}

/* ------------------------------ Tipografia UI ----------------------------- */
h1 { font-size: var(--fs-20); }
h2 { font-size: var(--fs-18); }
h3, .card-title { font-size: var(--fs-16); }
small, .text-xs { font-size: var(--fs-12); }
.text-sm { font-size: var(--fs-13); }
.text-base { font-size: var(--fs-14); }

/* ----------------------------- Secção Filtros ----------------------------- */
#filtersContent{
  transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
  will-change: max-height, opacity, transform;
  border-radius: 12px;
}

/* ===== Slider (input[type=range]) ===== */
.slider{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); outline: none;
}
.slider:focus{ box-shadow: 0 0 0 2px rgba(239,68,68,.25); }

/* WebKit thumb */
.slider::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg,#ef4444,#f59e0b);
  border: 2px solid #0f172a; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
}
.slider:active::-webkit-slider-thumb{ transform: scale(0.98); }

/* Firefox track & thumb */
.slider::-moz-range-track{
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.12);
}
.slider::-moz-range-thumb{
  width: 20px; height: 20px; border: 2px solid #0f172a; border-radius: 50%;
  background: linear-gradient(135deg,#ef4444,#f59e0b);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  cursor: pointer;
}

/* ---------------------------- Lista de Incêndios -------------------------- */
/* compat com renderer que gera <article> */
#cards { display: grid; gap: .6rem; }
@media (min-width:768px){ #cards { grid-template-columns: 1fr 1fr; } }
@media (min-width:1280px){ #cards { grid-template-columns: repeat(3,1fr); } }

.card .kpis{ margin-top:.5rem; }
.card .riskbar{ margin-top:.6rem; }

/* --------------------------- Utilitário de animação ----------------------- */
@keyframes pulse-red { 0%,100%{opacity:.85} 50%{opacity:1} }
.animate-pulse-red{ animation: pulse-red 1.6s ease-in-out infinite; }

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
.shake { animation: shake .6s cubic-bezier(.36,.07,.19,.97) both; }

/* /css/styles.css - v2.4 */
.chat-list ul { list-style: disc; margin-left: 1.1rem; }
.chat-list li { margin: .2rem 0; }
.chat-list b { color: #fbbf24; }
.chat-list span { color: #94a3b8; }
.chat-bubble { border: 1px solid rgba(148,163,184,.25); background: rgba(15,23,42,.7); border-radius: 0.85rem; padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.chat-bubble-bot { border-color: rgba(248,250,252,.08); background: rgba(71,85,105,.25); }
.chat-bubble-user { border-color: rgba(251,191,36,.6); background: rgba(251,191,36,.15); }