/* ═══════════════════════════════════════════════════════════════
   VITTA+ DESIGN SYSTEM v2.0
   Aquarela Botânica — Feminino, Premium, Etéreo
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Inter:wght@300;400;500;600&family=DM+Mono:ital,wght@0,300;0,400;1,300&display=swap');

/* ─── TOKENS ───────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:           #FAF8F4;   /* papel artesanal, off-white quente */
  --bg-warm:      #F5F0E8;
  --surface:      #FFFEFB;   /* cartão / superfície elevada */
  --surface-2:    #F9F6F1;   /* superfície secundária */
  --surface-hover:#F4EFE7;

  /* Rosa — acento primário */
  --rose:         #B87868;   /* rosa queimado, principal */
  --rose-mid:     #C98C7C;
  --rose-light:   #E8C4B8;
  --rose-pale:    #F4E2DC;
  --rose-xs:      #FAF2F0;

  /* Sálvia — secundário */
  --sage:         #698C6C;
  --sage-mid:     #88A88A;
  --sage-light:   #B8CEB8;
  --sage-pale:    #DCE8DA;
  --sage-xs:      #EEF4EE;

  /* Texto */
  --text-1:       #2A2018;   /* primário — quente escuro */
  --text-2:       #7A6860;   /* secundário */
  --text-3:       #B0A098;   /* terciário, rótulos suaves */
  --text-inv:     #FAF8F4;

  /* Dourado — acento discreto */
  --gold:         #C09050;
  --gold-light:   #D8AE78;

  /* Bordas e sombras */
  --border:       rgba(140,120,110,.14);
  --border-mid:   rgba(140,120,110,.24);
  --shadow-xs:    0 1px 2px rgba(42,32,24,.04);
  --shadow-sm:    0 2px 8px rgba(42,32,24,.06);
  --shadow-md:    0 4px 18px rgba(42,32,24,.08);
  --shadow-lg:    0 8px 32px rgba(42,32,24,.10);

  /* Tipografia */
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:   'DM Mono', 'Courier New', monospace;

  /* Raios */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  30px;
  --r-2xl: 40px;
  --r-pill:9999px;

  /* Espaço */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* Transições */
  --t-fast: .14s ease;
  --t-base: .24s cubic-bezier(.4,0,.2,1);
  --t-slow: .40s cubic-bezier(.4,0,.2,1);
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Textura de papel — sutil, imperceptível */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}

/* ─── TIPOGRAFIA ─────────────────────────────────────────────────── */
.t-display         { font-family:var(--serif); font-style:italic; font-weight:500; line-height:1.05; }
.t-serif           { font-family:var(--serif); font-weight:400; }
.t-serif-medium    { font-family:var(--serif); font-weight:500; }
.t-serif-semi      { font-family:var(--serif); font-weight:600; }
.t-mono            { font-family:var(--mono); }

.text-xs  { font-size:11px; line-height:1.4; }
.text-sm  { font-size:13px; line-height:1.5; }
.text-md  { font-size:15px; line-height:1.6; }
.text-lg  { font-size:17px; line-height:1.5; }
.text-xl  { font-size:20px; line-height:1.4; }
.text-2xl { font-size:24px; line-height:1.3; }
.text-3xl { font-size:30px; line-height:1.2; }
.text-4xl { font-size:40px; line-height:1.05; }

.text-muted  { color:var(--text-2); }
.text-faint  { color:var(--text-3); }
.text-rose   { color:var(--rose); }
.text-sage   { color:var(--sage); }
.text-gold   { color:var(--gold); }

/* ─── SHELL / LAYOUT ─────────────────────────────────────────────── */
.app-shell {
  display:flex;
  min-height:100vh;
  position:relative;
  z-index:1;
}

.main-area {
  flex:1;
  max-width:680px;
  padding: var(--s6) var(--s6) var(--s12);
  position:relative;
}

