/* ============================================================
   PlanSí Core · insignias.css — vitrina «Mis insignias», insignias junto al alias, celebración de
   insignia (app-heroes.js, tipo «insignia») y temas de color de premio (app-insignias.js).
   Sin estilos en línea (CSP). Respeta prefers-reduced-motion.
   ============================================================ */
#insignias {
  --cm-tinta: var(--tinta, #222A1E); --cm-suave: var(--tinta-suave, #4A5244); --cm-berry: var(--berry-osc, #7A0B44);
  --cm-cta: var(--berry-cta, #A9105A); --cm-rosa: var(--pastel-rosa, #FADCEB); --cm-linea: var(--linea, #DCD2BF);
  --cm-linea-suave: var(--linea-suave, #EEE6D8); --cm-blanco: var(--blanco, #FFFDF8);
  --cm-oro: #F5B301; --cm-oro-osc: #6B4E00; --cm-oro-bg: #FBEFC7;
}

/* ---------- resumen ---------- */
.ins-resumen__n { margin: 0; font-size: 1rem; color: var(--cm-suave); }
.ins-resumen__n strong { font: 600 1.7rem/1 var(--font-serif, Georgia, serif); color: var(--cm-berry); margin-right: 4px; }
.ins-resumen__d { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 12px; font-size: .9rem; color: var(--cm-suave); }

/* ---------- vitrina ---------- */
.ins-grid { list-style: none; margin: 8px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .ins-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ins-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 12px; text-align: center;
  border: 1px solid var(--cm-linea); border-radius: 16px; background: var(--cm-blanco); min-width: 0; }
.ins-item--ok { border-color: #E9B9CF; background: linear-gradient(180deg, #FFF5FA, var(--cm-blanco)); }
.ins-item--oro.ins-item--ok { border-color: var(--cm-oro); background: linear-gradient(180deg, var(--cm-oro-bg), var(--cm-blanco)); }
.ins-item__img { position: relative; display: block; width: 72px; height: 72px; }
.ins-item__t { font-weight: 700; font-size: .8rem; line-height: 1.2; color: var(--cm-tinta); overflow-wrap: anywhere; }
.ins-item--bloq .ins-item__t { color: var(--cm-suave); }
.ins-item__f { font-size: .7rem; color: var(--cm-berry); }
.ins-item__como { font-size: .7rem; line-height: 1.3; color: var(--cm-suave); overflow-wrap: anywhere; }
.ins-item__prog { font-size: .7rem; font-weight: 700; color: var(--cm-berry); background: var(--cm-rosa); border-radius: 999px; padding: 1px 8px; }
.ins-item__nota { font-size: .64rem; color: #7A5A10; background: #F4E9C9; border-radius: 999px; padding: 1px 6px; }
.ins-candado { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: var(--cm-blanco); border: 1px solid var(--cm-linea); }

/* SVG: bloqueadas en gris */
.ins-svg { display: block; flex: 0 0 auto; }
.ins-svg--bloq { filter: grayscale(1); opacity: .42; }
.ins-item--ok .ins-svg { animation: insAparece .5s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes insAparece { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- junto al alias (ranking y muro) ---------- */
.ins-minis { display: inline-flex; align-items: center; gap: 2px; vertical-align: middle; margin: 0 2px; }
.ins-mini { width: 20px; height: 20px; }
.ins-resumen__d .ins-mini { width: 26px; height: 26px; }

/* ---------- premios ---------- */
.ins-mods { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.ins-mod { display: grid; gap: 3px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--cm-linea); background: var(--cm-blanco); }
.ins-mod__ceja { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--cm-cta); }
.ins-mod__t { font-weight: 700; color: var(--cm-tinta); }
.ins-mod__d { font-size: .88rem; color: var(--cm-suave); }
.ins-mod__acc { margin-top: 6px; }
.ins-mod--bloq { background: var(--cm-linea-suave); }
.ins-mod--bloq .ins-mod__ceja, .ins-mod--bloq .ins-mod__t { color: var(--cm-suave); }
.ins-mod--tema { border-left-width: 8px; }
.ins-mod--rosa { border-left-color: #F7C6DA; } .ins-mod--berry { border-left-color: #7A0B44; }
.ins-mod--podio { border-left-color: #E11D74; } .ins-mod--oro { border-left-color: #F5B301; }
.ins-mod--reto.ins-mod--ok { border-color: #E9B9CF; background: #FFF5FA; }

/* ---------- celebración (pantalla de logro tipo «insignia», nivel y oro) ---------- */
.slogro__ins { position: relative; display: grid; place-items: center; height: 214px; margin: 0 -20px 4px; overflow: hidden;
  background: radial-gradient(circle at 50% 55%, #FFF4D1 0, #FADCEB 45%, #F7F2E9 75%); }
.slogro__ins .ins-svg--grande { position: relative; z-index: 1; width: 168px; height: 168px; filter: drop-shadow(0 10px 18px rgba(122, 11, 68, .28));
  animation: insGira 1s cubic-bezier(.2, 1.25, .35, 1) .1s both; }
.slogro__brillo { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent 0 20deg, rgba(245, 179, 1, .32) 20deg 34deg, transparent 34deg 70deg,
  rgba(225, 29, 116, .2) 70deg 84deg, transparent 84deg 120deg); animation: insRayos 9s linear infinite; }
@keyframes insGira { 0% { transform: scale(.2) rotate(-200deg); opacity: 0; } 60% { transform: scale(1.12) rotate(10deg); opacity: 1; } 100% { transform: none; } }
@keyframes insRayos { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ins-item--ok .ins-svg, .slogro__ins .ins-svg--grande, .slogro__brillo { animation: none; }
}

/* ---------- temas de color de premio (cosméticos; html[data-tema-premio]) ---------- */
html[data-tema-premio="rosa"] { --bg-crema: #FBEFF4; --crema-2: #F6E1EA; --linea-suave: #F1DCE5; }
html[data-tema-premio="berry"] { --bg-crema: #F6EEF1; --berry-cta: #7A0B44; --salvia: #7A0B44; --durazno-suave: #EBD3DE; }
html[data-tema-premio="podio"] { --bg-crema: #FDF2F7; --berry-cta: #B0105C; --durazno-suave: #FFDDEB; --salvia: #C8105F; }
html[data-tema-premio="oro"] { --bg-crema: #FBF4E1; --crema-2: #F4E9C9; --linea-suave: #EFE3C2; --durazno-suave: #F8E7B5; }