/*
  BH · Comisiones (Liquidaciones) — estilos page-specific
  Bandeja: /bh/comisiones · Detalle: /bh/comisiones/{id}
  Tokens, reset, .app-main, .page-head, .empty, .btn-primary
  ya están en bh-shell-graphite.css — no duplicar.
*/

/* ============================================================
   WRAPPER DE PÁGINA — restringe ancho a 748px
   ============================================================ */
.bh-shell .comisiones-wrap {
    max-width: 748px;
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   TARJETA PERÍODO ACTIVO
   ============================================================ */
.bh-shell .active-card {
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 28px;
}

.bh-shell .active-card__top {
    background: var(--ember-bg);
    border-bottom: 1px solid rgba(217, 119, 86, .2);
    padding: 10px 18px;
    display: flex;
    align-items: center;
}

.bh-shell .active-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ember);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.bh-shell .active-card__eyebrow .material-symbols-outlined { font-size: 14px; }

.bh-shell .active-card__body { padding: 20px 18px 16px; }

.bh-shell .active-card__period-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--t2);
    margin-bottom: 6px;
}

.bh-shell .active-card__amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.bh-shell .active-card__currency {
    font-size: 16px;
    font-weight: 500;
    color: var(--ember);
    font-family: var(--font-mono);
}

.bh-shell .active-card__value {
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    color: var(--ember);
    letter-spacing: -.025em;
}

.bh-shell .active-card__note {
    font-size: 11.5px;
    color: var(--t3);
    line-height: 1.5;
    margin-bottom: 14px;
}

.bh-shell .active-card__note strong { color: var(--warn); }

.bh-shell .active-card__stats {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.bh-shell .active-card__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--t2);
}

.bh-shell .active-card__stat .material-symbols-outlined { font-size: 14px; color: var(--t3); }

.bh-shell .active-card__foot {
    padding: 12px 18px;
    border-top: 1px solid var(--b-sub);
    background: var(--canvas);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ============================================================
   BOTÓN LINK (pie de tarjeta activa)
   ============================================================ */
.bh-shell .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--b-str);
    border-radius: var(--r-md);
    padding: 0 14px;
    height: 38px;
    color: var(--t1);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.bh-shell .btn-link:hover { background: var(--s2); border-color: var(--b-focus); }
.bh-shell .btn-link:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.bh-shell .btn-link .material-symbols-outlined { font-size: 16px; color: var(--t3); }

/* ============================================================
   CABECERA DE SECCIÓN (historial)
   ============================================================ */
.bh-shell .section-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}

.bh-shell .section-head__title {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.bh-shell .section-head__sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t4);
}

/* ============================================================
   LISTA DE HISTORIAL
   ============================================================ */
.bh-shell .hist-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bh-shell .hist-item {
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}

.bh-shell .hist-item:hover { border-color: var(--b-str); background: var(--s2); }
.bh-shell .hist-item:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

.bh-shell .hist-item__period {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bh-shell .hist-item__period-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
}

.bh-shell .hist-item__period-meta {
    font-size: 11.5px;
    color: var(--t3);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bh-shell .hist-item__sep { color: var(--t4); }

.bh-shell .hist-item__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.bh-shell .hist-item__total {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
}

.bh-shell .hist-item__paid {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--ok);
}

.bh-shell .hist-item__paid .material-symbols-outlined { font-size: 12px; }

.bh-shell .hist-item__chevron {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t3);
    flex-shrink: 0;
    transition: color var(--dur-base) var(--ease);
}

.bh-shell .hist-item__chevron .material-symbols-outlined { font-size: 18px; }
.bh-shell .hist-item:hover .hist-item__chevron { color: var(--t2); }

/* ============================================================
   VOLVER — botón de retorno en la pantalla de detalle
   ============================================================ */
.bh-shell .page-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t3);
    text-decoration: none;
    text-transform: lowercase;
    letter-spacing: .02em;
    margin-bottom: 10px;
    transition: color var(--dur-base) var(--ease);
}

.bh-shell .page-back .material-symbols-outlined { font-size: 14px; }
.bh-shell .page-back:hover { color: var(--t2); }
.bh-shell .page-back:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 2px; }

/* ============================================================
   HERO DEL PERÍODO (detalle)
   ============================================================ */
