/* ==================================================
   MEU CANTINHO ♡
   STYLE.CSS COMPLETO
   Visual rosé, moderno e responsivo
================================================== */

/* =========================
   1. CORES E CONFIGURAÇÕES
========================= */

:root {
  --rosa: #b77b87;
  --rosa-escuro: #915d6b;
  --rosa-hover: #a56b79;
  --rosa-claro: #f8e9ec;
  --rosa-suave: #fff2f5;
  --rose-gold: #bd8c85;
  --lilas: #a982b5;
  --lilas-claro: #f4edf7;
  --pessego-claro: #fff1eb;

  --fundo: #fcf7f8;
  --fundo-card: #ffffff;
  --fundo-sidebar: #ffffff;

  --texto: #604a52;
  --texto-secundario: #927d85;
  --texto-claro: #b09ca4;

  --borda: #efdee3;
  --borda-forte: #e8cdd5;

  --verde: #35866a;
  --verde-claro: #e8f6ef;

  --vermelho: #c45c6c;
  --vermelho-claro: #fff0f2;

  --amarelo: #b78b3d;
  --amarelo-claro: #fff7e7;

  --sombra: 0 8px 28px rgba(117, 71, 85, 0.06);
  --sombra-hover: 0 14px 36px rgba(117, 71, 85, 0.11);

  --raio: 20px;
  --raio-pequeno: 12px;

  --sidebar-largura: 260px;
}

/* =========================
   2. RESET GERAL
========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.6;
  min-height: 100vh;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(183, 123, 135, 0.35);
  outline-offset: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
  font-weight: 700;
}

p {
  color: var(--texto-secundario);
}

.escondido {
  display: none !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(57, 34, 43, 0.42);
  backdrop-filter: blur(4px);
}

.modal-card {
  width: min(100%, 410px);
  padding: 30px;
  border: 1px solid var(--borda);
  border-radius: 24px;
  background: var(--fundo-card);
  box-shadow: 0 20px 60px rgba(70, 38, 51, 0.2);
  text-align: center;
  animation: aparecer 0.2s ease;
}

.modal-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 15px;
  border-radius: 18px;
  background: var(--rosa-claro);
  color: var(--rosa);
  font-size: 30px;
}

.modal-card h2 {
  color: var(--rosa-escuro);
  font-size: 22px;
}

.modal-card p {
  margin: 10px 0 24px;
  color: var(--texto-secundario);
  font-size: 14px;
}

.modal-acoes {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.modal-acoes button {
  min-width: 125px;
  padding: 11px 16px;
  border-radius: 12px;
  font-weight: 700;
}

.botao-modal-secundario {
  border: 1px solid var(--borda-forte);
  background: var(--fundo-card);
  color: var(--texto);
}

.botao-modal-secundario:hover {
  background: var(--rosa-suave);
}

.botao-modal-principal {
  border: 1px solid var(--rosa);
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: #ffffff;
}

.botao-modal-principal:hover {
  background: linear-gradient(135deg, var(--rosa-hover), var(--rosa-escuro));
}

.botao-modal-perigo {
  min-width: 125px;
  padding: 11px 16px;
  border: 1px solid var(--vermelho);
  border-radius: 12px;
  background: var(--vermelho);
  color: #ffffff;
  font-weight: 700;
}

.botao-modal-perigo:hover {
  filter: brightness(0.94);
}

.aviso-aplicacao {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  padding: 14px 17px;
  border: 1px solid var(--borda-forte);
  border-radius: 16px;
  background: var(--fundo-card);
  color: var(--texto);
  box-shadow: 0 16px 36px rgba(70, 38, 51, 0.18);
  animation: aviso-entrar 0.25s ease;
}

.aviso-aplicacao-icone {
  color: var(--rosa);
  font-size: 22px;
}

@keyframes aviso-entrar {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================
   3. TELA DE ENTRADA
========================= */

.entrada {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(232, 191, 202, 0.45),
      transparent 36%
    ),
    radial-gradient(
      circle at 85% 85%,
      rgba(232, 191, 202, 0.35),
      transparent 35%
    ),
    linear-gradient(135deg, #fff8fa, #f9eaee);
}

.entrada::before,
.entrada::after {
  content: "♡";
  position: absolute;
  color: rgba(183, 123, 135, 0.13);
  font-size: 180px;
  line-height: 1;
  pointer-events: none;
  animation: coracao-fundo 6s ease-in-out infinite;
}

.entrada::before {
  top: 4%;
  left: 7%;
  animation-delay: -1.5s;
}

.entrada::after {
  right: 7%;
  bottom: 1%;
  animation-delay: -4s;
}

.card-entrada {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 52px 42px 44px;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 24px 70px rgba(117, 71, 85, 0.14),
    0 2px 0 rgba(255, 255, 255, 0.9) inset;
  text-align: center;
  backdrop-filter: blur(8px);
}

.coracao {
  width: 82px;
  height: 82px;
  margin: 0 auto 24px;
  border: 1px solid rgba(183, 123, 135, 0.12);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff1f4, #f6dfe5);
  color: var(--rosa);
  font-size: 52px;
  box-shadow: 0 10px 24px rgba(183, 123, 135, 0.12);
  animation: coracao-mexendo 2.4s ease-in-out infinite;
}

.card-entrada h1 {
  font-size: 31px;
  letter-spacing: -0.5px;
  color: var(--rosa-escuro);
  margin-bottom: 10px;
}

.card-entrada p {
  font-size: 14px;
  max-width: 310px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.card-entrada form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.card-entrada form label {
  margin-left: 2px;
}

.card-entrada input {
  min-height: 50px;
  border-radius: 14px;
  border-color: #e5bfc9;
  background: #fffafb;
  box-shadow: 0 4px 12px rgba(117, 71, 85, 0.04) inset;
}

.card-entrada input::placeholder {
  color: #b08a96;
}

.card-entrada input:focus {
  border-color: var(--rosa);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(183, 123, 135, 0.13);
}

.card-entrada .botao-principal {
  min-height: 50px;
  margin-top: 2px;
  border-radius: 14px;
  background: linear-gradient(135deg, #bd7f8d, #965f6e);
  box-shadow: 0 9px 18px rgba(145, 93, 107, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.card-entrada .botao-principal:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 12px 22px rgba(145, 93, 107, 0.26);
}

/* =========================
   4. FORMULÁRIOS GERAIS
========================= */

label {
  display: block;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
}

input:not([type="checkbox"]),
textarea,
select {
  width: 100%;
  min-width: 0;
  background: #fffafb;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pequeno);
  padding: 12px 14px;
  color: var(--texto);
  font-size: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

input::placeholder,
textarea::placeholder {
  color: #b6a3aa;
}

input:not([type="checkbox"]):focus,
textarea:focus,
select:focus {
  border-color: var(--rosa);
  outline: none;
  box-shadow: 0 0 0 3px rgba(183, 123, 135, 0.12);
}

textarea {
  resize: vertical;
  min-height: 90px;
}

input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--rosa);
  cursor: pointer;
  flex-shrink: 0;
}

.botao-principal {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 13px 18px;
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.botao-principal:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(183, 123, 135, 0.25);
}

.botao-cancelar {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: #ffffff;
  color: var(--texto-secundario);
  font-weight: 600;
}

.botao-cancelar:hover {
  background: var(--rosa-suave);
}

/* =========================
   5. ESTRUTURA DO APP
========================= */

.app {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  width: var(--sidebar-largura);
  background: var(--fundo-sidebar);
  border-right: 1px solid var(--borda);
  display: flex;
  flex-direction: column;
  padding: 28px 18px;
  overflow-y: auto;
}

.logo {
  text-align: center;
  padding: 8px 10px 28px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 22px;
}

.logo-coracao {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border-radius: 18px;
  background: var(--rosa-claro);
  color: var(--rosa);
  font-size: 36px;
}

.logo h2 {
  color: var(--rosa-escuro);
  font-size: 20px;
  margin-bottom: 3px;
}

.logo p {
  font-size: 12px;
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  border: none;
  border-radius: 13px;
  padding: 13px 16px;
  background: transparent;
  color: var(--texto-secundario);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.menu-item:hover {
  background: var(--rosa-suave);
  color: var(--rosa-escuro);
}

.menu-item.ativo {
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  box-shadow: inset 3px 0 0 var(--rosa);
}

.menu-rodape {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}

.botao-sair {
  width: 100%;
  border: 1px solid var(--borda-forte);
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  border-radius: 12px;
  padding: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}

.botao-sair:hover {
  background: var(--rosa-suave);
  border-color: var(--rosa);
}

.menu-rodape small {
  color: var(--texto-claro);
  font-size: 11px;
}

.conteudo {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-largura);
}

.topbar {
  min-height: 78px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--borda);
  padding: 16px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.topbar-titulo {
  display: flex;
  flex-direction: column;
}

.topbar-titulo span {
  color: var(--texto-secundario);
  font-size: 12px;
}

.topbar-titulo strong {
  color: var(--texto);
  font-size: 14px;
  text-transform: capitalize;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--rosa-claro);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rosa-escuro);
  font-size: 27px;
  flex-shrink: 0;
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 10px;
}

