/* =====================================================================
   Estúdio de Letreiros — layout (usa os tokens de style.css)
   ===================================================================== */
body.studio{display:flex;flex-direction:column;height:100dvh;background:radial-gradient(ellipse at 50% 0,#22142a,var(--noche) 60%)}
.st-top{display:flex;align-items:center;gap:12px;padding:calc(8px + var(--sa-t)) calc(14px + var(--sa-r)) 8px calc(14px + var(--sa-l));border-bottom:1px solid var(--linea);background:rgba(12,9,14,.85)}
.st-top a.btn{text-decoration:none;color:var(--hueso)}
.st-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.st-title h1{font-family:var(--f-display);font-weight:400;color:var(--cempa);font-size:clamp(18px,2.6vw,28px);margin:0;white-space:nowrap}
.st-title .script{font-size:20px}
.st-actions{display:flex;gap:6px;align-items:center}
.st-main{flex:1;min-height:0;display:grid;grid-template-columns:76px minmax(0,1fr) 340px}
.st-tools{display:flex;flex-direction:column;gap:6px;padding:10px 8px;border-right:1px solid var(--linea-2);overflow:auto}
.tool{width:58px;height:58px;border-radius:10px;border:1px solid var(--linea-2);background:rgba(20,13,22,.85);color:var(--hueso);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex:none}
.tool svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool small{font-size:10px;letter-spacing:.04em;color:var(--texto-2)}
.tool.sel{border-color:var(--cempa-2);background:linear-gradient(180deg,rgba(242,140,40,.25),rgba(20,13,22,.9));box-shadow:0 0 14px rgba(242,140,40,.3)}
.tool.sel small{color:var(--cempa-2)}
.st-stage{display:flex;flex-direction:column;min-width:0;min-height:0;padding:10px;gap:8px}
#stage-wrap{position:relative}
.st-stage-in{position:relative;flex:1;min-height:0;display:grid;place-items:center}
.st-stage-in canvas{position:absolute;border-radius:6px}
#c-bg{box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px rgba(242,140,40,.25)}
#c-ui{touch-action:none;cursor:crosshair}
.st-brush{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:8px 10px;border:1px solid var(--linea-2);border-radius:8px;background:rgba(16,11,19,.8)}
.st-brush label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-2)}
.st-brush input[type=range]{width:110px;accent-color:var(--cempa)}
.st-brush output{min-width:34px;color:var(--hueso);font-variant-numeric:tabular-nums}
.swatches-row{display:flex;flex-wrap:wrap;gap:5px}
.swc-b{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:var(--c);padding:0}
.swc-b.sel{border-color:var(--hueso);box-shadow:0 0 0 2px var(--c)}
.custom-col input{width:34px;height:28px;border:0;background:none;padding:0}
.st-panel{border-left:1px solid var(--linea-2);overflow:auto;padding:10px 12px 20px;background:rgba(12,9,14,.6);touch-action:pan-y;user-select:text;-webkit-user-select:text}
.tabs{position:sticky;top:-10px;z-index:2;display:flex;gap:4px;padding:6px 0 8px;background:linear-gradient(180deg,#120c15 80%,transparent)}
.tab{flex:1;border:1px solid var(--linea-2);background:rgba(20,13,22,.85);color:var(--texto-2);border-radius:6px;padding:8px 6px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px}
.tab.sel{color:#1a0b05;background:var(--cempa);border-color:transparent}
.fld{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--texto-2);margin:6px 0}
.fld textarea{background:#0a070c;color:var(--hueso);border:1px solid var(--linea);border-radius:6px;padding:8px;font:inherit;font-size:16px;resize:vertical}
.fld input[type=range]{accent-color:var(--cempa)}
.fld.mini{flex:1;margin:0}
.row2{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.row2.align span{font-size:13px;color:var(--texto-2);margin-right:4px}
.chips-row{display:flex;flex-wrap:wrap;gap:5px}
.chip-b{border:1px solid var(--linea-2);background:rgba(20,13,22,.85);color:var(--hueso);border-radius:999px;padding:4px 10px;font-size:13px}
.chip-b:hover,.chip-b.sel{border-color:var(--cempa-2);color:var(--cempa-2)}
.font-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:300px;overflow:auto;padding-right:2px}
.font-b{border:1px solid var(--linea-2);background:#0e0a11;color:var(--hueso);border-radius:6px;padding:8px 6px 6px;text-align:center;line-height:1.05;min-height:62px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.font-b span{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-b small{font-family:var(--f-ui);font-size:10px;color:var(--texto-3);letter-spacing:.06em}
.font-b.sel{border-color:var(--cempa-2);box-shadow:0 0 0 1px var(--cempa-2)}
.colors3{display:flex;gap:10px;align-items:flex-end;margin:6px 0}
.colors3 label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--texto-2)}
.colors3 input[type=color]{width:46px;height:30px;border:1px solid var(--linea-2);border-radius:6px;background:none;padding:0}
.chk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-2);margin:6px 0}
.chk input{accent-color:var(--cempa)}
.muted.small{font-size:13px}
.pages{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.page-b{border:1px solid var(--linea-2);background:#f4ecdc;border-radius:8px;padding:4px;display:flex;flex-direction:column;gap:2px}
.page-b img{width:100%;aspect-ratio:4/3;object-fit:contain}
.page-b small{color:#3a2a1e;font-size:12px;font-weight:600}
.page-b.sel{outline:2px solid var(--cempa-2);outline-offset:1px}
.bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bg-b{aspect-ratio:4/3;border-radius:8px;border:1px solid var(--linea-2);background:var(--b);color:var(--hueso);font-size:12px;display:flex;align-items:flex-end;justify-content:center;padding:4px;text-shadow:0 1px 2px #000}
.bg-b.sel{outline:2px solid var(--cempa-2)}
.inline-edit{position:absolute;z-index:5;background:rgba(10,7,12,.92);color:var(--hueso);border:1px solid var(--cempa-2);border-radius:6px;padding:6px;font-size:18px;min-width:200px}
body.studio #toasts{position:fixed;top:calc(70px + var(--sa-t));z-index:30}
@media (max-width:980px){
  .st-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto auto}
  .st-tools{order:2;flex-direction:row;border-right:0;border-top:1px solid var(--linea-2);padding:6px 10px;overflow-x:auto}
  .tool{width:54px;height:52px}
  .st-stage{order:1;padding:6px}
  .st-panel{order:3;max-height:38dvh;border-left:0;border-top:1px solid var(--linea)}
  .st-title .script{display:none}
  .st-brush input[type=range]{width:80px}
}
@media (max-width:520px){ .st-actions .btn:not(.primary){display:none} .font-list{grid-template-columns:1fr 1fr} .st-panel{max-height:42dvh} }
@media (max-width:980px){
  .st-brush{flex-wrap:nowrap;overflow-x:auto;gap:10px;padding:6px 8px}
  .st-brush label{flex:none}
  .swatches-row{flex-wrap:nowrap}
  .swc-b{flex:none;width:26px;height:26px}
  .st-panel{max-height:34dvh}
}
@media (max-width:620px){
  .st-title{display:none}
  .st-top{justify-content:space-between}
  .st-brush label{font-size:0;gap:4px}
  .st-brush label output{font-size:12px}
  .st-brush input[type=range]{width:70px}
  .tool{width:50px;height:48px}.tool small{font-size:9px}
}