/* Sistema visual basado en la referencia local de B2VIP. */
:root {
  --b2-brand-50: #eef7ff;
  --b2-brand-100: #d9eaff;
  --b2-brand-200: #bcdaff;
  --b2-brand-500: #2d76ff;
  --b2-brand-600: #1856f5;
  --b2-brand-700: #1442dd;
  --b2-brand-950: #0f1f55;
  --b2-accent: #ff3d6e;
  --b2-ink: #0f172a;
  --b2-copy: #475569;
  --b2-muted: #64748b;
  --b2-line: #e2e8f0;
  --b2-panel: #f8fafc;
  --ops-primary: #1856f5;
  --ops-primary-dark: #0f1f55;
  --ops-accent: #ff3d6e;
  --ops-ink: #0f172a;
  --ops-surface: #eef7ff;
}

body, button, input, select, textarea, .storefront-body, .ops-body, .access-body, .dossier-body, .brand-preview-page { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { color: var(--b2-ink); }

/* Storefront: encabezado compacto, hero claro y componentes B2VIP. */
.storefront-body { background: #fff; }
.storefront-header { border-bottom: 1px solid #24366f; background: var(--b2-brand-950); box-shadow: none; }
.storefront-header-inner { max-width: 1280px; min-height: 68px; padding: 0 24px; }
.storefront-logo-image { width: 164px; height: 36px; }
.storefront-logo-image img { max-height: 36px; }
.storefront-nav { gap: 20px; }
.storefront-nav a { color: #d9eaff; font-size: .875rem; font-weight: 500; letter-spacing: 0; }
.storefront-nav a:hover { color: #fff; }
.storefront-header-cta, .storefront-cta { min-height: 40px; border: 0; border-radius: 999px; background: var(--b2-brand-600); color: #fff; font-size: .875rem; font-weight: 600; letter-spacing: 0; padding: 0 20px; box-shadow: 0 1px 2px #00000024; }
.storefront-header-cta:hover, .storefront-cta:hover { background: var(--b2-brand-700); color: #fff; }
.storefront-main { max-width: 1280px; padding: 0 24px 36px; }
.storefront-hero { min-height: 148px; margin: 0 calc(50% - 50vw); padding: 28px max(24px, calc((100vw - 1232px) / 2)); background: linear-gradient(180deg, var(--b2-brand-50), #fff); }
.storefront-hero-copy { width: min(790px, 100%); }
.storefront-hero .eyebrow { color: var(--b2-brand-700); font-size: .75rem; font-weight: 600; letter-spacing: 0; }
.storefront-hero h1 { max-width: 760px; color: var(--b2-ink); font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.06; }
.storefront-hero .hero-copy { color: var(--b2-copy); font-size: 1rem; line-height: 1.5; }
.app-shell { grid-template-columns: minmax(0, 1.62fr) 360px; gap: 16px; height: calc(100vh - 222px); min-height: 560px; margin-top: 16px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.plans-panel, .chat-panel { overflow: hidden; border: 1px solid var(--b2-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px #0f172a0d; }
.plans-panel { padding: 20px; }
.section-label { color: var(--b2-brand-700); font-size: .75rem; font-weight: 600; letter-spacing: 0; }
.catalog-tools { padding: 11px 0 15px; border-bottom-color: var(--b2-line); }
.catalog-tools label { color: var(--b2-muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.catalog-tools select, .catalog-tools button { min-height: 38px; border-color: #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font-size: .82rem; font-weight: 500; }
.catalog-tools button { background: #fff; font-weight: 600; }
.catalog-tools button:hover { border-color: #94a3b8; background: #f8fafc; }
.catalog-tools p { color: var(--b2-muted); font-size: .75rem; }
.plans { gap: 12px; padding-top: 15px; }
.plan-group { gap: 8px; }
.plan-group h3 { min-height: auto; color: var(--b2-muted); font-size: .72rem; font-weight: 600; letter-spacing: 0; }
.plan-card { min-height: 0; border-color: var(--b2-line); border-radius: 14px; padding: 12px; background: #fff; box-shadow: 0 1px 2px #0f172a0b; }
.plan-card:hover { border-color: #94a3b8; background: #fff; box-shadow: 0 4px 8px #0f172a12; }
.plan-card.selected { border: 1px solid var(--ops-primary); background: var(--b2-brand-50); box-shadow: 0 0 0 1px var(--ops-primary); }
.plan-card span { color: var(--b2-brand-700); font-size: .62rem; font-weight: 600; }
.plan-card strong { margin: 4px 0; color: var(--b2-ink); font-size: .95rem; font-weight: 700; line-height: 1.15; }
.plan-card b { color: var(--b2-ink); font-size: 1.28rem; font-weight: 800; letter-spacing: -.04em; }
.plan-card b small { color: var(--b2-muted); font-size: .63rem; font-weight: 400; }
.plan-card p, .plan-card em, .plan-card i { color: var(--b2-copy); font-size: .62rem; line-height: 1.38; }
.plan-card em { color: #334155; }
.fine-print { color: var(--b2-muted); font-size: .65rem; }
.chat-panel { display: flex; flex-direction: column; align-self: center; height: calc(100% - 24px); margin: 12px 0; background: #fff; }
.agent-heading { min-height: 64px; padding: 14px 16px; border-bottom: 1px solid var(--b2-line); background: var(--b2-brand-600); }
.agent-heading .avatar { width: 34px; height: 34px; border: 0; background: #fff; color: var(--b2-brand-600); font-size: .82rem; }
.agent-heading strong { font-size: .875rem; }
.agent-heading span { color: var(--b2-brand-100); font-size: .7rem; }
.chat { justify-content: flex-start; gap: 10px; padding: 14px; background: #fff; }
.chat:has(.bubble:nth-child(2)), .chat:has(.recommended-plans) { justify-content: flex-start; }
.bubble { max-width: 85%; border-radius: 12px; font-size: .8rem; line-height: 1.48; }
.bubble.assistant { border: 0; background: #f1f5f9; color: #1e293b; box-shadow: none; }
.bubble.user { background: var(--b2-brand-600); }
.composer { padding: 12px; border-top-color: var(--b2-line); }
.composer input { border-color: #cbd5e1; border-radius: 8px; color: #334155; font-size: .8rem; }
.composer button { min-height: 38px; border-radius: 8px; background: var(--b2-brand-600); font-size: .78rem; font-weight: 600; }
.composer button:hover { background: var(--b2-brand-700); }
.recommended-plan { border-color: var(--b2-line); border-radius: 12px; }
.recommended-plan:hover { border-color: var(--b2-brand-600); }
.recommended-plan span, .recommended-plan i { color: var(--b2-brand-700); }
.request { border-radius: 16px; background: linear-gradient(135deg, var(--b2-brand-950), #19358c); box-shadow: none; }
.request .eyebrow, .request strong { color: var(--b2-brand-200); }
.lead-form button { border-radius: 999px; color: var(--b2-brand-700); font-size: .85rem; }
.storefront-footer { color: var(--b2-muted); font-size: .75rem; }
.storefront-footer a { color: var(--b2-brand-600); }

/* Aplicación interna con la misma escala B2VIP. */
.access-body, .dossier-body { background: linear-gradient(180deg, var(--b2-brand-950) 0 182px, #fff 182px); }
.access-card, .dossier-form section, .documents-section { border-color: var(--b2-line); border-radius: 16px; box-shadow: 0 1px 3px #0f172a14; }
.access-card h1, .dossier-heading h1, .dossier-form h2, .documents-section h2 { color: var(--b2-ink); }
.dossier-heading h1 { color: #fff; }
.access-card .eyebrow, .eyebrow { color: var(--b2-brand-700); }
.access-form button, .ine-reader button, .dossier-form > button, .nip-form button { border-radius: 999px; background: var(--b2-brand-600); font-size: .85rem; }
.ops-body, .ops-shell { background: var(--b2-panel); }
.ops-sidebar { background: var(--b2-brand-950); box-shadow: none; }
.ops-topbar { min-height: 68px; border-bottom-color: var(--b2-line); background: #fff; }
.ops-brand-mark { width: 164px; }
.ops-nav a { border-radius: 8px; color: #cbd5e1; font-size: .82rem; font-weight: 500; }
.ops-nav a.active { color: var(--b2-brand-950); }
.ops-main { max-width: 1440px; padding-top: 32px; }
.ops-heading h1 { color: var(--b2-ink); font-weight: 800; letter-spacing: -.045em; }
.ops-heading > div > p:not(.eyebrow) { color: var(--b2-copy); font-size: .9rem; }
.admin-actions button, .brand-form button, .brand-edit-form button, .brand-access-form button, .integration-form button, .user-form button, .user-edit-form button, .activity-form button, .save, .history { border-radius: 999px; background: var(--b2-brand-600); font-size: .82rem; font-weight: 600; }
.admin-actions button:hover, .brand-form button:hover, .brand-edit-form button:hover, .brand-access-form button:hover, .integration-form button:hover, .user-form button:hover, .user-edit-form button:hover, .activity-form button:hover, .save:hover, .history:hover { background: var(--b2-brand-700); }
.admin-actions .secondary-button { border-color: var(--b2-line); color: #334155; }
.metric-card, .data-section, .integration-card, .crm-filter-card, .customer-profile-card, .next-action-card, .master-guide, .master-create, .master-directory, .new-user-panel, .security-panel, .brand-card { border-color: var(--b2-line); border-radius: 16px; box-shadow: 0 1px 3px #0f172a0d; }
.metric-card::before { background: var(--b2-brand-600); }
.metric-card strong, .section-topline h2, .data-section h2, .master-guide h2, .master-create h2, .master-directory h2, .new-user-panel h2, .security-panel h2 { color: var(--b2-ink); }
.metric-card p, .metric-card small, .section-topline > p, .section-topline > div + p { color: var(--b2-muted); }
.zom-brand-banner, .user-brand-banner { border-radius: 16px; background: linear-gradient(135deg, var(--b2-brand-600), var(--b2-brand-800, #1638b2)); box-shadow: none; }
.brand-profile-fields, .theme-fields, .module-checks { border-color: var(--b2-line); background: #fff; }
.brand-profile-fields legend, .theme-fields legend, .module-checks legend { color: var(--b2-brand-700); }
.role-card { border-color: var(--b2-line); border-radius: 14px; box-shadow: 0 1px 2px #0f172a0b; }
.role-card:before { background: var(--b2-brand-600); }
.security-panel { background: var(--b2-brand-50); }
.store-header { background: var(--b2-brand-950); }
.store-hero { background-image: linear-gradient(90deg, #0f1f55ec, #19358ccd 55%, #19358c80), var(--hero-image, url('/assets/brand/zom-shopify-banner-desktop.jpg')); }
.store-cta, .preview-plan-card button { border-radius: 999px; background: var(--preview-primary); }
.preview-plan-card { border-color: var(--b2-line); }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr) 330px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .storefront-header-inner { padding: 0 18px; }
  .storefront-hero { min-height: 180px; padding: 32px 22px; }
  .app-shell { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .plans-panel { overflow: visible; }
  .chat-panel { height: 470px; margin: 0; }
}
@media (max-width: 560px) {
  .storefront-logo-image { width: 144px; }
  .storefront-hero h1 { font-size: 2.1rem; }
  .storefront-hero .hero-copy { font-size: .9rem; }
  .plans { grid-template-columns: 1fr; }
  .plan-card { padding: 14px; }
  .catalog-tools select, .catalog-tools button { font-size: .8rem; }
}

/* Catálogo principal: composición y jerarquía de la vista de planes B2VIP. */
.storefront-main { width: min(100%, 1280px); max-width: none; padding: 0 28px 48px; }
.catalog-page { padding: 32px 0 8px; }
.catalog-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.catalog-heading h1 { margin: 0; color: var(--b2-ink); font-size: clamp(2rem, 3vw, 2.35rem); font-weight: 800; letter-spacing: -.052em; line-height: 1.05; }
.catalog-heading p { margin: 10px 0 0; color: #475569; font-size: .92rem; line-height: 1.4; }
.view-toggle { display: inline-flex; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--b2-line); border-radius: 9px; background: #fff; padding: 3px; box-shadow: 0 1px 2px #0f172a08; }
.view-toggle button { border: 0; border-radius: 6px; background: transparent; color: #475569; padding: 7px 10px; font-size: .75rem; font-weight: 500; cursor: default; }
.view-toggle button.active { background: var(--b2-brand-50); color: var(--b2-brand-700); font-weight: 600; }
.view-toggle button:disabled { opacity: 1; }
.offers-banner { display: flex; align-items: center; gap: 13px; margin: 22px 0 30px; border: 1px solid #a9d2ff; border-radius: 12px; background: linear-gradient(90deg, #eef7ff, #d9eaff); color: var(--b2-brand-700); padding: 15px 20px; text-decoration: none; }
.offers-banner:hover { border-color: var(--b2-brand-500); }
.offer-gift { flex: 0 0 auto; font-size: 1.35rem; }
.offers-banner span:nth-child(2) { display: grid; gap: 2px; }
.offers-banner strong { color: #19358c; font-size: .86rem; }
.offers-banner small { color: var(--b2-brand-700); font-size: .72rem; }
.offers-banner b { margin-left: auto; flex: 0 0 auto; color: var(--b2-brand-600); font-size: .82rem; }
.catalog-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: start; gap: 32px; }
.plans-sidebar { display: grid; gap: 25px; padding-top: 1px; }
.plan-search-label { display: grid; gap: 8px; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.plan-search-label input { width: 100%; height: 38px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; padding: 0 12px; font: inherit; font-size: .82rem; outline: none; text-transform: none; }
.plan-search-label input::placeholder { color: #94a3b8; }
.plan-search-label input:focus { border-color: var(--b2-brand-500); box-shadow: 0 0 0 3px #2d76ff18; }
.filter-group { display: grid; gap: 3px; }
.filter-group h2 { margin: 0 0 6px; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.filter-group button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 29px; border: 0; border-radius: 5px; background: transparent; color: #475569; padding: 5px 8px; font-size: .83rem; font-weight: 500; text-align: left; cursor: pointer; }
.filter-group button:hover:not(:disabled) { background: #f1f5f9; color: var(--b2-brand-700); }
.filter-group button.active { background: var(--b2-brand-50); color: var(--b2-brand-700); font-weight: 650; }
.filter-group button span { color: #64748b; font-size: .72rem; font-weight: 500; }
.filter-group button.active span { color: var(--b2-brand-700); }
.filter-group button:disabled { cursor: default; opacity: .7; }
.clear-catalog-filters { width: max-content; border: 0; background: transparent; color: var(--b2-brand-600); padding: 0; font-size: .78rem; font-weight: 500; cursor: pointer; }
.clear-catalog-filters:hover { color: var(--b2-brand-700); text-decoration: underline; }
.catalog-results { min-width: 0; }
.catalog-results > #catalog-count { margin: 0 0 17px; color: #64748b; font-size: .82rem; }
.catalog-results .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; padding: 0; }
.catalog-results .plan-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 287px; border: 1px solid var(--b2-line); border-radius: 16px; background: #fff; color: var(--b2-ink); padding: 20px; text-align: left; box-shadow: 0 1px 2px #0f172a0a; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.catalog-results .plan-card:hover { border-color: #b9c6d7; background: #fff; box-shadow: 0 7px 17px #0f172a0d; transform: translateY(-1px); }
.catalog-results .plan-card.selected { border-color: var(--b2-brand-600); background: #f8fbff; box-shadow: 0 0 0 1px var(--b2-brand-600), 0 7px 17px #1856f512; }
.catalog-results .plan-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.catalog-results .plan-chips span { display: inline-flex; align-items: center; min-height: 21px; border-radius: 999px; background: #f1f5f9; color: #475569; padding: 0 8px; font-size: .58rem; font-weight: 650; letter-spacing: .035em; line-height: 1; }
.catalog-results .plan-chips span:last-child { background: var(--b2-brand-50); color: var(--b2-brand-700); }
.catalog-results .plan-card > strong { display: block; margin: 0 0 15px; color: var(--b2-ink); font-size: 1.04rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.catalog-results .plan-card > b { display: block; margin: 0 0 14px; color: var(--b2-ink); font-size: 1.92rem; font-weight: 800; letter-spacing: -.052em; line-height: .9; }
.catalog-results .plan-card > b small { margin-left: 3px; color: #64748b; font-size: .74rem; font-weight: 400; letter-spacing: 0; }
.plan-benefits { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; color: #475569; font-size: .76rem; line-height: 1.28; }
.plan-benefits li { position: relative; padding-left: 20px; }
.plan-benefits li::before { position: absolute; top: .34em; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--b2-brand-600); content: ''; }
.plan-benefits li b { color: #334155; font-size: inherit; font-weight: 750; letter-spacing: 0; }
.plan-benefits .plan-note::before { top: -.03em; width: auto; height: auto; background: none; color: var(--b2-accent); content: '★'; font-size: .95rem; line-height: 1; }
.plan-benefits .plan-note { color: #475569; }
.catalog-results .plan-card > i { display: block; margin-top: auto; padding-top: 15px; color: var(--b2-brand-700); font-size: .73rem; font-style: normal; font-weight: 550; }
.catalog-results .fine-print { margin: 18px 0 0; color: #64748b; font-size: .67rem; line-height: 1.45; }

/* NORA se conserva disponible, pero ya no reduce el ancho útil del catálogo. */
.nora-launcher { position: fixed; z-index: 30; right: 24px; bottom: 22px; display: inline-flex; align-items: center; gap: 9px; min-height: 50px; border: 0; border-radius: 999px; background: var(--b2-brand-950); color: #fff; padding: 7px 16px 7px 8px; box-shadow: 0 12px 28px #0f1f5533; cursor: pointer; }
.nora-launcher:hover { background: #19358c; }
.nora-launcher .avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fff; color: var(--b2-brand-700); font-size: .82rem; font-weight: 800; }
.nora-launcher > span:last-child { display: grid; gap: 1px; text-align: left; }
.nora-launcher strong { font-size: .75rem; letter-spacing: .02em; }
.nora-launcher small { color: #d9eaff; font-size: .65rem; }
.nora-panel { position: fixed; z-index: 31; right: 24px; bottom: 83px; display: flex; width: min(368px, calc(100vw - 32px)); height: min(555px, calc(100vh - 115px)); min-height: 380px; margin: 0; overflow: hidden; border: 1px solid var(--b2-line); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px #0f172a2b; }
.nora-panel[hidden] { display: none; }
.nora-panel .agent-heading { position: relative; min-height: 67px; background: var(--b2-brand-600); }
.nora-panel .nora-close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; }
.nora-panel .nora-close:hover { background: #ffffff35; }
.nora-panel .chat { padding: 15px; }

@media (max-width: 1060px) {
  .catalog-layout { grid-template-columns: 225px minmax(0, 1fr); gap: 22px; }
  .catalog-results .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .storefront-main { padding: 0 18px 34px; }
  .catalog-page { padding-top: 24px; }
  .catalog-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .catalog-heading h1 { font-size: 2rem; }
  .offers-banner { align-items: flex-start; margin: 18px 0 24px; padding: 14px; }
  .offers-banner b { display: none; }
  .catalog-layout { grid-template-columns: 1fr; gap: 26px; }
  .plans-sidebar { grid-template-columns: 1fr 1fr; gap: 20px; }
  .plan-search-label, .clear-catalog-filters { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .storefront-nav { display: none; }
  .storefront-header-inner { min-height: 60px; }
  .catalog-results .plans { grid-template-columns: 1fr; }
  .plans-sidebar { grid-template-columns: 1fr; }
  .catalog-results .plan-card { min-height: 0; padding: 18px; }
  .nora-launcher { right: 16px; bottom: 16px; }
  .nora-panel { right: 16px; bottom: 75px; width: calc(100vw - 32px); }
}