.botao-utilitario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--fundo-card);
  box-shadow: 0 4px 12px rgba(117, 71, 85, 0.06);
  color: var(--rosa-escuro);
  font-size: 12px;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.botao-utilitario:hover {
  background: var(--rosa-claro);
  box-shadow: 0 7px 16px rgba(117, 71, 85, 0.12);
  transform: translateY(-1px);
}

.seletor-tema {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  background: var(--fundo-card);
  color: var(--rosa-escuro);
}

.seletor-tema select {
  width: auto;
  min-height: 26px;
  padding: 3px 22px 3px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
}

.seletor-tema select:focus {
  box-shadow: none;
}

.seletor-tema-icone {
  font-size: 18px;
}

.visualmente-escondido {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.botao-utilitario:active {
  transform: translateY(0);
}

#exportar-dados {
  background: linear-gradient(135deg, var(--rosa), var(--rosa-escuro));
  border-color: var(--rosa);
  color: #ffffff;
}

#exportar-dados:hover {
  background: linear-gradient(135deg, var(--rosa-hover), var(--rosa-escuro));
}

#importar-dados {
  background: var(--rosa-suave);
}

.botao-utilitario > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  font-size: 16px;
  line-height: 1;
}

.botao-menu {
  display: none;
  border: none;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 22px;
}

.area-principal {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 34px;
}

.pagina {
  width: 100%;
  min-width: 0;
  animation: aparecer 0.25s ease;
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes coracao-mexendo {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  25% {
    transform: translateY(-5px) scale(1.04) rotate(-3deg);
  }

  50% {
    transform: translateY(0) scale(1.08) rotate(0deg);
  }

  75% {
    transform: translateY(-5px) scale(1.04) rotate(3deg);
  }
}

@keyframes coracao-fundo {
  0%,
  100% {
    transform: translateY(0) rotate(-18deg) scale(1);
  }

  50% {
    transform: translateY(-14px) rotate(-8deg) scale(1.05);
  }
}

/* =========================
   6. DASHBOARD
========================= */

.boas-vindas-painel {
  padding: 36px;
  background: linear-gradient(115deg, #b77b87, #986775, #825665);
  border-radius: 24px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  margin-bottom: 34px;
  box-shadow: var(--sombra);
}

.boas-vindas-painel::after {
  content: "♡";
  position: absolute;
  right: 25px;
  top: -55px;
  font-size: 240px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

.etiqueta {
  display: inline-block;
  color: var(--rosa);
  background: var(--rosa-claro);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}

.boas-vindas-painel .etiqueta {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.boas-vindas-painel h1 {
  font-size: clamp(25px, 3vw, 35px);
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.boas-vindas-painel #mensagem-boas-vindas {
  display: inline-block;
  margin: 0 0 15px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: clamp(18px, 2.2vw, 25px);
  font-weight: 700;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

.boas-vindas-painel p {
  color: rgba(255, 255, 255, 0.88);
  position: relative;
  z-index: 1;
}

.boas-vindas-painel #mensagem-boas-vindas + p {
  margin-top: 0;
}

.titulo-secao {
  margin-bottom: 20px;
}

.titulo-secao h2 {
  font-size: 21px;
  margin-bottom: 5px;
}

.titulo-secao p {
  font-size: 13px;
}

.resumo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.resumo-grid:not(.resumo-grid-secundario) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 42px;
}

.titulo-visao-geral {
  margin-top: 6px;
}

.resumo-card {
  min-height: 194px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.resumo-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--rosa-suave);
  opacity: 0.8;
  pointer-events: none;
}

.resumo-card:hover {
  transform: translateY(-5px);
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-hover);
}

.resumo-icone {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(183, 123, 135, 0.12);
  border-radius: 17px;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  box-shadow: 0 7px 16px rgba(117, 71, 85, 0.08);
}

.resumo-card p {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1.45;
  min-height: 38px;
  margin-bottom: 8px;
}

.resumo-card strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 35px;
  color: var(--texto);
  line-height: 1.2;
}

.resumo-grid-secundario .resumo-card {
  min-height: 182px;
}

.resumo-card-financeiro strong {
  color: var(--verde);
  font-size: clamp(22px, 2.2vw, 32px);
}

.resumo-card:nth-child(2) .resumo-icone {
  color: #a8733c;
  background: var(--pessego-claro);
}

.resumo-card:nth-child(3) .resumo-icone {
  color: var(--rosa);
}

.resumo-card:nth-child(4) {
  background: linear-gradient(145deg, #ffffff 35%, #fff0f1);
}

.resumo-card:nth-child(4) .resumo-icone {
  color: var(--rose-gold);
  background: #f9e8e5;
}

.resumo-card:nth-child(5) .resumo-icone {
  color: var(--lilas);
  background: var(--lilas-claro);
}

.resumo-card:nth-child(6) .resumo-icone {
  color: var(--vermelho);
  background: var(--vermelho-claro);
}

.resumo-card:nth-child(7) .resumo-icone {
  color: var(--verde);
  background: var(--verde-claro);
}

.resumo-card:nth-child(5) {
  background: linear-gradient(145deg, #ffffff 35%, var(--lilas-claro));
}

.resumo-card:nth-child(6) {
  background: linear-gradient(145deg, #ffffff 35%, #fff1f3);
}

.resumo-card:nth-child(7) {
  background: linear-gradient(145deg, #ffffff 35%, #eef8f3);
}

.proximos-painel {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 80;
  width: min(270px, calc(100vw - 44px));
  margin: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 24px;
  background: linear-gradient(115deg, #b77b87, #986775, #825665);
  box-shadow: 0 16px 38px rgba(117, 71, 85, 0.2);
  animation: subir-notificacao 0.35s ease;
}

.proximos-painel::after {
  content: "♡";
  position: absolute;
  right: 8px;
  bottom: -34px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.1);
  font-size: 150px;
  line-height: 1;
  pointer-events: none;
}

@keyframes subir-notificacao {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.proximos-cabecalho {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.proximos-cabecalho h2 {
  color: #ffffff;
  font-size: 14px;
}

.proximos-cabecalho p {
  display: none;
  color: rgba(255, 255, 255, 0.82);
}

.botao-ver-todos {
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
}

.botao-ver-todos:hover {
  background: rgba(255, 255, 255, 0.26);
}

.proximos-lista {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.proximo-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 9px;
  flex-direction: row;
  gap: 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  text-align: left;
  box-shadow: var(--sombra);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.proximo-item::after {
  content: "♡";
  position: absolute;
  right: 12px;
  top: 8px;
  color: rgba(183, 123, 135, 0.2);
  font-size: 24px;
}

.proximo-item:hover,
.proximo-item:focus-visible {
  transform: translateY(-5px) rotate(-1deg);
  box-shadow: var(--sombra-hover);
}

.proximo-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 57px;
  padding: 5px 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(117, 71, 85, 0.08);
}

.proximo-data strong {
  font-size: 12px;
}

.proximo-data small {
  font-size: 9px;
}

.proximo-detalhes {
  min-width: 0;
  width: 100%;
}

.proximo-detalhes h3 {
  overflow: hidden;
  color: #ffffff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proximo-detalhes span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 10px;
}

.compromisso-modal-card {
  position: relative;
}

.compromisso-modal-icone {
  background: var(--rosa-claro);
}

.compromisso-modal-categoria {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--rosa-suave);
  color: var(--rosa-escuro);
  font-size: 12px;
  font-weight: 700;
}

#compromisso-modal-detalhes {
  white-space: pre-line;
}

.proximos-vazio {
  padding: 18px;
  border: 1px dashed var(--borda-forte);
  border-radius: 14px;
  color: var(--texto-secundario);
  text-align: center;
  font-size: 13px;
}

.modulos-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.modulo-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 9px;
  box-shadow: var(--sombra);
  transition: all 0.2s;
}

.modulo-card:hover {
  transform: translateY(-4px);
  border-color: var(--borda-forte);
  box-shadow: var(--sombra-hover);
}

.modulo-card span {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  border-radius: 15px;
  font-size: 23px;
  margin-bottom: 8px;
}

.modulo-card strong {
  color: var(--texto);
  font-size: 16px;
}

.modulo-card small {
  color: var(--texto-secundario);
  font-size: 12px;
}

.configuracoes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.configuracao-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  box-shadow: var(--sombra);
}

.configuracao-card h2 {
  color: var(--texto);
  font-size: 18px;
}

.configuracao-card p {
  min-height: 42px;
  color: var(--texto-secundario);
  font-size: 13px;
}

.configuracao-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  font-size: 24px;
}

.configuracao-card > .botao-principal,
.configuracao-card > .botao-modal-perigo,
.configuracao-card > select {
  width: 100%;
}

.configuracao-card > select {
  background: var(--fundo-card);
}

.configuracao-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.configuracao-acoes button {
  flex: 1 1 150px;
}

.configuracao-perigo {
  border-color: rgba(196, 92, 108, 0.35);
}

/* =========================
   7. CABEÇALHOS E CARTÕES
========================= */

.cabecalho-pagina {
  margin-bottom: 26px;
}

.botao-voltar-inicio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 14px;
  padding: 7px 14px 7px 9px;
  border: 1px solid rgba(183, 123, 135, 0.26);
  border-radius: 13px;
  background: linear-gradient(135deg, var(--rosa-suave), #ffffff);
  color: var(--rosa-escuro);
  box-shadow: 0 5px 14px rgba(117, 71, 85, 0.07);
  font-size: 12px;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.botao-voltar-inicio > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--rosa-claro);
  color: var(--rosa);
  font-size: 16px;
}

