/* ============================================================
   VITÁ — Design System (Farmácia digital / Health-tech)
   Fonts: Sora (display) + Inter (body)  — limpo, clínico, confiável
   Style: teal clínico + coral cuidado, glass moderado, cantos suaves
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- Brand: teal clínico ---------- */
  --teal-50:  #ECFBFD;
  --teal-100: #D2F4F8;
  --teal-200: #A7E8F0;
  --teal-300: #6FD6E3;
  --teal-400: #34BCCE;
  --teal-500: #119FB4;
  --teal-600: #0E8294;   /* ação primária */
  --teal-700: #0E6675;
  --teal-800: #114E5A;
  --teal-900: #0E3A44;   /* profundo */

  /* ---------- Cuidado / urgência: coral ---------- */
  --coral-200: #FECDD3;
  --coral-300: #FDA4AF;
  --coral-400: #FB7185;
  --coral-500: #F43F5E;
  --coral-600: #E11D48;

  /* ---------- Estoque / sucesso: mint ---------- */
  --mint-300: #6EE7B7;
  --mint-400: #34D399;
  --mint-500: #10B981;
  --mint-600: #059669;

  /* ---------- Apoio ---------- */
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;  /* alerta / estoque baixo */
  --violet-400: #A78BFA;
  --sky-400:   #38BDF8;
  --sky-500:   #0EA5E9;

  /* ---------- Ink (cinza-teal frio) ---------- */
  --ink-900: #0E2A30;
  --ink-800: #163840;
  --ink-700: #234850;
  --ink-600: #3C5860;
  --ink-500: #5E767D;
  --ink-400: #8AA1A7;
  --ink-300: #B9CCD0;
  --ink-200: #DCE8EA;
  --ink-100: #EBF2F3;
  --ink-50:  #F5F9FA;
  --white:   #FFFFFF;

  /* ---------- Surfaces ---------- */
  --bg-canvas: #F0F7F8;

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

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(14,42,48,0.05);
  --shadow-sm: 0 2px 8px rgba(14,42,48,0.08);
  --shadow-md: 0 8px 24px rgba(14,42,48,0.10);
  --shadow-lg: 0 20px 50px rgba(14,42,48,0.14);
  --shadow-glow-teal:  0 14px 36px rgba(14,130,148,0.34);
  --shadow-glow-coral: 0 14px 36px rgba(244,63,94,0.30);

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

  /* ---------- Type ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 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%, #D2F4F8 0%, transparent 60%), radial-gradient(900px 500px at 90% 20%, #FECDD3 0%, transparent 60%), #EAF4F5; }

.phone {
  width: 375px; height: 812px;
  position: relative;
  background: linear-gradient(180deg, #ECFBFD 0%, #F0F7F8 50%, #FDF2F4 100%);
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(14,42,48,0.25), 0 30px 60px -30px rgba(14,130,148,0.18), 0 0 0 8px #0E2A30, 0 0 0 9px #234850;
}

/* 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.5; }
.orb-teal   { background: #34BCCE; }
.orb-coral  { background: #FDA4AF; }
.orb-mint   { background: #6EE7B7; }
.orb-deep   { background: #114E5A; opacity: 0.4; }

/* STATUS BAR */
.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: 23px; font-weight: 600; 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.78); 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(14,42,48,0.06); }
.icon-btn .dot { position: absolute; top: 11px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral-500); border: 2px solid white; }

.avatar-btn { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #34BCCE, #0E6675); 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.74); 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(--teal-600); }
.nav-item.active::before { content: ''; position: absolute; top: -12px; width: 28px; height: 3px; background: var(--teal-500); border-radius: 0 0 6px 6px; }
.nav-item.fab { background: linear-gradient(135deg, var(--teal-600), var(--teal-400)); width: 54px; height: 54px; border-radius: 50%; align-self: center; margin-top: -16px; box-shadow: 0 12px 28px rgba(14,130,148,0.42); 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(--teal-600) 0%, var(--teal-400) 100%); color: white; box-shadow: var(--shadow-glow-teal); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 44px rgba(14,130,148,0.42); }
.btn-coral { background: linear-gradient(135deg, var(--coral-600) 0%, var(--coral-400) 100%); color: white; box-shadow: var(--shadow-glow-coral); }
.btn-deep { background: linear-gradient(135deg, var(--teal-800) 0%, var(--teal-600) 100%); color: white; }
.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: 700; font-size: 34px; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink-900); }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: 19px; 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: 700; 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(--teal-700); color: white; border-color: var(--teal-700); }
.chip-teal { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }
.chip-coral { background: #FFF1F2; border-color: var(--coral-200); color: var(--coral-600); }
.chip-mint { background: #ECFDF5; border-color: #A7F3D0; color: var(--mint-600); }
.chip-amber { background: #FEF3C7; border-color: #FDE68A; color: #B45309; }
.chip-sky { background: #EFF6FF; border-color: #BFDBFE; color: var(--sky-500); }

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

/* RX / cross badge helper */
.rx-flag { display: inline-flex; align-items: center; gap: 4px; background: #FFF1F2; color: var(--coral-600); border: 1px solid var(--coral-200); border-radius: 8px; padding: 3px 8px; font-size: 10px; font-weight: 700; }

/* 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(--teal-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; }

/* 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(--teal-600), var(--teal-400)); }
.bar-fill-coral { background: linear-gradient(90deg, var(--coral-600), var(--coral-400)); }
.bar-fill-mint { background: linear-gradient(90deg, var(--mint-600), var(--mint-400)); }

/* UTILS */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.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.08); opacity: 0.75; } }
.float { animation: float 6s ease-in-out infinite; }
.pulse { animation: pulse 2.2s ease-in-out infinite; }

/* ============================================================
   MOBILE — Real app behavior (fluid, validado)
   ============================================================ */
@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; }
}