/* O CARTAO DO MES (Resultados).                             09/09/2026

   Arquivo proprio, carregado so por relatorios.html: o cartao e da tela, e o
   painel.css ja carrega camadas demais de historia para receber mais uma
   secao que so uma tela usa.

   A LINGUAGEM: o numero grande e o que ja fechou; a barra e a meta que ELE
   definiu, com um risco marcando onde ele precisaria estar HOJE para bater no
   fim do mes. Verde e "meta batida", e so isso - o resto e o vermelho da
   marca. O historico dos meses e uma fileira de barrinhas, nao um grafico:
   e comparacao de relance, nao analise. */

body.v3 .o-mes .mes-corpo {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(200px, 1fr);
  gap: 24px;
  padding: 20px;
  align-items: start;
}
body.v3 .o-mes .rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #a1a1aa;
  margin-bottom: 8px;
}

/* ---- o numero do mes ---- */
body.v3 .o-mes .mes-numero strong {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 38px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
body.v3 .o-mes .variacao {
  display: inline-grid; gap: 2px;
  margin-top: 10px;
  font-family: var(--fonte-titulo);
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.v3 .o-mes .variacao small {
  font-family: var(--fonte-corpo, inherit);
  font-size: 11.5px; font-weight: 400; letter-spacing: 0;
  color: #8a8a92;
}
body.v3 .o-mes .variacao.sobe { color: #3ddc97; }
body.v3 .o-mes .variacao.desce { color: #f0596b; }
body.v3 .o-mes .variacao.nova { color: #8a8a92; }

/* ---- a meta ---- */
body.v3 .o-mes .meta-cabeca { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
body.v3 .o-mes .meta-cabeca .rotulo { margin: 0; }
body.v3 .o-mes .meta-cabeca b {
  font-family: var(--fonte-titulo);
  font-size: 18px; font-variant-numeric: tabular-nums; color: #ededed;
  margin-right: auto;
}
body.v3 .o-mes .trilho-da-meta {
  position: relative;
  height: 10px;
  margin: 14px 0 10px;
  border-radius: 999px;
  background: #1c1c20;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  overflow: visible;
}
body.v3 .o-mes .trilho-da-meta i {
  display: block; height: 100%;
  width: var(--p, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cor-do-nivel, #e0203f) 55%, #000), var(--cor-do-nivel, #e0203f));
  box-shadow: 0 0 14px color-mix(in srgb, var(--cor-do-nivel, #e0203f) 45%, transparent);
  /* A barra da meta ANIMA de propósito, e o numero nao: crescer ate a marca
     e o que faz o progresso ser sentido. Dinheiro continua trocando de uma
     vez, sem contagem. */
  transform-origin: left center;
  transition: width .7s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}
/* onde ele precisaria estar HOJE para bater no fim do mes */
body.v3 .o-mes .marca-do-ritmo {
  position: absolute; top: -4px; bottom: -4px;
  left: var(--r, 0%);
  width: 2px;
  background: rgba(255, 255, 255, .45);
  border-radius: 2px;
  text-decoration: none;
}
body.v3 .o-mes .marca-do-ritmo::after {
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: rgba(255, 255, 255, .55);
}
body.v3 .o-mes .meta-pe {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px; color: #a1a1aa;
}
body.v3 .o-mes .meta-pe .apagado { color: #8a8a92; }
body.v3 .o-mes .meta-pe .bom { color: #3ddc97; }
body.v3 .o-mes .nivel {
  font-family: var(--fonte-titulo);
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  color: var(--cor-do-nivel, #e0203f);
  border: 1px solid color-mix(in srgb, var(--cor-do-nivel, #e0203f) 40%, transparent);
  background: color-mix(in srgb, var(--cor-do-nivel, #e0203f) 10%, transparent);
}
body.v3 .o-mes .sem-meta p { margin: 0 0 12px; font-size: 12.5px; color: #8a8a92; line-height: 1.5; }

/* ---- os tres miudos ---- */
body.v3 .o-mes .mes-miudos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
body.v3 .o-mes .mes-miudos li { display: grid; gap: 2px; }
body.v3 .o-mes .mes-miudos span {
  font-family: var(--fonte-titulo);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: #8a8a92;
}
body.v3 .o-mes .mes-miudos b { font-family: var(--fonte-titulo); font-size: 17px; color: #ededed; font-variant-numeric: tabular-nums; }
body.v3 .o-mes .mes-miudos small { font-size: 11px; color: #8a8a92; }

/* ---- a fileira dos meses ---- */
body.v3 .o-mes .meses-anteriores {
  list-style: none; margin: 0; padding: 14px 20px 18px;
  display: flex; align-items: flex-end; gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  min-height: 0;
}
/* O `li` da a ALTURA e a barra ocupa uma fracao dela. Antes a barra usava
   `calc(var(--h) * .42)` com --h em porcentagem, e porcentagem de altura
   dentro de um grid sem altura definida resolve para zero: as barras
   apareciam como riscos de 3px. */
body.v3 .o-mes .meses-anteriores li {
  display: grid; grid-template-rows: 1fr auto; gap: 6px;
  justify-items: center; align-items: end;
  height: 74px; flex: 1 1 0; min-width: 0;
}
body.v3 .o-mes .meses-anteriores i {
  display: block; width: 100%; max-width: 46px;
  height: var(--h, 0%); min-height: 3px;
  align-self: end;
  border-radius: 4px 4px 0 0;
  background: #2a2a2e;
  transition: background-color .2s, transform .2s cubic-bezier(.16, 1, .3, 1);
  transform-origin: bottom center;
}
body.v3 .o-mes .meses-anteriores li:hover i { transform: scaleY(1.06); background: #3f3f46; }
body.v3 .o-mes .meses-anteriores li.atual i { background: linear-gradient(180deg, #ec2e4d, #d81c3a); }
body.v3 .o-mes .meses-anteriores span {
  font-family: var(--fonte-titulo);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a92;
}
body.v3 .o-mes .meses-anteriores li.atual span { color: #ededed; }

@media (max-width: 1100px) {
  body.v3 .o-mes .mes-corpo { grid-template-columns: 1fr 1fr; }
  body.v3 .o-mes .mes-miudos { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  body.v3 .o-mes .mes-corpo { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  body.v3 .o-mes .mes-miudos { grid-template-columns: 1fr; }
  body.v3 .o-mes .mes-numero strong { font-size: 32px; }
}

/* ---- A CAIXA DA META (15/09/2026): no lugar do prompt() do navegador ---- */
.veu-da-meta { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 20px; background: rgba(5, 5, 6, .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s var(--curva); }
.veu-da-meta.aberta { opacity: 1; }
.caixa-da-meta {
  /* SAIA PELA DIREITA NO CELULAR (17/09/2026). Medido a 375px: a caixa
     nascia com 401px de largura e passava 46px para fora - "o que aparece na
     minha tela fica saindo para fora da tela". O `100%` sozinho nao segura,
     porque o item do grid tem min-width automatico e o titulo longo empurra.
     Amarrar ao VISOR resolve os dois. */
  width: min(460px, 100%); max-width: calc(100vw - 32px); min-width: 0;
  display: grid; gap: 12px; padding: 26px; border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .08); background: var(--painel);
  box-shadow: 0 0 0 1px rgba(224, 32, 63, .08), 0 0 60px rgba(224, 32, 63, .14), 0 40px 100px rgba(0, 0, 0, .6);
  transform: translateY(12px) scale(.98); transition: transform .26s var(--curva-2);
}
.veu-da-meta.aberta .caixa-da-meta { transform: none; }
.caixa-da-meta .assinatura { font: 700 11px/1 var(--fonte-titulo); letter-spacing: .2em; text-transform: uppercase; color: var(--vermelho-claro); }
.caixa-da-meta h3 { margin: 0; font: 700 20px/1.25 var(--fonte-titulo); letter-spacing: -.01em; color: #fff; }
.caixa-da-meta p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fraco); }
.entrada-da-meta { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 16px; margin-top: 4px; border-radius: 14px; border: 1px solid var(--linha-viva); background: var(--painel-2); transition: border-color .18s var(--curva), box-shadow .18s var(--curva); }
.entrada-da-meta:focus-within { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(224, 32, 63, .22), 0 0 24px rgba(224, 32, 63, .25); }
.entrada-da-meta span { font: 700 14px/1 var(--fonte-mono); color: var(--fraco); }
.entrada-da-meta input { flex: 1; min-width: 0; height: auto; border: 0; padding: 0; background: transparent; color: var(--texto); font: 700 24px/1 var(--fonte-titulo); font-variant-numeric: tabular-nums; outline: none; box-shadow: none; }
.acoes-da-meta { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .veu-da-meta, .caixa-da-meta { transition: none; } }

/* No celular a caixa usa a tela toda que sobra, com menos respiro interno:
   26px de padding em 375px deixava o campo do valor estreito demais. */
@media (max-width: 480px) {
  .veu-da-meta { padding: 12px; }
  .caixa-da-meta { padding: 18px; gap: 10px; border-radius: 18px; }
  .caixa-da-meta h3 { font-size: 17px; }
  .acoes-da-meta { flex-wrap: wrap; }
  .acoes-da-meta .acao { flex: 1 1 130px; }
}