body {
    background-image: url('../images/fondo_pasarela.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

/* Contenedor principal */
.contenedor2 {
    margin-top: 280px;
    background: rgba(255,255,255,0.95);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}

/* Espaciado tabla */
.contenedorDatos {
    margin-top: 25px;
}

/* Botones */
.contenedorBoton {
    margin-top: 20px;
}

.contenedorBotonSalir {
    margin-top: 20px;
}

/* Footer */
.contenedorFotter {
    margin-top: 40px;
    background-color: #0d6efd;
    padding: 12px;
    text-align: center;
    color: white;
    font-size: 13px;
}

/* Encabezado tabla */
#tab01 th {
    background: linear-gradient(90deg, #0d6efd, #0b5ed7);
    color: white;
    text-align: center;
    font-size: 13px;
    vertical-align: middle;
}

/* Celdas */
#tab01 td {
    font-size: 13px;
    vertical-align: middle;
    background-color: #f8f9fa;
}

    /* Resaltar total */
    #tab01 td:nth-child(12) {
        font-weight: bold;
        color: #198754;
        background-color: #f8f9fa;
    }

/* Botón pagar */
.btn-success {
    font-size: 16px;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
}

    .btn-success:hover {
        transform: translateY(-2px);
        transition: 0.2s ease-in-out;
    }

/* Modal - mensaje factura */
.info-icon {
    font-size: 28px;
}

.mensaje-factura {
    font-size: 16px;
    font-weight: 600;
    color: #0d6efd;
}

.imagen-factura {
    border-radius: 8px;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.15);
}

/* ============================= */
/* RESPONSIVE MÓVIL */
/* ============================= */

@media (max-width: 768px) {

    body {
        background-image: url('../images/fondo_pasarela_mobile.png');
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        padding-bottom: 70px; /* espacio para footer fijo */
    }

    .contenedor2 {
        margin-top: 60% !important;
        background-color: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(4px);
        border-radius: 10px;
        padding: 15px;
    }

    #tab01 {
        font-size: 12px;
    }

        #tab01 th,
        #tab01 td {
            white-space: nowrap;
            padding: 6px;
        }

    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
    }

    .contenedorFotter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        margin: 0;
        padding-left: 10px;
        padding-right: 10px;
        z-index: 1000;
    }
}