/* css/style.css - Yedry Suite Theme Definition & Custom Touch Styles */

:root {
    /* Paleta de Colores - Yedry Suite */
    --color-bg-dark: #090d16;
    --color-bg-card: rgba(15, 23, 42, 0.9);
    --color-border: #1e293b;
    --color-border-active: #4f46e5;
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-accent: #06b6d4;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
}

/* Configuraciones base para interacción táctil nativa */
* {
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--color-bg-dark);
    color: var(--color-text-main);
    touch-action: manipulation;
}

/* Efecto hápico visual para teclado numérico */
.numpad-btn {
    transition: all 0.08s ease-out;
}

.numpad-btn:active {
    transform: scale(0.92);
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
}

/* Indicadores de PIN y Animación de error */
.pin-dot {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.pin-dot.filled {
    background-color: var(--color-accent);
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.8);
    transform: scale(1.15);
}

.pin-dot.error {
    background-color: var(--color-danger);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.8);
    animation: shake 0.35s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* Scrollbar estilizada */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}


/* grilla */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  overflow-y: auto;
}