/* Módulo Compra rápida (Ecomm). Usa los tokens del tema (--b2b-*) si existen, con valores por defecto si no. */
.ecomm-qo { --qo-primary: var(--b2b-primary, #1B5585); --qo-line: var(--b2b-line, #E3E8EE); --qo-muted: var(--b2b-muted, #5E6B7A); --qo-subtle: var(--b2b-subtle, #8E9AA7); --qo-text: var(--b2b-text, #0F1B2A); --qo-ease: var(--b2b-ease, cubic-bezier(.22, 1, .36, 1)); padding-top: 2rem; }

/* Cabecera */
.ecomm-qo__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; animation: qo-up .7s var(--qo-ease) both; }
.ecomm-qo__kicker { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--qo-primary); }
.ecomm-qo__kicker::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: var(--b2b-accent, #2FA6CB); }
.ecomm-qo .ecomm-qo__title { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -.04em; margin: .35rem 0 .4rem; }
.ecomm-qo__lead { color: var(--qo-muted); margin: 0; max-width: 40rem; }
.ecomm-qo__keys { display: flex; gap: 1rem; font-size: .76rem; color: var(--qo-subtle); }
.ecomm-qo__keys kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; margin-right: .2rem; border-radius: 6px; background: #fff; color: var(--qo-muted); box-shadow: 0 0 0 1px var(--b2b-line-strong, #D2DAE3), 0 1px 0 var(--b2b-line-strong, #D2DAE3); font-size: .7rem; font-family: var(--b2b-mono, ui-monospace, monospace); }

/* Caja principal */
.ecomm-qo-box { background: #fff; border-radius: var(--b2b-radius, 16px); box-shadow: 0 0 0 1px var(--qo-line), 0 1px 2px rgba(15, 27, 42, .04), 0 12px 32px -18px rgba(15, 27, 42, .18) !important; padding: .5rem 1.75rem 1.5rem; animation: qo-up .7s var(--qo-ease) .08s both; }
.ecomm-qo-bar { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid var(--qo-line); }
.ecomm-qo-bar__label { font-size: .95rem; font-weight: 500; color: var(--qo-text); margin: 0; }
.ecomm-qo-ac { position: relative; width: min(460px, 100%); }
.ecomm-qo-ac__icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; display: grid; color: var(--qo-subtle); pointer-events: none; transition: color .2s; }
.ecomm-qo-ac__icon svg { width: 20px; height: 20px; }
.ecomm-qo-ac:focus-within .ecomm-qo-ac__icon { color: var(--qo-primary); }
.ecomm-qo-bar__input { width: 100%; height: 50px; border: 0; border-radius: 12px; padding: 0 1rem 0 2.75rem; font-size: .95rem; font-family: inherit; outline: none; background: rgba(15, 27, 42, .04); transition: background .25s, box-shadow .25s; }
.ecomm-qo-bar__input:hover { background: rgba(15, 27, 42, .06); }
.ecomm-qo-bar__input:focus { background: #fff; box-shadow: 0 0 0 1px var(--qo-primary), 0 0 0 5px rgba(27, 85, 133, .1); }
.ecomm-qo-bar__error { position: absolute; left: .2rem; top: calc(100% + 6px); font-size: .78rem; color: #C9353A; font-weight: 600; animation: qo-up .3s var(--qo-ease); }
.ecomm-qo-bar__error.is-loading { color: var(--qo-muted); font-weight: 500; }
.ecomm-qo-bar__count { margin-left: auto; padding: .5rem .9rem; border-radius: 999px; background: var(--b2b-soft, #F4F6F9); font-size: .9rem; color: var(--qo-muted); }
.ecomm-qo-bar__count strong { color: var(--qo-text); font-variant-numeric: tabular-nums; }

/* Sugerencias */
.ecomm-qo-ac__list { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; width: 600px; max-width: 90vw; background: #fff; border-radius: 14px; box-shadow: 0 28px 64px -20px rgba(15, 27, 42, .32), 0 0 0 1px rgba(15, 27, 42, .06); padding: .35rem; animation: qo-pop .22s var(--qo-ease); }
.ecomm-qo-ac__list button { display: grid; grid-template-columns: 130px 1fr auto; gap: .9rem; align-items: center; width: 100%; border: 0; background: none; padding: .6rem .75rem; border-radius: 10px; text-align: left; font-size: .86rem; transition: background .15s; }
.ecomm-qo-ac__list button:hover, .ecomm-qo-ac__list button.is-active { background: var(--b2b-primary-50, #EEF4FA); }
.ecomm-qo-ac__code { font-weight: 600; font-family: var(--b2b-mono, ui-monospace, monospace); font-size: .8rem; }
.ecomm-qo-ac__name { color: var(--qo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecomm-qo-ac__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Tabla */
.ecomm-qo-table { width: 100%; border-collapse: collapse; font-size: .9rem; table-layout: fixed; }
.ecomm-qo-col-ref { width: 19%; }
.ecomm-qo-col-qty { width: 150px; }
.ecomm-qo-col-money { width: 130px; }
.ecomm-qo-col-x { width: 52px; }
.ecomm-qo-table thead th { font-weight: 600; font-size: .9rem; color: var(--qo-text); padding: 1.1rem .65rem .85rem; border-bottom: 1px solid var(--qo-line); }
.ecomm-qo-table tbody td { padding: .85rem .65rem; border-bottom: 1px solid var(--qo-line); vertical-align: middle; transition: background .3s; }
.ecomm-qo-table tbody tr:hover td { background: #FAFBFC; }
.ecomm-qo-table tbody tr.is-new td { animation: qo-flash 1.6s var(--qo-ease); }
.ecomm-qo-table tbody tr.is-new { animation: qo-row .5s var(--qo-ease); }
.ecomm-qo-table tbody tr.is-error td { background: #FFF6F6; }
.ecomm-qo-code { font-family: var(--b2b-mono, ui-monospace, monospace); font-weight: 600; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecomm-qo-name { font-weight: 600; color: var(--qo-text); letter-spacing: -.01em; }
.ecomm-qo-variant { font-size: .78rem; color: var(--qo-muted); }
.ecomm-qo-msg { font-size: .76rem; color: #C9353A; font-weight: 600; margin-top: .15rem; }
.ecomm-qo-table .ecomm-stock { font-size: .74rem; font-weight: 500; }
.ecomm-qo-table td.text-end { font-variant-numeric: tabular-nums; }
.ecomm-qo-line { font-weight: 700; white-space: nowrap; }
.ecomm-qo-table tfoot td { padding: 1.15rem .65rem; border-bottom: 1px solid var(--qo-line); }
.ecomm-qo-total-label { font-weight: 600; letter-spacing: .06em; font-size: .8rem; color: var(--qo-muted); }
.ecomm-qo-total { font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ecomm-qo-total.is-tick { animation: qo-tick .45s var(--b2b-spring, cubic-bezier(.34, 1.56, .64, 1)); }
.ecomm-qo-remove { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--qo-subtle); font-size: 1.2rem; line-height: 1; transition: background .2s, color .2s, transform .25s; }
.ecomm-qo-remove:hover { background: #FFF0F0; color: #E5484D; transform: rotate(90deg); }

/* Estado vacío */
.ecomm-qo-empty td { padding: 2.25rem .65rem !important; text-align: center; }
.ecomm-qo-empty__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--b2b-primary-50, #EEF4FA); color: var(--qo-primary); margin-bottom: .75rem; }
.ecomm-qo-empty__icon svg { width: 26px; height: 26px; }
.ecomm-qo-empty strong { display: block; font-weight: 600; color: var(--qo-text); margin-bottom: .2rem; }
.ecomm-qo-empty p { color: var(--qo-muted); font-size: .86rem; margin: 0 0 .9rem; }
.ecomm-qo-try { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; }
.ecomm-qo-try button { border: 0; border-radius: 999px; padding: .35rem .75rem; background: var(--b2b-soft, #F4F6F9); box-shadow: inset 0 0 0 1px var(--qo-line); font-family: var(--b2b-mono, ui-monospace, monospace); font-size: .76rem; color: var(--qo-text); transition: background .2s, color .2s, transform .25s var(--qo-ease); }
.ecomm-qo-try button:hover { background: var(--qo-primary); color: #fff; box-shadow: none; transform: translateY(-1px); }

/* Acciones y resultado */
.ecomm-qo-actions { display: flex; justify-content: flex-end; align-items: center; gap: .75rem; padding-top: 1.25rem; }
.ecomm-qo-clear { color: var(--qo-muted) !important; text-decoration: none; font-weight: 500; }
.ecomm-qo-clear:hover { color: #E5484D !important; }
.ecomm-qo-submit { min-width: 220px; }
.ecomm-qo-result { margin-top: 1.1rem; padding: .85rem 1.1rem; border-radius: 12px; font-size: .88rem; animation: qo-up .4s var(--qo-ease); }
.ecomm-qo-result.is-ok { background: #E8F6EE; color: #126B3A; }
.ecomm-qo-result.is-partial { background: #FFF6E5; color: #8A5A00; }
.ecomm-qo-result a { font-weight: 600; }

/* Importación CSV (también admite arrastrar y soltar) */
.ecomm-qo-csv { position: relative; display: flex; align-items: center; gap: 1.1rem; margin: 1.25rem 0 0; padding: 1.25rem 1.5rem; border-radius: var(--b2b-radius, 16px); border: 1.5px dashed var(--b2b-line-strong, #D2DAE3); background: rgba(255, 255, 255, .6); transition: border-color .25s, background .25s; animation: qo-up .7s var(--qo-ease) .16s both; }
.ecomm-qo-csv:hover { border-color: #B6C2CE; background: #fff; }
.ecomm-qo-csv p { margin: 0; flex: 1; font-size: .92rem; line-height: 1.5; }
.ecomm-qo-csv p small { display: block; color: var(--qo-subtle); font-size: .78rem; margin-top: .15rem; }
.ecomm-qo-csv code { font-size: .76rem; color: var(--qo-muted); background: var(--b2b-soft, #F4F6F9); padding: .05rem .35rem; border-radius: 5px; }
.ecomm-qo-csv a { text-decoration: none; font-weight: 600; }
.ecomm-qo-csv__file { cursor: pointer; margin: 0; }
.ecomm-qo-csv__icon { position: relative; display: grid; place-items: end center; width: 42px; height: 50px; padding-bottom: 6px; border-radius: 5px; background: #2E9E57; color: #fff; font-size: .62rem; font-weight: 700; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); transition: transform .4s var(--b2b-spring, cubic-bezier(.34, 1.56, .64, 1)); }
.ecomm-qo-csv__icon::after { content: ''; position: absolute; top: 0; right: 0; width: 28%; height: 22%; background: #A8DAB5; }
.ecomm-qo-csv:hover .ecomm-qo-csv__icon { transform: rotate(-6deg) translateY(-2px); }
.ecomm-qo-csv__drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .5rem; border-radius: inherit; background: rgba(238, 244, 250, .96); color: var(--qo-primary); font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s; }
.ecomm-qo-csv__drop svg { width: 22px; height: 22px; }
.ecomm-qo-csv.is-over { border-color: var(--qo-primary); }
.ecomm-qo-csv.is-over .ecomm-qo-csv__drop { opacity: 1; }

@keyframes qo-up { from { opacity: 0; transform: translateY(10px); } }
@keyframes qo-pop { from { opacity: 0; translate: 0 -6px; scale: .98; } }
@keyframes qo-row { from { opacity: 0; transform: translateY(-6px); } }
@keyframes qo-flash { 0% { background: var(--b2b-primary-100, #DCE9F5); } 100% { background: transparent; } }
@keyframes qo-tick { 0% { transform: scale(1); } 40% { transform: scale(1.08); color: var(--qo-primary); } 100% { transform: scale(1); } }

@media (max-width: 767px) {
    .ecomm-qo-box { padding: .25rem 1rem 1rem; }
    .ecomm-qo-bar { flex-wrap: wrap; }
    .ecomm-qo-bar__count { margin-left: 0; }
    .ecomm-qo__keys { display: none; }
    .ecomm-qo-col-ref { width: 32%; }
    .ecomm-qo-col-money { width: 0; }
    .ecomm-qo-table th:nth-child(4), .ecomm-qo-table td:nth-child(4) { display: none; }
    .ecomm-qo-csv { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .ecomm-qo *, .ecomm-qo { animation: none !important; } }