/* ==========================================================================
   El Faro — Calidad del agua, Lago de Chapala (preview)
   Same token approach as site-directory/assets/dir.css (lake blues + amber).
   No third-party fonts, no CDN, no cookies. Light + dark via prefers-color-scheme.
   ========================================================================== */

:root {
  --lake-900:#082f3d; --lake-800:#0e4d64; --lake-700:#12657f; --lake-600:#1a7d9a;
  --lake-500:#2e97b5; --lake-100:#dceef3;
  --amber-600:#d9772b; --amber-500:#e8873a; --amber-400:#f2a34e;

  /* semáforo (CONAGUA classes, accessible tones) */
  --sem-verde:#2e7d32; --sem-amarillo:#f9a825; --sem-rojo:#c62828;

  --bg:#f6f8f9; --surface:#ffffff; --surface-2:#f9fbfc;
  --ink:#12242b; --ink-soft:#4a5c64; --ink-faint:#7d8b91;
  --line:#e2e8eb;
  --brand:var(--lake-700); --accent:var(--amber-500);
  --shadow-sm:0 1px 2px rgba(8,47,61,.06),0 1px 3px rgba(8,47,61,.08);
  --shadow-md:0 4px 14px rgba(8,47,61,.10);
  --radius:14px; --radius-sm:10px;
  --maxw:1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a1418; --surface:#12222a; --surface-2:#16282f;
    --ink:#e8f0f2; --ink-soft:#a9bcc2; --ink-faint:#7c9198;
    --line:#213540;
    --brand:var(--lake-500); --accent:var(--amber-400);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 20px rgba(0,0,0,.5);
  }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
a { color:var(--brand); }
button { font-family:inherit; cursor:pointer; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(12px,3vw,24px); width:100%; }

/* ---------- Preview banner ---------- */
.preview-banner {
  background:var(--amber-500); color:#3a2408; text-align:center;
  font-size:.85rem; font-weight:600; padding:6px 12px;
}

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:600; background:var(--lake-800); color:#eaf6fa;
  box-shadow:var(--shadow-sm);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; height:56px; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; color:#eaf6fa; text-decoration:none; }
.brand-mark { color:var(--amber-400); display:flex; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; }
.brand-text b { font-size:1.02rem; }
.brand-text em { font-style:normal; font-size:.72rem; opacity:.8; }

.lang-toggle { display:flex; border:1px solid rgba(234,246,250,.4); border-radius:8px; overflow:hidden; }
.lang-toggle button {
  background:transparent; color:#eaf6fa; border:0; padding:5px 12px;
  font-size:.82rem; font-weight:600; opacity:.7;
}
.lang-toggle button.is-active { background:rgba(234,246,250,.18); opacity:1; }

/* ---------- Hero + CEA strip ---------- */
.hero { background:linear-gradient(180deg,var(--lake-800),var(--lake-700)); color:#eaf6fa; padding:26px 0 20px; }
.hero h1 { margin:0 0 6px; font-size:clamp(1.35rem,3.4vw,1.9rem); }
.hero-sub { margin:0 0 14px; font-size:.95rem; opacity:.88; max-width:60ch; }

.cea-strip {
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  background:rgba(8,47,61,.35); border:1px solid rgba(234,246,250,.18);
  border-radius:var(--radius-sm); padding:10px 14px; font-size:.9rem;
}
.cea-item b { color:#fff; }
.cea-date, .cea-src { opacity:.75; font-size:.8rem; }

/* ---------- Explainer card ---------- */
.card {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:16px 18px;
}
.explainer { margin:18px 0 0; }
.explainer h2 { margin:0 0 8px; font-size:1.05rem; }
.explainer p { margin:0 0 10px; font-size:.92rem; color:var(--ink-soft); }
.sem-list { list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.sem-list li { display:flex; gap:9px; align-items:flex-start; font-size:.92rem; color:var(--ink-soft); }
.sem-list b { color:var(--ink); }
.explainer-note { font-size:.85rem !important; color:var(--ink-faint) !important; margin-bottom:0 !important; }

.dot { width:13px; height:13px; border-radius:50%; flex:none; margin-top:4px; border:2px solid rgba(255,255,255,.75); box-shadow:0 0 0 1px rgba(0,0,0,.25); }
.dot-verde { background:var(--sem-verde); }
.dot-amarillo { background:var(--sem-amarillo); }
.dot-rojo { background:var(--sem-rojo); }

/* ---------- Map ---------- */
main.wrap { padding-top:16px; padding-bottom:8px; }
#map {
  height:min(66vh, 620px); min-height:340px; width:100%;
  border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow-md);
  background:var(--surface-2);
}
.map-note { font-size:.85rem; color:var(--ink-faint); margin:10px 2px 0; }

/* Leaflet legend control */
.agua-legend {
  background:var(--surface); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  padding:8px 12px; font-size:.82rem; line-height:1.7;
}
.agua-legend .dot { display:inline-block; vertical-align:-2px; margin:0 6px 0 0; }
.agua-legend b { display:block; margin-bottom:2px; font-size:.84rem; }

/* Popup */
.leaflet-popup-content { margin:12px 14px; }
.pp { font-size:.85rem; min-width:230px; max-width:290px; }
.pp h3 { margin:0 0 2px; font-size:.95rem; line-height:1.25; }
.pp .pp-meta { color:var(--ink-faint); margin:0 0 8px; font-size:.78rem; }
.pp .sem-badge {
  display:inline-block; color:#fff; font-weight:700; font-size:.75rem;
  border-radius:999px; padding:2px 10px; margin:0 0 8px; letter-spacing:.3px;
}
.sem-badge.VERDE { background:var(--sem-verde); }
.sem-badge.AMARILLO { background:var(--sem-amarillo); color:#3a2c00; }
.sem-badge.ROJO { background:var(--sem-rojo); }
.pp table { border-collapse:collapse; width:100%; margin:2px 0 8px; }
.pp td { padding:2px 6px 2px 0; vertical-align:top; border-top:1px solid var(--line); font-size:.78rem; }
.pp td.q { white-space:nowrap; font-weight:600; }
.q-good { color:#2e7d32; } .q-ok { color:#b28704; } .q-bad { color:#d84315; } .q-vbad { color:#c62828; }
@media (prefers-color-scheme: dark) {
  .q-good { color:#7cc47f; } .q-ok { color:#e6c35c; } .q-bad { color:#ff8a65; } .q-vbad { color:#ef9a9a; }
}
.pp .pp-src { color:var(--ink-faint); font-size:.72rem; margin:0; }

/* Dark-mode surfaces for leaflet chrome */
@media (prefers-color-scheme: dark) {
  .leaflet-popup-content-wrapper, .leaflet-popup-tip { background:var(--surface); color:var(--ink); }
  .leaflet-container { background:#0e1c22; }
  .leaflet-control-zoom a { background:var(--surface); color:var(--ink); border-color:var(--line); }
  .leaflet-control-attribution { background:rgba(18,34,42,.8); color:var(--ink-soft); }
  .leaflet-control-attribution a { color:var(--lake-500); }
}

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); margin-top:22px; padding:18px 0 26px; }
.site-footer p { margin:0 0 6px; font-size:.82rem; color:var(--ink-faint); max-width:75ch; }
.foot-preview { font-weight:600; color:var(--accent) !important; }