/* =========================================================
   BLOCO 1 — BASE GLOBAL
========================================================= */

.app-fin{
  font-family:"Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================================================
   BLOCO 2 — FILTRO DE MÊS / CALENDÁRIO
========================================================= */

.app-fin-cal{
  position:relative !important;
  display:inline-block !important;
}

.app-fin-cal > button.app-fin-cal-btn{
  background:linear-gradient(135deg, #111827, #1F2937) !important;
  color:#fff !important;
  border:1px solid rgba(17,24,39,.08) !important;
  padding:12px 16px !important;
  border-radius:16px !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:12px !important;
  width:auto !important;
  min-height:48px !important;
  line-height:1 !important;
  text-decoration:none !important;
  user-select:none !important;
  box-shadow:0 14px 34px rgba(17,24,39,.18) !important;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.app-fin-cal > button.app-fin-cal-btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 18px 38px rgba(17,24,39,.22) !important;
}

.app-fin-cal > button.app-fin-cal-btn:focus,
.app-fin-cal > button.app-fin-cal-btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 4px rgba(20,184,166,.16), 0 18px 38px rgba(17,24,39,.22) !important;
}

.app-fin-cal > button.app-fin-cal-btn [data-cal-label]{
  font-weight:700 !important;
  font-size:14px !important;
  letter-spacing:-.01em !important;
}

.app-fin-cal-btn-chevron{
  opacity:.8;
  font-size:12px;
}

.app-fin-cal > .app-fin-cal-pop{
  position:absolute !important;
  left:50% !important;
  top:58px !important;
  transform:translateX(-50%) !important;
  width:352px !important;
  background:#fff !important;
  border:1px solid rgba(17,24,39,.06) !important;
  border-radius:22px !important;
  box-shadow:0 28px 60px rgba(0,0,0,.18) !important;
  padding:18px !important;
  z-index:99999 !important;
  box-sizing:border-box !important;
}

.app-fin-cal > .app-fin-cal-pop[aria-hidden="true"]{
  display:none !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head{
  display:grid !important;
  grid-template-columns:52px 1fr 52px !important;
  align-items:center !important;
  justify-items:center !important;
  text-align:center !important;
  margin-bottom:14px !important;
  background:linear-gradient(180deg, #F9FAFB, #F3F4F6) !important;
  border:1px solid rgba(17,24,39,.05) !important;
  padding:12px !important;
  border-radius:16px !important;
  gap:8px !important;
  box-sizing:border-box !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head [data-cal-year]{
  font-weight:800 !important;
  font-size:18px !important;
  color:#111827 !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-prev],
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-next]{
  height:42px !important;
  width:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:13px !important;
  border:1px solid rgba(17,24,39,.06) !important;
  background:#111827 !important;
  color:#fff !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer !important;
  line-height:1 !important;
  min-width:42px !important;
  max-width:42px !important;
  flex:0 0 42px !important;
  box-shadow:0 10px 20px rgba(17,24,39,.16) !important;
  transition:background .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-prev]:hover,
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-next]:hover{
  background:#0F766E !important;
  transform:translateY(-1px) !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-prev]:focus,
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-next]:focus,
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-prev]:focus-visible,
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-next]:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 4px rgba(20,184,166,.18), 0 10px 20px rgba(17,24,39,.16) !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-months{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:10px !important;
  box-sizing:border-box !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-months .app-fin-cal-month{
  appearance:none;
  border:none;
  background:#F9FAFB !important;
  border:1px solid rgba(17,24,39,.05) !important;
  padding:12px 8px !important;
  border-radius:14px !important;
  text-align:center !important;
  cursor:pointer !important;
  user-select:none !important;
  font-weight:700 !important;
  font-size:13px !important;
  color:#374151 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-months .app-fin-cal-month:hover{
  background:rgba(15,118,110,.08) !important;
  border-color:rgba(15,118,110,.14) !important;
  color:#111827 !important;
  transform:translateY(-1px) !important;
}

.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-months .app-fin-cal-month.active,
.app-fin-cal > .app-fin-cal-pop > .app-fin-cal-months .app-fin-cal-month.is-active{
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
  font-weight:700 !important;
  box-shadow:0 12px 24px rgba(17,24,39,.18) !important;
}

/* =========================================================
   BLOCO 3 — MOBILE
========================================================= */

@media (max-width: 420px){
  .app-fin-cal{
    width:100% !important;
  }

  .app-fin-cal > button.app-fin-cal-btn{
    width:100% !important;
    justify-content:center !important;
  }

  .app-fin-cal > .app-fin-cal-pop{
    left:8px !important;
    right:8px !important;
    transform:none !important;
    width:auto !important;
    top:56px !important;
  }

  .app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head{
    grid-template-columns:42px 1fr 42px !important;
    padding:10px !important;
  }

  .app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-prev],
  .app-fin-cal > .app-fin-cal-pop > .app-fin-cal-pop-head button[data-year-next]{
    height:40px !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    flex:0 0 40px !important;
  }
}