/* ─────────────────────────────────────────────────────────────────────────
 * tokens.css — Sistema de diseño dirección C (Soft calm)
 * Wellness · serif elegante · mucho aire · paleta salvia/melocotón.
 * Fuente: prototipo screens/soft.jsx + screens/c-tokens.jsx del handoff.
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Colors ─────────────────────────────────────────────────────────── */
  --c-bg:        #f5f1ea;   /* fondo página */
  --c-card:      #ffffff;   /* superficies elevadas */
  --c-ink:       #2d2620;   /* texto principal / botón oscuro */
  --c-muted:     #8a7e72;   /* texto secundario */
  --c-faint:     #e6dfd3;   /* divisores, fondos sutiles */
  --c-accent:    #7a8e5e;   /* verde salvia · CTA primaria */
  --c-accent-2:  #d99777;   /* melocotón · CTA secundaria */
  --c-warm:      #e8d9c0;   /* beige cálido · fondos especiales */
  --c-success:   #7a8e5e;
  --c-warning:   #d99777;
  --c-danger:    #c25a2a;
  --c-streak:    #c25a2a;   /* naranja fuego de la racha */
  --c-streak-bg: #fff1e7;
  /* Aliases semánticos para nuevos templates (admin, shopping). */
  --c-cream:     var(--c-bg);
  --c-coral:     var(--c-accent-2);
  --c-line:      var(--c-faint);

  /* ── Tipografía ─────────────────────────────────────────────────────── */
  --c-font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --c-font-body:    'Manrope', 'DM Sans', system-ui, -apple-system, sans-serif;
  --c-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ── Espaciado ──────────────────────────────────────────────────────── */
  --c-space-1: 4px;
  --c-space-2: 8px;
  --c-space-3: 12px;
  --c-space-4: 16px;
  --c-space-5: 22px;
  --c-space-6: 32px;
  --c-space-7: 48px;

  /* ── Radius ─────────────────────────────────────────────────────────── */
  --c-radius-sm:   8px;
  --c-radius-md:   14px;
  --c-radius-card: 22px;
  --c-radius-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────────────────── */
  --c-shadow-card: 0 1px 2px rgba(45,38,32,.04), 0 8px 28px rgba(45,38,32,.05);
  --c-shadow-lift: 0 4px 12px rgba(45,38,32,.08), 0 16px 48px rgba(45,38,32,.08);

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --c-screen-max: 390px;       /* contenedor mobile-first */
  --c-bottom-nav: 80px;        /* alto del bottom nav incluyendo safe area */
}

/* ── Reset suave ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
input, select, textarea { font-family: inherit; }

/* ── Tipografía utilitaria ───────────────────────────────────────────── */
.c-display       { font-family: var(--c-font-display); font-weight: 400; }
.c-display-i     { font-family: var(--c-font-display); font-weight: 400; font-style: italic; }
.c-mono          { font-family: var(--c-font-mono); }
.c-eyebrow       { font-size: 11px; color: var(--c-muted); letter-spacing: .04em; text-transform: uppercase; }
.c-muted         { color: var(--c-muted); }
.c-tabular       { font-variant-numeric: tabular-nums; }

.c-h1 { font-family: var(--c-font-display); font-weight: 400; font-style: italic; font-size: 30px; line-height: 1.05; letter-spacing: -0.01em; }
.c-h2 { font-family: var(--c-font-display); font-weight: 400; font-style: italic; font-size: 22px; line-height: 1.1; }
.c-h3 { font-family: var(--c-font-display); font-weight: 400; font-style: italic; font-size: 18px; line-height: 1.2; }

