/* ============================================================
   PlanSí Core · comunidad.css — niveles (app-niveles.js), ranking y muro (app-comunidad.js)
   Sin estilos en línea (CSP): el ancho de la barra de progreso va en clases de 5 en 5.
   ============================================================ */
#niveles, #ranking, #muro {
  --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;
  --cm-ia-bg: #E7E3F6; --cm-ia: #3E2F7A; --cm-demo-bg: #F4E9C9; --cm-demo: #7A5A10;
}

/* ---------- niveles ---------- */
.nv-actual__t { margin: 2px 0 8px; font: 600 1.6rem/1.15 var(--font-serif, Georgia, serif); color: var(--cm-berry); }
.nv-datos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.nv-datos span { background: var(--cm-rosa); color: var(--cm-berry); border-radius: 999px; padding: 4px 10px; font-size: .82rem; font-weight: 600; }
.nv-sub { margin: 6px 0; color: var(--cm-suave); font-size: .92rem; }
.nv-barra { position: relative; height: 14px; border-radius: 999px; background: var(--cm-linea-suave); overflow: hidden; margin: 8px 0 4px; }
.nv-barra__r { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #E11D74, #F5B301); animation: nvLlenar .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: left center; }
@keyframes nvLlenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nv-barra__r--0 { width: 0%; } .nv-barra__r--5 { width: 5%; } .nv-barra__r--10 { width: 10%; } .nv-barra__r--15 { width: 15%; }
.nv-barra__r--20 { width: 20%; } .nv-barra__r--25 { width: 25%; } .nv-barra__r--30 { width: 30%; } .nv-barra__r--35 { width: 35%; }
.nv-barra__r--40 { width: 40%; } .nv-barra__r--45 { width: 45%; } .nv-barra__r--50 { width: 50%; } .nv-barra__r--55 { width: 55%; }
.nv-barra__r--60 { width: 60%; } .nv-barra__r--65 { width: 65%; } .nv-barra__r--70 { width: 70%; } .nv-barra__r--75 { width: 75%; }
.nv-barra__r--80 { width: 80%; } .nv-barra__r--85 { width: 85%; } .nv-barra__r--90 { width: 90%; } .nv-barra__r--95 { width: 95%; }
.nv-barra__r--100 { width: 100%; }
.nv-pct { margin: 0 0 8px; font-weight: 700; color: var(--cm-berry); font-size: .9rem; text-align: right; }
.nv-req { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.nv-req__i { display: flex; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--cm-linea); border-radius: 12px; font-size: .9rem; background: var(--cm-blanco); }
.nv-req__i--ok { border-color: #9BC8A0; background: #EEF7EE; }
.nv-req__i--ok strong::after { content: " \2713"; color: #2E6B36; }
.nv-escalera { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.nv-escalon { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .62rem; text-align: center; color: var(--cm-suave); }
.nv-escalon__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: var(--cm-linea-suave); color: var(--cm-suave); }
.nv-escalon--hecho .nv-escalon__n { background: var(--cm-rosa); color: var(--cm-berry); }
.nv-escalon--actual .nv-escalon__n { background: var(--cm-cta); color: #fff; box-shadow: 0 0 0 3px rgba(169, 16, 90, .2); }
.nv-escalon--actual .nv-escalon__t { color: var(--cm-berry); font-weight: 700; }
.nv-escalon:last-child .nv-escalon__n { border: 2px solid var(--cm-oro); }
.nv-paquetes { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 10px; }
.nv-paquete { border: 1px solid var(--cm-linea); border-radius: 16px; padding: 12px 14px; background: var(--cm-blanco); }
.nv-paquete--bloq { opacity: .8; border-style: dashed; background: transparent; }
.nv-paquete__ceja { margin: 0; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-cta); font-weight: 700; }
.nv-paquete__t { margin: 2px 0; font-weight: 700; font-size: 1.02rem; color: var(--cm-tinta); }
.nv-paquete__d { margin: 0 0 6px; color: var(--cm-suave); font-size: .88rem; }
.nv-minis { display: flex; gap: 6px; margin: 4px 0 8px; }
.nv-minis img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--cm-linea-suave); }
.nv-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.nv-ejs { margin: 8px 0 0; padding-left: 18px; font-size: .88rem; color: var(--cm-suave); }
.nv-nota { font-size: .82rem; color: var(--cm-suave); margin: 8px 0 0; }
.nv-chip-oro, .nv-insignia { display: inline-flex; align-items: center; gap: 6px; background: var(--cm-oro-bg); color: var(--cm-oro-osc); border: 1px solid var(--cm-oro); border-radius: 999px; padding: 3px 10px; font: 700 .78rem/1.3 var(--font-sans, system-ui, sans-serif); vertical-align: middle; }
.nv-insignia { font-size: .9rem; padding: 6px 14px; margin: 0 0 6px; animation: nvBrillo 2.4s ease-in-out infinite; }
.nv-insignia__ico { color: var(--cm-oro); font-size: 1.1rem; }
@keyframes nvBrillo { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 179, 1, 0); } 50% { box-shadow: 0 0 0 6px rgba(245, 179, 1, .25); } }
.nv-oro { margin-top: 14px; border: 2px solid var(--cm-oro); background: linear-gradient(160deg, #FFFDF5, #FBEFC7); }
.nv-oro--bloq { border: 1px dashed var(--cm-linea); background: transparent; }
.nv-consent { border-top: 1px solid var(--cm-linea); margin-top: 10px; padding-top: 10px; }
.nv-consent__t { margin: 0 0 4px; font-size: .98rem; color: var(--cm-tinta); }
.nv-check, .cm-check { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; margin: 8px 0; }
.nv-check input, .cm-check input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--cm-cta); }

