<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ticket #<?= $sale['id_venta'] ?> - VelMox</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <style>
        @media print { body { margin: 0; padding: 8px; } }
        body {
            font-family: 'Courier New', monospace;
            font-size: 12px;
            margin: 0;
            padding: 16px;
            width: 80mm;
            background: #fff;
            color: #000;
        }
        .btn-print { display: block; width: 100%; padding: 10px; background: #2563eb; color: #fff; border: 0; border-radius: 6px; font-size: 14px; cursor: pointer; margin-top: 10px; font-family: Arial, sans-serif; }
        @media print { .btn-print { display: none; } }
    </style>
</head>
<body>
    <?= view('sales/ticket_content', ['sale' => $sale]) ?>
    <button class="btn-print" onclick="window.print()"><i class="bi bi-printer"></i> Imprimir Ticket</button>
    <a href="<?= site_url('sales') ?>" style="display:block;text-align:center;margin-top:6px;font-family:Arial,sans-serif;font-size:12px;color:#2563eb;">Volver a Ventas</a>
    <script>window.print();</script>
</body>
</html>