/**
 * AxA Cuotas - Estilos Front
 *
 * Usa CSS custom properties (variables) que cada template visual
 * sobreescribe vía inline style. Esto permite editar colores, tamaños
 * y posición desde el BO sin recompilar CSS.
 *
 * Defaults razonables que se aplican si el template no define un valor.
 */

.axc-block {
    /* === Defaults (sobreescritos por inline style del template) === */
    --axc-bg: #ffffff;
    --axc-border: #e0e7ef;
    --axc-border-left: #0b5590;
    --axc-text: #1a3a5c;
    --axc-accent: #c62828;
    --axc-title-color: #0b5590;
    --axc-highlight-bg: #fff8e1;
    --axc-highlight-text: #f57f17;
    --axc-icon: #0b5590;

    --axc-padding: 12px 16px;
    --axc-radius: 8px;
    --axc-fs: 14px;
    --axc-title-fs: 15px;
    --axc-price-fs: 22px;
    --axc-amount-fs: 16px;
    --axc-icon-fs: 18px;
    --axc-min-width: auto;

    --axc-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    --axc-opacity: 1;

    /* === Estructura base === */
    background: var(--axc-bg);
    border: 1px solid var(--axc-border);
    border-left: 4px solid var(--axc-border-left);
    border-radius: var(--axc-radius);
    color: var(--axc-text);
    padding: var(--axc-padding);
    margin: 8px 0;
    font-size: var(--axc-fs);
    line-height: 1.35;
    box-shadow: var(--axc-shadow);
    opacity: var(--axc-opacity);
    box-sizing: border-box;
}

.axc-block * { box-sizing: border-box; }

.axc-block-title {
    color: var(--axc-title-color);
    font-size: var(--axc-title-fs);
    font-weight: 600;
    margin-bottom: 6px;
    letter-spacing: .2px;
}

.axc-block-subtitle {
    color: var(--axc-text);
    font-size: calc(var(--axc-fs) - 1px);
    margin-bottom: 8px;
    opacity: .8;
}

.axc-block-footer {
    color: var(--axc-text);
    font-size: calc(var(--axc-fs) - 2px);
    margin-top: 8px;
    opacity: .7;
}

/* ==========================================================
   Planes dentro del bloque
   ========================================================== */
.axc-plans {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.axc-plan {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
}

/* La fila principal del plan (icono | body | monto) sigue siendo flex horizontal */
.axc-plan-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.axc-plan + .axc-plan {
    border-top: 1px dashed rgba(0, 0, 0, .06);
    padding-top: 10px;
    margin-top: 4px;
}

.axc-plan-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--axc-icon);
    font-size: var(--axc-icon-fs);
}

.axc-plan-body {
    flex: 1;
    min-width: 0;
}

.axc-plan-name {
    font-weight: 600;
    color: var(--axc-text);
}

.axc-plan-helper {
    font-size: calc(var(--axc-fs) - 2px);
    color: var(--axc-text);
    opacity: .65;
    margin-top: 2px;
}

.axc-plan-amount {
    flex: 0 0 auto;
    text-align: right;
    color: var(--axc-text);
    font-weight: 700;
    font-size: var(--axc-amount-fs);
    white-space: nowrap;
}

.axc-plan-installments {
    color: var(--axc-text);
    opacity: .7;
    font-weight: 500;
    margin-right: 4px;
}

.axc-plan-price {
    color: var(--axc-text);
}

/* ==========================================================
   Plan destacado (highlight) — estética "mejor oferta"
   ========================================================== */
.axc-plan--highlight {
    background: var(--axc-highlight-bg);
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
    margin: 4px -4px;
}
.axc-plan--highlight .axc-plan-icon { color: var(--axc-highlight-text); }
.axc-plan--highlight .axc-plan-price { color: var(--axc-highlight-text); font-size: var(--axc-price-fs); }

/* ==========================================================
   Variantes específicas por preset (tweaks finos)
   ========================================================== */

/* Preset: tarjeta efectivo destacado — look minimal-card */
.axc-preset-product-cash-card.axc-block {
    background: transparent;
    border: none;
    border-left: none;
    padding: 0;
    box-shadow: none;
    margin: 12px 0;
}

