/* Son Hábitos - the brand's look over app/styles.css (loaded after it). Matches sonhabitos.com: white, deep teal headings, bright
   teal accent, magenta pill buttons with a darker bottom edge, outlined pills, rounded cards, uppercase teal eyebrows.
   No external fonts (the CSP allows only the site's own files): a clean system sans stack. */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --card-2: #f3f8f8;
  --ink: #173d40;            /* deep teal: headings and main text */
  --ink-2: #3d5c5e;
  --muted: #4b6263;
  --line: #dcebea;
  --line-2: #cfe0df;
  --accent: #0a8c94;         /* bright teal: selection, progress, rules */
  --accent-ink: #0b6e74;     /* teal as text on white (5.6:1) */
  --accent-soft: #e4f4f4;
  --on-accent: #ffffff;
  --cta: #d4005a;            /* magenta: the main button */
  --cta-edge: #a00045;
  --on-cta: #ffffff;
  --deep: #0f4c4f;           /* selected pills and tabs */
  --on-deep: #ffffff;
  --pink-soft: #fce6ee;
  --pink-ink: #a3004a;
  --edge: #b8d2d0;           /* the darker bottom edge of outlined pills */
  --ok: #1d7a46;
  --warn-bg: #fff4d6;
  --warn-ink: #6b4a00;
  --warn-line: #f0d48a;
  --heat-0: #eef5f5;
  --heat-rgb: 10, 140, 148;
  --shadow: 0 1px 2px rgba(15, 76, 79, .05), 0 6px 22px rgba(15, 76, 79, .07);
  --radius: 24px;
  --radius-sm: 16px;
  --font: Inter, "Manrope", "Plus Jakarta Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1a1b; --card: #112628; --card-2: #163234; --ink: #e8f4f3; --ink-2: #c3dad9; --muted: #93b0b0;
    --line: #21403f; --line-2: #2c5050; --accent: #3cc3cb; --accent-ink: #6fd6dc; --accent-soft: #123a3c; --on-accent: #062022;
    --cta: #ff3d84; --cta-edge: #b0004f; --on-cta: #ffffff; --deep: #3cc3cb; --on-deep: #062022;
    --pink-soft: #3a1626; --pink-ink: #ff9cc0; --edge: #2c5050;
    --warn-bg: #2d2410; --warn-ink: #f3d590; --warn-line: #5a4716; --heat-0: #163234; --heat-rgb: 60, 195, 203;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b1a1b; --card: #112628; --card-2: #163234; --ink: #e8f4f3; --ink-2: #c3dad9; --muted: #93b0b0;
  --line: #21403f; --line-2: #2c5050; --accent: #3cc3cb; --accent-ink: #6fd6dc; --accent-soft: #123a3c; --on-accent: #062022;
  --cta: #ff3d84; --cta-edge: #b0004f; --on-cta: #ffffff; --deep: #3cc3cb; --on-deep: #062022;
  --pink-soft: #3a1626; --pink-ink: #ff9cc0; --edge: #2c5050;
  --warn-bg: #2d2410; --warn-ink: #f3d590; --warn-line: #5a4716; --heat-0: #163234; --heat-rgb: 60, 195, 203;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); color-scheme: dark;
}
body { letter-spacing: -.005em; }

/* top bar: white, the logo, a thin rule */
.topbar { background: var(--card); color: var(--ink); border-bottom: 1px solid var(--line); min-height: 60px; }
.brand { gap: 10px; }
.brand-logo { display: block; height: 44px; width: auto; flex: none; }
.brand-sub { color: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0; line-height: 1.2; max-width: 120px; }
.lang { border: 1.5px solid var(--line-2); box-shadow: 0 2px 0 var(--edge); background: var(--card); }
.lang button { color: var(--ink-2); }
.lang button[aria-pressed="true"] { background: var(--deep); color: var(--on-deep); }

/* headings: big, light, tight */
h1.step-title { font-weight: 650; letter-spacing: -.025em; color: var(--ink); }
.welcome { margin: 2px 0 4px; }
.eyebrow { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); }
.welcome .lead { margin: 0 0 4px; font-size: 15.5px; color: var(--ink-2); }
.field > .label, .label { font-weight: 650; color: var(--ink); }
.dot { background: var(--line); }
.dot.on, .dot.done { background: var(--accent); }

/* buttons: pills with a darker bottom edge */
.btn { border-radius: 999px; border: 1.5px solid var(--line-2); border-bottom-width: 4px; border-bottom-color: var(--edge); font-weight: 750; color: var(--deep); }
.btn.primary { background: var(--cta); border-color: var(--cta); border-bottom-color: var(--cta-edge); color: var(--on-cta); }
.btn.ghost { background: var(--card); }
.btn:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.btn.small { border-radius: 999px; }
.wiz-nav { background: color-mix(in srgb, var(--card) 94%, transparent); }

