/* ═══════════════════════════════════════════════════════════════════
   PROMOX — Atlas Promox: compendio de geografía mundial (prefijo geo-)
   Orden de carga: styles.css → promox-ui.css → atlas-v2.css
   Mismo sistema de tokens que el resto del sitio y que diccionario-v2.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --g-rios-eu: #2563A8;  --g-rios-eu-bg: rgba(37,99,168,.09);
  --g-rios-na: #0F9E93;  --g-rios-na-bg: rgba(15,158,147,.10);
  --g-rios-ca: #B5790A;  --g-rios-ca-bg: rgba(181,121,10,.10);
  --g-rios-sa: #15803D;  --g-rios-sa-bg: rgba(21,128,61,.09);
  --g-rios-af: #C2410C;  --g-rios-af-bg: rgba(194,65,12,.09);
  --g-rios-as: #7046B0;  --g-rios-as-bg: rgba(112,70,176,.09);
  --g-rios-oc: #0891B2;  --g-rios-oc-bg: rgba(8,145,178,.10);
  --g-cord:    #46536A;  --g-cord-bg:    rgba(70,83,106,.09);
  --g-mares:   #1E3A8A;  --g-mares-bg:   rgba(30,58,138,.09);
  --g-golfos:  #9D174D;  --g-golfos-bg:  rgba(157,23,77,.09);
  --g-arrec:   #DB2777;  --g-arrec-bg:   rgba(219,39,119,.09);
  --g-islas:   #8F1D23;  --g-islas-bg:   rgba(143,29,35,.09);
}

.u-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;
}

.hero--geo .hero__subtitle { max-width: 64ch; }

/* ─── Panel de búsqueda ───────────────────────────────────────────── */
.geo-buscador { padding: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 28px); }
.geo-panel {
  max-width: 980px; margin-inline: auto;
  background: var(--white); border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius-lg); box-shadow: var(--pz-shadow-lift);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3.4vw, 34px);
}

.geo-search { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
.geo-search__icon { position: absolute; left: 16px; color: var(--grey); pointer-events: none; }
.geo-search__input {
  width: 100%; min-height: 56px; padding: 14px 48px 14px 48px;
  background: var(--off-white); border: 1.5px solid var(--pz-line); border-radius: var(--radius);
  font-family: inherit; font-size: 1.0625rem; color: var(--text);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.geo-search__input::placeholder { color: var(--grey); }
.geo-search__input:focus-visible {
  outline: none; border-color: var(--crimson); background: var(--white);
  box-shadow: 0 0 0 4px rgba(193,39,45,.12);
}
.geo-search__clear {
  position: absolute; right: 10px; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; color: var(--grey);
  transition: background var(--t), color var(--t);
}
.geo-search__clear:hover { background: var(--off-white); color: var(--text); }

.geo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.geo-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--radius-pill);
  background: var(--off-white); border: 1.5px solid var(--pz-line);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--grey-dark);
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
}
.geo-chip__n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: rgba(23,34,51,.07); font-size: .75rem; font-weight: 700; color: var(--grey-dark);
}
.geo-chip:hover { border-color: #c5cfdb; color: var(--text); }
.geo-chip.is-active { background: #14181D; border-color: #14181D; color: #fff; }
.geo-chip.is-active .geo-chip__n { background: rgba(255,255,255,.18); color: #fff; }
.geo-chip:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.geo-chip[data-cat="rios-eu"].is-active { background: var(--g-rios-eu); border-color: var(--g-rios-eu); }
.geo-chip[data-cat="rios-na"].is-active { background: var(--g-rios-na); border-color: var(--g-rios-na); }
.geo-chip[data-cat="rios-ca"].is-active { background: var(--g-rios-ca); border-color: var(--g-rios-ca); }
.geo-chip[data-cat="rios-sa"].is-active { background: var(--g-rios-sa); border-color: var(--g-rios-sa); }
.geo-chip[data-cat="rios-af"].is-active { background: var(--g-rios-af); border-color: var(--g-rios-af); }
.geo-chip[data-cat="rios-as"].is-active { background: var(--g-rios-as); border-color: var(--g-rios-as); }
.geo-chip[data-cat="rios-oc"].is-active { background: var(--g-rios-oc); border-color: var(--g-rios-oc); }
.geo-chip[data-cat="cord"].is-active    { background: var(--g-cord);    border-color: var(--g-cord); }
.geo-chip[data-cat="mares"].is-active   { background: var(--g-mares);   border-color: var(--g-mares); }
.geo-chip[data-cat="golfos"].is-active  { background: var(--g-golfos);  border-color: var(--g-golfos); }
.geo-chip[data-cat="arrec"].is-active   { background: var(--g-arrec);   border-color: var(--g-arrec); }
.geo-chip[data-cat="islas"].is-active   { background: var(--g-islas);   border-color: var(--g-islas); }

.geo-az { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
.geo-az__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px; font-size: .8125rem; font-weight: 700;
  color: var(--grey-dark); transition: background var(--t), color var(--t);
}
.geo-az__link:hover, .geo-az__link:focus-visible { background: var(--crimson-faint); color: var(--crimson); }

.geo-count { max-width: 980px; margin: 16px auto 0; text-align: center; font-size: var(--fs-sm); color: var(--grey); }
.geo-count strong { color: var(--text); font-weight: 700; }

/* ─── Listado ──────────────────────────────────────────────────────── */
.geo-listado { padding: clamp(24px, 3vw, 36px) 0 clamp(56px, 7vw, 88px); }
.geo-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  max-width: 1040px; margin-inline: auto; list-style: none; padding: 0;
}
@media (min-width: 720px) { .geo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 20px; } }

.geo-letter-mark {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  margin: 22px 0 2px; padding: 0; font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 600; color: var(--crimson);
  line-height: 1;
}
.geo-grid > .geo-letter-mark:first-child { margin-top: 0; }
.geo-letter-mark::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pz-line); }

