html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:transparent;color:#ddd;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;user-select:none;-webkit-user-select:none;}*{box-sizing:border-box}.app{position:relative;width:100%;height:100%;overflow:hidden;background:transparent}

/* Densidad nativa: los botones conservan su tamaño cómodo y se reordenan
   fluidamente. El espacio restante se reparte, nunca agranda los iconos. */
.tools{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,1),var(--cell,56px));justify-content:start;justify-items:start;grid-auto-rows:var(--cell,56px);gap:var(--gap,8px);padding:var(--pad,8px);align-content:start;justify-items:center;align-items:center;overflow:auto;scrollbar-width:thin}

.tool{width:var(--cell,56px);max-width:100%;height:var(--cell,56px);min-width:0;min-height:0;padding:var(--icon-pad,8px);margin:0;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius,14px);background:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 1px 2px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;appearance:none;-webkit-appearance:none;transition:transform .10s ease,background .10s ease,border-color .10s ease,box-shadow .10s ease,opacity .12s ease,visibility .12s ease;position:relative}
.tool:hover{background:#373737;border-color:rgba(255,255,255,.15);transform:scale(var(--hover-scale,1.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.045),0 4px 12px rgba(0,0,0,.24);z-index:5}
.tool:active{transform:scale(.965);background:#3c3c3c}
.tool img,.iconTint{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;image-rendering:auto}
.iconTint{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}

/* Engranaje = una celda mas del grid (identico a un boton) */
.gear{width:var(--cell,56px);max-width:100%;height:var(--cell,56px);margin:0;padding:var(--icon-pad,8px);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius,14px);background:#2a2a2a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 1px 2px rgba(0,0,0,.25);color:#8f8f8f;font-size:calc(var(--cell,56px)*.4);line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;z-index:1}
.gear:hover{background:#373737;color:#d0d0d0;border-color:rgba(255,255,255,.15);transform:scale(var(--hover-scale,1.03))}
#status{display:none}

.dragGhost{position:fixed;z-index:9999;pointer-events:none;opacity:.92;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius,14px);background:#323232;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:var(--icon-pad,8px)}
.dragGhost img,.dragGhost .iconTint{width:100%;height:100%;display:block;object-fit:contain}
body.editing .tool{animation:wobble .18s infinite alternate ease-in-out}
body.editing .tool:nth-child(2n){animation-direction:alternate-reverse}
body.editing .tool::after{content:'\00d7';position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#e04b4b;color:white;font-size:11px;font-weight:700;line-height:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 5px rgba(0,0,0,.35)}
body.editing .tool.dragging{opacity:.28;transform:scale(.9)}
@keyframes wobble{from{transform:rotate(-1.2deg) scale(.985)}to{transform:rotate(1.2deg) scale(1.015)}}

/* Cajas: panel de ajustes modeless */
.boxesPanel{position:absolute;top:6px;right:6px;z-index:100;width:min(308px,calc(100% - 12px));max-height:calc(100% - 12px);display:none;flex-direction:column;overflow:hidden;background:#242424;border:1px solid rgba(255,255,255,.13);border-radius:8px;box-shadow:0 14px 38px rgba(0,0,0,.55);font-family:"SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace}
.boxesPanel.open{display:flex}.boxesHeader{height:40px;flex:0 0 40px;padding:0 8px 0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);background:#292929}.boxesHeader h1{margin:0;color:#eee;font-size:13px;font-weight:800;letter-spacing:0}.iconButton{width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:#aaa;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}.iconButton:hover{background:#383838;color:#fff}.boxesBody{padding:12px;overflow:auto}.boxFields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.boxField{display:grid;gap:6px;min-width:0}.boxFieldWide{grid-column:1/-1}.boxField span,.boxSectionLabel{color:#b9b9b9;font-size:10px;font-weight:800;line-height:1.25}.boxField input{width:100%;height:32px;padding:0 9px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#191919;color:#f1f1f1;font:700 12px/1 "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;outline:none}.boxField input:focus{border-color:#7eb5e8;box-shadow:0 0 0 2px rgba(86,154,218,.18)}.boxColorSection{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.08)}.boxSectionLabel{display:block;margin-bottom:8px}.boxSwatches{display:grid;grid-template-columns:repeat(6,18px);gap:7px;margin-bottom:10px}.boxSwatch{width:18px;height:18px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer}.boxSwatch.active{outline:2px solid #fff;outline-offset:1px}.boxColorButton{width:100%;height:34px;padding:0 10px;display:flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:#303030;color:#ddd;font:800 11px/1 "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;cursor:pointer}.boxColorButton:hover{background:#3a3a3a}.boxColorPreview{width:20px;height:20px;flex:0 0 20px;border-radius:5px;border:1px solid rgba(255,255,255,.25);background:#d9ff21;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}.boxToggle{margin:12px 0;min-height:28px;display:flex;align-items:center;gap:9px;color:#d0d0d0;font-size:10px;font-weight:800;cursor:pointer}.boxToggle input{position:absolute;opacity:0;pointer-events:none}.boxToggleMark{width:32px;height:18px;flex:0 0 32px;border-radius:9px;background:#414141;border:1px solid rgba(255,255,255,.12);position:relative;transition:background .12s ease}.boxToggleMark::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#aaa;transition:transform .12s ease,background .12s ease}.boxToggle input:checked+.boxToggleMark{background:#5d7622}.boxToggle input:checked+.boxToggleMark::after{transform:translateX(14px);background:#d9ff21}.boxToggle input:focus+.boxToggleMark{box-shadow:0 0 0 2px rgba(126,181,232,.35)}.boxCreateButton{width:100%;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.17);border-radius:6px;background:#454545;color:#fff;font:800 11px/1 "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;cursor:pointer}.boxCreateButton:hover{background:#525252}.boxCreateButton:active{transform:scale(.985)}

/* El selector usa el mismo SVG que Settings, cargado en tiempo de ejecución. */
.boxColorModal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.58)}.boxColorModal.open{display:flex}.boxColorDialog{position:relative;width:min(300px,calc(100vw - 12px),calc((100vh - 12px)*.7895));aspect-ratio:30/38;overflow:hidden;border-radius:8px;box-shadow:0 18px 60px rgba(0,0,0,.62)}.boxPickerMount,.boxPickerMount svg{position:absolute;inset:0;width:100%;height:100%;display:block}.boxPickerMount #ColorWheel,.boxPickerMount #ToneSlider,.boxPickerMount #SliderHandle,.boxPickerMount #Presets circle,.boxPickerMount #CloseButton,.boxPickerMount #ApplyButton,.boxPickerMount #CancelButton{cursor:pointer}.boxPickerHexInput{position:absolute;left:34.3%;top:73.2%;width:22.5%;height:8%;margin:0;padding:0 2px;border:0;outline:0;background:#232323;color:#b7b7b7;text-align:center;text-transform:uppercase;font:800 11px/1 "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace}

#status.show{position:fixed;left:7px;bottom:7px;z-index:40000;display:block;max-width:calc(100% - 14px);padding:6px 8px;border:1px solid rgba(255,255,255,.13);border-radius:6px;background:rgba(24,24,24,.94);color:#ddd;box-shadow:0 4px 16px rgba(0,0,0,.42);font:700 10px/1.35 "SF Mono",SFMono-Regular,ui-monospace,Menlo,Consolas,monospace;white-space:normal;overflow-wrap:anywhere;pointer-events:none}#status.error{border-color:rgba(255,104,104,.45);color:#ffc0c0}

@media(max-width:250px){.boxFields{grid-template-columns:1fr}.boxFieldWide{grid-column:auto}.boxSwatches{grid-template-columns:repeat(4,18px)}}