/* assets/css/custom.css - Estilos personalizados y utilidades de impresión */

:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --primary-light: #ecfdf5;
    --primary-border: #a7f3d0;
}

/* Animaciones suaves */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Fuente mono para códigos legibles */
.font-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.12em;
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Tarjetas de productos y efectos hover */
.product-card {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15), 0 8px 10px -6px rgba(16, 185, 129, 0.1);
}

/* En pantalla, el área de ticket se oculta por defecto */
#ticket-print-area {
    display: none;
}

/* ========================================================= */
/* ESTILOS DE IMPRESIÓN PARA IMPRESORA TÉRMICA DE 80MM       */
/* ========================================================= */
@media print {
    @page {
        size: 80mm auto;
        margin: 0mm;
    }

    html, body {
        width: 80mm !important;
        max-width: 80mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body * {
        visibility: hidden !important;
    }

    #ticket-print-area, #ticket-print-area * {
        visibility: visible !important;
    }

    #ticket-print-area {
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 76mm !important;
        max-width: 76mm !important;
        margin: 0 auto !important;
        padding: 4mm 2mm 15mm 2mm !important;
        box-sizing: border-box !important;
        font-family: 'Courier New', Courier, Consolas, monospace !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
        color: #000 !important;
        background: #fff !important;
    }

    .no-print {
        display: none !important;
    }
}