/*
 * Selector de civilización — Mercado del Age
 * Todo cuelga de .mda-civs para no pisar estilos del tema ni de Elementor.
 * Los colores salen de variables: si querés otro acento, cambiás una línea.
 */

.mda-civs{
  --mda-acento:#1B6455;
  --mda-acento-suave:#E4EFEB;
  --mda-linea:#DCDFDA;
  --mda-linea-fuerte:#B9BFB8;
  --mda-tinta:#1D2724;
  --mda-suave:#6A7570;
  --mda-fondo:#FFFFFF;
  --mda-hueco:#F3F5F2;

  display:block;
  margin:18px 0 22px;
  font-size:15px;
  line-height:1.5;
  color:var(--mda-tinta);
}
.mda-civs *{box-sizing:border-box}

.mda-caja{
  border:1px solid var(--mda-linea);
  border-radius:4px;
  background:var(--mda-fondo);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ── encabezado ── */
.mda-titulo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.mda-label{
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--mda-suave);
}
.mda-elegida{font-size:14px; color:var(--mda-suave)}
.mda-elegida.puesta{color:var(--mda-acento); font-weight:600}

/* ── vista previa ── */
.mda-previa{
  position:relative; align-self:center;
  width:100%; max-width:300px; aspect-ratio:1/1;
  background:var(--mda-hueco); border-radius:3px; overflow:hidden;
}
.mda-previa-base{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain; display:block;
}
.mda-previa-capa{
  position:absolute; aspect-ratio:1/1;
  display:grid; place-items:center; pointer-events:none;
}
.mda-previa-grabado{
  width:100%; height:100%; object-fit:contain;
  /* el grabado es monocromo y se hunde en el material:
     por eso gris + multiply, no la imagen a color */
  filter:grayscale(1) contrast(1.35) brightness(.6);
  mix-blend-mode:multiply;
  opacity:0; transition:opacity .18s ease;
}
.mda-previa.con-grabado .mda-previa-grabado{opacity:.92}

/* ── buscador ── */
.mda-buscador{position:relative}
.mda-civs input.mda-q{
  width:100%; font:inherit; font-size:15px; color:var(--mda-tinta);
  background:var(--mda-fondo);
  border:1px solid var(--mda-linea-fuerte); border-radius:3px;
  padding:10px 12px; margin:0; height:auto;
}
.mda-civs input.mda-q:focus{
  outline:2px solid var(--mda-acento); outline-offset:-1px;
  border-color:var(--mda-acento); box-shadow:none;
}

/* ── regiones ── */
.mda-chips{display:flex; flex-wrap:wrap; gap:5px}
.mda-civs button.mda-chip{
  font:inherit; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  background:var(--mda-fondo); color:var(--mda-suave);
  border:1px solid var(--mda-linea); border-radius:99px;
  padding:5px 10px; margin:0; cursor:pointer; line-height:1.3;
  min-height:0; width:auto; text-shadow:none;
}
.mda-civs button.mda-chip[aria-pressed="true"]{
  background:var(--mda-tinta); border-color:var(--mda-tinta); color:#fff;
}

.mda-conteo{font-size:12px; color:var(--mda-suave); font-variant-numeric:tabular-nums}

/* ── atajos ── */
.mda-atajos{display:flex; flex-wrap:wrap; gap:6px}
.mda-civs button.mda-atajo{
  display:inline-flex; align-items:center; gap:6px;
  font:inherit; font-size:14px; color:var(--mda-tinta);
  background:var(--mda-fondo); border:1px solid var(--mda-linea);
  border-radius:99px; padding:4px 12px 4px 5px; margin:0; cursor:pointer;
  line-height:1.3; min-height:0; width:auto; text-shadow:none;
}
.mda-civs button.mda-atajo img{width:26px; height:26px; object-fit:contain; display:block}
.mda-civs button.mda-atajo:hover{border-color:var(--mda-acento)}

/* ── grilla ── */
.mda-salida{display:flex; flex-direction:column; gap:14px; max-height:430px; overflow-y:auto}
.mda-grupo{display:flex; flex-direction:column; gap:7px}
.mda-civs .mda-grupo-t{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--mda-suave); font-weight:600; margin:0;
  display:flex; align-items:center; gap:8px;
}
.mda-civs .mda-grupo-t::after{content:""; flex:1; height:1px; background:var(--mda-linea)}
.mda-grilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:5px}
.mda-civs button.mda-civ{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--mda-fondo); border:1px solid var(--mda-linea);
  border-radius:3px; padding:7px 3px 5px; margin:0; cursor:pointer;
  font:inherit; color:var(--mda-suave); line-height:1.2;
  min-height:0; width:auto; text-shadow:none;
  transition:border-color .12s ease;
}
.mda-civs button.mda-civ img{width:44px; height:44px; object-fit:contain; display:block}
.mda-civs button.mda-civ span{font-size:12px; text-align:center; overflow-wrap:anywhere}
.mda-civs button.mda-civ:hover{border-color:var(--mda-acento)}
.mda-civs button.mda-civ.cursor{border-color:#A8481A}
.mda-civs button.mda-civ[aria-pressed="true"]{
  border-color:var(--mda-acento); background:var(--mda-acento-suave);
  box-shadow:inset 0 0 0 1px var(--mda-acento);
}
.mda-civs button.mda-civ[aria-pressed="true"] span{color:var(--mda-acento); font-weight:600}
.mda-civs button:focus-visible{outline:2px solid var(--mda-acento); outline-offset:2px}

.mda-vacio{
  font-size:14px; color:var(--mda-suave); text-align:center; margin:0;
  border:1px dashed var(--mda-linea-fuerte); border-radius:3px; padding:18px;
}

@media (max-width:480px){
  .mda-grilla{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
  .mda-civs button.mda-civ img{width:38px; height:38px}
  .mda-salida{max-height:360px}
}
@media (prefers-reduced-motion:reduce){
  .mda-civs *{transition:none !important}
}