:root {
  /* Fidely purple */
  --primary: #4f2ca6;
  --primary-rgb: 79, 44, 166;
  --primary-dark: #3e2189;
  --primary-light: #efeafb;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --success: #16a34a;
  --success-light: #dcfce7;
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  /* Identity (landing, auth and the wordmark everywhere) */
  --lp-ink: #1d1a4b;
  --lp-muted: #6b6a85;
  --lp-purple: #4f2ca6;
  --lp-purple-2: #6a3fd6;
  --lp-lilac: #efeafc;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }
/* "clip" avoids horizontal scroll without turning <body> into a scroll
   container, which would break position: sticky (the save bar). */
body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { max-width: 100%; }
/* The hidden attribute always wins, even over classes like .btn that set display. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 8px;
  border: none;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.btn-primary { background: var(--primary); color: var(--on-primary, #fff); }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--bg); text-decoration: none; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { opacity: 0.9; text-decoration: none; }
.btn-danger { background: var(--danger-light); color: var(--danger); }
.btn-block { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.btn-google { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-google:hover { background: var(--bg); text-decoration: none; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---- Forms ---- */
label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin: 16px 0 6px; }
label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], input[type="time"], input[type="search"], textarea, select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
  border-color: var(--primary);
}
.hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.phone-field { display: flex; gap: 8px; }
/* The country selector shows only "🇩🇴 DO +1"; the real <select> sits on
   top, invisible, so tapping it still opens the full list of countries. */
.phone-cc { position: relative; flex: 0 0 auto; display: flex; }
.phone-cc-label { display: flex; align-items: center; gap: 4px; white-space: nowrap; padding: 0 28px 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font-size: 0.95rem; color: var(--text); }
.phone-cc select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.phone-cc:focus-within .phone-cc-label { outline: 2px solid var(--primary); outline-offset: 1px; }
.phone-field input { flex: 1; min-width: 0; }

/* ---- Cards / surfaces ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

.alert {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.alert-error { background: var(--danger-light); color: var(--danger); }
.alert-success { background: var(--success-light); color: #15803d; }
.alert-info { background: var(--primary-light); color: var(--primary-dark); }
.presence-spinner { width: 44px; height: 44px; margin: 26px auto 8px; border-radius: 50%; border: 4px solid var(--primary-light); border-top-color: var(--primary); animation: presence-spin 0.9s linear infinite; }
@keyframes presence-spin { to { transform: rotate(360deg); } }

/* ---- Identity wordmark (every page) ---- */
.fidely-wordmark { display: inline-flex; flex-direction: column; align-items: center; color: var(--lp-purple); line-height: 1; font-size: 1.55rem; font-family: var(--font); }
.fidely-wordmark .fw-text { font-weight: 800; font-size: 1em; letter-spacing: 0.01em; }
.fidely-wordmark .fw-smile { display: block; width: 2.1em; height: 0.62em; margin-top: 0.02em; }
.fidely-wordmark.fw-sm { font-size: 0.8rem; }
a.brand, a.brand:hover { text-decoration: none; display: inline-flex; }

/* ---- Auth / plain layout ---- */
.plain-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.plain-header {
  padding: 22px 24px 6px;
  background: transparent;
}
.plain-header .fidely-wordmark { font-size: 1.35rem; }
.plain-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box h1 { font-size: 1.4rem; margin-bottom: 4px; }
.auth-box .subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 0.9rem; color: var(--text-muted); }

/* ---- Landing (public homepage) ---- */
.plain-main:has(> .landing-page) { display: block; padding: 0; align-items: stretch; }
.landing-page {
  width: 100%;
  background: #fff;
  color: var(--lp-ink);
}
.landing-page a:hover { text-decoration: none; }
.lp-container { max-width: 1120px; margin: 0 auto; padding-left: 80px; padding-right: 80px; }
@media (max-width: 900px) { .lp-container { padding-left: 24px; padding-right: 24px; } }

.lp-hero-bg {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f5f3fd 0%, #f2effc 60%, #f6f4fd 100%);
}

/* Nav */
.lp-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding-top: 30px; padding-bottom: 10px; }
.lp-logo { display: inline-flex; }
.lp-nav-links { display: flex; gap: 40px; }
.lp-nav-links a { color: var(--lp-muted); font-size: 0.86rem; font-weight: 500; }
.lp-nav-links a:hover, .lp-nav-links a.active { color: var(--lp-purple); }
.lp-nav-links a.active { font-weight: 700; }
@media (max-width: 820px) {
  .lp-nav { flex-wrap: wrap; row-gap: 18px; padding-top: 22px; }
  .lp-nav-links { order: 3; width: 100%; justify-content: space-between; gap: 8px; padding: 10px 4px 0; border-top: 1px solid rgba(79, 44, 166, 0.12); }
  .lp-nav-links a { font-size: 0.84rem; white-space: nowrap; }
}

.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; font-weight: 600; color: #fff; background: linear-gradient(90deg, #5a30c4 0%, #4a26a6 100%); }
.lp-btn:hover { color: #fff; filter: brightness(1.06); }
.lp-btn-nav { padding: 11px 26px; font-size: 0.86rem; box-shadow: 0 8px 18px -8px rgba(79, 44, 166, 0.55); }
.lp-btn-cta { padding: 17px 36px; font-size: 1.02rem; box-shadow: 0 16px 30px -12px rgba(79, 44, 166, 0.6); }




/* Why Fidely */
.lp-why { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 56px; padding-top: 70px; padding-bottom: 80px; }
.lp-eyebrow { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; color: var(--lp-purple); margin-bottom: 14px; }
.lp-why-text h2 { font-size: 1.8rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; margin: 0 0 22px; color: var(--lp-ink); }
.lp-why-text p { font-size: 0.92rem; line-height: 1.65; color: var(--lp-muted); margin: 0; max-width: 400px; }
.lp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px 22px; }
.lp-why-ic { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--lp-lilac); color: var(--lp-purple); margin-bottom: 14px; }
.lp-why-item h3 { font-size: 0.8rem; white-space: nowrap; font-weight: 700; margin: 0 0 8px; color: var(--lp-ink); }
.lp-why-item p { font-size: 0.72rem; line-height: 1.6; color: var(--lp-muted); margin: 0; }

/* Responsive */
@media (max-width: 1000px) {
  .lp-why { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .lp-why-grid { grid-template-columns: 1fr 1fr; }
  .lp-why-item p br { display: none; }
  .lp-why-item h3 { white-space: normal; }
}

/* ---- Marketing subpages (Cómo funciona, Beneficios, Contacto) ---- */
.lp-page-hero { position: relative; z-index: 2; padding-top: 70px; padding-bottom: 80px; text-align: center; }
.lp-page-hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; margin: 0 auto 22px; color: var(--lp-ink); }
.lp-page-hero p { font-size: 1.05rem; line-height: 1.65; color: var(--lp-muted); max-width: 560px; margin: 0 auto; }
.lp-section { padding-top: 72px; padding-bottom: 72px; }
.lp-section-alt { background: #f8f6fe; }
.lp-section-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 36px; color: var(--lp-ink); }
.lp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.lp-step { background: #fff; border: 1px solid #ece8f8; border-radius: 20px; padding: 26px 22px; box-shadow: 0 14px 30px -22px rgba(43, 26, 102, 0.35); }
.lp-step-n { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #5a30c4, #4a26a6); color: #fff; font-weight: 800; font-size: 0.95rem; margin-bottom: 16px; }
.lp-step h3 { font-size: 1.02rem; font-weight: 700; margin: 0 0 8px; color: var(--lp-ink); }
.lp-step p { font-size: 0.88rem; line-height: 1.6; color: var(--lp-muted); margin: 0; }
.lp-section .lp-why-grid { grid-template-columns: repeat(3, 1fr); }
.lp-section .lp-why-item h3 { font-size: 0.92rem; }
.lp-section .lp-why-item p { font-size: 0.84rem; }
.lp-cta-wrap { padding-top: 24px; padding-bottom: 80px; }
.lp-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 44px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #5a30c4 0%, #3c1d93 100%); box-shadow: 0 30px 50px -30px rgba(60, 29, 147, 0.8); }
.lp-cta-band h2 { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.lp-cta-band p { margin: 0; opacity: 0.85; }
.lp-btn-light, .lp-btn-light:hover { background: #fff; color: var(--lp-purple); }
.lp-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.lp-contact-card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid #ece8f8; border-radius: 20px; padding: 28px 24px; box-shadow: 0 14px 30px -22px rgba(43, 26, 102, 0.35); }
.lp-contact-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--lp-ink); }
.lp-contact-card p { font-size: 0.88rem; line-height: 1.6; color: var(--lp-muted); margin: 0 0 18px; flex: 1; }
.lp-contact-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--lp-purple); overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .lp-page-hero { padding-top: 40px; padding-bottom: 56px; }
  .lp-page-hero h1 { font-size: 2.3rem; }
  .lp-section { padding-top: 52px; padding-bottom: 52px; }
  .lp-section .lp-why-grid { grid-template-columns: 1fr 1fr; }
  .lp-cta-band { padding: 30px 24px; }
  .lp-page-hero h1 br { display: none; }
}
@media (max-width: 480px) {
  .lp-page-hero h1 { font-size: 2rem; }
  .lp-section-title { font-size: 1.55rem; }
  .lp-section .lp-why-grid { grid-template-columns: 1fr; }
  .lp-section .lp-why-item p br { display: none; }
  .lp-section .lp-why-item h3 { white-space: normal; }
  .lp-cta-band .lp-btn { width: 100%; }
}

