/**
 * Plans Responsive (TCA)
 *
 * Ajustes responsive SEGUROS de la sección de planes (widget woo_mem_plans),
 * sin tocar el core ni el custom_css.css y — MUY IMPORTANTE — SIN forzar
 * display:flex sobre los paneles de tabs de Elementor.
 *
 * Nota (lección aprendida): un intento anterior hacía la columna de features
 * "sticky" y forzaba display:flex en el contenedor de la fila. Eso reactivaba
 * paneles de tabs que Elementor mantiene ocultos → se apilaban/duplicaban todas
 * las pestañas superpuestas. Por eso aquí NO se toca el layout de los tabs ni se
 * fuerza display en sus contenedores. Solo ajustamos cosas internas de la tarjeta
 * de plan, que no interfieren con el mostrar/ocultar de Elementor.
 */

@media (max-width: 1024px) {

    /* --- Scroll horizontal + centrado seguro de la fila de planes ---
       Cuando la fila comparativa (features + planes) se centra con
       justify-content:center y el contenido DESBORDA, el navegador empuja parte
       fuera del borde izquierdo y ese trozo queda INACCESIBLE (solo se puede
       scrollear hacia la derecha). La palabra clave `safe` lo resuelve: centra si
       cabe, pero cae a flex-start (izquierda) cuando desborda, conservando el
       scroll por ambos lados.
       Se ancla al contenedor real de la fila (el que tiene .tarifas-infocol como
       hijo directo) para no afectar a la barra de botones de las pestañas. */
    .plans-suscripcion-container :has(> .tarifas-infocol) {
        justify-content: safe center !important;
    }

    /* UN solo plan (.one-cols): que la tarjeta ocupe todo el ancho disponible en
       lugar de quedarse estrecha con un hueco a la derecha. */
    .plans-suscripcion-container .membership-plans-wrap.one-cols .pricing-wrap {
        width: 100% !important;
    }
    .plans-suscripcion-container .membership-plans-wrap.one-cols .price-item {
        flex: 1 1 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Tipografía interna un poco más contenida en pantallas pequeñas. */
    .plans-suscripcion-container .price-item h3.pricing-item-title {
        padding: 5px !important;
        font-size: 13px !important;
    }
    .plans-suscripcion-container .price-desc ul li:last-child {
        font-size: 15px !important;
        line-height: 16px !important;
    }
    .plans-suscripcion-container .price-link {
        font-size: 12px !important;
        line-height: 14px !important;
        margin: 5px !important;
        padding: 10px !important;
    }
    .plans-suscripcion-container .cannot-buy-plan-again {
        padding: 11px 0 !important;
        font-size: 14px !important;
        line-height: 16px !important;
    }
}