/* --- CAJA CSS (TEMA APPLE + AZUL MARINO FORZADO) --- */

.reader-box { width: 100%; border-radius: 16px; overflow: hidden; background: #000; display: none; margin-bottom: 15px; border: none !important; }

/* Contenedor de Pestañas de Ventas */
.tabs-sales-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none; 
}
.tabs-sales-container::-webkit-scrollbar { display: none; }

/* Pestañas al estilo Apple */
.tab-venta {
    background: var(--accent) !important; 
    color: #FFFFFF !important; 
    border: 1px solid var(--separator) !important;
    border-radius: 14px !important; 
    padding: 10px 16px !important; 
    font-weight: 700 !important; 
    box-shadow: var(--shadow-panel) !important; 
    cursor: pointer; 
}

/* Pestaña activa y botón + */
.tab-venta.active, .tab-add {
    background: var(--accent) !important; 
    color: var(--danger) !important; 
    border: none !important;
    box-shadow: var(--shadow-btn) !important;
}

/* --- FORZAR DISEÑO APPLE EN TARJETAS DE PRODUCTOS --- */
.grid-item, div[style*="border: 2px solid"] {
    background: var(--surface) !important;
    border: 1px solid var(--separator) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow-panel) !important;
}

button[onclick*="selectFromCatalog"], .grid-btn.add { 
    background: var(--accent) !important; 
    color: #FFF !important; 
    box-shadow: var(--shadow-btn) !important; 
}
button[onclick*="restarDesdeCatalogo"], .grid-btn.sub { 
    background: var(--surface) !important; 
    color: var(--text) !important; 
    border: 1px solid var(--separator) !important; 
    box-shadow: var(--shadow-panel) !important; 
}

#cartTable tr { border-bottom: none !important; }

.qty-editor { width: 100%; text-align: center; border: none !important; background: transparent !important; color: var(--text); font-weight: 800; font-size: 16px; padding: 0; outline: none !important; -webkit-appearance: none; box-shadow: none !important; }
.qty-editor::-webkit-outer-spin-button, .qty-editor::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pay-methods { display: flex; gap: 10px; margin-bottom: 20px; }
.method-btn { flex: 1; padding: 16px 5px; border-radius: 14px; border: none !important; outline: none !important; background: #F2F2F7; color: var(--text); font-weight: 700; cursor: pointer; font-size: 13px; text-align: center; transition:0.2s; box-shadow: none; }
html.dark-mode .method-btn { background: #0B1120; }
.method-btn.active { background: var(--accent-light); color: var(--accent); }
html.dark-mode .method-btn.active { background: #2A4365; color: #FFFFFF; }

.horizontal-scroll {
    display: flex; 
    gap: 12px; 
    overflow-x: auto; 
    padding: 10px 5px 25px 5px !important; 
    margin-bottom: -15px;
    scrollbar-width: none;
}
.horizontal-scroll::-webkit-scrollbar { display: none; }

/* === SOLUCIÓN AL ICONO DEL CARRITO VACÍO CORTADO === */
#cartTable i.fa-basket-shopping, .empty-cart-icon i {
    font-size: 26px !important; /* Lo hacemos más chico para que quepa bien */
    padding: 8px !important;
    display: inline-block;
}