:root {
  --ivory: #F5F1E8;
  --ivory-deep: #ECE4D6;
  --paper: #FFFDF8;
  --ink: #202523;
  --ink-soft: #5C625F;
  --line: rgba(32,37,35,.14);
  --green: #4F766A;
  --green-dark: #36584E;
  --green-soft: #DCE8E1;
  --gold: #C49A5A;
  --gold-soft: #E8D8BB;
  --terra: #B96F5B;
  --terra-soft: #F0D9D2;
  --radius: 14px;
  --max: 680px;
  --nav-h: 78px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--ivory); color:var(--ink); font-family:Inter,system-ui,sans-serif; }
body { min-height:100dvh; }
button, input { font:inherit; }
button { cursor:pointer; }
.app { min-height:100dvh; background:var(--ivory); transition:background .5s ease; }
.app.stage-2 { --green:#577D6F; --gold:#BE9557; }
.app.stage-3 { --green:#4A7568; --gold:#B98B48; --ivory:#F3EEE4; }
.app.stage-4 { --green:#3F6C60; --gold:#B7833F; --ivory:#F1EBDD; }
.view { display:none; min-height:100dvh; }
.view.is-active { display:block; }
.view-center.is-active { display:grid; place-items:center; }
.page { width:100%; max-width:var(--max); margin:0 auto; padding:0 20px; }
.page-tall { min-height:100dvh; display:flex; flex-direction:column; }
.main-page { padding-top:max(22px,env(safe-area-inset-top)); padding-bottom:calc(var(--nav-h) + 44px + env(safe-area-inset-bottom)); }
.safe-bottom { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
.topbar,.app-header { min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-size:12px; line-height:1; font-weight:700; letter-spacing:.19em; color:var(--green); }
.eyebrow { display:inline-block; margin-bottom:12px; color:var(--green); font-size:12px; line-height:1.2; font-weight:700; letter-spacing:.14em; }
.eyebrow.no-margin { margin:0; }
.display { margin:0; font-family:"DM Serif Display",Georgia,serif; font-weight:400; letter-spacing:-.025em; }
.display-xl { font-size:clamp(54px,15vw,78px); line-height:.94; }
.display-lg { font-size:clamp(40px,11vw,56px); line-height:.98; }
.display-md { font-size:32px; line-height:1.02; }
.display-home { font-size:clamp(48px,13vw,68px); line-height:.94; }
.lead { margin:20px 0 0; max-width:560px; color:var(--ink-soft); font-size:18px; line-height:1.55; }
.body-copy { margin:12px 0 0; color:var(--ink-soft); font-size:16px; line-height:1.5; }
.greeting { margin:36px 0 8px; color:var(--ink-soft); font-size:16px; }
.home-intro { margin:18px 0 28px; color:var(--ink-soft); font-size:17px; line-height:1.5; max-width:570px; }

.loader { width:46px; height:46px; border:3px solid var(--green-soft); border-top-color:var(--green); border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.welcome-view { background:radial-gradient(circle at 80% 12%, rgba(79,118,106,.13), transparent 32%), var(--ivory); }
.welcome-main { margin:auto 0; padding:24px 0 70px; }
.welcome-main .lead { max-width:500px; }
.sticky-action { margin-top:auto; padding-top:24px; position:sticky; bottom:0; background:linear-gradient(to top,var(--ivory) 72%,rgba(245,241,232,0)); }
.primary-btn,.secondary-btn { min-height:62px; border-radius:12px; padding:16px 20px; font-weight:700; font-size:17px; border:1px solid transparent; transition:transform .12s ease, opacity .12s ease, background .12s ease; }
.primary-btn { width:100%; background:var(--green); color:white; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.primary-btn:active,.secondary-btn:active,.big-choice:active,.answer-option:active,.register-cta:active { transform:scale(.985); }
.primary-btn:disabled,.secondary-btn:disabled { opacity:.5; cursor:default; transform:none; }
.secondary-btn { background:transparent; color:var(--ink); border-color:var(--line); }
.text-btn,.text-action { border:0; background:transparent; color:var(--green); font-weight:600; min-height:44px; padding:8px 0; }
.text-action { margin-top:18px; font-size:15px; }
.microcopy { margin:12px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.45; text-align:center; }

.form-main { padding:38px 0 40px; }
.compact-top { padding-top:20px; }
.field-label { display:block; margin:38px 0 8px; color:var(--ink-soft); font-size:13px; font-weight:700; letter-spacing:.04em; }
.field-label.block-label { margin-top:34px; }
.line-input { width:100%; height:64px; padding:0 2px; border:0; border-bottom:2px solid var(--ink); border-radius:0; outline:0; background:transparent; color:var(--ink); font-size:20px; }
.line-input:focus { border-bottom-color:var(--green); }
.line-input::placeholder { color:#979B98; }
.top-gap { margin-top:30px; }
.notice { display:none; margin-top:18px; padding:14px 16px; border-radius:10px; font-size:14px; line-height:1.45; }
.notice.show { display:block; }
.notice.error { background:var(--terra-soft); color:#733E31; }
.notice.success { background:var(--green-soft); color:var(--green-dark); }

.otp-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:36px; }
.otp-grid input { width:100%; min-width:0; height:66px; border:1px solid var(--line); border-radius:12px; background:var(--paper); text-align:center; font-size:28px; font-weight:700; outline:0; }
.otp-grid input:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(79,118,106,.10); }

.step-count { color:var(--ink-soft); font-size:13px; font-weight:700; }
.step-track { height:4px; background:var(--ivory-deep); overflow:hidden; }
.step-track span { display:block; height:100%; background:var(--green); transition:width .25s ease; }
.big-choice-list,.answer-list { display:grid; gap:10px; }
.big-choice { width:100%; min-height:60px; padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink); text-align:left; font-size:17px; font-weight:600; }
.big-choice.selected { border-color:var(--green); background:var(--green-soft); }
.actions-two { display:grid; grid-template-columns:minmax(110px,.8fr) minmax(0,1.6fr); gap:10px; }
.consent-row { display:flex; align-items:flex-start; gap:12px; margin-top:32px; color:var(--ink-soft); font-size:14px; line-height:1.5; }
.consent-row input { width:24px; height:24px; flex:0 0 24px; accent-color:var(--green); }

.arrival-view,.done-view { background:radial-gradient(circle at 50% 28%,rgba(79,118,106,.14),transparent 28%),var(--ivory); }
.center-content { align-items:center; justify-content:center; text-align:center; padding-top:max(30px,env(safe-area-inset-top)); padding-bottom:max(30px,env(safe-area-inset-bottom)); }
.center-text { text-align:center; }
.inline-bottom { margin-top:34px; max-width:440px; }
.reserve { width:94px; height:158px; border:2px solid var(--ink); border-top:0; border-radius:0 0 34px 34px; position:relative; overflow:hidden; background:rgba(255,255,255,.32); }
.reserve-large { width:112px; height:188px; margin:30px 0; }
.reserve::before,.reserve::after { content:""; position:absolute; z-index:2; left:0; right:0; height:1px; background:rgba(32,37,35,.10); }
.reserve::before { top:33%; }.reserve::after { top:66%; }
.reserve-fill { position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(to top,var(--green-dark),var(--green)); transition:height .85s cubic-bezier(.2,.8,.2,1); }
.first-fill { height:7%; animation:firstFill 1.1s cubic-bezier(.2,.8,.2,1); }
@keyframes firstFill { from { height:0; } }

.avatar { width:46px; height:46px; border:0; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--ivory); font-size:13px; font-weight:700; }
.today-card { display:grid; grid-template-columns:minmax(0,1fr) 104px; gap:20px; padding:26px 0 28px; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.resource-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.resource-pills span { padding:8px 10px; border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.reserve-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; align-self:center; }
.reserve-percent { font-size:16px; }
.metric-strip { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
.metric-strip article { padding:22px 0; }
.metric-strip article + article { padding-left:20px; border-left:1px solid var(--line); }
.metric-strip span { display:block; color:var(--ink-soft); font-size:13px; margin-bottom:8px; }
.metric-strip strong { display:block; font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:28px; }
.insight-card { margin-top:22px; padding:20px; background:var(--green-soft); border-radius:14px; }
.insight-card p { margin:4px 0 0; font-size:16px; line-height:1.45; }
.hidden { display:none !important; }
.register-cta { width:100%; min-height:88px; margin-top:24px; padding:18px 20px; border:0; border-radius:14px; background:var(--green); color:white; display:flex; align-items:center; justify-content:space-between; text-align:left; }
.register-cta small { display:block; margin-bottom:5px; font-size:11px; letter-spacing:.12em; opacity:.8; }
.register-cta strong { display:block; font-size:21px; }
.cta-arrow { font-size:28px; }

.bottom-nav { position:fixed; z-index:50; left:0; right:0; bottom:0; min-height:var(--nav-h); background:rgba(245,241,232,.96); backdrop-filter:blur(14px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
.nav-btn { min-height:62px; border:0; background:transparent; color:#747A76; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px; font-weight:700; }
.nav-mark { width:7px; height:7px; border-radius:50%; background:currentColor; transition:.18s ease; }
.nav-btn.active { color:var(--green-dark); }
.nav-btn.active .nav-mark { width:28px; border-radius:999px; }

.register-view { background:var(--ivory); }
.round-close { width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); font-size:26px; line-height:1; }
.register-intro-main { padding:30px 0 40px; }
.register-title { margin-top:4px; }
.register-preview { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:34px; }
.register-preview div { min-height:100px; padding:16px; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; justify-content:space-between; }
.register-preview span { color:var(--green); font-size:12px; font-weight:700; }
.register-preview strong { font-family:"DM Serif Display",Georgia,serif; font-size:25px; font-weight:400; }
.question-main { padding:28px 0 36px; }
.question-main .lead { margin-bottom:28px; }
.answer-option { min-height:68px; width:100%; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:transparent; color:var(--ink); display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:center; text-align:left; font-size:17px; font-weight:600; }
.answer-option span:first-child { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--ivory-deep); color:var(--ink-soft); font-size:13px; }
.answer-option.selected { background:var(--green-soft); border-color:var(--green); }
.answer-option.selected span:first-child { background:var(--green); color:white; }
.done-stats { width:100%; max-width:430px; margin-top:26px; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.done-stats div { padding:18px 10px; }
.done-stats div + div { border-left:1px solid var(--line); }
.done-stats span { display:block; color:var(--ink-soft); font-size:12px; }
.done-stats strong { display:block; margin-top:6px; font-family:"DM Serif Display",Georgia,serif; font-size:28px; font-weight:400; }
.done-actions { width:100%; max-width:440px; display:grid; gap:10px; margin-top:30px; }
.done-actions .secondary-btn { width:100%; }

.evolution-hero { display:grid; grid-template-columns:repeat(3,1fr); margin-top:28px; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.evolution-hero article { padding:20px 8px 20px 0; }
.evolution-hero article + article { padding-left:14px; border-left:1px solid var(--line); }
.evolution-hero span { display:block; min-height:34px; color:var(--ink-soft); font-size:12px; line-height:1.35; }
.evolution-hero strong { display:block; margin-top:8px; font-family:"DM Serif Display",Georgia,serif; font-size:32px; font-weight:400; }
.section-block { padding:32px 0; border-bottom:1px solid var(--line); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }
.quiet-badge { padding:7px 9px; border-radius:999px; background:var(--ivory-deep); color:var(--ink-soft); font-size:12px; white-space:nowrap; }
.activity-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.activity-day { aspect-ratio:1; border-radius:9px; background:var(--ivory-deep); display:grid; place-items:center; color:#8B8F8C; font-size:11px; font-weight:600; }
.activity-day.active { background:var(--green); color:white; }
.resource-cards { display:grid; gap:10px; }
.resource-card { padding:18px; border:1px solid var(--line); border-radius:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; }
.resource-card h3 { margin:0; font-size:17px; }
.resource-card p { margin:6px 0 0; color:var(--ink-soft); font-size:13px; }
.resource-score { font-family:"DM Serif Display",Georgia,serif; font-size:34px; }
.trend { display:inline-block; margin-left:5px; font-family:Inter,sans-serif; font-size:12px; font-weight:700; color:var(--green); }
.trend.down { color:var(--terra); }
.insight-list { display:grid; gap:10px; }
.insight-item { padding:18px; border-left:3px solid var(--gold); background:rgba(196,154,90,.08); font-size:16px; line-height:1.45; }
.history-list { display:grid; gap:10px; }
.history-item { padding:17px 0; border-bottom:1px solid var(--line); }
.history-item:last-child { border-bottom:0; }
.history-top { display:flex; justify-content:space-between; gap:14px; margin-bottom:12px; }
.history-date { font-weight:700; }
.history-average { color:var(--ink-soft); font-size:13px; }
.history-scores { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.history-score { padding:9px 6px; border-radius:9px; background:var(--ivory-deep); text-align:center; }
.history-score span { display:block; color:var(--ink-soft); font-size:10px; margin-bottom:4px; }
.history-score strong { font-size:16px; }
.empty-state { padding:24px; border:1px dashed var(--line); border-radius:14px; color:var(--ink-soft); font-size:15px; line-height:1.5; }

.profile-hero { margin-top:26px; padding:24px 0; border-top:2px solid var(--ink); border-bottom:1px solid var(--line); }
.profile-hero h2 { margin:0; font-family:"DM Serif Display",Georgia,serif; font-size:36px; font-weight:400; }
.profile-hero p { margin:8px 0 0; color:var(--ink-soft); font-size:16px; }
.profile-details { margin-top:10px; }
.profile-row { padding:18px 0; border-bottom:1px solid var(--line); }
.profile-row span { display:block; color:var(--ink-soft); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.profile-row strong { display:block; margin-top:7px; font-size:17px; font-weight:500; }
.profile-actions { display:grid; gap:10px; margin-top:28px; }
.full { width:100%; }
.danger { color:var(--terra); border-color:rgba(185,111,91,.3); }
.toast { position:fixed; z-index:100; left:50%; bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(16px); width:calc(100% - 32px); max-width:620px; padding:15px 16px; border-radius:12px; background:var(--ink); color:white; font-size:14px; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (min-width:760px) {
  body { background:#E7DFD1; }
  .app { max-width:760px; margin:18px auto; min-height:calc(100dvh - 36px); box-shadow:0 18px 55px rgba(32,37,35,.09); }
  .view,.page-tall { min-height:calc(100dvh - 36px); }
  .bottom-nav { left:50%; right:auto; width:760px; transform:translateX(-50%); bottom:18px; }
  .main-page { padding-left:36px; padding-right:36px; }
  .page { padding-left:36px; padding-right:36px; }
  .today-card { grid-template-columns:minmax(0,1fr) 130px; }
  .reserve { width:108px; height:180px; }
  .reserve-large { width:124px; height:208px; }
}


/* ===== v3: claridad móvil, guía, notas, calendario e hitos ===== */

.helper-copy {
  margin:10px 0 0;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.5;
}

.label-row {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}

.label-row .eyebrow { margin:0; }

.tiny-help {
  width:30px;
  height:30px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--green-dark);
  font-weight:700;
}

.home-chip {
  min-height:44px;
  padding:8px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.28);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}

.milestone-teaser {
  margin-top:22px;
  padding:20px;
  border:1px solid rgba(196,154,90,.34);
  border-radius:14px;
  background:rgba(196,154,90,.07);
}

.milestone-teaser-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.milestone-teaser-row strong {
  display:block;
  font-size:18px;
}

.milestone-teaser-row p {
  margin:5px 0 0;
  color:var(--ink-soft);
  font-size:13px;
}

.mini-progress,
.achievement-progress {
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--ivory-deep);
}

.mini-progress { margin-top:14px; }

.mini-progress span,
.achievement-progress span {
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--gold);
  transition:width .4s ease;
}

.guide-onboarding-main {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:26px 0 44px;
}

.guide-visual {
  margin-top:34px;
  min-height:190px;
  display:grid;
  align-items:center;
}

.guide-resource-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.guide-resource-grid span {
  min-height:86px;
  display:flex;
  align-items:flex-end;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:25px;
}

.guide-tap-demo {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
}

.guide-tap-demo b {
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  font-size:20px;
}

.guide-tap-demo b:nth-child(4) {
  background:var(--green);
  color:white;
  border-color:var(--green);
}

.guide-reserve-demo {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:24px;
  align-items:center;
}

.guide-reserve-demo > div:last-child {
  display:grid;
  gap:4px;
}

.guide-reserve-demo strong {
  margin-top:8px;
  font-size:17px;
}

.guide-reserve-demo span {
  color:var(--ink-soft);
  font-size:13px;
}

.guide-history-demo {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:8px;
}

.guide-history-demo span {
  aspect-ratio:1;
  border-radius:10px;
  background:var(--ivory-deep);
}

.guide-history-demo span.on { background:var(--green); }

.note-input {
  width:100%;
  min-height:190px;
  margin-top:30px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.36);
  color:var(--ink);
  font:inherit;
  font-size:17px;
  line-height:1.5;
  resize:vertical;
  outline:none;
}

.note-input:focus {
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(79,118,106,.08);
}

.note-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  color:var(--ink-soft);
  font-size:12px;
}

.note-actions {
  display:grid;
  grid-template-columns:minmax(110px,.85fr) minmax(0,1.5fr);
  gap:10px;
}

.done-home {
  position:absolute;
  top:max(18px,env(safe-area-inset-top));
  left:20px;
}

.achievement-celebration {
  width:100%;
  max-width:440px;
  margin-top:24px;
  padding:20px;
  border-radius:14px;
  background:rgba(196,154,90,.12);
  border:1px solid rgba(196,154,90,.34);
  text-align:left;
}

.achievement-celebration strong {
  display:block;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:28px;
  font-weight:400;
}

.achievement-celebration p {
  margin:8px 0 0;
  color:var(--ink-soft);
  line-height:1.45;
}

/* Calendario mensual */
.calendar-heading { align-items:center; }

.calendar-controls {
  display:flex;
  gap:8px;
}

.calendar-nav {
  width:46px;
  height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  font-size:18px;
}

.calendar-nav:disabled {
  opacity:.28;
  cursor:default;
}

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

.weekdays {
  margin-bottom:8px;
  color:var(--ink-soft);
  font-size:11px;
  font-weight:700;
  text-align:center;
}

.calendar-day {
  aspect-ratio:1;
  min-width:0;
  border:1px solid transparent;
  border-radius:11px;
  background:var(--ivory-deep);
  color:#8A8F8B;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:700;
}

.calendar-day.blank {
  background:transparent;
  border:0;
}

.calendar-day.active {
  background:var(--green);
  color:white;
  cursor:pointer;
}

.calendar-day.today {
  box-shadow:inset 0 0 0 2px var(--gold);
}

.calendar-day:disabled { cursor:default; }

.calendar-help { margin-top:12px; }

.resource-score-wrap {
  display:flex;
  align-items:baseline;
  gap:6px;
}

.trend.neutral { color:var(--ink-soft); }

/* Hitos */
.achievement-list {
  display:grid;
  gap:10px;
}

.achievement-card {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:14px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  opacity:.68;
}

.achievement-card.unlocked {
  opacity:1;
  background:rgba(79,118,106,.06);
  border-color:rgba(79,118,106,.28);
}

.achievement-mark {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--ivory-deep);
  color:var(--green-dark);
  font-weight:800;
}

.achievement-card.unlocked .achievement-mark {
  background:var(--green);
  color:white;
}

.achievement-card h3 {
  margin:0;
  font-size:17px;
}

.achievement-card p {
  margin:5px 0 12px;
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.45;
}

.achievement-card small {
  display:block;
  margin-top:7px;
  color:var(--ink-soft);
  font-size:11px;
}

/* Histórico clicable */
.history-item {
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:17px 0;
}

.history-note {
  margin:12px 0 0;
  padding-left:12px;
  border-left:2px solid var(--gold);
  color:var(--ink-soft);
  font-size:13px;
  line-height:1.45;
}

/* Detalle de un día */
.detail-scores {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:30px;
}

.detail-score {
  min-height:96px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.detail-score span {
  color:var(--ink-soft);
  font-size:12px;
  font-weight:700;
}

.detail-score strong {
  font-family:"DM Serif Display",Georgia,serif;
  font-size:34px;
  font-weight:400;
}

/* Perfil / guía / contacto */
.profile-menu {
  display:grid;
  margin-top:28px;
  border-top:1px solid var(--line);
}

.menu-row {
  min-height:74px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "title arrow"
    "sub arrow";
  align-items:center;
  gap:2px 14px;
  padding:14px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  text-align:left;
  text-decoration:none;
}

.menu-row span {
  grid-area:title;
  font-size:17px;
  font-weight:700;
}

.menu-row small {
  grid-area:sub;
  color:var(--ink-soft);
  font-size:12px;
}

.menu-row b {
  grid-area:arrow;
  font-size:18px;
  font-weight:500;
}

.guide-list {
  display:grid;
  gap:10px;
  margin-top:30px;
}

.guide-list details {
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.2);
}

.guide-list summary {
  min-height:64px;
  display:flex;
  align-items:center;
  padding:16px 18px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.guide-list p {
  margin:0;
  padding:0 18px 18px;
  color:var(--ink-soft);
  font-size:15px;
  line-height:1.55;
}

.book-card,
.support-card {
  margin-top:30px;
  padding:22px;
  border-radius:14px;
}

.book-card {
  background:rgba(196,154,90,.09);
  border:1px solid rgba(196,154,90,.28);
}

.support-card {
  background:var(--green-soft);
}

.book-card p,
.support-card p {
  color:var(--ink-soft);
}

.link-button {
  text-decoration:none;
}

@media (max-width:420px) {
  .guide-reserve-demo {
    grid-template-columns:100px 1fr;
    gap:18px;
  }

  .today-card {
    grid-template-columns:minmax(0,1fr) 92px;
    gap:14px;
  }

  .reserve {
    width:84px;
    height:148px;
  }

  .evolution-hero strong { font-size:28px; }

  .note-actions {
    grid-template-columns:1fr;
  }

  .note-actions .secondary-btn { order:2; }
}