*{margin:0;padding:0;box-sizing:border-box}:root{--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;--green: #25D366}[data-theme=light]{--bg: #F8F9FA;--bg-alt: #FFFFFF;--bg-selected: #eef4ff;--border: #e0deda;--text: #1A1A1A;--text-muted: #6C757D;--accent: #1a56db;--green-hover: #008b19;--shadow-logo: 0 1px 3px rgba(0, 0, 0, .08)}[data-theme=dark]{--bg: #0f1011;--bg-alt: #1a1b1d;--bg-selected: #1e3a5f;--border: #2d2e30;--text: #e8e8e8;--text-muted: #9a9a98;--accent: #3b82f6;--shadow-logo: 0 1px 3px rgba(0, 0, 0, .4)}html{background-color:var(--bg);color-scheme:light dark}body,.header,.preview-panel,.productos-table tbody tr,.productos-table thead,.footer,.form-input,.search-input,.cantidad-input,.btn-limpiar{transition:background-color .2s ease,color .2s ease,border-color .2s ease}body{font-family:var(--font-stack);font-size:14px;line-height:1.5;color:var(--text);background-color:var(--bg)}.app-container{display:grid;grid-template-columns:1fr 300px;gap:0;min-height:100vh}.catalogo-panel{border-right:1px solid var(--border);overflow-y:auto}.preview-panel{position:sticky;top:0;height:100vh;overflow-y:auto;background-color:var(--bg-alt);border-left:1px solid var(--border)}@media (max-width: 768px){.app-container{grid-template-columns:1fr}.preview-panel{position:static;height:auto;border-left:none;border-top:1px solid var(--border)}.catalogo-panel{border-right:none}}.header{padding:20px;border-bottom:1px solid var(--border);background-color:var(--bg)}.header-content{display:flex;align-items:center;gap:12px}.header-spacer{flex:1}.theme-toggle{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background-color:var(--bg-alt);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background-color .15s ease,border-color .15s ease,transform .15s ease}.theme-toggle:hover{background-color:var(--border)}.theme-toggle:active{transform:scale(.94)}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.logo{font-size:24px;font-weight:700;color:var(--accent)}.logo-img{height:48px;width:48px;border-radius:50%;object-fit:cover;border:2px solid var(--border);box-shadow:var(--shadow-logo);background-color:var(--bg)}.header h1{font-size:18px;font-weight:600;color:var(--text)}.catalogo-content{padding:20px}.search-box{margin-bottom:16px;position:relative}.search-input{width:100%;padding:10px 40px 10px 12px;border:1px solid var(--border);border-radius:6px;font-size:14px;font-family:var(--font-stack);background-color:var(--bg);color:var(--text)}.search-clear{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:26px;height:26px;border:none;background-color:var(--bg-alt);color:var(--text-muted);border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .15s ease,color .15s ease}.search-clear:hover{background-color:var(--border);color:var(--text)}.search-highlight{background-color:#fef08a;color:#1a1a1a;padding:0 2px;border-radius:2px;font-weight:600}[data-theme=dark] .search-highlight{background-color:#854d0e;color:#fef9c3}.search-input::placeholder,.form-input::placeholder{color:var(--text-muted);opacity:.7}.search-input:focus{outline:none;border-color:var(--accent)}.productos-table{width:100%;border-collapse:collapse;margin-bottom:16px}.productos-table thead{background-color:var(--bg-alt)}.productos-table th{text-align:left;padding:10px 12px;font-weight:600;border-bottom:2px solid var(--border);font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.productos-table td{padding:10px 12px;border-bottom:1px solid var(--border)}.productos-table tbody tr{background-color:var(--bg)}.productos-table tbody tr:nth-child(2n){background-color:var(--bg-alt)}.productos-table tbody tr.selected{background-color:var(--bg-selected)}@media (max-width: 768px){.productos-table{display:block;border-collapse:separate;border-spacing:0}.productos-table thead{display:none}.productos-table tbody{display:flex;flex-direction:column;gap:10px;padding:4px 0}.productos-table tbody tr,.productos-table tbody tr:nth-child(2n){display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"name name qty" "code unit qty";align-items:center;column-gap:10px;row-gap:2px;padding:14px;background-color:var(--bg-alt);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px #0000000a}.productos-table tbody tr.selected{border-color:var(--accent);background-color:var(--bg-selected);box-shadow:0 2px 6px #1a56db1f}.productos-table tbody tr td{border:none;padding:0}.productos-table tbody tr td:nth-child(1){grid-area:code;font-size:12px;color:var(--text-muted);font-weight:600}.productos-table tbody tr td:nth-child(1):before{content:"#";opacity:.7}.productos-table tbody tr td:nth-child(2){grid-area:name;font-weight:600;font-size:15px;color:var(--text);line-height:1.3}.productos-table tbody tr td:nth-child(3){grid-area:unit;font-size:12px;color:var(--text-muted);line-height:1.3}.productos-table tbody tr td:nth-child(3):not(:empty):before{content:"·";margin-right:6px;opacity:.6}.productos-table tbody tr td:nth-child(4){grid-area:qty;text-align:right;display:flex;align-items:center;justify-content:flex-end}.productos-table tbody tr td:nth-child(4) .cantidad-input{width:70px;padding:8px 10px;font-size:16px}}.cantidad-input{width:64px;padding:4px 6px;border:1px solid var(--border);border-radius:6px;text-align:right;font-family:var(--font-stack);font-size:14px;background-color:var(--bg);color:var(--text)}.cantidad-input:focus{outline:none;border-color:var(--accent)}.btn-limpiar{padding:10px 16px;background-color:#fef2f2;border:1px solid #fecaca;border-radius:6px;cursor:pointer;font-family:var(--font-stack);font-size:14px;font-weight:500;color:#dc2626;transition:background-color .15s ease,border-color .15s ease}.btn-limpiar:hover{background-color:#fee2e2;border-color:#fca5a5}[data-theme=dark] .btn-limpiar{background-color:#450a0a;border-color:#7f1d1d;color:#f87171}[data-theme=dark] .btn-limpiar:hover{background-color:#7f1d1d;border-color:#991b1b}.empty-state,.error-state{padding:40px 20px;text-align:center;color:var(--text-muted)}.error-state small{display:block;margin-top:8px;font-size:12px;line-height:1.4}.preview-content{padding:20px;display:flex;flex-direction:column;gap:16px}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.preview-header h2{font-size:16px;font-weight:600}.badge{background-color:var(--accent);color:#fff;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.preview-list{list-style:none;padding:0}.preview-item{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px;display:flex;align-items:center;gap:8px}.preview-item:last-child{border-bottom:none}.preview-item-text{flex:1;min-width:0;word-break:break-word}.preview-item-controls{display:flex;align-items:center;gap:4px;flex-shrink:0}.preview-delete-btn{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:6px;border:1px solid #fecaca;background-color:#fef2f2;color:#dc2626;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;padding:0;transition:background-color .15s ease,border-color .15s ease;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.preview-delete-btn:hover{background-color:#fee2e2;border-color:#fca5a5}.preview-delete-btn:active{transform:scale(.94)}[data-theme=dark] .preview-delete-btn{color:#f87171;border-color:#7f1d1d;background-color:#450a0a}[data-theme=dark] .preview-delete-btn:hover{background-color:#7f1d1d;border-color:#991b1b}.preview-qty-display{min-width:28px;text-align:center;font-weight:600;font-size:14px;color:var(--accent);padding:4px 8px;border-radius:4px;transition:background-color .15s ease}.preview-qty-display.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.preview-qty-display.clickable:hover{background-color:var(--bg-selected)}.preview-qty-display.clickable:focus{outline:2px solid var(--accent);outline-offset:2px}.preview-qty-input{width:70px;padding:4px 8px;border:2px solid var(--accent);border-radius:4px;text-align:center;font-family:var(--font-stack);font-size:14px;font-weight:600;background-color:var(--bg);color:var(--accent)}.preview-qty-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #1a56db1a}@media (max-width: 768px){.preview-delete-btn{width:36px;height:36px;min-width:36px;min-height:36px}.preview-qty-display{padding:6px 10px;min-width:32px}.preview-qty-input{width:75px;padding:6px 10px}}.preview-total{font-weight:600;padding-top:8px;border-top:2px solid var(--border)}.preview-divider{height:1px;background-color:var(--border);margin:8px 0}.form-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:6px;font-family:var(--font-stack);font-size:14px;background-color:var(--bg);color:var(--text)}.form-input:focus{outline:none;border-color:var(--accent)}.btn-whatsapp{width:100%;padding:12px 16px;background-color:var(--green);color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:var(--font-stack);font-size:14px;font-weight:600}.btn-whatsapp:hover:not(:disabled){background-color:var(--green-hover)}.btn-whatsapp:disabled{opacity:.4;cursor:not-allowed}.empty-preview{padding:20px;text-align:center;color:var(--text-muted);font-style:italic}.toast-container{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:calc(100vw - 40px);width:360px;pointer-events:none}.toast{background-color:var(--bg-alt);color:var(--text);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.4;box-shadow:0 6px 16px #00000026,0 2px 4px #00000014;display:flex;align-items:flex-start;gap:10px;pointer-events:auto;animation:toast-in .2s ease-out}.toast.toast-error{border-left-color:#dc2626}.toast.toast-success{border-left-color:var(--green)}.toast-message{flex:1;min-width:0;word-break:break-word}.toast-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:0;flex-shrink:0}.toast-close:hover{color:var(--text)}@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.toast-container{top:12px;right:12px;left:12px;width:auto}}.footer{grid-column:1 / -1;padding:16px 20px;text-align:center;border-top:1px solid var(--border);background-color:var(--bg-alt);font-size:12px;color:var(--text-muted)}.footer a{color:var(--accent);text-decoration:none}.footer a:hover{text-decoration:underline}.tabs-container{padding:16px 20px 0;border-bottom:1px solid var(--border);background-color:var(--bg)}.tabs{display:flex;gap:4px;margin:0;padding:0;list-style:none}.tab-button{padding:10px 20px;border:none;background:none;color:var(--text-muted);font-family:var(--font-stack);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease,background-color .15s ease;position:relative;white-space:nowrap}.tab-button:hover{color:var(--text);background-color:var(--bg-alt)}.tab-button.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}.tab-button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}@media (max-width: 768px){.tabs-container{padding:12px 16px 0}.tab-button{padding:8px 16px;font-size:13px}}.btn-scroll-to-preview,.btn-scroll-to-top{display:none}@media (max-width: 768px){.btn-scroll-to-preview{display:flex;align-items:center;justify-content:center;position:fixed;bottom:24px;right:20px;width:60px;height:60px;border-radius:50%;background-color:var(--accent);color:#fff;border:none;box-shadow:0 4px 12px #00000026,0 2px 4px #0000001a;cursor:pointer;z-index:1000;-webkit-tap-highlight-color:transparent;opacity:0;transform:scale(.6) translateY(20px);pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);will-change:transform,opacity}.btn-scroll-to-preview.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.btn-scroll-to-preview.visible:active{transform:scale(.92);transition:transform .1s ease}.btn-scroll-to-preview svg{width:28px;height:28px;pointer-events:none}.btn-scroll-badge{position:absolute;top:-6px;right:-6px;background-color:#dc2626;color:#fff;border-radius:12px;min-width:24px;height:24px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;border:2px solid var(--bg);box-sizing:border-box;pointer-events:none}.btn-scroll-to-top{display:flex;align-items:center;justify-content:center;position:fixed;bottom:24px;left:20px;width:52px;height:52px;border-radius:50%;background-color:var(--bg-alt);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 12px #0000001f,0 2px 4px #00000014;cursor:pointer;z-index:999;-webkit-tap-highlight-color:transparent;opacity:0;transform:scale(.6) translateY(20px);pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1),background-color .15s ease;will-change:transform,opacity}.btn-scroll-to-top.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.btn-scroll-to-top.visible:active{transform:scale(.92);transition:transform .1s ease}.btn-scroll-to-top svg{width:24px;height:24px;pointer-events:none}}