/* logros.html — estilos propios de la página. El layout compartido viene de shell.css,
   que se carga antes. Antes era un <style> inline (reporte frontend-quality, pulido de Code Quality). */
.ach-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.ach-filters button{border:1px solid var(--border);background:#fff;color:#475569;padding:8px 15px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer}
.ach-filters button.active{background:#008939;border-color:#008939;color:#fff}
.achievements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.ach{padding:20px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.ach .medal{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;font-size:34px;background:radial-gradient(circle at 35% 30%,#fff8e1,#ffe08a);box-shadow:0 0 0 4px #fff2d8;margin-bottom:6px}
.ach strong{font-size:14px}
.ach p{margin:0;color:var(--muted);font-size:11px;line-height:1.5}
.ach .state{margin-top:6px;font-size:11px;font-weight:800;border-radius:10px;padding:5px 9px;letter-spacing:.3px}
.ach.on{border-color:#ffd666}
.ach.on .state{background:#e4fbe9;color:#007f35}
.ach.off .medal{background:#f0f2f6;box-shadow:0 0 0 4px #f6f7fa;filter:grayscale(1);opacity:.55}
.ach.off strong{color:#667085}
.ach.off .state{background:#eef1f6;color:#5f6b7c}
.guest-card{padding:26px;text-align:center}
.guest-card h2{margin:0 0 6px}
.guest-card p{color:var(--muted);font-size:13px;margin:0 0 16px}
@media(max-width:1100px){.achievements{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.achievements{grid-template-columns:1fr}}
/* Móvil: el texto de las tarjetas a 12 px como mínimo (Lighthouse "tamaños de letra legibles"). */
@media(max-width:760px){.ach p,.ach-filters button{font-size:12px}}