.bh-shell .period-hero { margin-bottom: 20px; }

.bh-shell .period-hero__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bh-shell .period-hero__name {
    font-size: 20px;
    font-weight: 600;
    color: var(--t1);
    letter-spacing: -.01em;
}

.bh-shell .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bh-shell .status-badge--paid {
    background: var(--ok-bg);
    border: 1px solid rgba(110, 200, 122, .25);
    color: var(--ok);
}

.bh-shell .status-badge--paid .material-symbols-outlined { font-size: 12px; }

.bh-shell .status-badge--prep {
    background: var(--warn-bg);
    border: 1px solid rgba(217, 162, 86, .25);
    color: var(--warn);
}

.bh-shell .status-badge--prep .material-symbols-outlined { font-size: 12px; }

.bh-shell .period-hero__range {
    font-size: 12px;
    color: var(--t3);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bh-shell .period-hero__range .material-symbols-outlined { font-size: 14px; }

.bh-shell .period-hero__amount {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.bh-shell .period-hero__currency {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-mono);
}

.bh-shell .period-hero__value {
    font-size: 46px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.025em;
}

.bh-shell .period-hero__value--paid { color: var(--t1); }
.bh-shell .period-hero__value--active { color: var(--ember); }
.bh-shell .period-hero__currency--paid { color: var(--t3); }
.bh-shell .period-hero__currency--active { color: var(--ember); }

.bh-shell .period-hero__paid-note {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--ok);
}

.bh-shell .period-hero__paid-note .material-symbols-outlined { font-size: 14px; }

.bh-shell .period-hero__prep-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--t3);
    line-height: 1.5;
}

.bh-shell .period-hero__prep-note strong { color: var(--warn); }

/* ============================================================
   SECCIÓN GENÉRICA CON CABECERA
   ============================================================ */
.bh-shell .detail-section {
    background: var(--s1);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.bh-shell .detail-section__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--b-sub);
    background: var(--canvas);
}

.bh-shell .detail-section__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--s2);
    border: 1px solid var(--b-sub);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ember);
}

.bh-shell .detail-section__icon .material-symbols-outlined { font-size: 15px; }

.bh-shell .detail-section__title {
    flex: 1;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--t1);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bh-shell .detail-section__count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t3);
}

/* ============================================================
   TABLA DE REGLAS (cómo se calculó)
   ============================================================ */
.bh-shell .rules-table { width: 100%; border-collapse: collapse; }

.bh-shell .rules-table td {
    padding: 11px 16px;
    font-size: 13px;
    color: var(--t1);
    border-bottom: 1px solid var(--b-sub);
    vertical-align: middle;
}

.bh-shell .rules-table tr:last-child td { border-bottom: 0; }

.bh-shell .rules-table .td-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bh-shell .rules-table .td-rule__icon {
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
    background: var(--ember-bg);
    border: 1px solid rgba(217, 119, 86, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-shell .rules-table .td-rule__icon .material-symbols-outlined { font-size: 13px; color: var(--ember); }
.bh-shell .rules-table .td-rule__name { font-size: 13px; color: var(--t1); font-weight: 500; line-height: 1.2; }
.bh-shell .rules-table .td-rule__meta { font-size: 11px; color: var(--t3); margin-top: 1px; }
.bh-shell .rules-table .td-orders { font-size: 11.5px; color: var(--t2); text-align: right; white-space: nowrap; }

.bh-shell .rules-table .td-amount {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ok);
    text-align: right;
    white-space: nowrap;
}

.bh-shell .rules-table tr.row-goal td { background: rgba(110, 200, 122, .04); }

.bh-shell .rules-table tr.row-goal .td-rule__icon {
    background: var(--ok-bg);
    border-color: rgba(110, 200, 122, .2);
}

.bh-shell .rules-table tr.row-goal .td-rule__icon .material-symbols-outlined { color: var(--ok); }
.bh-shell .rules-table tr.row-goal .td-amount { color: var(--ok); }

.bh-shell .rules-table .row-subtotal td {
    background: var(--s2);
    border-top: 1px solid var(--b-str);
    border-bottom: 1px solid var(--b-str);
    padding-top: 12px;
    padding-bottom: 12px;
}

.bh-shell .rules-table .row-subtotal .td-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-right: 0;
}