.botao-voltar-inicio:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--rosa-claro), #ffffff);
  box-shadow: 0 9px 20px rgba(117, 71, 85, 0.12);
}

.cabecalho-pagina h1 {
  font-size: clamp(25px, 3vw, 32px);
  margin-bottom: 8px;
  color: var(--texto);
}

.botao-sair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.trocar-nome-icone {
  color: var(--rosa);
  font-size: 19px;
  line-height: 1;
}

.cabecalho-pagina p {
  font-size: 14px;
}

.pagina-card {
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 24px;
  box-shadow: var(--sombra);
}

/* =========================
   8. INDICADORES
========================= */

.tarefas-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.tarefa-indicador {
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: 17px;
  padding: 20px 22px;
  box-shadow: var(--sombra);
}

.tarefa-indicador span {
  display: block;
  color: var(--texto-secundario);
  font-size: 13px;
  margin-bottom: 8px;
}

.tarefa-indicador strong {
  display: block;
  font-size: 28px;
  line-height: 1.2;
  color: var(--rosa-escuro);
}

.agenda-resumo .tarefa-indicador {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #e8b8c2, #d9a8b4, #c997a5);
  box-shadow: var(--sombra);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.agenda-resumo .tarefa-indicador::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -30px;
  color: rgba(255, 255, 255, 0.11);
  font-size: 105px;
  line-height: 1;
  pointer-events: none;
}

.agenda-resumo .tarefa-indicador span,
.agenda-resumo .tarefa-indicador strong {
  position: relative;
  z-index: 1;
  color: #704b57;
}

.agenda-resumo .tarefa-indicador:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

/* =========================
   9. LAYOUTS DOS MÓDULOS
========================= */

.tarefas-layout,
.financeiro-layout,
.anotacoes-layout,
.lembretes-layout,
.metas-layout,
.menstrual-layout {
  display: grid;
  grid-template-columns:
    minmax(290px, 380px)
    minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.tarefas-formulario,
.tarefas-listagem,
.agenda-calendario,
.agenda-formulario,
.agenda-compromissos,
.financeiro-formulario,
.financeiro-historico,
.anotacoes-formulario,
.anotacoes-listagem,
.lembretes-formulario,
.lembretes-listagem,
.metas-formulario,
.metas-listagem,
.menstrual-formulario,
.menstrual-resumo,
.menstrual-historico {
  min-width: 0;
  background: #ffffff;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 26px;
  box-shadow: var(--sombra);
}

.agenda-calendario {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #b77b87, #986775, #825665);
  color: #ffffff;
}

.agenda-calendario::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -78px;
  z-index: 0;
  color: rgba(255, 255, 255, 0.1);
  font-size: 260px;
  line-height: 1;
  pointer-events: none;
}

.agenda-calendario > * {
  position: relative;
  z-index: 1;
}

.agenda-calendario h2,
.agenda-calendario .agenda-semana span {
  color: #ffffff;
}

.agenda-calendario .agenda-navegacao button {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.agenda-calendario .agenda-navegacao button:hover {
  background: rgba(255, 255, 255, 0.26);
}

.agenda-calendario .agenda-dias button,
.agenda-calendario .agenda-dias .dia,
.agenda-calendario .agenda-dias .agenda-dia {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
}

.agenda-calendario .agenda-dias button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
}

.agenda-calendario .agenda-dias .hoje,
.agenda-calendario .agenda-dias .dia-hoje {
  border-color: #ffffff;
}

.agenda-calendario .agenda-dias .selecionado,
.agenda-calendario .agenda-dias .dia-selecionado {
  background: #ffffff;
  color: var(--rosa-escuro);
  animation: destacar-dia 0.35s ease;
}

.agenda-calendario .agenda-dias button:active {
  transform: scale(0.9);
}

@keyframes destacar-dia {
  0% {
    transform: scale(0.86);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);
  }

  60% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.12);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.tarefas-formulario h2,
.tarefas-listagem h2,
.agenda-calendario h2,
.agenda-formulario h2,
.agenda-compromissos h2,
.financeiro-formulario h2,
.financeiro-historico h2,
.anotacoes-formulario h2,
.anotacoes-listagem h2,
.lembretes-formulario h2,
.lembretes-listagem h2,
.metas-formulario h2,
.metas-listagem h2,
.menstrual-formulario h2,
.menstrual-resumo h2,
.menstrual-historico h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.tarefas-formulario > p,
.agenda-formulario > p {
  font-size: 13px;
  margin-bottom: 18px;
}

.tarefas-formulario form,
.agenda-formulario form,
.financeiro-formulario form,
.anotacoes-formulario form,
.lembretes-formulario form,
.metas-formulario form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.menstrual-formulario form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.menstrual-formulario .campo-ajuda {
  color: var(--texto-secundario);
  font-size: 12px;
  margin-top: -6px;
}

.menstrual-resumo {
  background: linear-gradient(145deg, #fffafb, var(--rosa-suave));
}

.menstrual-destaque {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  margin-top: 18px;
  border-radius: 16px;
  background: linear-gradient(115deg, #b77b87, #986775);
  color: #ffffff;
}

.menstrual-destaque strong {
  font-size: 26px;
}

.menstrual-destaque span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.menstrual-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.menstrual-info-grid div {
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo-card);
}

.menstrual-media {
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--fundo-card);
}

.menstrual-media span,
.menstrual-media strong {
  display: block;
}

.menstrual-media span {
  color: var(--texto-secundario);
  font-size: 11px;
}

.menstrual-media strong {
  margin-top: 4px;
  font-size: 15px;
}

.menstrual-info-grid span,
.menstrual-info-grid strong {
  display: block;
}

.menstrual-info-grid span {
  color: var(--texto-secundario);
  font-size: 11px;
}

.menstrual-info-grid strong {
  margin-top: 5px;
  font-size: 15px;
}

.menstrual-privacidade {
  margin-top: 18px;
  font-size: 12px;
}

#menstrual-fertil {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #ead4ef;
  border-radius: 12px;
  background: var(--lilas-claro);
}

.menstrual-fertil span {
  color: var(--texto-secundario);
  font-size: 12px;
}

.menstrual-historico {
  margin-top: 24px;
}

.menstrual-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.menstrual-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--borda);
  border-radius: 14px;
  background: #fffafb;
}

.menstrual-item small {
  color: var(--texto-secundario);
}

.menstrual-item button {
  border: 1px solid #f7dce1;
  border-radius: 10px;
  padding: 8px 11px;
  background: var(--vermelho-claro);
  color: var(--vermelho);
  font-size: 12px;
}

.menstrual-vazio {
  padding: 25px;
  border: 1px dashed var(--borda-forte);
  border-radius: 14px;
  color: var(--texto-secundario);
  text-align: center;
}

.menstrual-calendario {
  margin-top: 24px;
  padding: 26px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo-card);
  box-shadow: var(--sombra);
}

.menstrual-calendario-topo,
.menstrual-semana,
.menstrual-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.menstrual-calendario-topo {
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  margin-bottom: 18px;
}

.menstrual-calendario-topo h2 {
  text-align: center;
  text-transform: capitalize;
}

.menstrual-calendario-topo button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  font-size: 24px;
}

.menstrual-semana {
  margin-bottom: 8px;
  color: var(--texto-secundario);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.menstrual-dias > div {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto);
  font-size: 13px;
}

.menstrual-dias .menstrual-dia-vazio {
  border-color: transparent;
}

.menstrual-dias .menstrual-hoje {
  box-shadow: inset 0 0 0 2px var(--rosa);
}

.menstrual-dias .menstrual-inicio {
  background: var(--rosa);
  border-color: var(--rosa);
  color: #ffffff;
}

.menstrual-dias .menstrual-previsao {
  background: var(--pessego-claro);
  border-color: var(--rose-gold);
  color: var(--rosa-escuro);
}

.menstrual-dias .menstrual-fertil {
  border-color: #d7b8df;
  background: var(--lilas-claro);
  color: var(--lilas);
}

.menstrual-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
  color: var(--texto-secundario);
  font-size: 12px;
}

.menstrual-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.menstrual-marca {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--rosa);
}

