/* Trazo vivo: lienzo grande con barra flotante, raíl lateral y paneles que se abren encima (estilo app de dibujo). */
.cq-s-bar,.cq-s-rail,.cq-s-panel,.cq-s-toast,.cq-s-doc{display:none}
.cq-drawing-mode .cq-s-ready .cq-s-bar,.cq-drawing-mode .cq-s-ready .cq-s-rail{display:flex}
.cq-drawing-mode .cq-s-doc{display:flex}
.cq-drawing-mode .cq-s-panel:not([hidden]){display:flex}
.cq-drawing-mode .cq-s-toast{display:block}
.cq-drawing-mode .cq-d-brushes,.cq-drawing-mode .cq-d-inspector,.cq-drawing-mode .cq-d-tool-buttons{display:none!important}
.cq-drawing-mode .cq-workspace{grid-template-columns:minmax(0,1fr)!important}
.cq-drawing-mode .cq-stage{height:max(500px,calc(100vh - 235px));border-radius:16px;background-color:#16151c}
.cq-studio.cq-drawing-mode .cq-stage{height:auto}
.cq-drawing-mode .cq-d-timeline h3{display:flex!important;font-size:.72rem;color:var(--cq-muted);align-items:center;gap:8px;cursor:pointer;user-select:none;margin:0}
.cq-drawing-mode .cq-d-timeline h3:before{content:'';width:0;height:0;border-left:5px solid currentColor;border-block:4px solid transparent;transition:transform .15s}
.cq-drawing-mode .cq-d-timeline.is-open h3:before{transform:rotate(90deg)}
.cq-drawing-mode .cq-d-timeline.is-open h3{margin-bottom:10px}
.cq-drawing-mode .cq-d-timeline:not(.is-open){min-height:0!important;max-height:none!important;padding-block:9px!important}
.cq-drawing-mode .cq-d-timeline:not(.is-open)>:not(h3){display:none!important}
.cq-drawing-mode .cq-d-world{box-shadow:0 10px 50px #0007}

.cq-s-bar,.cq-s-rail,.cq-s-doc,.cq-s-panel{--glass:#1f1d27ee;--line:#ffffff1c;background:var(--glass);border:1px solid var(--line);box-shadow:0 10px 32px #0006;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#f3eefc}
.cq-s-bar{position:absolute;top:12px;right:12px;z-index:6;align-items:center;gap:6px;padding:6px;border-radius:18px;max-width:calc(100% - 24px)}
.cq-s-group{display:flex;align-items:center;gap:3px}
.cq-s-sep{width:1px;align-self:stretch;margin:4px 3px;background:var(--line)}
.cq-stage .cq-s-btn{position:relative;display:grid;place-items:center;width:40px;height:40px;min-height:40px;padding:0;border:1px solid transparent;border-radius:12px;background:transparent;color:inherit;cursor:pointer}
.cq-stage .cq-s-btn:hover{background:#ffffff10}
.cq-stage .cq-s-btn[aria-pressed=true],.cq-stage .cq-s-btn[aria-expanded=true]{background:color-mix(in srgb,var(--cq-lilac) 17%,transparent);border-color:color-mix(in srgb,var(--cq-lilac) 67%,transparent)}
.cq-stage .cq-s-btn:disabled{opacity:.35;cursor:not-allowed}
.cq-s-btn .cq-d-icon{width:20px;height:20px}
.cq-s-caret{position:absolute;right:4px;bottom:4px;width:0;height:0;border-left:4px solid transparent;border-top:4px solid var(--cq-lilac)}
.cq-s-brushtab{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:136px;height:40px;padding:3px 8px;border:1px solid var(--line);border-radius:12px;background:#ffffff08;color:inherit;font:inherit;cursor:pointer;overflow:hidden}
.cq-s-brushtab canvas{width:118px;height:22px;display:block}
.cq-s-brushtab span{font-size:.6rem;line-height:1;color:#cfc6dd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:118px}
.cq-s-brushtab[aria-expanded=true],.cq-s-brushtab[aria-pressed=true]{border-color:color-mix(in srgb,var(--cq-lilac) 67%,transparent);background:color-mix(in srgb,var(--cq-lilac) 12%,transparent)}
.cq-s-swatch i{display:block;width:24px;height:24px;border-radius:50%;background:var(--swatch,var(--cq-pink));box-shadow:0 0 0 2px #fff,0 0 0 3px #0006}
.cq-s-shape-wrap{position:relative;display:flex}
.cq-s-shape-menu{position:absolute;top:48px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:5px;border-radius:14px;background:#1f1d27f5;border:1px solid #ffffff1c;box-shadow:0 10px 30px #0007;z-index:8}
.cq-s-shape-menu[hidden]{display:none}

.cq-s-doc{position:absolute;top:12px;left:12px;z-index:6;align-items:center;gap:4px;padding:5px;border-radius:16px;margin:0}
.cq-drawing-mode .cq-stage .cq-s-doc .cq-quiet{display:flex;align-items:center;gap:7px;min-height:38px;padding:6px 10px;border:0;border-radius:11px;background:transparent;color:inherit;font-size:0;white-space:nowrap}
.cq-drawing-mode .cq-stage .cq-s-doc #cq-d-live{font-size:.7rem}
.cq-s-doc .cq-d-sheet-size{display:none}
.cq-drawing-mode .cq-stage .cq-s-doc .cq-quiet:hover{background:#ffffff10}
.cq-s-doc .cq-d-icon{width:18px;height:18px}
.cq-s-doc #cq-d-live{margin-left:0;border:1px solid #ffffff1c;background:#ffffff06}
.cq-s-doc .cq-d-sheet-size{padding:0 4px}
.cq-s-doc .cq-d-live-hint{top:52px;left:0;right:auto}

.cq-s-rail{position:absolute;left:12px;top:50%;transform:translateY(-50%);z-index:6;flex-direction:column;align-items:center;gap:10px;padding:10px 6px;border-radius:18px}
.cq-s-vslot{display:block;height:132px;width:30px;padding:0;margin:0;cursor:pointer}
.cq-s-vrange{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;width:30px;height:132px;margin:0;background:transparent;cursor:pointer}
.cq-s-vrange::-webkit-slider-runnable-track{width:30px;border-radius:12px;background:linear-gradient(0deg,#ffffff24,#ffffff0d)}
.cq-s-vrange::-moz-range-track{width:30px;border-radius:12px;background:linear-gradient(0deg,#ffffff24,#ffffff0d)}
.cq-s-vrange::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:20px;border-radius:9px;background:#f3eefc;box-shadow:0 2px 8px #0008}
.cq-s-vrange::-moz-range-thumb{width:28px;height:18px;border:0;border-radius:9px;background:#f3eefc}
.cq-s-vrange:disabled{opacity:.35}
.cq-s-rail .cq-quiet{display:grid;place-items:center;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:11px;background:transparent}
.cq-s-rail .cq-quiet:hover{background:#ffffff12}
.cq-s-rail .cq-quiet:disabled{opacity:.3}
.cq-s-bubble{position:absolute;left:54px;transform:translateY(-50%);padding:5px 9px;border-radius:9px;background:#f3eefc;color:#1c1620;font-size:.72rem;font-weight:700;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.cq-s-bubble[hidden]{display:none}

.cq-s-panel{position:absolute;top:66px;right:12px;z-index:7;flex-direction:column;width:min(370px,calc(100% - 90px));max-height:calc(100% - 82px);border-radius:20px;overflow:hidden}
.cq-s-panel>header{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 18px;border-bottom:1px solid #ffffff12}
.cq-s-panel h3{margin:0;font-size:.85rem;letter-spacing:.01em}
.cq-stage .cq-s-close{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:#ffffff0d;cursor:pointer}
.cq-s-close .cq-d-icon{width:16px;height:16px}
.cq-s-body{padding:6px 16px 16px;overflow:auto}
.cq-s-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.cq-s-panel fieldset>legend{display:none}
.cq-s-panel .cq-control{position:relative;margin-top:16px;gap:7px;font-size:.74rem;color:#e9e3f3}
.cq-s-panel .cq-d-value{position:absolute;right:0;top:0;font-size:.7rem;color:#b6adbf}
.cq-s-panel select,.cq-s-panel input[type=text],.cq-s-panel input[type=number]{min-height:36px;padding:7px 10px;border-radius:9px;border:1px solid #ffffff22;background:#14131a;color:inherit;font:inherit;font-size:.75rem;width:100%}
.cq-s-panel .cq-help{margin-top:16px;padding-top:10px;border-top:1px solid #ffffff12;font-size:.74rem}
.cq-s-panel .cq-cels{margin-top:16px;padding-top:12px;border-top:1px solid #ffffff12}

/* Pinceles */
.cq-s-panel--brushes{width:min(430px,calc(100% - 90px))}
.cq-b-body{display:grid;grid-template-columns:52px minmax(0,1fr);min-height:0;overflow:hidden;flex:1}
.cq-b-cats{display:flex;flex-direction:column;gap:4px;padding:10px 5px;border-right:1px solid #ffffff12;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
.cq-stage .cq-b-cat{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:12px;background:transparent;cursor:pointer}
.cq-stage .cq-b-cat:hover{background:#ffffff10}
.cq-stage .cq-b-cat[aria-pressed=true]{background:color-mix(in srgb,var(--cq-lilac) 17%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cq-lilac) 67%,transparent)}
.cq-b-main{padding:10px 12px 14px;overflow:auto;min-height:0}
.cq-b-title{margin:2px 2px 10px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#b6adbf}
.cq-b-list{display:flex;flex-direction:column;gap:8px}
.cq-b-card{position:relative;border-radius:14px;background:#2a2733;border:1px solid transparent}
.cq-b-card.is-active{background:#363044;border-color:color-mix(in srgb,var(--cq-lilac) 67%,transparent)}
.cq-stage .cq-b-pick{display:block;width:100%;padding:8px 10px 4px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:14px}
.cq-b-name{display:block;font-size:.72rem;font-weight:600;color:#efe9f8}
.cq-b-pick canvas{display:block;width:100%;height:50px}
.cq-stage .cq-b-fav{position:absolute;top:5px;right:6px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;opacity:.45;cursor:pointer}
.cq-stage .cq-b-fav[aria-pressed=true]{opacity:1}
.cq-b-fav[aria-pressed=true] .cq-d-icon{filter:invert(64%) sepia(60%) saturate(800%) hue-rotate(290deg)}
.cq-b-fav .cq-d-icon{width:16px;height:16px}
.cq-b-settings{display:grid;gap:8px;padding:4px 12px 12px}
.cq-b-row{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:.7rem;color:#ddd5ea;margin:0}
.cq-stage .cq-b-reset{justify-self:end;min-height:28px;padding:4px 10px;border:1px solid #ffffff22;border-radius:9px;background:transparent;color:#cfc6dd;font-size:.68rem;cursor:pointer}
.cq-b-row output{text-align:right;font-variant-numeric:tabular-nums;color:#b6adbf}
.cq-b-row input{width:100%;accent-color:var(--cq-lilac)}
.cq-b-extras{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:14px;padding-top:12px;border-top:1px solid #ffffff12;font-size:.72rem}
.cq-b-extras[hidden]{display:none}
.cq-b-extras input[type=color]{width:34px;height:26px;padding:0;border:0;background:transparent;cursor:pointer}
.cq-b-extras .cq-check{margin:0;font-size:.72rem;align-items:center}

/* Color */
.cq-s-panel--color{width:300px}
.cq-c-sv{display:block;width:100%;height:150px;margin-top:8px;border-radius:12px;cursor:crosshair;touch-action:none}
.cq-c-hue{-webkit-appearance:none;appearance:none;width:100%;height:16px;margin:12px 0 4px;border-radius:9px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);cursor:pointer}
.cq-c-hue::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #0007}
.cq-c-hue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:0}
.cq-c-line{display:flex;align-items:center;gap:10px;margin-top:10px}
.cq-c-now{width:34px;height:34px;border-radius:10px;flex:none;box-shadow:inset 0 0 0 1px #ffffff40}
.cq-c-hex{flex:1;font-family:ui-monospace,Consolas,monospace!important;text-transform:lowercase}
.cq-c-label{margin:14px 0 6px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#b6adbf}
.cq-c-row{display:flex;flex-wrap:wrap;gap:7px}
.cq-stage .cq-c-dot{width:26px;height:26px;min-height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px #ffffff40}

.cq-s-toast{position:absolute;left:50%;bottom:74px;transform:translate(-50%,8px);z-index:8;margin:0;padding:9px 14px;border-radius:12px;background:#f3eefc;color:#1c1620;font-size:.75rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 40px);text-align:center}
.cq-s-toast.is-on{opacity:1;transform:translate(-50%,0)}

html[data-theme=light] .cq-drawing-mode .cq-stage{background-color:#e9e5ef}
html[data-theme=light] .cq-s-panel .cq-d-icon,html[data-theme=light] .cq-s-bar .cq-d-icon,html[data-theme=light] .cq-s-rail .cq-d-icon,html[data-theme=light] .cq-s-doc .cq-d-icon{filter:invert(1)}

/* Tableta y móvil: la barra baja al borde inferior y los paneles salen desde abajo */
@media (max-width:1100px){
 .cq-s-bar{top:auto;bottom:12px;right:50%;transform:translateX(50%);overflow-x:auto;scrollbar-width:none}
 .cq-s-bar::-webkit-scrollbar{display:none}
 .cq-s-shape-menu{top:auto;bottom:48px}
 .cq-s-panel,.cq-s-panel--brushes,.cq-s-panel--color{top:auto;bottom:70px;left:62px;right:10px;width:auto;max-height:min(66%,560px)}
 .cq-drawing-mode .cq-d-view-controls{bottom:auto;top:12px;right:12px}
 .cq-s-toast{bottom:auto;top:64px}
}
@media (max-width:700px){
 .cq-drawing-mode .cq-stage{height:max(460px,calc(100svh - 200px))}
 .cq-studio.cq-drawing-mode .cq-stage{height:max(420px,calc(100svh - 230px))}
 .cq-s-doc .cq-quiet{font-size:0!important;padding:6px 9px!important}
 .cq-s-doc #cq-d-live{font-size:.68rem!important}
 .cq-s-doc .cq-d-sheet-size{display:none}
 .cq-s-brushtab{width:92px}.cq-s-brushtab canvas{width:76px}
 .cq-stage .cq-s-btn{width:36px;height:36px;min-height:36px}
 .cq-s-rail{left:6px;padding:8px 4px;gap:8px}
 .cq-s-vslot,.cq-s-vrange{height:104px;width:26px}
 .cq-s-panel,.cq-s-panel--brushes,.cq-s-panel--color{left:6px;right:6px;bottom:140px;max-height:min(56%,500px)}
 .cq-s-bar{flex-wrap:wrap;justify-content:center;width:calc(100% - 16px);bottom:8px;overflow:visible;gap:2px 4px;padding:5px}
 .cq-s-group{flex-wrap:wrap;justify-content:center}
 .cq-s-sep{display:none}
 .cq-s-doc #cq-d-live-help{display:none}
 .cq-drawing-mode #cq-d-fit{display:none}
 .cq-s-toast{top:60px}
 .cq-drawing-mode .cq-d-view-controls output,.cq-drawing-mode #cq-d-focus{display:none}
 .cq-drawing-mode .cq-d-view-controls{top:8px;right:6px;padding:2px}
}

/* Cursor del pincel: anillo del tamaño del trazo con un punto central */
.cq-d-eraser-cursor.cq-d-brush-cursor{border-color:#fff;box-shadow:0 0 0 1px #1c1620aa;background:transparent}
.cq-d-eraser-cursor.cq-d-brush-cursor:after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #1c1620}
.cq-drawing-mode #cq-canvas[data-tool=bucket]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 7 6 2' stroke='%23000' stroke-width='4'/%3E%3Cpath d='M11 7 6 2'/%3E%3Cpath d='m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33' stroke='%23000' stroke-width='4'/%3E%3Cpath d='m8.5 4.5 2.148-2.148a1.205 1.205 0 0 1 1.704 0l7.296 7.296a1.205 1.205 0 0 1 0 1.704l-7.592 7.592a3.615 3.615 0 0 1-5.112 0l-3.888-3.888a3.615 3.615 0 0 1 0-5.112L5.67 7.33'/%3E%3C/svg%3E") 4 22,cell}
.cq-drawing-mode #cq-canvas[data-tool=pipette]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 22 1-1h3l9-9M3 21v-3l9-9m3 6 6.4-6.4a2.1 2.1 0 1 0-3-3L12 9l.4.4a2.1 2.1 0 1 0 3 3' stroke='%23000' stroke-width='4'/%3E%3Cpath d='m2 22 1-1h3l9-9M3 21v-3l9-9m3 6 6.4-6.4a2.1 2.1 0 1 0-3-3L12 9l.4.4a2.1 2.1 0 1 0 3 3' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 2 22,copy}
.cq-drawing-mode .cq-d-panning canvas.cq-d-erasing{cursor:grab!important}