/* ═══════════════════════════════════════════════════════════════════
   PROMOX — Diccionario de Geografía (prefijo dic-, comparte estructura
   y JS con el diccionario de turismo; paleta de categorías propia)
   Orden de carga: styles.css → promox-ui.css → diccionario-geo-v1.css
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --c-fis:  #8B5E34;  --c-fis-bg:  rgba(139,94,52,.10);
  --c-hid:  #1D6FA5;  --c-hid-bg:  rgba(29,111,165,.09);
  --c-cost: #0F9E93;  --c-cost-bg: rgba(15,158,147,.10);
  --c-mar:  #1B4F8C;  --c-mar-bg:  rgba(27,79,140,.09);
  --c-clim: #C2680C;  --c-clim-bg: rgba(194,104,12,.10);
  --c-cont: #2F7D4F;  --c-cont-bg: rgba(47,125,79,.09);
  --c-pol:  #B52124;  --c-pol-bg:  rgba(181,33,36,.09);
  --c-cart: #6B46A6;  --c-cart-bg: rgba(107,70,166,.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: subtítulo algo más ancho para la bajada del diccionario ─── */
.hero--dic .hero__subtitle { max-width: 64ch; }

/* ─── Panel de búsqueda ───────────────────────────────────────────── */
.dic-buscador { padding: clamp(28px, 4vw, 44px) 0 clamp(20px, 3vw, 28px); }
.dic-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);
}

.dic-search { position: relative; display: flex; align-items: center; margin-bottom: 18px; }
.dic-search__icon { position: absolute; left: 16px; color: var(--grey); pointer-events: none; }
.dic-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);
}
.dic-search__input::placeholder { color: var(--grey); }
.dic-search__input:focus-visible {
  outline: none; border-color: var(--crimson); background: var(--white);
  box-shadow: 0 0 0 4px rgba(193,39,45,.12);
}
.dic-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);
}
.dic-search__clear:hover { background: var(--off-white); color: var(--text); }

.dic-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dic-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);
}
.dic-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);
}
.dic-chip:hover { border-color: #c5cfdb; color: var(--text); }
.dic-chip.is-active { background: #14181D; border-color: #14181D; color: #fff; }
.dic-chip.is-active .dic-chip__n { background: rgba(255,255,255,.18); color: #fff; }
.dic-chip:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.dic-chip[data-cat="fis"].is-active   { background: var(--c-fis);  border-color: var(--c-fis); }
.dic-chip[data-cat="hid"].is-active   { background: var(--c-hid);  border-color: var(--c-hid); }
.dic-chip[data-cat="cost"].is-active  { background: var(--c-cost); border-color: var(--c-cost); }
.dic-chip[data-cat="mar"].is-active   { background: var(--c-mar);  border-color: var(--c-mar); }
.dic-chip[data-cat="clim"].is-active  { background: var(--c-clim); border-color: var(--c-clim); }
.dic-chip[data-cat="cont"].is-active  { background: var(--c-cont); border-color: var(--c-cont); }
.dic-chip[data-cat="pol"].is-active   { background: var(--c-pol);  border-color: var(--c-pol); }
.dic-chip[data-cat="cart"].is-active  { background: var(--c-cart); border-color: var(--c-cart); }

.dic-az { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px solid var(--pz-line); }
.dic-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);
}
.dic-az__link:hover, .dic-az__link:focus-visible { background: var(--crimson-faint); color: var(--crimson); }

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

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

.dic-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;
}
.dic-grid > .dic-letter-mark:first-child { margin-top: 0; }
.dic-letter-mark::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--pz-line); }

.dic-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;
}
.dic-card:hover { box-shadow: var(--pz-shadow-lift); }
.dic-card.is-target { border-color: var(--crimson); background: var(--crimson-faint); }
.dic-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dic-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);
}
.dic-card__tag[data-cat="fis"]   { color: var(--c-fis);  background: var(--c-fis-bg); }
.dic-card__tag[data-cat="hid"]   { color: var(--c-hid);  background: var(--c-hid-bg); }
.dic-card__tag[data-cat="cost"]  { color: var(--c-cost); background: var(--c-cost-bg); }
.dic-card__tag[data-cat="mar"]   { color: var(--c-mar);  background: var(--c-mar-bg); }
.dic-card__tag[data-cat="clim"]  { color: var(--c-clim); background: var(--c-clim-bg); }
.dic-card__tag[data-cat="cont"]  { color: var(--c-cont); background: var(--c-cont-bg); }
.dic-card__tag[data-cat="pol"]   { color: var(--c-pol);  background: var(--c-pol-bg); }
.dic-card__tag[data-cat="cart"]  { color: var(--c-cart); background: var(--c-cart-bg); }
.dic-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);
}
.dic-card__link:hover { background: var(--off-white); color: var(--crimson); }
.dic-card__term { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); margin-bottom: 4px; line-height: var(--lh-snug); }
.dic-card__aka { font-size: var(--fs-micro); font-style: italic; color: var(--grey); margin-bottom: 8px; }
.dic-card__def {
  font-family: var(--font-serif); font-size: 1.03rem; line-height: var(--lh-relaxed);
  color: var(--grey-dark); max-width: 58ch;
}

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

/* ─── Listados de referencia (ríos, mares, accidentes) ──────────────── */
.dic-listas { padding: var(--section-y) 0; }
.dic-listas__grid {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 1040px; margin: 0 auto;
}
@media (min-width: 860px) { .dic-listas__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.dic-listas__card {
  background: var(--white); border: 1px solid var(--pz-line); border-radius: var(--pz-radius);
  box-shadow: var(--pz-shadow); padding: clamp(20px, 2.6vw, 26px);
}
.dic-listas__card h3 {
  font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 14px;
  letter-spacing: -.01em;
}
.dic-listas__card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.dic-listas__card li {
  font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--grey-dark);
  padding-bottom: 9px; border-bottom: 1px solid var(--pz-line);
}
.dic-listas__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.dic-listas__card strong { color: var(--text); }

/* ─── Mapa del diccionario (temas) ───────────────────────────────── */
.dic-temas { padding: var(--section-y) 0; }
.dic-temas__list { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.dic-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;
}
.dic-temas__list strong { color: var(--text); }

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

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

/* ─── Ejemplo real dentro de cada tarjeta ───────────────────────────── */
.dic-card__example {
  margin-top: 14px; padding: 12px 14px 13px;
  background: var(--off-white); border: 1px solid var(--pz-line); border-radius: 10px;
}
.dic-card__example-label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey); margin-bottom: 5px;
}
.dic-card__example-text {
  font-size: .9rem; line-height: var(--lh-relaxed); color: var(--grey-dark); margin-bottom: 8px;
}
.dic-card__example-text strong { color: var(--text); }
.dic-card__example-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem; font-weight: 700; color: var(--crimson);
  text-decoration: none; transition: opacity var(--t);
}
.dic-card__example-link:hover { opacity: .75; text-decoration: underline; text-underline-offset: 2px; }