/* =============================================================================
   CONDICIÓN DE PAGO (multiplazo) — el bloque de core/condicion-pago-ui.js.
   Lámina 38, ganó A. Vive en DOS identidades: la pre-carga (`.cm-ui`, acento
   azure) y los «Nuevo pedido» (`.vt-ui`, navy y nada más — la ronda 2 de Ventas
   votó contra un azure propio). El acento entra por `--mp-acc`; ninguna regla
   de acá nombra un color de acento directo.
   ============================================================================= */
.cm-ui { --mp-acc: var(--azure); --mp-acc-050: var(--azure-050); }
.vt-ui { --mp-acc: var(--navy-500); --mp-acc-050: var(--navy-050); }

.cm-ui .mp-fila, .vt-ui .mp-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-ui .mp-chips, .vt-ui .mp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.cm-ui .mp-chips button, .vt-ui .mp-chips button {
    font: inherit; font-size: .74rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
    border: 1px solid var(--hair-strong); background: var(--surface); color: var(--muted); cursor: pointer;
    transition: background-color .15s var(--curva, ease), color .15s var(--curva, ease);
}
.cm-ui .mp-chips button.on, .vt-ui .mp-chips button.on { background: var(--mp-acc); border-color: var(--mp-acc); color: #fff; }
.cm-ui .mp-chips button.otra, .vt-ui .mp-chips button.otra { border-style: dashed; }
.cm-ui .mp-chips button.otra.on, .vt-ui .mp-chips button.otra.on { border-style: solid; }
.cm-ui .mp-texto, .vt-ui .mp-texto {
    width: 96px; font: inherit; font-size: .8rem; font-weight: 700; letter-spacing: .03em;
    padding: 5px 9px; border: 1px solid var(--hair-strong); border-radius: 8px; background: var(--surface); color: var(--ink);
}
.cm-ui .mp-texto:focus, .vt-ui .mp-texto:focus { outline: 2px solid var(--mp-acc); outline-offset: 1px; }

.cm-ui .mp-base, .vt-ui .mp-base { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 9px; }
.cm-ui .mp-base > span, .vt-ui .mp-base > span { font-size: .68rem; color: var(--faint); }
.cm-ui .mp-seg, .vt-ui .mp-seg {
    display: inline-flex; border: 1px solid var(--hair-strong); border-radius: 999px; overflow: hidden; background: var(--surface);
}
.cm-ui .mp-seg button, .vt-ui .mp-seg button {
    font: inherit; font-size: .7rem; font-weight: 700; padding: 5px 11px; border: none; background: none;
    color: var(--muted); cursor: pointer;
}
.cm-ui .mp-seg button.on, .vt-ui .mp-seg button.on { background: var(--mp-acc); color: #fff; }
.cm-ui .mp-base .lp, .vt-ui .mp-base .lp {
    font-size: .68rem; font-weight: 700; color: var(--navy-500);
    background: var(--navy-050); border-radius: 999px; padding: 2px 9px;
}
.cm-ui .mp-lpnota, .vt-ui .mp-lpnota {
    margin: 7px 0 0; padding: 7px 11px; border-radius: 9px; font-size: .72rem; line-height: 1.5;
    background: var(--navy-050); color: var(--ink);
}
.cm-ui .mp-lpnota b, .vt-ui .mp-lpnota b { color: var(--navy-700); }

/* Etapa 3 · distinta de la habitual: ámbar, SÓLO avisa (decisión 3). */
.cm-ui .mp-hab, .vt-ui .mp-hab {
    margin: 7px 0 0; padding: 7px 11px; border-radius: 9px; font-size: .72rem; line-height: 1.5;
    background: var(--warn-050); border: 1px solid var(--warn-hair); color: var(--ink);
}
.cm-ui .mp-hab b, .vt-ui .mp-hab b { color: var(--warn); }
.cm-ui .mp-hab .mas, .vt-ui .mp-hab .mas {
    font: inherit; font-size: .72rem; font-weight: 700; color: var(--mp-acc); background: none; border: none;
    cursor: pointer; padding: 0; margin-left: 4px; text-decoration: underline;
}

.cm-ui .mp-tabla, .vt-ui .mp-tabla {
    margin-top: 10px; width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden;
    font-size: .76rem;
}
.cm-ui .mp-tabla th, .vt-ui .mp-tabla th {
    text-align: left; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted); padding: 7px 10px; background: #f2f5fa; border-bottom: 1px solid var(--hair);
}
.cm-ui .mp-tabla td, .vt-ui .mp-tabla td { padding: 6px 10px; border-bottom: 1px solid var(--hair); color: var(--ink); }
.cm-ui .mp-tabla tbody tr:last-child td, .vt-ui .mp-tabla tbody tr:last-child td { border-bottom: 1px solid var(--hair); }
.cm-ui .mp-tabla tfoot td, .vt-ui .mp-tabla tfoot td { background: #f7f9fc; font-weight: 700; border-bottom: none; }
.cm-ui .mp-tabla .n, .vt-ui .mp-tabla .n { width: 26px; color: var(--faint); font-weight: 700; }
.cm-ui .mp-tabla .num, .vt-ui .mp-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.cm-ui .mp-tabla input, .vt-ui .mp-tabla input {
    width: 62px; font: inherit; font-variant-numeric: tabular-nums; text-align: right;
    padding: 4px 7px; border: 1px solid var(--hair-strong); border-radius: 7px; background: var(--surface); color: var(--ink);
}
.cm-ui .mp-tabla input.mod, .vt-ui .mp-tabla input.mod { border-color: var(--mp-acc); background: var(--mp-acc-050); }
.cm-ui .mp-tabla .u, .vt-ui .mp-tabla .u { font-size: .68rem; color: var(--faint); margin-left: 4px; }
.cm-ui .mp-tabla .ok, .vt-ui .mp-tabla .ok { color: var(--ok); }
.cm-ui .mp-tabla .mal, .vt-ui .mp-tabla .mal { color: var(--crit); }
.cm-ui .mp-tabla .mas, .vt-ui .mp-tabla .mas {
    font: inherit; font-size: .72rem; font-weight: 700; color: var(--mp-acc); background: none; border: none;
    cursor: pointer; padding: 0;
}
.cm-ui .mp-tabla .x, .vt-ui .mp-tabla .x { text-align: center; width: 24px; }
.cm-ui .mp-tabla .x button, .vt-ui .mp-tabla .x button {
    font: inherit; font-size: .95rem; color: var(--faint); background: none; border: none; cursor: pointer; padding: 0 4px;
}
.cm-ui .mp-tabla .x button:hover, .vt-ui .mp-tabla .x button:hover { color: var(--crit); }

@media (max-width: 767px) {
    .cm-ui .mp-tabla .fch, .vt-ui .mp-tabla .fch,
    .cm-ui .mp-tabla .u, .vt-ui .mp-tabla .u { display: none; }
    .cm-ui .mp-tabla th, .vt-ui .mp-tabla th,
    .cm-ui .mp-tabla td, .vt-ui .mp-tabla td { padding: 6px 6px; }
    .cm-ui .mp-tabla .num, .vt-ui .mp-tabla .num { white-space: nowrap; }
    .cm-ui .mp-tabla .x, .vt-ui .mp-tabla .x { width: 14px; padding-left: 0; }
    .cm-ui .mp-tabla input, .vt-ui .mp-tabla input { width: 44px; padding: 4px 5px; }
}

/* La frase que cierra «Cómo se cobra» en los «Nuevo pedido», cuando no cierra. */
.vt-ui .vt-nv-cierre.mal { color: var(--crit); }
.vt-ui .vt-nv-cierre.mal b { color: var(--crit); }