/* Estrelas e medalhas (Fase 11 · web 10, 11 e 12). Barras e trilhos reaproveitam guarda.css
   (.trilho/.enche-*); botão sol de memorias.css. */
.ponto { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--okf-ink-muted); }
.ponto-azul { background: var(--okf-azul); }
.ponto-verde { background: var(--okf-verde-strong); }
.ponto-coral { background: var(--okf-coral); }
.ponto-sol { background: var(--okf-sol); }
.ponto-vermelho { background: var(--okf-vermelho); }
.ponto-neutro { background: var(--okf-ink-muted); }
.ponto-petroleo { background: var(--okf-petroleo); box-shadow: 0 0 0 2px var(--okf-sol); }
.ic-estrela, .ic-estrela-contorno { color: var(--okf-sol); }
.ic-estrela { fill: var(--okf-sol); }
.linha-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--okf-space-3); }
.btn-tracejado { width: 100%; min-height: 52px; margin-top: var(--okf-space-3); border: 2px dashed var(--okf-line); border-radius: var(--okf-radius-md);
  background: transparent; color: var(--okf-ink); font: var(--okf-font-label); display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; }
.btn-tracejado:hover { border-color: var(--okf-ink-muted); }

/* ---------------------------------------------------------------- painel (10 e 11) */
.grade-estrelas { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--okf-space-6); align-items: start; }
.col-estrelas { display: flex; flex-direction: column; gap: var(--okf-space-6); min-width: 0; }
.faixa-quadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--okf-space-6); }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--okf-space-6); }
.quadro { display: flex; flex-direction: column; gap: var(--okf-space-3); }
.quadro-topo { display: flex; align-items: center; gap: var(--okf-space-3); }
.quadro-topo .corpo { flex: 1; min-width: 0; }
.quadro-topo h2 { margin: 0; font: var(--okf-font-title); font-size: 26px; }
.quadro-topo small { font: var(--okf-font-label); color: var(--okf-ink-muted); font-weight: 600; }
.quadro-topo .semana { display: inline-flex; align-items: center; gap: 8px; font: var(--okf-font-display); font-size: 40px; }
.quadro-topo .semana .ic { width: 30px; height: 30px; }
.grafico { list-style: none; margin: var(--okf-space-4) 0 0; padding: 0; height: 130px; display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 10px; align-items: end; border-bottom: 1px solid var(--okf-line); }
.grafico .barra { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.grafico .coluna { width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--okf-sol) 45%, var(--okf-surface-raised)); }
.grafico .atual .coluna { background: var(--okf-sol); box-shadow: inset 0 0 0 3px var(--okf-petroleo); }
.grafico .pico { font: var(--okf-font-caption); font-weight: 800; }
.grafico-rodape { display: flex; justify-content: space-between; font: var(--okf-font-caption); color: var(--okf-ink-muted); font-weight: 600; }
.chips-medalhas { display: flex; flex-wrap: wrap; gap: var(--okf-space-2); margin-top: var(--okf-space-2); }
.chip-medalha { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--okf-radius-pill);
  background: var(--okf-sol-soft); font: var(--okf-font-label); }
.chip-medalha.chip-apagado { background: var(--okf-surface-sunken); color: var(--okf-ink-muted); }
.quadro-texto { margin: auto 0 0; color: var(--okf-ink-muted); }
.aviso-ranking { margin: 0; display: flex; gap: var(--okf-space-3); align-items: flex-start; padding: var(--okf-space-4) var(--okf-space-6);
  border-radius: var(--okf-radius-lg); background: var(--okf-azul-soft); color: var(--okf-ink); }
.aviso-ranking .ic { color: var(--okf-azul); margin-top: 2px; }
.lista-estrelas { list-style: none; margin: 0; padding: 0; }
.lista-estrelas li { display: flex; gap: var(--okf-space-3); align-items: center; padding: var(--okf-space-3) 0; }
.lista-estrelas li + li { border-top: 1px solid var(--okf-line); }
.lista-estrelas .corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lista-estrelas .corpo strong { font: var(--okf-font-heading); font-size: 16px; }
.lista-estrelas .corpo small { font: var(--okf-font-caption); color: var(--okf-ink-muted); font-weight: 600; }
.lista-estrelas .mais { font: var(--okf-font-heading); }
.cartao-mes { display: flex; flex-direction: column; }
.barras-mes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--okf-space-3); }
.barras-mes li { display: grid; grid-template-columns: minmax(96px, 1.1fr) minmax(60px, 1fr) 32px; gap: var(--okf-space-3); align-items: center; font: var(--okf-font-label); }
.barras-mes strong { text-align: right; }
.cartao-mes .nota { margin-top: auto; padding-top: var(--okf-space-6); }