/* ─── SIDEBAR (desktop / iPad landscape) ────────────────────────── */
.sidebar {
  width:210px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:var(--s6) 0;
  height:100vh;
  position:sticky;
  top:0;
  overflow-y:auto;
  flex-shrink:0;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar { display:none; }

.sidebar-logo {
  font-family:var(--serif);
  font-style:italic;
  font-size:22px;
  color:var(--rose);
  padding:0 var(--s5) var(--s5);
  border-bottom:1px solid var(--border);
  margin-bottom:var(--s3);
  letter-spacing:-.01em;
}

.sidebar-nav {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 var(--s2);
  flex:1;
}

.nav-item {
  display:flex;
  align-items:center;
  gap:var(--s3);
  padding:9px var(--s3);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:all var(--t-base);
  color:var(--text-2);
  font-size:13.5px;
  font-weight:400;
  border:none;
  background:none;
  width:100%;
  text-align:left;
  text-decoration:none;
  letter-spacing:.005em;
}
.nav-item:hover   { background:var(--surface-2); color:var(--text-1); }
.nav-item.active  { background:var(--rose-pale); color:var(--rose); font-weight:500; }

.nav-icon {
  width:18px; height:18px; flex-shrink:0;
  opacity:.65; transition:opacity var(--t-fast);
}
.nav-item.active .nav-icon,
.nav-item:hover .nav-icon { opacity:1; }

/* ─── BOTTOM NAV (mobile) ────────────────────────────────────────── */
.bottom-nav {
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:var(--s2) var(--s4);
  padding-bottom:calc(var(--s2) + env(safe-area-inset-bottom));
  z-index:100;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.bottom-nav-inner {
  display:flex;
  justify-content:space-around;
  max-width:440px;
  margin:0 auto;
}
.bnav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  cursor:pointer;
  color:var(--text-3);
  font-size:9.5px;
  letter-spacing:.04em;
  padding:var(--s1) var(--s4);
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
  border:none; background:none;
}
.bnav-item.active  { color:var(--rose); }
.bnav-item svg     { width:22px; height:22px; }

/* ─── HOME — HEADER ──────────────────────────────────────────────── */
.home-header {
  position:relative;
  padding: var(--s8) 0 var(--s4);
  overflow:hidden;
}

.home-date {
  font-size:11px;
  font-weight:400;
  color:var(--text-3);
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:var(--s3);
}

.home-greeting {
  font-size:17px;
  font-weight:300;
  color:var(--text-2);
  line-height:1.2;
}

.home-name {
  font-family:var(--serif);
  font-style:italic;
  font-size:46px;
  font-weight:500;
  color:var(--rose);
  line-height:1.0;
  display:block;
  margin-top:2px;
  letter-spacing:-.02em;
}

.home-tagline {
  font-family:var(--serif);
  font-style:italic;
  font-size:13.5px;
  color:var(--text-3);
  margin-top:var(--s3);
  letter-spacing:.02em;
  line-height:1.5;
}

/* Marca d'água botânica */
.botanical-mark {
  position:absolute;
  top:-24px;
  right:-28px;
  width:190px;
  opacity:.075;     /* 7.5% — quase imperceptível */
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* Garante texto na frente da marca */
.home-header > *:not(.botanical-mark) { position:relative; z-index:1; }

/* ─── SEÇÃO — CABEÇALHO ──────────────────────────────────────────── */
.section-head {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:var(--s4);
  margin-top:var(--s8);
}
.section-title {
  font-family:var(--serif);
  font-size:16px;
  font-weight:600;
  color:var(--text-1);
  letter-spacing:-.01em;
}

/* ─── STAT CARDS — Evolução da Semana ────────────────────────────── */
.stat-row {
  display:flex;
  gap:var(--s3);
  overflow-x:auto;
  padding-bottom:var(--s2);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.stat-row::-webkit-scrollbar { display:none; }

.stat-card {
  flex:0 0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s4) var(--s4) var(--s3);
  min-width:108px;
  display:flex;
  flex-direction:column;
  gap:var(--s2);
  transition:all var(--t-base);
  box-shadow:var(--shadow-xs);
  cursor:pointer;
}
.stat-card:hover {
  border-color:var(--border-mid);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}

.stat-card-icon {
  width:20px; height:20px;
  color:var(--rose-mid);
  flex-shrink:0;
}

.stat-card-label {
  font-size:10.5px;
  font-weight:500;
  color:var(--text-3);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.stat-card-value {
  font-family:var(--mono);
  font-size:20px;
  font-weight:300;
  color:var(--text-1);
  line-height:1;
  letter-spacing:-.01em;
}

/* Barra de progresso mínima */
.stat-bar {
  height:2px;
  background:var(--rose-pale);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-top:2px;
}
.stat-bar-fill {
  height:100%;
  background:linear-gradient(90deg, var(--rose-light), var(--rose));
  border-radius:var(--r-pill);
  transition:width .7s cubic-bezier(.4,0,.2,1);
}

/* ─── ACTION CARDS — Ações de Hoje ──────────────────────────────── */
.action-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--s3);
}

.action-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s5) var(--s3) var(--s4);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--s2);
  cursor:pointer;
  transition:all var(--t-base);
  box-shadow:var(--shadow-xs);
  text-align:center;
  position:relative;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.action-card:hover {
  border-color:var(--border-mid);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.action-card:active {
  transform:translateY(0);
  box-shadow:var(--shadow-xs);
}

.action-card-icon {
  width:26px; height:26px;
  color:var(--rose-mid);
  flex-shrink:0;
}

.action-card-name {
  font-size:12.5px;
  font-weight:500;
  color:var(--text-1);
  line-height:1.3;
}

.action-card-status {
  font-size:10.5px;
  color:var(--text-3);
  line-height:1.3;
}

.action-card-btn {
  font-size:10.5px;
  font-weight:500;
  color:var(--rose);
  padding:4px var(--s3);
  border:1px solid var(--rose-light);
  border-radius:var(--r-pill);
  background:var(--rose-xs);
  cursor:pointer;
  transition:all var(--t-fast);
  margin-top:2px;
  letter-spacing:.01em;
}
.action-card-btn:hover {
  background:var(--rose-pale);
  border-color:var(--rose-mid);
}

/* Estado: completado */
.action-card.done {
  border-color:var(--sage-pale);
}
.action-card.done .action-card-icon { color:var(--sage); }
.action-card.done .action-card-btn {
  color:var(--sage);
  border-color:var(--sage-light);
  background:var(--sage-xs);
}

/* ─── CARD GENÉRICO ──────────────────────────────────────────────── */
.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s5);
  box-shadow:var(--shadow-xs);
}

