/* Sistema visual basado en la referencia local de B2VIP. */
:root {
  --b2-brand-50: #eef7ff;
  --b2-brand-100: #d9eaff;
  --b2-brand-200: #bcdaff;
  --b2-brand-300: #a9d2ff;
  --b2-brand-500: #2d76ff;
  --b2-brand-600: #1856f5;
  --b2-brand-700: #1442dd;
  --b2-brand-800: #19358c;
  --b2-brand-950: #0f1f55;
  --b2-header-line: #24366f;
  --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 var(--b2-header-line); 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: var(--b2-brand-100); 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), var(--b2-brand-800)); 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. */
/* La banda azul terminaba en 182px fijos mientras el titulo usa tamano
   fluido (clamp): en anchos comunes el titulo pasaba de 182px y su mitad
   inferior quedaba en blanco sobre blanco, o sea invisible y cortada.
   Ahora expediente.js calcula donde termina el encabezado y lo pone en
   --b2-banda-azul; los 182px quedan solo como respaldo sin JavaScript. */
.access-body, .dossier-body { background: linear-gradient(180deg, var(--b2-brand-950) 0 var(--b2-banda-azul, 182px), #fff var(--b2-banda-azul, 182px)); }
/* El selector de archivo nativo es mas ancho que la tarjeta y se salia del
   borde punteado. El nombre del archivo ya se muestra aparte, debajo. */
.document-card { overflow: hidden; }
.document-card input[type="file"] { width: 100%; min-width: 0; max-width: 100%; }
/* Puerta de acceso del cliente: pedir y escribir el codigo de WhatsApp. */
.access-gate { display: grid; gap: 6px; margin: 0 0 18px; padding: 22px; border: 1px solid var(--b2-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px #0f172a14; }
/* El atributo hidden no gana contra un display explicito, y estas secciones
   traen display: grid. Sin esta regla seguian visibles debajo de la puerta de
   acceso aunque el JavaScript las marcara como ocultas. */

.access-gate h2 { margin: 0; color: var(--b2-ink); font-size: 1.18rem; }
.access-gate p:not(.eyebrow):not(.result) { margin: 0; color: #64748b; font-size: .86rem; line-height: 1.5; }
.access-gate-actions { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.access-gate-actions label { display: grid; gap: 5px; color: #64748b; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.access-gate-actions input { width: 130px; height: 40px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: var(--b2-ink); padding: 0 12px; font: inherit; font-size: 1.05rem; letter-spacing: .22em; text-align: center; }
.access-gate-actions button { min-height: 40px; border: 0; border-radius: 10px; background: var(--b2-brand-600); color: #fff; font: inherit; font-weight: 700; padding: 0 15px; cursor: pointer; }
.access-gate-actions button:hover { background: var(--b2-brand-700); }
@media (max-width: 560px) { .access-gate-actions { align-items: stretch; flex-direction: column; } .access-gate-actions input { width: 100%; } }
.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 var(--b2-brand-300); border-radius: 12px; background: linear-gradient(90deg, var(--b2-brand-50), var(--b2-brand-100)); 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: var(--b2-brand-800); 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; align-content: start; gap: 14px; padding-top: 1px; }
.plans-sidebar-body { display: grid; gap: 25px; }
/* El boton para plegar los filtros solo existe en telefono: ver la consulta de 720px. */
.filters-toggle { display: none; }
.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: var(--b2-brand-800); }
.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: var(--b2-brand-100); 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 .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; }
  /* En telefono los tres filtros llenaban la primera pantalla completa y el
     primer plan quedaba debajo del pliegue. Se pliegan detras del boton. */
  .filters-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; border: 1px solid var(--b2-line); border-radius: 10px; background: #fff; color: var(--b2-ink); padding: 0 14px; font: inherit; font-size: .88rem; font-weight: 650; text-align: left; cursor: pointer; }
  .filters-toggle:after { flex: 0 0 auto; color: #64748b; content: "\25be"; font-size: .78rem; transition: transform .18s ease; }
  .filters-toggle[aria-expanded="true"] { border-color: var(--b2-brand-600); }
  .filters-toggle[aria-expanded="true"]:after { transform: rotate(180deg); }
  .filters-toggle-state { overflow: hidden; min-width: 0; color: #64748b; font-size: .76rem; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .plans-sidebar-body { display: none; grid-template-columns: 1fr 1fr; gap: 20px; }
  .plans-sidebar.is-open .plans-sidebar-body { display: grid; }
  .plan-search-label, .clear-catalog-filters { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  /* En el telefono se escondia la navegacion entera, y con ella el unico acceso
     al panel que hay arriba. Quien opera desde el celular se quedaba sin
     entrada salvo el enlace del pie, enterrado entre los avisos legales. Se
     esconden los enlaces de catalogo, que en pantalla chica estorban, y se deja
     el de administracion, que es el que hace falta a mano. */
  .storefront-nav { display: flex; gap: 0; }
  .storefront-nav a:not(.storefront-nav-admin) { display: none; }
  .storefront-nav a.storefront-nav-admin { margin-left: 0; padding-left: 0; border-left: 0; color: var(--b2-brand-100); }
  .storefront-header-inner { min-height: 60px; }
  .catalog-results .plans { grid-template-columns: 1fr; }
  .plans-sidebar-body { 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); }
}

/* --- Navegacion del expediente y enlaces de los documentos --- */
/* La navegacion solo aparece para quien entra con sesion del panel. */
.dossier-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}
.dossier-nav-abajo { margin: 24px 0 8px; }

.dossier-nav a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.06);
  color: #1d4ed8;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.dossier-nav a:hover { background: rgba(37, 99, 235, 0.12); }

/* Los enlaces viven dentro de la tarjeta del documento, debajo del nombre. */
.document-links {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.document-links a {
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: underline;
}

/* --- Acomodo de la ultima columna de la tabla de solicitudes --- */
/* Los tres controles se encimaban: no tenian contenedor ni separacion. El
   contenedor propio los deja en una fila que se parte sola cuando no cabe. */
td.row-actions { white-space: normal; vertical-align: top; }
.row-actions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.row-actions-inner .dossier-admin-link { flex-basis: 100%; margin: 0; }
/* Los dos botones se reparten el ancho de la columna: asi caben en la misma
   linea aunque la tabla se estreche, en vez de quedar uno debajo del otro. */
.row-actions-inner .history,
.row-actions-inner .save {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 9px 10px;
  white-space: nowrap;
  text-align: center;
}
td.row-actions .history-box { margin-top: 8px; }

/* "Historial" traia texto oscuro sobre azul oscuro: ilegible. Se vuelve boton
   secundario, que ademas es lo correcto al lado de "Guardar". */
.row-actions-inner .history {
  border: 1px solid var(--b2-brand-600, #2563eb);
  background: #fff;
  color: var(--b2-brand-700, #1d4ed8);
}
.row-actions-inner .history:hover { background: #eef4ff; }
.row-actions-inner .history:disabled { opacity: .55; }

/* --- Menos negritas en el panel --- */
/* Casi todo venia en 750-900. Se baja a pesos legibles para que la jerarquia
   la marquen el tamano y el color, no el grosor de todo. */
.ops-nav a,
.ops-topbar > p,
.metric-card p,
.crm-filter-card label,
.user-filter-row label,
.activity-form label,
.status-chip,
.crm-link,
.history,
.save,
.request-card-details span,
.customer-request-summary strong,
.contact-item span,
.copy-contact,
.action-tone,
.ops-brand small,
.user-indicator strong { font-weight: 600; }

.ops-brand,
.role-tag,
.role-badge,
.user-initial,
.customer-avatar,
.profile-avatar,
.user-avatar,
.eyebrow { font-weight: 700; }

.metric-card strong,
.ops-heading h1,
.profile-main h1 { font-weight: 800; }

/* --- Zona de eliminacion de datos --- */
/* Se lee distinta del resto del panel sin gritar: borde rojo tenue y fondo casi
   blanco. Va al final de la ficha porque no es una accion de todos los dias. */
.erase-card {
  margin-top: 22px;
  border: 1px solid #f0c9cd;
  background: #fffbfb;
}
.erase-card .eyebrow { color: #b42318; }
.erase-copy {
  margin: 0 0 14px;
  max-width: 62ch;
  color: #5e718b;
  font-size: .82rem;
  line-height: 1.55;
}
.erase-pending {
  margin: 0 0 12px;
  border-left: 3px solid #b42318;
  padding: 9px 12px;
  border-radius: 0 8px 8px 0;
  background: #fdf0ef;
  color: #7a271a;
  font-size: .82rem;
}
.erase-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.erase-form label {
  display: grid;
  gap: 5px;
  flex: 1 1 220px;
  color: #5e718b;
  font-size: .74rem;
  font-weight: 600;
}
.erase-form input {
  border: 1px solid #d9c2c4;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
  font-size: .84rem;
}
.erase-form input:focus-visible { outline: 2px solid #b42318; outline-offset: 1px; }
/* El selector lleva el del formulario a proposito: styles.css pinta de azul
   todo button[type="submit"], y ese selector le gana a una clase sola. */
.erase-form .erase-button {
  border: 0;
  border-radius: 10px;
  background: #b42318;
  color: #fff;
  padding: 11px 16px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.erase-form .erase-button:hover { background: #99190f; }
.erase-form .erase-button:disabled { opacity: .55; cursor: not-allowed; }

/* Aviso de peticiones pendientes en la bandeja de solicitudes. */
.erase-requests { display: grid; gap: 10px; margin-bottom: 16px; }
.erase-requests.hidden { display: none; }
.erase-request-item {
  border: 1px solid #f0c9cd;
  border-left: 4px solid #b42318;
  border-radius: 12px;
  padding: 14px 16px;
  background: #fffbfb;
}
.erase-request-item strong { display: block; color: #7a271a; font-size: .88rem; font-weight: 700; }
.erase-request-item p { margin: 4px 0 0; color: #5e718b; font-size: .8rem; }
.erase-request-item .erase-request-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--b2-brand-700, #1d4ed8);
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
}
.erase-request-item .erase-request-link:hover { text-decoration: underline; }

/* --- Los avisos legales dejan de ser huerfanos --- */
/* privacidad.html y eliminacion-datos.html solo se enlazaban entre si: desde la
   tienda no habia forma de llegar, y Meta exige que las dos sean alcanzables. */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}
.footer-legal a { white-space: nowrap; }
@media (max-width: 720px) {
  .footer-legal { gap: 8px 14px; }
}

/* --- Un fallo de una integración tiene que verse distinto de "todo bien" --- */
/* Antes el aviso solo tenia dos aspectos y las solicitudes que fallaban se
   contaban como pendientes: un token malo se veia igual que uno bueno. */
.integration-status.status-error {
  display: inline-block;
  border-radius: 999px;
  padding: 7px 11px;
  background: #fdece9;
  color: #9a2318;
  font-size: .8rem;
  font-weight: 700;
}
.integration-note {
  margin: 8px 0 0;
  border-left: 3px solid var(--b2-brand-600, #2563eb);
  padding: 8px 11px;
  border-radius: 0 8px 8px 0;
  background: #f1f6ff;
  color: #2f4a6b;
  font-size: .78rem;
  line-height: 1.45;
}

/* El lanzador de NORA flota fijo abajo a la derecha, asi que al llegar al final
   de la pagina tapaba el ultimo enlace del pie. Se reserva ese espacio: 22px de
   separacion mas los 50 de alto del boton, con holgura. */
.storefront-footer { padding-bottom: 88px; }
@media (max-width: 720px) {
  .storefront-footer { padding-bottom: 92px; }
}

/* .integration-form trae display:flex, y una clase le gana al [hidden] del
   navegador: el formulario seguia visible aunque el codigo lo escondiera. */


/* --- Puesta en marcha de una marca --- */
/* La lista tiene que decir de un vistazo qué falta, así que el estado va por
   color en el borde izquierdo y no solo en la etiqueta. */
.puesta-en-marcha {
  display: grid;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--b2-line, #e2e8f0);
}
.puesta-en-marcha h4 {
  margin: 2px 0 0;
  color: var(--b2-ink, #0f172a);
  font-size: .95rem;
  font-weight: 700;
}
.paso-lista { display: grid; gap: 8px; }
.paso-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--b2-line, #e2e8f0);
  border-left: 4px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}
.paso-item strong { display: block; color: var(--b2-ink, #0f172a); font-size: .86rem; font-weight: 700; }
.paso-item p { margin: 3px 0 0; color: var(--b2-muted, #64748b); font-size: .78rem; line-height: 1.45; }
.paso-falta, .paso-advertencia, .paso-resultado {
  display: block;
  margin-top: 6px;
  font-size: .75rem;
  line-height: 1.4;
}
.paso-falta { color: #92400e; }
/* Lo que falta va en naranja; como quedó configurado, en gris. Iban juntos y un
   paso en verde mostraba texto naranja debajo, que se lee como un problema. */
.paso-nota { color: #64748b; }
.paso-advertencia { color: #b42318; }
.paso-resultado { color: var(--b2-muted, #64748b); }
.paso-resultado-error { color: #b42318; }
.paso-lado { display: grid; gap: 8px; justify-items: end; flex: 0 0 auto; }
.paso-estado-comprobado { border-left-color: #16a34a; }
.paso-estado-capturado { border-left-color: #d97706; }
.paso-estado-falta { border-left-color: #cbd5e1; }
.paso-bloqueado { opacity: .62; }
/* Boton secundario propio: .history se pinta azul solido con texto oscuro fuera
   de la bandeja de solicitudes, y ahi no se lee. */
.paso-comprobar {
  border: 1px solid var(--b2-brand-600, #2563eb);
  border-radius: 999px;
  background: #fff;
  color: var(--b2-brand-700, #1d4ed8);
  padding: 8px 14px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.paso-comprobar:hover { background: #eef4ff; }
.paso-comprobar:disabled { opacity: .5; cursor: not-allowed; }
/* La etiqueta de estado se alinea arriba, a la altura del titulo del paso. */
.paso-lado { align-self: flex-start; }
/* Y el boton de copiar tampoco reusa .copy-contact, que trae posicion de
   rejilla fija para la tarjeta de contacto y se montaba sobre el valor. */
.pegar-copiar {
  border: 1px solid var(--b2-line, #cbd5e1);
  border-radius: 8px;
  background: #fff;
  color: var(--b2-brand-700, #1d4ed8);
  padding: 5px 10px;
  font: inherit;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
}
.pegar-copiar:hover { background: #eef4ff; }

/* Los valores que el sistema genera para pegar en Meta. */
.pegar-en-meta {
  display: grid;
  gap: 7px;
  border: 1px solid var(--b2-line, #e2e8f0);
  border-radius: 12px;
  padding: 13px 15px;
  background: #f8fafc;
}
.pegar-en-meta > small { color: var(--b2-muted, #64748b); font-size: .75rem; }
.pegar-fila {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.pegar-fila span { color: var(--b2-muted, #64748b); font-size: .74rem; font-weight: 600; }
.pegar-fila code {
  overflow: hidden;
  color: var(--b2-brand-700, #1d4ed8);
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whatsapp-form {
  display: grid;
  /* auto-fit y no dos columnas fijas: este formulario vive dentro de la tarjeta
     de una marca, que en el Maestro es angosta aunque la ventana sea ancha. Con
     columnas fijas los campos se salían de la tarjeta, y la media query no
     ayudaba porque mide la ventana, no el contenedor. */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 11px;
  border: 1px solid var(--b2-line, #e2e8f0);
  border-radius: 12px;
  padding: 15px;
  background: #fff;
}
.whatsapp-form > .eyebrow, .whatsapp-form > small, .whatsapp-form > .wide,
.whatsapp-form > .whatsapp-encender, .whatsapp-form > .admin-status { grid-column: 1 / -1; }
.whatsapp-form > small { margin-top: -6px; color: var(--b2-muted, #64748b); font-size: .76rem; line-height: 1.45; }
.whatsapp-form label { display: grid; gap: 5px; color: var(--b2-muted, #64748b); font-size: .73rem; font-weight: 600; }
.whatsapp-form input[type="text"], .whatsapp-form input[type="password"] {
  /* Un input trae ancho propio —unos 20 caracteres— y no encoge solo: sin esto
     se salía de su columna dentro de la tarjeta de la marca. */
  width: 100%;
  min-width: 0;
  border: 1px solid var(--b2-line, #cbd5e1);
  border-radius: 9px;
  padding: 9px 11px;
  font: inherit;
  font-size: .83rem;
}
.whatsapp-encender {
  display: flex !important;
  align-items: center;
  gap: 9px;
  color: var(--b2-ink, #0f172a) !important;
  font-size: .8rem;
}
.whatsapp-form > button { justify-self: start; }
@media (max-width: 720px) {
  .whatsapp-form { grid-template-columns: 1fr; }
  .paso-item { flex-direction: column; }
  .paso-lado { justify-items: start; }
  .pegar-fila { grid-template-columns: 1fr auto; }
  .pegar-fila code { grid-column: 1 / -1; }
}

/* Cambiar la propia contraseña, desde el nombre de la barra superior.
   Clases con prefijo propio: reusar .history o .secondary-button a secas ya
   trajo antes botones ilegibles fuera de su pantalla. */
.clave-abrir {
  margin-left: 12px;
  border: 1px solid #ffffff59;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  padding: 7px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.clave-abrir:hover { background: #ffffff1f; }
.clave-dialogo {
  width: min(430px, calc(100vw - 32px));
  border: 1px solid #d9e6ef;
  border-radius: 18px;
  padding: 0;
  background: #fff;
  color: var(--b2-ink, #0f172a);
  box-shadow: 0 24px 60px #04122c33;
}
.clave-dialogo::backdrop { background: #04122c6e; }
.clave-forma {
  display: grid;
  gap: 12px;
  padding: 24px;
}
.clave-forma h2 { margin: 0; font-size: 1.18rem; letter-spacing: -.03em; }
.clave-forma .eyebrow { margin: 0; }
.clave-nota { margin: 0; color: #5f7488; font-size: .78rem; line-height: 1.45; }
.clave-forma label {
  display: grid;
  gap: 6px;
  color: #56708a;
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.clave-forma input {
  width: 100%;
  border: 1px solid #cadbe7;
  border-radius: 10px;
  padding: 10px 11px;
  font: inherit;
  font-size: .86rem;
  text-transform: none;
}
.clave-forma .admin-status { margin: 0; min-height: 1.1em; font-size: .78rem; }
.clave-error { color: #b23835; }
.clave-listo { color: #16734a; }
.clave-acciones { display: flex; justify-content: flex-end; gap: 9px; }
.clave-acciones button {
  border: 0;
  border-radius: 10px;
  background: #075be5;
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 850;
  padding: 11px 14px;
  cursor: pointer;
}
.clave-acciones .secondary-button {
  border: 1px solid #c7d8e5;
  background: #fff;
  color: #17446d;
}
/* En pantalla angosta se encoge, pero no se esconde: para operador y consulta
   este boton es la unica forma de cambiar su contrasena. */
@media (max-width: 560px) {
  .clave-abrir { margin-left: 8px; padding: 6px 7px; font-size: .62rem; }
}

/* Botón de WhatsApp de la tienda. Va arriba del lanzador de NORA, no encima:
   el lanzador mide 50px y vive a 22px del borde, así que este empieza a 84px.
   Clases con prefijo propio para no heredar estilos de otra pantalla. */
.whatsapp-launcher {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 84px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border-radius: 999px;
  background: #1eb355;
  color: #fff;
  padding: 6px 16px 6px 10px;
  text-decoration: none;
  box-shadow: 0 12px 28px #0b6b3033;
}
.whatsapp-launcher:hover { background: #189347; }
/* display en una clase le gana al [hidden] del navegador, y el boton se quedaba
   a la vista aunque no hubiera enlace. Ya paso una vez con el formulario de
   integracion; aqui se cierra de una. */
.whatsapp-launcher[hidden],
.footer-legal a[data-brand-whatsapp][hidden] { display: none !important; }
.whatsapp-launcher .whatsapp-mark { flex: 0 0 auto; width: 26px; height: 26px; fill: currentColor; }
.whatsapp-launcher > span:last-child { display: grid; gap: 1px; text-align: left; }
.whatsapp-launcher strong { font-size: .75rem; letter-spacing: .02em; }
.whatsapp-launcher small { color: #dcf7e6; font-size: .65rem; }
.footer-legal a[data-brand-whatsapp] { color: #157f3c; font-weight: 700; }
@media (max-width: 720px) {
  .whatsapp-launcher { right: 16px; bottom: 74px; }
  .whatsapp-launcher small { display: none; }
}
/* El acceso al panel vive en el menu, pero no compite con lo que le importa a
   un cliente: separado del resto y en un tono mas bajo. */
.storefront-nav a.storefront-nav-admin { margin-left: 4px; padding-left: 20px; border-left: 1px solid rgba(217,234,255,.35); color: #a9c6e8; }
.storefront-nav a.storefront-nav-admin:hover { color: #fff; }

/* Ocho veces hubo que escribir una regla como las de arriba, una por pantalla,
   siempre despues de que alguien encontrara el elemento a la vista en
   produccion: el atributo hidden no le gana a un display puesto por una clase.
   Esta regla lo arregla de una vez y para lo que venga. */
[hidden] { display: none !important; }

/* Un elemento con hidden se oculta aunque su clase le ponga display. */
.offers-banner[hidden], .brand-fields-section[hidden], .config-item [hidden], .config-panel [hidden] { display: none !important; }

/* Ofertas, campos extra y promociones por plan de cada marca. Todo sale de las
   variables de la marca, asi que cambia con sus colores. */
.brand-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 22px 0 30px; }
.brand-offers[hidden] { display: none; }
.brand-offer { display: flex; align-items: stretch; gap: 14px; overflow: hidden; min-height: 92px; border: 1px solid var(--b2-brand-300); border-radius: 12px; background: linear-gradient(90deg, var(--b2-brand-50), var(--b2-brand-100)); color: var(--b2-brand-700); text-decoration: none; }
a.brand-offer:hover { border-color: var(--b2-brand-500); }
.brand-offer img { flex: 0 0 38%; max-width: 220px; min-height: 92px; object-fit: cover; }
.brand-offer-copy { display: grid; align-content: center; gap: 3px; padding: 14px 18px; }
.brand-offer.has-image .brand-offer-copy { padding-left: 0; }
.brand-offer strong { color: var(--b2-brand-800); font-size: .9rem; }
.brand-offer small { color: var(--b2-brand-700); font-size: .74rem; line-height: 1.4; }
.brand-offer em { color: var(--b2-muted); font-size: .68rem; font-style: normal; }
.plan-card .plan-offer { display: block; margin: 4px 0 2px; color: var(--b2-accent); font-size: .68rem; font-style: normal; font-weight: 700; }
.brand-fields { display: grid; gap: 10px; }
.brand-fields[hidden] { display: none; }
.brand-field { display: grid; gap: 5px; color: var(--b2-brand-100); font-size: .76rem; font-weight: 600; }
.brand-field small { color: var(--b2-brand-200); font-size: .68rem; font-weight: 400; line-height: 1.35; }
@media (max-width: 760px) {
  .brand-offers { grid-template-columns: 1fr; margin: 18px 0 24px; }
  .brand-offer img { flex-basis: 34%; }
}

/* Maestro: catalogo, campos y ofertas de cada marca. Al abrirse, la tarjeta
   ocupa todo el ancho: la tabla de 21 planes no cabe en media columna. */
.brand-card:has(.brand-config[open]) { grid-column: 1 / -1; }
.brand-config { margin-top: 16px; border: 1px solid var(--b2-line); border-radius: 13px; background: #fff; }
.brand-config > summary { padding: 13px 16px; color: var(--b2-brand-700); font-size: .82rem; font-weight: 700; cursor: pointer; }
.brand-config[open] > summary { border-bottom: 1px solid var(--b2-line); }
.config-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.config-tabs button { border: 1px solid var(--b2-line); border-radius: 999px; background: #fff; color: var(--b2-copy); padding: 7px 13px; font-size: .75rem; font-weight: 600; cursor: pointer; }
.config-tabs button.active { border-color: var(--b2-brand-600); background: var(--b2-brand-50); color: var(--b2-brand-700); }
.config-panel { display: grid; gap: 14px; padding: 14px 16px 18px; }
.config-hint { margin: 0; color: var(--b2-muted); font-size: .76rem; line-height: 1.5; }
.config-empty { margin: 0; color: var(--b2-muted); font-size: .78rem; font-style: italic; }
.config-table-wrap { overflow-x: auto; border: 1px solid var(--b2-line); border-radius: 10px; }
.config-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .76rem; }
.config-table th { position: sticky; top: 0; background: var(--b2-panel); color: var(--b2-muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; padding: 8px; }
.config-table td { border-top: 1px solid var(--b2-line); padding: 6px 8px; vertical-align: middle; }
.config-table td strong, .config-table td small { display: block; }
.config-table td small { color: var(--b2-muted); font-size: .68rem; }
.config-table input:not([type=checkbox]) { width: 100%; border: 1px solid #cadbe7; border-radius: 7px; padding: 7px 8px; font: inherit; }
.config-table input[name=precio], .config-table input[name=orden] { max-width: 90px; }
.config-form, .config-list { display: grid; gap: 10px; }
.config-form > button, .config-item button[type=submit], .config-panel > button { justify-self: start; border: 0; border-radius: 10px; background: var(--b2-brand-600); color: #fff; font: inherit; font-size: .8rem; font-weight: 700; padding: 10px 14px; cursor: pointer; }
.config-item { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--b2-line); border-radius: 11px; background: var(--b2-panel); }
.config-item.is-off { opacity: .65; }
.config-item > label { display: grid; gap: 5px; color: #5a7489; font-size: .7rem; font-weight: 700; }
.config-item > label.wide, .config-item .wide { grid-column: 1 / -1; }
.config-item input:not([type=checkbox]), .config-item select { width: 100%; border: 1px solid #cadbe7; border-radius: 8px; background: #fff; padding: 8px 9px; font: inherit; }
.config-item small { color: var(--b2-muted); font-size: .66rem; font-weight: 400; }
.config-item .admin-status { grid-column: 1 / -1; margin: 0; }
.config-check { display: flex !important; align-items: center; gap: 6px; }
.config-fixed { color: var(--b2-ink); font-size: .78rem; }
.config-plan-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; margin: 0; padding: 10px; border: 1px solid var(--b2-line); border-radius: 9px; background: #fff; }
.config-plan-picks legend { color: #5a7489; font-size: .7rem; font-weight: 700; padding: 0 4px; }
.config-plan-picks label { font-size: .72rem; font-weight: 500; }
.config-offer { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--b2-line); border-radius: 11px; background: #fff; }
.config-offer img { width: 96px; height: 54px; border-radius: 7px; object-fit: cover; }
.config-offer > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
.config-offer small { color: var(--b2-muted); font-size: .7rem; }
.config-offer-preview { max-width: 220px; max-height: 110px; margin-top: 6px; border-radius: 8px; object-fit: cover; }
.config-badge { justify-self: start; border-radius: 999px; padding: 2px 8px; font-size: .64rem; font-weight: 700; }
.config-badge.is-live { background: #dcfce7; color: #166534; }
.config-badge.is-next { background: var(--b2-brand-50); color: var(--b2-brand-700); }
.config-badge.is-off { background: #f1f5f9; color: #64748b; }
@media (max-width: 760px) {
  .config-item { grid-template-columns: 1fr; }
  .config-offer { flex-wrap: wrap; }
}

/* Conversaciones de WhatsApp: lista a la izquierda, el hilo a la derecha. */
.conversations-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.conversations-list-panel { display: grid; gap: 10px; max-height: calc(100vh - 210px); overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr); }
.conversations-search { display: grid; gap: 5px; color: #5a7489; font-size: .72rem; font-weight: 700; }
.conversations-search input { border: 1px solid var(--b2-line); border-radius: 9px; padding: 9px 10px; font: inherit; }
.conversation-list { display: grid; align-content: start; gap: 4px; overflow-y: auto; }
.conversation-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; width: 100%; border: 1px solid transparent; border-radius: 11px; background: transparent; padding: 9px; text-align: left; cursor: pointer; font: inherit; }
.conversation-item:hover { background: var(--b2-panel); }
.conversation-item.active { border-color: var(--b2-brand-300); background: var(--b2-brand-50); }
.conversation-avatar { display: grid; place-items: center; width: 36px; height: 36px; grid-row: span 2; border-radius: 50%; background: var(--b2-brand-100); color: var(--b2-brand-700); font-size: .72rem; font-weight: 800; }
.conversation-item-copy { display: grid; min-width: 0; }
.conversation-item-copy strong { overflow: hidden; color: var(--b2-ink); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.conversation-item-copy small { color: var(--b2-muted); font-size: .7rem; }
.conversation-item time { color: var(--b2-muted); font-size: .66rem; }
.conversation-tag { grid-column: 2 / -1; justify-self: start; border-radius: 999px; background: var(--b2-brand-50); color: var(--b2-brand-700); padding: 1px 7px; font-size: .62rem; font-weight: 700; }
.conversation-tag.is-alert { background: #fee2e2; color: #b42318; }
.conversation-none { margin: 8px 0; color: var(--b2-muted); font-size: .8rem; }
.conversation-thread-panel { min-height: 420px; }
.conversation-empty { display: grid; place-content: center; gap: 6px; min-height: 380px; color: var(--b2-muted); text-align: center; }
.conversation-empty p { margin: 0; font-size: .9rem; }
.conversation-empty small { max-width: 420px; font-size: .74rem; line-height: 1.5; }
.conversation-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--b2-line); }
.conversation-head h2 { margin: 0; color: var(--b2-ink); font-size: 1.15rem; }
.conversation-head p { margin: 4px 0 0; color: var(--b2-muted); font-size: .76rem; }
.conversation-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.conversation-delete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 12px; border: 1px solid #fecaca; border-radius: 10px; background: #fef2f2; }
.conversation-delete p { flex-basis: 100%; margin: 0; color: #7f1d1d; font-size: .78rem; }
.conversation-delete input { border: 1px solid #fca5a5; border-radius: 8px; padding: 8px 10px; font: inherit; }
.conversation-delete button[type=submit] { border: 0; border-radius: 8px; background: #b42318; color: #fff; padding: 9px 13px; font: inherit; font-weight: 700; cursor: pointer; }
.conversation-messages { display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 330px); min-height: 300px; overflow-y: auto; margin-top: 12px; padding: 14px; border-radius: 12px; background: #efeae2; }
.conversation-day { align-self: center; margin: 8px 0 4px; border-radius: 7px; background: #fff; color: var(--b2-muted); padding: 3px 10px; font-size: .66rem; font-weight: 700; }
.conversation-bubble { max-width: min(78%, 560px); border-radius: 10px; padding: 7px 10px 5px; box-shadow: 0 1px 1px #0000000f; }
.conversation-bubble p { margin: 0; color: #111b21; font-size: .84rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.conversation-bubble time { display: block; margin-top: 2px; color: #667781; font-size: .62rem; text-align: right; }
.conversation-bubble.is-client { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.conversation-bubble.is-nora { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 3px; }
.conversation-bubble.is-note p { color: #667781; font-style: italic; }
.conversation-reads { margin-top: 10px; color: var(--b2-muted); font-size: .7rem; }
@media (max-width: 900px) {
  .conversations-layout { grid-template-columns: 1fr; }
  .conversations-list-panel { max-height: 360px; }
  .conversation-messages { max-height: 60vh; }
}