/* ============================================================
   PILAS — diseño iOS para el plan nutricional de Isra
   Tokens: fondo agrupado iOS, tarjetas continuas, acento por
   intensidad (nº de pilas). La pila es la firma visual.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Superficies (iOS system grouped) */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-2: #F7F7FA;
  --separator: rgba(60, 60, 67, 0.12);

  /* Texto */
  --label: #0A0A0C;
  --label-2: rgba(60, 60, 67, 0.62);
  --label-3: rgba(60, 60, 67, 0.35);

  /* Acentos por intensidad */
  --p1: #2FB25C;          /* 1 pila: rodaje suave */
  --p2: #E8930C;          /* 2 pilas: día de carga media */
  --p3: #E8415C;          /* 3 pilas: alta intensidad */
  --pc: #5E5CE6;          /* carga CH: semana de carrera */
  --p1-soft: rgba(47, 178, 92, 0.14);
  --p2-soft: rgba(232, 147, 12, 0.14);
  --p3-soft: rgba(232, 65, 92, 0.14);
  --pc-soft: rgba(94, 92, 230, 0.14);

  --tint: #0A84FF;        /* acción estándar iOS */
  --danger: #FF3B30;

  --radius: 18px;
  --radius-s: 12px;
  --tabbar-h: 78px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --card-2: #2C2C2E;
    --separator: rgba(84, 84, 88, 0.5);
    --label: #F5F5F7;
    --label-2: rgba(235, 235, 245, 0.62);
    --label-3: rgba(235, 235, 245, 0.32);
    --p1: #32D74B;
    --p2: #FFA00A;
    --p3: #FF4A63;
    --pc: #7D7BFF;
    --p1-soft: rgba(50, 215, 75, 0.16);
    --p2-soft: rgba(255, 160, 10, 0.16);
    --p3-soft: rgba(255, 74, 99, 0.16);
    --pc-soft: rgba(125, 123, 255, 0.16);
    --tint: #0A84FF;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

#app { max-width: 560px; margin: 0 auto; }

.view {
  padding: max(env(safe-area-inset-top), 14px) 16px calc(var(--tabbar-h) + 28px);
  min-height: 100dvh;
  animation: view-in 0.28s cubic-bezier(0.32, 0.72, 0.35, 1);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Tipografía ---------- */

.large-title { font-size: 34px; font-weight: 800; letter-spacing: 0.2px; line-height: 1.15; }
.title-2 { font-size: 22px; font-weight: 700; letter-spacing: 0.1px; }
.headline { font-size: 17px; font-weight: 600; }
.body { font-size: 17px; line-height: 1.45; }
.subhead { font-size: 15px; line-height: 1.4; }
.footnote { font-size: 13px; line-height: 1.35; }
.caption { font-size: 12px; }
.muted { color: var(--label-2); }

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label-2);
}

/* ---------- Tarjetas y listas ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
}

.list-card { background: var(--card); border-radius: var(--radius); overflow: hidden; }

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  min-height: 52px;
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.row + .row { border-top: 0.5px solid var(--separator); }
.row:active { background: var(--card-2); }
.row .chevron { margin-left: auto; color: var(--label-3); flex: none; }

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 26px 4px 10px;
}

/* ---------- La pila (firma) ---------- */

.pila {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 7px;
  border-radius: 8px;
  flex: none;
}

.pila .cell {
  width: 7px;
  height: 14px;
  border-radius: 2.5px;
  background: var(--separator);
}

.pila.n1 .cell.on { background: var(--p1); }
.pila.n2 .cell.on { background: var(--p2); }
.pila.n3 .cell.on { background: var(--p3); }
.pila.n1 { background: var(--p1-soft); }
.pila.n2 { background: var(--p2-soft); }
.pila.n3 { background: var(--p3-soft); }
.pila.carga { background: var(--pc-soft); color: var(--pc); font-weight: 800; font-size: 12px; letter-spacing: 0.04em; padding: 5px 8px; }

.pila.lg { gap: 4px; padding: 6px 9px; border-radius: 11px; }
.pila.lg .cell { width: 10px; height: 20px; border-radius: 3.5px; }

/* ---------- Hoy (home) ---------- */

.today-hero {
  border-radius: 24px;
  padding: 22px 20px 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 10px;
}

