/* ═══════════════════════════════════════════════════════════════════════
   MONUMENTOS de Pintar → Equipos (mockups/pintar-equipos.html, pantallas 7, 8 y 9; js/monumentos.js; página pública /t/:slug)
   Los tokens de piel.css (un solo acento, tinta y grises). El oro del monumento es el de los trofeos del mockup; el acento sigue siendo el de la
   interfaz. Íconos de trazo, nada por debajo de 12 px. Las clases mn-* sirven a la app y a la página pública.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --mn-oro: #C9A44C; --mn-oro-osc: #A8862F; }
.mn-trazo { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Foto del equipo (placa e historia) */
.mn-foto { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; overflow: hidden;
  background: var(--c, var(--ink)); color: #fff; font-weight: 500; font-size: 15px; line-height: 1; box-shadow: 0 0 0 2px var(--surf, #fff), 0 0 0 4px var(--c, var(--ink)); }
.mn-foto.mn-g { width: 56px; height: 56px; font-size: 18px; }
.mn-foto.mn-ch { width: 28px; height: 28px; font-size: 12px; box-shadow: 0 0 0 2px var(--c, var(--ink)); }

/* Botones */
.mn-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--acc); color: var(--acc-ink) !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap; }
.mn-btn.sec { background: var(--field, #ECE8DF); color: var(--ink) !important; }
.mn-btn.chico { min-height: 40px; padding: 0 14px; }
.mn-btn.ancho { width: 100%; }
.mn-btn:disabled { opacity: .55; cursor: default; }
.mn-btn.mn-ar { background: var(--surf, #fff); color: var(--mn-oro-osc) !important; border: 1.5px solid var(--mn-oro); position: absolute; right: 10px; bottom: 10px; min-height: 40px; padding: 0 14px; font-size: 13px; }
.mn-vacio { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ── Marcador en el mapa de Equipos: la miniatura del monumento recortada en círculo, con borde dorado (la foto del equipo va en la zona) ── */
.mn-marca { position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; overflow: visible; cursor: pointer; background: none; z-index: 3; font: inherit; }
.mn-marca img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #E7DFC9; border: 3px solid var(--mn-oro); box-shadow: 0 6px 14px rgba(31,29,26,.32); }
.mn-marca .mn-inic { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: #E7DFC9; color: var(--mn-oro-osc); border: 3px solid var(--mn-oro); font-weight: 500; font-size: 14px; }
.mn-marca .mn-sello { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; border-radius: 50%; background: var(--mn-oro); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surf, #fff); }
.mn-marca .mn-sello .mn-trazo { width: 11px; height: 11px; stroke-width: 2.2; }
.mn-marca.pendiente::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--acc); animation: mn-pulso 1.8s ease-out infinite; }
@keyframes mn-pulso { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mn-marca.pendiente::after { animation: none; } }

/* ── "Estás junto al…": la píldora cuando estás a menos de 60 m ── */
.mn-aqui { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 1300; max-width: min(92vw, 420px);
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--surf, #fff); color: var(--ink); box-shadow: 0 10px 28px rgba(31,29,26,.25); }
.mn-aqui[hidden] { display: none; }
/* En Pintar el panel de arriba ocupa ese sitio: la píldora baja y queda encima de los controles de salida */
.mn-aqui.en-pintar { top: auto; bottom: calc(var(--sa-abajo, 0px) + 62px + 130px); }
body.pt-saliendo .mn-aqui.en-pintar { bottom: calc(var(--sa-abajo, 0px) + 250px); }
.mn-aqui .mn-miniatura { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--mn-oro); flex: none; background: #E7DFC9; }
.mn-aqui .tx { min-width: 0; line-height: 1.2; }
.mn-aqui .tx b { display: block; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mn-aqui .tx small { display: block; font-size: 12px; color: var(--muted); }
.mn-aqui .mn-btn { min-height: 34px; padding: 0 14px; font-size: 13px; }
.mn-aqui .mn-x { width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }

/* ── La tarjeta del monumento (hoja inferior y página pública) ── */
.mn-tarjeta h3.mn-nombre { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.01em; }
.mn-tarjeta .mn-k { margin: 0 0 2px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-oro-osc); }
.mn-tarjeta .mn-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.mn-visor { position: relative; margin: 10px 0 4px; border-radius: 20px; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #FAF6EA 0%, #EDE6D3 100%); }
.mn-visor model-viewer, .mn-visor-mv { display: block; width: 100%; height: 280px; --poster-color: transparent; --progress-bar-color: var(--mn-oro); --progress-bar-height: 2px; }
.mn-nota { margin: 4px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.mn-cargando { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); pointer-events: none; }
.mn-placa { margin: 12px 0 0; padding: 14px; border-radius: 18px; background: var(--field, #ECE8DF); }
.mn-placa h2 { margin: 0; font-size: 16px; font-weight: 500; }
.mn-placa-cab { display: flex; align-items: center; gap: 14px; }
.mn-muted { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.mn-grito { margin: 4px 0 0; font-size: 13px; font-style: italic; }
.mn-hist { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line, #D9D3C7); }
.mn-hist h3 { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.mn-hist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.mn-hist li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.mn-hist li small { color: var(--muted); font-size: 12px; }
.mn-historia { margin: 12px 0 0; font-size: 14px; line-height: 1.5; }
.mn-premio { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px; border-radius: 16px; border: 1px solid var(--line, #D9D3C7); }
.mn-premio > div { flex: 1; min-width: 0; }
.mn-premio b { display: block; font-size: 14px; font-weight: 500; }
.mn-premio small { display: block; font-size: 12px; color: var(--muted); }
.mn-mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ink); color: var(--surf, #fff); font-weight: 500; font-size: 14px; flex: none; }
.mn-recoger { margin: 12px 0 0; }
.mn-recoger .mn-ayuda { margin: 6px 2px 0; font-size: 12px; color: var(--muted); text-align: center; }
.mn-aviso { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--field, #ECE8DF); font-size: 13px; line-height: 1.4; }
.mn-aviso.ok { background: color-mix(in srgb, var(--mn-oro) 22%, var(--surf, #fff)); font-weight: 500; }
.mn-error { margin: 8px 0 0; color: #B3382C; font-size: 13px; min-height: 0; }
.mn-error:empty { display: none; }
.mn-acciones { display: flex; gap: 10px; margin-top: 12px; }
.mn-acciones .mn-btn { flex: 1; }
.mn-pie { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

/* ── Página pública /t/:slug ── */
.mn-pg { max-width: 640px; margin: 0 auto; padding: 8px 0 32px; }
.mn-pg h1 { font-size: 30px; font-weight: 300; letter-spacing: -.015em; line-height: 1.1; margin: 2px 0 0; }
.mn-pg .mn-k { margin: 14px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--mn-oro-osc); }
.mn-pg .mn-sub { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.mn-pg .mn-visor-mv { height: min(62vh, 460px); }
.mn-pg .mn-placa { margin-top: 14px; }
.mn-jugar, .mn-sinapp, .mn-abierto { margin: 22px 0 0; }
.mn-jugar h2 { margin: 0 0 6px; font-size: 20px; font-weight: 400; }
.mn-jugar p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.mn-sinapp h3, .mn-abierto h3 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.mn-sinapp p, .mn-abierto p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.mn-abierto ul { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }
.mn-abierto a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }

/* ── Vitrina (persona.html y Yo → Logros; pantalla 8) ── */
.vt { margin: 14px 0 0; }
.vt-bloque { margin: 0 0 12px; padding: 14px; border-radius: 18px; background: var(--surf, #fff); box-shadow: var(--csh, 0 1px 0 rgba(31,29,26,.06)); }
.vt-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 13px; }
.vt-cab b { font-weight: 500; font-size: 14px; }
.vt-cab span { color: var(--muted); font-size: 12px; }
.vt-estante { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vt-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 4px; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: default; text-decoration: none; min-width: 0; }
a.vt-item, button.vt-item { cursor: pointer; }
.vt-item .vt-mini { position: relative; width: 64px; height: 64px; flex: none; }
.vt-item .vt-mini img.vt-sprite { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; display: block; background: #E7DFC9; border: 2px solid var(--mn-oro); }
.vt-item .vt-mini .vt-eq { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--c, var(--ink)); color: #fff; font-size: 12px; font-weight: 500; box-shadow: 0 0 0 2px var(--surf, #fff); overflow: hidden; }
.vt-item b { display: block; font-size: 12px; font-weight: 500; line-height: 1.25; max-width: 100%; }
.vt-item small { display: block; font-size: 12px; line-height: 1.25; color: var(--muted); }
.vt-item.apagado .vt-mini img.vt-sprite { filter: grayscale(1) opacity(.5); border-color: var(--line, #D9D3C7); }
.vt-item.apagado b, .vt-item.apagado small { color: var(--muted); }
.vt-medalla { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--metal, var(--mn-oro)); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 4px 10px rgba(31,29,26,.18); }
.vt-medalla .mn-trazo { width: 26px; height: 26px; stroke-width: 1.6; }
.vt-vacia { padding: 14px 6px; text-align: center; font-size: 13px; color: var(--muted); }
.pr-grid[hidden], #pr-vitrina[hidden] { display: none; }