/* ── App shell mobile-first (max 390 centrado en desktop) ────────────── */
.c-app {
  max-width: var(--c-screen-max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--c-bg);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* Landing / auth pages: full viewport width, no max-width cap */
.c-app--full {
  max-width: 100%;
  margin: 0;
  background: transparent;
  padding: 0;
}
.c-app-main {
  flex: 1;
  padding-bottom: calc(var(--c-bottom-nav) + var(--c-space-3));
}
.c-app-header {
  padding: 14px var(--c-space-5) 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--c-space-3);
}
.c-section {
  padding: 18px var(--c-space-5) 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.c-card {
  background: var(--c-card);
  border-radius: var(--c-radius-card);
  box-shadow: var(--c-shadow-card);
  padding: var(--c-space-5);
}
.c-card--ink     { background: var(--c-ink); color: var(--c-bg); }
.c-card--warm    { background: var(--c-warm); }
.c-card--streak  { background: var(--c-streak-bg); color: var(--c-streak); }
.c-card-row { display: grid; gap: var(--c-space-3); align-items: center; }
.c-card + .c-card { margin-top: var(--c-space-2); }

/* ── Pill / Chip ─────────────────────────────────────────────────────── */
.c-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--c-space-1);
  padding: 6px 12px;
  border-radius: var(--c-radius-pill);
  background: var(--c-card);
  color: var(--c-muted);
  border: none;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.c-pill--ink    { background: var(--c-ink); color: var(--c-bg); }