.bh-shell .rules-table .row-subtotal .td-amount-total {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    text-align: right;
}

/* ============================================================
   AJUSTES MANUALES
   ============================================================ */
.bh-shell .adj-list {
    padding: 8px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bh-shell .adj-row {
    background: var(--canvas);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bh-shell .adj-row__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bh-shell .adj-row__icon--pos { background: var(--ok-bg); }
.bh-shell .adj-row__icon--pos .material-symbols-outlined { font-size: 15px; color: var(--ok); }
.bh-shell .adj-row__icon--neg { background: var(--err-bg); }
.bh-shell .adj-row__icon--neg .material-symbols-outlined { font-size: 15px; color: var(--err); }

.bh-shell .adj-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bh-shell .adj-row__reason { font-size: 13px; font-weight: 500; color: var(--t1); }
.bh-shell .adj-row__desc { font-size: 11.5px; color: var(--t3); line-height: 1.4; }

.bh-shell .adj-row__amount {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

.bh-shell .adj-row__amount--pos { color: var(--ok); }
.bh-shell .adj-row__amount--neg { color: var(--err); }

.bh-shell .total-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    background: var(--s2);
    border-top: 1px solid var(--b-str);
    margin-top: 2px;
}

.bh-shell .total-final__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--t2);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bh-shell .total-final__amount {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--t1);
}

/* ============================================================
   LISTA DE PEDIDOS (expandibles)
   ============================================================ */
.bh-shell .orders-wrap { padding: 0; }

.bh-shell .date-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px;
    background: var(--canvas);
}

.bh-shell .date-divider__label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}

.bh-shell .date-divider__line { flex: 1; height: 1px; background: var(--b-sub); }

.bh-shell .date-divider__total {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--ok);
    flex-shrink: 0;
    white-space: nowrap;
}

.bh-shell .order-row {
    border-bottom: 1px solid var(--b-sub);
    transition: background var(--dur-fast) var(--ease);
}

.bh-shell .order-row:last-child { border-bottom: 0; }
.bh-shell .order-row.expanded { background: rgba(122, 184, 232, .03); }

.bh-shell .order-row__main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.bh-shell .order-row__main:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }

.bh-shell .order-row__id {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--sky);
    letter-spacing: .01em;
    flex-shrink: 0;
    min-width: 74px;
}

.bh-shell .order-row__time { font-size: 11.5px; color: var(--t3); flex-shrink: 0; }

.bh-shell .order-row__ticket { flex: 1; text-align: right; min-width: 0; }

.bh-shell .order-row__ticket-amount {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--t3);
}

.bh-shell .order-row__commission-amount {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--ok);
    flex-shrink: 0;
}

.bh-shell .order-row__chevron {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t3);
    flex-shrink: 0;
    transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}

.bh-shell .order-row__chevron .material-symbols-outlined { font-size: 16px; }
.bh-shell .order-row.expanded .order-row__chevron { transform: rotate(180deg); color: var(--t2); }

.bh-shell .order-row__detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease);
}

.bh-shell .order-row.expanded .order-row__detail { max-height: 300px; }

.bh-shell .order-row__detail-inner {
    padding: 0 16px 13px 50px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bh-shell .rule-list { display: flex; flex-direction: column; gap: 4px; }

.bh-shell .rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bh-shell .rule-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--t2);
    min-width: 0;
}

.bh-shell .rule-name .material-symbols-outlined { font-size: 11px; color: var(--ember); flex-shrink: 0; }

.bh-shell .rule-amount {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ok);
    flex-shrink: 0;
}

.bh-shell .rule-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 7px;
    border-top: 1px solid var(--b-sub);
    margin-top: 3px;
}

.bh-shell .rule-total-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.bh-shell .rule-total-amount {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--ok);
}

/* ============================================================
   EMPTY STATE (pedidos no disponibles en períodos genéricos)
   ============================================================ */
.bh-shell .section-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px;
    gap: 8px;
    color: var(--t3);
}

.bh-shell .section-empty .material-symbols-outlined { font-size: 26px; }
.bh-shell .section-empty span:last-child { font-size: 12.5px; }

