/* Medallas de Recorrer (js/medallas.js; mockup recorrer-tu-mapa.html, teléfonos 4 a 7). Las monedas, en css/moneda.css. */

/* El lugar en el mapa: un disco con el pin y su nombre; con medalla, el disco toma el metal. */
.md-marca { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.md-disco { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surf, #fff); color: var(--ink, #1F1D1A);
  border: 1.8px dashed var(--ink, #1F1D1A); box-shadow: 0 3px 9px rgba(0,0,0,.22); flex: none; }
.md-disco .trazo { width: 16px; height: 16px; }
.md-marca.cobre .md-disco { background: #B4693C; border: 2px solid #fff; color: #fff; }
.md-marca.plata .md-disco { background: #AEB4BA; border: 2px solid #fff; color: #fff; }
.md-marca.oro .md-disco { background: #C9982E; border: 2px solid #fff; color: #fff; }
.md-nombre { font-size: 12px; font-weight: 500; color: var(--ink, #1F1D1A); background: rgba(255,255,255,.92); border-radius: 8px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.12); }

/* En la tarjeta de tu mapa */
.md-tarjeta { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.md-proxima { display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.md-proxima .moneda { margin: 0; cursor: pointer; }
.md-proxima b { display: block; font-weight: 500; font-size: 14px; }
.md-proxima small { display: block; font-size: 12.5px; color: var(--muted); }
.md-coleccion { align-self: flex-start; border: 0; background: var(--field, #F4F1EB); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }

/* La ficha del lugar */
.md-ficha { display: flex; flex-direction: column; gap: 6px; }
.md-foto { width: 100%; height: 190px; object-fit: cover; border-radius: var(--r-sm, 18px); display: block; }
.md-credito { font-size: 12px; color: var(--muted); }
.md-h { font-weight: 300; font-size: 26px; letter-spacing: -.02em; line-height: 1.1; margin: 6px 0 2px; }
.md-tres { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 4px 0; }
.md-tres .moneda { margin: 0; }
.md-tres p { flex: 1 1 140px; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.35; }
.md-ficha h4 { font-weight: 500; font-size: 14.5px; margin: 8px 0 0; }
.md-ficha p { margin: 0; font-size: 14px; line-height: 1.45; }
.md-regla { color: var(--muted); font-size: 13px !important; margin-top: 6px !important; }
.md-fuentes { color: var(--muted); font-size: 12.5px !important; }
.md-fuentes a { color: inherit; }
.md-ficha .pt-boton { margin-top: 8px; }

/* Tu colección */
.md-sub { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }
.md-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 6px; margin-top: 8px; }
.md-vt { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; font-size: 12.5px; line-height: 1.2; }
.md-vt small { color: var(--muted); font-size: 12px; }

/* La moneda ganada, arriba del resumen de la salida */
.md-gano { text-align: center; padding: 6px 0 16px; margin-bottom: 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.md-gano .md-sobre { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.md-gano h4 { font-weight: 400; font-size: 22px; line-height: 1.2; margin: 0; }
.md-gano .md-sub { margin: 0; }
.md-gano .pt-boton { width: auto; margin-top: 6px; }