:root {
    --font-scale: 1; /* Escala base que se ajustará vía JS */
    --accent-orange: #f97316;
}

/* Aplicar escala a elementos clave */
html {
    font-size: calc(16px * var(--font-scale));
    transition: font-size 0.2s ease-out;
}

/* Animación del escáner */
.scan-animation {
    position: relative;
    display: inline-block;
    padding: 2rem;
}

.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #f97316; /* Color Naranja */
    box-shadow: 0 0 15px #f97316;
    animation: scan 2s infinite ease-in-out;
    z-index: 10;
}

@keyframes scan {

    0%,
    100% {
        top: 10%;
    }

    50% {
        top: 90%;
    }
}

/* Transiciones entre vistas */
.view {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-out;
}

.hidden {
    display: none !important;
    opacity: 0;
    transform: translateY(20px);
}

/* Estética Premium */
body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(circle at top right, #fff7ed, #fef2f2); /* Tono más cálido para el naranja */
    color: #334155;
    background-color: rgba(255, 255, 255, 0.95);
}

/* Estilo para cuando se está buscando */
.loading-spinner {
    animation: spin 1s linear infinite;
    color: #f97316;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Mejoras para el input manual */
#manual-sku:focus {
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); /* Sombra naranja */
    background-color: #fff;
    border-color: #f97316;
}

#reset-progress {
    background-color: #f97316; /* Barra de progreso naranja */
}

/* --- Nuevos Estilos Catálogo --- */

/* Botones de Navegación */
.nav-btn {
    color: #64748b;
    border: 1px solid transparent;
}

.nav-btn.active {
    background-color: #fff;
    color: #f97316;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Tarjetas de Producto */
.product-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.product-card img {
    transition: transform 0.5s ease;
}

.product-card:hover img {
    transform: scale(1.05);
}

/* Modal y Animaciones */
@keyframes modal-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.animate-modal-in {
    animation: modal-in 0.3s ease-out forwards;
}

/* Tipografía y Descripción */
.description-content, #product-description {
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.description-content strong {
    color: #1f2937;
}

.description-content a {
    color: #f97316;
    text-decoration: underline;
}

/* Scrollbar Custom */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #cbd5e1;
}

/* Badge de Stock */
.stock-badge-low {
    background-color: #fee2e2;
    color: #ef4444;
}

.stock-badge-ok {
    background-color: #dcfce7;
    color: #16a34a;
}

/* Paginación */
#pagination-controls button {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pagination-controls .page-num {
    min-width: 45px;
    height: 45px;
}

/* Custom Select */
/* --- Mejoras Responsivas --- */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    #app {
        padding: 1.5rem 1rem;
    }
    
    h1 { font-size: 2.5rem !important; }
    p.text-2xl { font-size: 1.25rem !important; }
    
    /* El modal de producto debe ser scrolleable verticalmente */
    #product-modal > div {
        max-height: 95vh;
        border-radius: 1.5rem;
    }
    
    #product-view > div {
        border-radius: 1.5rem;
    }
}

/* Control de Fuentes UI */
.font-ctrl-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-weight: bold;
    color: #64748b;
    transition: all 0.2s;
}

@media (min-width: 768px) {
    .font-ctrl-btn {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
}

.font-ctrl-btn:hover {
    background: #f1f5f9;
    border-color: var(--accent-orange);
    color: var(--accent-orange);
}

.font-ctrl-btn:active {
    transform: scale(0.9);
}