/* ---------- ranking y muro ---------- */
.cm-sub { color: var(--cm-suave); font-size: .92rem; margin: 4px 0 12px; }
.cm-btn, .cm-link, .cm-seg__op, .cm-reac__b { font: 600 .92rem/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer; }
.cm-btn { min-height: 44px; padding: 10px 16px; border-radius: 999px; border: none; background: var(--cm-cta); color: #fff; }
.cm-btn--sec { background: transparent; color: var(--cm-cta); border: 1.5px solid var(--cm-cta); }
.cm-link { background: none; border: none; color: var(--cm-cta); text-decoration: underline; padding: 8px 4px; min-height: 40px; }
.cm-btn:focus-visible, .cm-link:focus-visible, .cm-seg__op:focus-visible, .cm-reac__b:focus-visible, .cm-input:focus-visible { outline: 3px solid #E11D74; outline-offset: 2px; }
.cm-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--cm-linea-suave); margin: 4px 0 10px; flex-wrap: wrap; }
.cm-seg__op { border: none; background: transparent; border-radius: 999px; padding: 8px 14px; min-height: 40px; color: var(--cm-suave); }
.cm-seg__op[aria-pressed="true"] { background: var(--cm-blanco); color: var(--cm-berry); box-shadow: 0 1px 4px rgba(34, 42, 30, .12); }
.cm-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--cm-linea); border-radius: 12px; background: var(--cm-blanco); font: 400 1rem/1.4 var(--font-sans, system-ui, sans-serif); color: var(--cm-tinta); }
.cm-textarea { resize: vertical; min-height: 88px; }
.cm-label { display: block; font-weight: 600; margin: 4px 0 6px; font-size: .92rem; }
.cm-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.cm-fila .cm-input { flex: 1 1 180px; width: auto; }
.cm-fila--pie { justify-content: space-between; }
.cm-nota { font-size: .8rem; color: var(--cm-suave); margin: 4px 0; }
.cm-msg { min-height: 1.2em; margin: 4px 0 0; color: var(--cm-berry); font-weight: 600; font-size: .9rem; }
.cm-alias { border: 1px solid var(--cm-linea); border-radius: 14px; padding: 10px 12px; margin: 0 0 12px; background: var(--cm-blanco); }
.cm-alias p { margin: 2px 0; }
.cm-demo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--cm-demo-bg); color: var(--cm-demo); border-radius: 12px; padding: 8px 12px; font-size: .86rem; margin: 0 0 12px; }
.cm-chip { display: inline-block; border-radius: 999px; padding: 2px 8px; font: 700 .7rem/1.4 var(--font-sans, system-ui, sans-serif); background: var(--cm-rosa); color: var(--cm-berry); vertical-align: middle; }
.cm-chip--oro { background: var(--cm-oro-bg); color: var(--cm-oro-osc); border: 1px solid var(--cm-oro); }
.cm-chip--ia { background: var(--cm-ia-bg); color: var(--cm-ia); }
.cm-chip--demo { background: #fff; color: var(--cm-demo); border: 1px solid #D9C27A; }
.cm-tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cm-tabla th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cm-suave); padding: 6px 4px; border-bottom: 1px solid var(--cm-linea); }
.cm-tabla td { padding: 9px 4px; border-bottom: 1px solid var(--cm-linea-suave); vertical-align: top; }
.cm-tabla td:nth-child(n+3), .cm-tabla th:nth-child(n+3) { text-align: center; width: 15%; }
.cm-tabla td:first-child { font-weight: 700; color: var(--cm-berry); width: 8%; }
.cm-yo td { background: #FDF0F6; }
.cm-alias-n { font-weight: 600; word-break: break-word; }
.cm-nivel { display: block; font-size: .74rem; color: var(--cm-suave); }
.cm-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-vacio { color: var(--cm-suave); font-style: italic; }
.cm-h3 { margin: 18px 0 8px; font: 600 1.1rem/1.2 var(--font-serif, Georgia, serif); color: var(--cm-berry); }
.cm-compositor { border: 1px solid var(--cm-linea); border-radius: 16px; padding: 12px; background: var(--cm-blanco); }
.cm-pub { border: 1px solid var(--cm-linea); border-radius: 16px; padding: 12px 14px; margin: 0 0 10px; background: var(--cm-blanco); animation: cmEntra .35s ease both; }
.cm-pub--reto { border: 2px solid #C9BDF0; background: #F7F5FD; }
.cm-pub--hijo { margin: 8px 0 0; padding: 8px 10px; border-radius: 12px; background: #FBF8F2; animation: none; }
.cm-comentarios { margin: 6px 0 0 8px; border-left: 2px solid var(--cm-linea-suave); padding-left: 8px; }
.cm-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: .88rem; }
.cm-autor__n { font-weight: 700; color: var(--cm-tinta); }
.cm-autor__rol, .cm-hace { color: var(--cm-suave); font-size: .78rem; }
.cm-hace { margin-left: auto; }
.cm-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--cm-rosa); color: var(--cm-berry); font-weight: 700; }
.cm-avatar--ia { background: var(--cm-ia-bg); color: var(--cm-ia); }
.cm-tipo { margin: 0 0 2px; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cm-cta); }
.cm-texto { margin: 0 0 8px; line-height: 1.45; white-space: pre-line; word-break: break-word; }
.cm-foto { display: block; max-width: 100%; border-radius: 12px; margin: 0 0 8px; }
.cm-reac { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.cm-reac__b { min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--cm-linea); background: transparent; color: var(--cm-suave); font-size: .82rem; }
.cm-reac__b[aria-pressed="true"] { border-color: var(--cm-cta); background: var(--cm-rosa); color: var(--cm-berry); }
.cm-reac__n { font-weight: 700; }
.cm-acciones { display: flex; gap: 6px; margin: 4px 0 0; }
.cm-reporte { margin: 6px 0 0; padding: 10px; border-radius: 12px; background: #FBF8F2; }
.cm-reglas { margin-top: 14px; }
@keyframes cmEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nv-barra__r, .cm-pub, .nv-insignia { animation: none; }
}
/* En el celular solo se rotulan el nivel actual y Máster (los nombres largos no caben en 7 columnas). */
@media (max-width: 520px) {
  .nv-escalon:not(.nv-escalon--actual):not(:last-child) .nv-escalon__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nv-escalon__t { white-space: nowrap; }
  .nv-escalon:last-child { align-items: flex-end; }
}