.menstrual-marca.menstrual-previsao {
  background: var(--pessego-claro);
  border: 1px solid var(--rose-gold);
}

.menstrual-marca.menstrual-fertil {
  background: var(--lilas-claro);
  border: 1px solid #d7b8df;
}

.tarefas-formulario form label:not(:first-child),
.agenda-formulario form label:not(:first-child),
.financeiro-formulario form label:not(:first-child),
.anotacoes-formulario form label:not(:first-child),
.lembretes-formulario form label:not(:first-child),
.metas-formulario form label:not(:first-child) {
  margin-top: 4px;
}

/* =========================
   10. FILTROS
========================= */

.filtros-tarefas,
.financeiro-filtros,
.anotacoes-filtros,
.lembretes-filtros,
.metas-filtros {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.filtro-tarefa,
.filtro-financeiro,
.filtro-anotacao,
.filtro-lembrete,
.filtro-meta {
  background: #fffafb;
  border: 1px solid var(--borda);
  border-radius: 24px;
  padding: 9px 15px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-secundario);
  transition: all 0.2s;
}

.filtro-tarefa:hover,
.filtro-financeiro:hover,
.filtro-anotacao:hover,
.filtro-lembrete:hover,
.filtro-meta:hover {
  border-color: var(--rosa);
  color: var(--rosa-escuro);
}

.filtro-tarefa.ativo,
.filtro-financeiro.ativo,
.filtro-anotacao.ativo,
.filtro-lembrete.ativo,
.filtro-meta.ativo {
  background: var(--rosa);
  border-color: var(--rosa);
  color: #ffffff;
}

/* =========================
   11. LISTAS E BOTÕES
========================= */

.lista-tarefas,
.agenda-lista,
.financeiro-lista,
.anotacoes-lista,
.lembretes-lista,
.metas-lista {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.pesquisa-modulo {
  margin-top: 12px;
  min-height: 40px;
  border-radius: 12px;
}

.tarefas-lista-topo .pesquisa-modulo,
.financeiro-lista-topo .pesquisa-modulo,
.lembretes-lista-topo .pesquisa-modulo,
.metas-lista-topo .pesquisa-modulo {
  display: block;
}

.tarefa-item,
.agenda-item,
.financeiro-item,
.anotacao-item,
.lembrete-item,
.meta-item {
  min-width: 0;
  background: #fffafb;
  border: 1px solid var(--borda);
  border-radius: 15px;
  padding: 18px;
  transition: border-color 0.2s;
}

.tarefa-item:hover,
.agenda-item:hover,
.financeiro-item:hover,
.anotacao-item:hover,
.lembrete-item:hover,
.meta-item:hover {
  border-color: var(--borda-forte);
}

.tarefa-item h3,
.agenda-item h3,
.financeiro-item h3,
.anotacao-item h3,
.lembrete-item h3,
.meta-item h3 {
  font-size: 15px;
  overflow-wrap: anywhere;
}

.tarefa-item p,
.agenda-item p,
.financeiro-item p,
.anotacao-item p,
.lembrete-item p,
.meta-item p {
  font-size: 13px;
  margin-top: 7px;
  overflow-wrap: anywhere;
}

.tarefa-item small,
.agenda-item small,
.financeiro-item small,
.anotacao-item small,
.lembrete-item small,
.meta-item small {
  font-size: 12px;
  color: var(--texto-secundario);
}

.tarefa-acoes,
.agenda-acoes,
.financeiro-acoes,
.anotacao-acoes,
.lembrete-acoes,
.meta-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
}

.tarefa-acoes button,
.agenda-acoes button,
.financeiro-acoes button,
.anotacao-acoes button,
.lembrete-acoes button,
.meta-acoes button {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 9px 13px;
  background: #ffffff;
  color: var(--rosa-escuro);
  font-size: 12px;
  font-weight: 600;
}

.tarefa-acoes button:hover,
.agenda-acoes button:hover,
.financeiro-acoes button:hover,
.anotacao-acoes button:hover,
.lembrete-acoes button:hover,
.meta-acoes button:hover {
  background: var(--rosa-claro);
}

.tarefa-acoes .excluir,
.agenda-acoes .excluir,
.financeiro-acoes .excluir,
.anotacao-acoes .excluir,
.lembrete-acoes .excluir,
.meta-acoes .excluir {
  color: var(--vermelho);
  background: var(--vermelho-claro);
  border-color: #f7dce1;
}

.tarefas-vazio,
.agenda-vazio,
.financeiro-vazio,
.anotacoes-vazio,
.lembretes-vazio,
.metas-vazio {
  text-align: center;
  padding: 32px 20px;
  color: var(--texto-secundario);
  background: #fffafb;
  border: 1px dashed var(--borda-forte);
  border-radius: 15px;
}

/* =========================
   12. TAREFAS
========================= */

.tarefa-linha {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tarefa-check {
  margin-top: 3px;
}

.tarefa-conteudo {
  flex: 1;
  min-width: 0;
}

.tarefa-item.concluida {
  opacity: 0.72;
}

.tarefa-item.concluida h3 {
  text-decoration: line-through;
}

.tarefa-detalhes {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 10px;
}

.prioridade-baixa,
.prioridade-media,
.prioridade-alta {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.prioridade-baixa {
  color: var(--verde);
  background: var(--verde-claro);
}

.prioridade-media {
  color: var(--amarelo);
  background: var(--amarelo-claro);
}

.prioridade-alta {
  color: var(--vermelho);
  background: var(--vermelho-claro);
}

.tarefa-data-texto {
  font-size: 12px;
  color: var(--texto-secundario);
}

/* =========================
   13. AGENDA E CALENDÁRIO
========================= */

.agenda-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(300px, 0.85fr);
  gap: 24px;
  align-items: start;
}

.agenda-calendario-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.agenda-calendario-topo h2 {
  text-transform: capitalize;
  margin: 0;
}

.agenda-navegacao {
  display: flex;
  align-items: center;
  gap: 7px;
}

.agenda-navegacao button {
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: #fffafb;
  color: var(--rosa-escuro);
  min-width: 37px;
  height: 37px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 700;
}

.agenda-navegacao button:hover {
  background: var(--rosa-claro);
}

.agenda-semana,
.agenda-dias {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.agenda-semana {
  margin-bottom: 10px;
}

.agenda-semana span {
  text-align: center;
  color: var(--texto-secundario);
  font-size: 11px;
  font-weight: 700;
  padding: 7px 0;
}

.agenda-dias {
  min-height: 310px;
  align-content: start;
}

.agenda-dias button,
.agenda-dias .dia,
.agenda-dias .agenda-dia {
  min-width: 0;
  min-height: 49px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #fffafb;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.agenda-dias button:hover {
  background: var(--rosa-claro);
  border-color: var(--borda-forte);
}

.agenda-dias .hoje,
.agenda-dias .dia-hoje {
  border-color: var(--rosa);
  color: var(--rosa-escuro);
  font-weight: 800;
}

.agenda-dias .selecionado,
.agenda-dias .dia-selecionado {
  background: var(--rosa);
  color: #ffffff;
}

.agenda-dias .outro-mes,
.agenda-dias .dia-vazio {
  background: transparent;
  color: var(--texto-claro);
  opacity: 0.45;
}

.agenda-dias .tem-evento::after,
.agenda-dias .tem-compromisso::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--rosa);
}

.agenda-dias .selecionado.tem-evento::after,
.agenda-dias .selecionado.tem-compromisso::after {
  background: #ffffff;
}

.agenda-compromissos {
  margin-top: 24px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 26px;
  background: linear-gradient(145deg, #fff8fa, #f8e9ec);
  box-shadow: var(--sombra);
}

.agenda-compromissos::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -72px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 230px;
  line-height: 1;
  pointer-events: none;
}

.agenda-compromissos > * {
  position: relative;
  z-index: 1;
}

#agenda-data-selecionada {
  font-size: 13px;
  margin-top: 5px;
}

.agenda-item {
  border-left: 4px solid var(--rosa);
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--borda-forte);
}

.agenda-item-detalhes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

.agenda-horario,
.agenda-categoria {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--rosa-claro);
  color: var(--rosa-escuro);
  font-size: 11px;
  font-weight: 700;
}

/* =========================
   14. FINANCEIRO
========================= */

.financeiro-periodo {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: linear-gradient(115deg, #f8e9ec, #fff5f7);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 22px;
  box-shadow: var(--sombra);
}

.financeiro-periodo::after {
  content: "♡";
  position: absolute;
  right: 18px;
  bottom: -52px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 180px;
  line-height: 1;
  pointer-events: none;
}

.financeiro-periodo > * {
  position: relative;
  z-index: 1;
}

.financeiro-periodo h2 {
  font-size: 18px;
}

.financeiro-navegacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.financeiro-navegacao strong {
  min-width: 125px;
  text-align: center;
  text-transform: capitalize;
  font-size: 13px;
}

.financeiro-navegacao button {
  border: 1px solid var(--borda);
  background: var(--rosa-suave);
  color: var(--rosa-escuro);
  border-radius: 10px;
  min-height: 37px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 700;
}

.financeiro-navegacao button:hover {
  background: var(--rosa-claro);
}

.financeiro-navegacao button:active {
  transform: scale(0.92);
}

.financeiro-resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}

