/* ═══ Kiiwis UI 2 — the panel's visual system (option A: green + indigo for the AI) ═══════
   Loaded last in every panel page, so it sets the tokens and the shared pieces over the older
   stylesheets. The panel only: the customer app and the site keep their own look.
   - Neutrals: warm grays. Brand green (--k-green, kiiwis-brand.css) only for actions and
     good news. Indigo (--k-ai*) for everything Kiiwis proposes or recommends.
   - Type: Inter, weights 400 · 500 · 600; a short scale (12 · 13 · 14 · 15 · 17 · 20 · 28).
   - Radii: 8 for controls, 12 for cards. No shadows on cards; a hairline border instead.
   - One primary (solid) button per view; the rest outline or text.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --bg: #fafaf9;
  --bg-warm: #fafaf9;
  --panel: #ffffff;
  --panel-2: #f5f5f4;
  --line: #e7e5e4;
  --line-strong: #d6d3d1;
  --text: #1c1917;
  --text-2: #44403c;
  --muted: #6b645e;
  --muted-2: #6b645e;
  --green-soft: #f0fdf4;
  --green-border: #bbf7d0;
  --shadow: none;
  --shadow-md: 0 1px 2px rgba(28, 25, 23, .05);
  --shadow-lg: 0 10px 30px rgba(28, 25, 23, .10);
  --shadow-green: none;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --k-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --k-radius-card: 12px;
  --k-radius-btn: 8px;
  --k-fs-btn: 14px;
  --k-fs-row: 15px;
  --k-fs-card: 17px;
  --k-fs-num: 28px;
  --k-fs-hello: 24px;
  /* What Kiiwis proposes */
  --k-ai: #4f46e5;
  --k-ai-hover: #4338ca;
  --k-ai-ink: #3730a3;
  --k-ai-deep: #312e81;
  --k-ai-soft: #eef2ff;
  --k-ai-line: #e0e7ff;
}
@media (min-width: 769px) { :root { --k-fs-hello: 28px; --k-fs-num: 28px; } }
:root[data-theme="dark"] {
  --k-ai: #818cf8;
  --k-ai-hover: #a5b4fc;
  --k-ai-ink: #c7d2fe;
  --k-ai-deep: #e0e7ff;
  --k-ai-soft: rgba(129, 140, 248, .14);
  --k-ai-line: rgba(129, 140, 248, .32);
}
.kp-page {
  --ov-page: #fafaf9; --ov-soft: #f0fdf4; --ov-div: #f0efed; --ov-btn-line: #d6d3d1;
  --ov-sec: #57534e; --ov-mut: #6b645e; --ov-chev: #a8a29e; --ov-track: #ececea; --ov-av: #f5f5f4; --ov-av-t: #44403c;
}
:root[data-theme="dark"] .kp-page { --ov-page: var(--bg); --ov-soft: rgba(124, 187, 16, .12); --ov-div: var(--line); --ov-btn-line: var(--line-strong); --ov-track: var(--panel-2); }