.c-pill--accent { background: #eef3e6; color: var(--c-accent); }
.c-pill--streak { background: var(--c-streak-bg); color: var(--c-streak); }

/* ── Button ──────────────────────────────────────────────────────────── */
.c-btn {
  appearance: none;
  border: none;
  border-radius: var(--c-radius-pill);
  padding: 12px 20px;
  font-family: var(--c-font-body);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--c-space-2);
  transition: background .12s, transform .04s, opacity .12s;
}
.c-btn:active   { transform: scale(.98); }
.c-btn:disabled { opacity: .5; cursor: not-allowed; }
.c-btn--block   { width: 100%; padding: 16px 0; }
.c-btn--primary { background: var(--c-accent);   color: #fff; }
.c-btn--peach   { background: var(--c-accent-2); color: var(--c-ink); }
.c-btn--ink     { background: var(--c-ink);      color: var(--c-bg); }
.c-btn--ghost   { background: transparent; color: var(--c-ink); border: 1px solid var(--c-faint); }
.c-btn--danger  { background: var(--c-danger);   color: #fff; }

/* ── Stepper (reps, kg, cantidades) ─────────────────────────────────── */
.c-stepper {
  background: var(--c-bg);
  border-radius: var(--c-radius-md);
  padding: 10px 12px;
  text-align: center;
}
.c-stepper-label {
  font-size: 10px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.c-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.c-stepper-value {
  font-family: var(--c-font-display);
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
}
.c-stepper-btn {
  width: 28px; height: 28px;
  border-radius: 14px;
  border: none;
  background: var(--c-card);
  color: var(--c-ink);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s;
}
.c-stepper-btn:hover { background: var(--c-faint); }

/* ── ProgressBar ─────────────────────────────────────────────────────── */
.c-progress {
  height: 6px;
  background: var(--c-faint);
  border-radius: 3px;
  overflow: hidden;
}
.c-progress-fill {
  height: 100%;
  background: var(--c-accent);
  border-radius: 3px;
  transition: width .3s ease-out;
}
.c-progress--thin .c-progress { height: 4px; border-radius: 2px; }

/* ── Bottom nav ──────────────────────────────────────────────────────── */
.c-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--c-screen-max);
  background: var(--c-card);
  border-top-left-radius: var(--c-radius-card);
  border-top-right-radius: var(--c-radius-card);
  display: flex;
  padding: 10px 0 calc(env(safe-area-inset-bottom, 0) + 22px);
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(45,38,32,.06);
}
.c-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--c-muted);
  text-decoration: none;
  transition: color .12s;
}
.c-nav-item.is-active { color: var(--c-accent); }
.c-nav-item-label { font-size: 9px; font-family: var(--c-font-body); }
.c-nav-item svg { width: 20px; height: 20px; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.c-input, .c-select, .c-textarea {
  width: 100%;
  background: var(--c-card);
  border: 1px solid var(--c-faint);
  border-radius: var(--c-radius-md);
  padding: 12px 14px;
  font-family: var(--c-font-body);
  font-size: 14px;
  color: var(--c-ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.c-input:focus, .c-select:focus, .c-textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(122,142,94,.15);
}
.c-input[readonly],
.identity-readonly {
  background: #f8f3eb;
  color: var(--c-muted);
  border-style: dashed;
  cursor: not-allowed;
}
.c-label {
  display: block;
  font-size: 11px;
  color: var(--c-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.c-search {
  display: flex;
  align-items: center;
  gap: var(--c-space-2);
  padding: 10px 14px;
  border-radius: var(--c-radius-pill);
  background: var(--c-card);
}
.c-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
}

/* ── Flash (alertas) ─────────────────────────────────────────────────── */
.c-flash {
  margin: 12px var(--c-space-5);
  padding: 12px var(--c-space-4);
  border-radius: var(--c-radius-md);
  font-size: 13px;
}
.c-flash--ok      { background: #eef3e6; color: var(--c-accent); }
.c-flash--warn    { background: var(--c-streak-bg); color: var(--c-streak); }

/* ── Bottom sheet ────────────────────────────────────────────────────── */
.c-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(45,38,32,.4);
  z-index: 100;
  display: none; align-items: flex-end; justify-content: center;
  animation: c-fade .15s ease-out;
}
.c-sheet-backdrop.is-open { display: flex; }

/* ── Export row (sheet de exportar lista de compras, etc.) ───────────── */
.c-export-row {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--c-ink);
}
.c-export-glyph {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.c-sheet {
  width: 100%;
  max-width: var(--c-screen-max);
  margin: 0 auto;
  background: var(--c-bg);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  padding: 16px var(--c-space-5) 22px;
  max-height: 85vh;
  overflow-y: auto;
  animation: c-slide-up .2s ease-out;
}
.c-sheet-handle {
  width: 36px; height: 4px;
  background: var(--c-faint);
  border-radius: 2px;
  margin: 0 auto 14px;
}

@keyframes c-fade     { from { opacity: 0 } to { opacity: 1 } }
@keyframes c-slide-up { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

/* ── Helpers ─────────────────────────────────────────────────────────── */
.c-stack > * + *      { margin-top: var(--c-space-3); }
.c-stack-tight > * + *{ margin-top: var(--c-space-2); }
.c-row                { display: flex; align-items: center; gap: var(--c-space-3); }
.c-row--between       { justify-content: space-between; }
.c-row--baseline      { align-items: baseline; }
.c-grid-2             { display: grid; grid-template-columns: 1fr 1fr; gap: var(--c-space-3); }
.c-grid-3             { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--c-space-3); }
.c-text-center        { text-align: center; }
.c-spacer             { flex: 1; }

/* Avoid horizontal scroll on mobile */
.c-app-main { overflow-x: hidden; }

/* Hide scrollbars on horizontal scroll containers */
.c-hscroll {
  display: flex;
  gap: var(--c-space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.c-hscroll::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────────────
 * Responsive
 *   Mobile  (<768px):  bottom-nav fija al viewport (mobile-first base)
 *   Tablet  (768-1023):card centrado tipo "phone-on-desk", bottom-nav
 *                      contenida dentro del card
 *   Desktop (≥1024px): side-rail vertical a la izquierda · contenido a
 *                      la derecha · bottom-nav oculta
 * ───────────────────────────────────────────────────────────────────── */

/* Mobile estricto */
@media (max-width: 767px) {
  .c-app {
    max-width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}



/* App-specific responsive surfaces */
.page-pad,
.form-shell {
  padding: 18px var(--c-space-5) calc(var(--c-bottom-nav) + 18px);
}
.auth-shell {
  min-height: 100vh;
  padding: 28px var(--c-space-5);
  display: grid;
  gap: var(--c-space-4);
  align-content: center;
}
.auth-title { font-size: 34px; line-height: 1.02; margin: 8px 0 18px; }
.auth-slides { display: grid; gap: 10px; }
.auth-slide {
  border: 1px solid rgba(245,241,234,.16);
  border-radius: 18px;
  padding: 14px;
  background: rgba(245,241,234,.06);
}
.auth-slide p { margin: 4px 0 0; opacity: .72; font-size: 12px; }
.auth-step {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--c-accent-2);
  color: var(--c-ink);
  font-weight: 700;
  margin-bottom: 8px;
}
.google-btn {
  background: #fff;
  color: var(--c-ink);
  border: 1px solid var(--c-faint);
  text-decoration: none;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--c-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; background: var(--c-faint); flex: 1; }
.auth-link {
  display: block;
  text-align: center;
  margin-top: 18px;
  color: var(--c-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.exercise-card-grid,
.patient-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.exercise-card.is-added { opacity: .52; }
.patient-card.is-active { outline: 2px solid rgba(122,142,94,.32); }
.macro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.food-macro-list { display: grid; gap: 8px; margin-top: 10px; }
.food-macro-row,
.record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--c-faint);
}
.timer-board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.timer-board > div {
  border: 1px solid rgba(245,241,234,.15);
  border-radius: 16px;
  padding: 12px;
  background: rgba(245,241,234,.06);
}
.timer-board strong {
  display: block;
  font-family: var(--c-font-display);
  font-size: 30px;
  line-height: 1;
  margin-top: 4px;
}
.mini-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: 22px;
  background: rgba(45,38,32,.36);
  backdrop-filter: blur(10px);
}
.tutorial-overlay.is-open { display: grid; }
.tutorial-card { max-width: 420px; width: 100%; }
.tutorial-card-list { display: grid; gap: 8px; margin: 12px 0; }
.tutorial-step-card {
  border: 1px solid var(--c-faint);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--c-bg);
}
.tutorial-step-card strong { display: block; font-size: 13px; }
.tutorial-step-card p { margin: 4px 0 0; color: var(--c-muted); font-size: 12px; }
.tutorial-actions { display: grid; gap: 8px; }
.timer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.timer-controls .c-btn {
  padding: 9px 12px;
  font-size: 12px;
}
.c-btn:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
}

@media (min-width: 768px) {
  :root { --c-screen-max: 760px; }
  .auth-shell {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 24px;
  }
  .form-shell { max-width: 620px; margin: 0 auto; }
  .exercise-card-grid,
  .patient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .macro-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  :root {
    --c-screen-max: 1180px;
    --c-bottom-nav: 0px;
  }
  body {
    background:
      radial-gradient(circle at top left, rgba(217,151,119,.25), transparent 34%),
      linear-gradient(135deg, #f8f3eb 0%, #efe7d9 55%, #e9dfcf 100%);
  }
  .c-app {
    max-width: var(--c-screen-max);
    padding: 0 28px;
    background: transparent;
  }
  .c-app-header,
  .c-app-main {
    width: calc(100% - 210px);
    margin-left: 210px;
  }
  .c-app-header {
    padding: 28px 0 8px;
  }
  .c-flash {
    width: calc(100% - 210px);
    margin: 12px 0 12px 210px;
  }
  .c-app-main {
    padding-bottom: 44px;
    overflow: visible;
  }
  .c-nav {
    position: fixed;
    top: 110px;
    bottom: auto;
    left: max(28px, calc((100vw - var(--c-screen-max)) / 2 + 28px));
    transform: none;
    width: 172px;
    max-width: none;
    padding: 12px;
    border-radius: 28px;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--c-shadow-lift);
  }
  .c-nav-item {
    flex: none;
    min-height: 46px;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 18px;
    gap: 10px;
  }
  .c-nav-item.is-active {
    background: #eef3e6;
  }
  .c-nav-item-label { font-size: 12px; font-weight: 700; }
  .page-pad {
    padding: 24px 0 44px;
  }
  .exercise-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .patient-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-card,
  .routine-block { margin-bottom: 14px; }
  .routine-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
    gap: 20px;
    align-items: end;
  }
  .routine-hero .timer-board { margin-top: 0; }
  .auth-title { font-size: 48px; }
}