/* ═══════════════════════════════════════════════════════════════════
   PROMOX — Diccionario de Turismo (prefijo dic-)
   Orden de carga: styles.css → promox-ui.css → diccionario-v2.css
   Objetivo: lectura cómoda y navegación muy dinámica sobre el mismo
   sistema de tokens del resto del sitio.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --c-dist:   #C1272D;  --c-dist-bg:   rgba(193,39,45,.09);
  --c-aloj:   #2563A8;  --c-aloj-bg:   rgba(37,99,168,.09);
  --c-transp: #0F9E93;  --c-transp-bg: rgba(15,158,147,.10);
  --c-asist:  #B5790A;  --c-asist-bg:  rgba(181,121,10,.10);
  --c-doc:    #46536A;  --c-doc-bg:    rgba(70,83,106,.09);
  --c-prod:   #7046B0;  --c-prod-bg:   rgba(112,70,176,.09);
  --c-tec:    #2A7FE0;  --c-tec-bg:    rgba(42,127,224,.09);
  --c-seg:    #15803D;  --c-seg-bg:    rgba(21,128,61,.09);
  --c-com:    #8F1D23;  --c-com-bg:    rgba(143,29,35,.09);
  --c-viaj:   #C2410C;  --c-viaj-bg:   rgba(194,65,12,.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: 62ch; }

/* ─── 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; }
/* Tinte de categoría al activar un chip puntual (no el de "Todos") */
.dic-chip[data-cat="dist"].is-active   { background: var(--c-dist);   border-color: var(--c-dist); }
.dic-chip[data-cat="aloj"].is-active   { background: var(--c-aloj);   border-color: var(--c-aloj); }
.dic-chip[data-cat="transp"].is-active { background: var(--c-transp); border-color: var(--c-transp); }
.dic-chip[data-cat="asist"].is-active  { background: var(--c-asist);  border-color: var(--c-asist); }
.dic-chip[data-cat="doc"].is-active    { background: var(--c-doc);    border-color: var(--c-doc); }
.dic-chip[data-cat="prod"].is-active   { background: var(--c-prod);   border-color: var(--c-prod); }
.dic-chip[data-cat="tec"].is-active    { background: var(--c-tec);    border-color: var(--c-tec); }
.dic-chip[data-cat="seg"].is-active    { background: var(--c-seg);    border-color: var(--c-seg); }
.dic-chip[data-cat="com"].is-active    { background: var(--c-com);    border-color: var(--c-com); }
.dic-chip[data-cat="viaj"].is-active   { background: var(--c-viaj);   border-color: var(--c-viaj); }

.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(56px, 7vw, 88px); }
.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="dist"]   { color: var(--c-dist);   background: var(--c-dist-bg); }
.dic-card__tag[data-cat="aloj"]   { color: var(--c-aloj);   background: var(--c-aloj-bg); }
.dic-card__tag[data-cat="transp"] { color: var(--c-transp); background: var(--c-transp-bg); }
.dic-card__tag[data-cat="asist"]  { color: var(--c-asist);  background: var(--c-asist-bg); }
.dic-card__tag[data-cat="doc"]    { color: var(--c-doc);    background: var(--c-doc-bg); }
.dic-card__tag[data-cat="prod"]   { color: var(--c-prod);   background: var(--c-prod-bg); }
.dic-card__tag[data-cat="tec"]    { color: var(--c-tec);    background: var(--c-tec-bg); }
.dic-card__tag[data-cat="seg"]    { color: var(--c-seg);    background: var(--c-seg-bg); }
.dic-card__tag[data-cat="com"]    { color: var(--c-com);    background: var(--c-com-bg); }
.dic-card__tag[data-cat="viaj"]   { color: var(--c-viaj);   background: var(--c-viaj-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; }

/* ─── 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; }
}