/* Arz — GENERADO por scripts/generar-arz-css.py desde diseno/arz/.
   No editar a mano: cambia diseno/arz/tokens.json o componentes.css y vuelve a correr el script. */

:root {
  --arz-bg: #EDF1EC;
  --arz-surface: #FFFFFF;
  --arz-surface-2: #E3E9E3;
  --arz-line: #D3DCD5;
  --arz-ink: #10241C;
  --arz-ink-2: #4C5F56;
  --arz-ink-3: #596A61;
  --arz-brand: #0F3D2E;
  --arz-brand-2: #1E6B4D;
  --arz-hero: #0F3D2E;
  --arz-on-hero: #F3F7F2;
  --arz-on-hero-2: #B8D2C4;
  --arz-action: #E2763A;
  --arz-on-action: #1A0E06;
  --arz-ok: #1E7A4F;
  --arz-warn: #9A5B00;
  --arz-danger: #B3261E;
  --arz-heat: #C4612E;
  --arz-sport-swim: #2F6FD0;
  --arz-sport-bike: #2E9C6A;
  --arz-sport-run: #B7791F;
  --arz-sport-strength: #8E3FA8;
  --arz-sport-muaythai: #B8324F;
  --arz-sport-mobility: #6E8794;
  --arz-gcal: #4D5F75;
  --arz-shadow-float: 0 8px 24px rgba(15, 61, 46, 0.12);
  --arz-shadow-action: 0 8px 20px rgba(226, 118, 58, 0.35);
  --arz-space-1: 4px;
  --arz-space-2: 8px;
  --arz-space-3: 12px;
  --arz-space-4: 16px;
  --arz-space-5: 24px;
  --arz-space-6: 32px;
  --arz-space-7: 48px;
  --arz-radius-sm: 8px;
  --arz-radius-md: 16px;
  --arz-radius-lg: 18px;
  --arz-radius-xl: 26px;
  --arz-radius-pill: 999px;
  --arz-font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --arz-font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Oscuro = Pista. La app pone .dark en <html>. */
.dark {
  --arz-bg: #0D0E0C;
  --arz-surface: #171915;
  --arz-surface-2: #1F221D;
  --arz-line: #2A2D26;
  --arz-ink: #F2F3EE;
  --arz-ink-2: #9EA397;
  --arz-ink-3: #878C81;
  --arz-brand: #A9DEC2;
  --arz-brand-2: #3CCB7F;
  --arz-hero: #171915;
  --arz-on-hero: #F2F3EE;
  --arz-on-hero-2: #9EA397;
  --arz-action: #D4F53C;
  --arz-on-action: #0D0E0C;
  --arz-ok: #3CCB7F;
  --arz-warn: #F2B84B;
  --arz-danger: #FF6B6B;
  --arz-heat: #FF8A3D;
  --arz-sport-swim: #348DCF;
  --arz-sport-bike: #24AB7E;
  --arz-sport-run: #B77610;
  --arz-sport-strength: #7555A8;
  --arz-sport-muaythai: #C64060;
  --arz-sport-mobility: #9FB3BE;
  --arz-gcal: #AFC0D4;
  --arz-shadow-float: 0 8px 24px rgba(0, 0, 0, 0.45);
  --arz-shadow-action: 0 8px 20px rgba(212, 245, 60, 0.18);
}

600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* Arz — componentes base. Todo color, radio y espacio sale de tokens.css.
   Prefijo .arz- para convivir con el CSS actual de la app mientras se migra. */

.arz { font-family: var(--arz-font-body); color: var(--arz-ink); background: var(--arz-bg); font-variant-numeric: tabular-nums; }
.arz-num { font-family: var(--arz-font-display); font-variant-numeric: tabular-nums; }
.arz-label { font-family: var(--arz-font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--arz-ink-2); }

/* ── Botón ── */
.arz-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--arz-space-2);
  min-height: 48px; padding: 0 var(--arz-space-5); border-radius: var(--arz-radius-md); font-family: var(--arz-font-body); font-size: 15px; font-weight: 700; }
.arz-btn:focus-visible { outline: 2px solid var(--arz-brand-2); outline-offset: 2px; }
.arz-btn--action { background: var(--arz-action); color: var(--arz-on-action); }
.arz-btn--secondary { background: var(--arz-surface-2); color: var(--arz-ink); font-weight: 600; }
.arz-btn--ghost { border: 1px solid var(--arz-line); color: var(--arz-ink); font-weight: 600; }
.arz-btn--on-hero { background: color-mix(in oklab, var(--arz-on-hero) 14%, transparent); color: var(--arz-on-hero); font-weight: 600; }
.arz-btn--block { width: 100%; }
.arz-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Chip (filtros, selección) y etiqueta de deporte ── */
.arz-chip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--arz-radius-pill); background: var(--arz-surface); border: 1px solid var(--arz-line); font-family: var(--arz-font-body); font-size: 13px; font-weight: 500; color: var(--arz-ink); }
.arz-chip[aria-pressed="true"], .arz-chip.es-on { background: var(--arz-brand); border-color: var(--arz-brand); color: var(--arz-bg); font-weight: 700; }
.arz-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--arz-radius-sm); font-size: 12px; font-weight: 700;
  background: color-mix(in oklab, var(--c, var(--arz-brand-2)) 16%, var(--arz-surface)); color: color-mix(in oklab, var(--c, var(--arz-brand-2)) 70%, var(--arz-ink)); }
