*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',Arial,sans-serif;background:#f0f0f0;color:#333}header{background:#8B1A1A;padding:12px 24px;display:flex;align-items:center;position:relative}header img{height:60px;width:auto;display:block}header .header-title{position:absolute;left:50%;transform:translateX(-50%);color:#fff;font-size:1.15rem;font-weight:600;letter-spacing:.3px;white-space:nowrap;pointer-events:none}.layout{display:flex;gap:16px;padding:16px;align-items:flex-start}.simulador-panel{flex:0 0 420px;display:flex;flex-direction:column;gap:12px;position:sticky;top:16px;align-self:flex-start;max-height:calc(100vh - 32px);overflow-y:auto}.simulador-panel>*{flex-shrink:0}.canvas-wrapper{position:relative;border-radius:14px;overflow:hidden;background:#eee;box-shadow:0 2px 12px rgb(0 0 0 / .15);aspect-ratio:4/3}.canvas-wrapper img.base-img{display:block;width:100%;height:100%;object-fit:cover}.room-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgb(0 0 0 / .38);color:#fff;border:none;border-radius:50%;width:38px;height:38px;font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s;backdrop-filter:blur(2px)}.room-arrow:hover{background:rgb(0 0 0 / .6)}.room-arrow-left{left:10px}.room-arrow-right{right:10px}.room-arrow.hidden{opacity:0;pointer-events:none}.canvas-wrapper canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply}.color-panel{background:#fff;border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgb(0 0 0 / .1)}.color-panel-left{display:flex;align-items:center;gap:12px}.color-circle{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#f0f0f0,#ddd);flex-shrink:0;border:2px solid #eee;transition:background .2s}.color-info .label{font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:#999}.color-info .name{font-size:1rem;font-weight:600;color:#222;min-height:1.4em}.color-info .original-row{display:none;align-items:center;gap:6px;margin-top:3px}.color-info .original-row.visible{display:flex}.color-info .original-name{font-size:.75rem;color:#888;font-style:italic}.color-info .copy-original-btn{padding:2px 8px;border-radius:10px;border:1px solid #ddd;background:#f5f5f5;cursor:pointer;font-size:.68rem;color:#666;transition:all .15s;white-space:nowrap;flex-shrink:0}.color-info .copy-original-btn:hover{border-color:#8B1A1A;color:#8B1A1A;background:#fff5f5}.color-info .meta{font-size:.75rem;color:#888;margin-top:3px;display:none}.color-info .meta.visible{display:block}.color-info .meta span{margin-right:10px}.color-info .meta strong{color:#555}.whatsapp-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;border-radius:10px;border:none;background:#25D366;cursor:pointer;font-size:.95rem;color:#fff;font-weight:700;font-family:inherit;transition:background .15s;text-decoration:none}.whatsapp-btn:hover{background:#1ebe5d}.whatsapp-btn[aria-disabled="true"]{background:#ccc;cursor:default;pointer-events:none}.whatsapp-btn svg{flex-shrink:0}.hint{text-align:center;font-size:.72rem;color:#aaa;padding:2px 0}.palette-panel{flex:1;min-width:0;background:#fff;border-radius:14px;box-shadow:0 1px 4px rgb(0 0 0 / .1);display:flex;flex-direction:column}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}.toolbar input{flex:1;min-width:160px;padding:7px 12px;border:1px solid #ddd;border-radius:20px;font-size:.88rem;outline:none}.toolbar input:focus{border-color:#8B1A1A}.toolbar select{padding:7px 10px;border:1px solid #ddd;border-radius:20px;font-size:.85rem;background:#fff;outline:none}.toolbar .count{font-size:.82rem;color:#999;white-space:nowrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,100px);justify-content:start;gap:6px;padding:14px;overflow-y:auto;flex:1}.swatch{border-radius:8px;overflow:hidden;background:#f9f9f9;box-shadow:0 1px 3px rgb(0 0 0 / .1);cursor:pointer;transition:transform .12s,box-shadow .12s}.swatch:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgb(0 0 0 / .2)}.swatch.selected{outline:3px solid #8B1A1A;outline-offset:1px}.swatch .block{height:64px}.swatch .info{padding:5px 6px 6px}.swatch .info .cod{font-size:.6rem;color:#999;font-weight:700;letter-spacing:.3px}.swatch .info .name{font-size:.68rem;color:#444;margin-top:2px;line-height:1.25}#loading{padding:40px;text-align:center;color:#aaa}#error-msg{margin:16px;padding:14px 18px;background:#fff8e1;border:1px solid #ffc107;border-radius:8px;font-size:.88rem;display:none}#error-msg code{background:#eee;padding:2px 5px;border-radius:3px}#modal-overlay{display:none;position:fixed;inset:0;background:rgb(0 0 0 / .45);z-index:200;align-items:center;justify-content:center}#modal-overlay.open{display:flex}#modal{background:#fff;border-radius:14px;padding:26px;width:300px;max-width:92vw;position:relative}#modal .big-block{height:100px;border-radius:8px;margin-bottom:16px}#modal h2{font-size:1.05rem}#modal .sub{font-size:.78rem;color:#888;margin-top:3px}#modal table{width:100%;margin-top:12px;font-size:.83rem;border-collapse:collapse}#modal td{padding:4px 0}#modal td:first-child{color:#999;width:48px}#modal .copy-btn{margin-top:14px;width:100%;padding:9px;background:#8B1A1A;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.88rem}#modal .copy-btn:hover{background:#a02020}#modal .close-btn{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.1rem;cursor:pointer;color:#bbb}.mobile-tabs{display:none}@media (max-width:860px){.mobile-tabs{display:flex;background:#fff;border-bottom:2px solid #eee;position:sticky;top:0;z-index:100}.mobile-tab{flex:1;padding:13px 8px;border:none;background:none;font-size:.88rem;cursor:pointer;color:#888;border-bottom:3px solid #fff0;margin-bottom:-2px;font-family:inherit;transition:color .15s}.mobile-tab.active{color:#8B1A1A;border-bottom-color:#8B1A1A;font-weight:600}.mobile-hidden{display:none!important}.header-title{display:none}.layout{flex-direction:column;padding:10px;gap:0}.simulador-panel{flex:none;position:static}.palette-panel{border-radius:0;box-shadow:none}.grid{grid-template-columns:repeat(auto-fill,85px)}}