/* Gestação da Fran — base visual compartilhada por todas as telas.
   Paleta extraída de flo.health/pt. Tipografia: Fraunces (display) + Figtree (texto). */

:root {
  --rosa: #ff5a7d;        /* ação principal, destaques */
  --rosa-claro: #ffc0cd;
  --blush: #fff3f5;       /* fundo das telas */
  --teal: #0e7270;        /* modo gravidez do Flo */
  --teal-escuro: #0a5457;
  --teal-claro: #e8f6f6;
  --lilas: #5665ec;
  --coral: #ff8c66;
  --pessego: #fcefe7;
  --areia: #f9dbc8;
  --mel: #ffca80;
  --ameixa: #3e094d;      /* títulos */
  --texto: #4e5b73;       /* corpo */
  --suave: #8a93a6;
  --linha: #f1e3e7;
  --branco: #ffffff;
  --ok: #1f9d74;
  --alerta: #f2a33a;
  --perigo: #f75454;
  --raio: 24px;
  --sombra: 0 1px 2px rgba(62, 9, 77, .04), 0 8px 24px -12px rgba(62, 9, 77, .14);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  font-family: 'Figtree', ui-sans-serif, sans-serif;
  color: var(--texto);
  background: var(--blush);
  min-height: 100dvh;
}
.serif { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100; }

/* ---------- Casca do app: coluna de celular, centralizada no desktop ---------- */
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; position: relative; background: var(--blush); }
@media (min-width: 520px) {
  body { background: radial-gradient(1200px 600px at 10% -10%, #ffe1e8 0%, transparent 60%), radial-gradient(900px 700px at 110% 110%, #d9efee 0%, transparent 55%), #fbf6f4; }
  .app { box-shadow: 0 0 60px -20px rgba(62, 9, 77, .25); }
}
.screen { padding: calc(env(safe-area-inset-top) + 16px) 20px calc(env(safe-area-inset-bottom) + 112px); }

/* ---------- Barra de abas ---------- */
.tabbar[hidden] { display: none; }
.tabbar {
  position: fixed; left: max(12px, calc(50% - 228px)); right: max(12px, calc(50% - 228px)); bottom: calc(env(safe-area-inset-bottom) + 14px); height: 72px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px);
  border-radius: 28px; box-shadow: var(--sombra);
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; z-index: 40;
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; color: var(--suave); text-decoration: none;
}
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.ativo { color: var(--rosa); }
.tabbar .fab {
  width: 56px; height: 56px; margin: -26px auto 0; border-radius: 50%;
  background: var(--rosa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 22px -8px rgba(255, 90, 125, .8);
}

/* ---------- Componentes ---------- */
.card { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px; }
.card-teal { background: var(--teal); color: #fff; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--branco); color: var(--ameixa); border: 1px solid var(--linha);
}
.chip.on { background: var(--rosa); color: #fff; border-color: var(--rosa); }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 54px; border-radius: 18px; border: 0; font: 700 16px 'Figtree', sans-serif; cursor: pointer;
  background: var(--rosa); color: #fff; box-shadow: 0 10px 22px -10px rgba(255, 90, 125, .9);
}
.btn.sec { background: var(--branco); color: var(--ameixa); box-shadow: none; border: 1.5px solid var(--linha); }
.btn.teal { background: var(--teal); box-shadow: 0 10px 22px -10px rgba(14, 114, 112, .8); }
.rotulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.titulo { font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 100; color: var(--ameixa); font-weight: 600; letter-spacing: -.01em; }
.barra { height: 8px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.barra > i { display: block; height: 100%; border-radius: inherit; background: var(--rosa); }
.input {
  width: 100%; height: 52px; border-radius: 16px; border: 1.5px solid var(--linha); background: #fff;
  padding: 0 16px; font: 500 16px 'Figtree', sans-serif; color: var(--ameixa); outline: none;
}
.input:focus { border-color: var(--rosa); }
.topo { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 14px; }
.icone-btn { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--sombra); color: var(--ameixa); border: 0; }

/* Entrada escalonada */
.sobe { opacity: 0; transform: translateY(14px); animation: sobe .6s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes sobe { to { opacity: 1; transform: none; } }
.d1 { animation-delay: .05s } .d2 { animation-delay: .12s } .d3 { animation-delay: .19s }
.d4 { animation-delay: .26s } .d5 { animation-delay: .33s } .d6 { animation-delay: .40s }
@media (prefers-reduced-motion: reduce) { .sobe { animation: none; opacity: 1; transform: none; } }