.painel-dar { position: sticky; top: var(--okf-space-6); background: var(--okf-petroleo); color: var(--okf-on-petroleo);
  border-radius: var(--okf-radius-lg); padding: var(--okf-space-6); }
.painel-dar h2 { margin: 0 0 var(--okf-space-4); font: var(--okf-font-title); }
.painel-dar legend, .painel-dar label { color: color-mix(in srgb, var(--okf-on-petroleo) 85%, transparent); font: var(--okf-font-label); }
.painel-dar fieldset { border: 0; margin: 0; padding: 0; }
.painel-dar legend { margin-bottom: var(--okf-space-2); }
.opcoes-dar { display: flex; flex-wrap: wrap; gap: var(--okf-space-2); }
.opcoes-2, .opcoes-3 { display: grid; grid-template-columns: repeat(2, 1fr); }
.opcoes-3 { grid-template-columns: repeat(3, 1fr); }
.opcao { position: relative; cursor: pointer; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span { display: grid; place-items: center; min-height: 48px; padding: 0 16px; border-radius: var(--okf-radius-pill);
  background: color-mix(in srgb, var(--okf-on-petroleo) 12%, var(--okf-petroleo)); color: var(--okf-on-petroleo); font: var(--okf-font-label); font-weight: 800; }
.opcoes-2 .opcao span { border-radius: var(--okf-radius-md); min-height: 60px; font: var(--okf-font-heading); }
.opcao-num span { border-radius: var(--okf-radius-md); min-height: 60px; font: var(--okf-font-title); }
.opcao input:checked + span { background: var(--okf-sol); color: var(--okf-petroleo); }
.opcao input:focus-visible + span { outline: 2px solid var(--okf-sol); outline-offset: 2px; }
.painel-dar input[name="recado"] { background: color-mix(in srgb, var(--okf-on-petroleo) 12%, var(--okf-petroleo)); color: var(--okf-on-petroleo);
  border-color: transparent; }
.painel-dar input[name="recado"]::placeholder { color: color-mix(in srgb, var(--okf-on-petroleo) 60%, transparent); }
.dica-dar { margin: 0; font: var(--okf-font-caption); font-size: 13px; color: color-mix(in srgb, var(--okf-on-petroleo) 80%, transparent); }
.btn-grande { width: 100%; min-height: 60px; }
.painel-dar .erro { color: var(--okf-ink); }
.entregue { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--okf-space-3); padding: var(--okf-space-6) 0; }
.entregue h2 { margin: 0; }
.entregue p { margin: 0; color: color-mix(in srgb, var(--okf-on-petroleo) 88%, transparent); }
.estrela-grande { width: 96px; height: 96px; fill: var(--okf-sol); stroke: var(--okf-sol-soft); }
.btn-claro { background: var(--okf-surface-raised); color: var(--okf-ink); margin-top: var(--okf-space-2); }
.medalha-nova { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: var(--okf-radius-pill);
  background: color-mix(in srgb, var(--okf-sol) 25%, var(--okf-petroleo)); }

/* ---------------------------------------------------------------- regras e recompensas (12) */
.cabeca-regras { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--okf-space-4); flex-wrap: wrap; }
.cabeca-volta { display: flex; gap: var(--okf-space-4); align-items: center; }
.btn-volta { width: 52px; padding: 0; border-radius: 50%; }
.grade-regras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--okf-space-6); align-items: start; }
.col-regras { display: flex; flex-direction: column; gap: var(--okf-space-6); }
.grade-regras .secao-titulo { margin: 0; }
.t-quem { margin-top: var(--okf-space-8) !important; margin-bottom: var(--okf-space-2) !important; }
.lista-motivos, .lista-quem-da, .lista-premios, .lista-medalhas { list-style: none; margin: var(--okf-space-3) 0 0; padding: 0; }
.lista-motivos li + li { border-top: 1px solid var(--okf-line); }
.lista-motivos button { width: 100%; display: flex; align-items: center; gap: var(--okf-space-3); min-height: 60px; padding: 0; border: 0;
  background: none; color: var(--okf-ink); font: var(--okf-font-heading); font-size: 16px; text-align: left; cursor: pointer; }
.lista-motivos .nome { flex: 1; }
.lista-motivos .faixa { min-width: 36px; padding: 4px 10px; border-radius: var(--okf-radius-pill); background: var(--okf-sol-soft);
  font: var(--okf-font-label); text-align: center; }
.lista-quem-da li { display: flex; align-items: center; gap: var(--okf-space-3); min-height: 64px; }
.lista-quem-da .nome { flex: 1; font: var(--okf-font-heading); font-size: 16px; }
.cartao-uso { display: flex; flex-direction: column; gap: var(--okf-space-3); }
.uso-topo { display: flex; align-items: center; gap: var(--okf-space-3); }
.uso-topo .secao-titulo { flex: 1; font-size: 22px !important; }
.troca-caixa { display: flex; justify-content: space-between; align-items: center; gap: var(--okf-space-3); padding: var(--okf-space-4) var(--okf-space-6);
  border-radius: var(--okf-radius-md); background: var(--okf-sol-soft); }