.financeiro-card {
  min-width: 0;
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 25px;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.financeiro-card::after {
  content: "♡";
  position: absolute;
  right: 8px;
  bottom: -34px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 125px;
  line-height: 1;
  pointer-events: none;
}

.financeiro-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.financeiro-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--rosa);
}

.financeiro-card.receita::before {
  background: var(--verde);
}

.financeiro-card.despesa::before {
  background: var(--vermelho);
}

.financeiro-card.saldo::before {
  background: var(--rosa);
}

.financeiro-card span {
  color: var(--texto-secundario);
  font-size: 13px;
  font-weight: 700;
}

.financeiro-card strong {
  display: block;
  font-size: clamp(21px, 2.3vw, 30px);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.financeiro-card.receita strong {
  color: var(--verde);
}

.financeiro-card.despesa strong {
  color: var(--vermelho);
}

.financeiro-card.saldo strong {
  color: var(--rosa-escuro);
}

.financeiro-card.receita {
  background: linear-gradient(145deg, #ffffff 35%, #eef8f3);
}

.financeiro-card.despesa {
  background: linear-gradient(145deg, #ffffff 35%, #fff1f3);
}

.financeiro-card.saldo {
  background: linear-gradient(145deg, #ffffff 35%, #f8e9ec);
}

.financeiro-card-topo,
.financeiro-card p,
.financeiro-card strong,
.financeiro-card small {
  position: relative;
  z-index: 1;
}

.financeiro-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-right: 8px;
  border-radius: 14px;
  background: var(--rosa-claro);
  color: var(--rosa-escuro) !important;
  font-size: 20px !important;
}

.financeiro-card small {
  color: var(--texto-secundario);
  font-size: 12px;
}

.financeiro-item.receita {
  border-left: 4px solid var(--verde);
}

.financeiro-item.despesa {
  border-left: 4px solid var(--vermelho);
}

.financeiro-valor {
  display: block;
  font-size: 21px;
  font-weight: 800;
  margin-top: 10px;
}

.financeiro-item.receita .financeiro-valor {
  color: var(--verde);
}

.financeiro-item.despesa .financeiro-valor {
  color: var(--vermelho);
}

/* =========================
   15. ANOTAÇÕES
========================= */

#anotacoes-pesquisa {
  margin-top: 16px;
}

.anotacao-favorito-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
  cursor: pointer;
}

.anotacao-item {
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--rosa-claro);
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.anotacao-item::after {
  content: "♡";
  position: absolute;
  right: 10px;
  bottom: -34px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
}

.anotacao-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.anotacao-item h3 {
  position: relative;
  z-index: 1;
  color: #713c54;
}

.anotacao-conteudo {
  position: relative;
  z-index: 1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}

.anotacoes-formulario,
.anotacoes-listagem {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #e8b8c2, #d9a8b4, #c997a5);
  color: #ffffff;
}

.anotacoes-formulario::after,
.anotacoes-listagem::after {
  content: "♡";
  position: absolute;
  right: 10px;
  bottom: -62px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 190px;
  line-height: 1;
  pointer-events: none;
}

.anotacoes-formulario > *,
.anotacoes-listagem > * {
  position: relative;
  z-index: 1;
}

.anotacoes-formulario h2,
.anotacoes-listagem h2,
.anotacoes-formulario p,
.anotacoes-listagem p,
.anotacoes-formulario label,
.anotacoes-listagem label {
  color: #704b57;
}

.anotacoes-formulario h2,
.anotacoes-listagem h2 {
  color: #713c54;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.anotacoes-formulario > p,
.anotacoes-listagem > p {
  color: #784b5d;
  font-weight: 600;
}

.anotacoes-formulario label,
.anotacoes-listagem label {
  color: #713c54;
  font-weight: 700;
}

.anotacoes-resumo .tarefa-indicador span {
  color: #713c54;
  font-weight: 700;
}

.anotacoes-resumo .tarefa-indicador strong {
  color: #713c54;
}

.anotacoes-formulario input,
.anotacoes-formulario textarea,
.anotacoes-formulario select,
.anotacoes-listagem input {
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.9);
  color: #604a52;
}

.lembretes-formulario,
.lembretes-listagem,
.lembretes-resumo .tarefa-indicador {
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
}

.lembretes-formulario input,
.lembretes-formulario textarea,
.lembretes-formulario select {
  background: rgba(255, 255, 255, 0.9);
  color: #604a52;
}

.metas-formulario,
.metas-listagem,
.metas-resumo .tarefa-indicador {
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
}

.metas-formulario input,
.metas-formulario textarea,
.metas-formulario select {
  background: rgba(255, 255, 255, 0.9);
  color: #604a52;
}

.anotacoes-formulario input::placeholder,
.anotacoes-formulario textarea::placeholder,
.anotacoes-listagem input::placeholder {
  color: #9a727e;
}

.anotacoes-resumo .tarefa-indicador {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #e8b8c2, #d9a8b4, #c997a5);
  color: #704b57;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.anotacoes-resumo .tarefa-indicador::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -34px;
  color: rgba(255, 255, 255, 0.1);
  font-size: 105px;
  line-height: 1;
  pointer-events: none;
}

.anotacoes-resumo .tarefa-indicador span,
.anotacoes-resumo .tarefa-indicador strong {
  position: relative;
  z-index: 1;
  color: #704b57;
}

.anotacoes-resumo .tarefa-indicador:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

/* =========================
   16. LEMBRETES
========================= */

.lembrete-linha {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lembrete-item {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--rosa);
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lembrete-item::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -34px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
}

.lembrete-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.lembrete-item.concluido {
  opacity: 0.68;
  border-left-color: var(--verde);
}

.lembrete-item.concluido h3 {
  text-decoration: line-through;
}

.lembretes-formulario,
.lembretes-listagem {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
}

.lembretes-formulario::after,
.lembretes-listagem::after {
  content: "♡";
  position: absolute;
  right: 10px;
  bottom: -62px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 190px;
  line-height: 1;
  pointer-events: none;
}

.lembretes-formulario > *,
.lembretes-listagem > * {
  position: relative;
  z-index: 1;
}

.lembretes-formulario h2,
.lembretes-listagem h2,
.lembretes-formulario p,
.lembretes-listagem p,
.lembretes-formulario label {
  color: #713c54;
}

.lembretes-formulario h2,
.lembretes-listagem h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.lembretes-formulario input,
.lembretes-formulario textarea,
.lembretes-formulario select {
  border-color: rgba(183, 123, 135, 0.3);
  background: rgba(255, 255, 255, 0.88);
  color: #604a52;
}

.lembretes-resumo .tarefa-indicador {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.lembretes-resumo .tarefa-indicador::after {
  content: "♡";
  position: absolute;
  right: 12px;
  bottom: -34px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 105px;
  line-height: 1;
  pointer-events: none;
}

.lembretes-resumo .tarefa-indicador:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.lembretes-resumo .tarefa-indicador span,
.lembretes-resumo .tarefa-indicador strong {
  position: relative;
  z-index: 1;
  color: #713c54;
}

/* =========================
   17. METAS PESSOAIS
========================= */

.meta-item {
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--rosa);
  background: linear-gradient(145deg, #ffffff 35%, var(--rosa-suave));
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.meta-item::after {
  content: "☆";
  position: absolute;
  right: 12px;
  bottom: -34px;
  color: rgba(183, 123, 135, 0.1);
  font-size: 120px;
  line-height: 1;
  pointer-events: none;
}

.meta-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-hover);
}

.meta-barra {
  width: 100%;
  height: 11px;
  background: var(--rosa-claro);
  border-radius: 30px;
  overflow: hidden;
  margin-top: 12px;
}

.meta-barra-progresso {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rosa), var(--rosa-escuro));
  transition: width 0.35s ease;
}

.metas-formulario,
.metas-listagem {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
}

.metas-formulario::after,
.metas-listagem::after {
  content: "☆";
  position: absolute;
  right: 10px;
  bottom: -62px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 190px;
  line-height: 1;
  pointer-events: none;
}

.metas-formulario > *,
.metas-listagem > * {
  position: relative;
  z-index: 1;
}

.metas-formulario h2,
.metas-listagem h2,
.metas-formulario p,
.metas-listagem p,
.metas-formulario label {
  color: #713c54;
}

.metas-formulario h2,
.metas-listagem h2 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.metas-formulario input,
.metas-formulario textarea,
.metas-formulario select {
  border-color: rgba(183, 123, 135, 0.3);
  background: rgba(255, 255, 255, 0.88);
  color: #604a52;
}

