/* Aetherium Business — componentes B2B sobre el sistema visual principal (styles.css + theme.css).
   No redefine colores ni tipografías: usa los tokens del sitio para verse idéntico a la página principal. */

/* ---------- Avisos y estados ---------- */
.b2b .notice { min-height: 1.5rem; margin: .4rem 0 0; font-size: .92rem; color: var(--text-2); }
.b2b .notice.error, .b2b .error { color: #b4233a; }
.b2b .empty { grid-column: 1 / -1; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgb(255 255 255 / 60%); color: var(--text-3); text-align: center; }
.b2b .tag { display: inline-flex; align-items: center; padding: .22rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6449c6; background: #f0ebff; border: 1px solid #d8ccff; }
.b2b .honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Página Business ---------- */
.b2b .hero { background: radial-gradient(circle at 82% 8%, rgb(218 207 255 / 60%), transparent 38%), linear-gradient(145deg, #fff 0%, #faf9fd 58%, #f3f0fb 100%); }
.business-preview { border: 1px solid #e2deec; border-radius: 24px; background: #fff; box-shadow: 0 28px 65px rgb(42 33 83 / 13%); padding: 1.25rem; transform: rotate(1deg); }
.business-preview__top { display: flex; align-items: center; gap: .75rem; padding: .2rem .2rem 1rem; border-bottom: 1px solid #eae7f0; }
.business-preview__mark { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 10px; background: #322287; color: #fff; font: 800 1.1rem var(--font-display); }
.business-preview__top div { display: grid; gap: .05rem; }
.business-preview__top strong { color: #211a42; font-size: .88rem; }
.business-preview__top small, .business-preview__steps small { color: #77728a; font-size: .75rem; }
.business-preview__dots { margin-left: auto; align-self: start; color: #9892ab; font-size: 1.3rem; line-height: .8; }
.business-preview__intro { display: grid; gap: .45rem; padding: 1.45rem .35rem 1rem; }
.business-preview__intro strong { max-width: 24rem; color: #201b39; font: 700 clamp(1.25rem, 2vw, 1.65rem)/1.3 var(--font-display); letter-spacing: -.035em; }
.business-preview__eyebrow { color: #6d50d2; font-size: .7rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.business-preview__steps { display: grid; gap: .65rem; }
.business-preview__steps > div { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border: 1px solid #ebe8f2; border-radius: 13px; background: #fbfafc; }
.business-preview__steps > div > span { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px; background: #eee9ff; color: #5c40bb; font-weight: 800; font-size: .75rem; }
.business-preview__steps > div > div { display: grid; gap: .08rem; }
.business-preview__steps strong { color: #28213f; font-size: .84rem; }
.business-preview__steps b { margin-left: auto; color: #8977cc; }
.business-preview__foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .4rem; padding: 1rem .3rem .15rem; color: #6f6980; font-size: .73rem; font-weight: 700; }
.b2b-sectors { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); }
.b2b-sectors .card { padding: 1.4rem; display: flex; flex-direction: column; gap: .45rem; }
.b2b-sectors .card h3 { font-size: 1.08rem; margin: 0; }
.b2b-sectors .card p { font-size: .9rem; flex: 1; }
.b2b-link { margin-top: .4rem; font-size: .88rem; font-weight: 700; color: #5f43d0; text-decoration: none; }
.b2b-link:hover { color: #3d25af; text-decoration: underline; }
#catalog .card { display: flex; flex-direction: column; gap: .7rem; }
#catalog .card p { flex: initial; }
#catalog .card .btn { align-self: flex-start; }
.b2b-toolbar { margin-bottom: 1.4rem; padding: 1.3rem 1.5rem; border: 1px solid #dfdbe9; border-radius: 18px; background: #fff; box-shadow: 0 12px 35px rgb(35 29 68 / 6%); }
.b2b-toolbar label { margin: 0; }
.b2b-toolbar input, .b2b-toolbar select { min-height: 2.9rem; border-color: #d9d5e4; background: #fbfafc; }
.b2b-toolbar :is(input,select):focus { background: #fff; border-color: #7458d8; box-shadow: 0 0 0 4px rgb(116 88 216 / 12%); }
#catalogo { background: linear-gradient(180deg, #f7f6fa 0%, #fbfafc 55%, #fff 100%); }
#catalogo .section-head { max-width: 44rem; }
#catalogo .section-head h2 { letter-spacing: -.045em; }
.b2b .contact { align-items: start; }
.b2b .contact .section-head { margin-bottom: 1.6rem; }
.b2b-point { display: grid; gap: .2rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 5%); }
.b2b-point b { font-family: var(--font-display); color: #1e1a36; }
.b2b-point span { color: var(--text-2); font-size: .93rem; }
.b2b-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem; }
.b2b-cta .hero__cta { margin-top: 0; }

/* ---------- Formularios (heredan .form del sitio) ---------- */
.b2b .form h3 { font-size: 1.1rem; margin-top: .4rem; color: #1e1a36; }
.b2b .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.b2b .form fieldset { margin: 0; padding: 1rem 1.1rem; border: 1px solid #e1dced; border-radius: 14px; background: #faf9fd; }
.b2b .form legend { padding: 0 .4rem; font-size: .88rem; font-weight: 700; color: #37334a; }
.b2b .form label.check, .b2b label.check { display: flex; flex-direction: row; align-items: flex-start; gap: .65rem; font-weight: 500; font-size: .9rem; color: var(--text-2); }
.b2b label.check input { width: auto; margin-top: .25rem; accent-color: #6847f5; flex: none; }
.b2b label.check a { color: #5f43d0; }
#sector-needs-list label.check { padding: .55rem .7rem; border-radius: 10px; background: #fff; border: 1px solid #e4e1ec; }
.b2b .list-item { padding: 1rem; border: 1px solid #e4e1ec; border-radius: 14px; background: #faf9fd; margin: 0 0 .8rem; }
.b2b .list-item .form-grid { grid-template-columns: 2fr 1fr 1fr; }
.b2b .form .btn[disabled], .b2b button[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
#captcha:empty { display: none; }

/* ---------- Botones generados por la aplicación (portal y operaciones) ---------- */
.b2b-app :where(button:not(.menu-btn):not(.btn)), .b2b :where(.button) {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: .92rem; font-weight: 800; letter-spacing: -.015em; cursor: pointer; text-decoration: none;
  color: #fff; background: var(--grad); box-shadow: 0 12px 27px rgb(93 63 211 / 21%);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.b2b-app :where(button:not(.menu-btn):not(.btn)):hover, .b2b :where(.button):hover { transform: translateY(-2px); box-shadow: 0 17px 35px rgb(93 63 211 / 28%); }
.b2b .secondary, .b2b-app button.secondary { color: #251c5d; background: #fff; border-color: #ded9f1; box-shadow: 0 6px 18px rgb(41 28 98 / 5%); }
.b2b .secondary:hover, .b2b-app button.secondary:hover { background: #f1ecff; border-color: #b7a9ed; }
.b2b .text-button, .b2b-app button.text-button { padding: .4rem .2rem; color: #5f43d0; background: none; border: 0; box-shadow: none; font-weight: 700; }
.b2b .text-button:hover { transform: none; box-shadow: none; text-decoration: underline; }
.b2b .actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

/* ---------- Espacio de trabajo (portal y operaciones) ---------- */
.b2b-app section { padding: 0; }
.b2b-app { padding: clamp(2.5rem, 6vw, 4.5rem) 0; min-height: 60vh; }
.b2b-app .card { padding: 1.6rem; margin-bottom: 1.1rem; }
.b2b-app .card:hover { transform: none; }
.b2b-app h1 { font-size: clamp(2rem, 4.4vw, 3rem); color: #1c1735; margin: .6rem 0 .8rem; }
.b2b-app h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: #1c1735; margin: .4rem 0 .8rem; }
.b2b-app h3 { font-size: 1.12rem; color: #1e1a36; margin-bottom: .4rem; }
.b2b-app p { color: var(--text-2); }
.b2b-app .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.1rem; }
.b2b-app .section-head { max-width: none; display: flex; justify-content: space-between; align-items: end; gap: 1.2rem; flex-wrap: wrap; margin: 2rem 0 1.2rem; }
.b2b-app label { display: grid; gap: .4rem; margin-bottom: 1rem; font-size: .88rem; font-weight: 600; color: #37334a; }
.b2b-app input, .b2b-app select, .b2b-app textarea { width: 100%; min-width: 0; font: inherit; font-size: .95rem; color: #241e40; background: #faf9fd; border: 1px solid #dcd7e9; border-radius: 12px; padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s; }
.b2b-app input:focus, .b2b-app select:focus, .b2b-app textarea:focus { outline: none; border-color: #7755e7; box-shadow: 0 0 0 4px rgb(119 85 231 / 16%); }
.b2b-app textarea { min-height: 7rem; resize: vertical; }
.b2b-app .auth-card { max-width: 32rem; margin: 1rem auto; padding: 2rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid #e1dced; box-shadow: 0 25px 55px rgb(42 33 83 / 9%); }
.b2b-app .auth-card form { margin-top: 1.2rem; }
.b2b-app .auth-card .actions { margin-top: .8rem; }
.b2b-app .auth-card h1 { font-size: clamp(1.8rem, 4vw, 2.3rem); }
.workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1rem; }
.workspace-heading h1 { margin: .3rem 0; }
.b2b-app .tabs { display: flex; gap: .45rem; overflow-x: auto; padding: .4rem 0 1.4rem; scrollbar-width: thin; }
.b2b-app .tabs button { flex: none; padding: .55rem 1rem; font-size: .86rem; font-weight: 700; color: #4d4a63; background: #fff; border: 1px solid #e4e1ec; box-shadow: none; }
.b2b-app .tabs button:hover { color: #3d25af; background: #eeeaff; transform: none; box-shadow: none; }
.b2b-app .tabs button[aria-selected="true"] { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 9px 22px rgb(93 63 211 / 18%); }
.b2b-app .metric { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; color: #241b53; }
.b2b-app .table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid #e4e1ec; border-radius: var(--radius); background: #fff; }
.b2b-app table { width: 100%; border-collapse: collapse; text-align: left; font-size: .88rem; }
.b2b-app th { position: sticky; top: 0; background: #f6f4fc; color: #4d4a63; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.b2b-app th, .b2b-app td { padding: .85rem .9rem; border-bottom: 1px solid #eeebf5; max-width: 22rem; overflow-wrap: anywhere; vertical-align: top; }
.b2b-app tbody tr:hover { background: #faf8ff; }
.b2b-app .chart-row { margin: 1rem 0; }
.b2b-app .chart-row > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; color: var(--text-2); margin-bottom: .35rem; }
.b2b-app progress { width: 100%; height: .55rem; border: 0; border-radius: 999px; overflow: hidden; accent-color: #6847f5; }
.b2b-app progress::-webkit-progress-bar { background: #efecf7; border-radius: 999px; }
.b2b-app progress::-webkit-progress-value { background: var(--grad); border-radius: 999px; }
.b2b-app progress::-moz-progress-bar { background: #6847f5; }
.b2b-app .line-editor { display: grid; grid-template-columns: 2fr 1.5fr repeat(5, 1fr) auto; gap: .6rem; align-items: end; padding: 1rem 0; border-bottom: 1px solid #eeebf5; }
.b2b-app .line-editor label { margin: 0; font-size: .75rem; }
.b2b-app .line-editor input { padding: .55rem .65rem; }
.b2b .product-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }


/* ---------- Panel (dashboard) ---------- */
.dash { display: grid; gap: 1.1rem; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 1rem; }
.kpi { position: relative; overflow: hidden; padding: 1.25rem 1.3rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 5%); }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #8765ef, #ec8b89, transparent); }
.kpi__top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.kpi__label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #696b80; }
.kpi__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; color: #6847e8; background: #f0ecff; }
.kpi__icon svg { width: 1.05rem; height: 1.05rem; }
.kpi__value { margin-top: .55rem; font-family: var(--font-display); font-size: clamp(1.25rem, 1.9vw, 1.6rem); white-space: nowrap; font-weight: 800; letter-spacing: -.03em; color: #1c1735; overflow-wrap: anywhere; }
.kpi__hint { margin-top: .2rem; font-size: .82rem; color: #696b80; }
.kpi--up .kpi__value { color: #087f65; } .kpi--down .kpi__value { color: #b4233a; } .kpi--warn .kpi__value { color: #a5620c; }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.chart-panel { min-width: 0; padding: 1.35rem 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 5%); }
.chart-panel--wide { grid-column: 1 / -1; }
.chart-panel header { margin-bottom: .9rem; }
.chart-panel h3 { font-size: 1.05rem; color: #1e1a36; margin: 0; }
.chart-panel header p { font-size: .84rem; color: #696b80; margin-top: .15rem; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: #eeebf5; stroke-width: 1; } .chart .grid.zero { stroke: #cfc8e6; }
.chart .axis { fill: #8a879c; font: 600 11px var(--font); }
.chart-empty { display: grid; place-items: center; min-height: 9rem; border: 1px dashed #dcd7e9; border-radius: 14px; color: #8a879c; font-size: .9rem; text-align: center; padding: 1rem; }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .4rem; font-size: .82rem; color: #4d4a63; font-weight: 600; }
.legend span { display: inline-flex; align-items: center; gap: .4rem; }
.legend i, .legend-list i { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; flex: none; }
.donut { display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: 1.2rem; align-items: center; }
.donut svg { width: 100%; height: auto; }
.donut__value { font: 800 20px var(--font-display); fill: #1c1735; }
.donut__label { font: 600 10px var(--font); fill: #8a879c; text-transform: uppercase; letter-spacing: .08em; }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.legend-list li { display: grid; grid-template-columns: auto 1fr auto auto; gap: .55rem; align-items: center; font-size: .86rem; color: #4d4a63; }
.legend-list b { color: #1c1735; font-weight: 700; } .legend-list em { font-style: normal; color: #8a879c; font-size: .78rem; min-width: 2.4rem; text-align: right; }
.hbars, .funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.hbars li > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; color: #4d4a63; margin-bottom: .3rem; }
.hbars b { color: #1c1735; }
.hbars i, .funnel i { display: block; height: .55rem; border-radius: 999px; background: #efecf7; overflow: hidden; }
.hbars s, .funnel s { display: block; height: 100%; border-radius: inherit; text-decoration: none; }
.funnel li { display: grid; grid-template-columns: 8.5rem 1fr 2.5rem; gap: .8rem; align-items: center; font-size: .86rem; color: #4d4a63; }
.funnel b { text-align: right; color: #1c1735; }
.dash-filters { padding: 1.2rem 1.4rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; }
.dash-filters .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: .8rem; }
.dash-filters label { margin-bottom: .6rem; }
.dash-note { font-size: .84rem; color: #696b80; }
.welcome { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 1.6rem; border-radius: var(--radius); color: #fff; background: linear-gradient(120deg, #2a1f63, #4b33c4 60%, #7a5cf5); box-shadow: 0 20px 45px rgb(52 32 119 / 20%); }
.welcome h2 { color: #fff; margin: .2rem 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.welcome p { color: rgb(255 255 255 / 82%); }
.welcome .eyebrow { color: #d9d0ff; }
.badge { display: inline-flex; padding: .18rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; background: #f0ebff; color: #5136d6; border: 1px solid #d8ccff; white-space: nowrap; }
.badge--ok { background: #e6f6f0; color: #087f65; border-color: #bfe7d7; } .badge--warn { background: #fff4d8; color: #966010; border-color: #f2dea6; } .badge--bad { background: #fdecee; color: #b4233a; border-color: #f5c6cd; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .donut { grid-template-columns: 1fr; justify-items: center; } .donut svg { max-width: 11rem; } .funnel li { grid-template-columns: 6rem 1fr 2rem; } }


/* ---------- Tienda B2B ---------- */
.b2b-shop { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 1.35rem; }
.product-card { display: flex; flex-direction: column; gap: .7rem; padding: 1.15rem; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 30px rgb(35 29 68 / 6%); }
.product-card:hover { transform: translateY(-3px); border-color: #c6bbeb; box-shadow: 0 22px 48px rgb(35 29 68 / 12%); }
.product-card__media { margin: -.05rem -.05rem .2rem; aspect-ratio: 1 / 1; border-radius: 15px; overflow: hidden; background: #f8f8fb; border: 1px solid #eceaf2; display: grid; place-items: center; }
.product-card__media img { width: 100%; height: 100%; object-fit: contain; padding: .6rem; mix-blend-mode: multiply; transition: transform .25s ease; }
.product-card:hover .product-card__media img { transform: scale(1.035); }
.product-card__ph { width: 3.2rem; height: 3.2rem; color: #8d78e8; opacity: .8; }
.product-card__ph svg { width: 100%; height: 100%; }
.product-card h3 { font-size: 1.05rem; margin: 0; line-height: 1.4; letter-spacing: -.015em; min-height: 2.8em; }
.product-card p { font-size: .88rem; }
.product-card > p:not(.product-card__meta):not(.product-card__stock) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.55; }
.product-card .pcard__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem; }
.product-card .pcard__cat { font-size: .7rem; letter-spacing: .055em; line-height: 1.35; }
.product-card .status { font-size: .68rem; white-space: normal; text-align: right; }
.product-card__meta { color: #8a879c !important; font-size: .8rem !important; font-weight: 600; }
.product-card__stock { margin-top: auto; padding: .5rem .7rem; border-radius: 10px; background: #f2f8f5; color: #176852 !important; font-size: .78rem !important; font-weight: 600; }
.product-card__stock.is-out { background: #fff8e8; color: #966010 !important; }
.product-card .product__foot { margin-top: .1rem; padding-top: .75rem; border-top: 1px solid #ebe8f1; }
.product-card .product__price b { font-size: 1.3rem; letter-spacing: -.04em; }
.product-card__variants { display: grid; gap: .5rem; }
.product-card__variants label { display: grid; gap: .3rem; font-size: .76rem; font-weight: 700; color: #575269; }
.product-card__variants select { width: 100%; min-height: 2.35rem; padding: .35rem .55rem; border-radius: 9px; border: 1px solid #dcd7e9; background: #fff; color: #251f3c; font: inherit; }
.product-card__buy { display: flex; gap: .5rem; align-items: center; }
.product-card__buy .btn { flex: 1; }
.catalog-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1rem; padding: 1.1rem; }
.catalog-more p { margin: 0; color: #656078; font-size: .9rem; }
.catalog-more .btn { min-width: 12rem; }
.citem__qty { display: inline-flex; align-items: center; border: 1px solid #dcd7e9; border-radius: 999px; background: #fff; overflow: hidden; }
.citem__qty button { width: 2rem; height: 2.1rem; border: 0; background: none; color: #3d25af; font-size: 1.05rem; font-weight: 800; cursor: pointer; }
.citem__qty button:hover { background: #f1ecff; }
.citem__qty input { width: 3.2rem; height: 2.1rem; border: 0; text-align: center; font: inherit; font-weight: 700; color: #241e40; background: transparent; -moz-appearance: textfield; }
.citem__qty input::-webkit-inner-spin-button, .citem__qty input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.drawer .citem { grid-template-columns: 1fr auto auto; }
.citem__info { display: grid; gap: .15rem; min-width: 0; }
.cart-warn { font-size: .76rem; color: #966010; }
.product-card--request { border-style: dashed; border-color: #c9bdf3; background: #fbfaff; }
.request-form { display: grid; gap: .6rem; margin-top: .2rem; }
.request-form label { display: grid; gap: .3rem; font-size: .8rem; font-weight: 600; color: #37334a; }
.request-form input { font: inherit; font-size: .9rem; color: #241e40; background: #fff; border: 1px solid #dcd7e9; border-radius: 10px; padding: .55rem .7rem; min-width: 0; }
.request-form input:focus { outline: none; border-color: #7755e7; box-shadow: 0 0 0 4px rgb(119 85 231 / 16%); }
.request-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.cart-summary { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 14px; background: #faf9fd; border: 1px solid #e1dced; }
.cart-summary ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .9rem; color: #4d4a63; }
.cart-summary__head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 700; color: #1e1a36; }
.b2b .header .cart-btn { margin-left: .4rem; }


/* ---------- Estructura de aplicación (barra lateral) ---------- */
.b2b-app:has(.app-shell) { padding-top: 1.4rem; }
.wrap.app-host { width: min(calc(100% - 2rem), 94rem); }
.app-shell { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.app-nav { position: sticky; top: 5.6rem; }
.app-nav__panel { display: flex; flex-direction: column; max-height: calc(100vh - 6.6rem); overflow-y: auto; padding: 1.1rem .8rem .9rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 12px 34px rgb(42 33 83 / 7%); scrollbar-width: thin; }
.app-nav__brand { display: grid; gap: .15rem; padding: .2rem .55rem 1rem; margin-bottom: .4rem; border-bottom: 1px solid #eeebf5; }
.app-nav__brand .eyebrow { font-size: .66rem; }
.app-nav__brand strong { font-family: var(--font-display); font-size: 1.2rem; color: #1c1735; }
.app-nav__group { display: grid; gap: .1rem; margin-top: .75rem; }
.app-nav__group > p { display: flex; align-items: center; gap: .45rem; margin: 0 0 .2rem; padding: 0 .55rem; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #8a879c; }
.app-nav__group > p svg { width: .95rem; height: .95rem; color: #8d78e8; }
.b2b-app .app-nav [data-tab] { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: .5rem .7rem .5rem 1.95rem; border: 0; border-radius: 10px; background: none; box-shadow: none; color: #4d4a63; font: inherit; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; transition: background .15s, color .15s; }
.b2b-app .app-nav [data-tab]:hover { background: #f4f1ff; color: #3d25af; transform: none; box-shadow: none; }
.b2b-app .app-nav [data-tab][aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgb(93 63 211 / 22%); }
.app-nav__account { display: grid; gap: .5rem; margin-top: 1rem; padding: .9rem .55rem 0; border-top: 1px solid #eeebf5; }
.app-nav__account > span { font-size: .78rem; color: #696b80; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b2b-app .app-nav__logout { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid #e4e1ec; border-radius: 10px; background: #fff; box-shadow: none; color: #4d4a63; font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.b2b-app .app-nav__logout:hover { background: #fdecee; border-color: #f5c6cd; color: #b4233a; transform: none; box-shadow: none; }
.app-nav__logout svg, .app-nav__toggle svg { width: 1.05rem; height: 1.05rem; }
.app-nav__toggle { display: none; }
.app-main { min-width: 0; }
.app-head { padding: .3rem 0 .6rem; }
.app-head__crumb { font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #5f43d0; margin: 0; min-height: 1em; }
.b2b-app .app-head h1 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: .25rem 0 0; }
.app-main > .notice:empty { display: none; }
.app-main .section-head { margin-top: .4rem; }
.app-main .section-head h2 { display: none; }
@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; gap: .8rem; }
  .app-nav { position: sticky; top: 4.6rem; z-index: 20; }
  .b2b-app .app-nav__toggle { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .75rem 1rem; border: 1px solid #e4e1ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgb(42 33 83 / 8%); color: #241e40; font: inherit; font-weight: 700; cursor: pointer; }
  .app-nav__toggle b { margin-left: auto; color: #5f43d0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav__panel { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .4rem); max-height: 70vh; }
  .app-nav.is-open .app-nav__panel { display: flex; }
  .app-nav__brand { display: none; }
}


/* ---------- Indicadores con tendencia, medidor y comparación ---------- */
.kpi--spark { padding-bottom: 0; display: flex; flex-direction: column; }
.kpi__spark { display: block; width: calc(100% + 2.6rem); height: 3.1rem; margin: .7rem -1.3rem 0; }
.kpi__spark--empty { display: grid; place-items: center; height: 3.1rem; margin: .7rem -1.3rem 0; border-top: 1px dashed #eeebf5; font-size: .74rem; color: #a3a0b5; }
.dash-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1250px) { .dash-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dash-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .dash-kpis--5 { grid-template-columns: 1fr; } }
.gauge { display: grid; justify-items: center; }
.gauge svg { width: 100%; max-width: 15rem; height: auto; }
.gauge__caption { margin-top: .3rem; font-size: .84rem; color: #696b80; text-align: center; }
.compare { display: flex; justify-content: center; align-items: flex-end; gap: 1.6rem; min-height: 11rem; padding-top: .4rem; }
.compare__col { display: grid; justify-items: center; gap: .3rem; width: 6.5rem; }
.compare__bar { display: flex; align-items: flex-end; width: 3.2rem; height: 8rem; border-radius: 12px; background: #f3f1f9; overflow: hidden; }
.compare__bar span { display: block; width: 100%; border-radius: 12px 12px 0 0; }
.compare b { font-family: var(--font-display); color: #1c1735; font-size: 1rem; white-space: nowrap; }
.compare small { color: #696b80; font-size: .78rem; text-align: center; }
.kpi-mini { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 5%); }
.kpi-mini__ring { flex: none; width: 3.2rem; height: 3.2rem; }
.kpi-mini b { display: block; font-family: var(--font-display); font-size: 1.45rem; color: #1c1735; line-height: 1.1; }
.kpi-mini span { font-size: .8rem; color: #696b80; }
@media (max-width: 1100px) { .dash-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dash-kpis--4, .dash-grid--3 { grid-template-columns: 1fr; } }


.chart-panel { container-type: inline-size; }
.chart-panel .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@container (max-width: 27rem) {
  .donut { grid-template-columns: 1fr; justify-items: center; gap: .9rem; }
  .donut svg { max-width: 10.5rem; }
  .donut .legend-list { width: 100%; }
}
@container (max-width: 19rem) { .chart-panel .dash-kpis { grid-template-columns: 1fr; } }


/* ---------- Precios y forma de pago ---------- */
.price-label { display: block; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a879c; }
.product-card .product__price b { font-size: 1.35rem; }
.price-resale { display: grid; gap: .05rem; margin-top: .55rem; padding: .5rem .65rem; border-radius: 10px; background: #f3fbf8; border: 1px solid #cdeee1; font-size: .78rem; color: #3f5f55; }
.price-resale b { font-size: .95rem !important; color: #087f65; font-family: var(--font-display); }
.price-resale em { font-style: normal; font-weight: 700; color: #087f65; }
.price-resale--pro { background: #f4f1ff; border-color: #ddd4ff; color: #4d3aa8; font-weight: 600; }
.pay-split { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pay-split--full { grid-template-columns: 1fr; }
.pay-split div { display: grid; gap: .1rem; padding: .6rem .7rem; border-radius: 12px; background: #fff; border: 1px solid #e1dce9; }
.pay-split div:first-child { border-color: #c9bdf3; background: #f6f3ff; }
.pay-split span { font-size: .74rem; color: #696276; }
.pay-split b { font-family: var(--font-display); color: #241d42; }


/* ---------- Operaciones: tablas legibles, detalle y solicitudes ---------- */
.ops-table td { vertical-align: middle; }
.ops-table tbody tr { cursor: default; }
.ops-more { text-align: right; width: 1%; white-space: nowrap; }
.muted-dash { color: #a3a0b5; }
.json { font-family: Consolas, monospace; font-size: .78rem; color: #696b80; }
.ops-dialog { width: min(44rem, calc(100% - 2rem)); max-height: 85vh; padding: 0; border: 1px solid #e1dced; border-radius: var(--radius); box-shadow: 0 30px 70px rgb(30 20 70 / 25%); }
.ops-dialog::backdrop { background: rgb(21 16 43 / 50%); backdrop-filter: blur(3px); }
.ops-dialog__head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; background: #f3efff; border-bottom: 1px solid #e3ddf3; }
.ops-dialog__head h2 { font-size: 1.15rem; margin: 0; }
.ops-dl { display: grid; grid-template-columns: minmax(9rem, 30%) 1fr; gap: .1rem 1rem; padding: 1rem 1.3rem 1.4rem; margin: 0; }
.ops-dl dt { font-size: .8rem; font-weight: 700; color: #696b80; padding: .45rem 0; border-bottom: 1px solid #f1eff7; }
.ops-dl dd { margin: 0; padding: .45rem 0; border-bottom: 1px solid #f1eff7; overflow-wrap: anywhere; font-size: .9rem; color: #241e40; }
.ops-dl pre { margin: 0; white-space: pre-wrap; font-size: .78rem; background: #faf9fd; padding: .6rem; border-radius: 8px; }
.ops-dl code { font-size: .78rem; color: #696b80; }
.req-list.card { background: none; border: 0; box-shadow: none; padding: 0; display: grid; gap: 1rem; }
.req-card { border-radius: var(--radius); background: #fff; border: 1px solid #e4e1ec; box-shadow: 0 8px 26px rgb(42 33 83 / 6%); overflow: hidden; }
.req-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.3rem; background: linear-gradient(90deg, #f6f3ff, #fff 70%); border-bottom: 1px solid #eeebf5; }
.req-card__head h3 { margin: .1rem 0; font-size: 1.15rem; }
.req-card__head p { margin: 0; font-size: .82rem; color: #696b80; }
.req-card__ref { font-size: .72rem; font-weight: 800; letter-spacing: .08em; color: #5f43d0; }
.req-card__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 1.3rem; padding: 1.1rem 1.3rem; }
.req-card__who p { margin: .2rem 0; font-size: .9rem; color: #37334a; }
.req-wa { margin-left: .4rem; padding: .15rem .55rem; border-radius: 999px; background: #e6f6f0; color: #087f65; font-size: .76rem; font-weight: 700; text-decoration: none; }
.req-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.req-tags span { padding: .18rem .55rem; border-radius: 999px; background: #f4f1ff; border: 1px solid #e2daff; color: #4d3aa8; font-size: .74rem; font-weight: 600; }
.req-needs { padding: .6rem .7rem; border-radius: 10px; background: #faf9fd; border: 1px solid #eeebf5; }
.req-items { width: 100%; border-collapse: collapse; font-size: .86rem; }
.req-items th { text-align: left; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #8a879c; padding: .3rem .4rem; border-bottom: 1px solid #eeebf5; }
.req-items td { padding: .45rem .4rem; border-bottom: 1px solid #f3f1f8; vertical-align: middle; }
.req-items td small { display: block; color: #8a879c; font-size: .74rem; }
.req-items img, .req-noimg { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: 8px; border: 1px solid #eeebf5; display: grid; place-items: center; background: #faf9fd; }
.req-total { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .7rem; }
.req-total div { padding: .6rem .8rem; border-radius: 12px; background: #f6f3ff; border: 1px solid #e2daff; }
.req-total span { display: block; font-size: .74rem; color: #696b80; }
.req-total b { font-family: var(--font-display); font-size: 1.15rem; color: #1c1735; }
.req-total small { display: block; font-size: .72rem; color: #966010; }
.req-card__actions { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: .9rem 1.3rem; border-top: 1px solid #eeebf5; background: #fcfbfe; }
.req-card__actions label { margin: 0; display: grid; gap: .25rem; font-size: .78rem; }
.req-card__actions select { padding: .5rem .7rem; }
@media (max-width: 900px) { .req-card__body { grid-template-columns: 1fr; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .b2b-app .line-editor { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .business-preview { transform: none; }
  .b2b .wa-float { display: none; }
  .product-card__media:has(.product-card__ph) { aspect-ratio: 16 / 6; }
  .b2b-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .b2b-sectors .card { padding: 1rem; }
  .b2b-sectors .card h3 { font-size: .95rem; }
  .b2b-sectors .card p, .b2b-sectors .pcard__cat { display: none; }
  .b2b-link { font-size: .8rem; }
  .b2b .form-grid, .b2b .list-item .form-grid { grid-template-columns: 1fr; }
  .b2b-app .line-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2b-cta { flex-direction: column; align-items: flex-start; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .b2b-app .card, .b2b-app .auth-card { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .b2b *, .b2b *::before, .b2b *::after { animation: none !important; transition: none !important; }
}