@tailwind base;
@tailwind components;
@tailwind utilities;

/* Estilos extra para botones amigables con dedos y animaciones fluidas */
@layer components {
    .btn-touch {
        @apply min-h-[48px] px-6 py-3 rounded-xl font-bold text-lg shadow-md active:scale-95 transition-transform;
    }
    
    .input-touch {
        @apply min-h-[48px] px-4 py-2 rounded-xl border-2 border-slate-300 text-lg focus:border-blue-500 focus:ring-0 outline-none;
    }
}

/* Animación Fade In Visor */
.animate-fade-in-bouncy {
    animation: fadeInBouncy 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fadeInBouncy {
    0% { opacity: 0; transform: scale(0.9) translateY(20px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Impresión Ticket Térmico --- */
@media print {
    /* Ocultar TODO por defecto */
    body * {
        visibility: hidden !important;
    }
    
    /* Mostrar solo el ticket y su contenido */
    .ticket-print, .ticket-print * {
        visibility: visible !important;
    }

    .ticket-print {
        position: absolute;
        left: 0;
        top: 0;
        width: 100% !important;
        max-width: 74mm !important; /* Ajuste para papel 80mm */
        margin: 0 !important;
        padding: 4mm !important;
        background: white !important;
        color: black !important;
        font-family: 'Courier New', monospace !important; /* Estilo recibo */
        box-shadow: none !important;
        border: none !important;
    }

    button, .btn-touch, nav, header {
        display: none !important;
    }
}