/* ── Type ───────────────────────────────────────────────────────────────── */
html, body { font-family: var(--k-font) !important; font-feature-settings: 'cv11' 1; }
.ov-hello { font-weight: 600 !important; letter-spacing: -.02em !important; }
.ov-h2, .pl-sh-t, .lp-title, .mr-h, .lp-count, .ov-first-t, .ob2-title { font-weight: 600 !important; letter-spacing: -.01em; }
.ov-kpi-n, .lp-stat b, .ov-did-hero b, .ov-did-stat b { font-weight: 600 !important; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lp-res li, .pl-wk-dl, .ov-row-s { font-variant-numeric: tabular-nums; }
.lp-name, .pl-t, .ov-row-t, .hh-ai-offer { font-weight: 600 !important; }
.pl-eyebrow { color: var(--ov-mut, #6b645e) !important; font-weight: 600 !important; letter-spacing: .02em !important; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.brand-mark { background: var(--k-green, #23812e) !important; box-shadow: none !important; border-radius: 8px !important; }
html body .nav a { font-size: 14px; padding: 8px 10px; }
html body .nav a.active { background: var(--panel-2); color: var(--text); font-weight: 600; }
html body .nav a.active svg { color: var(--k-green, #23812e); opacity: 1; }
:root[data-theme="dark"] body .nav a.active { background: rgba(255, 255, 255, .07); color: #fafaf9; }
:root[data-theme="dark"] body .nav a.active svg { color: #7ed321; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: 8px !important; font-size: 14px !important; font-weight: 600; }
.btn:hover { transform: none !important; }
.btn-primary, .btn-success { box-shadow: none !important; }
.btn-primary:hover, .btn-success:hover { background: var(--k-green-hover, #1e6a27) !important; }
.btn-secondary { color: var(--text) !important; border-color: var(--line-strong) !important; box-shadow: none !important; }
.btn-secondary:hover { background: var(--panel-2) !important; border-color: var(--line-strong) !important; }
.ov-btn-line, .ov-row-btn, .pl-rev, .pl-btn2, .pl-retry, .lp-b2, .kd-more, .hh-ai-more, .hh-ai-ask { border-radius: 8px !important; border-color: var(--line-strong) !important; font-weight: 500 !important; }
.pl-go, .lp-all, .lp-b1, .hh-ai-use { border-radius: 8px !important; }

/* ── Cards, badges ──────────────────────────────────────────────────────── */
.panel, .ov-card { border-radius: 12px !important; box-shadow: none !important; }
.badge { border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; border: 0 !important; }
.badge-active { background: #f0fdf4 !important; color: #166534 !important; }
:root[data-theme="dark"] .badge-active { background: rgba(124, 187, 16, .12) !important; color: #b2e976 !important; }
.ov-ic, .ov-first-ic { background: var(--panel-2) !important; color: var(--text-2) !important; }
.ov-ic.ov-ic-idea { background: var(--k-ai-soft) !important; color: var(--k-ai) !important; }

/* ── What Kiiwis proposes: indigo ───────────────────────────────────────── */
.lp, .ov-plan { border-color: var(--line) !important; box-shadow: none !important; }
.lp-chip.is-prop, .pl-sug { background: var(--k-ai-soft) !important; color: var(--k-ai-ink) !important; }
.lp-chip.is-on { background: transparent !important; color: #166534 !important; padding-left: 12px !important; position: relative; }
.lp-chip.is-on::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 3px; background: var(--k-green, #23812e); }
:root[data-theme="dark"] .lp-chip.is-on { color: #b2e976 !important; }
.lp-row.is-open { background: var(--k-ai-soft) !important; }
.lp-row.is-open .lp-name { color: var(--k-ai-deep) !important; }
.lp-row.is-open .lp-rule, .lp-row.is-open .lp-quote { color: var(--k-ai-ink) !important; }
.lp-b1, .lp-all, .pl-go, .hh-ai-use { background: var(--k-ai) !important; color: #fff !important; }
.lp-b1:hover, .lp-all:hover, .pl-go:hover, .hh-ai-use:hover { background: var(--k-ai-hover) !important; }
/* Dark mode: the light indigo needs dark text to read */
:root[data-theme="dark"] .lp-b1, :root[data-theme="dark"] .lp-all, :root[data-theme="dark"] .pl-go, :root[data-theme="dark"] .hh-ai-use { color: #1e1b4b !important; }
.lp-msg { color: var(--k-ai-ink) !important; }
.pl-now, .lp-why { background: var(--k-ai-soft) !important; color: var(--k-ai-deep) !important; }
.lp-rec { background: var(--k-ai-soft) !important; border: 1px solid var(--k-ai-line) !important; color: var(--k-ai-ink) !important; }
.lp-rec-k { color: var(--k-ai) !important; letter-spacing: .02em !important; }
.lp-rec p { color: var(--k-ai-deep) !important; font-weight: 500 !important; }
.lp-rec-b { background: var(--panel) !important; color: var(--k-ai-ink) !important; border: 1px solid var(--k-ai) !important; border-radius: 8px !important; }
.mr-n { background: var(--k-ai) !important; }
.mr .pl-eyebrow { color: var(--k-ai) !important; }
.hh-ai-h { color: var(--k-ai) !important; }
.hh-ai-card.on { border-color: var(--k-ai) !important; background: var(--k-ai-soft) !important; }
.hh-ai-card.on .hh-ai-use { background: var(--panel) !important; color: var(--k-ai-ink) !important; border: 1px solid var(--k-ai) !important; }
.hh-ai-ask { color: var(--k-ai-ink) !important; }
.lp-sub, .pl-sub { color: var(--ov-sec, #57534e) !important; }

/* ── Home with "Tu plan de lealtad" (.ov.lp-on, js/loyalty.js) ─────────── */
/* What it repeats goes: "Cómo va" carries those numbers */
.ov.lp-on .ov-kpis, .ov.lp-on #ovStrat { display: none !important; }
/* The quick actions become a compact bar on top: one primary (Escanear), the rest outline */
.ov.lp-on .ov-actions { order: -1; display: flex; flex-wrap: wrap; gap: 8px; }
.ov.lp-on .ov-act { height: 40px; padding: 0 14px; gap: 8px; border-radius: 8px; font-size: 14px; font-weight: 500; border-color: var(--line-strong); flex: 0 0 auto; }
.ov.lp-on .ov-act svg { width: 16px; height: 16px; color: var(--text-2); }
.ov.lp-on .ov-act-main { font-weight: 600; border-color: var(--ov-accent); }
.ov.lp-on .ov-act-main svg { color: #fff; }
@media (max-width: 768px) {
  .ov.lp-on .ov-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov.lp-on .ov-act { justify-content: center; height: 44px; }
  .ov.lp-on .ov-act-main { grid-column: span 2; }
}
/* Tu base and Esta semana side by side when there's room */
.lp-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.lp-grid > .ov-card { flex: 1 1 420px; min-width: 0; }
.lp-grid > #lpCard { flex-grow: 1.4; }
.lp-top { padding: 20px 24px 4px !important; }
.lp-title { font-size: 20px !important; }
.lp-sub { font-size: 14px !important; }
.lp-count { font-size: 15px !important; }
/* The base: plain rows, not a box in a box */
.lp-list { border: 0 !important; border-radius: 0 !important; overflow: visible !important; }
.lp-row { padding: 14px 0 !important; border-bottom: 1px solid var(--line) !important; background: transparent; }
.lp-row:last-child { border-bottom: 0 !important; }
.lp-row.is-open { padding: 14px !important; margin: 6px -14px 0; border-radius: 10px; border-bottom: 0 !important; }
.lp-thumb { width: 40px !important; height: 50px !important; border-radius: 6px !important; }
.lp-name { font-size: 15px !important; }
.lp-rule, .lp-quote { font-size: 13px !important; }
/* A live row: the state next to its name, "Editar" on the right (no extra line) */
.lp-row:not(.is-open) { position: relative; padding-right: 72px !important; }
.lp-row:not(.is-open) .lp-rtop { justify-content: flex-start !important; gap: 10px !important; }
.lp-row:not(.is-open) .lp-acts { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 0 !important; }
/* Without its side column (Tus estrategias goes), the activity takes the whole width */
.ov.lp-on .ov-cols { grid-template-columns: minmax(0, 1fr) !important; }
.ov.lp-on .ov-colside:not(:has(.ov-card:not([style*="display:none"]):not([style*="display: none"]))) { display: none; }
.lp-link { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 500; color: var(--text-2) !important; }
.lp-link:hover { color: var(--text) !important; text-decoration: underline; }
.lp-bar { height: 4px !important; margin-bottom: 4px !important; }
/* Cómo va: one strip of numbers with dividers, and the results as a table */
.lp-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0 !important; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lp-stat { background: transparent !important; border-radius: 0 !important; border-right: 1px solid var(--line); padding: 14px 16px !important; }
.lp-stat:last-child { border-right: 0; }
.lp-stat b { font-size: 26px !important; }
@media (max-width: 600px) {
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lp-stat:nth-child(2n) { border-right: 0; }
  .lp-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .lp-stat b { font-size: 22px !important; }
}
.lp-res li { padding: 12px 0 !important; }

/* ── Phase 3: the rest of the panel ────────────────────────────────────────
   The older pages used slate grays and blue for "suggested"; the colors now come from the
   tokens above (see the stylesheets), and blue means what Kiiwis recommends: indigo. */
:root { --blue: var(--k-ai); --blue-soft: var(--k-ai-soft); --blue-border: var(--k-ai-line); --purple-soft: var(--k-ai-soft); }
/* Promotion wizard: the icons of the occasions are neutral, the choice is what's green */
.wz-opt svg[stroke="currentColor"] { color: var(--text-2); }
/* "Ármala por mí" and "Armar mi perfil": Kiiwis does it, so indigo */
#campWizBtnExpress, .ai-setup .ai-setup-go, .hp-ask-send { background: var(--k-ai) !important; border-color: var(--k-ai) !important; color: #fff !important; }
#campWizBtnExpress:hover, .ai-setup .ai-setup-go:hover, .hp-ask-send:hover:not(:disabled) { background: var(--k-ai-hover) !important; border-color: var(--k-ai-hover) !important; }
:root[data-theme="dark"] #campWizBtnExpress, :root[data-theme="dark"] .ai-setup .ai-setup-go, :root[data-theme="dark"] .hp-ask-send { color: #1e1b4b !important; }
.ai-setup .ai-setup-ic { color: var(--k-ai) !important; background: var(--k-ai-soft) !important; }
/* "Recomendado" tags in the wizards */
.wz-rec, .wz-rec-tag { background: var(--k-ai-soft) !important; color: var(--k-ai-ink) !important; }

/* ── Memoria del negocio: where Kiiwis learns from, on top ─────────────────
   A very soft indigo (it's what teaches the AI); the website and the folder side by side */
.mem-src { padding: 20px 22px !important; display: flex; flex-direction: column; gap: 16px;
  background: color-mix(in srgb, var(--k-ai-soft) 55%, var(--panel)) !important; border-color: var(--k-ai-line) !important; }
.mem-src-h h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--text); }
.mem-src-h p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.mem-src-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mem-src-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); min-width: 0; }
.mem-src-box h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
@media (max-width: 760px) { .mem-src-grid { grid-template-columns: 1fr; } .mem-src-web .mem-add { flex-direction: column; } .mem-src-web .mem-add .ov-btn-line { justify-content: center; } }

/* ── Facturación: the brand green for what's good news (your plan, what Kiiwis did) ──── */
:root { --k-good: var(--k-green, #23812e); --k-good-soft: color-mix(in srgb, var(--k-green, #23812e) 9%, var(--panel)); }
:root[data-theme="dark"] { --k-good: #7ed321; --k-good-soft: rgba(126, 211, 33, .10); }
.bl-plan { background: linear-gradient(120deg, var(--k-good-soft) 0%, var(--panel) 75%) !important;
  border-color: color-mix(in srgb, var(--k-good) 28%, var(--line)) !important; }
.bl-plan .ov-ic { background: var(--k-good) !important; color: #fff !important; border-radius: 12px !important; }
:root[data-theme="dark"] .bl-plan .ov-ic { color: #14210a !important; }
.bl-plan h2 { font-size: 22px !important; font-weight: 600 !important; }
.bl-value-k:first-child .bl-value-n { color: var(--k-good); }
.bl-value-n { font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.bl-rc-bar i { background: var(--k-good) !important; }
.bl-rc-bar i.bl-rc-warn { background: #d97706 !important; }
.bl-offer h3 { color: var(--k-good) !important; font-weight: 600 !important; }
.bl-offer-p { font-weight: 600 !important; }
.bl-offer li::before { color: var(--k-good) !important; }
.bl-offer.bl-offer-cur { border-color: var(--k-good) !important; box-shadow: 0 0 0 1px var(--k-good); }
.bl-offer-go { background: var(--k-green, #23812e) !important; color: #fff !important; border-radius: 8px !important; }
.bl-offer-mine { background: var(--k-good-soft) !important; color: var(--k-good) !important; border-radius: 8px !important; }
/* "Lo que puedes usar hoy": tinted icons, like the help center */
.bl-cols .ov-ic { background: var(--k-good-soft) !important; color: var(--k-good) !important; }