/* Aba 4 — Meta do mês (prefixo .me-) */

.me [hidden] { display: none !important; }
.me .grade-12 > * { min-width: 0; }

/* números que podem ficar enormes: a fonte encolhe pra caber (JS põe --chars), sem quebrar linha */
.me .stat { container-type: inline-size; }
.me .stat .valor { white-space: nowrap; overflow-wrap: normal; font-size: min(clamp(19px, 2.2vw, 24px), calc(100cqi / (var(--chars, 8) * 0.64))); }
.me-traco { font: 700 18px/1 var(--f-mono); color: var(--texto-3); }

/* avisos: salário garantido > recebido, registro sem horas, prévia do lucro/prejuízo */
.me-aviso-sal, .me-aviso-form { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-2); border: 1px solid var(--borda-forte); background: var(--sup-2); color: var(--texto-2); }
.me-aviso-sal { margin-top: 12px; border-color: var(--alerta); background: var(--alerta-suave); }
.me-aviso-sal .ms, #me-sem-horas .ms { color: var(--alerta); flex: none; font-size: 18px; margin-top: 1px; }
#me-sem-horas { border-color: var(--alerta); background: var(--alerta-suave); }
.me-aviso-form .ms { flex: none; font-size: 18px; margin-top: 1px; color: var(--ok); }
.me-aviso-form b, .me-aviso-sal b { color: var(--texto); }
.me-aviso-form.me-aviso-prej { border-color: var(--perigo); background: var(--perigo-suave); }
.me-aviso-form.me-aviso-prej .ms, .me-aviso-form.me-aviso-prej b { color: var(--perigo); }
.me-prej-mini { color: var(--perigo); font-weight: 700; }
.me-sem-h { color: var(--alerta); font-weight: 700; }

/* ---------------------------------------------------------------- seletor de mês */
.me-mes { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-mes .rotulo::before { display: none; }
.me-mes-caixa { display: flex; align-items: center; gap: 6px; }
.me-mes-caixa select { min-width: 200px; font-family: var(--f-mono); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }

/* ---------------------------------------------------------------- aviso sem valor da hora */
.me-aviso { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-color: rgba(255, 185, 95, 0.4); background: linear-gradient(90deg, var(--ambar-suave), transparent 70%), var(--vidro); }
.me-aviso[hidden] { display: none; }
.me-aviso b { font-family: var(--f-titulo); text-transform: uppercase; }
.me-aviso .nota { margin-top: 2px; }
.me-aviso-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ambar-suave); color: var(--ambar); flex: none; }
.me-aviso-icone .ms { font-size: 26px; }

/* ---------------------------------------------------------------- anel 3D */
.me-anel-painel { overflow: visible; }
.me-palco { position: relative; display: grid; place-items: center; padding: 8px 0 20px; perspective: 900px; }
.me-anel-3d {
  position: relative; display: grid; place-items: center;
  transform: rotateX(16deg); transform-style: preserve-3d;
  animation: me-balanca 7s ease-in-out infinite;
}
@keyframes me-balanca { 0%, 100% { transform: rotateX(16deg) rotateY(-5deg); } 50% { transform: rotateX(12deg) rotateY(5deg); } }
.tilt.tilt-ativo .me-anel-3d { animation-play-state: paused; }

