/* ============================================================
   SERENO — Design System (Psicologia)
   Fonts: Fraunces (display) + Plus Jakarta Sans (body)
   Style: contemplativo, sutil, glass moderado, mobile-first
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand: dusty plum / lavender ---------- */
  --plum-50:  #FAF5FF;
  --plum-100: #F3E8FF;
  --plum-200: #E9D5FF;
  --plum-300: #D8B4FE;
  --plum-400: #C084FC;
  --plum-500: #A855F7;
  --plum-600: #9333EA;
  --plum-700: #7E22CE;
  --plum-800: #6B21A8;
  --plum-900: #581C87;

  /* Sereno indigo deep (alternative primary depth) */
  --indigo-700: #4338CA;
  --indigo-800: #3730A3;
  --indigo-900: #312E81;

  /* ---------- Acentos quentes (empathy) ---------- */
  --peach-300: #FDBA74;
  --peach-400: #FB923C;
  --peach-500: #F97316;
  --rose-300:  #FCA5A5;
  --rose-400:  #F87171;
  --rose-500:  #EF4444;
  --rose-600:  #DC2626;

  /* ---------- Acentos frios (calm) ---------- */
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;

  /* ---------- Honey (warmth) ---------- */
  --honey-300: #FCD34D;
  --honey-400: #FBBF24;
  --honey-500: #F59E0B;

  /* ---------- Sage (grounding) ---------- */
  --sage-300: #86EFAC;
  --sage-400: #4ADE80;
  --sage-500: #22C55E;
  --sage-600: #16A34A;

  /* ---------- Ink (text + UI) ---------- */
  --ink-900: #0F1729;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --ink-300: #CBD5E1;
  --ink-200: #E2E8F0;
  --ink-100: #F1F5F9;
  --ink-50:  #F8FAFC;
  --white:   #FFFFFF;

  /* ---------- Surfaces ---------- */
  --bg-canvas: #FAF7FF;
  --bg-mist:   #F5F3FF;

  --glass-bg:        rgba(255,255,255,0.65);
  --glass-bg-strong: rgba(255,255,255,0.85);
  --glass-border:        rgba(255,255,255,0.85);
  --glass-border-strong: rgba(255,255,255,0.95);

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg: 0 20px 50px rgba(15,23,42,0.12);
  --shadow-xl: 0 30px 80px rgba(15,23,42,0.18);
  --shadow-glow-plum: 0 14px 36px rgba(124,58,237,0.30);
  --shadow-glow-peach: 0 14px 36px rgba(249,115,22,0.30);
  --shadow-glow-rose: 0 14px 36px rgba(239,68,68,0.30);

  /* ---------- Radius ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  22px;
  --r-2xl: 26px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* ---------- Type ---------- */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --duration: 220ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
html, body { font-family: var(--font-body); color: var(--ink-900); background: var(--bg-canvas); font-size: 14px; line-height: 1.4; }
button { font-family: inherit; cursor: pointer; }
a { text-decoration: none; color: inherit; }
input, textarea, select { font-family: inherit; outline: none; }

/* ============================================================ PHONE / SCREENS ============================================================ */

.phone-stage { min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; padding: 32px 16px; background: radial-gradient(1200px 600px at 20% 0%, #F5F3FF 0%, transparent 60%), radial-gradient(900px 500px at 90% 20%, #FFF1F2 0%, transparent 60%), #F4F4FA; }

.phone {
  width: 375px; height: 812px;
  position: relative;
  background: linear-gradient(180deg, #FAF5FF 0%, #FAFCF8 50%, #FFF1F2 100%);
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(15,23,42,0.25), 0 30px 60px -30px rgba(124,58,237,0.20), 0 0 0 8px #15172A, 0 0 0 9px #2A2D45;
}

/* ATMOSPHERE - orbs */
.atmosphere { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
.orb-plum  { background: #C084FC; }
.orb-rose  { background: #FCA5A5; }
.orb-peach { background: #FDBA74; }
.orb-sky   { background: #93C5FD; }
.orb-honey { background: #FCD34D; }
.orb-sage  { background: #86EFAC; }

/* STATUS BAR (iOS) */
.status-bar { height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 0; position: relative; z-index: 30; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--ink-900); }
.status-bar svg { display: block; }
.status-bar .right { display: flex; gap: 6px; align-items: center; }

/* SCREEN */
.screen-scroll { position: absolute; inset: 0; overflow-y: auto; z-index: 1; padding-bottom: 110px; scrollbar-width: none; }
.screen-scroll::-webkit-scrollbar { display: none; }
.screen-pad { padding: 0 22px; }

/* APP HEADER */
.app-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 22px 18px; position: relative; z-index: 20; }
.app-header .greet-small { font-size: 12px; font-weight: 500; color: var(--ink-500); letter-spacing: 0.02em; text-transform: uppercase; }
.app-header .greet-name { font-family: var(--font-display); font-size: 24px; font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-top: 4px; color: var(--ink-900); }

.icon-btn { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,0.75); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.9); display: inline-flex; align-items: center; justify-content: center; position: relative; color: var(--ink-700); cursor: pointer; box-shadow: 0 4px 14px rgba(15,23,42,0.05); }
.icon-btn .dot { position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--peach-500); border: 2px solid white; }

.avatar-btn { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #C084FC, #7C3AED); display: inline-flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; border: 1px solid rgba(255,255,255,0.9); }

/* GLASS */
.glass { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--glass-border); border-radius: var(--r-2xl); }
.glass-strong { background: var(--glass-bg-strong); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); border: 1px solid var(--glass-border-strong); border-radius: var(--r-2xl); }

/* BOTTOM NAV */
.bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; height: 94px; background: rgba(255,255,255,0.72); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-top: 1px solid rgba(255,255,255,0.95); display: flex; justify-content: space-around; align-items: flex-start; padding: 12px 14px 30px; z-index: 25; }
.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-400); font-size: 10.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; position: relative; padding-top: 6px; }
.nav-item.active { color: var(--plum-700); }
.nav-item.active::before { content: ''; position: absolute; top: -12px; width: 28px; height: 3px; background: var(--plum-600); border-radius: 0 0 6px 6px; }
.nav-item.fab { background: linear-gradient(135deg, var(--plum-600), var(--plum-500)); width: 54px; height: 54px; border-radius: 50%; align-self: center; margin-top: -16px; box-shadow: 0 12px 28px rgba(124,58,237,0.40); border: 4px solid rgba(255,255,255,0.95); color: white; flex: 0 0 auto; padding: 0; justify-content: center; }
.nav-item.fab::before { display: none; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; padding: 16px 24px; border-radius: var(--r-pill); border: none; cursor: pointer; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease); }
.btn-primary { background: linear-gradient(135deg, var(--plum-600) 0%, var(--plum-500) 100%); color: white; box-shadow: var(--shadow-glow-plum); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(124,58,237,0.40); }
.btn-peach { background: linear-gradient(135deg, var(--peach-500) 0%, var(--peach-400) 100%); color: white; box-shadow: var(--shadow-glow-peach); }
.btn-rose { background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-400) 100%); color: white; box-shadow: var(--shadow-glow-rose); }
.btn-ink { background: var(--ink-900); color: white; }
.btn-ghost { background: rgba(255,255,255,0.7); border: 1px solid var(--ink-200); color: var(--ink-900); }
.btn-block { width: 100%; }

