/* =========================================================================
   S.O.S. Fuego — capa de identidad visual (se carga DESPUES de style.css)
   Proyecto de ciencias: reporte ciudadano ✕ satélite NASA ✕ riesgo FWI.
   ========================================================================= */
:root{
  --char:#17120e; --char-2:#2a221c; --ash:#f6f1ea; --card:#fff;
  --ember:#e8481f; --ember-deep:#b3300f;
  --sat:#1f6fb8; --sat-soft:#e4eef6;
  --bajo:#3f9142; --medio:#e8912b; --critico:#d81f27; --verif:#2e9e5b;
  --ink:#17120e; --muted:#8a7d72; --line:#e7ddd1;
  --r:16px; --r-lg:22px; --shadow:0 10px 30px rgba(23,18,14,.08);
  --display:'Barlow Condensed',system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
body{background:var(--ash);color:var(--ink)}

/* ---- Header ---------------------------------------------------------- */
.header{background:var(--char)!important;border-bottom:none!important;box-shadow:0 2px 14px rgba(23,18,14,.18)}
.header .topbar>div{color:#fff!important}
.hamburger{background:rgba(255,255,255,.12)!important;box-shadow:none!important;color:#fff}
.app-name{font-family:var(--display);font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:1.15rem}

/* ---- Titulos --------------------------------------------------------- */
.fw-black,h1.h3,.h3.fw-black{font-family:var(--display);font-weight:800;letter-spacing:.01em}
.eyebrow{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:700;color:var(--ember)}
h4{font-family:var(--display);font-weight:700;letter-spacing:.02em}

/* ---- Tarjetas -------------------------------------------------------- */
.cardx{border-radius:var(--r-lg);box-shadow:var(--shadow);border:1px solid var(--line)}

/* ---- Pasos numerados (secuencia real del reporte) ------------------- */
.step-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.step-n{flex:0 0 34px;height:34px;border-radius:50%;background:var(--char);color:#fff;
  font-family:var(--display);font-weight:800;font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.step-h h4{margin:0}
.step-sub{color:var(--muted);font-size:.9rem;margin:-6px 0 14px 46px}

/* ---- Botones --------------------------------------------------------- */
.btn-app,.btn-modern{border-radius:14px}
.btn-primary.btn-app{background:var(--sat);border:none}
.btn-primary.btn-app:hover{background:#1a5f9e}
.btn-ember{background:var(--ember);color:#fff;border:none;font-weight:700}
.btn-ember:hover{background:var(--ember-deep);color:#fff}

/* ---- Emergencia ------------------------------------------------------ */
.btn-danger{background:var(--critico)!important;border:none!important;font-weight:800;letter-spacing:.02em}
.btn-warning{font-weight:800;letter-spacing:.02em}

/* ---- Selector de riesgo --------------------------------------------- */
.risk{border:2px solid var(--line);background:#fff;transition:transform .15s,border-color .15s,box-shadow .15s}
.risk:hover{transform:translateY(-2px)}
.risk.active{transform:translateY(-3px);box-shadow:0 8px 20px rgba(23,18,14,.12)}
.risk>div{font-family:var(--display);letter-spacing:.03em;text-transform:uppercase}
.risk[data-nivel="Bajo"].active{border-color:var(--bajo)}
.risk[data-nivel="Medio"].active{border-color:var(--medio)}
.risk[data-nivel="Crítico"].active{border-color:var(--critico)}

/* ---- Estado de ubicacion -------------------------------------------- */
#estado{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:10px 14px;font-size:.92rem;color:var(--ink)}

/* ---- Panel FWI ------------------------------------------------------- */
.fwi-panel{border:1px solid var(--line)!important}
#fwiBadge{font-family:var(--display);letter-spacing:.05em;text-transform:uppercase}

/* ---- Tira de estado (tiempo real) ----------------------------------- */
.estado-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:720px;margin:0 auto 18px}
.estado-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 12px;text-align:center;box-shadow:var(--shadow)}
.estado-num{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1}
.estado-num.v{color:var(--verif)} .estado-num.c{color:var(--ember)} .estado-num.n{color:var(--sat)}
.estado-lbl{font-size:.78rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em}

/* ---- Leyenda que ENSEÑA el modelo ----------------------------------- */
.legend{border:1px solid var(--line)}
.legend-item{font-size:.86rem}
.dot{width:16px;height:16px;border-radius:50%;display:inline-block;flex:0 0 16px}
.dot.verif{background:#fff;box-shadow:0 0 0 3px var(--verif)}
.dot.ciud{background:var(--ember)}
.dot.nasa{background:var(--sat);opacity:.75}
.dot.fwi{background:rgba(216,31,39,.28)}

/* datos tipo instrumento */
.mono{font-family:var(--mono)}

/* ---- Leaflet: popups y control coherentes --------------------------- */
.leaflet-popup-content{font-family:'Inter',sans-serif;font-size:.86rem;line-height:1.45}
.leaflet-control-layers{border-radius:12px!important;box-shadow:var(--shadow)!important;border:1px solid var(--line)!important;font-size:.85rem}

@media (max-width:560px){
  .estado-strip{grid-template-columns:repeat(3,1fr);gap:8px}
  .estado-num{font-size:1.6rem}
  .estado-lbl{font-size:.66rem}
}