.me-anel { width: min(240px, 68vw); aspect-ratio: 1; }
.me-anel svg { width: 100%; height: 100%; }
/* disco de vidro atrás do anel */
.me-anel::before {
  content: ''; position: absolute; inset: 13%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.10), transparent 55%), radial-gradient(circle, var(--sup-2), var(--fundo) 90%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.06), inset 0 -14px 30px rgba(0, 0, 0, 0.45), 0 20px 40px -20px rgba(0, 0, 0, 0.8);
}
:root[data-tema="claro"] .me-anel::before {
  background: radial-gradient(circle at 35% 30%, #fff, transparent 60%), radial-gradient(circle, var(--sup-1), var(--sup-3) 95%);
  box-shadow: inset 0 2px 0 #fff, inset 0 -14px 30px rgba(60, 40, 20, 0.12), 0 20px 40px -20px rgba(60, 40, 20, 0.35);
}
.me-anel .trilha { stroke: var(--sup-3); }
.me-anel .me-marcas { stroke: var(--borda-forte); }
.me-anel .arco { transition: stroke-dashoffset 1.1s var(--ease); filter: drop-shadow(0 0 10px var(--laranja-glow)); }
.me-anel .me-reflexo { stroke: rgba(255, 255, 255, 0.35); stroke-linecap: round; mix-blend-mode: overlay; }
.me-stop-a { stop-color: #FF8A8A; }
.me-stop-b { stop-color: var(--perigo); }
.me-anel[data-sem="alerta"] .me-stop-a { stop-color: #FFE08A; }
.me-anel[data-sem="alerta"] .me-stop-b { stop-color: var(--laranja); }
.me-anel[data-sem="alerta"] .arco { filter: drop-shadow(0 0 12px var(--laranja-glow)); }
.me-anel[data-sem="ok"] .me-stop-a { stop-color: #9DF5CF; }
.me-anel[data-sem="ok"] .me-stop-b { stop-color: var(--ok); }
.me-anel[data-sem="ok"] .arco { filter: drop-shadow(0 0 12px var(--ok-suave)) drop-shadow(0 0 6px var(--ok)); }
.me-anel[data-sem="perigo"] .arco { filter: drop-shadow(0 0 10px var(--perigo-suave)); }

.me-centro { display: flex; flex-direction: column; align-items: center; gap: 4px; transform: translateZ(30px); }
.me-pct { font: 800 clamp(40px, 5vw, 54px)/1 var(--f-mono); letter-spacing: -.04em; color: var(--texto); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); }
.me-anel[data-sem="ok"] .me-pct { color: var(--ok); }
.me-horas { font-size: 12px; color: var(--texto-2); }
.me-chao {
  position: absolute; left: 50%; bottom: 4px; width: 62%; height: 26px; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(ellipse, var(--laranja-glow), transparent 70%); filter: blur(10px); opacity: .55;
}
.me-anel-painel[data-sem="ok"] .me-chao { background: radial-gradient(ellipse, var(--ok), transparent 70%); opacity: .3; }
.me-anel-painel[data-sem="perigo"] .me-chao { opacity: .3; }

.me-frase { display: flex; gap: 10px; align-items: flex-start; justify-content: center; text-align: left; margin: 4px 0 0; padding: 12px 14px; border-radius: var(--r-2); background: var(--sup-2); border: 1px solid var(--borda); font-size: 14.5px; color: var(--texto-2); }
.me-frase .ms { color: var(--laranja-claro); margin-top: 1px; }
.me-frase b { color: var(--texto); }
.me-frase[data-sem="ok"] { background: var(--ok-suave); border-color: var(--ok); color: var(--texto); }
.me-frase[data-sem="ok"] .ms, .me-frase[data-sem="ok"] b { color: var(--ok); }

/* ---------------------------------------------------------------- meta de salário */
.me-sal-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.me-sal-campo .entrada { font-size: 20px; }
.me-formula { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px; border-radius: var(--r-2); background: var(--sup-2); border: 1px dashed var(--borda-forte); margin-top: 22px; }
.me-f-bloco { display: flex; align-items: center; gap: 6px; }
.me-f-bloco b { font: 800 18px/1 var(--f-mono); color: var(--laranja-claro); }
.me-f-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: var(--laranja-suave); color: var(--laranja-claro); font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.me-f-chip .ms { font-size: 15px; }
.me-explica { margin-top: 16px; }
.me-stats .stat .nota { line-height: 1.4; }

/* ---------------------------------------------------------------- tabela */
.me-tabela .me-linha { cursor: pointer; outline: none; }
.me-tabela .me-linha:focus-visible { background: var(--laranja-suave); box-shadow: inset 3px 0 0 var(--laranja); }
.me-sv-nome { display: block; font-weight: 700; }
.me-sv-tempo { display: block; font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.me-td-faltam { white-space: nowrap; }
.me-faltam { font-size: 22px; color: var(--laranja-claro); }
.me-x { margin-left: 3px; color: var(--texto-3); font-family: var(--f-mono); }
.me-td-seta { width: 36px; color: var(--texto-3); }
.me-linha:hover .me-td-seta { color: var(--laranja-claro); }
.me-td-seta .ms { transition: transform .25s var(--mola); }
.me-linha:hover .me-td-seta .ms { transform: translateX(3px); }

/* ---------------------------------------------------------------- registrar */
.me-form { display: flex; flex-direction: column; gap: 14px; }
.me-form input[type="date"] { color-scheme: inherit; }
.me-form-pe { padding-top: 4px; }
.me-registrar.me-modo-editar { border-color: var(--laranja); box-shadow: var(--sombra-2), 0 0 0 1px var(--laranja-suave), 0 24px 60px -30px var(--laranja-glow); }

/* ---------------------------------------------------------------- histórico */
.me-hist { padding: 14px; }
.me-reg { gap: 12px; }
.me-data {
  width: 50px; height: 50px; flex: none; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: linear-gradient(160deg, var(--sup-4), var(--sup-2)); border: 1px solid var(--borda-forte); box-shadow: inset 0 1px 0 var(--brilho-topo);
}
.me-data b { font-size: 19px; }
.me-data i { font-style: normal; font-size: 10px; color: var(--texto-3); margin-top: 3px; }
.me-pago .me-data { border-color: rgba(61, 220, 151, 0.35); }
.me-reg { container-type: inline-size; }
.me-reg-valor { font-size: min(15.5px, calc(34cqi / (var(--chars, 8) * 0.62))); white-space: nowrap; }
.me-pill { border: 1px solid transparent; cursor: pointer; transition: transform .2s var(--mola), border-color .2s var(--ease); min-height: 30px; }
.me-pill:hover { transform: scale(1.05); border-color: currentColor; }
.me-pill:active { transform: scale(.95); }
.me-reg-acoes { display: flex; gap: 6px; flex: none; }
.me-lucro-mini { color: var(--ok); }
.me-editando { border-color: var(--laranja); background: var(--laranja-suave); }
.me-rodape { display: flex; align-items: center; gap: 8px; }
.me-rodape .ms { color: var(--laranja-claro); }

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 720px) {
  .me-sal-linha { grid-template-columns: 1fr; }
  .me-formula { margin-top: 0; }
  .me-mes, .me-mes-caixa { width: 100%; }
  .me-mes-caixa select { flex: 1; min-width: 0; }
  .me-stats.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-fin.grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .me-reg { flex-wrap: wrap; }
  .me-reg .info { flex: 1 1 calc(100% - 64px); }
  .me-reg-valor { margin-left: 0; flex: 1; font-size: min(15.5px, calc(48cqi / (var(--chars, 8) * 0.62))); }
  .me-reg { row-gap: 10px; }
  .me-pill { margin-left: 0; }
  .me-form-l2.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .me-stats.grade-2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .me-anel-3d { animation: none; }
}

/* tabela cabe no celular sem rolar de lado */
.me .tabela-wrap { position: relative; }
@media (max-width: 560px) {
  .me table.me-tabela { min-width: 0; }
  .me-tabela th, .me-tabela td { padding: 10px 8px; }
  .me-tabela th:first-child, .me-tabela td:first-child { padding-left: 12px; }
  .me-td-seta, .me-tabela th:last-child { display: none; }
  .me-faltam { font-size: 19px; }
}
@media (max-width: 420px) {
  .me-fin.grade-4 { grid-template-columns: 1fr; }
  .me-reg { gap: 8px; padding: 12px; }
  .me-pill .ms { display: none; }
}