/* chips, segments, cards: rounded, outlined; selected = deep teal pill (as the site's tabs) */
.chip { border-radius: 999px; border-width: 1.5px; border-bottom-width: 3px; border-color: var(--line-2); border-bottom-color: var(--edge); font-weight: 650; }
.chips.small .chip, .chips.pain .chip { border-radius: 999px; }
.chips.grid8 .chip, .chips.grid7 .chip { border-radius: 16px; }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.chip small { color: var(--accent-ink); }
.seg { border-radius: 999px; background: var(--card-2); border-color: var(--line); }
.seg button { border-radius: 999px; font-weight: 650; }
.seg.tiny, .seg.tiny button { border-radius: 999px; }
.seg button[aria-pressed="true"] { background: var(--deep); color: var(--on-deep); outline: 0; box-shadow: none; }
.stepper button { border-radius: 999px; border-width: 1.5px; border-bottom-width: 3px; border-color: var(--line-2); border-bottom-color: var(--edge); color: var(--deep); }
.stepper input, .search, .date, .sel select { border-radius: 16px; border-width: 1.5px; border-color: var(--line-2); }
.card-btn { border-radius: var(--radius); border-width: 1.5px; border-bottom-width: 4px; border-color: var(--line-2); border-bottom-color: var(--edge); box-shadow: none; }
.card-btn .t { font-weight: 700; color: var(--ink); }
.card-btn .ic { color: var(--cta); }
.card-btn[aria-pressed="true"] { border-color: var(--cta); border-bottom-color: var(--cta-edge); background: var(--pink-soft); }
.cards.mini .card-btn, .cards.kit .card-btn { border-radius: 18px; }
.picked { border-radius: var(--radius-sm); border-color: var(--cta); background: var(--pink-soft); }
.pick-list, .release-text, .sum, details.more, .sum-line, .note { border-radius: var(--radius-sm); }
.pick-group { color: var(--accent-ink); letter-spacing: .1em; }
.check { border-radius: var(--radius-sm); border-width: 1.5px; border-color: var(--line-2); }
.check.on { border-color: var(--cta); background: var(--pink-soft); }
.check input { accent-color: var(--cta); }
.link-btn { color: var(--cta); }
a { color: var(--accent-ink); }
details.more > summary::after, details.week-notes > summary::after, details.sec > summary::after { color: var(--cta); }

/* the plan */
.tabs { border-radius: 999px; background: var(--card-2); }
.tabs button { border-radius: 999px; font-weight: 700; }
.tabs button[aria-selected="true"] { background: var(--deep); color: var(--on-deep); }
.weekbar .arrow { border-radius: 999px; border-width: 1.5px; border-bottom-width: 3px; border-color: var(--line-2); border-bottom-color: var(--edge); color: var(--deep); }
.weekbar .wk { font-weight: 750; color: var(--ink); }
.daytab { border-radius: 16px; border-width: 1.5px; border-bottom-width: 3px; border-color: var(--line-2); border-bottom-color: var(--edge); font-weight: 700; }
.daytab[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.daycard { border-radius: var(--radius); }
.dc-head { border-bottom: 3px solid var(--cta); }
.dc-head .wd { color: var(--accent-ink); letter-spacing: .1em; }
.dc-head .tt { font-weight: 750; letter-spacing: -.02em; }
.dc-brand { font-style: normal; color: var(--cta); letter-spacing: .08em; }
.row .num { color: var(--cta); }
.badge.plus { background: var(--cta); color: var(--on-cta); }
.badge.new { border-color: var(--cta); color: var(--pink-ink); }
.badge.test { background: var(--deep); color: var(--on-deep); }
.tips-btn { border-radius: 999px; padding: 0 9px; font-size: 12px; }
.dc-head .tt { font-size: 18px; }
.tips-btn span { color: var(--cta); }
.det .prog, .md blockquote { border-left-color: var(--accent); }
.panel, details.sec, details.week-notes { border-radius: var(--radius); }
.panel h2 { font-weight: 750; letter-spacing: -.015em; }
table.heat td.f { color: var(--accent-ink); }
.banner.release { background: var(--pink-soft); border-color: transparent; color: var(--ink-2); }
.building .bar span { background: var(--cta); }
.spinner { border-top-color: var(--cta); }
.foot { color: var(--muted); }
.foot p:first-child { color: var(--accent-ink); font-weight: 700; letter-spacing: .04em; }
.sheet { border-radius: var(--radius) var(--radius) 0 0; }
@media (min-width: 700px) { .sheet { border-radius: var(--radius); } }

@media (max-width: 360px) { .brand-logo { height: 38px; } }

/* the disclaimer pages (site/disclaimer.html, disclaimer.es.html) */
.legal-page .topbar { position: static; }
.legal-nav a { font-weight: 700; color: var(--accent-ink); text-decoration: none; border: 1.5px solid var(--line-2); border-bottom-width: 3px; border-bottom-color: var(--edge); border-radius: 999px; padding: 6px 14px; }
.legal-doc { max-width: 760px; margin: 0 auto; padding: 16px 16px 48px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.legal-doc h1 { font-size: 30px; font-weight: 650; letter-spacing: -.025em; color: var(--ink); line-height: 1.15; }
.legal-doc h2, .legal-doc h3 { color: var(--ink); font-weight: 700; margin-top: 22px; }
.legal-doc blockquote { background: var(--pink-soft); border-left-color: var(--cta); border-radius: 0 12px 12px 0; }

@media print {
  :root { --accent: #0a8c94; --accent-ink: #0b6e74; --cta: #d4005a; }
  .pr-week h2 { border-bottom-color: #0a8c94; }
}