/* ===========================================================
   onboarding.css — bienvenida de primer arranque + tarjetas
   de inicio de Metas + planificador de nubes (El cielo).
   =========================================================== */

/* ---------------- overlay de onboarding ---------------- */
.ob-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: linear-gradient(160deg, var(--cream, oklch(0.975 0.010 78)), oklch(0.945 0.030 70));
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
}
.ob-card {
  width: min(540px, 100%);
  background: var(--paper, #fff);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 28px);
  box-shadow: var(--sh-lg);
  padding: 38px 38px 30px;
  position: relative;
}
.ob-dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 26px; }
.ob-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--line); transition: width .3s ease, background .3s ease; }
.ob-dot.on { width: 22px; background: var(--terracotta); }
.ob-dot.done { background: var(--sage); }

.ob-step { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ob-logo { margin-bottom: 22px; }
.ob-title { font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 14px; }
.ob-h2 { font-size: clamp(23px, 3.5vw, 30px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 10px; }
.ob-eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); font-weight: 500; margin-bottom: 12px; }
.ob-lead { font-size: 15px; color: var(--ink-soft); line-height: 1.6; max-width: 420px; margin: 0 auto 24px; text-wrap: pretty; }
.ob-cta { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; font-size: 15px; }
.ob-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; margin-top: 26px; }
.ob-actions .ob-cta { margin-left: auto; }

.ob-input {
  width: 100%; max-width: 360px;
  font-family: inherit; font-size: 18px; font-weight: 500; text-align: center;
  padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--r-md, 16px);
  background: var(--paper-2, var(--cream)); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ob-input:focus { outline: none; border-color: var(--terracotta); box-shadow: 0 0 0 3px var(--terracotta-soft); }

/* secciones core (chips) */
.ob-core { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-bottom: 20px; }
.ob-core-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--sage);
  background: var(--sage-soft); border-radius: 999px; padding: 6px 13px;
}
.ob-core-note { font-size: 12px; color: var(--ink-faint); width: 100%; }

/* secciones opcionales (tarjetas toggle) */
.ob-sections { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.ob-section {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md, 16px);
  background: var(--paper-2, var(--cream));
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ob-section:hover { border-color: var(--ink-ghost); }
.ob-section.on { border-color: var(--terracotta); background: color-mix(in oklab, var(--terracotta-soft), var(--paper) 55%); box-shadow: 0 0 0 3px color-mix(in oklab, var(--terracotta), transparent 88%); }
.ob-section-ico {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--cream-2); color: var(--ink-faint);
  transition: background .15s ease, color .15s ease;
}
.ob-section.on .ob-section-ico { background: var(--terracotta-soft); color: var(--terracotta); }
.ob-section-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-section-label { font-size: 15px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.ob-section-desc { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.ob-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  border: 1.7px solid var(--line); background: var(--paper);
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.ob-section.on .ob-check { background: var(--terracotta); border-color: var(--terracotta); }

/* paso final */
.ob-done-ico {
  width: 70px; height: 70px; margin: 0 auto 18px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--sage-soft); color: var(--sage);
}
.ob-trial {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--terracotta-soft); border-radius: var(--r-md, 14px);
  padding: 12px 15px; font-size: 13px; line-height: 1.5; color: var(--ink); text-align: left;
  max-width: 420px;
}
.ob-trial svg { flex-shrink: 0; margin-top: 1px; }
.ob-trial b { font-weight: 650; }

@media (max-width: 520px) {
  .ob-card { padding: 28px 22px 24px; }
}

/* ---------------- tarjetas de inicio de Metas ---------------- */
.metas-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; }
.metas-start-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px;
  border: 1.5px solid var(--line); border-radius: var(--r-lg, 20px);
  background: var(--paper); text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.metas-start-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--ink-ghost); }
.metas-start-card.feat { border-color: var(--terracotta); background: linear-gradient(165deg, var(--terracotta-soft), var(--paper) 62%); }
.metas-start-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--cream-2); color: var(--ink-soft);
}
.metas-start-card.feat .metas-start-ico { background: var(--terracotta); color: white; }
.metas-start-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.metas-start-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 720px) { .metas-start { grid-template-columns: 1fr; } }

/* ---------------- planificador de nubes (IA en El cielo) ---------------- */
.cloud-ai {
  margin-top: 16px;
  border: 1px solid color-mix(in oklab, var(--terracotta), transparent 78%);
  border-radius: var(--r-md, 14px);
  background: color-mix(in oklab, var(--terracotta-soft), var(--paper) 45%);
  padding: 14px 16px;
}
.cloud-ai-head { display: flex; align-items: center; gap: 10px; }
.cloud-ai-ico { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center; background: var(--terracotta-soft); color: var(--terracotta); }
.cloud-ai-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.cloud-ai-sub { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.cloud-ai-btn { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; flex-shrink: 0; white-space: nowrap; }
.cloud-ai-body { margin-top: 14px; }
.cloud-ai-busy { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }

.cloud-ai-q { margin-bottom: 12px; }
.cloud-ai-q-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; line-height: 1.4; }
.cloud-ai-advice {
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
  background: var(--paper); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--line-soft);
}
.cloud-ai-advice b { font-weight: 650; }
.cloud-ai-steps-preview { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; }
.cloud-ai-step-prev { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.cloud-ai-step-prev .pd { width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); flex-shrink: 0; margin-top: 6px; }
.cloud-ai-foot { display: flex; gap: 9px; flex-wrap: wrap; }
.cloud-ai-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 8px; line-height: 1.45; }

/* ---------------- Ajustes con pestañas ---------------- */
.settings-tabs {
  display: flex; gap: 6px; margin-bottom: 24px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.settings-tab:hover { border-color: var(--ink-ghost); color: var(--ink); }
.settings-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.settings-tab.active svg { color: var(--paper); }

/* lista de secciones (toggles) */
.sections-list { display: flex; flex-direction: column; }
.section-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.section-row:last-child { border-bottom: none; }
.section-row-ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--terracotta-soft); color: var(--terracotta);
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.section-row.off .section-row-ico { background: var(--cream-2); color: var(--ink-ghost); }
.section-row-text { flex: 1; min-width: 0; }
.section-row.off .section-row-text { opacity: 0.6; }