/* Estrutura e componentes do painel. Cores vêm das variáveis de css/temas.css. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--fundo);
  color: var(--tinta);
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
a { color: var(--destaque); font-weight: 700; }
h1, h2, h3 { font-family: var(--fonte-titulo); margin: 0; line-height: 1.15; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #6E8BFF; outline-offset: 2px; }

.mao { font-family: 'Kalam', cursive; }
.media { font-size: 22px; line-height: 1.15; margin: 0; }
.grande { font-size: 28px; }
.pequeno { font-size: 14px; }
.suave { color: var(--apagado); }
.forte { font-weight: 800; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.carregando, .erro-geral { padding: 80px 20px; text-align: center; font-family: 'Kalam', cursive; font-size: 28px; }
.erro-geral .pequeno { font-family: 'Schibsted Grotesk', sans-serif; }

/* Botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--destaque); color: var(--destaque-texto);
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
}
.botao:disabled { opacity: 0.6; cursor: default; }
.botao-claro { background: var(--cartao, #fff); color: var(--tinta); box-shadow: inset 0 0 0 2px var(--suave); }
.botao-cheio { width: 100%; }

/* Cartões */
.cartao {
  position: relative;
  background: var(--cartao);
  border-radius: 24px;
  padding: 22px;
  border: 1.5px solid rgba(74, 26, 51, 0.08);
  box-shadow: 0 14px 30px -16px rgba(74, 26, 51, 0.28);
  min-width: 0;
}
.fita {
  position: absolute; top: -13px; left: 50%; width: 110px; height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background-color: var(--fita);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.6) 0 6px, transparent 6px 12px);
  border-radius: 3px; pointer-events: none;
}
.cartao:nth-child(2n) .fita { transform: translateX(-50%) rotate(3deg); left: 30%; }
.cartao:nth-child(3n) .fita { left: 70%; transform: translateX(-50%) rotate(-5deg); }
.cabecalho-cartao { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-bottom: 12px; }
.cabecalho-cartao.espaco { margin-top: 20px; margin-bottom: 6px; }
.cabecalho-cartao .mao { font-size: 22px; }
.etiqueta { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; color: #3E2A33; }

/* Faixa de assinatura */
.faixa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  padding: 10px 16px; background: var(--suave); font-weight: 700; text-align: center;
}
.faixa-alerta { background: #FFE3D6; color: #5A2412; }

/* Layout */
.pagina { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 24px 16px 64px; display: flex; flex-direction: column; gap: 26px; }
.faixa, .tela-entrada { position: relative; z-index: 1; }
.topo {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--cartao); border-radius: 24px; padding: 16px 22px;
  box-shadow: 0 14px 30px -16px rgba(74, 26, 51, 0.28);
}
.topo-marca { display: flex; align-items: center; gap: 14px; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--destaque); }
.titulo-marca { font-family: var(--fonte-titulo); font-size: 34px; font-weight: 700; letter-spacing: -0.5px; }
.saudacao { margin: 0; font-size: 26px; }
.topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seletor-tema { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: #fff; }
.amostra-tema { width: 40px; height: 40px; border-radius: 999px; border: 3px solid #fff; padding: 0; cursor: pointer; }
.amostra-tema[aria-pressed="true"] { border-color: var(--tinta); }

.corpo { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.menu { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
.menu-titulo { margin: 2px 8px 4px; font-size: 26px; font-weight: 700; }
.aba {
  min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 14px;
  border-radius: 14px; color: var(--tinta); text-decoration: none; font-weight: 700; font-size: 15px;
}
.bolinha { width: 11px; height: 11px; border-radius: 999px; background: rgba(58, 30, 46, 0.45); flex-shrink: 0; }
.conteudo { flex: 999 1 560px; min-width: 0; }

/* Tela Hoje */
.quadro { position: relative; overflow-x: clip; padding-top: 14px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.largo { grid-column: 1 / -1; }

.grade-semana { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
.dia-semana { border-radius: 18px; padding: 12px; min-height: 96px; display: flex; flex-direction: column; gap: 3px; color: var(--tinta); }
.dia-nome { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.dia-numero { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; line-height: 1; }
.dia-info { font-size: 13px; font-weight: 700; }
a.dia-semana { text-decoration: none; font-weight: 400; transition: transform 0.2s ease; }
a.dia-semana:hover { transform: translateY(-3px) rotate(-1deg); }
.dia-evento { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dia-evento .ponto { width: 7px; height: 7px; flex-shrink: 0; }
.lista-compromissos { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.compromisso-hoje {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 2px 10px;
  padding: 10px 12px; border-radius: 14px; background: var(--clara); color: #2B2230; text-decoration: none; font-weight: 400;
  transition: transform 0.2s ease;
}
.compromisso-hoje:hover { transform: perspective(500px) rotateX(8deg) translateY(-2px); }
.compromisso-hora { grid-row: span 2; font-weight: 800; color: var(--cor); filter: brightness(0.8); font-variant-numeric: tabular-nums; }
.compromisso-titulo { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compromisso-cat { font-size: 12px; font-weight: 700; opacity: 0.75; }

.ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.anel { position: relative; width: 180px; height: 180px; margin: 0 auto; flex-shrink: 0; }
.anel-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.anel-dia { font-family: var(--fonte-titulo); font-size: 36px; font-weight: 700; line-height: 1; }
.ciclo-texto { flex: 1 1 150px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ciclo-texto p { margin: 0; }
.legendas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 13px; font-weight: 700; }
.legenda { display: inline-flex; align-items: center; gap: 6px; }
.ponto { width: 11px; height: 11px; border-radius: 999px; }
.mais { margin-top: 10px; }
.mais summary { cursor: pointer; font-weight: 700; min-height: 32px; }

.linha-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.linha-form input { flex: 1 1 160px; min-height: 44px; border-radius: 14px; border: 2px solid var(--suave); padding: 0 12px; background: #fff; }
.linha-form label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; }

.barra { height: 12px; border-radius: 999px; background: var(--suave); overflow: hidden; margin-bottom: 8px; }
.barra-cheia { height: 100%; border-radius: 999px; background: var(--destaque); transition: width 0.3s ease; }
.lista-tarefas { list-style: none; margin: 0; padding: 0; }
.tarefa { display: flex; align-items: center; gap: 4px; }
.marcar { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px; border: 0; background: transparent; cursor: pointer; text-align: left; font-weight: 600; }
.caixa { width: 26px; height: 26px; border-radius: 9px; border: 2.5px solid var(--destaque); background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feita .caixa { background: var(--destaque); }
.feita .texto-tarefa { text-decoration: line-through; opacity: 0.55; }
.apagar { width: 40px; height: 40px; border: 0; background: transparent; font-size: 22px; color: var(--apagado); cursor: pointer; border-radius: 999px; }
.apagar:hover { background: var(--suave); }
.parabens { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 10px 12px; border-radius: 16px; background: var(--suave); font-weight: 800; }

.humores { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.humor { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; min-width: 58px; border-radius: 16px; border: 2.5px solid transparent; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.humor.selecionado { border-color: var(--destaque); background: var(--suave); }
.copos { display: flex; flex-wrap: wrap; gap: 2px; }
.copo { width: 44px; height: 48px; border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }

.titulo-diario { font-family: 'Kalam', cursive !important; font-size: 34px !important; font-style: normal !important; }
.pautado {
  width: 100%; border: 0; resize: vertical; font-size: 24px; line-height: 32px; padding: 0 4px; margin-top: 4px;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(163, 53, 45, 0.18) 31px 32px);
}

/* Stickers */
.gaveta { display: flex; flex-wrap: wrap; gap: 8px; }
.botao-sticker { width: 68px; height: 68px; border: 0; border-radius: 18px; background: var(--suave); cursor: pointer; padding: 8px; }
.botao-sticker img, .stk img { display: block; width: 100%; height: 100%; }
.botao-sticker img, .stk img, .parabens img {
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 6px rgba(74, 26, 51, 0.22));
  pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.camada-stickers { position: absolute; inset: 0; pointer-events: none; }
.stk { position: absolute; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; pointer-events: auto; z-index: 30; transition: scale 0.12s ease; }
.stk.levantado { cursor: grabbing; scale: 1.1; z-index: 40; }

/* Entrada */
.tela-entrada { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.cartao-entrada { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.marca-grande .titulo-marca { font-size: 36px; }
.subtitulo-entrada { margin: -4px 0 6px; font-size: 24px; }
.titulo-pagina { font-size: 28px; }
.formulario { display: flex; flex-direction: column; gap: 12px; margin: 6px 0; }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-weight: 700; font-size: 14px; }
.formulario input { min-height: 46px; border-radius: 14px; border: 2px solid var(--suave); padding: 0 14px; background: #fff; font-size: 16px; }
.mensagem { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--suave); font-weight: 700; }

.em-breve { max-width: 640px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.em-breve p { margin: 0; }

#aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 16px;
  background: var(--tinta); color: #fff; font-weight: 700; z-index: 100;
  transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none;
}
#aviso.visivel { opacity: 1; transform: translate(-50%, 0); }

/* Galeria de estéticas */
.galeria { display: flex; flex-direction: column; gap: 14px; }
.galeria-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.galeria-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.opcao-tema {
  display: flex; flex-direction: column; gap: 6px; padding: 8px 8px 10px; text-align: left;
  border-radius: 16px; border: 2.5px solid transparent; background: rgba(255, 255, 255, 0.7); cursor: pointer;
  transition: transform 0.15s ease;
}
.opcao-tema:hover { transform: translateY(-3px); }
.opcao-tema[aria-pressed="true"] { border-color: var(--destaque); background: #fff; }
.opcao-nome { font-weight: 800; font-size: 14px; }
.opcao-desc { font-size: 12px; color: var(--apagado); line-height: 1.3; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.interruptor .trilho { width: 44px; height: 26px; border-radius: 999px; background: var(--suave); position: relative; transition: background 0.2s; }
.interruptor .trilho::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left 0.2s; }
.interruptor[aria-pressed="true"] .trilho { background: var(--destaque); }
.interruptor[aria-pressed="true"] .trilho::after { left: 21px; }

/* Mascote 3D no topo */
.mascote-palco { width: 64px; height: 64px; perspective: 400px; flex-shrink: 0; }
.mascote {
  width: 100%; height: 100%; transform-style: preserve-3d; transform-origin: 50% 0%;
  animation: balancar 3.6s ease-in-out infinite;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.2));
}
@keyframes balancar {
  0%, 100% { transform: rotateY(-28deg) rotateZ(-5deg) translateY(0); }
  50% { transform: rotateY(28deg) rotateZ(5deg) translateY(-4px); }
}

/* Enfeites caindo em 3D */
.enfeites { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; perspective: 600px; }
.enfeite {
  position: absolute; top: -60px; left: var(--x); width: var(--t); height: var(--t);
  animation: cair var(--d) linear var(--atraso) infinite;
  transform-style: preserve-3d; opacity: 0.9;
}
.enfeite img { width: 100%; height: 100%; display: block; animation: girar var(--g) ease-in-out infinite alternate; transform-style: preserve-3d; }
@keyframes cair {
  from { transform: translate3d(0, -10vh, 0); }
  to { transform: translate3d(var(--deriva), 115vh, 0); }
}
@keyframes girar {
  from { transform: rotate3d(1, 0.4, 0.2, -70deg) rotateZ(-20deg); }
  to { transform: rotate3d(0.3, 1, 0.1, 80deg) rotateZ(25deg); }
}

/* Cartões inclinam com o mouse */
.efeitos-ativos .conteudo .cartao { transition: transform 0.35s ease, box-shadow 0.35s ease; transform-style: preserve-3d; }
.efeitos-ativos .conteudo .cartao.inclinado { transition: transform 0.08s linear; }

.sem-efeitos .enfeites { display: none; }
.sem-efeitos .mascote { animation: none; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .enfeites { display: none; }
  .mascote { animation: none; }
}

@media (max-width: 640px) {
  .mascote-palco { width: 48px; height: 48px; }
  .galeria-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina { padding-top: 16px; gap: 20px; }
  .titulo-marca { font-size: 26px; }
  .marca svg { display: none; }
  .saudacao { font-size: 22px; }
  .menu { flex-direction: row; overflow-x: auto; padding: 10px; }
  .menu-titulo { display: none; }
  .aba { flex-shrink: 0; }
}