/* ---- Sign up / log in: a dark screen of their own ---- */
body:has(.auth-screen) { background: #0a0716; color: #f4f1ff; }
.plain-main:has(> .auth-screen) { padding: 0; justify-content: flex-start; align-items: stretch; }
.auth-screen { position: relative; flex: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 72px 20px 56px; overflow: hidden; isolation: isolate; background: radial-gradient(900px 520px at 50% 38%, rgba(106, 63, 214, 0.16), transparent 70%), #0a0716; }
.auth-art { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.auth-back { position: absolute; top: 26px; left: 28px; display: inline-flex; align-items: center; gap: 8px; color: #cfc7ee; font-size: 0.95rem; font-weight: 600; text-decoration: none; }
.auth-back svg { transform: rotate(180deg); }
.auth-back:hover { color: #fff; }
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { display: flex; justify-content: center; margin-bottom: 26px; text-decoration: none; }
.auth-logo .fidely-wordmark { color: #fff; font-size: 1.7rem; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 10px 30px -12px rgba(106, 63, 214, 0.7); }
.auth-card h1 { text-align: center; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; }
.auth-card .subtitle { text-align: center; color: #a9a2c9; font-size: 0.95rem; margin: 0 0 28px; }
.auth-card .subtitle a { color: #fff; font-weight: 700; text-decoration: none; }
.auth-card .subtitle a:hover { text-decoration: underline; }
.auth-card label { color: #cfc7ee; font-size: 0.85rem; font-weight: 600; margin-top: 16px; }
.auth-card input[type="text"], .auth-card input[type="email"], .auth-card input[type="password"] { height: 50px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #fff; padding-left: 16px; padding-right: 16px; font-size: 0.97rem; }
.auth-card input::placeholder { color: #7e77a0; }
.auth-card input:focus { border-color: #9b7cff; background: rgba(255, 255, 255, 0.07); box-shadow: 0 0 0 3px rgba(155, 124, 255, 0.22); outline: none; }
.auth-card input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 100px #1a1230 inset; caret-color: #fff; }
.auth-card .hint { color: #8d86ae; font-size: 0.8rem; margin: 6px 0 0; }
.auth-card .alert-error { background: rgba(248, 113, 113, 0.12); color: #fecaca; border: 1px solid rgba(248, 113, 113, 0.3); border-radius: 12px; }
.auth-card .alert-info, .auth-card .alert-success { background: rgba(143, 107, 255, 0.14); color: #e4dcff; border: 1px solid rgba(143, 107, 255, 0.35); border-radius: 12px; }
.auth-card .alert-info a { color: #fff; font-weight: 700; }
.auth-social { display: flex; }
.auth-google { position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 50px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.05); color: #fff; font-weight: 600; font-size: 0.97rem; text-decoration: none; font-family: inherit; transition: background 0.15s, border-color 0.15s; }
.auth-google:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); }
.auth-last { position: absolute; top: -11px; right: 14px; padding: 2px 9px; border-radius: 999px; background: #2a1f4d; border: 1px solid rgba(255, 255, 255, 0.18); color: #e6e0ff; font-size: 0.7rem; font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; color: #8d86ae; font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
.auth-submit { width: 100%; height: 52px; margin-top: 26px; border: none; border-radius: 14px; background: linear-gradient(180deg, #8f6bff 0%, #6a3fd6 100%); color: #fff; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(143, 107, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: filter 0.15s, transform 0.05s; }
.auth-submit:hover { filter: brightness(1.08); }
.auth-submit:active { transform: translateY(1px); }
.auth-link { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.auth-secondary { width: 100%; height: 48px; margin-top: 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #cfc7ee; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.auth-secondary:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
a.auth-secondary { text-decoration: none; }
.auth-forgot { margin: 8px 0 0; text-align: right; font-size: 0.85rem; }
.auth-forgot a { color: #c4b2ff; font-weight: 600; text-decoration: none; }
.auth-code { text-align: center; font-size: 1.6rem !important; font-weight: 700; letter-spacing: 10px; }
.auth-remember { display: flex !important; align-items: center; gap: 10px; margin-top: 16px !important; font-weight: 500 !important; color: #cfc7ee; font-size: 0.85rem; cursor: pointer; }
.auth-remember input { width: 18px; height: 18px; margin: 0; accent-color: #8f6bff; flex-shrink: 0; }
.pw-field { position: relative; }
.pw-field input { padding-right: 48px !important; }
.pw-toggle { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: transparent; color: #8d86ae; cursor: pointer; }
.pw-toggle:hover, .pw-toggle.is-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 480px) {
  .auth-screen { padding: 64px 18px 40px; align-items: flex-start; }
  .auth-back { top: 20px; left: 18px; }
  .auth-card h1 { font-size: 1.65rem; }
}

/* ---- Programa de puntos, caja y WhatsApp ---- */
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 520px) { .program-grid { grid-template-columns: minmax(0, 1fr); } }
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span { display: inline-flex; align-items: center; padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px; color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.input-prefix > input { border-radius: 0 8px 8px 0; }

.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1fb957; color: #fff; text-decoration: none; }
.wa-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wa-more > summary { cursor: pointer; font-size: 0.82rem; color: var(--text-muted); }
.wa-more-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.88rem; }
.wa-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; margin-right: 8px; border-radius: 999px; background: #e7f9ee; color: #15803d; font-size: 0.78rem; font-weight: 700; }
.wa-pill:hover { background: #d3f4e0; text-decoration: none; }

.caja-empty { color: var(--text-muted); margin: 6px 0 0; }
.caja-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.caja-row:first-of-type { border-top: none; }
.caja-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.caja-who span { color: var(--text-muted); font-size: 0.84rem; }
.caja-bal { text-align: center; min-width: 54px; }
.caja-bal b { display: block; font-size: 1.15rem; }
.caja-bal small { color: var(--text-muted); font-size: 0.72rem; }
@media (max-width: 520px) { .caja-row { flex-wrap: wrap; } .caja-row .btn { width: 100%; } }
.caja-cta { display: block; margin-top: 16px; margin-bottom: 20px; color: inherit; background: linear-gradient(120deg, #5a30c4 0%, #3c1d93 100%); color: #fff; }
.caja-cta:hover { text-decoration: none; }
.caja-cta strong { display: block; font-size: 1.05rem; }
.caja-cta span { opacity: 0.85; font-size: 0.9rem; }
[data-caja-badge][hidden] { display: none; }

.purchase-balance { display: flex; flex-direction: column; align-items: center; padding: 14px; margin-bottom: 14px; border-radius: 12px; background: var(--primary-light); }
.purchase-balance span { font-size: 0.8rem; color: var(--text-muted); }
.purchase-balance strong { font-size: 1.6rem; color: var(--primary-dark); }
.purchase-balance small { color: var(--text-muted); }
.amount-input { font-size: 1.8rem !important; font-weight: 800; text-align: center; height: 64px; }
.redeem-box { margin-top: 14px; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; }
.redeem-row { display: flex; gap: 8px; }
.redeem-row input { flex: 1; min-width: 0; }
.purchase-preview { margin: 16px 0 4px; padding: 14px 16px; border-radius: 12px; background: var(--bg); font-size: 0.92rem; }
.purchase-preview:empty { display: none; }
.purchase-preview .row { display: flex; justify-content: space-between; padding: 3px 0; }
.purchase-preview .earn { margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--border); text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--primary-dark); }
.purchase-submit { height: 52px; margin-top: 14px; font-size: 1rem; }

/* Tarjeta del cliente con puntos */
.pv-card.pp-waiting { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px; border: 2px solid var(--primary); background: var(--primary-light); }
.pp-spinner { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; border: 4px solid rgba(79, 44, 166, 0.18); border-top-color: var(--primary); animation: presence-spin 0.9s linear infinite; }
.pp-waiting-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pp-waiting-text strong { color: var(--primary-dark); font-size: 0.98rem; line-height: 1.3; }
.pp-waiting-text span { font-size: 0.82rem; color: #4b4a63; }
.pp-waiting form { flex: 0 0 100%; text-align: center; }
.pp-cancel { background: none; border: none; color: var(--text-muted); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 0.82rem; }
.pp-here { padding: 14px 16px; text-align: center; }
.pp-here small { display: block; margin-top: 8px; color: var(--text-muted); font-size: 0.78rem; }
.pp-balance { padding: 18px 18px 16px; }
.pp-head { display: flex; justify-content: space-between; align-items: baseline; }
.pp-head span { font-weight: 600; font-size: 1rem; }
.pp-head b { font-size: 2.2rem; color: var(--primary); }
.pp-money { color: var(--text-muted); margin: 0 0 10px; }
.pp-note { margin: 10px 0 0; font-size: 0.88rem; }
.pp-rule { margin: 6px 0 0; font-size: 0.78rem; color: var(--text-muted); }
.pp-history { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; font-size: 0.86rem; }
.pp-move { display: flex; justify-content: space-between; color: var(--text-muted); }
.pp-move b { color: var(--success); }

.type-combo { position: relative; }
.type-combo-input { padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.type-combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 290px; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 36px -12px rgba(30, 27, 75, 0.3); }
.type-combo-list[hidden] { display: none; }
.type-combo-list li { padding: 10px 12px; border-radius: 8px; font-size: 0.93rem; cursor: pointer; }
.type-combo-list li:hover, .type-combo-list li.is-active { background: var(--primary-light); }
.type-combo-list li.is-selected { font-weight: 700; color: var(--primary-dark); }
.type-combo-list li.type-combo-empty { cursor: default; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.type-combo-list li.type-combo-empty:hover { background: none; }

/* ---- Configuración: se adapta al ancho de la pantalla ----
   En teléfono y tableta, una columna. En computadora, dos: el formulario
   principal a la izquierda y las tarjetas rápidas (NFC, programa,
   validación) a la derecha. */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 760px; }
.settings-side, .settings-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.settings-card { margin: 0; }
@media (min-width: 1280px) {
  .settings-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; max-width: 1280px; gap: 24px; }
  .settings-main { order: -1; }
}
@media (min-width: 1600px) {
  .settings-layout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* Programa de puntos: cuatro opciones sencillas */
.preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 420px) { .preset-grid { grid-template-columns: minmax(0, 1fr); } }
.preset { position: relative; display: block; margin: 0; padding: 0; cursor: pointer; font-weight: 400; color: var(--text); }
.preset input { position: absolute; opacity: 0; pointer-events: none; }
.preset-body { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.preset-body b { font-size: 0.98rem; color: var(--text); }
.preset-body span { font-size: 0.8rem; color: var(--text-muted); }
.preset-body em { align-self: flex-start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: 0.7rem; font-weight: 700; background: var(--success-light); color: #15803d; }
.preset:hover .preset-body { border-color: #cfc6ee; }
.preset input:checked + .preset-body { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 1px var(--primary) inset; }
.preset input:focus-visible + .preset-body { outline: 2px solid var(--primary); outline-offset: 2px; }
.preset-line { margin: 12px 0 0; font-size: 0.9rem; color: var(--text); }
.preset-line:empty { display: none; }
.preset-guide, .preset-more { margin-top: 12px; }
.preset-guide > summary, .preset-more > summary { cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--primary); }
.preset-guide p { margin: 8px 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); }
[data-custom-panel] { margin-top: 14px; }

/* Barra de guardar: se queda pegada abajo mientras se baja por el formulario */
.save-bar { position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px -24px -24px; padding: 12px 24px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); backdrop-filter: blur(6px); }
.save-note { font-size: 0.84rem; color: var(--text-muted); }
.save-bar.dirty .save-note { color: #b45309; font-weight: 600; }
@media (max-width: 720px) { .save-bar { margin: 20px -16px -16px; padding: 12px 16px; } }

.nav-sep { margin: 14px 12px 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.sidebar nav a .badge { margin-left: auto; }
.sidebar nav a .badge[hidden] { display: none; }

/* Panel del desarrollador */
.admin-events { display: flex; flex-direction: column; }
.admin-event { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.admin-event:first-child { border-top: none; }
.admin-dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--border); }
.admin-event.unread .admin-dot { background: var(--primary); box-shadow: 0 0 0 4px var(--primary-light); }
.admin-event-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.admin-event-text span { color: var(--text-muted); font-size: 0.84rem; overflow-wrap: anywhere; }
.admin-event time { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.admin-filters a { padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font-size: 0.85rem; font-weight: 600; }
.admin-filters a:hover { text-decoration: none; background: var(--primary-light); }
.admin-filters a.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* ---- Panel del desarrollador: gráficas, embudo, avisos de mejora ---- */
.stat-grid.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-card .hint { font-size: 0.78rem; line-height: 1.35; }
.bar-chart { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding-top: 22px; overflow-x: auto; }
.bar-col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.bar-stack { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4px; min-height: 0; }
.bar { position: relative; flex: 1; max-width: 26px; min-height: 0; border-radius: 6px 6px 0 0; }
.bar em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.bar-green { background: #22c55e; }
.bar-red { background: #f87171; }
.bar-purple { background: var(--primary); max-width: 40px; }
.bar-label { text-align: center; font-size: 0.72rem; color: var(--text-muted); margin-top: 6px; white-space: nowrap; }
.bar-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.bar-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.bar-legend i.bar-green { background: #22c55e; }
.bar-legend i.bar-red { background: #f87171; }
.funnel-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 28px; gap: 10px; align-items: center; padding: 5px 0; font-size: 0.86rem; }
.funnel-row > span { color: var(--text-muted); }
.funnel-row b { text-align: right; }
.funnel-bar { height: 8px; border-radius: 999px; background: var(--primary-light); overflow: hidden; }
.funnel-bar i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.usage-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.usage-row:first-of-type { border-top: none; }
.usage-row:hover b { color: var(--primary); }
.insight { padding: 11px 14px; border-radius: 12px; margin-bottom: 10px; font-size: 0.9rem; border-left: 4px solid var(--border); background: var(--bg, #f8fafc); }
.insight b { display: block; margin-bottom: 2px; }
.insight div { color: var(--text-muted); }
.insight-bad { border-left-color: #ef4444; background: #fef2f2; }
.insight-warn { border-left-color: #f59e0b; background: #fffbeb; }
.insight-info { border-left-color: #3b82f6; background: #eff6ff; }
.insight-good { border-left-color: #22c55e; background: #f0fdf4; }
.gaps { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: 0.88rem; }
.gaps li { margin-bottom: 6px; }
.admin-plan-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.admin-plan-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--text-muted); margin: 0; flex: 1 1 150px; }
.admin-plan-form input, .admin-plan-form select { margin: 0; }
.admin-plan-form .btn { flex: 0 0 auto; }
.lowmargin-box { margin-top: 14px; }
.lowmargin-box [data-lowmargin-fields] { margin-top: 10px; }
.lowmargin-setting select { max-width: 260px; }
.badge-suspended { background: #fee2e2; color: #b91c1c; }
.admin-inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-inline-form input { flex: 1 1 260px; margin: 0; }
.admin-danger { border: 1px solid #fecaca; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.admin-check { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 0.92rem; }
.admin-check:first-of-type { border-top: none; }
.admin-check > span { color: var(--text-muted); }
.admin-check b { text-align: right; overflow-wrap: anywhere; }
.admin-toasts { position: fixed; top: 16px; right: 16px; z-index: 100; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.admin-toast { padding: 14px 16px; border-radius: 14px; background: var(--primary); color: #fff; box-shadow: 0 16px 36px -12px rgba(30, 27, 75, 0.5); cursor: pointer; animation: admin-toast-in 0.25s ease-out; }
.admin-toast strong { display: block; font-size: 0.95rem; }
.admin-toast span { display: block; margin-top: 2px; font-size: 0.82rem; opacity: 0.9; overflow-wrap: anywhere; }
@keyframes admin-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- Dashboard layout ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}
.sidebar .brand { padding: 2px 10px 22px; }
.sidebar .brand .fidely-wordmark { font-size: 1.25rem; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text); font-size: 0.92rem; font-weight: 500;
}
.sidebar nav a svg { flex-shrink: 0; color: var(--text-muted); }
.sidebar nav a.active svg { color: var(--primary); }
.sidebar nav a:hover { background: var(--bg); text-decoration: none; }
.sidebar nav a.active { background: var(--primary-light); color: var(--primary-dark); }
.sidebar-help { margin: 16px 0 4px; padding: 14px; border-radius: 14px; background: #f6f3fe; font-size: 0.8rem; }
.sidebar-help b { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--text); margin-bottom: 4px; }
.sidebar-help b svg { color: var(--primary); }
.sidebar-help span { display: block; color: var(--text-muted); line-height: 1.4; }
.sidebar-help a { display: inline-block; margin-top: 8px; font-weight: 600; }
.sidebar-footer { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
.sidebar-footer form { margin: 0; }
.sidebar-footer button { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; padding: 8px 12px; width: 100%; text-align: left; }
.sidebar-footer button:hover { color: var(--text); }

.app-main { flex: 1; padding: 32px; min-width: 0; }
/* On computers the left menu stays in place while the page scrolls. */
@media (min-width: 721px) {
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; overflow-y: auto; z-index: 20; }
  .app-main { margin-left: 230px; }
}
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.page-header h1 { margin: 0; font-size: 1.5rem; }
.page-header .subtitle { color: var(--text-muted); font-size: 0.92rem; margin-top: 4px; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.stat-card .value { font-size: 1.8rem; font-weight: 800; }
.stat-card .label { color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }

table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
tbody td { padding: 12px; font-size: 0.9rem; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg); }

.search-bar { display: flex; gap: 10px; margin-bottom: 18px; }
.search-bar input, .search-bar select { flex: 1; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.badge-ready { background: var(--success-light); color: #15803d; }
.badge-progress { background: var(--primary-light); color: var(--primary-dark); }
.badge-expired { background: var(--danger-light); color: var(--danger); }

/* ---- Client card (public) ---- */
.punch-card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.punch {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.punch.filled {
  border-style: solid;
  border-color: var(--primary);
  background: var(--primary-light);
}
.card-token-box { text-align: center; }
.card-token-box img { border-radius: 12px; border: 1px solid var(--border); margin: 16px 0; }
.reward-banner {
  background: var(--success-light);
  color: #15803d;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.action-row { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* ---- Checklists, AI results, misc ---- */
.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; margin-top: 8px; font-weight: 400; color: var(--text); cursor: pointer; }
.check-row input { width: auto; margin-top: 3px; flex-shrink: 0; }
.check-row strong { display: block; font-size: 0.92rem; }
.check-row span { display: block; font-size: 0.82rem; color: var(--text-muted); }
.check-row:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 10px; }
.check-grid .check-row { padding: 10px; }

.ai-box { background: var(--primary-light); border: 1px solid #d8ccf5; border-radius: var(--radius); padding: 18px 20px; }
.ai-box h3, .ai-box h4 { margin: 0 0 8px; color: var(--primary-dark); }
.ai-box h4 { margin-top: 14px; font-size: 0.92rem; }
.ai-box ul, .ai-box ol { margin: 4px 0 0; padding-left: 20px; }
.ai-box li { margin: 4px 0; font-size: 0.92rem; }
.ai-box p { margin: 4px 0; font-size: 0.92rem; }

.place-results { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.place-result { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-family: inherit; font-size: 0.92rem; color: var(--text); width: 100%; }
.place-result:hover, .place-result.selected { border-color: var(--primary); background: var(--primary-light); }
.place-result small { display: block; color: var(--text-muted); margin-top: 2px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.timeline li:first-child { border-top: none; }
.timeline .tl-date { color: var(--text-muted); min-width: 150px; flex-shrink: 0; }
.timeline .tl-kind { font-weight: 700; }

.loading-overlay { position: fixed; inset: 0; background: rgba(248, 250, 252, 0.94); display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; z-index: 50; text-align: center; padding: 24px; }
.loading-overlay.show { display: flex; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--primary-light); border-top-color: var(--primary); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.client-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
tr[data-href] { cursor: pointer; }

/* ---- Branded client pages (colors come from the business's brand) ---- */
body.branded { background: var(--brand-soft, var(--bg)); }
body.branded .plain-header { border-bottom: 3px solid var(--primary); }
body.branded .card { border-color: var(--brand-border, var(--border)); }
body.branded .auth-box h1 { color: var(--brand-ink, var(--text)); }
body.branded .card h3 { color: var(--brand-ink, var(--text)); position: relative; padding-left: 12px; }
body.branded .card h3::before { content: ''; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 4px; border-radius: 4px; background: var(--brand-2, var(--primary)); }
body.branded .check-row:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
body.branded .check-row input, body.branded input[type="checkbox"] { accent-color: var(--primary); }
body.branded .btn-secondary { border-color: var(--brand-border, var(--border)); }
body.branded a { color: var(--brand-ink, var(--primary)); }
body.branded .btn-primary, body.branded a.btn-primary { color: var(--on-primary, #fff); }
body.branded .btn-secondary { color: var(--text); }

.client-card .card-hero {
  background: linear-gradient(135deg, var(--primary) 35%, var(--brand-2, var(--primary-dark)));
  color: var(--on-primary, #fff);
  border-radius: var(--radius);
  padding: 22px 18px 20px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}
.card-hero-logo { display: inline-block; padding: 4px; background: #fff; border-radius: 50%; margin-bottom: 8px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18); }
.card-hero.has-banner { padding-top: 0; overflow: hidden; }
.card-hero-banner { aspect-ratio: 5 / 2; margin: 0 -18px; }
.card-hero.has-banner .card-hero-logo { margin-top: -46px; position: relative; }
.card-hero-name { font-weight: 800; font-size: 1.35rem; line-height: 1.2; }
.card-hero-name, .card-hero-sub { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.card-hero-sub { opacity: 0.9; font-size: 0.92rem; margin-top: 2px; }

.stamp-card .punch-card { margin: 16px 0; }
.stamp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 0.95rem; }
.stamp-count strong { font-size: 1.6rem; color: var(--brand-ink, var(--primary)); }
.stamp-left { color: var(--text-muted); }
.stamp-left strong { color: var(--brand-3-ink, var(--brand-ink, var(--primary))); font-size: 1.05rem; }
.progress { height: 8px; background: var(--brand-2-light, var(--primary-light)); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress span { display: block; height: 100%; background: var(--brand-2, var(--primary)); border-radius: 999px; }
.punch.filled { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); font-weight: 800; }
.reward-box { background: var(--brand-3-light, var(--primary-light)); border: 1px solid var(--brand-3, transparent); border-radius: 10px; padding: 10px 14px; text-align: center; }
.reward-label { display: block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--brand-3-ink, var(--brand-ink, var(--primary-dark))); }
.reward-text { display: block; font-weight: 700; color: var(--text); margin-top: 2px; }

.action-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.action-tile {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--brand-border, var(--border)); border-radius: 12px;
  padding: 12px 14px; color: var(--text) !important; text-decoration: none !important;
  box-shadow: var(--shadow);
}
.action-tile:active { transform: scale(0.99); }
.action-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--brand-2-light, var(--primary-light)); color: var(--brand-2-ink, var(--brand-ink, var(--primary))); }
.action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.action-text strong { font-size: 0.98rem; }
.action-text small { color: var(--text-muted); font-size: 0.8rem; }
.action-arrow { font-size: 1.5rem; color: var(--brand-2-ink, var(--brand-ink, var(--primary))); line-height: 1; }
.action-tile-main { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff) !important; }
.action-tile-main .action-icon { background: rgba(255, 255, 255, 0.2); color: var(--on-primary, #fff); }
.action-tile-main .action-text small, .action-tile-main .action-arrow { color: var(--on-primary, #fff); opacity: 0.85; }

.img-frame { display: block; position: relative; overflow: hidden; flex-shrink: 0; }
.img-frame > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.img-frame > .img-fill { position: absolute; inset: 0; display: block; background-repeat: no-repeat; }
.img-frame > .img-probe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Shimmer while a picture is still downloading */
.img-frame:not([data-loaded]) { background-color: #ece8f6; background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 70%); background-size: 220% 100%; animation: img-shimmer 1.2s linear infinite; }
@keyframes img-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* Upload in progress: dim the preview and show the progress text */
.img-frame[data-uploading]::before { content: ''; position: absolute; inset: 0; z-index: 2; background: rgba(30, 27, 75, 0.45); }
.img-frame[data-uploading]::after { content: attr(data-uploading); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; background: rgba(255, 255, 255, 0.95); color: var(--primary); font-weight: 700; font-size: 0.85rem; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }

/* Image adjuster (drag to move, slider to zoom) */
.adjust-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.75); display: flex; align-items: center; justify-content: center; padding: 16px; }
.adjust-box { background: var(--surface); border-radius: 14px; padding: 18px; width: 100%; max-width: 460px; }
.adjust-box h3 { margin: 0 0 4px; }
.adjust-frame { position: relative; overflow: hidden; width: 100%; margin: 12px auto; background: #e2e8f0; border-radius: 10px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.adjust-frame.round { border-radius: 50%; max-width: 240px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.adjust-frame .adjust-fill { position: absolute; inset: 0; background-repeat: no-repeat; pointer-events: none; }
.adjust-frame:active { cursor: grabbing; }
.adjust-zoom { display: flex; align-items: center; gap: 10px; }
.adjust-zoom input { flex: 1; accent-color: var(--primary); }

/* ---- Client card v2 (reference design) ---- */
body.branded .plain-main { justify-content: flex-start; padding: 12px 16px 40px; }
.cc { width: 100%; max-width: 440px; }
.cc-brandbar { padding: 10px 2px 14px; }
.cc-wordmark { font-weight: 800; font-size: 1.6rem; letter-spacing: 1px; color: var(--brand-ink, var(--primary)); }
.cc-biz { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cc-biz .img-frame, .cc-biz > div:first-child { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1); border-radius: 50%; flex-shrink: 0; margin: 0 !important; }
.cc-biz-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-biz-text strong { font-size: 1.1rem; line-height: 1.25; }
.cc-biz-text small { color: var(--text-muted); font-size: 0.85rem; }
.cc-badge { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; background: var(--primary-light); color: var(--brand-ink, var(--primary)); font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 5px 10px; }
.cc-badge svg { width: 14px; height: 14px; }

.cc-card { position: relative; border-radius: 22px; overflow: hidden; background: linear-gradient(170deg, var(--primary) 40%, var(--primary-dark)); color: var(--on-primary, #fff); box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.45); }
.cc-cover { position: relative; aspect-ratio: 5 / 2; background: linear-gradient(135deg, var(--primary), var(--brand-2, var(--primary-dark))); overflow: hidden; }
.cc-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; fill: var(--primary); }
.cc-share { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.35); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cc-share svg { width: 20px; height: 20px; }
.cc-logo { position: absolute; left: 20px; top: -64px; z-index: 2; padding: 4px; background: #fff; border-radius: 50%; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.25); }
.cc-body { position: relative; padding: 44px 20px 18px; }
.cc-count-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.cc-count { font-size: 1.2rem; font-weight: 600; line-height: 1; }
.cc-count strong { font-size: 2.6rem; font-weight: 800; }
.cc-count span { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 1.5px; margin-top: 6px; opacity: 0.9; }
.cc-status { display: flex; align-items: center; gap: 8px; text-align: right; font-size: 0.88rem; font-weight: 500; line-height: 1.3; }
.cc-status svg { width: 26px; height: 26px; flex-shrink: 0; }
.cc-status strong { font-size: 1.05rem; }
.cc-stamps { margin: 18px 0 16px; display: flex; flex-direction: column; gap: 14px; }
.cc-stamp-row { position: relative; display: flex; justify-content: space-between; }
.cc-stamp-row::before { content: ''; position: absolute; left: 22px; right: 22px; top: 50%; height: 2px; background: currentColor; opacity: 0.3; }
.cc-node { position: relative; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; border: 2px dashed currentColor; }
.cc-node:not(.filled) { color: inherit; background: var(--primary); }
.cc-node:not(.filled):not(.next) { border-color: rgba(255, 255, 255, 0.45); color: rgba(255, 255, 255, 0.6); }
.cc-node.next { opacity: 1; border-style: solid; }
.cc-node.filled { background: #fff; border: none; color: var(--primary); opacity: 1; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18); }
.cc-reward { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; font-family: inherit; color: inherit; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; padding: 12px 14px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
button.cc-reward { cursor: pointer; }
.cc-reward > svg { width: 26px; height: 26px; flex-shrink: 0; }
.cc-reward span:not(.cc-chevron) { flex: 1; min-width: 0; }
.cc-reward small { display: block; font-weight: 400; font-size: 0.75rem; opacity: 0.8; margin-top: 2px; }
.cc-chevron { flex-shrink: 0; display: flex; opacity: 0.7; }

.cc-notice { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--brand-border, var(--border)); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.cc-notice-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--brand-ink, var(--primary)); }
.cc-notice-icon svg { width: 18px; height: 18px; }
.cc-notice.ok { background: #f0fdf4; border-color: #bbf7d0; }
.cc-notice.ok .cc-notice-icon { background: var(--success); color: #fff; }
.cc-notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-notice-text strong { font-size: 0.92rem; }
.cc-notice.ok .cc-notice-text strong { color: #15803d; }
.cc-notice-text small { color: var(--text-muted); font-size: 0.8rem; }
.cc-notice-time { font-size: 0.72rem; color: var(--text-muted); align-self: flex-start; }

.cc-section { font-size: 1.15rem; font-weight: 700; margin: 22px 2px 10px; color: var(--text); }
.cc-actions { display: flex; flex-direction: column; gap: 10px; }
.cc-action, .cc-closing { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--brand-border, var(--border)); border-radius: 14px; padding: 12px 14px; color: var(--text) !important; text-decoration: none !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.cc-action:active, .cc-closing:active { transform: scale(0.99); }
.cc-action-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary-light); color: var(--brand-ink, var(--primary)); }
.cc-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc-action-text strong { font-size: 0.95rem; font-weight: 600; }
.cc-action-text small { color: var(--text-muted); font-size: 0.8rem; }
.cc-action .cc-chevron, .cc-closing .cc-chevron { color: var(--text-muted); }
.cc-closing { margin-top: 16px; background: var(--primary-light); border-color: var(--brand-border, var(--border)); }
.cc-closing .cc-action-icon { background: var(--surface); }

.cc .card { border-radius: 16px; }

.reward-screen { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--on-primary, #fff); background: linear-gradient(170deg, var(--primary), var(--primary-dark)); }
.reward-screen[hidden] { display: none; }
.reward-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.25); color: #fff; font-size: 1.6rem; cursor: pointer; }
.reward-screen-icon svg { width: 72px; height: 72px; }
.reward-screen-title { font-size: 1.8rem; font-weight: 800; }
.reward-screen-text { font-size: 1.3rem; font-weight: 600; max-width: 340px; }
.reward-screen-meta { opacity: 0.9; }
.reward-screen-clock { font-size: 1.1rem; font-weight: 700; background: rgba(0, 0, 0, 0.2); border-radius: 999px; padding: 6px 16px; font-variant-numeric: tabular-nums; }
.reward-screen-hint { opacity: 0.85; font-size: 0.9rem; margin-top: 8px; }

/* ---- Client card v3 (matches the reference: hero + reward + progress) ---- */
.pv { width: 100%; max-width: 480px; --pv-ink: #1e1b4b; color: var(--pv-ink); }
.pv-hero { position: relative; margin: -12px -16px 0; min-height: 300px; border-radius: 0 0 30px 30px; overflow: hidden; background: linear-gradient(160deg, var(--primary), var(--primary-dark)); color: #fff; display: flex; align-items: flex-end; justify-content: center; }
.pv-hero > .img-frame { z-index: 0; }
.pv-hero-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.45) 0%, rgba(var(--primary-rgb), 0.72) 55%, rgba(var(--primary-rgb), 0.9) 100%); }
.pv-hero-content { position: relative; z-index: 2; text-align: center; padding: 76px 20px 30px; }
.pv-logo { display: inline-block; padding: 3px; background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25); }
.pv-name { margin: 12px 0 2px !important; font-size: 1.5rem !important; font-weight: 700; color: #fff !important; line-height: 1.2; }
.pv-sub { font-size: 1rem; color: rgba(255, 255, 255, 0.92); }
.pv-round { position: absolute; top: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.82); color: var(--pv-ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.15); }
.pv-round[hidden] { display: none; }
.pv-back { left: 16px; }
.pv-more { right: 16px; }
.pv-menu { position: absolute; top: 60px; right: 16px; z-index: 4; background: #fff; border-radius: 14px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2); padding: 6px; min-width: 230px; }
.pv-menu[hidden] { display: none; }
.pv-menu a, .pv-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: none; background: none; border-radius: 10px; color: var(--pv-ink) !important; font: inherit; font-size: 0.9rem; text-align: left; text-decoration: none !important; cursor: pointer; }
.pv-menu a:hover, .pv-menu button:hover { background: var(--primary-light); }
.pv-menu svg { width: 18px; height: 18px; color: var(--brand-ink, var(--primary)); }

.pv-body { padding-top: 16px; }
.pv-card { background: #fff; border: 1px solid #ece9f6; border-radius: 18px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(30, 27, 75, 0.05); margin-bottom: 14px; }
.pv-reward { display: flex; align-items: center; gap: 12px; padding: 14px 12px; }
.pv-reward-icon { width: 44px; height: 44px; flex-shrink: 0; margin: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; box-shadow: 0 0 0 5px var(--primary-light); }
.pv-reward-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pv-reward-text strong { font-size: 0.95rem; white-space: nowrap; font-weight: 600; color: var(--primary); }
.pv-reward-text span { font-size: 0.82rem; color: #4b4a63; line-height: 1.35; }
.pv-reward-text small { font-size: 0.78rem; color: var(--text-muted); }
.pv-show { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 10px; padding: 8px 12px; background: var(--primary); color: var(--on-primary, #fff); font: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.pv-show svg { width: 18px; height: 18px; }
.pv-progress { padding: 16px 18px 18px; }
.pv-progress-head { display: flex; justify-content: space-between; align-items: baseline; }
.pv-progress-head strong { font-size: 1rem; font-weight: 600; }
.pv-progress-head span { color: var(--text-muted); font-size: 1rem; }
.pv-progress-head b { color: var(--pv-ink); font-size: 1.15rem; font-weight: 700; }
.pv-bar { height: 8px; border-radius: 999px; background: var(--primary-light); overflow: hidden; margin: 14px 0 16px; }
.pv-bar span { display: block; height: 100%; border-radius: 999px; background: var(--primary); }
.pv-steps { display: grid; gap: 14px 6px; }
.pv-step { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-dot { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--brand-border, #d9d4ee); background: #fff; color: var(--on-primary, #fff); }
.pv-dot svg { width: 14px; height: 14px; }
.pv-step.done .pv-dot { background: var(--primary); border-color: var(--primary); }
.pv-step.next .pv-dot { border-color: var(--primary); }
.pv-label { font-size: 0.86rem; font-weight: 500; color: var(--pv-ink); white-space: nowrap; }
.pv-step:not(.done) .pv-label { color: var(--text-muted); }
.pv-section { font-size: 1.12rem !important; font-weight: 600; margin: 22px 4px 12px !important; color: var(--pv-ink); }
.pv-actions { display: flex; flex-direction: column; gap: 10px; }
.pv .cc-action, .pv .cc-closing { border: 1px solid #ece9f6; border-radius: 16px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(30, 27, 75, 0.05); color: var(--pv-ink) !important; }
.pv .cc-action-icon { width: 46px; height: 46px; background: var(--primary-light); color: var(--pv-ink); }
.pv .cc-action-text strong { font-size: 0.92rem; font-weight: 600; color: var(--pv-ink); }
.pv .cc-action-text small { font-size: 0.8rem; color: #6b6a80; }
.pv .cc-chevron { color: var(--pv-ink); opacity: 0.8; }
.pv .cc-closing { margin-top: 20px; background: var(--primary-light); border-color: var(--brand-border, #ddd6fe); }
.pv .cc-closing .cc-action-icon { background: rgba(255, 255, 255, 0.8); color: var(--primary); }
.pv .card { border-radius: 18px; border-color: #ece9f6; }

.pv-toast { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 80; width: calc(100% - 32px); max-width: 440px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #f0fdf4; border: 1px solid #bbf7d0; color: #14532d; font-size: 0.86rem; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15); transition: opacity 0.4s, transform 0.4s; }
.pv-toast.gone { opacity: 0; transform: translate(-50%, -20px); pointer-events: none; }
.pv-toast strong { color: #15803d; }
.pv-toast-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--success); color: #fff; display: flex; align-items: center; justify-content: center; }
.pv-toast-icon svg { width: 15px; height: 15px; }
.pv-toast-info { background: var(--lp-lilac); border-color: #d9cff5; color: var(--lp-ink); }

.img-frame[data-broken]::after { content: attr(data-fallback); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 2rem; color: var(--brand-ink, var(--primary)); background: var(--primary-light); border-radius: inherit; }

@media (min-width: 540px) {
  .pv-hero { margin: 0; border-radius: 30px; }
}

.optimize-notice { position: fixed; right: 16px; bottom: 16px; z-index: 90; max-width: 320px; background: var(--primary); color: #fff; font-size: 0.85rem; font-weight: 500; padding: 12px 16px; border-radius: 12px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.2); transition: opacity 0.4s; }
.optimize-notice.gone { opacity: 0; pointer-events: none; }

/* ---- Preferences sheet (reference design) ---- */
.pf-sheet { background: #fff; border: 1px solid #ece9f6; border-radius: 20px; padding: 20px 16px; margin-top: 20px; color: var(--pv-ink, #1e1b4b); box-shadow: 0 1px 3px rgba(30, 27, 75, 0.05); }
.pf-head h2 { margin: 0 0 4px !important; font-size: 1.45rem !important; font-weight: 700; color: var(--pv-ink, #1e1b4b); }
.pf-head p { margin: 0 0 18px; color: #6b6a80; font-size: 0.95rem; line-height: 1.4; }
.pf-block { scroll-margin-top: 12px; }
.pf-h { margin: 0 0 4px !important; font-size: 1.12rem !important; font-weight: 600; color: var(--pv-ink, #1e1b4b) !important; padding-left: 0 !important; }
.pf-h::before { content: none !important; }
.pf-sub { margin: 0 0 14px; color: #6b6a80; font-size: 0.88rem; line-height: 1.4; }
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-option { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 10px; border: 1px solid #e6e2f3; border-radius: 14px; background: #fff; cursor: pointer; color: var(--pv-ink, #1e1b4b); font-weight: 400; font-size: 0.8rem; line-height: 1.3; transition: background 0.15s, border-color 0.15s; }
.pf-option:has(input:checked) { background: var(--primary-light); border-color: #d9cff3; }
.pf-option-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.pf-option:has(input:checked) .pf-option-icon { background: #fff; }
.pf-option-icon svg { width: 19px; height: 19px; }
.pf-option-label { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.pf-option input { width: 18px !important; height: 18px; flex-shrink: 0; margin: 0; accent-color: var(--primary); }
.pf-saved { min-height: 1.2em; margin-top: 8px; font-size: 0.8rem; color: var(--success); font-weight: 500; }
.pf-divider { border: none; border-top: 1px solid #ece9f6; margin: 20px 0; }
.pf-callout { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px; border-radius: 16px; background: var(--primary-light); cursor: pointer; font-weight: 400; color: var(--pv-ink, #1e1b4b); }
.pf-callout-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.75); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.pf-callout-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-callout-text strong { color: var(--primary); font-size: 0.98rem; font-weight: 600; }
.pf-callout-text small { color: #6b6a80; font-size: 0.8rem; line-height: 1.35; }
.pf-callout .cc-chevron { color: var(--primary); }
.pf-search { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 0 14px; border: 1px solid #e0dcef; border-radius: 12px; background: #fff; }
.pf-search svg { width: 20px; height: 20px; color: #8a87a3; flex-shrink: 0; }
.pf-search input { border: none !important; outline: none !important; padding: 13px 0 !important; background: transparent !important; flex: 1; min-width: 0; }
.pf-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.pf-submit { margin-top: 12px; border-radius: 12px !important; padding: 13px 20px !important; }
.pf-requests { margin-top: 12px; }
.pf-request { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #ece9f6; font-size: 0.86rem; }
.pf-title-icon { display: flex; align-items: center; gap: 10px; margin: 0 0 14px !important; padding-left: 0 !important; font-size: 1.12rem !important; font-weight: 600; color: var(--primary) !important; }
.pf-title-icon::before { content: none !important; }
.pf-title-icon svg { color: var(--primary); }
.pf-info { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0 12px; }
.pf-info-icon { width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.pf-info-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.pf-info-text strong { color: var(--primary); font-size: 0.92rem; font-weight: 600; }
.pf-info-text span { color: #6b6a80; font-size: 0.86rem; line-height: 1.45; white-space: pre-line; }
.pf-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--primary-light); color: var(--primary) !important; font-size: 0.85rem; font-weight: 600; text-decoration: none !important; }
.pf-go svg { width: 18px; height: 18px; }
/* On phones the sheet runs edge to edge, like the reference, so the
   two-column options have room for their labels. */
@media (max-width: 539px) {
  .pf-sheet { margin-left: -16px; margin-right: -16px; padding: 22px 14px; border-left: none; border-right: none; border-radius: 24px; }
}

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; align-items: center; overflow-x: auto; padding: 12px; }
  .sidebar .brand { display: none; }
  .sidebar nav { flex-direction: row; }
  .sidebar-footer { border-top: none; margin: 0; padding: 0; }
  .sidebar-help { display: none; }
  .sidebar nav a svg { display: none; }
  .sidebar nav a { white-space: nowrap; }
  .app-main { padding: 16px; }
  .card { padding: 16px; }
  .page-header h1 { font-size: 1.3rem; }
  .client-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-card .value { font-size: 1.3rem; overflow-wrap: anywhere; }
  .search-bar { flex-wrap: wrap; }
  .search-bar input { min-width: 0; flex-basis: 100%; }
  .search-bar .btn { flex: 1; }
  .timeline li { flex-direction: column; gap: 2px; }
  .timeline .tl-date { min-width: 0; }

  /* iOS zooms into any field under 16px when it gets focus. */
  input, select, textarea { font-size: 16px !important; }

  /* Tables become one card per row: column name on the left (taken from
     the header by app.js), value on the right. No sideways scrolling. */
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tbody tr { border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; margin-bottom: 10px; background: var(--surface); }
  tbody tr:hover { background: var(--surface); }
  tbody td { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); text-align: right; overflow-wrap: anywhere; }
  tbody td::after { content: ''; display: block; clear: both; }
  tbody tr td:last-child { border-bottom: none; }
  tbody td::before { content: attr(data-label); float: left; margin-right: 12px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); text-align: left; max-width: 45%; line-height: 1.9; }
  tbody td:not([data-label])::before, tbody td[data-label=""]::before { content: none; }
  tbody td[data-label=""], tbody td:not([data-label]) { text-align: center; }
  tbody td[data-label=""] > *, tbody td:not([data-label]) > * { margin-left: auto; margin-right: auto; }
  tbody td .btn-row { justify-content: center !important; }
  tbody td.td-full { display: block; text-align: left; }
}

/* ---- Onboarding: el comienzo de una experiencia personalizada ---- */
body:has(.ob-wrap) { background: #f7f6fb; color: var(--lp-ink); }
body:has(.ob-wrap) .plain-header .container { max-width: 600px; margin: 0 auto; padding: 0 4px; }
body:has(.ob-wrap) .plain-header .fidely-wordmark { font-size: 2.1rem; }
.plain-main:has(> .ob-wrap) { justify-content: flex-start; padding: 18px 20px 48px; }
.ob-wrap { width: 100%; max-width: 600px; margin: 0 auto; }
.ob-title { font-size: clamp(2.1rem, 7vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--lp-ink); margin: 6px 0 14px; }
.ob-title span { color: var(--lp-purple); }
.ob-lead { font-size: 1.1rem; line-height: 1.5; color: var(--lp-muted); margin: 0 0 26px; max-width: 30em; }
.ob-cycle { position: relative; aspect-ratio: 700 / 340; border-radius: 26px; background: linear-gradient(160deg, #f3effd 0%, #efeafc 100%); margin-bottom: 36px; overflow: hidden; }
.ob-cycle > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ob-node { position: absolute; transform: translate(-50%, -50%); }
.ob-node-dot { display: flex; align-items: center; justify-content: center; width: clamp(54px, 13vw, 78px); aspect-ratio: 1; border-radius: 50%; background: #fdfcff; color: var(--lp-purple); border: 2px solid #e4dcfa; box-shadow: 0 10px 24px -12px rgba(79, 44, 166, 0.4); }
.ob-node-dot svg { width: 44%; height: 44%; }
.ob-node b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 8px; white-space: nowrap; font-size: clamp(0.8rem, 2.6vw, 1rem); font-weight: 600; color: var(--lp-purple); }
.ob-n-top { left: 50%; top: 20%; }
.ob-n-right { left: 77%; top: 55%; }
.ob-n-left { left: 23%; top: 55%; }
.ob-step { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #e9e2fb; color: var(--lp-purple); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ob-h2 { font-size: clamp(1.55rem, 5vw, 1.9rem); font-weight: 800; letter-spacing: -0.015em; color: var(--lp-ink); margin: 14px 0 22px; }
.ob-label { display: block; font-size: 1.02rem; font-weight: 700; color: var(--lp-ink); margin: 20px 0 10px; }
.ob-hint { font-size: 0.82rem; color: var(--lp-muted); margin: 6px 0 0; }
.ob-wrap .type-combo-input, .ob-wrap .ob-textarea, .ob-wrap #place_query { border: 1px solid #e1dbf3; border-radius: 16px; background-color: #fff; font-size: 1rem; color: var(--lp-ink); box-shadow: 0 1px 2px rgba(43, 26, 102, 0.04); }
.ob-wrap .type-combo-input { height: 58px; padding-left: 50px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b6a85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-position: left 18px center; background-repeat: no-repeat; background-size: 22px 22px; }
.ob-wrap .ob-textarea { min-height: 120px; padding: 16px 18px; resize: vertical; }
.ob-wrap .type-combo-input:focus, .ob-wrap .ob-textarea:focus { border-color: var(--lp-purple); box-shadow: 0 0 0 3px rgba(79, 44, 166, 0.14); outline: none; }
.ob-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.ob-goal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 112px; padding: 14px 10px; border: 1px solid #e6e0f5; border-radius: 16px; background: #fbfaff; text-align: center; cursor: pointer; margin: 0; transition: border-color 0.15s, background 0.15s; }
.ob-goal input { position: absolute; opacity: 0; pointer-events: none; }
.ob-goal-ic { color: var(--lp-purple); display: flex; }
.ob-goal b { font-size: 0.95rem; font-weight: 600; color: var(--lp-ink); line-height: 1.25; max-width: 6.5em; }
.ob-goal:hover { border-color: #cdbff3; }
.ob-goal:has(input:checked) { border: 1.5px solid var(--lp-purple); background: #efe9fd; }
.ob-goal:has(input:focus-visible) { outline: 3px solid rgba(79, 44, 166, 0.3); outline-offset: 2px; }
.ob-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 60px; margin-top: 30px; border: none; border-radius: 16px; background: var(--lp-purple); color: #fff; font-size: 1.08rem; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: 0 16px 30px -14px rgba(79, 44, 166, 0.75); transition: filter 0.15s, transform 0.05s; }
.ob-cta:hover { filter: brightness(1.08); }
.ob-cta:active { transform: translateY(1px); }
.ob-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 18px 0 0; font-size: 0.9rem; color: var(--lp-muted); }
.ob-trust svg { color: #8f6bff; flex-shrink: 0; }
.ob-link { display: block; width: 100%; margin-top: 18px; padding: 8px; border: none; background: none; color: var(--lp-purple); font-size: 0.9rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) {
  .plain-main:has(> .ob-wrap) { padding: 8px 16px 36px; }
  .ob-goals { gap: 8px; }
  .ob-goal { min-height: 100px; padding: 12px 6px; }
  .ob-goal b { font-size: 0.86rem; }
}

/* ---- Onboarding, paso 2: "Tu espacio Fidely está tomando forma" ---- */
body.ob-wide .ob-wrap { max-width: 840px; }
body.ob-wide .plain-header .container { max-width: none; padding: 0 20px; }
.ob-h2-tight { margin-bottom: 6px; }
.ob-sub { font-size: 1.05rem; color: var(--lp-muted); margin: 0 0 22px; }
.ob-strategy { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px; border: 1px solid #e4dcf8; border-radius: 18px; background: linear-gradient(160deg, #f3effd 0%, #efeafc 100%); }
.ob-strategy-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fbfaff; color: var(--lp-purple); box-shadow: 0 8px 20px -12px rgba(79, 44, 166, 0.5); }
.ob-strategy-text h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; color: var(--lp-purple); }
.ob-strategy-text p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--lp-muted); }
.ob-strategy-count { display: flex; flex-direction: column; gap: 4px; min-width: 150px; padding-left: 20px; border-left: 1px solid #ddd3f6; }
.ob-strategy-count b { font-size: 0.92rem; color: var(--lp-ink); line-height: 1.3; }
.ob-strategy-count small { font-size: 0.78rem; color: var(--lp-muted); }
.ob-meter { display: block; width: 56px; height: 6px; border-radius: 999px; background: #ddd3f6; overflow: hidden; margin-bottom: 6px; }
.ob-meter i { display: block; height: 100%; border-radius: 999px; background: var(--lp-purple); }
.ob-group { margin-top: 26px; }
.ob-group-head { display: flex; gap: 12px; align-items: flex-start; color: var(--lp-purple); margin-bottom: 12px; }
.ob-group-head svg { margin-top: 3px; flex-shrink: 0; }
.ob-group-head h3 { margin: 0; font-size: 1.12rem; font-weight: 700; color: var(--lp-ink); }
.ob-group-head h3 span { font-size: 0.9rem; font-weight: 600; color: var(--lp-ink); }
.ob-group-head p { margin: 2px 0 0; font-size: 0.86rem; color: var(--lp-muted); }
.ob-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-tool { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 42px 14px 14px; margin: 0; border: 1px solid #e6e0f5; border-radius: 14px; background: #fff; cursor: pointer; font-weight: 400; transition: border-color 0.15s, box-shadow 0.15s; }
.ob-tool:hover { border-color: #cdbff3; }
.ob-tool:has(input:checked) { border-color: #d6c9f7; box-shadow: 0 6px 18px -14px rgba(79, 44, 166, 0.6); }
.ob-tool-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: #f1ecfd; color: var(--lp-purple); }
.ob-tool-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ob-tool-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
.ob-tool-head b { font-size: 0.88rem; font-weight: 700; line-height: 1.3; color: var(--lp-ink); }
.ob-tag { flex-shrink: 0; font-style: normal; font-size: 0.66rem; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: #efe9fd; color: var(--lp-purple); white-space: nowrap; }
.ob-tag[hidden] { display: none !important; }
.ob-tool-text { font-size: 0.8rem; line-height: 1.45; color: var(--lp-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ob-tool input { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; border: 1.5px solid #cfc4ee; border-radius: 5px; background: #fff; cursor: pointer; }
.ob-tool input:checked { border-color: var(--lp-purple); background: var(--lp-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
.ob-tool input:focus-visible { outline: 3px solid rgba(79, 44, 166, 0.3); outline-offset: 2px; }
.ob-tool input:disabled { cursor: default; }
.ob-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ob-more-col { display: flex; flex-direction: column; min-width: 0; }
.ob-mini-label { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 0.82rem; font-weight: 600; color: var(--lp-ink); }
.ob-mini-label svg { color: var(--lp-purple); }
.ob-mini-label span { font-weight: 400; color: var(--lp-muted); }
.ob-wrap .ob-input { margin: 0; border: 1px solid #e1dbf3; border-radius: 12px; background: #fff; font-size: 0.88rem; color: var(--lp-ink); }
.ob-wrap textarea.ob-input { min-height: 74px; resize: vertical; }
.ob-mini-hint { font-size: 0.75rem; line-height: 1.4; color: var(--lp-muted); margin: 6px 0 0; }
.ob-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 104px; padding: 12px; border: 1px dashed #d3c7f3; border-radius: 12px; background: #fff; text-align: center; cursor: pointer; }
.ob-drop:hover { border-color: var(--lp-purple); }
.ob-drop-ic { color: var(--lp-purple); display: flex; }
.ob-drop-btn { border: none; background: none; padding: 2px 6px; color: var(--lp-purple); font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.ob-drop .ob-mini-hint { margin: 0; }
.ob-drop-adjust { border: none; background: none; color: var(--lp-muted); font-size: 0.75rem; text-decoration: underline; cursor: pointer; font-family: inherit; }
.ob-drop:has(.img-frame[data-loaded]) .ob-drop-ic { display: none; }
.ob-back { display: block; width: 100%; height: 50px; margin-top: 10px; border: 1px solid #e1dbf3; border-radius: 14px; background: #fff; color: var(--lp-ink); font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.ob-back:hover { background: #f8f6fe; }
#step2 .ob-cta { margin-top: 28px; }
@media (max-width: 760px) {
  .ob-tools, .ob-more { grid-template-columns: minmax(0, 1fr); }
  .ob-strategy { grid-template-columns: auto minmax(0, 1fr); }
  .ob-strategy-count { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0 0; border-left: none; border-top: 1px solid #ddd3f6; }
  .ob-meter { margin: 0; }
}

/* ---- Lo que la IA hizo con cada petición del dueño ---- */
.req-list { list-style: none; margin: 8px 0 0; padding: 0; }
.req-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid rgba(79, 44, 166, 0.12); }
.req-item:first-child { border-top: none; }
.req-item b { display: block; font-size: 0.9rem; color: var(--text); font-weight: 600; }
.req-item span:not(.req-chip) { display: block; font-size: 0.86rem; color: var(--text-muted); margin-top: 2px; }
.req-item a { font-weight: 600; white-space: nowrap; }
.req-chip { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.req-ok { background: #dcfce7; color: #15803d; }
.req-warn { background: #fef3c7; color: #b45309; }
.req-info { background: #dbeafe; color: #1d4ed8; }
.req-muted { background: #f1f5f9; color: #475569; }

/* ---- Resumen: centro de crecimiento del negocio ---- */
.ov { max-width: none; }
.ov-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.ov-header h1 { margin: 0; font-size: 1.85rem; font-weight: 800; letter-spacing: -0.02em; color: var(--lp-ink); }
.ov-header p { margin: 6px 0 0; color: var(--text-muted); }
.ov-pill { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 7px 14px; border-radius: 999px; background: #efeafc; color: var(--lp-purple); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ov-pill i { width: 9px; height: 9px; border-radius: 50%; background: #8f6bff; }
.ov-pill.is-done { background: #dcfce7; color: #15803d; }
.ov-pill.is-done i { background: #22c55e; }
.ov-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; min-height: 270px; padding: 26px 32px; border: 1px solid #e4dcf8; border-radius: 20px; background: linear-gradient(160deg, #f4f0fe 0%, #ede7fc 100%); overflow: hidden; }
.ov-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #e3daf9; color: var(--lp-purple); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.ov-hero h2 { margin: 14px 0 8px; font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; color: var(--lp-ink); }
.ov-hero p { margin: 0; color: var(--lp-muted); line-height: 1.5; max-width: 30em; }
.ov-progress { display: flex; align-items: center; gap: 14px; margin: 20px 0 22px; max-width: 520px; }
.ov-progress span { flex: 1; height: 8px; border-radius: 999px; background: #ddd3f6; overflow: hidden; }
.ov-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8f6bff, var(--lp-purple)); }
.ov-progress b { font-size: 0.9rem; color: var(--lp-ink); white-space: nowrap; }
.ov-hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ov-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 12px; background: var(--lp-purple); color: #fff; font-weight: 700; font-size: 0.95rem; box-shadow: 0 14px 26px -14px rgba(79, 44, 166, 0.8); }
.ov-btn:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.ov-link { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-purple); font-weight: 600; font-size: 0.92rem; }
.ov-art { position: relative; align-self: stretch; min-height: 230px; }
.ov-art-blob { position: absolute; right: 2%; top: 4%; width: 78%; height: 120%; border-radius: 48% 52% 42% 58% / 52% 44% 56% 48%; background: #e2d8fa; opacity: 0.8; }
.ov-art-spark { position: absolute; right: 10%; top: 18%; }
.ov-art-spark i { display: block; width: 26px; height: 3px; margin: 7px 0; border-radius: 3px; background: #8f6bff; }
.ov-art-spark { right: 6%; top: 22%; }
.ov-art-spark i { transform-origin: left center; margin: 9px 0; }
.ov-art-spark i:nth-child(1) { transform: rotate(-35deg); }
.ov-art-spark i:nth-child(3) { transform: rotate(35deg); }
.ov-phone { position: absolute; left: 50%; bottom: -60px; width: 190px; height: 330px; transform: translateX(-50%) rotate(8deg); border-radius: 34px; background: #17123a; padding: 10px; box-shadow: 0 30px 50px -24px rgba(23, 18, 58, 0.6); }
.ov-phone-screen { display: flex; flex-direction: column; align-items: center; gap: 10px; height: 100%; padding: 46px 14px 20px; border-radius: 26px; background: #fff; text-align: center; }
.ov-phone-screen .fidely-wordmark { font-size: 1.35rem; }
.ov-phone-screen small { font-size: 0.68rem; color: var(--lp-muted); }
.ov-dots { display: flex; gap: 6px; margin: 4px 0; }
.ov-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9bcf2; }
.ov-dots i.on { background: var(--lp-purple); border-color: var(--lp-purple); }
.ov-phone-screen em { font-style: normal; font-size: 0.66rem; color: var(--lp-muted); }
.ov-pending { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: #fff7e6; border: 1px solid #fde4b0; font-size: 0.9rem; color: #92400e; }
.ov-pending svg { flex-shrink: 0; color: #d97706; }
.ov-pending a { font-weight: 700; }
.ov-section { margin-top: 30px; }
.ov-section h2 { margin: 0; font-size: 1.3rem; font-weight: 700; color: var(--lp-ink); }
.ov-section > p { margin: 4px 0 14px; color: var(--text-muted); font-size: 0.92rem; }
.ov-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ov-step { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.ov-step-ic, .ov-stat-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: #f1ecfd; color: var(--lp-purple); }
.ov-step.is-done .ov-step-ic { background: #dcfce7; color: #16a34a; }
.ov-step-body { min-width: 0; flex: 1; }
.ov-step-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ov-step-head b { font-size: 0.95rem; color: var(--lp-ink); }
.ov-step-head em { flex-shrink: 0; padding: 3px 9px; border-radius: 999px; background: #f1ecfd; color: var(--lp-purple); font-style: normal; font-size: 0.7rem; font-weight: 600; }
.ov-step-head em.is-done { background: #dcfce7; color: #15803d; }
.ov-step-head em.is-rec { background: #ede7fc; }
.ov-step p { margin: 8px 0 12px; font-size: 0.86rem; line-height: 1.5; color: var(--text-muted); }
.ov-step a, .ov-section-head a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--lp-purple); }
.ov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 18px; }
.ov-stat { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.ov-stat b { display: block; font-size: 1.55rem; font-weight: 800; line-height: 1.1; color: var(--lp-ink); overflow-wrap: anywhere; }
.ov-stat > div > span { display: block; margin-top: 4px; font-size: 0.9rem; font-weight: 600; color: var(--lp-ink); }
.ov-stat > div > small { display: block; margin-top: 6px; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }
.ov-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 300px); gap: 18px; align-items: center; margin-top: 18px; padding: 20px 24px; border: 1px solid #e4dcf8; border-radius: 16px; background: #faf8ff; }
.ov-empty h3 { margin: 0 0 4px; font-size: 1.05rem; color: var(--lp-ink); }
.ov-empty p { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.ov-chart { width: 100%; height: auto; }
.ov-recent { margin-top: 18px; }
.ov-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.ov-section-head h3 { margin: 0; }
.ov-section-head p { margin: 2px 0 0; font-size: 0.86rem; color: var(--text-muted); }
.ov-plan { margin-top: 18px; padding: 0; }
.ov-plan summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; }
.ov-plan summary::-webkit-details-marker { display: none; }
.ov-plan summary::after { content: '▾'; margin-left: auto; color: var(--text-muted); transition: transform 0.15s; }
.ov-plan[open] summary::after { transform: rotate(180deg); }
.ov-plan summary b { display: block; color: var(--lp-ink); }
.ov-plan summary small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.85rem; line-height: 1.4; }
.ov-plan-body { padding: 0 20px 18px 80px; font-size: 0.9rem; }
.ov-plan-body h4 { margin: 14px 0 6px; color: var(--primary-dark); }
@media (max-width: 1100px) {
  .ov-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ov-header { flex-direction: column; }
  .ov-header h1 { font-size: 1.45rem; }
  .ov-hero { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .ov-art { display: none; }
  .ov-empty { grid-template-columns: auto minmax(0, 1fr); }
  .ov-chart { grid-column: 1 / -1; }
  .ov-plan-body { padding-left: 20px; }
  .ov-stats { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Configuración: horario por días y horario especial ---- */
.hours-editor { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.hours-row { display: grid; grid-template-columns: 96px 118px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.hours-row.is-closed { background: var(--bg); }
.hours-row.is-closed .hours-times { opacity: 0.45; }
.hours-day { font-weight: 600; font-size: 0.9rem; }
.hours-switch { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.85rem; font-weight: 500; color: var(--text); cursor: pointer; }
.hours-switch input { width: auto; margin: 0; accent-color: var(--primary); }
.hours-times { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hours-times input { margin: 0; min-width: 0; flex: 1; padding: 8px; }
.hours-times span { color: var(--text-muted); font-size: 0.85rem; }
.btn-small { padding: 8px 12px; font-size: 0.85rem; }
.special-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 8px; align-items: center; margin-bottom: 8px; padding: 8px 10px; border: 1px solid #e4dcf8; border-radius: 12px; background: #faf8ff; }
.special-row input, .special-row select { margin: 0; min-width: 0; padding: 8px; }
.special-row [data-special-times][hidden] { display: none !important; }
.special-row [data-special-times], .special-row input[type="text"] { grid-column: 1 / -1; }
.special-row .special-remove { grid-row: 1; grid-column: 3; }
.special-remove, .cat-remove { width: 30px; height: 30px; border: none; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 0.9rem; }
.special-remove:hover, .cat-remove:hover { background: var(--danger-light); color: var(--danger); }
@media (max-width: 760px) {
  .hours-row { grid-template-columns: 1fr auto; }
  .hours-times { grid-column: 1 / -1; }
}

/* ---- Preferencias de publicidad: una casilla por categoría ---- */
.cat-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-top: 6px; }
.cat-box { display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 0; border: 1px solid #e1dbf3; border-radius: 12px; background: #fff; }
.cat-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 44, 166, 0.12); }
.cat-box input { margin: 0; border: none; box-shadow: none !important; background: transparent; min-width: 0; flex: 1; padding: 10px 12px; }
.cat-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1.5px dashed #c9bcf2; border-radius: 12px; background: #faf8ff; color: var(--primary); font-size: 1.3rem; font-weight: 700; font-family: inherit; cursor: pointer; }
.cat-add span { font-size: 0.88rem; }
.cat-add:hover { border-color: var(--primary); background: var(--primary-light); }

/* ---- Tarjeta del cliente: horario ---- */
.pf-hours .pf-info-text { flex: 1; min-width: 0; }
.hours-now { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-style: normal; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.hours-now.is-open { background: #dcfce7; color: #15803d; }
.hours-now.is-closed { background: #fee2e2; color: #b91c1c; }
.hours-alert { margin: 8px 0 4px; padding: 8px 10px; border-radius: 10px; background: #fff7e6; border: 1px solid #fde4b0; color: #92400e; font-size: 0.85rem; }
.hours-list { list-style: none; margin: 8px 0 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.88rem; }
.hours-list li:first-child { border-top: none; }
.hours-list li > span small, .hours-list li > b small { display: block; font-weight: 400; font-size: 0.74rem; color: var(--text-muted); }
.hours-list li > b { text-align: right; font-weight: 600; }
.hours-list li.is-today { font-weight: 700; color: var(--brand-ink, var(--primary)); }
.hours-list li.is-special > b { color: #b45309; }
.hours-later { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); }
.hours-later strong { color: var(--text); font-size: 0.85rem; }

/* ---- Menú del cliente (copia del diseño de referencia) ---- */
body.branded .plain-main:has(> .mn), .plain-main:has(> .mn) { padding: 0; justify-content: flex-start; align-items: stretch; background: #f6f4fc; }
.mn { --mn-ink: #261a63; --mn-deep: #3a1f8f; --mn-purple: #4f2ca6; --mn-soft: #8c6ee0; --mn-muted: #67657d; --mn-lilac: #efeafc; width: 100%; max-width: 480px; margin: 0 auto; padding-bottom: 92px; color: var(--mn-ink); background: #f6f4fc; min-height: 100vh; }
.mn-top { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; padding: 14px 20px 12px; background: #fff; }
.mn-top .fidely-wordmark { justify-self: center; font-size: 1.75rem; color: var(--mn-purple); }
.mn-round { width: 42px; height: 42px; border-radius: 50%; background: var(--mn-lilac); color: var(--mn-purple); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mn-round svg { transform: rotate(180deg); }
.mn-bell { justify-self: end; color: var(--mn-ink); display: inline-flex; }

.mn-hero { position: relative; overflow: hidden; min-height: 156px; display: flex; align-items: center; background: linear-gradient(120deg, #3b1f8f, #5a35b8); color: #fff; }
.mn-hero > .img-frame { z-index: 0; }
.mn-hero-tint { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(58, 31, 143, 0.95) 0%, rgba(70, 38, 160, 0.86) 45%, rgba(79, 44, 166, 0.55) 100%); }
.mn-wave { position: absolute; left: 0; width: 100%; z-index: 3; display: block; }
.mn-wave-top { top: -1px; height: 16px; fill: #fff; }
.mn-wave-bottom { bottom: -1px; height: 16px; fill: #f6f4fc; }
.mn-hero-row { position: relative; z-index: 4; display: flex; align-items: center; gap: 16px; width: 100%; padding: 26px 20px 28px; }
.mn-logo { flex-shrink: 0; border-radius: 50%; background: #fff; box-shadow: 0 6px 20px rgba(20, 10, 60, 0.22); }
.mn-logo > * { margin: 0 !important; }
.mn-hero-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mn-hero-text strong { font-size: 1.06rem; font-weight: 600; line-height: 1.25; }
.mn-hero-text span { font-size: 0.93rem; font-weight: 400; opacity: 0.95; }

.mn-body { padding: 14px 20px 0; }
.mn-ask { margin: 16px 0 10px; font-size: 1.62rem; line-height: 1.24; font-weight: 700; color: var(--mn-deep); letter-spacing: -0.015em; }
.mn-ask em { font-style: normal; color: var(--mn-soft); }
.mn-lead { margin: 0 0 22px; color: var(--mn-muted); font-size: 0.93rem; line-height: 1.5; }

.mn-choice { position: relative; display: block; min-height: 226px; margin-bottom: 20px; border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; background: linear-gradient(160deg, #fff 35%, #ebe4fb 100%); border: 1px solid #ece7f9; box-shadow: 0 8px 22px rgba(79, 44, 166, 0.08); }
.mn-choice-img { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; z-index: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 22%, #000 45%); }
.mn-choice-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 0 20px 23px; max-width: 58%; min-height: 226px; }
.mn-choice-icon { width: 56px; height: 56px; border-radius: 50%; background: #e7dffb; color: var(--mn-purple); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mn-choice-icon svg { stroke-width: 2.6; }
.mn-choice strong { font-size: 1.5rem; font-weight: 700; color: var(--mn-deep); margin-bottom: 6px; line-height: 1.2; }
.mn-choice-sub { color: var(--mn-muted); font-size: 0.88rem; line-height: 1.45; }
.mn-go { margin-top: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--mn-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.mn-choice .mn-go { margin-top: 14px; }
.mn-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b5a3ee; background: linear-gradient(135deg, #f1edfd, #e2d9fb); }

.mn-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 4px 0 26px; padding: 14px 4px; border-radius: 16px; background: #f1edfb; }
.mn-fact { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.76rem; line-height: 1.3; color: var(--mn-muted); padding: 0 4px; }
.mn-fact + .mn-fact { border-left: 1px solid #dcd4f2; }
.mn-fact-icon { color: var(--mn-purple); display: inline-flex; }
.mn-bye { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 8px; color: #7b5ce0; }
.mn-bye > span { font-family: 'Caveat', 'Segoe Script', 'Brush Script MT', cursive; font-weight: 500; font-size: 1.75rem; transform: rotate(-4deg); }
.mn-deco { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; }
.mn-deco i { display: block; width: 9px; height: 2px; border-radius: 2px; background: #a993ef; }
.mn-deco i:nth-child(1) { transform: rotate(-35deg); }
.mn-deco i:nth-child(3) { transform: rotate(35deg); }
.mn-deco-l { transform: scaleX(-1); }

.mn-nav { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 40; width: 100%; max-width: 480px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 6px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eeebf6; box-shadow: 0 -4px 16px rgba(38, 26, 99, 0.05); }
.mn-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.68rem; color: #8b89a0; text-decoration: none; }
.mn-nav a.on { color: var(--mn-purple); }

.mn-hero-sm { min-height: 120px; background: #ece6fb; color: var(--mn-ink); }
.mn-hero-art { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; z-index: 0; opacity: 0.55; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
.mn-hero-sm::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(236, 230, 251, 0.96) 0%, rgba(236, 230, 251, 0.75) 45%, rgba(236, 230, 251, 0.35) 100%); }
.mn-hero-sm .mn-wave-bottom { height: 20px; }
.mn-hero-sm .mn-hero-row { padding: 18px 18px 26px; gap: 16px; }
.mn-hero-sm .mn-hero-text strong { font-size: 1.45rem; font-weight: 700; color: var(--mn-deep); }
.mn-hero-sm .mn-hero-text span { font-size: 1.08rem; color: var(--mn-ink); opacity: 1; }
.mn-back { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; padding: 9px 15px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: var(--mn-purple); font-size: 0.9rem; font-weight: 500; text-decoration: none; }

.mn-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: 11px; overflow-x: auto; padding: 12px 20px; background: rgba(246, 244, 252, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); scrollbar-width: none; }
.mn-tabs::-webkit-scrollbar { display: none; }
.mn-tabs a { flex-shrink: 0; padding: 10px 16px; border-radius: 999px; background: var(--mn-lilac); color: var(--mn-purple); font-weight: 500; font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
.mn-tabs a.on { background: var(--mn-deep); color: #fff; font-weight: 600; }

.mn-cat { scroll-margin-top: 66px; margin-bottom: 22px; }
.mn-cat h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 6px; font-size: 1.4rem; font-weight: 600; color: var(--mn-ink); }
.mn-cat-sub { margin: 0 0 16px; color: #4d4a66; font-size: 0.82rem; }
.mn-items { display: grid; gap: 14px; }
.mn-item { position: relative; display: grid; grid-template-columns: 116px 1fr; min-height: 118px; width: 100%; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(79, 44, 166, 0.07); }
.mn-item-img { position: relative; display: block; min-height: 118px; border-radius: 14px; overflow: hidden; }
.mn-item-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 40px 12px 16px; min-width: 0; }
.mn-item-body strong { font-size: 0.96rem; font-weight: 500; color: var(--mn-deep); line-height: 1.25; }
.mn-item-desc { color: var(--mn-muted); font-size: 0.76rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-item-body .mn-price { margin-top: auto; padding-top: 2px; }
.mn-price { font-weight: 700; color: var(--mn-deep); font-size: 0.9rem; }
.mn-plus { position: absolute; right: 12px; bottom: 12px; width: 24px; height: 24px; border-radius: 50%; background: var(--mn-deep); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

.mn-sheet { width: 100%; max-width: 480px; margin: auto auto 0; padding: 0; border: 0; border-radius: 24px 24px 0 0; overflow: hidden; background: #fff; color: #261a63; }
.mn-sheet::backdrop { background: rgba(20, 12, 50, 0.55); }
.mn-sheet[open] { animation: mn-up 0.22s ease-out; }
@keyframes mn-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.mn-sheet-img { position: relative; aspect-ratio: 4 / 3; background: #f1edfd; }
.mn-sheet-img .img-frame { z-index: 1; }
.mn-sheet-img[data-has-img] .mn-noimg { display: none; }
.mn-sheet-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #3a1f8f; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.mn-sheet-body { padding: 20px 22px 26px; }
.mn-sheet-body h3 { margin: 0 0 8px; font-size: 1.3rem; font-weight: 700; color: #3a1f8f; }
.mn-sheet-body p { margin: 0 0 16px; color: #67657d; line-height: 1.5; font-size: 0.92rem; }
.mn-sheet-body p:empty { display: none; }
.mn-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mn-sheet-foot .mn-price { font-size: 1.2rem; }
.mn-sheet a.mn-wa, body.branded .mn-sheet a.mn-wa { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: #16a34a; color: #fff; font-weight: 700; text-decoration: none; }

.mn-empty { text-align: center; padding-top: 60px; }
.mn-empty h1 { margin: 16px 0 8px; color: #3a1f8f; }
.mn-empty p { color: var(--mn-muted); }

@media (max-width: 360px) {
  .mn-ask { font-size: 1.45rem; }
  .mn-item { grid-template-columns: 100px 1fr; }
}
@media (min-width: 481px) {
  .mn { box-shadow: 0 0 0 1px #ece8f6; }
}

/* ---- Menú en el panel del dueño ---- */
.mi-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 360px; margin-bottom: 4px; }
.mi-section { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; font-weight: 600; background: #fff; }
.mi-section input { position: absolute; opacity: 0; pointer-events: none; }
.mi-section-icon { width: 34px; height: 34px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.mi-section:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
.mi-section:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.mi-grid { display: grid; grid-template-columns: 2fr 1.3fr 1fr; gap: 12px; }
@media (max-width: 640px) { .mi-grid { grid-template-columns: 1fr 1fr; } .mi-grid .mi-wide { grid-column: 1 / -1; } }
.mi-photo { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 12px; border: 1.5px dashed var(--border); border-radius: 16px; }
.mi-photo-need { border-color: var(--danger); background: var(--danger-light); }
.mi-photo-box, .mi-item-img { position: relative; width: 132px; height: 132px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, #f1edfd, #e2d9fb); }
.mi-photo-box .img-frame, .mi-item-img .img-frame { z-index: 1; }
.mi-photo-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9a86e3; font-size: 0.8rem; font-weight: 600; }
.mi-photo-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; flex: 1; }
.mi-photo-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.mi-alert { display: flex; gap: 10px; align-items: flex-start; background: #fff7ed; border: 1px solid #fed7aa; color: #7c2d12; }
.mi-alert svg { flex-shrink: 0; margin-top: 2px; }
.mi-block { margin-bottom: 24px; }
.mi-section-title { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font-size: 1.25rem; color: var(--primary); }
.mi-section-title small, .mi-cat-title small { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); background: #f1f5f9; border-radius: 999px; padding: 2px 9px; }
.mi-cat-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 1rem; }
.mi-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mi-item { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 12px; box-shadow: var(--shadow); }
.mi-missing { border-color: #fdba74; }
.mi-item-row { display: flex; gap: 12px; }
.mi-item .mi-item-img { width: 88px; height: 88px; border-radius: 12px; }
.mi-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mi-item-text strong { font-size: 1rem; }
.mi-item-text span { color: var(--text-muted); font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mi-item-text b { color: var(--primary); margin-top: auto; }
.mi-missing-bar { display: none; }
.mi-missing .mi-missing-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 12px; background: #fff7ed; }
.mi-missing-bar > span { font-weight: 700; color: #9a3412; font-size: 0.85rem; margin-right: auto; }
.mi-missing-bar .hint { flex-basis: 100%; margin: 0; }
.mi-item-actions { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; flex-wrap: wrap; }
.mi-edit { flex: 1; min-width: 0; }
.mi-edit summary { list-style: none; display: inline-flex; }
.mi-edit summary::-webkit-details-marker { display: none; }
.mi-edit[open] summary { margin-bottom: 10px; }
.mi-edit[open] { flex-basis: 100%; }
.mi-edit[open] ~ form { order: -1; }
.mi-edit .mi-grid { grid-template-columns: 1fr 1fr; }
.mi-edit .mi-grid .mi-wide { grid-column: 1 / -1; }
.mi-item-actions { align-items: center; }
.mi-item-actions > form { margin: 0 0 0 auto; }
.mi-edit[open] ~ form { margin: 0; }
body.branded .mn-nav a, .mn-nav a { color: #8b89a0; }
body.branded .mn-nav a.on, .mn-nav a.on { color: var(--mn-purple); }
body.branded .mn-bell, .mn-bell { color: var(--mn-ink); }
.mn-choice-sub { max-width: 150px; }

/* ---- Video "Cómo funciona" ---- */
button.ov-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }
.video-modal { width: min(1100px, calc(100vw - 24px)); max-width: none; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: #000; }
.video-modal::backdrop { background: rgba(15, 10, 40, 0.75); }
.video-modal video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.video-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #261a63; font-size: 18px; font-weight: 700; cursor: pointer; }
.hours-times select { margin: 0; min-width: 0; flex: 1; padding: 8px 10px; }
.hours-row.is-closed .hours-times select { pointer-events: none; }

/* ---- Reservas: crear, editar y eliminar desde el panel ---- */
.res-grid { display: grid; grid-template-columns: 1.3fr 1fr 0.8fr; gap: 12px; }
@media (max-width: 640px) { .res-grid { grid-template-columns: 1fr 1fr; } .res-grid > div:first-child { grid-column: 1 / -1; } }
.res-client { padding: 12px 14px; border-radius: 12px; background: var(--primary-light); color: var(--primary); }
.res-actions { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap; }
.res-delete summary { list-style: none; }
.res-delete summary::-webkit-details-marker { display: none; }
.res-delete[open] { flex-basis: 100%; }
.res-delete form { margin-top: 8px; min-width: 220px; }
.res-delete textarea { width: 100%; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.checkbox-row input { width: auto; margin: 0; }
.res-dialog { width: min(440px, calc(100vw - 32px)); padding: 20px; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); }
.res-dialog::backdrop { background: rgba(15, 10, 40, 0.45); }
.res-dialog textarea { width: 100%; }
.table-scroll { overflow-x: auto; }
@media (max-width: 720px) { .table-scroll { overflow-x: visible; } }
.res-actions { flex-direction: column; align-items: stretch; }

/* Register / sign-in / visit check after a tap: same banner header as the card */
.plain-main:has(> .pv-gate) { padding: 0 0 40px; justify-content: flex-start; }
.pv-gate { width: 100%; max-width: 480px; display: flex; flex-direction: column; align-items: center; }
.pv-gate .pv-hero { margin: 0; width: 100%; min-height: 250px; border-radius: 24px; }
.pv-gate .pv-hero-content { padding: 64px 20px 26px; }
.pv-gate .auth-box { padding: 22px 20px 0; }

/* ---- Configuración (5 secciones, vista previa y guardado) ---- */
.cfg { --cfg-line: #eef0f4; --cfg-soft: #f4f1fc; }
.cfg label { margin: 0; }
.cfg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cfg-top h1 { margin: 0; font-size: 1.6rem; letter-spacing: -0.02em; }
.cfg-top .subtitle { margin: 4px 0 0; color: var(--text-muted); font-size: 0.92rem; }
.cfg-top-actions { display: flex; align-items: center; gap: 10px; }
.cfg-preview-open { display: inline-flex; align-items: center; gap: 8px; }
.cfg-flash { margin-bottom: 18px; }

.cfg-status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: #f1f5f9; color: #475569; white-space: nowrap; transition: background 0.2s, color 0.2s; }
.cfg-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.cfg-status[data-state="saved"] { background: #ecfdf3; color: #067647; }
.cfg-status[data-state="saved"] .cfg-status-dot { background: #17b26a; }
.cfg-status[data-state="dirty"] { background: #fffaeb; color: #b54708; }
.cfg-status[data-state="dirty"] .cfg-status-dot { background: #f79009; }
.cfg-status[data-state="saving"] { background: var(--primary-light); color: var(--primary-dark); }
.cfg-status[data-state="saving"] .cfg-status-dot { background: var(--primary); animation: cfg-pulse 0.9s ease-in-out infinite; }
.cfg-status[data-state="error"] { background: var(--danger-light); color: var(--danger); }
.cfg-status[data-state="error"] .cfg-status-dot { background: var(--danger); }
@keyframes cfg-pulse { 50% { opacity: 0.3; } }

.cfg-layout { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 28px; align-items: start; }
@media (min-width: 1280px) { .cfg-layout { grid-template-columns: 212px minmax(0, 1fr) 316px; } }

.cfg-nav { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 2px; }
.cfg-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--text) !important; text-decoration: none !important; font-size: 0.9rem; transition: background 0.15s; }
@media (hover: hover) { .cfg-nav-item:hover { background: #f1f5f9; } }
.cfg-nav-item.is-active { background: var(--primary-light); }
.cfg-nav-item.is-active b { color: var(--primary-dark); }
.cfg-nav-item.is-active .cfg-ico { background: var(--primary); color: #fff; }
.cfg-nav-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cfg-nav-text b { font-weight: 600; line-height: 1.25; }
.cfg-nav-text small { display: none; color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.cfg-chev { display: none; color: #a0a7b4; flex-shrink: 0; }
.cfg-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--cfg-soft); color: var(--primary); transition: background 0.15s, color 0.15s; }
.cfg-ico svg { width: 18px; height: 18px; }
.cfg-ico-lg { width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; }
.cfg-ico-lg svg { width: 22px; height: 22px; }

.cfg-main { min-width: 0; container-type: inline-size; }
.cfg-pane:not([hidden]) { animation: cfg-in 0.22s ease-out; }
@keyframes cfg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cfg-pane-head { margin-bottom: 18px; }
.cfg-back { display: none; align-items: center; gap: 2px; margin: 0 0 14px -6px; padding: 6px 8px 6px 2px; border: none; background: none; color: var(--primary); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; border-radius: 8px; }
.cfg-back svg { width: 22px; height: 22px; }
.cfg-pane-title { display: flex; align-items: center; gap: 14px; }
.cfg-pane-title h2 { margin: 0; font-size: 1.3rem; letter-spacing: -0.015em; outline: none; }
.cfg-pane-title p { margin: 3px 0 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.45; }

.cfg-group { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 2px 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.cfg-group-head { padding: 16px 0 12px; }
.cfg-group-head h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.cfg-group-head p { margin: 4px 0 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
.cfg-group-body > .alert { margin: 4px 0 12px; }
.cfg-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--cfg-line); }
.cfg-group-head + .cfg-group-body > .cfg-row:first-child, .cfg-group-body > .cfg-row:first-child { border-top: 1px solid var(--cfg-line); }
.cfg-row.is-block { grid-template-columns: minmax(0, 1fr); }
.cfg-row-text { min-width: 0; padding-top: 2px; }
.cfg-row-text label, .cfg-label { display: block; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text); }
.cfg-row-text p { margin: 3px 0 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.cfg-row-control { min-width: 0; }
.cfg-row-control .hint { margin-top: 6px; }
.cfg input[type="text"], .cfg input[type="email"], .cfg input[type="url"], .cfg input[type="number"], .cfg input[type="time"], .cfg input[type="date"], .cfg input[type="tel"], .cfg textarea, .cfg select { border-radius: 10px; }
.cfg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; font-size: 0.85rem !important; }
.cfg-group .hours-editor { margin: 0; }
@container (max-width: 560px) {
  .cfg-row { grid-template-columns: minmax(0, 1fr); }
}

.cfg-help { border-top: 1px solid var(--cfg-line); padding: 10px 0 14px; }
.cfg-help summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.cfg-help summary::-webkit-details-marker { display: none; }
.cfg-help > div { margin-top: 6px; font-size: 0.84rem; color: var(--text-muted); line-height: 1.55; }

/* Switch rows (tools) */
.cfg-tools { border-top: 1px solid var(--cfg-line); }
.cfg-tool { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--cfg-line); border-radius: 12px; transition: background 0.3s; }
.cfg-tools > .cfg-tool:first-child { border-top: none; }
.cfg-tool.is-flash { animation: cfg-flash 1.6s ease-out; }
@keyframes cfg-flash { 0%, 40% { background: var(--primary-light); box-shadow: 0 0 0 8px var(--primary-light); } 100% { background: transparent; box-shadow: 0 0 0 8px transparent; } }
.cfg-tool-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; cursor: pointer; font-weight: 400; }
.cfg-tool-text label { cursor: pointer; }
.cfg-tool-text b { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.cfg-tool-text small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.cfg-tag { font-style: normal; font-size: 0.7rem; font-weight: 600; color: var(--primary); background: var(--primary-light); padding: 2px 7px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; }
.cfg-switch { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 46px; height: 28px; margin: 0; padding: 0; border: none; border-radius: 999px; background: #d5d7de; position: relative; cursor: pointer; transition: background 0.2s; }
.cfg-switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.3); transition: transform 0.2s ease; }
.cfg-switch:checked { background: var(--primary); }
.cfg-switch:checked::before { transform: translateX(18px); }
.cfg-switch:focus { outline: none; }
.cfg-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cfg-add { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0 16px; border: none; border-top: 1px solid var(--cfg-line); background: none; color: var(--primary); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; text-align: left; }
.cfg-add-ico { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; border: 1.5px dashed #c9bff0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.cfg-subcard { border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; background: var(--bg); }
.cfg-subcard label { margin: 12px 0 6px; font-size: 0.85rem; color: var(--text-muted); }
.cfg-subcard label:first-child { margin-top: 0; }

/* Choice cards (program type, visit validation) */
.cfg-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 0 16px; border-top: 1px solid var(--cfg-line); }
.cfg-group-body > .cfg-choices:first-child { border-top: none; padding-top: 2px; }
.cfg-choice { position: relative; display: block; cursor: pointer; font-weight: 400; }
.cfg-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cfg-choice-body { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; transition: border-color 0.15s, box-shadow 0.15s; }
.cfg-choice-body b { font-size: 0.95rem; color: var(--text); margin-top: 6px; }
.cfg-choice-body small { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.cfg-choice-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--cfg-soft); color: var(--primary); }
.cfg-choice input:checked + .cfg-choice-body { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12); }
.cfg-choice input:checked + .cfg-choice-body .cfg-choice-ico { background: var(--primary); color: #fff; }
.cfg-choice input:focus-visible + .cfg-choice-body { outline: 2px solid var(--primary); outline-offset: 2px; }
@container (max-width: 480px) { .cfg-choices { grid-template-columns: minmax(0, 1fr); } }

/* Tool off: its settings wait behind a note */
.cfg-off { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 16px; border: 1px dashed #d6d0ec; border-radius: 14px; background: #fbfaff; }
.cfg-off > span { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--text-muted); border: 1px solid var(--border); }
.cfg-off p { margin: 0; flex: 1; font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; }
.cfg-off p b { color: var(--text); }

/* Card link, logo and cover */
.cfg-link { display: flex; align-items: center; gap: 18px; padding: 14px 0 16px; border-top: 1px solid var(--cfg-line); }
.cfg-qr { flex-shrink: 0; width: 112px; height: 112px; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.cfg-link-text { min-width: 0; flex: 1; }
.cfg-url { display: block; margin-bottom: 10px; padding: 9px 11px; border-radius: 10px; background: var(--bg); border: 1px solid var(--cfg-line); color: var(--text); font-size: 0.8rem; word-break: break-all; }
.cfg-link .btn-row { gap: 8px; }
@container (max-width: 420px) { .cfg-link { flex-direction: column; align-items: stretch; } .cfg-qr { align-self: center; } }
.cfg-logo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cfg-logo-frame { position: relative; width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #a0a7b4; }
.cfg-logo-frame > .img-frame { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0 !important; }
.cfg-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cfg-banner { padding-top: 16px; border-top: 1px solid var(--cfg-line); max-width: 380px; }
.cfg-banner-empty { height: 150px; border: 1.5px dashed #d6d0ec; border-radius: 14px; background: #fbfaff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 0.82rem; text-align: center; padding: 12px; }
.cfg-banner-actions { margin: 12px 0 0; gap: 8px; }
#banner_status { margin: 8px 0 16px; }
.cfg-range { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cfg-mini { display: flex; flex-direction: column; gap: 5px; font-size: 0.75rem !important; font-weight: 600; color: var(--text-muted) !important; }
.cfg-locate { margin-top: 8px; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.cfg-steps p { margin: 12px 0 0; font-size: 0.84rem; color: var(--text); line-height: 1.55; }
.cfg-code { padding: 9px 11px; border-radius: 10px; background: var(--bg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.74rem !important; color: var(--text-muted) !important; word-break: break-all; }
.cfg-taps { margin: 8px 0 14px; padding-left: 18px; font-size: 0.8rem; color: var(--text-muted); }
.cfg-group .preset-grid { margin-top: 10px; }
.cfg-group [data-proof-panel] > .hint { margin: 0 0 14px; }
.cfg-group .cat-boxes { padding: 14px 0 16px; border-top: 1px solid var(--cfg-line); }

/* Live preview */
.cfg-preview { position: sticky; top: 24px; }
.cfg-preview-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03); }
.cfg-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cfg-preview-head b { display: block; font-size: 0.92rem; }
.cfg-preview-head small { color: var(--text-muted); font-size: 0.78rem; }
.cfg-preview-close { display: none; width: 34px; height: 34px; flex-shrink: 0; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #f1f5f9; color: var(--text); cursor: pointer; }
.cfg-phone { border: 7px solid #15132a; border-radius: 34px; overflow: hidden; background: #f6f4fc; box-shadow: 0 22px 44px -24px rgba(30, 27, 75, 0.45); }
.cfg-pv-scroll { height: 540px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.cfg-pv-scroll::-webkit-scrollbar { display: none; }
.cfg-pv { width: 390px; max-width: none; zoom: 0.7; padding: 12px 16px 20px; }
.cfg-pv .pv-hero { min-height: 270px; margin: -12px -16px 0 !important; border-radius: 0 0 30px 30px !important; }
.cfg-pv [hidden] { display: none !important; }
@media (min-width: 1280px) { .cfg-preview-open { display: none; } }
@media (max-width: 1279px) {
  .cfg-preview { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, 0.45); }
  .cfg-preview.is-open { display: flex; animation: cfg-fade 0.2s ease-out; }
  .cfg-preview-panel { width: min(340px, 100%); max-height: calc(100dvh - 32px); overflow: auto; }
  .cfg-preview-close { display: inline-flex; }
  .cfg-pv-scroll { height: min(560px, calc(100dvh - 150px)); }
}
@keyframes cfg-fade { from { opacity: 0; } to { opacity: 1; } }
html.cfg-lock { overflow: hidden; }

/* Save bar: only while there are changes */
.cfg-savebar { position: fixed; z-index: 70; bottom: 20px; left: calc(230px + (100vw - 230px) / 2); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 230px - 48px); display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 44px -14px rgba(15, 23, 42, 0.35); animation: cfg-up 0.22s ease-out; }
.cfg-savebar-text { margin-right: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text); }
@keyframes cfg-up { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.cfg.has-changes .cfg-main { padding-bottom: 80px; }

/* Tablet and phone: list of sections, then one section per screen */
@media (max-width: 1023px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cfg.is-detail .cfg-nav { display: none; }
  .cfg:not(.is-detail) .cfg-main { display: none; }
  .cfg.is-detail .cfg-top-text, .cfg.is-detail .cfg-flash { display: none; }
  .cfg.is-detail .cfg-top { justify-content: flex-end; margin-bottom: 4px; }
  .cfg-nav { position: static; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
  .cfg-nav-item { gap: 14px; padding: 14px 16px; border-radius: 0; border-top: 1px solid var(--cfg-line); }
  .cfg-nav-item:first-child { border-top: none; }
  .cfg-nav-item.is-active { background: none; }
  .cfg-nav-item.is-active .cfg-ico { background: var(--cfg-soft); color: var(--primary); }
  .cfg-nav-item .cfg-ico { width: 38px; height: 38px; border-radius: 11px; }
  .cfg-nav-text b { font-size: 0.95rem; }
  .cfg-nav-text small { display: block; }
  .cfg-chev { display: inline-flex; }
  .cfg-back { display: inline-flex; }
}
@media (max-width: 720px) {
  .cfg { margin: 0 4px; }
  .cfg-top h1 { font-size: 1.45rem; }
  .cfg-group { padding: 2px 16px; border-radius: 14px; }
  .cfg-pane-title .cfg-ico-lg { width: 40px; height: 40px; }
  .cfg-savebar { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; max-width: none; transform: none; animation-name: cfg-up-m; }
  .cfg-savebar { flex-wrap: wrap; gap: 8px; padding: 10px 12px 12px; }
  .cfg-savebar-text { flex: 0 0 100%; margin: 0 0 2px; font-size: 0.8rem; color: var(--text-muted); text-align: center; }
  .cfg-savebar .btn { flex: 1; justify-content: center; min-height: 42px; }
  .cfg.has-changes .cfg-main { padding-bottom: 120px; }
  @keyframes cfg-up-m { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .cfg *, .cfg-savebar, .cfg-preview { animation: none !important; transition: none !important; }
}

/* ---- Administrar el negocio: Métricas, Ventas y ganancias, Inventario ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mg-violet { --mg: #5b34c4; --mg-soft: #efe9ff; }
.mg-mint { --mg: #12805c; --mg-soft: #e3f6ee; }
.mg-amber { --mg: #b35c00; --mg-soft: #fff1dc; }
.mg-coral { --mg: #c2410c; --mg-soft: #ffe7dd; }
.mg-sky { --mg: #0e6ba8; --mg-soft: #e2f1fb; }
.mg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.mg-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }
.mg-tile-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--mg-soft); color: var(--mg); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.mg-tile-v { font-size: 1.65rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mg-tile-l { margin-top: 4px; font-weight: 600; font-size: 0.92rem; }
.mg-tile-n { margin-top: 2px; color: var(--text-muted); font-size: 0.8rem; }
.mg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.mg-grid-inv { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
.mg-span-2 { grid-column: 1 / -1; }
.mg-card { margin: 0; border-radius: 18px; }
.mg-card h3 { margin: 0 0 4px; }
.mg-card-head p { margin: 0 0 14px; color: var(--text-muted); font-size: 0.9rem; }
.mg-card-head b { color: var(--text); }

/* Barras: una serie, la mejor resaltada; valor al pasar el dedo o el ratón. */
.mg-chart { display: flex; align-items: flex-end; gap: 2px; height: 200px; padding-top: 22px; }
.mg-bar { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; }
.mg-bar-fill { display: block; width: min(100%, 38px); border-radius: 4px 4px 0 0; background: #c9b8f7; transition: background 0.15s; }
.mg-bar.is-top .mg-bar-fill { background: #4f2ca6; }
.mg-bar:hover .mg-bar-fill, .mg-bar:focus-visible .mg-bar-fill { background: #7b5ad9; }
.mg-bar.is-top:hover .mg-bar-fill, .mg-bar.is-top:focus-visible .mg-bar-fill { background: #3d1f93; }
.mg-bar-val { position: absolute; top: -20px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; color: var(--text); }
.mg-bar-label { height: 22px; padding-top: 6px; font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.mg-bar[data-tip]:hover::after, .mg-bar[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% - 10px); left: 50%; transform: translateX(-50%); z-index: 5;
  padding: 6px 10px; border-radius: 8px; background: #1d1d1f; color: #fff; font-size: 0.75rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.mg-ring { --p: 0; width: 170px; height: 170px; margin: 10px auto 4px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(closest-side, var(--surface) 76%, transparent 77%), conic-gradient(#12805c calc(var(--p) * 1%), #e3f6ee 0); }
.mg-ring b { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.mg-ring span { color: var(--text-muted); font-size: 0.82rem; }

.mg-tips h2 { font-size: 1.2rem; margin: 8px 0 12px; }
.mg-tips-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mg-tip { display: flex; gap: 14px; padding: 18px; border-radius: 18px; background: var(--mg-soft); color: var(--text); text-decoration: none; transition: transform 0.15s; }
.mg-tip:hover { transform: translateY(-2px); }
.mg-tip-ic { width: 42px; height: 42px; flex-shrink: 0; border-radius: 13px; background: var(--mg); color: #fff; display: flex; align-items: center; justify-content: center; }
.mg-tip b { display: block; font-size: 1rem; }
.mg-tip p { margin: 4px 0 8px; color: #45405a; font-size: 0.88rem; line-height: 1.45; }
.mg-tip-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.85rem; color: var(--mg); }

.mg-month { display: flex; align-items: center; gap: 10px; }
.mg-month b { min-width: 120px; text-align: center; text-transform: capitalize; }
.mg-month .is-disabled { opacity: 0.35; pointer-events: none; }
.mg-form label { margin-top: 12px; }
.mg-form .btn-block { margin-top: 16px; }
.mg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.mg-cats { margin-top: 20px; }
.mg-cats h4 { margin: 0 0 8px; font-size: 0.9rem; }
.mg-cat { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 0.86rem; }
.mg-cat i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #f0a24a var(--w), #fff1dc var(--w)); }
.mg-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mg-list li { display: grid; grid-template-columns: 52px 1fr auto 30px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.92rem; }
.mg-list li:first-child { border-top: none; }
.mg-day { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mg-what small { display: block; color: var(--text-muted); font-size: 0.78rem; }
.mg-list b { font-variant-numeric: tabular-nums; }
.mg-x { width: 30px; height: 30px; border: none; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mg-x:hover { background: #fee2e2; color: #b91c1c; }

.mg-prods { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.mg-prod { border-radius: 14px; background: #f8f7fc; }
.mg-prod.is-low { background: #fff5ef; }
.mg-prod summary { list-style: none; display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; }
.mg-prod summary::-webkit-details-marker { display: none; }
.mg-prod-name small, .mg-prod-price small, .mg-stock small { display: block; color: var(--text-muted); font-size: 0.75rem; font-weight: 500; }
.mg-prod-price { text-align: right; font-weight: 600; }
.mg-stock { min-width: 74px; text-align: center; padding: 6px 10px; border-radius: 12px; background: #e3f6ee; color: #12805c; font-weight: 800; font-size: 1.05rem; }
.mg-stock.is-low { background: #ffe7dd; color: #c2410c; }
.mg-stock.is-low small { color: #c2410c; }
.mg-prod-body { padding: 0 16px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-prod-body .mg-edit, .mg-prod-body > form:last-child { grid-column: 1 / -1; }
.mg-inline label { margin-top: 0; }
.mg-inline-row { display: flex; gap: 8px; }
.mg-inline-row input { flex: 1; min-width: 0; }

@media (max-width: 900px) {
  .mg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-grid, .mg-grid-inv, .mg-tips-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mg-tile { padding: 14px; }
  .mg-tile-v { font-size: 1.3rem; }
  .mg-chart { height: 170px; }
  .mg-bar-label { font-size: 0.62rem; }
  .mg-row-3 { grid-template-columns: 1fr 1fr; }
  .mg-prod-body { grid-template-columns: 1fr; }
  .mg-list li { grid-template-columns: 44px 1fr auto 30px; }
}
.mg-month-sum { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 16px; }
.mg-month-sum div { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--mg-soft); }
.mg-month-sum span { font-weight: 600; color: #45405a; }
.mg-month-sum b { font-size: 1.2rem; color: var(--mg); font-variant-numeric: tabular-nums; }

/* ---- Inventario: pestañas, insumos y recetas (management-views.js) ---- */
.mg-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 14px; background: #efecf7; }
.mg-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 11px; color: var(--text-muted); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.mg-tab:hover { color: var(--text); }
.mg-tab[aria-current="page"] { background: var(--surface); color: #4f2ca6; box-shadow: 0 1px 2px rgba(36, 17, 79, 0.08), 0 4px 12px -6px rgba(36, 17, 79, 0.2); }
.mg-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.mg-kind-opt { margin: 0 !important; cursor: pointer; }
.mg-kind-opt input { position: absolute; opacity: 0; pointer-events: none; }
.mg-kind-opt span { display: block; height: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; color: var(--text-muted); transition: border-color 0.15s, background 0.15s; }
.mg-kind-opt span svg { color: #8b7cc4; }
.mg-kind-opt b { display: block; margin-top: 6px; color: var(--text); font-size: 0.92rem; }
.mg-kind-opt small { display: block; margin-top: 2px; font-size: 0.76rem; line-height: 1.35; }
.mg-kind-opt input:checked + span { border-color: #5b34c4; background: #f6f3fe; }
.mg-kind-opt input:checked + span svg { color: #5b34c4; }
.mg-kind-opt input:focus-visible + span { outline: 2px solid #5b34c4; outline-offset: 2px; }
.mg-h-gap { margin-top: 22px !important; }
.mg-recipe-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: #f6f3fe; color: var(--text); text-decoration: none; font-size: 0.85rem; line-height: 1.4; }
.mg-recipe-cta > svg:first-child { flex-shrink: 0; color: #5b34c4; }
.mg-recipe-cta b { display: block; font-size: 0.92rem; }
.mg-recipe-cta span { flex: 1; color: var(--text-muted); }
.mg-recipe-cta:hover { background: #ece5fc; }
.mg-reach { padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.mg-reach h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 8px; font-size: 0.86rem; color: #4f2ca6; }
.mg-reach ul { list-style: none; margin: 0; padding: 0; }
.mg-reach li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.mg-reach li:first-child { border-top: none; }
.mg-reach li small { display: block; color: var(--text-muted); font-size: 0.75rem; }
.mg-reach li b { min-width: 44px; padding: 4px 10px; border-radius: 10px; background: #f6f3fe; color: #4f2ca6; text-align: center; font-variant-numeric: tabular-nums; }
.mg-reach li:first-child b { background: #5b34c4; color: #fff; }
.mg-reach-days { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--text-muted); font-size: 0.82rem; }
.mg-reach-days b { color: var(--text); }

.rc-editor textarea { width: 100%; resize: vertical; }
.rc-ai { margin-top: 16px; padding: 16px; border-radius: 16px; background: #f6f3fe; }
.rc-ai-head b { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; color: #24114f; }
.rc-ai-head span { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.82rem; }
.rc-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 12px 0; padding: 4px; border-radius: 12px; background: #ece5fc; }
.rc-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px; border: none; border-radius: 9px; background: transparent; color: #5a4e86; font: inherit; font-weight: 600; font-size: 0.86rem; cursor: pointer; }
.rc-modes button[aria-selected="true"] { background: var(--surface); color: #4f2ca6; box-shadow: 0 1px 2px rgba(36, 17, 79, 0.1); }
.rc-pane textarea { background: var(--surface); }
.rc-pane .btn { margin-top: 10px; }
.rc-mic { position: relative; display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin: 6px auto 8px; border: none; border-radius: 50%; background: #5b34c4; color: #fff; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(91, 52, 196, 0.7); }
.rc-mic .rc-mic-stop { display: none; }
.rc-mic.is-recording { background: #24114f; animation: rc-pulse 1.4s ease-in-out infinite; }
.rc-mic.is-recording .rc-mic-ic { display: none; }
.rc-mic.is-recording .rc-mic-stop { display: flex; }
@keyframes rc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 52, 196, 0.45); } 50% { box-shadow: 0 0 0 14px rgba(91, 52, 196, 0); } }
.rc-mic-text { margin: 0; text-align: center; color: var(--text-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.rc-photo { display: flex !important; align-items: center; gap: 14px; margin: 0 !important; padding: 16px; border: 1.5px dashed #c9bef0; border-radius: 14px; background: var(--surface); color: #5b34c4; cursor: pointer; }
.rc-photo span { color: var(--text-muted); font-size: 0.82rem; font-weight: 400; }
.rc-photo b { display: block; color: var(--text); font-size: 0.92rem; }
.rc-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rc-photo:focus-within { outline: 2px solid #5b34c4; outline-offset: 2px; }
.rc-status { margin: 10px 0 0; font-size: 0.85rem; color: #4f2ca6; }
.rc-status:empty { display: none; }
.rc-status.is-error { color: #b91c1c; }
.rc-status.is-busy::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border: 2px solid #c9bef0; border-top-color: #5b34c4; border-radius: 50%; animation: rc-spin 0.8s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-list { margin-top: 18px; }
.mg-grid-rec { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 1100px) { .mg-grid-rec { grid-template-columns: 1fr; } }
.rc-list-head, .rc-row { display: grid; grid-template-columns: minmax(0, 1fr) 84px 88px 30px; gap: 8px; align-items: center; }
.rc-list-head { padding: 0 2px 6px; color: var(--text-muted); font-size: 0.76rem; font-weight: 600; }
.rc-row { margin-bottom: 8px; }
.rc-row input, .rc-row select { margin: 0; min-width: 0; }
.rc-row.is-new [data-rc-name] { border-color: #c9bef0; }
.rc-row.is-fresh { animation: rc-in 0.4s ease; }
@keyframes rc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rc-add { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: none; background: none; color: #5b34c4; font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer; }
.rc-yield { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.88rem; color: var(--text-muted); }
.rc-yield label { margin: 0 !important; }
.rc-yield input { width: 72px; margin: 0; text-align: center; }
.rc-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #8a5300; font-size: 0.84rem; }
.rc-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rc-card { border-radius: 14px; background: #f8f7fc; }
.rc-card.is-low { background: #fff5ef; }
.rc-card > summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; cursor: pointer; }
.rc-card > summary::-webkit-details-marker { display: none; }
.rc-card-name small { display: block; margin-top: 2px; color: var(--text-muted); font-size: 0.78rem; }
.rc-card-body { padding: 0 16px 16px; }
.rc-limit { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: 0.84rem; color: var(--text-muted); }
.rc-limit svg { color: #c2410c; flex-shrink: 0; }
.rc-limit b { color: var(--text); }
.rc-items { list-style: none; margin: 0 0 10px; padding: 4px 14px; border-radius: 12px; background: var(--surface); }
.rc-items li { display: grid; grid-template-columns: 1fr auto 76px; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.rc-items li:first-child { border-top: none; }
.rc-items li span:last-child { text-align: right; color: var(--text-muted); }
.rc-edit { margin: 4px 0 12px; }
.rc-edit > summary { display: inline-flex; align-items: center; gap: 6px; color: #5b34c4; font-weight: 600; font-size: 0.88rem; cursor: pointer; list-style: none; }
.rc-edit > summary::-webkit-details-marker { display: none; }
.rc-edit[open] > summary { margin-bottom: 4px; }
.rc-empty { padding: 28px 18px; text-align: center; color: var(--text-muted); }
.rc-empty svg { color: #b3a6e6; }
.rc-empty b { display: block; margin-top: 8px; color: var(--text); }
.rc-empty p { margin: 6px auto 0; max-width: 34ch; font-size: 0.88rem; }
@media (max-width: 640px) {
  .mg-tabs { display: flex; }
  .mg-tab { flex: 1; justify-content: center; }
  .rc-list-head, .rc-row { grid-template-columns: minmax(0, 1fr) 68px 76px 28px; gap: 6px; }
  .mg-kind-opt small { display: none; }
  .mg-kind-opt span { padding: 10px 12px; }
}

/* ---- Registro: ¿qué quieres lograr? (goal-views.js) ---- */
.og-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.og-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 150px; margin: 0; padding: 18px; border: 1px solid #e6e0f5; border-radius: 18px; background: #fff; cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.og-card input { position: absolute; opacity: 0; pointer-events: none; }
.og-card .og-ic { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: #f1ecfd; color: var(--lp-purple); margin-bottom: 6px; }
.og-card b { font-size: 1.02rem; color: var(--lp-ink); line-height: 1.25; }
.og-card > span:last-child { font-size: 0.86rem; color: var(--lp-muted); line-height: 1.4; }
.og-card:hover { border-color: #cdbff3; }
.og-card:has(input:checked) { border: 1.5px solid var(--lp-purple); background: #f7f3ff; box-shadow: 0 10px 24px -16px rgba(79, 44, 166, 0.55); }
.og-card:has(input:focus-visible) { outline: 3px solid rgba(79, 44, 166, 0.3); outline-offset: 2px; }
.og-benefits { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.og-benefits li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #ece7f8; font-size: 0.94rem; color: var(--lp-muted); line-height: 1.45; }
.og-benefits li svg { flex-shrink: 0; color: var(--lp-purple); margin-top: 1px; }
.og-benefits b { color: var(--lp-ink); }
.og-q { border: none; margin: 0 0 18px; padding: 0; }
.og-q legend { font-weight: 700; color: var(--lp-ink); margin-bottom: 10px; font-size: 1rem; }
.og-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.og-pill { margin: 0; cursor: pointer; }
.og-pill input { position: absolute; opacity: 0; pointer-events: none; }
.og-pill span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid #e1dbf3; background: #fff; font-size: 0.92rem; font-weight: 600; color: var(--lp-ink); }
.og-pill input:checked + span { border-color: var(--lp-purple); background: #efe9fd; color: var(--lp-purple); }
.og-pill input:focus-visible + span { outline: 3px solid rgba(79, 44, 166, 0.3); outline-offset: 2px; }
.og-also { display: flex; gap: 12px; align-items: flex-start; margin: 8px 0 0; padding: 16px; border-radius: 16px; border: 1px dashed #d9cff5; background: #fbf9ff; cursor: pointer; }
.og-also input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--lp-purple); flex-shrink: 0; }
.og-also b { display: block; color: var(--lp-ink); font-size: 0.95rem; }
.og-also small { display: block; color: var(--lp-muted); font-size: 0.84rem; margin-top: 2px; }
@media (max-width: 480px) {
  .og-grid { grid-template-columns: 1fr; }
  .og-card { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .og-card .og-ic { margin: 0; }
  .og-card b { flex: 1; }
  .og-card > span:last-child { flex-basis: 100%; }
}

/* ---- Equipo (team-views.js) ---- */
.tm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tm-card { margin: 0; border-radius: 18px; }
.tm-card h3 { margin: 0 0 6px; }
.tm-list { list-style: none; margin: 10px 0 0; padding: 0; }
.tm-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.tm-row:first-child { border-top: none; }
.tm-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #efeafb; color: #4f2ca6; font-weight: 700; font-size: 0.9rem; }
.tm-avatar.is-owner { background: #4f2ca6; color: #fff; }
.tm-who b { display: block; font-size: 0.95rem; }
.tm-who small { display: block; color: var(--text-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.tm-perm-line { display: block; margin-top: 3px; font-size: 0.8rem; color: #5b4f86; }
.tm-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tm-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 14px; }
.tm-preset { text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: #fbfaff; cursor: pointer; font: inherit; }
.tm-preset b { display: block; font-size: 0.88rem; color: var(--text); }
.tm-preset span { display: block; font-size: 0.76rem; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.tm-preset:hover, .tm-preset.is-on { border-color: #4f2ca6; background: #f3effd; }
.tm-perms { border: 1px solid var(--border); border-radius: 14px; padding: 6px 14px 10px; margin: 0 0 12px; }
.tm-perms legend { padding: 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.tm-perm { display: flex; gap: 12px; align-items: flex-start; margin: 0 !important; padding: 10px 0; border-top: 1px solid #f0eef6; cursor: pointer; }
.tm-perm:first-of-type { border-top: none; }
.tm-perm input { margin-top: 3px; width: 18px; height: 18px; accent-color: #4f2ca6; flex-shrink: 0; }
.tm-perm b { display: block; font-size: 0.92rem; color: var(--text); }
.tm-perm em { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fff1dc; color: #b35c00; font-style: normal; font-size: 0.7rem; font-weight: 700; vertical-align: 1px; }
.tm-perm small { display: block; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.tm-invite { margin: 0 0 16px; padding: 16px; border-radius: 16px; background: #f6f3fe; border: 1px solid #e3dbfa; }
.tm-invite-head { display: flex; gap: 12px; align-items: flex-start; color: #4f2ca6; }
.tm-invite-head b { display: block; color: var(--text); }
.tm-invite-head span { display: block; font-size: 0.84rem; color: var(--text-muted); }
.tm-invite input { margin: 12px 0 10px; font-size: 0.86rem; background: #fff; }
.tm-invite-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-action { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); margin: 0; }
.tm-action:first-of-type { border-top: none; }
.tm-action b { display: block; font-size: 0.92rem; }
.tm-action span { display: block; font-size: 0.8rem; color: var(--text-muted); }
.tm-action.is-danger b { color: var(--danger); }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; }
.sidebar nav a.nav-app { background: #f6f3fe; color: #4f2ca6; font-weight: 600; }
.sidebar nav a.nav-app svg { color: #4f2ca6; }
@media (max-width: 900px) { .tm-grid { grid-template-columns: 1fr; } }
.tm-perm, .tm-perm small { font-weight: 400; }

/* ---- Mis negocios: una cuenta en varios negocios (/negocios y el menú) ---- */
.bz-avatar { display: inline-flex; flex-shrink: 0; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: #efeafb; color: #4f2ca6; font-size: 0.78rem; font-weight: 700; }
.bz-avatar.is-own { background: #4f2ca6; color: #fff; }
.bz-avatar.is-sm { width: 28px; height: 28px; border-radius: 8px; font-size: 0.7rem; }
.bz-text { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.bz-text b { font-size: 0.88rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-text small { font-size: 0.75rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-current { padding: 8px 12px; font-size: 0.82rem; color: var(--text-muted); }
.bz-current b { display: block; color: var(--text); font-weight: 600; }
.bz-current span { display: block; font-size: 0.76rem; }
.bz-switch { position: relative; margin-bottom: 4px; }
.bz-switch > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border); background: #fff; }
.bz-switch > summary::-webkit-details-marker { display: none; }
.bz-switch > summary:hover { border-color: #d9cff5; }
.bz-switch > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.bz-switch > summary > svg { margin-left: auto; flex-shrink: 0; color: var(--text-muted); transform: rotate(-90deg); transition: transform 0.15s; }
.bz-switch[open] > summary > svg { transform: rotate(90deg); }
.bz-dot { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; align-items: center; justify-content: center; border-radius: 999px; background: #e0473b; color: #fff; font-size: 0.68rem; font-weight: 700; }
.bz-menu { position: absolute; z-index: 30; left: 0; right: 0; bottom: calc(100% + 6px); display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px -18px rgba(36, 17, 79, 0.45); }
.bz-menu-label { padding: 6px 8px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.bz-menu form { margin: 0; }
.bz-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: none; border-radius: 10px; background: none; font: inherit; cursor: pointer; }
.bz-menu button:hover, .bz-menu a:hover { background: #f3effd; text-decoration: none; }
.bz-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 10px; font-size: 0.85rem; font-weight: 600; }
.bz-menu .bz-invites { color: #c2410c; }
.bz-menu .bz-all { border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; margin-top: 4px; }
.bz-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.bz-title svg { color: var(--primary); }
.bz-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bz-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.bz-item.is-current { border-color: #cdbff3; background: #faf8ff; }
.bz-item.is-invite { border-style: dashed; border-color: #d9cff5; background: #fbf9ff; }
.bz-item form { margin: 0; }
.bz-actions { display: flex; gap: 6px; }
.bz-out { margin-top: 18px; }
@media (max-width: 480px) {
  .bz-item.is-invite { grid-template-columns: auto minmax(0, 1fr); }
  .bz-item.is-invite .bz-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 720px) {
  .sidebar-footer { display: flex; align-items: center; gap: 4px; }
  .bz-current { display: none; }
  .bz-switch { position: static; margin: 0; }
  .bz-switch > summary { padding: 4px; border: none; }
  .bz-switch > summary .bz-text, .bz-switch > summary > svg { display: none; }
  .bz-menu { position: fixed; top: 60px; left: auto; right: 12px; bottom: auto; width: 250px; }
}