/* Tela "Meu plano" (2026-09-28): a faixa do topo, o cartão do plano com os anéis de consumo,
   a lojinha de extras e o histórico de compras. Carregado depois do tema Simple Agenda. */

/* Ponto no menu */
.sinal-robo.oculto { display: none; }
.sinal-robo.alerta { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.sinal-robo.cheio { background: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25); }

/* Cartão do plano + consumo */
.plano-meio { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; }
.plano-cartao {
  background: var(--tinta); color: #fff; border-radius: 20px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  animation: plano-sobe .7s cubic-bezier(.16, 1, .3, 1) both;
}
.plano-cartao > small { color: #9FD3D4; font-size: 14px; }
.plano-cartao h2 { margin: 0; font: 800 28px/1.1 var(--sans); letter-spacing: -0.02em; }
.plano-valor { margin: 0; font: 800 40px/1 var(--sans); color: #6EE7B7; letter-spacing: -0.02em; }
.plano-valor small { font-size: 14px; color: #C9D3E6; font-weight: 600; letter-spacing: 0; }
.plano-cartao ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #D5DCEA; font-size: 14px; }
.plano-cartao li { display: flex; gap: 8px; }
.plano-cartao li::before { content: '✓'; color: var(--verde); font-weight: 800; }
.plano-pagamento { margin: auto 0 0; color: #9AA8C4; font-size: 13px; }
.plano-cartao .botao { align-self: flex-start; background: none; border-color: #6EE7B7; color: #6EE7B7; }
.plano-cartao .botao:hover { background: rgba(110, 231, 183, 0.12); }
.plano-cartao .botao[hidden] { display: none; }

.plano-consumo {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; padding: 22px;
  display: flex; flex-direction: column; justify-content: center; gap: 18px;
  animation: plano-sobe .7s .08s cubic-bezier(.16, 1, .3, 1) both;
}
.plano-aviso {
  margin: 0; background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; border-radius: 14px;
  padding: 12px 16px; font-size: 14px; font-weight: 600; animation: plano-aviso .6s .5s cubic-bezier(.16, 1, .3, 1) both;
}
.plano-aviso b { color: var(--tinta); }
.plano-aviso.cheio { background: #FEF2F2; border-color: #FECACA; color: #991B1B; }
.plano-aviso[hidden] { display: none; }

.plano-aneis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.anel { --cor-anel: var(--verde); display: flex; flex-direction: column; align-items: center; text-align: center; }
.anel.alerta { --cor-anel: #F59E0B; }
.anel.cheio { --cor-anel: #EF4444; }
.anel svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 12; }
.anel .fundo { stroke: var(--cinza-suave); }
.anel .vai { stroke: var(--cor-anel); stroke-linecap: round; transition: stroke-dashoffset 1.4s cubic-bezier(.16, 1, .3, 1); }
.anel .meio { margin-top: -98px; height: 64px; display: flex; flex-direction: column; justify-content: center; }
.anel .meio b { font: 800 26px/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.anel .meio span { font-size: 12px; color: var(--tinta-2); font-weight: 600; margin-top: 3px; }
.anel .nome { margin-top: 30px; font-weight: 700; }
.anel.cheio .nome::after { content: ' · no limite'; color: #B91C1C; font-weight: 600; font-size: 13px; }

/* Lojinha */
.plano-loja { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 16px; }
.plano-item {
  position: relative; background: var(--superficie); border: 1px solid var(--linha); border-radius: 20px; padding: 22px;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s, border-color .25s;
  animation: plano-sobe .7s cubic-bezier(.16, 1, .3, 1) both;
}
.plano-item:nth-child(2) { animation-delay: .1s; }
.plano-item:nth-child(3) { animation-delay: .2s; }
.plano-item:hover { transform: translateY(-4px); border-color: var(--verde); box-shadow: 0 18px 36px -22px rgba(5, 150, 105, 0.6); }
.plano-item .ic {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--verde-suave); color: #065F46; font: 800 22px var(--sans); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.plano-item:hover .ic { transform: rotate(-8deg) scale(1.08); }
.plano-item h3 { margin: 0; font: 800 18px/1.2 var(--sans); }
.plano-item .suave { margin: 0; color: var(--tinta-2); font-size: 13px; flex: 1; }
.plano-item .preco { margin: 0; font: 800 30px/1 var(--sans); letter-spacing: -0.02em; }
.plano-item .preco small { font-size: 13px; color: var(--tinta-2); font-weight: 600; letter-spacing: 0; }
.plano-item .botao { align-self: stretch; }
.plano-item .botao:disabled { background: #FEF3C7; border-color: #FDE68A; color: #92400E; cursor: default; opacity: 1; }
.plano-item .etq {
  position: absolute; top: 16px; right: 16px; font-size: 12px; font-weight: 800;
  background: #FEF3C7; color: #92400E; border-radius: 999px; padding: 3px 10px;
}
.plano-item.chamando { animation: plano-chama 1.2s ease-out; }

/* Histórico */
.plano-historico { margin-top: 16px; }
.selo-compra { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.selo-compra.ok { background: var(--verde-suave); color: #065F46; }
.selo-compra.esp { background: #FEF3C7; color: #92400E; }
.selo-compra.nao { background: var(--cinza-suave); color: var(--tinta-2); }
.vazio-plano { margin: 0; padding: 18px 20px; color: var(--tinta-2); font-size: 14px; }

/* Janela de compra */
#dialogo-compra .compra-preco { font: 800 32px/1 var(--sans); color: var(--tinta); letter-spacing: -0.02em; margin: 0 0 12px; }
#dialogo-compra .compra-preco small { font-size: 14px; color: var(--tinta-2); font-weight: 600; letter-spacing: 0; }
#dialogo-compra .suave { font-size: 13px; background: var(--fundo); border-radius: 12px; padding: 10px 12px; }
#dialogo-compra[open] { animation: plano-janela .35s cubic-bezier(.16, 1, .3, 1); }

@keyframes plano-sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes plano-aviso { from { opacity: 0; transform: translateX(-12px); } }
@keyframes plano-janela { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes plano-chama {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); border-color: var(--verde); }
  100% { box-shadow: 0 0 0 18px rgba(16, 185, 129, 0); }
}

@media (max-width: 900px) {
  .plano-meio { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .plano-aneis { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .plano-cartao, .plano-consumo, .plano-aviso, .plano-item, #dialogo-compra[open], .plano-item.chamando { animation: none; }
  .anel .vai, .plano-item, .plano-item .ic { transition: none; }
}