/* Comunidade: recordes, constância, agenda, brasões. Usa as variáveis do site.css. */

/* nome + selos manuais */
.mu-nl { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; flex-wrap: wrap; }
.mu-nl .mu-nome { min-width: 0; }
.cm-selo {
  display: inline-flex; align-items: center; gap: 3px; flex: none; padding: 2px 8px 2px 6px; border-radius: 999px;
  background: rgba(8, 253, 2, .12); color: var(--verde); font: 700 11px/1.3 var(--corpo); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.cm-selo .ph-fill { font-size: 13px; }
.cm-selo-g { font-size: 13px; padding: 5px 12px 5px 9px; }
.cm-selos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* abas Feed · Recordes · Constância */
.cm-abas { margin-bottom: 14px; }
.cm-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }

/* recordes */
.cm-lista { display: grid; gap: 14px; }
.cm-rec { background: var(--cartao); border-radius: var(--raio); padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; }
.cm-rec-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cm-rec-quem > div { display: grid; min-width: 0; line-height: 1.3; }
.cm-rec-quem small { color: var(--texto-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rec-num { text-align: right; display: grid; line-height: 1; }
.cm-rec-num strong { font: italic 800 clamp(34px, 8vw, 44px)/1 var(--display); color: var(--verde); }
.cm-rec-num span { color: var(--texto-2); font-size: 13px; margin-top: 4px; }
.cm-rec-nota { grid-column: 1 / -1; font-size: 14px; color: var(--texto-2); }
.cm-rec-nota .ph-fill { color: var(--verde); }
.cm-rec-nota a { color: var(--verde); }

/* constância */
.cm-mes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.cm-mes strong { font: 800 22px/1 var(--display); text-transform: uppercase; text-align: center; flex: 1; }
.cm-mes .chip-bt { text-decoration: none; padding: 8px 12px; font-size: 14px; flex: none; }
.cm-eu { display: flex; gap: 12px; align-items: center; background: var(--cartao); border: 1.5px solid var(--verde); border-radius: var(--raio); padding: 14px 16px; margin-bottom: 18px; }
.cm-eu i { font-size: 28px; color: var(--verde); flex: none; }
.cm-eu strong { color: var(--verde); }
.cm-rk-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cm-rk { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "pos quem dias" ". barra barra"; gap: 6px 12px; align-items: center; background: var(--cartao); border-radius: 16px; padding: 12px 16px; }
.cm-rk.eu { outline: 2px solid var(--verde); outline-offset: -2px; }
.cm-pos { grid-area: pos; font: 800 26px/1 var(--display); color: var(--texto-2); }
.cm-rk.p1 .cm-pos, .cm-home-top .p1 .cm-pos { color: var(--verde); }
.cm-rk-quem { grid-area: quem; display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; min-width: 0; }
.cm-rk-quem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rk-quem:hover span { color: var(--verde); }
.cm-rk-dias { grid-area: dias; color: var(--texto-2); font-size: 14px; white-space: nowrap; }
.cm-rk-dias b { font: 800 26px/1 var(--display); color: var(--texto); margin-right: 2px; }
.cm-barra { grid-area: barra; height: 5px; background: #1c1c1c; border-radius: 5px; overflow: hidden; }
.cm-barra i { display: block; height: 100%; background: var(--verde); border-radius: 5px; }

/* agenda */
.ag-lista { display: grid; gap: 14px; }
.ag-dia { font: 800 24px/1 var(--display); text-transform: uppercase; margin: 14px 0 0; }
.ag-dia:first-child { margin-top: 0; }
.ag-dia em { font-style: normal; font-size: 12px; font-family: var(--corpo); letter-spacing: .08em; background: var(--verde); color: var(--sobre-verde); padding: 3px 9px; border-radius: 999px; vertical-align: 4px; margin-left: 6px; }
.ag-card { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: start; background: var(--cartao); border-radius: var(--raio); padding: 16px; }
.ag-hora strong { font: 800 34px/1 var(--display); color: var(--verde); }
.ag-info h3 { font: 800 24px/1.05 var(--display); text-transform: uppercase; margin-bottom: 6px; }
.ag-avulso { font: 700 11px/1 var(--corpo); letter-spacing: .08em; border: 1.5px solid var(--verde); color: var(--verde); padding: 3px 8px; border-radius: 999px; vertical-align: 4px; margin-left: 6px; }
.ag-info p { font-size: 15px; color: var(--texto-2); }
.ag-info p .ph { color: var(--verde); margin-right: 6px; vertical-align: -2px; }
.ag-info a { color: var(--verde); }
.ag-obs { margin-top: 4px; }
.ag-quem { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 30px; flex-wrap: wrap; }
.ag-avs { display: inline-flex; }
.ag-avs a { margin-left: -8px; border-radius: 50%; }
.ag-avs a:first-child { margin-left: 0; }
.ag-avs .mu-av { width: 30px; height: 30px; font-size: 11px; border: 2px solid var(--cartao); }
.ag-mais { margin-left: -8px; width: 30px; height: 30px; border-radius: 50%; background: #1c1c1c; border: 2px solid var(--cartao); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.ag-n { font-size: 14px; color: var(--texto-2); }
.ag-n b { color: var(--texto); }
.ag-bt { align-self: center; }

/* primeiros passos */
.cm-passos { background: var(--cartao); border: 1.5px solid var(--verde); border-radius: var(--raio); padding: 16px 18px; margin-bottom: 20px; }
.cm-passos-topo { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cm-passos-topo h2 { font: 800 24px/1 var(--display); text-transform: uppercase; flex: 1; }
.cm-passos-topo span { color: var(--texto-2); font-size: 14px; }
.cm-passos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cm-passos li { display: flex; gap: 10px; align-items: center; padding: 5px 0; font-size: 16px; }
.cm-passos li i { font-size: 22px; color: var(--texto-3); flex: none; }
.cm-passos li.ok i { color: var(--verde); }
.cm-passos li.ok span { color: var(--texto-3); text-decoration: line-through; }
.cm-passos li a, .cm-passos li button { color: var(--texto); background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--verde); text-underline-offset: 4px; }
.cm-passos li a:hover, .cm-passos li button:hover { color: var(--verde); }

/* perfil: brasões, recordes, histórico */
.cm-sec { margin-bottom: 30px; }
.cm-sec-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cm-sec > .mu-h2 { margin-bottom: 12px; }
.cm-sec-topo .mu-h2 { margin: 0; }
.cm-h2-posts { margin-bottom: 14px; }
.cm-brasoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cm-bra { background: var(--cartao); border-radius: 16px; padding: 14px 12px; display: grid; justify-items: center; text-align: center; gap: 6px; }
.cm-bra i { font-size: 34px; }
.cm-bra strong { font-size: 14px; line-height: 1.25; }
.cm-bra small { color: var(--texto-3); font-size: 12px; line-height: 1.3; }
.cm-bra.on i { color: var(--verde); }
.cm-bra.off { background: transparent; border: 1.5px dashed var(--linha); }
.cm-bra.off i, .cm-bra.off strong { color: var(--texto-3); }
.cm-pr { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cm-pr-it { background: var(--cartao); border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.cm-pr-it span { color: var(--texto-2); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.cm-pr-it strong { font: italic 800 34px/1 var(--display); color: var(--verde); }
.cm-pr-it small { color: var(--texto-3); font-size: 13px; }
.cm-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-hist li { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; background: var(--cartao); border-radius: 14px; padding: 10px 12px; }
.cm-hist-d { text-align: center; line-height: 1.1; }
.cm-hist-d strong { display: block; font: 800 18px/1 var(--display); text-transform: uppercase; color: var(--verde); }
.cm-hist-d small { color: var(--texto-3); font-size: 12px; }
.cm-hist-i { display: grid; min-width: 0; }
.cm-hist-i b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-hist-i span { color: var(--texto-2); font-size: 14px; }
.cm-hist-i a { color: var(--verde); }
.cm-hist-a { display: flex; }

/* home */
.cm-home-top { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cm-home-top li { background: var(--cartao); border-radius: var(--raio); padding: 18px; display: grid; justify-items: center; gap: 8px; text-align: center; }
.cm-home-top a { display: grid; justify-items: center; gap: 8px; text-decoration: none; }
.cm-home-top a:hover strong { color: var(--verde); }
.cm-home-top .mu-av { width: 52px; height: 52px; }
.cm-home-top strong { font-size: 16px; }
.cm-hint { color: var(--texto-3); font-size: 14px; margin-left: 18px; }

@media (max-width: 860px) {
  .cm-home-top { gap: 10px; }
  .cm-home-top li { padding: 12px 8px; }
  .cm-home-top strong { font-size: 14px; }
  .cm-hint { display: block; margin: 8px 0 0; }
}
@media (max-width: 520px) {
  .ag-card { grid-template-columns: 62px 1fr; }
  .ag-hora strong { font-size: 28px; }
  .ag-bt { grid-column: 1 / -1; justify-self: stretch; text-align: center; justify-content: center; }
  .cm-rec { grid-template-columns: 1fr; }
  .cm-rec-num { text-align: left; }
  .cm-mes .chip-bt { padding: 8px 10px; }
  .cm-mes .chip-bt .ph { display: none; }
  .cm-brasoes { grid-template-columns: 1fr 1fr; }
}