/* ─── BOTÕES ─────────────────────────────────────────────────────── */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s2);
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  border-radius:var(--r-pill);
  border:none;
  cursor:pointer;
  transition:all var(--t-base);
  letter-spacing:.01em;
  white-space:nowrap;
  padding:10px var(--s6);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary {
  background:var(--rose);
  color:var(--text-inv);
  box-shadow:0 2px 10px rgba(184,120,104,.22);
}
.btn-primary:hover {
  background:var(--rose-mid);
  box-shadow:0 4px 18px rgba(184,120,104,.32);
  transform:translateY(-1px);
}
.btn-secondary {
  background:var(--surface);
  color:var(--text-1);
  border:1px solid var(--border-mid);
}
.btn-secondary:hover {
  background:var(--surface-2);
}
.btn-ghost {
  background:transparent;
  color:var(--rose);
  border:1px solid var(--rose-light);
}
.btn-ghost:hover {
  background:var(--rose-xs);
  border-color:var(--rose-mid);
}
.btn-sm  { padding:7px var(--s4); font-size:12px; }
.btn-lg  { padding:13px var(--s8); font-size:15px; }

/* ─── FORM ───────────────────────────────────────────────────────── */
.field { display:flex; flex-direction:column; gap:var(--s2); }
.field-label {
  font-size:11.5px;
  font-weight:500;
  color:var(--text-2);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.field-input {
  background:var(--surface);
  border:1px solid var(--border-mid);
  border-radius:var(--r-sm);
  padding:10px var(--s4);
  font-family:var(--sans);
  font-size:15px;
  color:var(--text-1);
  outline:none;
  transition:all var(--t-fast);
  width:100%;
  appearance:none;
}
.field-input:focus {
  border-color:var(--rose-light);
  box-shadow:0 0 0 3px var(--rose-pale);
}
.field-input::placeholder { color:var(--text-3); }

/* ─── MODAL / BOTTOM SHEET ───────────────────────────────────────── */
.modal-bg {
  position:fixed; inset:0;
  background:rgba(42,32,24,.22);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  z-index:200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:var(--s4);
}
.modal-sheet {
  background:var(--surface);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  padding:var(--s6);
  width:100%;
  max-width:580px;
  max-height:88vh;
  overflow-y:auto;
}
.modal-handle {
  width:36px; height:4px;
  background:var(--border-mid);
  border-radius:var(--r-pill);
  margin:0 auto var(--s5);
}

/* ─── TELA DE PIN ────────────────────────────────────────────────── */
.pin-screen {
  position:fixed; inset:0;
  background:var(--bg);
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:var(--s6);
}
/* CRÍTICO: quando hidden, zero pointer-events */
.pin-screen.hidden {
  display:none !important;
  pointer-events:none !important;
  visibility:hidden !important;
}

.pin-logo {
  font-family:var(--serif);
  font-style:italic;
  font-size:32px;
  color:var(--rose);
  letter-spacing:-.02em;
}
.pin-sub {
  font-size:13px;
  color:var(--text-3);
  text-align:center;
  margin-top:-var(--s4);
}
.pin-dots {
  display:flex;
  gap:var(--s4);
  margin:var(--s2) 0;
}
.pin-dot {
  width:13px; height:13px;
  border-radius:50%;
  border:1.5px solid var(--border-mid);
  background:transparent;
  transition:all var(--t-fast);
}
.pin-dot.filled {
  background:var(--rose);
  border-color:var(--rose);
}
.pin-error .pin-dot { border-color:var(--rose); animation:shake .35s ease; }

@keyframes shake {
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}

.pin-pad {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s3);
  max-width:260px;
  width:100%;
}
.pin-key {
  aspect-ratio:1;
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--border);
  font-family:var(--mono);
  font-size:22px;
  font-weight:300;
  color:var(--text-1);
  cursor:pointer;
  transition:all var(--t-fast);
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.pin-key:hover  { background:var(--surface-2); border-color:var(--border-mid); }
.pin-key:active { background:var(--rose-xs); border-color:var(--rose-light); transform:scale(.94); }

