/* Candados de acceso (26-09, agente «acceso»). Los usa la app y el panel.
   Cuadrados, tinta gruesa y sombra dura, como el resto de Aura.
   Pase = cian · Premium = rosa con sombra amarilla · Oculto = rayado gris. */

.candado {
  display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
  padding: 4px 7px; border: 2px solid var(--tinta, #0B0C10); border-radius: 2px;
  font: 700 11px/1 var(--f-titulo, 'Chakra Petch', system-ui); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--tinta, #0B0C10); white-space: nowrap; vertical-align: middle;
}
.candado svg { flex: none; }
.candado > span { overflow: hidden; text-overflow: ellipsis; }
.candado > b { margin-left: 2px; padding: 2px 5px; background: #0B0C10; color: var(--acento, #C6FF00); font-weight: 700; letter-spacing: .02em; }
.candado-pase { background: var(--cian, #00E0FF); color: #0B0C10; }
.candado-premium { background: var(--rosa, #FF2E88); color: #fff; box-shadow: 2px 2px 0 var(--amarillo, #FFE600), 3px 3px 0 #0B0C10; }
.candado.compacto { padding: 3px 5px; font-size: 10px; gap: 3px; }
.candado.compacto svg { width: 11px; height: 11px; }

/* El contenedor de algo cerrado: se ve, pero apagado */
.acceso-cerrado { position: relative; }
.acceso-cerrado img { filter: grayscale(.75) brightness(.8); }
.acceso-oculto { display: none !important; }

/* Candado encima de una miniatura: A.envolver(html, r) */
.acceso-envoltorio { position: relative; display: inline-block; line-height: 0; }
.acceso-envoltorio > img { filter: grayscale(.75) brightness(.75); }
.acceso-velo {
  position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 4px; line-height: 1;
  background: repeating-linear-gradient(-45deg, rgba(11,12,16,.28) 0 6px, rgba(11,12,16,.12) 6px 12px);
}

/* Una función entera cerrada: A.htmlPantallaCerrada(r, 'Mazmorras') */
.acceso-pantalla {
  margin: 12px 0; padding: 22px 18px; text-align: center; border: 3px solid var(--tinta, #0B0C10);
  background: var(--sup, #fff); box-shadow: 5px 5px 0 var(--cian, #00E0FF); border-radius: 3px;
}
.acceso-pantalla.acceso-premium { box-shadow: 5px 5px 0 var(--rosa, #FF2E88); }
.acceso-pantalla-ico { width: 54px; height: 54px; margin: 0 auto 10px; display: grid; place-items: center; background: var(--cian, #00E0FF); color: #0B0C10; border: 3px solid #0B0C10; }
.acceso-premium .acceso-pantalla-ico { background: var(--rosa, #FF2E88); color: #fff; }
.acceso-pantalla-ico svg { width: 26px; height: 26px; }
.acceso-pantalla-tit { font: 700 20px/1.1 var(--f-titulo, system-ui); text-transform: uppercase; letter-spacing: .03em; }
.acceso-pantalla-mot { margin-top: 6px; font: 700 12px/1 var(--f-titulo, system-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-3, #6E7180); }
.acceso-pantalla-txt { margin: 10px 0 14px; color: var(--tinta-2, #3C3F4A); }