/* =========================================================================
   Botón de compra directa con Mercado Pago
   Páginas comerciales: km44.com.ar (index.html), estudios.km44.com.ar y
   gestión comercial (gestionfrontend). El destino es /comprar_online.php,
   que crea la preferencia de Checkout Pro y lleva directo a Mercado Pago.
   ========================================================================= */

.btn-comprar-mp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 15px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 999px;
    background: linear-gradient(135deg, #00a7ec 0%, #0077c8 100%);
    color: #ffffff !important;
    font: 700 0.78rem/1 Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 8px 18px rgba(0, 133, 200, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.btn-comprar-mp:hover,
.btn-comprar-mp:focus {
    color: #ffffff !important;
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 24px rgba(0, 133, 200, 0.38);
}

.btn-comprar-mp:focus-visible {
    outline: 3px solid rgba(0, 158, 227, 0.45);
    outline-offset: 2px;
}

.btn-comprar-mp svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Ícono de tarjeta (inline, sin depender de librerías de iconos) */
.btn-comprar-mp::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Tamaños */
.btn-comprar-mp--xs {
    padding: 6px 12px;
    font-size: 0.72rem;
}

.btn-comprar-mp--lg {
    padding: 11px 22px;
    font-size: 0.86rem;
}

/* Fila "importe + comprar": usada en las tarjetas resumen de módulos
   (index.html) para que el botón quede al lado del importe. */
.sys-module-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: auto;
}

.sys-module-price-row > .sys-module-price {
    margin-top: 0;
}

/* Dentro de las tarjetas de planes (flex column) el botón se centra */
.plan-box > .btn-comprar-mp,
.plan > .btn-comprar-mp,
.module-foot .btn-comprar-mp {
    align-self: center;
}

/* Tabla de precios por módulo (index.html) */
.sys-price-tbl .btn-comprar-mp {
    margin-left: 10px;
}

/* En pantallas angostas el botón puede bajar dentro del importe del módulo
   (contadores) en lugar de forzar una línea sin cortes. */
@media (max-width: 560px) {
    .module-price { white-space: normal; }
    .module-price .btn-comprar-mp { margin-top: 6px; }
}