/* ─── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar         { width:4px; height:4px; }
::-webkit-scrollbar-track   { background:transparent; }
::-webkit-scrollbar-thumb   { background:var(--border-mid); border-radius:var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ─── UTILITÁRIOS ────────────────────────────────────────────────── */
.flex        { display:flex; }
.flex-col    { display:flex; flex-direction:column; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-2       { gap:var(--s2); }
.gap-3       { gap:var(--s3); }
.gap-4       { gap:var(--s4); }
.w-full      { width:100%; }
.relative    { position:relative; }

/* ─── RESPONSIVO ─────────────────────────────────────────────────── */
@media (max-width:768px) {
  .sidebar    { display:none; }
  .bottom-nav { display:flex; }
  .main-area  {
    padding: var(--s4) var(--s4);
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
  .action-grid    { grid-template-columns:repeat(2,1fr); }
  .home-name      { font-size:38px; }
  .botanical-mark { width:150px; opacity:.06; top:-16px; right:-16px; }
}

@media (max-width:375px) {
  .home-name { font-size:32px; }
  .action-grid { gap:var(--s2); }
  .stat-card  { min-width:98px; }
}

/* iPad — sidebar aparece na orientação landscape */
@media (min-width:769px) and (max-width:1024px) {
  .main-area { padding: var(--s5) var(--s5); }
  .home-name { font-size:42px; }
}