/* ============================================================
   VityHealth — dark wellness theme  (v1)
   Drop-in, sin build. React 18 CDN + CSS plano.
   Dark-first (R1). Tipografía Nunito (R2). Gráficas Chart.js (R4).
   Prefijo de clase: .dd-*  para no chocar con tu CSS actual.
   ============================================================ */

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

/* ---------- Tokens (dark-first) ---------- */
:root {
  --dd-font: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* superficies */
  --dd-bg:         #0F1318;
  --dd-surface:    #1A2027;
  --dd-surface-2:  #20272F;
  --dd-line:       #232B34;
  --dd-track:      #262E37;

  /* texto */
  --dd-text:       #EEF1F4;
  --dd-text-sub:   #8A95A1;
  --dd-text-dim:   #6C7682;

  /* acentos */
  --dd-coral:      #FF8A5C;
  --dd-coral-ink:  #3A1A0E;
  --dd-teal:       #5DCAA5;
  --dd-amber:      #EF9F27;
  --dd-violet:     #AFA9EC;
  --dd-violet-2:   #6C63C9;

  /* semánticos (usar para estados, no por color bonito) */
  --dd-good:       var(--dd-teal);
  --dd-warn:       var(--dd-amber);
  --dd-danger:     #E24B4A;

  /* tintes para fondos de pill/chip (10–14% del acento) */
  --dd-good-bg:    #172A23;
  --dd-warn-bg:    #231E16;
  --dd-info-bg:    #2A2233;

  /* radios */
  --dd-r-card:     22px;
  --dd-r-btn:      18px;
  --dd-r-chip:     14px;
  --dd-r-pill:     13px;
  --dd-r-icon:     12px;

  /* ritmo */
  --dd-gap:        12px;
  --dd-pad-card:   16px 18px;
}

/* Scaffold de light mode para después (R1: dark primero).
   Activar luego envolviendo la app en <div class="dd-app dd-light">. */
.dd-light {
  --dd-bg:        #F4F2EC;
  --dd-surface:   #FFFFFF;
  --dd-surface-2: #F1EFE8;
  --dd-line:      #E3E0D6;
  --dd-track:     #E8E5DC;
  --dd-text:      #1C2127;
  --dd-text-sub:  #5F6873;
  --dd-text-dim:  #8A95A1;
  --dd-good-bg:   #E1F5EE;
  --dd-warn-bg:   #FAEEDA;
  --dd-info-bg:   #EEEDFE;
}

/* ---------- App shell ---------- */
.dd-app {
  font-family: var(--dd-font);
  color: var(--dd-text);
  background: var(--dd-bg);
  -webkit-font-smoothing: antialiased;
}
.dd-app * { box-sizing: border-box; }
.dd-screen { padding: 14px 14px 90px; max-width: 480px; margin: 0 auto; }

.dd-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 14px; }
.dd-header__date { color: var(--dd-text-sub); font-weight: 600; font-size: 13px; }
.dd-header__title { font-size: 22px; font-weight: 800; margin-top: 1px; }
.dd-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--dd-surface-2); color: var(--dd-coral);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}

/* ---------- Cards ---------- */
.dd-card { background: var(--dd-surface); border-radius: var(--dd-r-card); padding: var(--dd-pad-card); }
.dd-card + .dd-card,
.dd-card + .dd-row,
.dd-row + .dd-card { margin-top: var(--dd-gap); }
.dd-card--center { text-align: center; }
.dd-row { display: flex; gap: var(--dd-gap); }
.dd-row > .dd-card { flex: 1; }

.dd-sub { color: var(--dd-text-sub); font-weight: 600; }
.dd-card__title { font-weight: 800; font-size: 15px; }

/* ---------- Pills / chips ---------- */
.dd-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 800;
  padding: 5px 11px; border-radius: var(--dd-r-pill);
}
.dd-pill--good { background: var(--dd-good-bg); color: var(--dd-teal); }
.dd-pill--warn { background: var(--dd-warn-bg); color: var(--dd-amber); }
.dd-pill--info { background: var(--dd-info-bg); color: var(--dd-violet); }
.dd-chip { /* chip clínico (fase Mounjaro, etc.) */
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--dd-info-bg); color: #D6BEF5;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--dd-r-chip);
}

/* ---------- Anillo de progreso (SVG) ---------- */
/* uso: <svg class="dd-ring" viewBox="0 0 160 160"> con dd-ring__track + dd-ring__arc */
.dd-ring { transform: rotate(-90deg); }
.dd-ring__track { fill: none; stroke: var(--dd-track); stroke-width: 14; }
.dd-ring__arc {
  fill: none; stroke: var(--dd-coral); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1);
}
.dd-ring__value { font-size: 42px; font-weight: 800; line-height: 1; }

/* ---------- Barras (macros) ---------- */
.dd-bar { height: 10px; border-radius: 6px; background: var(--dd-track); overflow: hidden; }
.dd-bar__fill { height: 100%; width: 0; border-radius: 6px; background: var(--dd-teal);
  transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.dd-bar__fill--protein { background: var(--dd-teal); }
.dd-bar__fill--carbs   { background: var(--dd-amber); }
.dd-bar__fill--fat     { background: var(--dd-violet); }
.dd-bar__label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.dd-bar__label b { font-weight: 700; }

/* ---------- Escala 0–10 (calidad de sueño, etc.) ---------- */
.dd-scale { height: 10px; border-radius: 6px; position: relative;
  background: linear-gradient(90deg, var(--dd-danger), var(--dd-amber), var(--dd-teal)); }
.dd-scale__marker { position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--dd-text);
  border: 3px solid var(--dd-bg); }
.dd-scale__legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; }