.troca-caixa strong { display: inline-flex; align-items: center; gap: 8px; font: var(--okf-font-title); }
.troca-caixa small { font: var(--okf-font-caption); font-weight: 800; text-align: right; }
.lista-premios { display: flex; flex-direction: column; gap: var(--okf-space-2); }
.lista-premios button { width: 100%; display: flex; align-items: center; gap: var(--okf-space-4); min-height: 60px; padding: 0 var(--okf-space-4);
  border: 0; border-radius: var(--okf-radius-md); background: var(--okf-surface-sunken); color: var(--okf-ink); text-align: left;
  font: var(--okf-font-label); cursor: pointer; }
.lista-premios button strong { font: var(--okf-font-title); min-width: 36px; }
.lista-premios button span { flex: 1; }
.lista-premios button.atual { background: var(--okf-verde-soft); }
.lista-premios button small { color: var(--okf-verde-strong); font-weight: 800; }
.cartao-escuro { background: var(--okf-petroleo); color: var(--okf-on-petroleo); border-radius: var(--okf-radius-lg); padding: var(--okf-space-6); }
.cartao-escuro h2 { margin: 0 0 var(--okf-space-2); font: var(--okf-font-heading); }
.cartao-escuro p { margin: 0; color: color-mix(in srgb, var(--okf-on-petroleo) 85%, transparent); }
.cartao-medalhas { display: flex; flex-direction: column; min-height: 100%; }
.cartao-medalhas .secao-cabeca { margin: 0; }
.cartao-medalhas .secao-cabeca .btn { white-space: nowrap; min-height: 40px; padding: 0 14px; font-size: 15px; flex: none; }
.lista-medalhas { flex: 1; }
.lista-medalhas li + li { border-top: 1px solid var(--okf-line); }
.lista-medalhas button { width: 100%; display: flex; align-items: center; gap: var(--okf-space-3); padding: var(--okf-space-3) 0; border: 0;
  background: none; color: var(--okf-ink); text-align: left; cursor: pointer; }
.lista-medalhas .corpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lista-medalhas strong { font: var(--okf-font-heading); }
.lista-medalhas small { font: var(--okf-font-caption); color: var(--okf-ink-muted); font-weight: 600; }
.lista-medalhas .quem-tem { font: var(--okf-font-label); font-weight: 800; text-align: right; }
.medalha-circulo { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--okf-on-verde); }
.medalha-circulo .ic { width: 26px; height: 26px; }
.medalha-grande { width: 72px; height: 72px; }
.med-azul { background: var(--okf-azul); }
.med-verde { background: var(--okf-verde-strong); }
.med-coral { background: var(--okf-coral); }
.med-sol { background: var(--okf-sol); color: var(--okf-petroleo); }
.med-vermelho { background: var(--okf-vermelho); }
.med-petroleo { background: var(--okf-petroleo); color: var(--okf-sol); box-shadow: 0 0 0 3px var(--okf-sol); }
.faixa-memorias-medalha { margin: var(--okf-space-6) 0 0; padding: var(--okf-space-4); border-radius: var(--okf-radius-md); background: var(--okf-sol-soft); }
.faixa-pronto { margin: 0; padding: var(--okf-space-3) var(--okf-space-4); border-radius: var(--okf-radius-md); background: var(--okf-verde-soft); }
.grade-icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: var(--okf-space-2); }
.icone-opcao { position: relative; cursor: pointer; }
.icone-opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.icone-opcao span { display: grid; place-items: center; height: 48px; border-radius: var(--okf-radius-md); background: var(--okf-surface-sunken); }
.icone-opcao input:checked + span { background: var(--okf-sol); color: var(--okf-petroleo); }
.icone-opcao input:focus-visible + span { outline: 2px solid var(--okf-azul); outline-offset: 2px; }
.form-editar { margin-top: var(--okf-space-6); padding-top: var(--okf-space-6); border-top: 1px solid var(--okf-line); }

@media (max-width: 1280px) {
  .grade-regras { grid-template-columns: 1fr 1fr; }
  .cartao-medalhas { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .grade-estrelas { grid-template-columns: 1fr; }
  .painel-dar { position: static; }
}
@media (max-width: 760px) {
  .grade-2, .grade-regras { grid-template-columns: 1fr; }
  .faixa-quadros { grid-template-columns: 1fr; }
  .barras-mes li { grid-template-columns: minmax(0, 1fr) 90px 28px; }
  .linha-3 { grid-template-columns: 1fr; }
}