/* ── Merma en la liquidación (24-jul) · historia + pérdida vs descuento ─────── */
/* Mini-desglose bruto → neto bajo el hero (modo activo con descuento de mermas). */
.bh-shell .hero-net {
    margin-top: 14px;
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px;
    background: var(--s2);
    border: 1px solid var(--b-sub);
    border-radius: var(--r-md);
    max-width: 340px;
}
.bh-shell .hero-net__row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--t2); }
.bh-shell .hero-net__row--neg span:last-child { color: var(--warn); }
.bh-shell .hero-net__row--total {
    margin-top: 4px; padding-top: 8px;
    border-top: 1px solid var(--b-sub);
    font-weight: 700; color: var(--t1);
}

/* Filas de merma · colapsables (mismo patrón que las de pedidos). */
.bh-shell .merma-list { display: flex; flex-direction: column; }
.bh-shell .merma-row {
    border: 1px solid var(--b-sub);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-md);
    margin-bottom: 8px;
    overflow: hidden;
    transition: background var(--dur-fast) var(--ease);
}
.bh-shell .merma-row--pending { border-left-color: var(--t3); }
.bh-shell .merma-row.expanded { background: rgba(217, 162, 86, .03); }

.bh-shell .merma-row__main {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    cursor: pointer; user-select: none; -webkit-user-select: none;
}
.bh-shell .merma-row__main:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; }

.bh-shell .merma-row__badge {
    width: 22px; height: 22px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.bh-shell .merma-row__badge .material-symbols-outlined { font-size: 16px; }
.bh-shell .merma-row__badge--done { background: var(--ok-bg); color: var(--ok); }
.bh-shell .merma-row__badge--pending { background: var(--warn-bg); color: var(--warn); }

.bh-shell .merma-row__title { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.bh-shell .merma-row__product { font-size: 13.5px; font-weight: 600; color: var(--t1); }
.bh-shell .merma-row__order { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--t3); }

.bh-shell .merma-row__amount {
    font-family: var(--font-mono); font-size: 14px; font-weight: 600;
    color: var(--err); flex-shrink: 0;
}
.bh-shell .merma-row__amount--pending { font-weight: 500; font-size: 11.5px; color: var(--warn); }

.bh-shell .merma-row__chevron {
    width: 18px; height: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--t3);
    transition: transform var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.bh-shell .merma-row__chevron .material-symbols-outlined { font-size: 16px; }
.bh-shell .merma-row.expanded .merma-row__chevron { transform: rotate(180deg); color: var(--t2); }

.bh-shell .merma-row__detail { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease); }
.bh-shell .merma-row.expanded .merma-row__detail { max-height: 320px; }
.bh-shell .merma-row__detail-inner {
    padding: 0 14px 12px 46px;
    display: flex; flex-direction: column; gap: 5px;
}
.bh-shell .merma-row__meta { font-size: 12px; color: var(--t3); line-height: 1.45; }
.bh-shell .merma-row__meta--pending { color: var(--warn); }
.bh-shell .merma-row__lines { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.bh-shell .merma-line {
    font-size: 11.5px; color: var(--t2);
    background: var(--s2); border: 1px solid var(--b-sub);
    padding: 2px 8px; border-radius: var(--r-sm);
}
.bh-shell .merma-row__impact {
    margin-top: 4px; padding-top: 8px;
    border-top: 1px solid var(--b-sub);
    font-size: 13px; color: var(--t2); line-height: 1.6;
}
.bh-shell .merma-row__impact strong { color: var(--t1); }
.bh-shell .merma-row__impact strong.merma-neg { color: var(--err); }
.bh-shell .merma-row__arrow { color: var(--t3); margin: 0 4px; }
.bh-shell .merma-row__absorbed { color: var(--t3); }

/* Total de mermas · diseño propio rojizo/negativo (análogo al "Total liquidado"). */
.bh-shell .merma-total {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px; padding: 12px 16px;
    background: var(--err-bg);
    border: 1px solid rgba(224, 108, 117, .22);
    border-radius: var(--r-md);
}
.bh-shell .merma-total__label {
    font-size: 11px; font-weight: 600; color: var(--err);
    text-transform: uppercase; letter-spacing: .06em;
}
.bh-shell .merma-total__amount { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--err); }