.arz-dot { width: 10px; height: 10px; border-radius: var(--arz-radius-pill); background: var(--c, var(--arz-brand-2)); flex: none; }

/* ── Tarjetas ── */
.arz-card { background: var(--arz-surface); border-radius: var(--arz-radius-lg); padding: var(--arz-space-4); display: flex; flex-direction: column; gap: var(--arz-space-3); }
.arz-card h2, .arz-card .arz-h2 { margin: 0; font-family: var(--arz-font-display); font-size: 17px; line-height: 24px; font-weight: 700; }
.arz-hero { position: relative; overflow: hidden; background: var(--arz-hero); color: var(--arz-on-hero); border-radius: var(--arz-radius-xl); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.arz-hero .arz-sub { color: var(--arz-on-hero-2); font-size: 13px; }
.arz-hero-title { font-family: var(--arz-font-display); font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.6px; margin: 0; }
.arz-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.arz-stat b { display: block; font-family: var(--arz-font-display); font-size: 22px; font-weight: 700; }
.arz-stat span { font-size: 12px; color: var(--arz-on-hero-2); }

/* ── Bloque de agenda ── */
.arz-block { --c: var(--arz-brand-2); position: relative; box-sizing: border-box; border-radius: 10px; padding: 7px 10px; font-size: 13.5px; font-weight: 600;
  background: color-mix(in oklab, var(--c) 15%, var(--arz-surface)); color: color-mix(in oklab, var(--c) 55%, var(--arz-ink)); display: flex; flex-direction: column; gap: 2px; }
.arz-block small { font-size: 12px; font-weight: 500; opacity: 0.9; }
.arz-block--garmin { background: var(--c); color: #FFFFFF; }
.arz-block--moved { outline: 1.5px solid var(--c); outline-offset: -1.5px; }
.arz-block--moved s { opacity: 0.8; }
.arz-block--logi { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--c) 18%, var(--arz-surface)) 0 5px, transparent 5px 10px); color: var(--arz-ink-2); font-size: 11px; font-weight: 500; padding: 2px 10px; border-radius: 0 0 8px 8px; }
.arz-block--gcal { background: var(--arz-surface); border: 1px solid color-mix(in oklab, var(--arz-gcal) 45%, var(--arz-surface)); color: var(--arz-ink); }
.arz-block--past { opacity: 0.5; }
.arz-block--brick-top { border-radius: 10px 10px 0 0; }
.arz-block--brick-bottom { border-radius: 0 0 10px 10px; border-top: 1px dashed color-mix(in oklab, var(--arz-ink) 25%, transparent); }
.arz-pill { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--arz-radius-pill); background: var(--c); color: #FFFFFF; }

/* ── Medidores ── */
.arz-meter { height: 6px; border-radius: 3px; background: var(--arz-surface-2); overflow: hidden; }
.arz-meter > span { display: block; height: 100%; border-radius: 3px; background: var(--c, var(--arz-brand-2)); }
.arz-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--arz-surface-2); }
.arz-stack > span { display: block; height: 100%; background: var(--c); box-shadow: inset -2px 0 0 var(--arz-surface); }

/* ── Barra de pestañas y botón + ── */
.arz-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.arz-tabs { display: flex; gap: 2px; padding: 5px; border-radius: var(--arz-radius-xl); background: var(--arz-surface); box-shadow: var(--arz-shadow-float); }
.arz-tab { display: flex; align-items: center; justify-content: center; min-width: 62px; min-height: 46px; padding: 0 8px; box-sizing: border-box; border-radius: 21px;
  text-decoration: none; font-family: var(--arz-font-body); font-size: 12.5px; font-weight: 500; color: var(--arz-ink-2); }
.arz-tab[aria-current="page"] { background: var(--arz-brand); color: var(--arz-bg); font-weight: 700; }
.arz-fab { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--arz-radius-pill); flex: none;
  background: var(--arz-action); color: var(--arz-on-action); box-shadow: var(--arz-shadow-action); text-decoration: none; }

/* ── Interruptor ── */
.arz-switch { all: unset; cursor: pointer; box-sizing: border-box; width: 46px; height: 28px; border-radius: 14px; padding: 3px; display: inline-flex; background: var(--arz-surface-2); flex: none; }
.arz-switch::after { content: ""; width: 22px; height: 22px; border-radius: 11px; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
.arz-switch[aria-checked="true"] { background: var(--arz-brand-2); justify-content: flex-end; }
.arz-switch:focus-visible { outline: 2px solid var(--arz-brand-2); outline-offset: 2px; }

/* ── Semana en 7 puntos ── */
.arz-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.arz-day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--arz-ink-2); }
.arz-day i { width: 10px; height: 10px; border-radius: 5px; background: var(--arz-surface-2); }
.arz-day[data-s="hecho"] i { background: var(--arz-brand-2); }
.arz-day[data-s="hoy"] { color: var(--arz-ink); }
.arz-day[data-s="hoy"] i { width: 26px; background: var(--arz-action); }
.arz-day[data-s="descanso"] i { background: transparent; border: 1.5px dashed var(--arz-line); box-sizing: border-box; }