.metas-resumo .tarefa-indicador {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.24);
  background: linear-gradient(115deg, #f8dce2, #edc5ce, #dfb1bd);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.metas-resumo .tarefa-indicador::after {
  content: "☆";
  position: absolute;
  right: 12px;
  bottom: -34px;
  color: rgba(255, 255, 255, 0.22);
  font-size: 105px;
  line-height: 1;
  pointer-events: none;
}

.metas-resumo .tarefa-indicador:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-hover);
}

.metas-resumo .tarefa-indicador span,
.metas-resumo .tarefa-indicador strong {
  position: relative;
  z-index: 1;
  color: #713c54;
}

/* =========================
   18. MENU MOBILE
========================= */

.menu-fundo {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(48, 30, 38, 0.45);
}

/* =========================
   19. TELAS MÉDIAS
========================= */

@media (max-width: 1200px) {
  .area-principal {
    padding: 26px;
  }

  .modulos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resumo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .resumo-grid:not(.resumo-grid-secundario) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .agenda-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1050px) {
  .tarefas-layout,
  .financeiro-layout,
  .anotacoes-layout,
  .lembretes-layout,
  .metas-layout,
  .menstrual-layout {
    grid-template-columns: 1fr;
  }

  .financeiro-resumo {
    gap: 12px;
  }

  .financeiro-card {
    padding: 20px;
  }
}

/* =========================
   20. TABLETS E CELULARES
========================= */

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: none;
  }

  .sidebar.aberto {
    transform: translateX(0);
    box-shadow: 15px 0 45px rgba(48, 30, 38, 0.12);
  }

  .menu-fundo:not(.escondido) {
    display: block;
  }

  .conteudo {
    margin-left: 0;
  }

  .botao-menu {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topbar {
    flex-wrap: wrap;
    padding: 14px 24px;
  }

  .resumo-grid {
    gap: 14px;
  }
}

