/* Los logros: el panel (al costado, como el armero y la tienda) y el aviso de logro nuevo (CONTRATO-final.md, sección 9). */
#logros { min-width: 23em; }
#logros h2 { display: flex; align-items: baseline; gap: 0.5em; padding-right: 2.4em; }
#logros h2 small { font-size: 0.65em; font-weight: bold; color: var(--tinta); opacity: 0.8; }
#logrosTotal { display: flex; align-items: center; gap: 0.5em; }
#logrosTotal .ico { width: 1.9em; height: 1.9em; }
.pista { flex: 1; height: 0.8em; border: 0.16em solid var(--tinta); border-radius: 0.5em; background: var(--tinta); overflow: hidden; display: block; }
.pista > i { display: block; height: 100%; background: linear-gradient(180deg, #FFE27A, var(--oro)); border-radius: 0.3em; min-width: 0; }
#logrosLista { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45em; padding: 0 0.3em 0.3em 0; }

/* cada logro: medalla | título y descripción | premio (+ la barra abajo si tiene progreso) */
.fichaArma.logro { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.1em 0.7em; cursor: default; padding: 0.45em 0.7em 0.45em 0.5em; }
.logro .nom, .logro .dato { min-width: 0; overflow-wrap: anywhere; grid-column: 2; }
.logro .nom { font-size: 1.05em; grid-row: 1; }
.logro .dato { grid-row: 2; font-size: 0.76em; line-height: 1.15; }
.logro .estado { grid-column: 3; grid-row: 1 / span 2; }
.logro .medalla { grid-column: 1; grid-row: 1 / span 3; align-self: center; position: relative; width: 2.9em; height: 2.9em; border-radius: 50%;
  border: 0.18em solid var(--tinta); background: #fff; display: grid; place-items: center; }
.logro .medalla > .ico:first-child { width: 2.1em; height: 2.1em; }
.logro .medalla .ok { position: absolute; right: -0.45em; bottom: -0.35em; width: 1.25em; height: 1.25em; }
.logro .progreso { grid-column: 2 / span 2; grid-row: 3; display: flex; align-items: center; gap: 0.5em; margin-top: 0.2em; }
.logro .progreso .pista { height: 0.7em; }
.logro .progreso .num { font-size: 0.7em; white-space: nowrap; }
.logro.pend { background: #E9E2D3; border-style: dashed; }
.logro.pend .medalla { background: #DAD4E0; }
.logro.pend .nom { opacity: 0.75; }
.logro.pend .dato { opacity: 0.65; }
.logro.puesta { background: #B9F3CE; box-shadow: 0 0.2em 0 var(--tinta); }
.logro.puesta .medalla { background: radial-gradient(circle at 35% 30%, #FFF4C2, var(--oro)); }
.logro.puesta .nom { font-size: 1.12em; }

/* el aviso: arriba a la izquierda, debajo del cartel del cuarto. Entra deslizando, la medalla rebota y un brillo lo cruza */
#logroAviso { position: absolute; left: 1em; top: 5.2em; display: flex; align-items: center; gap: 0.7em; padding: 0.55em 1em 0.55em 0.6em;
  max-width: min(21em, 30vw); background: var(--papel); border: 0.2em solid var(--tinta); border-radius: 1em; box-shadow: 0 0.3em 0 var(--tinta);
  overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; }
#logroAviso.ver { visibility: visible; animation: logroEntra 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) forwards; }
#logroAviso.ver.sale { animation: logroSale 0.4s ease-in forwards; }
#logroAviso .medalla { flex: none; width: 3.4em; height: 3.4em; border-radius: 50%; border: 0.2em solid var(--tinta); display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF4C2, var(--oro)); }
#logroAviso.ver .medalla { animation: logroMedalla 0.7s 0.15s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
#logroAviso .medalla .ico { width: 2.5em; height: 2.5em; }
#logroAviso .textos { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
#logroAviso .t { -webkit-text-stroke: 0; color: var(--tinta); }
#logroAviso b { font-size: 0.72em; color: #A26F12; letter-spacing: 0.05em; }
#logroAviso .nom { font-size: 1.3em; overflow-wrap: anywhere; }
#logroAviso .premio { font-size: 0.95em; display: flex; align-items: center; gap: 0.3em; color: #A26F12; }
#logroAviso .premio .ico { width: 1.3em; height: 1.3em; }
#logroAviso .brillo { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; transform: translateX(-150%) skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent); }
#logroAviso.ver .brillo { animation: logroBrillo 0.8s 0.45s ease-out both; }
@keyframes logroEntra { from { opacity: 0; transform: translateX(-120%); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes logroSale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-120%); } }
@keyframes logroMedalla { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
@keyframes logroBrillo { to { transform: translateX(450%) skewX(-20deg); } }
/* nunca encima de un panel abierto (el armero, la tienda, el cuadro de honor o la pausa) */
.con-panel #logroAviso, .con-lateral #logroAviso { visibility: hidden !important; }
/* abierto desde la pausa: va arriba del velo y la pausa se esconde hasta que se cierra con la X */
#logros { z-index: 4; }
.ver-logros #pausa { display: none; }