<style>
    .btn-processing {
        pointer-events: none;
        opacity: .85 !important;
        background: #000 !important;
        color: #fff !important;
    }
    .alert-danger {
        font-size: 1rem;
        font-weight: 600;
    }

    /* —— Bloqueo global del grid cuando el usuario llega al tope —— */
    #grid-cartones.limit-reached::after {
        content: '';
        filter: grayscale(.6) opacity(.5);
        background: #fff !important;
        cursor: not-allowed;
        position: absolute;
        top: 40px;
        width: 100% !important;
        height: 80% !important;
    }
    /* Cartones activos nítidos por encima del velo */
    #grid-cartones .bubble.active {
        filter: none;
        position: relative;
        z-index: 9;
    }
    .carton-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    .carton-item .btn-ver {
        font-size: 0.75rem;
        padding: 0.1rem 0.5rem;
    }

    /* Estilos para el modal de detalles */
    .bingo-card-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        text-align: center;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        border: 2px solid #333;
        border-radius: 8px;
        padding: 10px;
    }
    .bingo-card-grid .header {
        font-weight: bold;
        background-color: #333;
        color: white;
        padding: 5px;
        border-radius: 4px;
    }
    .bingo-card-grid .number {
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f9f9f9;
    }
    .bingo-card-grid .free-space {
        background-color: #ffc107;
        color: #333;
        font-weight: bold;
    }

    .section-title-2 {
        font-weight: bold;
        color: white;
        text-decoration: none; /* opcional: quita el subrayado del enlace */
    }

    /* ---- CORRECCIÓN PRINCIPAL ---- */
    /* Dejamos que Bootstrap maneje el z-index del primer modal (#modalPago) */
    /* y solo nos aseguramos de que los modales que van encima tengan un z-index superior. */

    /* Eleva el modal de detalles por encima del modal de pago */
    #cartonDetailsModal {
        z-index: 1055; /* Un valor justo por encima del modal base de Bootstrap (1050) */
    }

    /* Eleva el modal de alertas por encima de TODO */
    #alertModal {
        z-index: 1060; /* El más alto de todos */
    }
</style>