@media (max-width: 700px) {
  .area-principal {
    padding: 18px;
  }

  .topbar {
    padding: 12px 18px;
    min-height: 68px;
  }

  .topbar-acoes {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .topbar-titulo {
    min-width: 0;
  }

  .topbar-titulo span,
  .botao-utilitario {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 11px;
  }

  .topbar-titulo span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-titulo strong {
    font-size: 12px;
  }

  .seletor-tema {
    min-height: 36px;
    padding: 4px 8px;
  }

  .seletor-tema select {
    max-width: 78px;
    font-size: 11px;
  }

  .boas-vindas-painel {
    padding: 28px 22px;
    margin-bottom: 26px;
  }

  .boas-vindas-painel #mensagem-boas-vindas {
    font-size: 19px;
  }

  .boas-vindas-painel::after {
    font-size: 170px;
    top: -20px;
    right: -20px;
  }

  .resumo-grid,
  .financeiro-resumo {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .resumo-grid:not(.resumo-grid-secundario) {
    grid-template-columns: 1fr;
  }

  .resumo-card,
  .financeiro-card {
    padding: 19px;
  }

  .resumo-card {
    min-height: 174px;
  }

  .proximos-painel {
    left: 14px;
    bottom: 14px;
    width: min(250px, calc(100vw - 28px));
    padding: 11px;
  }

  .proximos-cabecalho {
    gap: 10px;
  }

  .proximos-cabecalho {
    align-items: flex-start;
    flex-direction: column;
  }

  .botao-ver-todos {
    width: 100%;
  }

  .resumo-card strong {
    font-size: 27px;
  }

  .modulos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .modulo-card {
    padding: 18px;
  }

  .modulo-card strong {
    font-size: 14px;
  }

  .tarefas-resumo {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .tarefa-indicador {
    padding: 15px 10px;
    text-align: center;
  }

  .tarefa-indicador span {
    font-size: 11px;
  }

  .tarefa-indicador strong {
    font-size: 23px;
  }

  .tarefas-formulario,
  .tarefas-listagem,
  .agenda-calendario,
  .agenda-formulario,
  .agenda-compromissos,
  .financeiro-formulario,
  .financeiro-historico,
  .anotacoes-formulario,
  .anotacoes-listagem,
  .lembretes-formulario,
  .lembretes-listagem,
  .metas-formulario,
  .metas-listagem,
  .menstrual-formulario,
  .menstrual-resumo,
  .menstrual-historico {
    padding: 19px;
  }

  .financeiro-periodo {
    padding: 19px;
  }

  .agenda-calendario-topo {
    flex-wrap: wrap;
  }

  .agenda-semana,
  .agenda-dias {
    gap: 4px;
  }

  .menstrual-info-grid {
    grid-template-columns: 1fr;
  }

  .menstrual-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .agenda-dias button,
  .agenda-dias .dia,
  .agenda-dias .agenda-dia {
    min-height: 43px;
    font-size: 12px;
  }

  .agenda-dias {
    min-height: 280px;
  }

  .tarefa-acoes button,
  .agenda-acoes button,
  .financeiro-acoes button,
  .anotacao-acoes button,
  .lembrete-acoes button,
  .meta-acoes button {
    min-height: 42px;
    padding: 10px 14px;
  }

  .tarefa-acoes,
  .agenda-acoes,
  .financeiro-acoes,
  .anotacao-acoes,
  .lembrete-acoes,
  .meta-acoes {
    gap: 8px;
  }

  .tarefa-acoes button,
  .agenda-acoes button,
  .financeiro-acoes button,
  .anotacao-acoes button,
  .lembrete-acoes button,
  .meta-acoes button {
    flex: 1 1 auto;
  }

  .configuracoes-grid {
    grid-template-columns: 1fr;
  }

  .configuracao-card {
    padding: 20px;
  }
}

/* =========================
   21. CELULARES PEQUENOS
========================= */

@media (max-width: 420px) {
  .area-principal {
    padding: 14px;
  }

  .entrada {
    align-items: flex-start;
    padding: 18px 14px;
  }

  .card-entrada {
    margin: 8px 0;
    padding: 30px 20px 28px;
    border-radius: 24px;
  }

  .coracao {
    width: 70px;
    height: 70px;
    margin-bottom: 18px;
    font-size: 44px;
  }

  .card-entrada h1 {
    font-size: 25px;
  }

  .card-entrada p {
    margin-bottom: 24px;
    font-size: 13px;
  }

  .card-entrada form {
    gap: 11px;
  }

  .card-entrada input,
  .card-entrada .botao-principal {
    min-height: 48px;
  }

  .topbar-titulo span {
    font-size: 11px;
  }

  .topbar-titulo strong {
    font-size: 11px;
  }

  .topbar {
    align-items: flex-start;
    min-height: 62px;
    padding: 10px 12px;
    gap: 8px;
  }

  .topbar-titulo {
    flex: 1;
    padding-top: 2px;
  }

  .topbar-acoes {
    max-width: 92px;
    gap: 4px;
  }

  .seletor-tema {
    width: 34px;
    justify-content: center;
    padding: 0;
  }

  .seletor-tema select {
    position: absolute;
    width: 34px;
    height: 34px;
    padding: 0;
    opacity: 0;
    cursor: pointer;
  }

  .seletor-tema-icone {
    pointer-events: none;
  }

  .avatar {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .botao-utilitario {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
  }

  .botao-utilitario > span:last-child {
    display: none;
  }

  .modulos-grid {
    gap: 10px;
  }

  .modulo-card {
    padding: 15px;
  }

  .modulo-card span {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }

  .modulo-card small {
    font-size: 11px;
  }

  .agenda-dias button,
  .agenda-dias .dia,
  .agenda-dias .agenda-dia {
    min-height: 38px;
    font-size: 11px;
    border-radius: 9px;
  }

  .financeiro-navegacao {
    gap: 6px;
  }

  .financeiro-navegacao strong {
    min-width: 105px;
    font-size: 12px;
  }

  .tarefas-resumo {
    grid-template-columns: 1fr;
  }

  .tarefa-indicador {
    min-height: 70px;
  }

  .financeiro-navegacao {
    flex-wrap: wrap;
    justify-content: center;
  }

  .financeiro-navegacao button {
    min-width: 42px;
    min-height: 42px;
  }

  .aviso-aplicacao {
    right: 16px;
    bottom: 16px;
    width: calc(100vw - 32px);
  }
}

/* =========================
   22. ACESSIBILIDADE
========================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

}

[data-tema="escuro"] {
    --fundo: #21191d;
    --fundo-card: #302328;
    --fundo-sidebar: #2a1e23;
    --texto: #f7e9ed;
    --texto-secundario: #d3b9c1;
    --texto-claro: #b99da7;
    --borda: #503943;
    --borda-forte: #684550;
    --rosa-claro: #573943;
    --rosa-suave: #3b2930;
    --verde-claro: #203d32;
    --vermelho-claro: #482b32;
    --amarelo-claro: #493c25;
    --sombra: 0 8px 28px rgba(0, 0, 0, 0.22);
    --sombra-hover: 0 14px 36px rgba(0, 0, 0, 0.32);

    body,
    .entrada {
      background: var(--fundo);
    }

    .entrada {
      background: linear-gradient(135deg, #21191d, #3a252d);
    }

    .card-entrada,
    .sidebar,
    .topbar,
    .resumo-card,
    .modulo-card,
    .tarefas-formulario,
    .tarefas-listagem,
    .agenda-calendario,
    .agenda-formulario,
    .agenda-compromissos,
    .financeiro-formulario,
    .financeiro-historico,
    .anotacoes-formulario,
    .anotacoes-listagem,
    .lembretes-formulario,
    .lembretes-listagem,
    .metas-formulario,
    .metas-listagem,
    .financeiro-periodo {
      background: var(--fundo-card);
      color: var(--texto);
    }

    .configuracao-card {
      border-color: #49323b;
      background: linear-gradient(145deg, #382930, #302328);
    }

    .configuracao-card h2 {
      color: #fff3f6;
    }

    .configuracao-card p {
      color: #d3b9c1;
    }

    .configuracao-card > select {
      background: #261b20 !important;
      color: #f7e9ed !important;
      border-color: #6a4652 !important;
    }

    .botao-voltar-inicio {
      border-color: #74505d;
      background: linear-gradient(135deg, #50333e, #3f2a32);
      color: #f7d8df;
    }

    .botao-voltar-inicio > span:first-child {
      background: #684452;
      color: #f2b9c7;
    }

    .botao-voltar-inicio:hover {
      background: linear-gradient(135deg, #684452, #50333e);
    }

    input,
    textarea,
    select {
      background: #261b20 !important;
      color: #f7e9ed !important;
      border-color: #6a4652 !important;
      color-scheme: dark;
    }

    input[type="date"],
    input[type="time"] {
      color: #f7e9ed !important;
      accent-color: #d393a3;
    }

    option {
      background: #302328;
      color: #f7e9ed;
    }

    input::placeholder,
    textarea::placeholder {
      color: #c9aeb7 !important;
      opacity: 1;
    }

    .topbar {
      border-bottom-color: #49323b;
      background: rgba(48, 35, 40, 0.94);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      backdrop-filter: blur(12px);
    }

    .sidebar {
      background: linear-gradient(180deg, #302328, #281e23);
      border-right-color: #49323b;
    }

    .logo {
      border-bottom-color: #49323b;
    }

    .logo h2,
    .topbar-titulo strong {
      color: #f0c5d0;
    }

    .menu-item {
      color: #c9aeb7;
    }

    .modulo-card:hover,
    .menu-item:hover,
    .menu-item.ativo {
      background: var(--rosa-suave);
    }

    .menu-item:hover {
      color: #f0c5d0;
    }

    .menu-item.ativo {
      color: #f7d8df;
      box-shadow:
        inset 3px 0 0 #d393a3,
        0 4px 14px rgba(183, 123, 135, 0.08);
    }

    .botao-principal {
      background: linear-gradient(135deg, #c78696, #925f70);
      box-shadow: 0 8px 18px rgba(183, 123, 135, 0.14);
    }

    .botao-cancelar {
      background: #382930;
      border-color: #59404a;
      color: #d3b9c1;
    }

    .botao-cancelar:hover {
      background: #49323b;
    }

    .agenda-dias button,
    .agenda-dias .dia,
    .agenda-dias .agenda-dia {
      background: #2a1e23;
      color: var(--texto);
    }

    .botao-utilitario {
      background: var(--fundo-card);
    }

    .botao-utilitario:hover,
    #importar-dados {
      background: var(--rosa-suave);
    }

    .resumo-card:nth-child(2) .resumo-icone {
      background: #4a3528;
    }

    .resumo-card:nth-child(5) .resumo-icone {
      background: #3d2e49;
    }

    .resumo-card:nth-child(6) .resumo-icone {
      background: var(--vermelho-claro);
    }

    .resumo-card:nth-child(7) .resumo-icone {
      background: var(--verde-claro);
    }

    .proximos-painel {
      background: linear-gradient(115deg, #b77b87, #986775, #825665);
    }

    .proximo-item {
      border-color: rgba(255, 255, 255, 0.24);
      background: rgba(255, 255, 255, 0.14);
    }

    .agenda-compromissos {
      background: var(--rosa-suave);
    }

    .agenda-item {
      border-color: #49323b;
      background: #382930;
    }

    .financeiro-periodo,
    .financeiro-card,
    .financeiro-card.receita,
    .financeiro-card.despesa,
    .financeiro-card.saldo {
      background: var(--fundo-card);
    }

    .financeiro-card::after {
      color: rgba(255, 255, 255, 0.06);
    }

    .tarefa-item,
    .agenda-item,
    .financeiro-item,
    .anotacao-item,
    .lembrete-item,
    .meta-item {
      border-color: #49323b;
      background: linear-gradient(145deg, #382930, #302328);
    }

    .tarefa-item:hover,
    .agenda-item:hover,
    .financeiro-item:hover,
    .anotacao-item:hover,
    .lembrete-item:hover,
    .meta-item:hover {
      border-color: #74505d;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    }

    .pagina-card {
      border-color: #49323b;
      background: linear-gradient(145deg, #382930, #302328);
      color: #f7e9ed;
    }

    .pagina-card h2,
    .pagina-card h3,
    .pagina-card strong {
      color: #fff3f6;
    }

    .pagina-card p,
    .pagina-card small,
    .pagina-card span {
      color: #d3b9c1;
    }

    .financeiro-item h3,
    .financeiro-item p,
    .financeiro-item small,
    .financeiro-item strong,
    .anotacao-conteudo {
      color: #f0d9df;
    }

    .anotacao-item h3,
    .lembrete-item h3,
    .meta-item h3 {
      color: #fff3f6;
    }

    .anotacao-item .anotacao-conteudo,
    .lembrete-item p,
    .meta-item p {
      color: #e2c6ce;
    }

    .tarefa-data-texto,
    .agenda-item-detalhes,
    .financeiro-item p,
    .anotacao-item small,
    .lembrete-item small,
    .meta-item small {
      color: #d3b9c1 !important;
    }

    .filtro-tarefa,
    .filtro-financeiro,
    .filtro-anotacao,
    .filtro-lembrete,
    .filtro-meta {
      border-color: #59404a;
      background: #302328;
      color: #c9aeb7;
    }

    .filtro-tarefa.ativo,
    .filtro-financeiro.ativo,
    .filtro-anotacao.ativo,
    .filtro-lembrete.ativo,
    .filtro-meta.ativo,
    .filtro-tarefa:hover,
    .filtro-financeiro:hover,
    .filtro-anotacao:hover,
    .filtro-lembrete:hover,
    .filtro-meta:hover {
      border-color: #9c6677;
      background: #50333e;
      color: #f7d8df;
    }

    .anotacoes-formulario,
    .anotacoes-listagem,
    .anotacoes-resumo .tarefa-indicador {
      background: linear-gradient(115deg, #e8b8c2, #d9a8b4, #c997a5);
    }

    .anotacoes-formulario input,
    .anotacoes-formulario textarea,
    .anotacoes-formulario select,
    .anotacoes-listagem input {
      background: rgba(255, 255, 255, 0.9);
      color: #604a52;
    }

    .compromisso-modal-categoria {
      background: var(--rosa-claro);
    }

    .resumo-card,
    .resumo-card:nth-child(4),
    .resumo-card:nth-child(5),
    .resumo-card:nth-child(6),
    .resumo-card:nth-child(7) {
      background: var(--fundo-card);
    }

    .card-entrada {
      background: rgba(48, 35, 40, 0.96);
      border-color: #5a3b46;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    }

    .coracao {
      background: linear-gradient(145deg, #573943, #49303a);
      border-color: #714957;
    }

    .card-entrada h1,
    .card-entrada p,
    .card-entrada label {
      color: var(--texto);
    }

    .card-entrada input {
      background: #261b20;
      border-color: #6a4652;
      color: var(--texto);
    }

    .tarefas-formulario,
    .tarefas-listagem,
    .agenda-formulario,
    .agenda-compromissos,
    .financeiro-formulario,
    .financeiro-historico,
    .anotacoes-formulario,
    .anotacoes-listagem,
    .lembretes-formulario,
    .lembretes-listagem,
    .metas-formulario,
    .metas-listagem,
    .financeiro-periodo {
      border-color: #49323b;
      background: linear-gradient(145deg, #302328, #2b2025);
    }

    .anotacoes-formulario,
    .anotacoes-listagem,
    .lembretes-formulario,
    .lembretes-listagem,
    .metas-formulario,
    .metas-listagem {
      background: linear-gradient(145deg, #3a2930, #302328);
    }

    .anotacoes-formulario h2,
    .anotacoes-listagem h2,
    .anotacoes-formulario p,
    .anotacoes-listagem p,
    .anotacoes-formulario label,
    .anotacoes-listagem label,
    .lembretes-formulario h2,
    .lembretes-formulario p,
    .lembretes-formulario label,
    .lembretes-listagem h2,
    .metas-formulario h2,
    .metas-formulario p,
    .metas-formulario label,
    .metas-listagem h2 {
      color: var(--texto);
      text-shadow: none;
    }

    .anotacoes-formulario input,
    .anotacoes-formulario textarea,
    .anotacoes-formulario select,
    .lembretes-formulario input,
    .lembretes-formulario textarea,
    .lembretes-formulario select,
    .metas-formulario input,
    .metas-formulario textarea,
    .metas-formulario select {
      background: #261b20;
      border-color: #59404a;
      color: var(--texto);
    }

    .anotacoes-formulario input::placeholder,
    .anotacoes-formulario textarea::placeholder,
    .lembretes-formulario input::placeholder,
    .lembretes-formulario textarea::placeholder,
    .metas-formulario input::placeholder,
    .metas-formulario textarea::placeholder {
      color: var(--texto-claro);
    }

    .financeiro-card,
    .financeiro-card.receita,
    .financeiro-card.despesa,
    .financeiro-card.saldo {
      border-color: #49323b;
      background: linear-gradient(145deg, #302328, #2b2025);
    }

    .tarefas-resumo .tarefa-indicador,
    .anotacoes-resumo .tarefa-indicador,
    .lembretes-resumo .tarefa-indicador,
    .metas-resumo .tarefa-indicador {
      border-color: #49323b;
      background: #302328;
    }

    .tarefas-resumo .tarefa-indicador span,
    .tarefas-resumo .tarefa-indicador strong,
    .anotacoes-resumo .tarefa-indicador span,
    .anotacoes-resumo .tarefa-indicador strong,
    .lembretes-resumo .tarefa-indicador span,
    .lembretes-resumo .tarefa-indicador strong,
    .metas-resumo .tarefa-indicador span,
    .metas-resumo .tarefa-indicador strong {
      color: var(--texto);
    }

    .tarefas-formulario h2,
    .tarefas-listagem h2,
    .agenda-formulario h2,
    .agenda-compromissos h2,
    .financeiro-formulario h2,
    .financeiro-historico h2,
    .anotacoes-formulario h2,
    .anotacoes-listagem h2,
    .lembretes-formulario h2,
    .lembretes-listagem h2,
    .metas-formulario h2,
    .metas-listagem h2,
    .tarefa-item h3,
    .agenda-item h3,
    .financeiro-item h3,
    .anotacao-item h3,
    .lembrete-item h3,
    .meta-item h3 {
      color: #f7e9ed;
    }

    .tarefas-formulario > p,
    .agenda-formulario > p,
    .agenda-data-selecionada,
    .financeiro-formulario > p,
    .anotacoes-formulario > p,
    .anotacoes-listagem > p,
    .lembretes-formulario > p,
    .lembretes-listagem > p,
    .metas-formulario > p,
    .metas-listagem > p,
    .tarefa-item p,
    .agenda-item p,
    .financeiro-item p,
    .anotacao-item p,
    .lembrete-item p,
    .meta-item p,
    .tarefa-item small,
    .agenda-item small,
    .financeiro-item small,
    .anotacao-item small,
    .lembrete-item small,
    .meta-item small {
      color: #d3b9c1;
    }

    .tarefas-formulario label,
    .agenda-formulario label,
    .financeiro-formulario label,
    .anotacoes-formulario label,
    .lembretes-formulario label,
    .metas-formulario label {
      color: #f0d9df;
    }

    .tarefa-detalhes,
    .agenda-item-detalhes,
    .anotacao-meta,
    .lembrete-detalhes,
    .meta-acoes {
      color: #d3b9c1;
    }

    .tarefa-data-texto,
    .proximo-data small,
    .financeiro-item p,
    .agenda-data-selecionada {
      color: #e2c6ce;
    }

    .tarefa-item.concluida h3,
    .lembrete-item.concluido h3 {
      color: #bda5ae;
    }

    .tarefa-item button,
    .agenda-item button,
    .financeiro-item button,
    .anotacao-item button,
    .lembrete-item button,
    .meta-item button {
      color: #f0d9df;
    }

    .tarefa-acoes button,
    .agenda-acoes button,
    .financeiro-acoes button,
    .anotacao-acoes button,
    .lembrete-acoes button,
    .meta-acoes button {
      border-color: #89606d;
      background: #50333e;
      color: #ffe8ee !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    }

    .tarefa-acoes button:hover,
    .agenda-acoes button:hover,
    .financeiro-acoes button:hover,
    .anotacao-acoes button:hover,
    .lembrete-acoes button:hover,
    .meta-acoes button:hover {
      border-color: #c78696;
      background: #684452;
      color: #ffffff !important;
    }

    .tarefa-acoes .excluir,
    .agenda-acoes .excluir,
    .financeiro-acoes .excluir,
    .anotacao-acoes .excluir,
    .lembrete-acoes .excluir,
    .meta-acoes .excluir {
      border-color: #a56a79;
      background: #542f3a;
      color: #ffb9c5 !important;
    }

    .tarefa-acoes .excluir:hover,
    .agenda-acoes .excluir:hover,
    .financeiro-acoes .excluir:hover,
    .anotacao-acoes .excluir:hover,
    .lembrete-acoes .excluir:hover,
    .meta-acoes .excluir:hover {
      background: #713b49;
      color: #ffdce3 !important;
    }

    .agenda-navegacao strong,
    .financeiro-navegacao strong,
    .agenda-semana span {
      color: #f7e9ed;
    }

    .agenda-calendario .agenda-dias .dia-vazio {
      opacity: 0.35;
    }

    .topbar-titulo span {
      color: #d3b9c1;
    }

    .resumo-card,
    .resumo-card:nth-child(4),
    .resumo-card:nth-child(5),
    .resumo-card:nth-child(6),
    .resumo-card:nth-child(7) {
      border-color: #49323b;
      background: linear-gradient(145deg, #382930, #302328);
    }

    .resumo-card p {
      color: #e2c6ce;
    }

    .resumo-card strong {
      color: #fff3f6;
    }

    .resumo-card-financeiro strong {
      color: #9bd2b6;
    }

    .resumo-icone {
      border-color: #6a4652;
      background: #50333e;
      color: #f2c5d0;
      box-shadow: 0 7px 16px rgba(0, 0, 0, 0.18);
    }

    .resumo-card:nth-child(2) .resumo-icone {
      background: #59412f;
      color: #f1c48f;
    }

    .resumo-card:nth-child(5) .resumo-icone {
      background: #493b59;
      color: #d8c0eb;
    }

    .resumo-card:nth-child(6) .resumo-icone {
      background: #59343e;
      color: #f0aebb;
    }

    .resumo-card:nth-child(7) .resumo-icone {
      background: #304d40;
      color: #a9dec1;
    }

    .agenda-compromissos {
      border-color: #694955;
      background: linear-gradient(145deg, #3a2930, #302328);
    }

    .agenda-compromissos h2 {
      color: #fff3f6;
    }

    #agenda-data-selecionada {
      color: #e2c6ce;
    }

    .agenda-item {
      border-color: #74505d;
      background: linear-gradient(145deg, #443039, #382930);
    }

    .agenda-horario,
    .agenda-categoria {
      background: #5a3b47;
      color: #f5d6de;
    }
}

@media (prefers-color-scheme: light) {
  .tarefa-acoes button,
  .agenda-acoes button,
  .financeiro-acoes button,
  .anotacao-acoes button,
  .lembrete-acoes button,
  .meta-acoes button {
    border-color: #d9aeb9;
    background: #fff8fa;
    color: #915d6b;
    box-shadow: 0 3px 8px rgba(117, 71, 85, 0.08);
  }

  [data-tema="claro"] input,
  [data-tema="claro"] textarea,
  [data-tema="claro"] select {
    background: #fffafb;
    color: #604a52;
    border-color: var(--borda);
    color-scheme: light;
  }

  [data-tema="claro"] input::placeholder,
  [data-tema="claro"] textarea::placeholder {
    color: #b6a3aa;
    opacity: 1;
  }

  .tarefa-acoes button:hover,
  .agenda-acoes button:hover,
  .financeiro-acoes button:hover,
  .anotacao-acoes button:hover,
  .lembrete-acoes button:hover,
  .meta-acoes button:hover {
    border-color: #b77b87;
    background: #f8e9ec;
    color: #713c54;
  }

  .tarefa-acoes .excluir,
  .agenda-acoes .excluir,
  .financeiro-acoes .excluir,
  .anotacao-acoes .excluir,
  .lembrete-acoes .excluir,
  .meta-acoes .excluir {
    border-color: #e4aeb8;
    background: #fff0f2;
    color: #b34f61;
  }

  .tarefa-acoes .excluir:hover,
  .agenda-acoes .excluir:hover,
  .financeiro-acoes .excluir:hover,
  .anotacao-acoes .excluir:hover,
  .lembrete-acoes .excluir:hover,
  .meta-acoes .excluir:hover {
    background: #f9dce1;
    color: #963d50;
  }
}

/* ==================================================
   FIM DO STYLE.CSS — MEU CANTINHO ♡
================================================== */