:root {
/* Paleta de colores en degradado rojo a naranjado */
–primary-gradient: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
–primary-color: #ef4444; /* Color base para fallback */
–btn-hover-gradient: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
–sidebar-header-color: #dc2626;
–text-on-primary: #ffffff;

–bg-color: #fff1f2;
–card-bg: #ffffff;
–text-color: #111827;
–border-color: #fecaca;

–secondary-color: #991b1b;
–price-color: #b91c1c;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(–bg-color); color: var(–text-color); padding: 15px; }

header {
background: var(–primary-gradient);
color: var(–text-on-primary);
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}
header h1 { font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; text-align: center; }

.header-tools { display: flex; justify-content: center; max-width: 800px; margin: 0 auto; }
.search-container { width: 100%; }
.search-container input {
width: 100%; padding: 10px 18px; border: none; border-radius: 25px;
font-size: 0.95rem; outline: none; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.app-container { display: flex; flex-direction: row; gap: 20px; align-items: flex-start; }
.catalog-main { flex: 1; }
.catalog-status { margin-bottom: 12px; font-size: 0.9rem; color: var(–secondary-color); font-weight: bold; }

/* Cuadrícula optimizada: 2 columnas en móviles, escalando en pantallas grandes */
.products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

@media (min-width: 600px) {
.products-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
}

.product-card {
background: var(–card-bg);
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(–border-color);
transition: transform 0.2s;
}
.product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(239, 68, 68, 0.15); }

.img-wrapper {
width: 100%; height: 110px; display: flex; align-items: center; justify-content: center;
background-color: #fff; border-radius: 6px; overflow: hidden; margin-bottom: 8px; cursor: pointer;
}
@media (min-width: 600px) {
.img-wrapper { height: 130px; }
}
.product-img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-title {
font-size: 0.78rem; font-weight: 600; line-height: 1.25; margin-bottom: 4px; color: #111827;
height: 2.5em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer;
}
.product-title:hover { color: var(–primary-color); }
@media (min-width: 600px) {
.product-title { font-size: 0.88rem; }
}

.product-sku { font-size: 0.7rem; color: #6b7280; margin-bottom: 6px; }
.product-price { font-size: 0.88rem; font-weight: bold; color: var(–price-color); margin-bottom: 8px; }
@media (min-width: 600px) {
.product-price { font-size: 1rem; }
}

.card-buttons { display: flex; gap: 5px; }
.preview-btn {
background-color: #fecaca; color: var(–secondary-color); border: none; padding: 7px;
border-radius: 5px; font-size: 0.75rem; font-weight: bold; cursor: pointer; width: 38%;
}
.preview-btn:hover { background-color: var(–border-color); }

.add-to-cart-btn {
background: var(–primary-gradient); color: var(–text-on-primary); border: none; padding: 7px;
border-radius: 5px; font-size: 0.78rem; font-weight: bold; cursor: pointer; flex: 1;
}
.add-to-cart-btn:hover { background: var(–btn-hover-gradient); }

.sidebar-order {
flex: 0 0 360px; background: var(–card-bg); border-radius: 10px; padding: 18px;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1); position: sticky; top: 15px; max-height: calc(100vh – 30px); overflow-y: auto;
border: 1px solid var(–border-color);
}
.sidebar-order h2 { font-size: 1.2rem; color: var(–sidebar-header-color); border-bottom: 2px solid var(–border-color); padding-bottom: 8px; margin-bottom: 12px; }

.empty-cart-notice {
background-color: var(–bg-color); border: 2px dashed var(–border-color); border-radius: 8px;
padding: 15px; text-align: center; color: var(–secondary-color); margin-bottom: 12px;
}
.empty-cart-notice span { font-size: 2rem; display: block; margin-bottom: 6px; }

.cart-items { list-style: none; margin-bottom: 12px; }
.cart-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(–border-color); }
.cart-item-title { font-weight: 600; font-size: 0.82rem; }
.cart-item-sku { font-size: 0.7rem; color: #666; }
.cart-item-price { font-size: 0.8rem; color: var(–price-color); font-weight: bold; }

.qty-controls { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.qty-btn { background-color: #fee2e2; border: none; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 0.8rem; color: var(–primary-color); }
.qty-btn:hover { background-color: #fecaca; }

.cart-totals-box {
margin-top: 12px; padding: 10px; background-color: var(–bg-color); border-radius: 6px;
font-size: 0.9rem; color: var(–secondary-color); display: flex; flex-direction: column; gap: 4px;
border: 1px solid var(–border-color);
}
.total-row { display: flex; justify-content: space-between; }
.total-row.final { font-size: 1.05rem; font-weight: bold; border-top: 1px solid var(–border-color); padding-top: 4px; margin-top: 2px; color: var(–price-color);}

.section-divider { border: 0; height: 2px; background: var(–border-color); margin: 15px 0; }

.client-form { display: flex; flex-direction: column; gap: 8px; }
.client-form h3 { font-size: 0.95rem; color: var(–secondary-color); margin-bottom: 4px; }
.client-form input, .client-form textarea { width: 100%; padding: 8px 10px; border: 1px solid var(–border-color); border-radius: 6px; font-size: 0.82rem; outline: none; }
.client-form input:focus, .client-form textarea:focus { border-color: var(–primary-color); }

.action-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.submit-btn {
background: var(–primary-gradient); color: var(–text-on-primary); border: none; padding: 10px;
border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 0.95rem; width: 100%;
}
.submit-btn:hover { background: var(–btn-hover-gradient); }

.quote-btn {
background-color: #374151; color: var(–text-on-primary); border: none; padding: 10px;
border-radius: 6px; font-weight: bold; cursor: pointer; font-size: 0.95rem; width: 100%;
}
.quote-btn:hover { background-color: #1f2937; }

.error-msg {
background-color: #fee2e2; color: #991b1b; padding: 12px; border-radius: 8px; border: 1px solid #f87171; font-size: 0.85rem;
}

/* Modal de Previsualización */
.modal-overlay {
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 1000; padding: 15px;
}
.modal-content {
background: white; width: 100%; max-width: 600px; max-height: 85vh; border-radius: 10px;
padding: 20px; box-shadow: 0 10px 25px rgba(185, 28, 28, 0.2); overflow-y: auto; position: relative;
}
.modal-close {
position: absolute; top: 15px; right: 15px; background: #fee2e2; border: none; color: var(–primary-color);
width: 30px; height: 30px; border-radius: 50%; font-weight: bold; cursor: pointer; font-size: 1rem;
}
.modal-close:hover { background: #fecaca; }
.modal-header { display: flex; gap: 15px; align-items: center; border-bottom: 2px solid var(–border-color); padding-bottom: 12px; margin-bottom: 12px; }
.modal-img { width: 100px; height: 100px; object-fit: contain; border-radius: 6px; border: 1px solid var(–border-color); background: #fff; }
.modal-title-area h3 { font-size: 1.05rem; color: #111827; margin-bottom: 4px; }
.modal-attributes { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.attr-row { display: flex; border-bottom: 1px solid #f1f5f9; padding: 5px 0; }
.attr-name { font-weight: bold; color: #64748b; width: 38%; }
.attr-val { color: #334155; width: 62%; word-break: break-word; }

@media (max-width: 850px) {
.app-container { flex-direction: column; }
.sidebar-order { flex: 1 1 100%; width: 100%; position: relative; top: 0; max-height: none; }
}

TIENDA ELECTRÓNICA