/* Sistema visual ZoM: basado en la tienda comercial y compartido por toda la plataforma. */
:root {
  --zom-navy: #001263;
  --zom-blue: #0008d9;
  --zom-sky: #31b6ff;
  --zom-ink: #071b4c;
  --zom-muted: #66738e;
  --zom-line: #dde4f0;
  --zom-cloud: #f5f7fb;
  --zom-white: #fff;
  --ops-primary: #0008d9;
  --ops-primary-dark: #001263;
  --ops-accent: #31b6ff;
  --ops-ink: #071b4c;
  --ops-surface: #f5f7fb;
}

* { box-sizing: border-box; }
body { color: var(--zom-ink); font-family: Montserrat, ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--ops-primary) 28%, #fff); outline-offset: 2px; }

/* Tienda y recomendador NORA */
.storefront-body { min-width: 320px; background: var(--zom-cloud); }
.storefront-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid #ffffff25; background: var(--zom-navy); box-shadow: 0 4px 20px #00126320; }
.storefront-header-inner { display: grid; grid-template-columns: 235px 1fr auto; align-items: center; gap: 24px; max-width: 1320px; min-height: 74px; margin: auto; padding: 0 36px; }
.storefront-logo { display: flex; align-items: center; gap: 11px; min-width: 0; color: #fff; font-size: .83rem; font-weight: 800; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; }
.storefront-logo-image { display: grid; place-items: center; width: 154px; height: 38px; color: #fff; font-size: 1.1rem; font-weight: 900; letter-spacing: -.08em; }
.storefront-logo-image img { display: block; width: 100%; max-height: 38px; object-fit: contain; object-position: left center; }
.storefront-nav { display: flex; align-items: center; justify-content: center; gap: 28px; }
.storefront-nav a { color: #dce7ff; font-size: .71rem; font-weight: 700; letter-spacing: .025em; text-decoration: none; }
.storefront-nav a:hover { color: #fff; }
.storefront-header-cta, .storefront-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; background: #fff; color: var(--zom-navy); font-size: .7rem; font-weight: 800; padding: 0 19px; text-decoration: none; white-space: nowrap; }
.storefront-main { width: min(100%, 1440px); max-width: none; margin: auto; padding: 0 36px 64px; }
.storefront-hero { position: relative; display: flex; align-items: center; max-width: none; min-height: 360px; margin: 0 calc(50% - 50vw); padding: 58px max(36px, calc((100vw - 1248px) / 2)); overflow: hidden; background: linear-gradient(90deg, #001263 0%, #001263ed 37%, #001263a6 61%, #00126325 100%), url('/assets/brand/zom-shopify-banner-desktop.jpg') right center / cover no-repeat; }
.storefront-hero-copy { position: relative; z-index: 1; width: min(590px, 66vw); color: #fff; }
.storefront-hero .eyebrow { margin-bottom: 14px; color: #a7d8ff; font-size: .68rem; }
.storefront-hero h1 { max-width: 570px; margin: 0; color: #fff; font-size: clamp(2.55rem, 5.2vw, 5rem); font-weight: 800; letter-spacing: -.075em; line-height: .97; }
.storefront-hero .hero-copy { max-width: 525px; margin: 20px 0 0; color: #e6eeff; font-size: 1rem; line-height: 1.65; }
.storefront-hero .trust { gap: 8px; margin-top: 22px; }
.storefront-hero .trust span { border-color: #ffffff42; background: #ffffff15; color: #fff; font-size: .68rem; padding: 8px 12px; }
.storefront-hero-badge { position: absolute; right: max(36px, calc((100vw - 1248px) / 2)); bottom: 34px; display: grid; gap: 5px; width: 164px; padding: 18px; border: 1px solid #fff6; border-radius: 16px; background: #001263b8; color: #fff; backdrop-filter: blur(10px); }
.storefront-hero-badge strong { font-size: 1.43rem; font-weight: 800; letter-spacing: -.07em; line-height: .91; }
.storefront-hero-badge span { color: #c9ddff; font-size: .62rem; font-weight: 600; line-height: 1.45; }
.storefront-steps { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1120px; margin: -33px auto 42px; overflow: hidden; border: 1px solid var(--zom-line); border-radius: 18px; background: #fff; box-shadow: 0 19px 42px #00126317; }
.storefront-steps article { display: flex; align-items: center; gap: 13px; min-height: 86px; padding: 18px 25px; border-right: 1px solid var(--zom-line); }
.storefront-steps article:last-child { border-right: 0; }
.storefront-steps b { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 50%; background: color-mix(in srgb, var(--ops-primary) 9%, #fff); color: var(--ops-primary); font-size: .73rem; }
.storefront-steps strong, .storefront-steps span { display: block; }
.storefront-steps strong { color: var(--zom-ink); font-size: .76rem; font-weight: 800; }
.storefront-steps span { margin-top: 4px; color: var(--zom-muted); font-size: .65rem; line-height: 1.4; }
.app-shell { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(330px, .78fr); max-width: 1240px; margin: auto; overflow: hidden; border: 1px solid var(--zom-line); border-radius: 20px; background: #fff; box-shadow: 0 15px 36px #0012630b; }
.plans-panel { padding: 29px; border: 0; border-right: 1px solid var(--zom-line); background: #fff; }
.section-label { color: var(--ops-primary); font-size: .65rem; letter-spacing: .13em; }
.catalog-tools { align-items: end; padding: 15px 0 20px; border-bottom: 1px solid #edf0f6; }
.catalog-tools label { color: var(--zom-muted); font-size: .65rem; }
.catalog-tools select, .catalog-tools button { min-height: 39px; border-color: #d4ddeb; border-radius: 8px; color: var(--zom-ink); font-size: .76rem; }
.catalog-tools button { background: #f8faff; font-weight: 700; }
.catalog-tools p { color: var(--zom-muted); font-size: .7rem; }
.plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 19px; }
.plan-group { gap: 9px; }
.plan-group h3 { color: var(--zom-ink); font-size: .7rem; letter-spacing: .015em; }
.plan-card { min-height: 146px; border-color: #dbe3ef; border-radius: 14px; padding: 15px; transition: border-color .16s, box-shadow .16s, transform .16s; }
.plan-card:hover { transform: translateY(-2px); border-color: var(--ops-primary); box-shadow: 0 13px 21px #00126310; }
.plan-card.selected { border: 2px solid var(--ops-primary); background: #f7f8ff; box-shadow: 0 10px 22px #0008d914; }
.plan-card span, .plan-card em { color: var(--ops-primary); }
.plan-card strong { color: var(--zom-ink); font-size: 1rem; }
.plan-card b { color: var(--zom-navy); font-size: 1.28rem; letter-spacing: -.045em; }
.plan-card p, .plan-card small, .fine-print { color: var(--zom-muted); font-size: .68rem; }
.chat-panel { min-height: 585px; background: #fbfcff; }
.agent-heading { padding: 22px 23px; border-bottom-color: var(--zom-line); background: var(--zom-navy); color: #fff; }
.agent-heading .avatar { width: 39px; height: 39px; border: 1px solid #fff4; background: #fff; color: var(--zom-blue); }
.agent-heading span { color: #a7d8ff; font-size: .69rem; }
.chat { gap: 11px; padding: 20px; }
.bubble { border-radius: 15px; font-size: .82rem; line-height: 1.55; }
.bubble.assistant { border: 1px solid #dce5ff; background: #fff; }
.bubble.user { background: var(--ops-primary); }
.recommended-plan { border-color: #d6dff5; border-radius: 12px; padding: 12px; }
.recommended-plan:hover { border-color: var(--ops-primary); }
.recommended-plan span, .recommended-plan i { color: var(--ops-primary); }
.composer { padding: 15px; border-top-color: var(--zom-line); background: #fff; }
.composer input { border-color: #d3ddec; border-radius: 999px; padding: 11px 14px; font-size: .76rem; }
.composer button { border-radius: 999px; background: var(--ops-primary); padding: 11px 16px; font-size: .72rem; }
.request { max-width: 1240px; margin: 27px auto 0; border-radius: 19px; background: linear-gradient(105deg, var(--zom-navy), #0d2f9e); box-shadow: 0 14px 30px #00126320; }
.request .eyebrow { color: #a7d8ff; }
.request h2 { font-weight: 800; }
.request strong { color: #a7d8ff; }
.lead-form input, .lead-form select { border: 1px solid #ffffff55; border-radius: 8px; background: #fff; color: var(--zom-ink); }
.lead-form button { border-radius: 999px; background: #fff; color: var(--zom-navy); }
.storefront-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1240px; margin: 0 auto; padding: 24px 36px 30px; color: #66738e; font-size: .67rem; }
.storefront-footer a { color: var(--ops-primary); font-weight: 700; text-decoration: none; }

/* Acceso y expediente: misma experiencia comercial, sin perder las protecciones. */
.access-body, .dossier-body { min-height: 100vh; background: linear-gradient(180deg, var(--zom-navy) 0 202px, var(--zom-cloud) 202px); }
.access-site-header { display: flex; align-items: center; justify-content: space-between; max-width: 1190px; min-height: 76px; margin: auto; padding: 0 30px; }
.access-logo { display: flex; align-items: center; gap: 12px; color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.access-logo > span:first-child { display: grid; place-items: center; width: 170px; height: 40px; color: #fff; font-size: 1.2rem; font-weight: 900; }
.access-logo > span:first-child img { width: 100%; max-height: 40px; object-fit: contain; object-position: left center; }
.access-back-link { color: #dce7ff; font-size: .68rem; font-weight: 700; text-decoration: none; }
.access-back-link:hover { color: #fff; }
.access-page { max-width: 520px; padding: 45px 24px 72px; }
.access-card { margin-top: 0; border: 1px solid #e0e6f0; border-radius: 20px; padding: 34px; box-shadow: 0 23px 48px #00126317; }
.access-card .eyebrow { color: var(--ops-primary); }
.access-card h1 { color: var(--zom-navy); font-size: clamp(2.15rem, 5vw, 3.35rem); font-weight: 800; }
.access-card > p { color: var(--zom-muted); font-size: .88rem; }
.access-form label { color: #344b71; font-size: .72rem; }
.access-form input { border-color: #d5deeb; border-radius: 9px; padding: 12px; }
.access-form button { border-radius: 999px; background: var(--ops-primary); padding: 12px 20px; font-size: .78rem; }
.dossier-page { max-width: 1030px; padding: 30px 24px 72px; }
.dossier-heading { max-width: 680px; margin: 0 0 23px; color: #fff; }
.dossier-heading .eyebrow { color: #a7d8ff; }
.dossier-heading h1 { color: #fff; font-size: clamp(2.2rem, 4.8vw, 3.9rem); font-weight: 800; }
.dossier-heading p:not(.eyebrow) { color: #d9e5ff; font-size: .88rem; }
.secure-note { border-color: #b8cdfc; border-radius: 14px; background: #edf4ff; color: #183a6a; font-size: .8rem; }
.dossier-form section, .documents-section { border-color: #e0e6f0; border-radius: 16px; box-shadow: 0 8px 20px #00126308; }
.dossier-form h2, .documents-section h2 { color: var(--zom-navy); font-weight: 800; }
.dossier-form section > p, .documents-section > p { color: var(--zom-muted); }
.field-grid label { color: #35506f; font-size: .72rem; }
.field-grid input, .field-grid select { border-color: #d5deeb; border-radius: 8px; }
.document-card { min-height: 126px; border-color: #aebed5; border-radius: 12px; background: #fbfcff; color: #183a6a; }
.document-card:hover { border-color: var(--ops-primary); background: #f5f7ff; }
.ine-reader { border-radius: 12px; background: #eff4ff; }
.ine-reader button, .dossier-form > button { border-radius: 999px; background: var(--ops-primary); }
.proof-reader { background: #f6f8fc; }
.final-nip-section { border-color: #b9d7ff; background: #eef6ff; }
.final-nip-section > p:not(.eyebrow) { color: #284d77; }
.nip-form button { border-radius: 999px; background: var(--ops-primary); }

/* Consola interna, CRM, Maestro y usuarios. */
.ops-body, .ops-shell { background: var(--zom-cloud); }
.ops-shell { grid-template-columns: 268px minmax(0, 1fr); }
.ops-sidebar { padding: 22px 15px 17px; background: linear-gradient(168deg, #001b70 0%, var(--zom-navy) 54%, #000b3d 100%); box-shadow: 10px 0 26px #00126318; }
.ops-sidebar::before { background: radial-gradient(circle at 10% 1%, #31b6ff, transparent 26%); }
.ops-brand { min-height: 60px; padding: 5px 10px 28px; }
.ops-brand-mark { width: 174px; height: 42px; border-radius: 0; background: transparent; box-shadow: none; color: #fff; }
.ops-brand-mark img { width: 100%; max-height: 42px; object-fit: contain; object-position: left center; }
.ops-brand-copy { font-size: .82rem; }
.ops-brand:has(.ops-brand-mark img) .ops-brand-copy { display: none; }
.ops-nav { gap: 5px; }
.ops-nav a { gap: 12px; border: 1px solid transparent; border-radius: 10px; color: #d3e0ff; font-size: .76rem; }
.ops-nav a:hover { border-color: #ffffff1f; background: #ffffff12; color: #fff; }
.ops-nav a.active { border-color: #ffffff2c; background: #fff; box-shadow: none; color: var(--zom-navy); }
.ops-nav a.active span { color: var(--ops-primary); }
.ops-sidebar-foot { border-top-color: #ffffff28; }
.ops-sidebar-foot small { color: #bcd1ff; }
.live-dot { background: #62e3ac; }
.ops-topbar { min-height: 74px; padding: 0 42px; border-bottom: 1px solid #e5eaf2; background: #fff; color: var(--zom-navy); }
.ops-topbar > p { color: #5f6f88; font-size: .66rem; }
.topbar-dot { background: var(--ops-primary); }
.user-indicator strong { color: var(--zom-navy); font-size: .72rem; }
.user-indicator small { color: #71809a; font-size: .61rem; }
.user-initial { border-color: #d6dff2; background: #f1f4ff; color: var(--ops-primary); }
.ops-main { max-width: 1480px; padding: 36px 42px 72px; }
.ops-heading { margin: 0 0 25px; }
.ops-heading h1 { color: var(--zom-navy); font-weight: 800; }
.ops-heading > div > p:not(.eyebrow) { color: var(--zom-muted); font-size: .83rem; }
.eyebrow { color: var(--ops-primary); }
.admin-actions button, .admin-actions .secondary-button, .brand-form button, .brand-edit-form button, .brand-access-form button { min-height: 38px; border-radius: 999px; font-size: .69rem; }
.admin-actions button, .brand-form button, .brand-edit-form button, .brand-access-form button { background: var(--ops-primary); }
.admin-actions button:hover, .brand-form button:hover, .brand-edit-form button:hover, .brand-access-form button:hover { background: var(--ops-primary-dark); }
.admin-actions .secondary-button { border-color: #d3ddec; color: var(--zom-navy); }
.metric-grid { gap: 13px; }
.metric-card { min-height: 125px; border: 1px solid #e0e6ef; border-radius: 15px; background: #fff; box-shadow: 0 8px 17px #00126307; }
.metric-card::before { background: var(--ops-primary); }
.metric-card p { color: #5b6e8b; font-size: .63rem; }
.metric-card strong { color: var(--zom-navy); font-weight: 800; }
.metric-card small { color: #71809a; }
.data-section, .integration-card, .crm-filter-card, .customer-profile-card, .next-action-card, .master-guide, .master-create, .master-directory, .new-user-panel, .security-panel { border-color: #e0e6ef; border-radius: 15px; box-shadow: 0 9px 22px #00126308; }
.data-section, .master-guide, .master-create, .master-directory, .new-user-panel { background: #fff; }
.section-topline { align-items: center; }
.section-topline h2, .data-section h2, .master-guide h2, .master-create h2, .master-directory h2, .new-user-panel h2, .security-panel h2 { color: var(--zom-navy); font-weight: 800; }
.section-topline > p, .section-topline > div + p { color: var(--zom-muted); font-size: .7rem; }
.table-wrap { border-color: #e0e6ef; border-radius: 12px; }
th { background: #f8faff; color: #66758c; font-size: .62rem; }
td { color: #314969; font-size: .74rem; }
tr:last-child td { border-bottom: 0; }
select, .data-section input, .data-section textarea, .crm-filter-card input, .user-filter-row input, .user-filter-row select { border-color: #d5deeb; border-radius: 8px; color: var(--zom-ink); }
.integration-card { align-items: center; padding: 23px; background: linear-gradient(105deg, #fff, #f7f9ff); }
.integration-card h2 { color: var(--zom-navy); font-weight: 800; }
.integration-form button { border-radius: 999px; background: var(--ops-primary); }
.alerts .alert-item { border-radius: 12px; }
.zom-brand-banner, .user-brand-banner { border-radius: 17px; background: linear-gradient(109deg, #001263, var(--ops-primary) 66%, #001263); box-shadow: 0 15px 31px #00126320; }
.zom-brand-banner .eyebrow, .user-brand-banner .eyebrow { color: #a7d8ff; }
.zom-brand-banner h2, .user-brand-banner h2 { color: #fff; }
.zom-brand-banner p:not(.eyebrow), .user-brand-banner p:not(.eyebrow) { color: #e3edff; }
.zom-signatures { color: #fff; }
.master-guide { border-left: 4px solid var(--ops-primary); }
.master-guide p, .master-create > p, .brand-card p { color: var(--zom-muted); }
.brand-form, .brand-edit-form { gap: 12px; }
.brand-profile-fields, .theme-fields, .module-checks { border-color: #dbe3ef; border-radius: 12px; background: #fbfcff; }
.brand-profile-fields legend, .theme-fields legend, .module-checks legend { color: var(--ops-primary); }
.brand-profile-fields input, .brand-form input, .brand-form select, .brand-edit-form input, .brand-edit-form select { border-color: #d5deeb; border-radius: 8px; }
.brand-card { border-color: #e0e6ef; border-radius: 16px; box-shadow: 0 8px 19px #00126308; }
.brand-card header { border-bottom-color: #e7ebf3; }
.brand-preview { border-radius: 10px; }
.brand-preview.has-logo { background: var(--zom-navy) !important; }
.crm-filter-card { background: #fff; }
.crm-search input { border-color: #d5deeb; border-radius: 999px; }
.crm-filter-card select { border-color: #d5deeb; }
.crm-customer-list, .user-list { gap: 12px; }
.customer-directory-card, .user-directory-card { border-color: #e0e6ef; border-radius: 14px; box-shadow: 0 7px 16px #00126307; }
.customer-directory-card:hover, .user-directory-card:hover { border-color: color-mix(in srgb, var(--ops-primary) 45%, #fff); }
.customer-avatar, .user-avatar { background: color-mix(in srgb, var(--ops-primary) 10%, #fff); color: var(--ops-primary); }
.customer-directory-card h3, .user-directory-card h3 { color: var(--zom-navy); }
.customer-directory-card .customer-action, .user-edit-form button, .user-form button { border-radius: 999px; background: var(--ops-primary); }
.customer-profile-card { overflow: hidden; background: #fff; }
.customer-profile-card::before { background: linear-gradient(90deg, var(--ops-primary), #31b6ff); }
.next-action-card { background: linear-gradient(115deg, #f1f5ff, #fff); }
.activity-form button, .history, .save { border-radius: 999px; background: var(--ops-primary); }
.customer-timeline-item::before { background: var(--ops-primary); }
.user-brand-banner { margin-top: 0; }
.role-section.data-section { border-radius: 15px; }
.role-card { border-color: #e0e6ef; border-radius: 13px; background: #fff; }
.role-card h3, .role-matrix-wrap h3 { color: var(--zom-navy); }
.role-card p, .role-card li, .role-boundary { color: var(--zom-muted); }
.role-card:before, .role-member-count, .role-icon { background: var(--ops-primary); }
.role-icon { color: #fff; }
.role-matrix-table { border-color: #dce4ef; border-radius: 11px; }
.role-matrix-table > strong { background: #f7f9fd; }
.permission-yes { background: #edf8f2; }
.security-panel { background: linear-gradient(145deg, #eff4ff, #e6efff); }
.security-panel li { color: #365171; }
.new-user-panel, .user-directory-section { padding: 24px; }
.user-form input, .user-form select, .user-edit-form input, .user-edit-form select { border-color: #d5deeb; border-radius: 8px; }
.user-form button, .user-edit-form button { border-radius: 999px; }
.user-state.active { background: #e9f8ef; color: #187244; }
.role-badge, .status-chip { border-radius: 999px; }

/* Vista previa White Label con la proporción y la claridad de la tienda. */
.brand-preview-page { --preview-primary: #0008d9; --preview-dark: #001263; --preview-accent: #31b6ff; --preview-ink: #071b4c; --preview-surface: #f5f7fb; }
.store-header { background: var(--preview-dark); box-shadow: 0 3px 14px #00126322; }
.store-header-main { grid-template-columns: 220px minmax(230px, 1fr) auto; min-height: 76px; padding: 14px 30px; }
.store-logo img { max-width: 182px; max-height: 42px; }
.store-search { max-width: 570px; border-radius: 999px; }
.store-search button { border-radius: 999px; background: var(--preview-primary); font-size: .7rem; }
.store-action, .store-nav a { font-size: .7rem; }
.store-nav { min-height: 43px; }
.store-hero { min-height: 376px; padding-top: 58px; padding-bottom: 58px; background-image: linear-gradient(90deg, #001263ef 0%, #001263dc 39%, #00126366 74%, #0012634a 100%), var(--hero-image, url('/assets/brand/zom-shopify-banner-desktop.jpg')); }
.store-hero h1 { font-weight: 800; }
.store-cta { border-radius: 999px; background: var(--preview-primary); font-size: .72rem; }
.store-steps { border-radius: 16px; }
.preview-plan-card { border-color: #dbe3ef; border-radius: 15px; }
.preview-plan-card.featured { border-color: var(--preview-primary); }
.preview-plan-card button { border-radius: 999px; background: var(--preview-primary); }
.preview-help { background: linear-gradient(100deg, var(--preview-dark), var(--preview-primary)); }
.preview-help a { border-radius: 999px; }

@media (max-width: 1100px) {
  .storefront-header-inner { grid-template-columns: 190px 1fr auto; padding: 0 26px; }
  .storefront-nav { gap: 18px; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .ops-main { padding-left: 30px; padding-right: 30px; }
  .ops-topbar { padding: 0 30px; }
}
@media (max-width: 820px) {
  .storefront-header-inner { grid-template-columns: 1fr auto; min-height: 64px; }
  .storefront-nav { display: none; }
  .storefront-hero { min-height: 335px; padding-top: 44px; padding-bottom: 54px; background-image: linear-gradient(90deg, #001263f6 0%, #001263d5 53%, #00126388 100%), url('/assets/brand/zom-shopify-banner-mobile.jpg'); background-position: 70% center; }
  .storefront-hero-copy { width: min(555px, 87vw); }
  .storefront-hero-badge { display: none; }
  .storefront-steps { grid-template-columns: 1fr; max-width: 540px; margin-top: -20px; }
  .storefront-steps article { min-height: 70px; border-right: 0; border-bottom: 1px solid var(--zom-line); }
  .storefront-steps article:last-child { border-bottom: 0; }
  .app-shell { grid-template-columns: 1fr; max-width: 660px; }
  .plans-panel { border-right: 0; border-bottom: 1px solid var(--zom-line); }
  .chat-panel { min-height: 460px; }
  .request { max-width: 660px; }
  .ops-shell { grid-template-columns: 1fr; }
  .ops-sidebar { position: relative; min-height: auto; padding: 13px 18px; }
  .ops-brand { min-height: 44px; padding: 0; }
  .ops-sidebar-foot { display: none; }
  .ops-nav { display: flex; gap: 4px; overflow: auto; margin-top: 12px; padding-bottom: 1px; }
  .ops-nav a { flex: 0 0 auto; padding: 9px 11px; }
  .ops-topbar { min-height: 61px; }
  .ops-main { padding: 26px 20px 54px; }
  .ops-topbar { padding: 0 20px; }
}
@media (max-width: 560px) {
  .storefront-header-inner, .storefront-main { padding-left: 18px; padding-right: 18px; }
  .storefront-logo-image { width: 135px; }
  .storefront-header-cta { min-height: 34px; padding: 0 12px; font-size: .62rem; }
  .storefront-hero { margin-left: -18px; margin-right: -18px; padding-left: 22px; padding-right: 22px; }
  .storefront-hero h1 { font-size: 2.46rem; }
  .storefront-hero .hero-copy { font-size: .86rem; }
  .storefront-steps { margin-bottom: 28px; }
  .plans-panel { padding: 20px; }
  .plans { grid-template-columns: 1fr; }
  .catalog-tools { align-items: stretch; }
  .catalog-tools label, .catalog-tools select, .catalog-tools button { width: 100%; }
  .catalog-tools p { margin: 0; }
  .request { padding: 25px 21px; }
  .storefront-footer { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .access-site-header { padding: 0 18px; }
  .access-logo > span:first-child { width: 132px; }
  .access-logo > span:last-child { display: none; }
  .access-page, .dossier-page { padding-left: 18px; padding-right: 18px; }
  .access-card { padding: 26px 22px; }
  .dossier-page { padding-top: 22px; }
  .ops-topbar > p { max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-indicator strong { max-width: 125px; }
  .ops-brand-mark { width: 145px; }
  .ops-nav a span { display: none; }
  .ops-nav a { font-size: .68rem; }
  .ops-main { padding-left: 15px; padding-right: 15px; }
  .ops-heading h1 { font-size: 2.2rem; }
  .admin-actions { width: 100%; }
  .admin-actions > * { flex: 1 1 auto; justify-content: center; }
  .integration-card { padding: 18px; }
  .new-user-panel, .user-directory-section, .role-section.data-section { padding: 17px; }
  .store-header-main { padding-left: 18px; padding-right: 18px; }
  .store-search { display: none; }
  .store-header-main { grid-template-columns: 1fr auto; }
  .store-nav { padding-left: 18px; padding-right: 18px; }
}

/* Ajuste sobrio: prioridad a la información, al logo original y a los planes. */
.storefront-header { box-shadow: none; }
.storefront-header-inner { min-height: 64px; }
.storefront-logo { gap: 0; }
.storefront-logo-image { width: 178px; height: 37px; }
.storefront-logo-image img { max-height: 37px; }
.storefront-header-cta, .storefront-cta { min-height: 38px; border: 1px solid #ffffff36; background: transparent; color: #fff; font-size: .75rem; letter-spacing: .01em; }
.storefront-header-cta:hover, .storefront-cta:hover { border-color: #fff; background: #fff; color: var(--zom-navy); }
.storefront-main { padding-bottom: 32px; }
.storefront-hero { min-height: 132px; padding-top: 24px; padding-bottom: 24px; background: linear-gradient(105deg, #001263, #071e76); }
.storefront-hero-copy { width: min(880px, 100%); }
.storefront-hero .eyebrow { margin-bottom: 7px; font-size: .62rem; }
.storefront-hero h1 { max-width: 750px; font-size: clamp(1.9rem, 3.6vw, 3.15rem); letter-spacing: -.06em; line-height: 1.03; }
.storefront-hero .hero-copy { max-width: 690px; margin-top: 9px; font-size: .8rem; line-height: 1.45; }
.storefront-hero .trust, .storefront-hero-badge, .storefront-steps { display: none; }
.app-shell { grid-template-columns: minmax(0, 1.67fr) minmax(310px, .66fr); max-width: 1360px; height: calc(100vh - 214px); min-height: 570px; margin-top: 16px; border-radius: 14px; box-shadow: 0 8px 22px #0012630c; }
.plans-panel { min-height: 0; padding: 20px 22px 14px; overflow: auto; }
.catalog-tools { gap: 8px; padding: 8px 0 12px; }
.catalog-tools label { gap: 4px; }
.catalog-tools select, .catalog-tools button { min-height: 34px; padding: 7px 9px; font-size: .68rem; }
.catalog-tools p { align-self: center; margin-bottom: 0; font-size: .66rem; }
.plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding-top: 13px; }
.plan-group { gap: 6px; min-width: 0; }
.plan-group h3 { min-height: 24px; margin: 0; color: #3e5174; font-size: .62rem; line-height: 1.25; }
.plan-card { min-height: 0; padding: 9px 10px; border-radius: 9px; }
.plan-card:hover { transform: none; box-shadow: none; }
.plan-card span { font-size: .57rem; line-height: 1.25; }
.plan-card strong { margin: 3px 0; font-size: .79rem; letter-spacing: -.025em; line-height: 1.1; }
.plan-card b { font-size: 1.02rem; }
.plan-card b small { font-size: .53rem; }
.plan-card p, .plan-card em, .plan-card i { margin-top: 3px; font-size: .56rem; line-height: 1.3; }
.plan-card i { display: none; }
.fine-print { margin-top: 10px; font-size: .57rem; }
.chat-panel { min-height: 0; }
.agent-heading { padding: 16px 18px; background: #001263; }
.agent-heading .avatar { width: 34px; height: 34px; }
.agent-heading strong { font-size: .82rem; }
.chat { padding: 15px; }
.bubble { font-size: .71rem; }
.composer { padding: 12px; }
.composer input { padding: 10px 12px; font-size: .7rem; }
.composer button { min-height: 36px; padding: 9px 14px; font-size: .68rem; }
.request { margin-top: 18px; border-radius: 14px; box-shadow: none; }
.storefront-footer { padding-top: 17px; }

.access-logo { gap: 0; }
.access-logo > span:first-child { width: 184px; }
.access-logo > span:first-child img { max-height: 38px; }
.access-card, .dossier-form section, .documents-section { box-shadow: 0 6px 16px #00126309; }

.ops-sidebar { background: #001263; box-shadow: none; }
.ops-sidebar::before { display: none; }
.ops-topbar { min-height: 68px; }
.ops-main { padding-top: 30px; }
.zom-brand-banner, .user-brand-banner { background: #001263; box-shadow: none; }
.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 { box-shadow: 0 4px 12px #00126308; }
.admin-actions button, .admin-actions .secondary-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 { min-height: 39px; border-radius: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .005em; }
.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 { background: var(--ops-primary-dark); }
.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(--ops-primary); }
.admin-actions .secondary-button { background: #fff; }
.store-header { box-shadow: none; }
.store-hero { min-height: 310px; background-image: linear-gradient(90deg, #001263f2 0%, #001263d8 48%, #001263a2 100%), var(--hero-image, url('/assets/brand/zom-shopify-banner-desktop.jpg')); }
.store-cta, .preview-plan-card button, .preview-help a { border-radius: 8px; font-size: .74rem; }

@media (max-width: 1100px) {
  .app-shell { grid-template-columns: minmax(0, 1.3fr) minmax(285px, .7fr); }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .storefront-logo-image { width: 160px; }
  .storefront-hero { min-height: 200px; padding-top: 32px; padding-bottom: 32px; background: linear-gradient(105deg, #001263, #071e76); }
  .storefront-hero .trust { display: flex; margin-top: 14px; }
  .app-shell { height: auto; min-height: 0; margin-top: 17px; }
  .plans-panel { overflow: visible; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chat-panel { min-height: 460px; }
  .storefront-steps { display: none; }
}
@media (max-width: 560px) {
  .storefront-logo-image { width: 143px; }
  .storefront-hero { min-height: 192px; }
  .storefront-hero h1 { font-size: 1.92rem; }
  .storefront-hero .hero-copy { font-size: .75rem; }
  .storefront-hero .trust { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan-card { padding: 11px; }
  .plan-card strong { font-size: .88rem; }
  .plan-card p, .plan-card em { font-size: .62rem; }
  .access-logo > span:first-child { width: 145px; }
}

/* Azul Telcel más luminoso y una conversación NORA equilibrada con el catálogo. */
:root {
  --zom-navy: #00629b;
  --zom-blue: #0079c8;
  --zom-sky: #00a7e0;
  --zom-ink: #12304c;
  --zom-muted: #627b91;
  --zom-line: #d9e6ee;
  --zom-cloud: #f6f9fc;
  --ops-primary: #0079c8;
  --ops-primary-dark: #00629b;
  --ops-accent: #00a7e0;
  --ops-ink: #12304c;
  --ops-surface: #f6f9fc;
}
.storefront-header { border-bottom-color: #ffffff58; background: #0079c8; }
.storefront-header-cta, .storefront-cta { border-color: #ffffffa6; background: #fff; color: #00629b; }
.storefront-header-cta:hover, .storefront-cta:hover { border-color: #fff; background: #eaf8ff; color: #005b91; }
.storefront-hero { background: linear-gradient(108deg, #0079c8, #006ba9); }
.storefront-hero .eyebrow { color: #e0f5ff; }
.app-shell { border-color: #d4e4ed; }
.section-label, .plan-card span, .plan-card em, .recommended-plan span, .recommended-plan i { color: #0079c8; }
.plan-card.selected { border-color: #0079c8; background: #f0f9fd; box-shadow: 0 7px 16px #0079c817; }
.plan-card:hover { border-color: #0079c8; }
.chat-panel { align-self: stretch; height: 100%; background: #f7fbfd; }
.agent-heading { min-height: 68px; padding: 17px 18px; background: #0079c8; }
.agent-heading .avatar { border-color: #fff; color: #0079c8; }
.agent-heading span { color: #e4f7ff; }
.chat { justify-content: center; min-height: 0; background: radial-gradient(circle at 84% 17%, #00a7e012, transparent 30%); }
.chat:has(.bubble:nth-child(2)), .chat:has(.recommended-plans) { justify-content: flex-start; }
.bubble.assistant { max-width: 92%; border-color: #cfe4ef; background: #fff; color: #23445e; box-shadow: 0 3px 9px #00629b09; }
.bubble.user { background: #0079c8; }
.composer button, .integration-form button { background: #0079c8; }
.composer button:hover, .integration-form button:hover { background: #00629b; }
.request { background: #0079c8; }
.request .eyebrow, .request strong { color: #e3f6ff; }
.lead-form button { color: #00629b; }
.ops-sidebar { background: #00629b; }
.ops-nav a.active { color: #00629b; }
.zom-brand-banner, .user-brand-banner { background: #0079c8; }
.ops-brand-mark img, .storefront-logo-image img, .access-logo img, .store-logo img { filter: none; }
.admin-actions button, .brand-form button, .brand-edit-form button, .brand-access-form button, .user-form button, .user-edit-form button, .activity-form button, .save, .history { background: #0079c8; }
.admin-actions button:hover, .brand-form button:hover, .brand-edit-form button:hover, .brand-access-form button:hover, .user-form button:hover, .user-edit-form button:hover, .activity-form button:hover, .save:hover, .history:hover { background: #00629b; }
.metric-card::before, .customer-profile-card::before { background: #00a7e0; }
.store-header { background: #0079c8; }
.store-hero { background-image: linear-gradient(90deg, #0079c8ec 0%, #006ba9db 50%, #00629ba1 100%), var(--hero-image, url('/assets/brand/zom-shopify-banner-desktop.jpg')); }
.preview-help { background: #0079c8; }