.axc-preset-product-cash-card .axc-block-title {
    color: var(--axc-title-color, #748999);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.axc-preset-product-cash-card .axc-block-subtitle {
    font-size: 22px;
    font-weight: 700;
    color: var(--axc-text, #222);
    margin-bottom: 14px;
    opacity: 1;
}

.axc-preset-product-cash-card .axc-plans {
    gap: 8px;
}

/* Cada plan se vuelve una card individual */
.axc-preset-product-cash-card .axc-plan {
    background: #fff;
    border: 1px solid var(--axc-border, #e0e0e0);
    border-radius: 8px;
    padding: 14px 18px;
    gap: 14px;
    margin: 0 !important;
}

/* Anular el separador entre planes adicionales (cada uno es card aparte) */
.axc-preset-product-cash-card .axc-plan + .axc-plan {
    border-top: 1px solid var(--axc-border, #e0e0e0);
    padding-top: 14px;
    margin-top: 0 !important;
}

.axc-preset-product-cash-card .axc-plan-icon {
    width: 28px;
    height: 28px;
    color: var(--axc-icon, #b0bcc7);
    font-size: 18px;
    visibility: hidden; /* default oculto */
}

/* v1.20.0: si el plan tiene show_icon forzado visible (axc-plan--icon-forced),
   el CSS del preset respeta esa decisión y muestra el icono. */
.axc-preset-product-cash-card .axc-plan--icon-forced .axc-plan-icon {
    visibility: visible;
}

.axc-preset-product-cash-card .axc-plan-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--axc-text, #2c3e50);
}

.axc-preset-product-cash-card .axc-plan-helper {
    font-size: 12px;
    color: #748999;
}

.axc-preset-product-cash-card .axc-plan-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--axc-text, #222);
}

/* Plan DESTACADO: gradient verde (izq) → blanco (der) + borde verde izq + icono + tipografía en verde */
.axc-preset-product-cash-card .axc-plan--highlight {
    background: linear-gradient(
        to right,
        var(--axc-highlight-bg-start, #e8f5e9) 0%,
        var(--axc-highlight-bg-end, #ffffff) 100%
    );
    border: 1px solid var(--axc-highlight-bg-start, #c8e6c9);
    border-left: 5px solid var(--axc-accent, #2e7d32);
    padding-left: 14px;
}

.axc-preset-product-cash-card .axc-plan--highlight .axc-plan-icon {
    visibility: visible;
    color: var(--axc-icon, #2e7d32);
    width: 28px;
    height: 28px;
}

.axc-preset-product-cash-card .axc-plan--highlight .axc-plan-name {
    color: var(--axc-highlight-text, #2e7d32);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.axc-preset-product-cash-card .axc-plan--highlight .axc-plan-price {
    color: var(--axc-accent, #2e7d32);
    font-size: 26px;
    font-weight: 700;
}

/* SVG inline: hereda color del padre */
.axc-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.axc-svg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.axc-preset-product-cash-card .axc-block-footer {
    margin-top: 10px;
    color: #748999;
    font-size: 11px;
    opacity: 1;
}

/* Asterisco chiquito en superíndice */
.axc-asterisk {
    font-size: 0.65em;
    color: #b0bcc7;
    margin-left: 3px;
    vertical-align: super;
    font-weight: 500;
}

/* Preset: tarjeta de medio de pago neutro */
.axc-preset-product-payment-card .axc-plan-price {
    font-size: var(--axc-amount-fs);
}

/* Preset: bloque de cuotas (con título grande) */
.axc-preset-product-installment-block .axc-block-title {
    font-size: calc(var(--axc-title-fs) + 1px);
}
.axc-preset-product-installment-block .axc-plan-price {
    color: var(--axc-accent);
}

/* ==========================================================
   Listado (Fase 4): floating pill + bottom banner
   Los estilos de posicionamiento ya se aplican vía variables
   (top, bottom, left, right, transform, z-index del template).
   ========================================================== */
.axc-block--list.axc-preset-list-floating-pill,
.axc-block--list.axc-preset-list-bottom-banner {
    position: absolute;
    top: var(--axc-top, auto);
    bottom: var(--axc-bottom, auto);
    left: var(--axc-left, auto);
    right: var(--axc-right, auto);
    transform: var(--axc-transform, none);
    z-index: var(--axc-zindex, 10);
    min-width: var(--axc-min-width, auto);
    margin: 0;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 480px) {
    .axc-block { font-size: calc(var(--axc-fs) - 1px); padding: 10px 12px; }
    .axc-plan { gap: 8px; }
    .axc-plan-amount { font-size: calc(var(--axc-amount-fs) - 2px); }
    .axc-plan--highlight .axc-plan-price { font-size: calc(var(--axc-price-fs) - 4px); }
}

/* ==========================================================
   Wrapper del scanner JS para listado
   El scanner JS envuelve el bloque retornado por el server
   con esto para anclarlo a la miniatura del producto.
   ========================================================== */
.axc-list-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}
.axc-list-wrapper .axc-block {
    pointer-events: auto;
}

/* En listado, el bloque por defecto no tiene margen y va más compacto. */
.axc-block--list {
    margin: 0;
    font-size: var(--axc-fs, 12px);
    padding: var(--axc-padding, 6px 12px);
}

/* === Wrapper MINI: para sliders del home con imágenes < 220px === */
.axc-list-wrapper--mini .axc-block--list {
    font-size: 10px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    line-height: 1.05 !important;
}
.axc-list-wrapper--mini .axc-block--list .axc-plan-name {
    font-size: 8px !important;
    letter-spacing: .2px !important;
}
.axc-list-wrapper--mini .axc-block--list .axc-plan-amount,
.axc-list-wrapper--mini .axc-block--list .axc-plan-price {
    font-size: 9px !important;
}
.axc-list-wrapper--mini .axc-block--list .axc-plan-icon svg,
.axc-list-wrapper--mini .axc-block--list svg {
    width: 9px !important;
    height: 9px !important;
}
/* En mini ocultar helper_text y conditions, no entran */
.axc-list-wrapper--mini .axc-plan-helper,
.axc-list-wrapper--mini .axc-conditions,
.axc-list-wrapper--mini .axc-block-footer,
.axc-list-wrapper--mini .axc-block-subtitle {
    display: none !important;
}

/* ==========================================================
   Preset: PILL FLOTANTE
   Banderín compacto sobre la imagen del producto.
   SIEMPRE muestra al menos el primer plan; title/subtitle son opcionales.
   ========================================================== */
.axc-preset-list-floating-pill {
    position: absolute;
    top: var(--axc-top, auto);
    bottom: var(--axc-bottom, 8px);
    left: var(--axc-left, 50%);
    right: var(--axc-right, auto);
    transform: var(--axc-transform, translateX(-50%));
    z-index: var(--axc-zindex, 10);
    min-width: var(--axc-min-width, auto);

    border-radius: var(--axc-radius, 6px);
    border: 1px solid var(--axc-border, #a5d6a7);
    border-left-width: 1px;
    background: var(--axc-bg, #e8f5e9);
    box-shadow: var(--axc-shadow, 0 2px 8px rgba(0,0,0,.15));
    color: var(--axc-text, #1b5e20);
    padding: 5px 12px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.axc-preset-list-floating-pill .axc-block-title {
    color: var(--axc-title-color, var(--axc-text, #1b5e20));
    font-size: var(--axc-title-fs, 11px);
    font-weight: 700;
    margin: 0 0 2px 0;
    text-align: center;
    letter-spacing: 0;
}

.axc-preset-list-floating-pill .axc-block-subtitle {
    color: var(--axc-text, #2e7d32);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-top: 0;
    opacity: 1;
}

/* En el pill mostramos SOLO el primer plan (compacto, en una línea).
   Los planes adicionales se ocultan para no saturar visualmente. */
.axc-preset-list-floating-pill .axc-plans {
    display: block;
    margin: 0;
}
.axc-preset-list-floating-pill .axc-plan {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 0;
    border: none !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.axc-preset-list-floating-pill .axc-plan-name {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.axc-preset-list-floating-pill .axc-plan-amount,
.axc-preset-list-floating-pill .axc-plan-price {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.axc-preset-list-floating-pill .axc-plan + .axc-plan {
    display: none;
}
.axc-preset-list-floating-pill .axc-plan-icon {
    width: 16px;
    height: 16px;
    font-size: 12px;
}
.axc-preset-list-floating-pill .axc-plan-body {
    flex: 0 0 auto;
}
.axc-preset-list-floating-pill .axc-plan-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--axc-text);
    line-height: 1.2;
}
.axc-preset-list-floating-pill .axc-plan-helper {
    display: none;
}
.axc-preset-list-floating-pill .axc-plan-amount,
.axc-preset-list-floating-pill .axc-plan-price {
    font-size: 12px;
    font-weight: 800;
    color: var(--axc-accent, var(--axc-text));
    line-height: 1.2;
}
.axc-preset-list-floating-pill .axc-plan-installments {
    font-size: 12px;
    font-weight: 500;
}
.axc-preset-list-floating-pill .axc-block-footer { display: none; }

/* ==========================================================
   Preset: BANNER INFERIOR
   Barra que ocupa el ancho de la imagen, fondo coloreado.
   Muestra los planes en línea horizontal. Opcionalmente puede
   tener título/subtítulo como acento arriba.
   ========================================================== */
.axc-preset-list-bottom-banner {
    position: absolute;
    top: var(--axc-top, auto);
    bottom: var(--axc-bottom, 0);
    left: var(--axc-left, 0);
    right: var(--axc-right, 0);
    transform: var(--axc-transform, none);
    z-index: var(--axc-zindex, 8);

    border-radius: 0;
    border: none;
    background: var(--axc-bg, rgba(11,85,144,.92));
    color: var(--axc-text, #ffffff);
    padding: var(--axc-padding, 6px 10px);
    text-align: center;

    /* Layout: si hay título, va arriba; planes abajo en fila */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    line-height: 1.15;
}

.axc-preset-list-bottom-banner .axc-block-title {
    color: var(--axc-text, #ffffff);
    font-size: 11px;
    font-weight: 700;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.axc-preset-list-bottom-banner .axc-block-subtitle {
    color: var(--axc-text, #ffffff);
    font-size: 9px;
    opacity: .85;
    margin-top: 0;
    text-align: center;
}

/* Planes: layout horizontal compacto. Si hay 1 plan ocupa el centro;
   si hay 2-3 planes se distribuyen con separador entre ellos. */
.axc-preset-list-bottom-banner .axc-plans {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.axc-preset-list-bottom-banner .axc-plan {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    /* Separador visual entre planes (línea vertical) */
    position: relative;
    flex-wrap: nowrap !important;
}
.axc-preset-list-bottom-banner .axc-plan-name {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
.axc-preset-list-bottom-banner .axc-plan-amount,
.axc-preset-list-bottom-banner .axc-plan-price {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.axc-preset-list-bottom-banner .axc-plan + .axc-plan::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}

/* Iconos de plan: blancos, pequeños */
.axc-preset-list-bottom-banner .axc-plan-icon,
.axc-preset-list-bottom-banner .axc-plan svg {
    color: #fff;
    fill: #fff;
    width: 12px;
    height: 12px;
    display: inline-flex;
    align-items: center;
}

.axc-preset-list-bottom-banner .axc-plan-name {
    color: rgba(255, 255, 255, 0.95);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.axc-preset-list-bottom-banner .axc-plan-amount,
.axc-preset-list-bottom-banner .axc-plan-price {
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    white-space: nowrap;
}

/* Helper text del plan (tipo "VER CONDICIONES") en el banner ocupa
   demasiado espacio. Lo ocultamos por default en este preset. */
.axc-preset-list-bottom-banner .axc-plan-helper {
    display: none;
}

/* Footer del bloque (el pie general): ocultado, no encaja en banner */
.axc-preset-list-bottom-banner .axc-block-footer { display: none; }

/* Condiciones por plan: ocultas en banner (no hay espacio para ellas) */
.axc-preset-list-bottom-banner .axc-conditions {
    display: none;
}

/* Si el banner tiene solo planes (sin título ni subtítulo), reducimos
   el padding vertical para que la barra sea más compacta */
.axc-preset-list-bottom-banner:not(:has(.axc-block-title)):not(:has(.axc-block-subtitle)) {
    padding: 4px 10px;
}

/* En mobile (miniaturas chicas) achicamos todo proporcionalmente */
@media (max-width: 480px) {
    .axc-preset-list-bottom-banner {
        padding: 3px 6px;
    }
    .axc-preset-list-bottom-banner .axc-plan-name {
        font-size: 8px;
    }
    .axc-preset-list-bottom-banner .axc-plan-amount,
    .axc-preset-list-bottom-banner .axc-plan-price {
        font-size: 10px;
    }
    .axc-preset-list-bottom-banner .axc-block-title {
        font-size: 9px;
    }
    .axc-preset-list-bottom-banner .axc-plans {
        gap: 5px;
    }
}

/* ==========================================================
   Condiciones de promoción (líneas debajo de los planes)
   ========================================================== */
.axc-conditions {
    display: flex;
    flex-direction: column;
    gap: var(--axc-cond-gap, 8px);
    margin-top: 12px;
    padding: var(--axc-cond-bg-padding, 0);
    background: var(--axc-cond-bg, transparent);
    border-radius: 6px;
}

.axc-cond-emphasis {
    color: var(--axc-cond-emphasis, #1e293b);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* ==========================================================
   Logos: altura uniforme + alineación inline
   ========================================================== */
.axc-logo {
    display: inline-block;
    vertical-align: -4px;
    height: var(--axc-logo-height, 18px);
    line-height: 1;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.axc-logo svg {
    height: 100%;
    width: auto;
    max-height: var(--axc-logo-height, 18px);
    display: block;
}

.axc-logo-missing {
    display: inline-block;
    padding: 1px 6px;
    background: #fee;
    color: #c33;
    border-radius: 3px;
    font-size: 11px;
    font-family: monospace;
}

/* ==========================================================
   Condiciones DENTRO de cada plan card (nuevo layout)
   ========================================================== */

.axc-plan-conditions {
    display: flex;
    flex-direction: column;
    gap: var(--axc-cond-gap, 6px);
    margin-top: -2px;  /* compensar el gap del flex padre (.axc-plan) */
    padding-top: 8px;  /* espacio entre la línea divisoria y la primera condición */
    border-top: 1px dashed #d8e0e8;
}

/* La condición NO es flex: es un párrafo normal donde icono y logos
   son elementos inline-block alineados verticalmente. Eso permite que
   el texto wrappee sin espacios raros al final de cada línea (que es
   lo que pasa con flex-wrap + gap). */
.axc-plan-conditions .axc-cond {
    display: block;
    line-height: 1.6;
    color: var(--axc-cond-text, #475569);
    font-size: 13px;
    text-align: left;
    text-indent: -28px;       /* sangría francesa: el icono "cuelga" a la izquierda */
    padding-left: 28px;
    word-spacing: normal;
}

/* El icono se comporta como una palabra inline-block al inicio del párrafo */
.axc-plan-conditions .axc-cond-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    vertical-align: -4px;     /* alineación óptica con la línea base del texto */
    color: var(--axc-cond-icon, #22c55e);
    margin-right: 10px;
    text-indent: 0;
}
.axc-plan-conditions .axc-cond-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

/* El texto fluye como inline normal */
.axc-plan-conditions .axc-cond-text {
    display: inline;
    text-indent: 0;
}

/* Logos: inline-block alineados con el texto.
   PROBADO en Chrome contra texto bold 13px / line-height 20.8px:
   - height: 14px → contenido visual ~12px (similar a x-height del bold).
   - vertical-align: -4px → centra ópticamente con el texto.
   - overflow: hidden → recorta cualquier ascender del font del texto del SVG
     que se desborde del viewBox (Arial 13 en viewBox h=16 renderiza 18px).
*/
.axc-plan-conditions .axc-logo,
.axc-cond-text .axc-logo {
    display: inline-block;
    vertical-align: -4px;
    height: var(--axc-logo-height, 18px);
    line-height: 1;
    margin: 0;
    overflow: hidden;
}
.axc-plan-conditions .axc-logo svg,
.axc-cond-text .axc-logo svg {
    height: var(--axc-logo-height, 18px);
    width: auto;
    display: block;
}

/* En plans destacados, el separador de la condición usa el color de acento */
.axc-plan--highlight .axc-plan-conditions {
    border-top-color: rgba(46, 125, 50, .25);
}

/* ============================================================
   Preset COMPACT — Bloque con filas compactas y condiciones
   globales al pie. Modelo: un solo card que contiene varias
   opciones de pago como filas + condición compartida al final.
   ============================================================ */

.axc-block.axc-preset-product-compact {
    /* El bloque entero es un card: una sola unidad visual. */
    padding: 0;  /* el padding lo manejamos por sección */
}

.axc-preset-product-compact .axc-block-title {
    padding: 12px 16px 8px;
    margin: 0;
    font-size: var(--axc-title-size, 14px);
    color: var(--axc-title, #0b5590);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.axc-preset-product-compact .axc-block-subtitle {
    padding: 0 16px 6px;
    margin: 0;
    color: var(--axc-text, #1a3a5c);
    font-size: 12px;
}

/* Lista de planes: filas compactas, sin separadores, sin cards. */
.axc-preset-product-compact .axc-plans {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;            /* filas muy pegadas */
    background: none;    /* anular cualquier fondo heredado */
}

.axc-preset-product-compact .axc-plan {
    /* Despojar la card del plan: en este preset las filas no son cards. */
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 4px 0;
    margin: 0;
    gap: 0;
    flex-direction: column;
}

.axc-preset-product-compact .axc-plan-main {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: none;
    border: 0;
}

/* Icono del plan: chico, color suave (bullet ▸ por default desde icon_color). */
.axc-preset-product-compact .axc-plan-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--axc-icon-color, #0b5590);
}
.axc-preset-product-compact .axc-plan-icon .axc-svg-icon svg {
    width: 12px;
    height: 12px;
}

/* Cuerpo del plan: nombre inline con el monto. */
.axc-preset-product-compact .axc-plan-body {
    flex: 1 1 auto;
    display: inline;
}
.axc-preset-product-compact .axc-plan-name {
    display: inline;
    color: var(--axc-text, #1a3a5c);
    font-size: var(--axc-font-size, 14px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2px;
}
.axc-preset-product-compact .axc-plan-helper {
    display: inline;
    color: #748999;
    font-size: 12px;
    margin-left: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* Monto: inline después del nombre, en rojo (accent), bien visible. */
.axc-preset-product-compact .axc-plan-amount {
    display: inline-block;
    margin-left: auto;
    text-align: right;
}
.axc-preset-product-compact .axc-plan-price {
    color: var(--axc-accent, #c62828);
    font-size: var(--axc-amount-size, 16px);
    font-weight: 800;
    white-space: nowrap;
}

/* Connector "de" entre nombre y precio - lo armamos visualmente con la palabra
   y reutilizando el contraste entre uppercase del nombre y mayúsculas chicas. */
.axc-preset-product-compact .axc-plan-body::after {
    content: " de ";
    color: #748999;
    font-weight: 400;
    text-transform: lowercase;
    font-size: 13px;
    margin-right: 4px;
}

/* Override: cuando es un plan tipo cash o debit_transfer (no cuotas), no
   queremos el "de" porque no aplica. Hide via class del plan. */
.axc-preset-product-compact .axc-plan.axc-plan-cash .axc-plan-body::after,
.axc-preset-product-compact .axc-plan.axc-plan-debit_transfer .axc-plan-body::after,
.axc-preset-product-compact .axc-plan.axc-plan-card_one .axc-plan-body::after {
    display: none;
}

/* Condiciones GLOBALES al pie del bloque (no por plan). */
.axc-preset-product-compact .axc-block-conditions {
    padding: 4px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: var(--axc-cond-gap, 4px);
}
.axc-preset-product-compact .axc-block-conditions .axc-cond {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--axc-cond-text, #475569);
    font-size: 13px;
    line-height: 1.4;
}
.axc-preset-product-compact .axc-block-conditions .axc-cond-icon {
    flex: 0 0 auto;
    color: var(--axc-cond-icon-color, var(--axc-icon-color, #0b5590));
    display: inline-flex;
    align-items: center;
}
.axc-preset-product-compact .axc-block-conditions .axc-cond-icon svg {
    width: 14px;
    height: 14px;
}
.axc-preset-product-compact .axc-block-conditions .axc-cond-emphasis {
    color: var(--axc-cond-emphasis, #1a3a5c);
    font-weight: 700;
}

/* Footer / disclaimer del bloque: fino, gris, al final. */
.axc-preset-product-compact .axc-block-footer {
    padding: 6px 16px 10px;
    color: #748999;
    font-size: 11px;
    font-style: italic;
    border-top: 1px solid #eef2f6;
    margin-top: 2px;
}

/* Anular bordes/sombras de cualquier plan destacado en este preset: el
   destacado se expresa solo con el icono diferente, no con un fondo. */
.axc-preset-product-compact .axc-plan--highlight {
    background: none !important;
    color: inherit !important;
}

/* ============================================================
   Inline icon — para iconos insertados con {icon:NAME} en
   title / subtitle / footer del bloque. Se dimensionan
   proporcionales al tamaño de fuente del contexto.
   ============================================================ */
.axc-inline-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: -0.15em;
    margin-right: 6px;
    color: inherit;
}
.axc-inline-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
/* En el preset compact el icono del título queda un poco más grande */
.axc-preset-product-compact .axc-block-title .axc-inline-icon svg {
    width: 1.15em;
    height: 1.15em;
}