.today-hero.n1 { background: linear-gradient(150deg, #2FB25C, #187A44); }
.today-hero.n2 { background: linear-gradient(150deg, #F0A11C, #C05A0A); }
.today-hero.n3 { background: linear-gradient(150deg, #F0526C, #B21C44); }
.today-hero.carga { background: linear-gradient(150deg, #6E6CF0, #3D3AA8); }
.today-hero.rest { background: linear-gradient(150deg, #5A6472, #2E3540); }

.today-hero .glow {
  position: absolute;
  inset: auto -30% -55% auto;
  width: 75%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  filter: blur(4px);
}

.hero-pila { display: flex; gap: 5px; margin: 14px 0 10px; }
.hero-pila .cell {
  width: 15px;
  height: 30px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.28);
}
.hero-pila .cell.on { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.55); }

/* ---------- Agenda ---------- */

.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }

.day-chip {
  border: 0;
  font: inherit;
  cursor: pointer;
  background: var(--card);
  border-radius: 14px;
  padding: 9px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: inherit;
}

.day-chip .dow { font-size: 11px; font-weight: 700; color: var(--label-2); text-transform: uppercase; }
.day-chip .num { font-size: 17px; font-weight: 700; }
.day-chip .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--separator); }
.day-chip .dot.c1 { background: var(--p1); }
.day-chip .dot.c2 { background: var(--p2); }
.day-chip .dot.c3 { background: var(--p3); }
.day-chip .dot.cc { background: var(--pc); }
.day-chip.selected { background: var(--label); color: var(--bg); }
.day-chip.selected .dow { color: inherit; opacity: 0.7; }
.day-chip.today:not(.selected) { box-shadow: inset 0 0 0 1.5px var(--tint); }

/* ---------- Planes: comidas y opciones ---------- */

.meal-block { margin-top: 22px; }

.meal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 800;
  margin: 0 4px 10px;
}

.option-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.option-tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
}

.ingredients { margin-top: 10px; border-top: 0.5px solid var(--separator); padding-top: 10px; }

.ing {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3.5px 0;
  font-size: 15px;
}

.ing .qty {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 58px;
  text-align: right;
  flex: none;
}

.plan-explain { white-space: pre-line; }

.collapse-btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--tint);
  cursor: pointer;
  padding: 6px 0;
}

/* Intercambios */
.swap-group { padding: 12px 16px; }
.swap-group + .swap-group { border-top: 0.5px solid var(--separator); }
.swap-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.swap-chip {
  font-size: 13px;
  background: var(--card-2);
  border-radius: 8px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* ---------- Check-off ---------- */

.check {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 1.8px solid var(--label-3);
  flex: none;
  display: grid;
  place-items: center;
  background: none;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}

.check svg { opacity: 0; transform: scale(0.6); transition: 0.18s; }
.check.on { border-color: transparent; }
.check.on svg { opacity: 1; transform: none; }
.check.on { background: var(--p1); }

/* ---------- Métricas ---------- */

.metric-field { display: flex; align-items: center; gap: 10px; padding: 11px 16px; }
.metric-field + .metric-field { border-top: 0.5px solid var(--separator); }
.metric-field label { flex: 1; font-size: 16px; }

.metric-field input {
  width: 92px;
  border: 0;
  background: var(--card-2);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: inherit;
  -moz-appearance: textfield;
}
.metric-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.metric-field input:focus { outline: 2px solid var(--tint); }
.metric-field .unit { color: var(--label-2); font-size: 14px; width: 26px; }

.chart-wrap { padding: 14px 8px 6px; }

/* ---------- Botones ---------- */

.btn {
  display: block;
  width: 100%;
  border: 0;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  padding: 15px;
  border-radius: 15px;
  background: var(--label);
  color: var(--bg);
  cursor: pointer;
}
.btn:active { opacity: 0.75; }
.btn.secondary { background: var(--card); color: var(--tint); }
.btn:disabled { opacity: 0.4; }

.seg {
  display: flex;
  background: var(--card-2);
  border-radius: 11px;
  padding: 3px;
  gap: 3px;
  margin: 14px 0 4px;
}

.seg button {
  flex: 1;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 0;
  border-radius: 8.5px;
  background: none;
  color: var(--label-2);
  cursor: pointer;
}

.seg button.active { background: var(--card); color: var(--label); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

/* ---------- Tab bar ---------- */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 560px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) - 12px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 8px 6px calc(env(safe-area-inset-bottom, 8px));
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-top: 0.5px solid var(--separator);
  z-index: 50;
}

.tab {
  border: 0;
  background: none;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--label-3);
  cursor: pointer;
  padding-top: 2px;
}