/* TYPE */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1; letter-spacing: -0.035em; color: var(--ink-900); }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: -0.03em; }
.t-h2 { font-family: var(--font-body); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--ink-900); }
.t-h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; letter-spacing: -0.015em; color: var(--ink-900); }
.t-body { font-size: 14px; color: var(--ink-600); line-height: 1.5; }
.t-small { font-size: 12px; color: var(--ink-500); }
.t-overline { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.t-num { font-family: var(--font-display); font-weight: 500; font-feature-settings: 'tnum'; letter-spacing: -0.02em; }

/* CHIPS */
.chip { display: inline-flex; align-items: center; gap: 6px; background: white; border: 1px solid var(--ink-200); border-radius: var(--r-pill); padding: 7px 12px; font-size: 12px; font-weight: 600; color: var(--ink-700); white-space: nowrap; }
.chip-active { background: var(--ink-900); color: white; border-color: var(--ink-900); }
.chip-plum { background: var(--plum-50); border-color: var(--plum-200); color: var(--plum-700); }
.chip-peach { background: #FFF7ED; border-color: #FED7AA; color: #C2410C; }
.chip-rose { background: #FEF2F2; border-color: #FECACA; color: var(--rose-600); }
.chip-sky { background: #EFF6FF; border-color: #BFDBFE; color: var(--sky-500); }
.chip-honey { background: #FFFBEB; border-color: #FDE68A; color: #B45309; }
.chip-sage { background: #ECFDF5; border-color: #BBF7D0; color: var(--sage-600); }

.dot-status { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* INPUTS */
.field { background: white; border: 1.5px solid var(--ink-200); border-radius: 18px; padding: 16px 18px; display: flex; align-items: center; gap: 12px; transition: border var(--duration); }
.field:focus-within { border-color: var(--plum-500); }
.field input, .field textarea { flex: 1; border: none; background: transparent; font-size: 15px; font-weight: 500; color: var(--ink-900); }
.field input::placeholder { color: var(--ink-400); font-weight: 400; }
.field-label { font-size: 12px; font-weight: 600; color: var(--ink-500); letter-spacing: 0.02em; margin-bottom: 8px; display: block; }

/* PROGRESS BARS */
.bar { height: 8px; background: var(--ink-100); border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--plum-600), var(--plum-400)); }
.bar-fill-peach { background: linear-gradient(90deg, var(--peach-500), var(--peach-300)); }
.bar-fill-rose { background: linear-gradient(90deg, var(--rose-500), var(--rose-300)); }
.bar-fill-sky { background: linear-gradient(90deg, var(--sky-500), var(--sky-300)); }
.bar-fill-sage { background: linear-gradient(90deg, var(--sage-500), var(--sage-300)); }

/* UTILS */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.grow { flex: 1; }
.text-center { text-align: center; }
.relative { position: relative; }

/* ANIM */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.float { animation: float 6s ease-in-out infinite; }
.breathe { animation: breathe 5s ease-in-out infinite; }

/* ============================================================
   MOBILE — Real app behavior (same fluid override as nutri)
   ============================================================ */
@media (max-width: 820px) {
  html { width: 100%; height: 100%; height: 100dvh; overflow-x: hidden; overscroll-behavior-y: none; background: var(--bg-canvas); }
  body {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden !important;
    position: relative !important;
    padding-top: env(safe-area-inset-top, 0) !important;
    padding-bottom: 0 !important;
  }
  .status-bar { padding-top: 14px; }
  .bottom-nav {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0)) !important;
    height: calc(94px + env(safe-area-inset-bottom, 0)) !important;
  }
  .nav-item { padding-top: 8px; }
  .status-bar, .app-header, .bottom-nav, .nav-item {
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  }
  .screen-scroll { -webkit-overflow-scrolling: touch; }
}