.geo-card {
  list-style: none; background: var(--white); border: 1px solid var(--pz-line);
  border-radius: var(--pz-radius); box-shadow: var(--pz-shadow);
  padding: clamp(18px, 2.4vw, 24px); scroll-margin-top: calc(var(--nav-h) + 20px);
  transition: box-shadow .25s ease, border-color .25s ease, background-color .6s ease;
}
.geo-card:hover { box-shadow: var(--pz-shadow-lift); }
.geo-card.is-target { border-color: var(--crimson); background: var(--crimson-faint); }
.geo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.geo-card__tag {
  display: inline-flex; align-items: center; font-size: .75rem; font-weight: 700;
  letter-spacing: .02em; padding: 4px 10px; border-radius: var(--radius-pill);
}
.geo-card__tag[data-cat="rios-eu"] { color: var(--g-rios-eu); background: var(--g-rios-eu-bg); }
.geo-card__tag[data-cat="rios-na"] { color: var(--g-rios-na); background: var(--g-rios-na-bg); }
.geo-card__tag[data-cat="rios-ca"] { color: var(--g-rios-ca); background: var(--g-rios-ca-bg); }
.geo-card__tag[data-cat="rios-sa"] { color: var(--g-rios-sa); background: var(--g-rios-sa-bg); }
.geo-card__tag[data-cat="rios-af"] { color: var(--g-rios-af); background: var(--g-rios-af-bg); }
.geo-card__tag[data-cat="rios-as"] { color: var(--g-rios-as); background: var(--g-rios-as-bg); }
.geo-card__tag[data-cat="rios-oc"] { color: var(--g-rios-oc); background: var(--g-rios-oc-bg); }
.geo-card__tag[data-cat="cord"]    { color: var(--g-cord);    background: var(--g-cord-bg); }
.geo-card__tag[data-cat="mares"]   { color: var(--g-mares);   background: var(--g-mares-bg); }
.geo-card__tag[data-cat="golfos"]  { color: var(--g-golfos);  background: var(--g-golfos-bg); }
.geo-card__tag[data-cat="arrec"]   { color: var(--g-arrec);   background: var(--g-arrec-bg); }
.geo-card__tag[data-cat="islas"]   { color: var(--g-islas);   background: var(--g-islas-bg); }
.geo-card__link {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; color: var(--grey); transition: background var(--t), color var(--t);
}
.geo-card__link:hover { background: var(--off-white); color: var(--crimson); }
.geo-card__term { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin-bottom: 4px; line-height: var(--lh-snug); }
.geo-card__aka { font-size: var(--fs-micro); font-style: italic; color: var(--grey); margin-bottom: 6px; }
.geo-card__fact { font-size: var(--fs-sm); font-weight: 700; color: var(--grey-dark); margin-bottom: 8px; }
.geo-card__def {
  font-family: var(--font-serif); font-size: 1.03rem; line-height: var(--lh-relaxed);
  color: var(--grey-dark); max-width: 58ch;
}
.geo-card__foot { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--pz-line); }
.geo-card__maps {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--crimson);
  transition: color var(--t);
}
.geo-card__maps:hover, .geo-card__maps:focus-visible { color: var(--crimson-hover); text-decoration: underline; text-underline-offset: 3px; }
.geo-card__maps svg { flex: none; }

.geo-empty { max-width: 560px; margin: 40px auto 0; text-align: center; font-size: 1.05rem; color: var(--grey-dark); line-height: var(--lh-relaxed); }
.geo-empty__reset { color: var(--crimson); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ─── Mapa del atlas (temas) ───────────────────────────────── */
.geo-temas { padding: var(--section-y) 0; }
.geo-temas__list { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.geo-temas__list li {
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--grey-dark);
  background: var(--white); border: 1px solid var(--pz-line); border-radius: 12px;
  padding: 16px 20px;
}
.geo-temas__list strong { color: var(--text); }

@media (max-width: 480px) {
  .geo-az__link { width: 26px; height: 26px; font-size: .75rem; }
}

@media print {
  .geo-buscador, .back-to-top, .wa-float { display: none !important; }
}