.tab.active { color: var(--tint); }
.tab-label { font-size: 10.5px; font-weight: 600; }
.tab-icon svg { width: 26px; height: 26px; }

/* ---------- Detalle de plan: cabecera ---------- */

.plan-head {
  border-radius: 24px;
  padding: 20px;
  margin-top: 8px;
  color: #fff;
}
.plan-head.n1 { background: linear-gradient(150deg, #2FB25C, #187A44); }
.plan-head.n2 { background: linear-gradient(150deg, #F0A11C, #C05A0A); }
.plan-head.n3 { background: linear-gradient(150deg, #F0526C, #B21C44); }
.plan-head.carga { background: linear-gradient(150deg, #6E6CF0, #3D3AA8); }

.back-btn {
  border: 0;
  background: var(--card);
  color: var(--tint);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: 20px;
  padding: 8px 14px 8px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 4px;
}

/* ---------- Entrenos ---------- */

.workout-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.workout-row + .workout-row { border-top: 0.5px solid var(--separator); }
.workout-row .w-icon { font-size: 20px; flex: none; }

.race-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--pc-soft);
  color: var(--pc);
  flex: none;
}

.source-note { display: flex; align-items: center; gap: 6px; margin: 8px 6px 0; }

.auto-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: var(--tint);
  color: #fff;
}

/* Hoja modal (estilo iOS sheet) */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  z-index: 90;
  animation: fade-in 0.2s;
}

@keyframes fade-in { from { opacity: 0; } }

.sheet {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 12px) + 16px);
  z-index: 91;
  animation: sheet-up 0.32s cubic-bezier(0.32, 0.72, 0.35, 1);
}

@keyframes sheet-up { from { transform: translateX(-50%) translateY(60%); opacity: 0.4; } }

.sheet .grabber {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: var(--label-3);
  margin: 2px auto 14px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 4px; }

.chip {
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 13px;
  border-radius: 18px;
  background: var(--card);
  color: var(--label);
  cursor: pointer;
}

.chip.active { background: var(--label); color: var(--bg); }

.sheet-label { margin: 14px 6px 2px; }

.sheet input[type="text"], .sheet input[type="date"] {
  width: 100%;
  border: 0;
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  color: inherit;
  margin-top: 8px;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
}

.switch { position: relative; width: 50px; height: 30px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track {
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: var(--separator);
  transition: background 0.2s;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.switch input:checked + .track { background: var(--p1); }
.switch input:checked + .track::after { transform: translateX(20px); }

.day-chip .race-mini { font-size: 9px; line-height: 1; }

/* ---------- Agenda mensual ---------- */

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.m-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--label-2);
  padding: 4px 0 6px;
}

.m-day {
  border: 0;
  font: inherit;
  cursor: pointer;
  background: var(--card);
  border-radius: 11px;
  min-height: 58px;
  padding: 6px 0 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  color: inherit;
}

.m-day .m-num { font-size: 14px; font-weight: 700; }
.m-day .m-sports { font-size: 10px; line-height: 1; display: flex; gap: 1px; min-height: 11px; }
.m-day .dot { width: 6px; height: 6px; border-radius: 3px; background: var(--separator); }
.m-day .dot.c1 { background: var(--p1); }
.m-day .dot.c2 { background: var(--p2); }
.m-day .dot.c3 { background: var(--p3); }
.m-day .dot.cc { background: var(--pc); }
.m-day .race-mini { font-size: 10px; line-height: 1; }
.m-day.today { box-shadow: inset 0 0 0 1.5px var(--tint); }
.m-day:active { background: var(--card-2); }

/* Distintivo de entreno importado de Strava */
.strava-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #fff;
  background: #FC4C02;
  border-radius: 5px;
  padding: 1.5px 5px;
  vertical-align: middle;
}

/* ---------- Login ---------- */

.login-wrap {
  min-height: 82dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.login-logo { width: 84px; height: 84px; border-radius: 20px; margin-bottom: 16px; }

.login-form {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.login-form input {
  border: 0;
  background: var(--card);
  border-radius: 13px;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;
  color: inherit;
}

.login-form input:focus { outline: 2px solid var(--tint); }

/* ---------- Agua ---------- */

.water-row {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: 14px 16px;
}

.cup {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--label-3);
  padding: 4px 2px;
  transition: transform 0.15s, color 0.15s;
}

.cup.full { color: #32ADE6; }
.cup:active { transform: scale(1.15); }

/* util */
.spacer { height: 10px; }
.center { text-align: center; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }