*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%}body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}ul,ol{list-style:none}a{text-decoration:none;color:inherit}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}button{cursor:pointer;border:none;background:none}:root{--color-primary: #1a1a2e;--color-primary-light: #16213e;--color-accent: #e94560;--color-accent-hover: #d63850;--color-bg: #f8f9fa;--color-surface: #ffffff;--color-text: #333333;--color-text-secondary: #666666;--color-border: #e0e0e0;--color-success: #2ecc71;--color-warning: #f39c12;--color-offline: #e74c3c;--font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Cascadia Code", "Fira Code", monospace;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 4px 6px rgba(0,0,0,.1);--shadow-lg: 0 10px 25px rgba(0,0,0,.15);--header-height: 56px;--max-width: 1200px}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);padding-top:var(--header-height)}#app-header{position:fixed;top:0;left:0;right:0;height:var(--header-height);background:var(--color-primary);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-lg);z-index:100;box-shadow:var(--shadow-md)}.app-title{font-size:1.25rem;font-weight:700}#menu-toggle{color:#fff;font-size:1.5rem;padding:var(--space-sm)}#app-nav{position:fixed;top:var(--header-height);left:0;right:0;background:var(--color-surface);box-shadow:var(--shadow-md);z-index:99;transition:transform .3s ease}#app-nav ul{display:flex;gap:var(--space-sm);padding:var(--space-md)}#app-nav a{display:block;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);color:var(--color-text);font-weight:500;transition:background .2s}#app-nav a:hover{background:var(--color-bg)}.nav-hidden{transform:translateY(-100%)}#app-root{max-width:var(--max-width);margin:0 auto;padding:var(--space-lg)}#offline-indicator{position:fixed;bottom:var(--space-lg);right:var(--space-lg);background:var(--color-offline);color:#fff;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:.875rem;font-weight:600;box-shadow:var(--shadow-lg);z-index:200;transition:opacity .3s,transform .3s}.offline-hidden{opacity:0;transform:translateY(1rem);pointer-events:none}.loading{text-align:center;padding:var(--space-2xl);color:var(--color-text-secondary)}.catalog-header{margin-bottom:var(--space-xl)}.catalog-header h2{font-size:1.5rem;margin-bottom:var(--space-md)}.catalog-controls{display:flex;gap:var(--space-md);flex-wrap:wrap}.search-input{flex:1;min-width:200px;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:1rem}.filter-select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);font-size:1rem;min-width:180px}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg)}.product-card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;content-visibility:auto;contain-intrinsic-size:320px}.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}.product-card-image{width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--color-bg)}.product-card-image img{width:100%;height:100%;object-fit:cover}.product-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:.875rem}.product-card-body{padding:var(--space-md)}.product-card-title{font-size:1rem;font-weight:600;margin-bottom:var(--space-xs)}.product-card-category{font-size:.8rem;color:var(--color-text-secondary);text-transform:capitalize;margin-bottom:var(--space-sm)}.product-card-price{font-size:1.25rem;font-weight:700;color:var(--color-accent)}.product-card-badge{display:inline-block;margin-top:var(--space-sm);padding:2px var(--space-sm);background:var(--color-warning);color:#fff;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.back-link{display:inline-block;margin-bottom:var(--space-lg);color:var(--color-accent);font-weight:500}.back-link:hover{text-decoration:underline}.product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl)}.product-detail-images{display:flex;flex-direction:column;gap:var(--space-md)}.product-detail-img{width:100%;border-radius:var(--radius-md)}.product-detail-placeholder{width:100%;aspect-ratio:4/3;background:var(--color-bg);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary)}.product-detail-category{display:inline-block;text-transform:capitalize;color:var(--color-text-secondary);font-size:.875rem;margin-bottom:var(--space-sm)}.product-detail-title{font-size:1.75rem;font-weight:700;margin-bottom:var(--space-md)}.product-detail-price{font-size:2rem;font-weight:700;color:var(--color-accent);margin-bottom:var(--space-lg)}.product-detail-desc{color:var(--color-text);line-height:1.7;margin-bottom:var(--space-lg)}.product-detail-tags{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.tag{display:inline-block;padding:4px var(--space-sm);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.8rem;color:var(--color-text-secondary)}.hidden{display:none!important}.filter-toggle-btn{padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.9rem;font-weight:500;white-space:nowrap}.filter-toggle-btn:hover{background:var(--color-bg)}.advanced-filters{display:flex;flex-wrap:wrap;gap:var(--space-md);padding:var(--space-md);margin-top:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);align-items:flex-end}.advanced-filters.hidden{display:none}.filter-group{display:flex;flex-direction:column;gap:4px}.filter-group label{font-size:.8rem;color:var(--color-text-secondary);font-weight:500}.filter-input{padding:var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;width:120px}.filter-tags-group{flex:1;min-width:200px}#filter-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.tag-checkbox{display:flex;align-items:center;gap:4px;font-size:.85rem;cursor:pointer;padding:2px var(--space-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);transition:background .2s}.tag-checkbox:has(input:checked){background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.tag-checkbox input{accent-color:var(--color-accent)}.btn{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-weight:600;font-size:.9rem;transition:background .2s,transform .1s}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-accent);color:#fff;border:none}.btn-primary:hover{background:var(--color-accent-hover)}.btn-secondary{background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background:var(--color-border)}.img-wrapper{position:relative;width:100%;height:100%;overflow:hidden}.img-placeholder{position:absolute;inset:0;background:linear-gradient(110deg,var(--color-bg) 30%,#e8e8e8 50%,var(--color-bg) 70%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.lazy-img{position:relative;z-index:1;opacity:0;transition:opacity .4s}.lazy-img.loaded{opacity:1}.product-card-image .lazy-img{width:100%;height:100%;object-fit:cover}.gallery-main{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg);background:var(--color-bg);cursor:zoom-in}.gallery-main img{width:100%;height:100%;object-fit:contain;transition:transform .3s}.gallery-main:hover img{transform:scale(1.05)}.gallery-expand{position:absolute;top:var(--space-sm);right:var(--space-sm);background:#00000080;color:#fff;border:none;width:36px;height:36px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.gallery-main:hover .gallery-expand{opacity:1}.gallery-thumbs{display:flex;gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap}.gallery-thumb{width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:none;transition:border-color .2s}.gallery-thumb.active{border-color:var(--color-accent)}.gallery-thumb img{width:100%;height:100%;object-fit:cover}.lightbox-overlay{position:fixed;inset:0;background:#000000e6;z-index:1000;display:flex;align-items:center;justify-content:center}.lightbox-content{position:relative;max-width:90vw;max-height:90vh}.lightbox-content img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--radius-md)}.lightbox-counter{position:absolute;bottom:-2rem;left:50%;transform:translate(-50%);color:#fff;font-size:.9rem}.lightbox-close{position:absolute;top:var(--space-md);right:var(--space-md);background:none;color:#fff;border:none;font-size:2.5rem;cursor:pointer;z-index:1001;line-height:1}.lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff26;color:#fff;border:none;font-size:3rem;cursor:pointer;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);z-index:1001;transition:background .2s}.lightbox-prev:hover,.lightbox-next:hover{background:#ffffff4d}.lightbox-prev{left:var(--space-md)}.lightbox-next{right:var(--space-md)}.admin-panel{max-width:900px;margin:0 auto}.admin-login{text-align:center;padding:var(--space-2xl) 0}.admin-login h2{margin-bottom:var(--space-sm)}.admin-login p{color:var(--color-text-secondary);margin-bottom:var(--space-lg)}.admin-login-form{display:flex;gap:var(--space-md);justify-content:center;max-width:400px;margin:0 auto}.admin-login-form .search-input{max-width:200px}.admin-error{color:var(--color-accent);margin-top:var(--space-md);font-weight:500}.admin-dashboard h2{margin-bottom:var(--space-md)}.admin-header{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:var(--space-md);margin-bottom:var(--space-lg)}.admin-header-actions{display:flex;gap:var(--space-sm);flex-wrap:wrap}.admin-toolbar{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-lg)}.admin-count{font-size:.9rem;color:var(--color-text-secondary)}.admin-list{display:flex;flex-direction:column;gap:var(--space-sm)}.admin-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.admin-row-thumb{width:48px;height:48px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--color-bg)}.admin-row-thumb img{width:100%;height:100%;object-fit:cover}.admin-row-noimg{width:100%;height:100%;background:var(--color-bg)}.admin-row-info{flex:1;min-width:0}.admin-row-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-row-meta{font-size:.8rem;color:var(--color-text-secondary)}.admin-row-actions{display:flex;gap:var(--space-xs);flex-shrink:0}.admin-row-actions .btn{font-size:.8rem;padding:var(--space-xs) var(--space-sm)}.admin-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.admin-form h3{margin-bottom:var(--space-lg)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:var(--space-md)}.form-group label{font-size:.85rem;font-weight:600;color:var(--color-text-secondary)}.form-group input,.form-group textarea,.form-group select{padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.95rem;width:100%}.form-group textarea{resize:vertical}.image-input-group{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm)}.image-input-group input{flex:1}.image-upload-group{margin-bottom:var(--space-sm)}.image-upload-group input[type=file]{display:none}.upload-btn{display:inline-block;cursor:pointer}.image-list{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-top:var(--space-sm)}.image-list-item{position:relative;width:64px;height:64px;border-radius:var(--radius-sm);overflow:hidden;border:1px solid var(--color-border)}.image-list-item img{width:100%;height:100%;object-fit:cover}.image-list-remove{position:absolute;top:-4px;right:-4px;width:20px;height:20px;border-radius:50%;background:var(--color-accent);color:#fff;border:none;font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}.image-list-empty{font-size:.85rem;color:var(--color-text-secondary)}.form-checkboxes{display:flex;gap:var(--space-lg);margin-bottom:var(--space-lg)}.form-checkbox{display:flex;align-items:center;gap:var(--space-sm);font-size:.95rem;cursor:pointer}.form-checkbox input{accent-color:var(--color-accent);width:18px;height:18px}.form-actions{display:flex;gap:var(--space-md)}.btn-whatsapp{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:#25d366;color:#fff;border-radius:var(--radius-md);font-weight:600;font-size:1rem;text-decoration:none;transition:background .2s,transform .1s;margin-top:var(--space-lg)}.btn-whatsapp:hover{background:#1da851;color:#fff}.btn-whatsapp:active{transform:scale(.97)}.btn-whatsapp-icon{font-size:1.3rem}.card-whatsapp-btn{position:absolute;bottom:var(--space-sm);right:var(--space-sm);width:36px;height:36px;border-radius:50%;background:#25d366;color:#fff;border:none;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md);transition:transform .2s,background .2s;z-index:2;line-height:1}.card-whatsapp-btn:hover{background:#1da851;transform:scale(1.1)}.admin-settings{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-lg)}.admin-settings h3,.admin-settings .form-group{margin-bottom:var(--space-md)}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin-bottom:var(--space-md)}.settings-separator{border:none;border-top:1px solid var(--color-border);margin:var(--space-lg) 0}.app-logo{max-height:40px;width:auto;object-fit:contain}.logo-preview{min-height:40px;display:flex;align-items:center}.logo-preview-empty{color:var(--color-text-secondary);font-style:italic;font-size:.85rem}.color-input-group{display:flex;gap:var(--space-sm);align-items:center}.color-input-group input[type=color]{width:40px;height:40px;padding:2px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;background:none}.color-input-group input[type=text]{flex:1}#wa-enabled{width:18px;height:18px;accent-color:var(--color-accent)}#wa-status{margin-left:var(--space-md);color:var(--color-success);font-weight:600}@media(max-width:767px){.product-detail-grid{grid-template-columns:1fr}.advanced-filters{flex-direction:column}.filter-input{width:100%}.lightbox-prev,.lightbox-next{font-size:2rem;padding:var(--space-xs) var(--space-sm)}.admin-header{flex-direction:column}.admin-row{flex-direction:column;align-items:flex-start}.admin-row-actions{width:100%;justify-content:flex-end}.form-grid{grid-template-columns:1fr}.admin-header-actions{width:100%}.admin-header-actions .btn{flex:1}}@media(min-width:768px){#menu-toggle{display:none}#app-nav{position:static;transform:none;box-shadow:none;background:transparent}#app-nav ul{justify-content:center}#app-nav a{color:#fff}#app-nav a:hover{background:#ffffff1a}body{padding-top:0}#app-header{position:relative}}