/* ---------- Barra segmentada (fases de sueño) ---------- */
.dd-segbar { display: flex; height: 9px; border-radius: 5px; overflow: hidden; gap: 2px; }
.dd-segbar > span { display: block; }
.dd-seg-deep  { background: var(--dd-violet-2); }
.dd-seg-light { background: var(--dd-violet); }
.dd-seg-rem   { background: var(--dd-teal); }
.dd-seg-awake { background: #3A4250; }

/* ---------- Filas de comida / lista ---------- */
.dd-meal { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--dd-line); }
.dd-meal:first-of-type { border-top: none; }
.dd-meal__icon { width: 38px; height: 38px; border-radius: var(--dd-r-icon);
  display: flex; align-items: center; justify-content: center; }
.dd-meal__name { font-weight: 700; font-size: 14px; }
.dd-meal__kcal { font-weight: 800; font-size: 14px; }
.dd-meal--pending .dd-meal__name { color: var(--dd-text-sub); }

/* ---------- Stat cards (composición, scores) ---------- */
.dd-stat { text-align: center; }
.dd-stat__label { font-size: 12px; color: var(--dd-text-sub); font-weight: 600; }
.dd-stat__value { font-size: 24px; font-weight: 800; margin-top: 6px; line-height: 1; }
.dd-delta { font-size: 11px; } /* usar con .dd-pill--good/--warn */

/* ---------- Botón primario ---------- */
.dd-btn {
  width: 100%; border: none; cursor: pointer;
  font-family: var(--dd-font); font-weight: 800; font-size: 15px;
  padding: 15px; border-radius: var(--dd-r-btn);
  background: var(--dd-coral); color: var(--dd-coral-ink);
  transition: transform .12s ease, filter .12s ease;
}
.dd-btn:active { transform: scale(.985); }
.dd-btn:hover { filter: brightness(1.04); }
.dd-btn--ghost { background: transparent; color: var(--dd-text);
  border: 1px solid var(--dd-line); }

/* ---------- Tab bar ---------- */
/* EL "BAILE" v3 (la causa que sobrevivió a v88/v89): la barra era un scroller
   horizontal (overflow-x:auto + pestañas flex 1 0 auto que sumaban más que el ancho
   del iPhone). Está en TODAS las pantallas, así que cualquier swipe diagonal la
   deslizaba ("la app baila") y los títulos se salían de vista ("se pierden títulos").
   Fix: la barra YA NO scrollea — las pestañas se COMPRIMEN para caber siempre
   (flex 1 1 0 + min-width:0 + ellipsis). Nada que scrollee = nada que baile. */
.dd-tabbar { display: flex; padding: 12px 2px 6px; overflow-x: hidden; }
.dd-tab { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: center; color: var(--dd-text-dim);
  font-size: 10px; font-weight: 700; background: none; border: none; padding: 0 1px;
  font-family: var(--dd-font); cursor: pointer; }
.dd-tab i { font-size: 19px; display: block; margin-bottom: 2px; }
.dd-tab--active { color: var(--dd-coral); font-weight: 800; }

/* ---------- Modal (reemplaza confirm() nativo — backlog #4 y #10) ---------- */
.dd-modal__backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: dd-fade .18s ease;
}
.dd-modal {
  width: 100%; max-width: 440px; margin: 0 12px 12px;
  background: var(--dd-surface); border-radius: var(--dd-r-card);
  padding: 22px 20px 18px; animation: dd-slide .22s cubic-bezier(.2,.8,.2,1);
}
.dd-modal__title { font-size: 17px; font-weight: 800; }
.dd-modal__body { color: var(--dd-text-sub); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.dd-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.dd-modal__actions .dd-btn { padding: 13px; }
.dd-btn--danger { background: var(--dd-danger); color: #fff; }

@keyframes dd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dd-slide { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ---------- Toast (restyle — backlog #3 es lógica, ver brief) ---------- */
.dd-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 1100; background: var(--dd-surface-2); color: var(--dd-text);
  font-weight: 700; font-size: 14px; padding: 12px 18px;
  border-radius: var(--dd-r-pill); border: 1px solid var(--dd-line);
}

/* ---------- Badge de fuente de dispositivo ---------- */
.dd-source { /* "Vía Garmin / Fitbit / Apple Health" */ }

/* ---------- Accesibilidad ---------- */
.dd-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Overrides para App Header (topbar) ---------- */
.app-topbar {
  background: var(--dd-surface) !important;
  border-bottom: 1px solid var(--dd-line) !important;
  /* Notch / Dynamic Island: el fondo de la barra sube hasta el borde superior
     (margin-top negativo cancela el inset que el body ya aplicó) y el contenido
     respira por debajo del área segura. En navegador el inset = 0 → sin cambios. */
  margin-top: calc(-1 * env(safe-area-inset-top)) !important;
  padding-top: calc(14px + env(safe-area-inset-top)) !important;
}
.topbar-greeting {
  color: var(--dd-text-sub) !important;
}
.context-btn {
  border-color: var(--dd-line) !important;
  color: var(--dd-text) !important;
}
.context-btn.active {
  background: var(--dd-surface-2) !important;
}
.context-dropdown {
  background: var(--dd-surface-2) !important;
  border-color: var(--dd-line) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}
.context-dropdown button {
  color: var(--dd-text) !important;
}
.context-dropdown button:hover {
  background: var(--dd-surface) !important;
}
.context-dropdown button.selected {
  background: var(--dd-coral) !important;
  color: var(--dd-coral-ink) !important;
}
.app-logout {
  color: var(--dd-coral) !important;
  border-color: rgba(255, 138, 92, 0.2) !important;
}
.app-logout:hover {
  background: var(--dd-surface-2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .dd-bar__fill, .dd-ring__arc, .dd-modal, .dd-modal__backdrop, .dd-btn { transition: none; animation: none; }
}