/* ============================================
   Logo Studios v4 — WordPress Plugin Styles
   Todos los estilos están dentro de
   .logo-studios-wrap para no contaminar el tema
   ============================================ */

.logo-studios-wrap {
    display: block;
    width: 100%;
    height: var(--ls-height, 100vh);
    overflow: hidden;
    position: relative;
}

.logo-studios-wrap *{box-sizing:border-box;margin:0;padding:0}
.logo-studios-wrap :root{
  --bg:#07070f;--p1:#0d0d18;--p2:#111120;--b1:#1a1a2e;--b2:#252540;
  --tx:#dde0f0;--tx2:#666;--ac:#7c3aed;--ac2:#4f46e5;
}

/* Override body-level selectors a nivel de wrapper */
.logo-studios-wrap #hdr{background:linear-gradient(90deg,#08080f,#0f0f1e,#08080f);border-bottom:1px solid #1a1a2e;padding:8px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:200}
.logo-studios-wrap #hdr h1{font-family:'Bangers',cursive;font-size:22px;letter-spacing:5px;background:linear-gradient(90deg,#a855f7,#6366f1,#22d3ee,#f59e0b);background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ls-hgrad 4s linear infinite}
@keyframes ls-hgrad{to{background-position:300%}}
.logo-studios-wrap .hbadge{font-size:8px;letter-spacing:2px;background:#111120;border:1px solid #252540;color:#666;padding:2px 7px;border-radius:3px}
.logo-studios-wrap .hbtn{padding:5px 12px;border-radius:4px;font-size:10px;letter-spacing:1px;cursor:pointer;border:1px solid #252540;background:#111120;color:#666;transition:all .18s;margin-left:4px;font-family:'Oswald',sans-serif}
.logo-studios-wrap .hbtn:hover{background:#1a1a2e;color:#dde0f0}
.logo-studios-wrap .hbtn.pr{background:linear-gradient(135deg,#7c3aed,#4f46e5);border:none;color:#fff}
.logo-studios-wrap .hbtn.pr:hover{filter:brightness(1.15)}
.logo-studios-wrap #hdr .sp{flex:1}

.logo-studios-wrap #app{display:grid;grid-template-columns:250px 1fr 270px;height:calc(var(--ls-height, 100vh) - 44px - 56px);background:#07070f;color:#dde0f0;font-family:'Oswald',sans-serif}

.logo-studios-wrap .pan{background:#0d0d18;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#1a1a2e #07070f}
.logo-studios-wrap .pan::-webkit-scrollbar{width:3px}
.logo-studios-wrap .pan::-webkit-scrollbar-thumb{background:#1a1a2e}
.logo-studios-wrap .lpan{border-right:1px solid #1a1a2e}
.logo-studios-wrap .rpan{border-left:1px solid #1a1a2e}
.logo-studios-wrap .blk{padding:10px 12px;border-bottom:1px solid #1a1a2e}
.logo-studios-wrap .bt{font-size:8px;letter-spacing:3px;color:#666;text-transform:uppercase;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.logo-studios-wrap .bt::after{content:'';flex:1;height:1px;background:#1a1a2e}

.logo-studios-wrap .ug{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.logo-studios-wrap .ub{padding:6px 2px;border:1px solid #1a1a2e;border-radius:5px;background:#111120;cursor:pointer;text-align:center;font-size:8px;font-weight:700;letter-spacing:.5px;transition:all .15s;font-family:'Oswald',sans-serif}
.logo-studios-wrap .ub .ei{font-size:14px;display:block;margin-bottom:1px}
.logo-studios-wrap .ub:hover{transform:translateY(-1px)}
.logo-studios-wrap .ub.active{transform:translateY(-2px)}
.logo-studios-wrap .ub.dc{color:#60a5fa}.logo-studios-wrap .ub.dc.active,.logo-studios-wrap .ub.dc:hover{background:#071830;border-color:#3b82f6;box-shadow:0 0 8px #1d4ed855}
.logo-studios-wrap .ub.marvel{color:#f87171}.logo-studios-wrap .ub.marvel.active,.logo-studios-wrap .ub.marvel:hover{background:#1f0808;border-color:#dc2626;box-shadow:0 0 8px #dc262655}
.logo-studios-wrap .ub.op{color:#fcd34d}.logo-studios-wrap .ub.op.active,.logo-studios-wrap .ub.op:hover{background:#1f1200;border-color:#d97706;box-shadow:0 0 8px #d9770655}
.logo-studios-wrap .ub.db{color:#fdba74}.logo-studios-wrap .ub.db.active,.logo-studios-wrap .ub.db:hover{background:#1f0a00;border-color:#ea580c;box-shadow:0 0 8px #ea580c55}
.logo-studios-wrap .ub.naruto{color:#fde68a}.logo-studios-wrap .ub.naruto.active,.logo-studios-wrap .ub.naruto:hover{background:#1f1400;border-color:#ca8a04;box-shadow:0 0 8px #ca8a0455}
.logo-studios-wrap .ub.heman{color:#d8b4fe}.logo-studios-wrap .ub.heman.active,.logo-studios-wrap .ub.heman:hover{background:#140820;border-color:#9333ea;box-shadow:0 0 8px #9333ea55}
.logo-studios-wrap .ub.gamer{color:#86efac}.logo-studios-wrap .ub.gamer.active,.logo-studios-wrap .ub.gamer:hover{background:#002010;border-color:#16a34a;box-shadow:0 0 8px #16a34a55}
.logo-studios-wrap .ub.anime{color:#f9a8d4}.logo-studios-wrap .ub.anime.active,.logo-studios-wrap .ub.anime:hover{background:#1f0015;border-color:#db2777;box-shadow:0 0 8px #db277755}
.logo-studios-wrap .ub.otaku{color:#c4b5fd}.logo-studios-wrap .ub.otaku.active,.logo-studios-wrap .ub.otaku:hover{background:#120a25;border-color:#7c3aed;box-shadow:0 0 8px #7c3aed55}
.logo-studios-wrap .ub.lotr{color:#fcd34d}.logo-studios-wrap .ub.lotr.active,.logo-studios-wrap .ub.lotr:hover{background:#1a1000;border-color:#b45309;box-shadow:0 0 8px #b4530955}
.logo-studios-wrap .ub.gothic{color:#e879f9}.logo-studios-wrap .ub.gothic.active,.logo-studios-wrap .ub.gothic:hover{background:#12001a;border-color:#a21caf;box-shadow:0 0 8px #a21caf55}
.logo-studios-wrap .ub.scifi{color:#67e8f9}.logo-studios-wrap .ub.scifi.active,.logo-studios-wrap .ub.scifi:hover{background:#001018;border-color:#0891b2;box-shadow:0 0 8px #0891b255}
.logo-studios-wrap .ub.wwe{color:#f87171}.logo-studios-wrap .ub.wwe.active,.logo-studios-wrap .ub.wwe:hover{background:#1a0505;border-color:#b91c1c;box-shadow:0 0 8px #b91c1c55}
.logo-studios-wrap .ub.street{color:#fb923c}.logo-studios-wrap .ub.street.active,.logo-studios-wrap .ub.street:hover{background:#1a0800;border-color:#c2410c;box-shadow:0 0 8px #c2410c55}
.logo-studios-wrap .ub.cyberpunk{color:#facc15}.logo-studios-wrap .ub.cyberpunk.active,.logo-studios-wrap .ub.cyberpunk:hover{background:#0f0f00;border-color:#ca8a04;box-shadow:0 0 8px #facc1555}

.logo-studios-wrap .ti{width:100%;background:#111120;border:1px solid #1a1a2e;color:#dde0f0;padding:7px 9px;border-radius:5px;font-family:'Bebas Neue',cursive;font-size:14px;letter-spacing:2px;outline:none;transition:border .2s;margin-bottom:4px}
.logo-studios-wrap .ti:focus{border-color:#444}
.logo-studios-wrap .ti::placeholder{color:#2a2a40}
.logo-studios-wrap .fl{font-size:8px;letter-spacing:2px;color:#666;text-transform:uppercase;margin-bottom:3px;display:block}
.logo-studios-wrap .fsc{display:grid;grid-template-columns:1fr 1fr;gap:3px;max-height:200px;overflow-y:auto}
.logo-studios-wrap .fb{padding:5px 3px;background:#111120;border:1px solid #1a1a2e;border-radius:3px;cursor:pointer;font-size:9px;color:#666;text-align:center;transition:all .18s;line-height:1.3}
.logo-studios-wrap .fb:hover,.logo-studios-wrap .fb.active{background:#1a1a2e;border-color:#444;color:#dde0f0}
.logo-studios-wrap .sr{display:flex;align-items:center;gap:6px;margin:3px 0}
.logo-studios-wrap .sr label{font-size:8px;color:#333;min-width:20px;text-align:right}
.logo-studios-wrap .sr input[type=range]{flex:1;height:2px;accent-color:#7c3aed;cursor:pointer}
.logo-studios-wrap .sr .sv{font-size:9px;color:#666;min-width:26px;text-align:right}
.logo-studios-wrap .cs{display:flex;gap:4px;flex-wrap:wrap;margin:3px 0}
.logo-studios-wrap .sw{width:20px;height:20px;border-radius:3px;cursor:pointer;border:2px solid transparent;transition:all .13s;flex-shrink:0}
.logo-studios-wrap .sw:hover,.logo-studios-wrap .sw.active{border-color:#fff;transform:scale(1.2)}
.logo-studios-wrap input[type=color]{cursor:pointer;border:none;background:none;padding:0}
.logo-studios-wrap .g2{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.logo-studios-wrap .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3px}
.logo-studios-wrap .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.logo-studios-wrap .g5{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.logo-studios-wrap .gbtn{padding:6px 3px;background:#111120;border:1px solid #1a1a2e;border-radius:4px;cursor:pointer;font-size:8px;color:#666;text-align:center;transition:all .18s;line-height:1.5;font-family:'Oswald',sans-serif}
.logo-studios-wrap .gbtn .gi{font-size:13px;display:block;margin-bottom:1px}
.logo-studios-wrap .gbtn:hover{background:#1a1a2e;border-color:#444;color:#dde0f0}
.logo-studios-wrap .gbtn.active{background:#150d30;border-color:#7c3aed;color:#c4b5fd}
.logo-studios-wrap .gbtn.factive{background:#1a1200;border-color:#d97706;color:#fcd34d}
.logo-studios-wrap .bgb{height:30px;border-radius:4px;cursor:pointer;border:2px solid transparent;transition:all .18s;display:flex;align-items:center;justify-content:center;font-size:11px;color:rgba(255,255,255,.5);text-shadow:0 1px 3px #000}
.logo-studios-wrap .bgb:hover,.logo-studios-wrap .bgb.active{border-color:#fff}
.logo-studios-wrap .sbtn{padding:4px;background:#111120;border:1px solid #1a1a2e;border-radius:3px;cursor:pointer;font-size:15px;text-align:center;transition:all .15s}
.logo-studios-wrap .sbtn:hover{background:#1a1a2e;transform:scale(1.12)}
.logo-studios-wrap .sbtn.sel{border-color:#f59e0b;background:#1a1200}
.logo-studios-wrap .tabs{display:flex;border-bottom:1px solid #1a1a2e}
.logo-studios-wrap .tab{flex:1;padding:7px 3px;font-size:8px;letter-spacing:1.5px;text-align:center;cursor:pointer;color:#666;transition:all .18s;border-bottom:2px solid transparent;font-family:'Oswald',sans-serif}
.logo-studios-wrap .tab:hover{color:#dde0f0}
.logo-studios-wrap .tab.active{color:#7c3aed;border-bottom-color:#7c3aed}
.logo-studios-wrap .tc{display:none}.logo-studios-wrap .tc.active{display:block}
.logo-studios-wrap #cpan{display:flex;flex-direction:column;background:#04040c}
.logo-studios-wrap #tb{display:flex;align-items:center;gap:5px;padding:7px 12px;background:#0d0d18;border-bottom:1px solid #1a1a2e;flex-wrap:wrap}
.logo-studios-wrap .tbc{padding:4px 9px;background:#111120;border:1px solid #1a1a2e;color:#666;border-radius:3px;cursor:pointer;font-size:9px;letter-spacing:.5px;transition:all .15s;white-space:nowrap;font-family:'Oswald',sans-serif}
.logo-studios-wrap .tbc:hover{background:#1a1a2e;color:#dde0f0}
.logo-studios-wrap .tbc.active{background:#150d30;border-color:#7c3aed;color:#c4b5fd}
.logo-studios-wrap .tsep{width:1px;height:18px;background:#1a1a2e;margin:0 2px}
.logo-studios-wrap #cwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;background:radial-gradient(ellipse at center,#0c0c20 0%,#04040c 70%);position:relative;overflow:hidden}
.logo-studios-wrap #logoCanvas{border-radius:6px;box-shadow:0 0 50px rgba(0,0,0,.9);display:block;max-width:100%;max-height:100%;cursor:crosshair}
.logo-studios-wrap #sb{padding:5px 12px;background:#0d0d18;border-top:1px solid #1a1a2e;font-size:8px;letter-spacing:2px;color:#222;display:flex;gap:12px;align-items:center;font-family:'Oswald',sans-serif}
.logo-studios-wrap #sb span{color:#333}
.logo-studios-wrap .gstop{display:flex;align-items:center;gap:5px;margin:3px 0;padding:4px 6px;background:#111120;border-radius:4px}
.logo-studios-wrap .gstop input[type=color]{width:24px;height:18px}
.logo-studios-wrap .gstop input[type=range]{flex:1;height:2px;accent-color:#888}
.logo-studios-wrap .gstop button{background:none;border:none;color:#333;cursor:pointer;font-size:11px;padding:1px 4px}
.logo-studios-wrap .gstop button:hover{color:#ef4444}
.logo-studios-wrap .xb{width:100%;padding:9px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:2px;cursor:pointer;border:none;margin-top:4px;transition:all .18s;text-transform:uppercase;font-family:'Oswald',sans-serif}
.logo-studios-wrap .xb:hover{filter:brightness(1.12);transform:translateY(-1px)}
.logo-studios-wrap .xb.png{background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff}
.logo-studios-wrap .xb.gh{background:#111120;border:1px solid #252540;color:#666}
.logo-studios-wrap .layer{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#111120;border:1px solid #1a1a2e;border-radius:4px;margin-bottom:3px;cursor:pointer;transition:all .15s}
.logo-studios-wrap .layer:hover{border-color:#444}
.logo-studios-wrap .layer.sel{border-color:#7c3aed}
.logo-studios-wrap .layer .lico{font-size:14px}
.logo-studios-wrap .layer .lname{flex:1;font-size:9px;color:#666}
.logo-studios-wrap .layer .ldel{font-size:10px;color:#333;cursor:pointer;padding:0 3px}
.logo-studios-wrap .layer .ldel:hover{color:#ef4444}
.logo-studios-wrap .txbtn{padding:5px 3px;background:#111120;border:1px solid #1a1a2e;border-radius:4px;cursor:pointer;font-size:8px;color:#666;text-align:center;transition:all .18s;font-family:'Oswald',sans-serif}
.logo-studios-wrap .txbtn:hover,.logo-studios-wrap .txbtn.active{background:#1a1a2e;border-color:#f59e0b;color:#fcd34d}
.logo-studios-wrap .symbtn{padding:5px;background:#111120;border:1px solid #1a1a2e;border-radius:4px;cursor:pointer;font-size:18px;text-align:center;transition:all .15s}
.logo-studios-wrap .symbtn:hover{background:#1a1a2e;transform:scale(1.1)}
.logo-studios-wrap .symbtn.active{border-color:#f59e0b}
.logo-studios-wrap #dragSelect{position:absolute;pointer-events:none;border:1.5px dashed #f59e0b;border-radius:4px;display:none;box-shadow:0 0 8px #f59e0b44}
.logo-studios-wrap #histStrip{display:flex;gap:6px;padding:6px 10px;background:#0d0d18;border-top:1px solid #1a1a2e;overflow-x:auto;min-height:56px;align-items:center;scrollbar-width:thin;scrollbar-color:#1a1a2e #07070f}
.logo-studios-wrap #histStrip::-webkit-scrollbar{height:2px}
.logo-studios-wrap .hthumb{flex-shrink:0;width:72px;height:40px;border-radius:4px;border:1.5px solid #252540;cursor:pointer;object-fit:cover;opacity:.7;transition:all .15s}
.logo-studios-wrap .hthumb:hover{opacity:1;border-color:#f59e0b;transform:scale(1.05)}
.logo-studios-wrap #histLbl{font-size:7px;letter-spacing:2px;color:#666;white-space:nowrap;margin-right:4px;font-family:'Oswald',sans-serif}
.logo-studios-wrap .bgimg-btn{width:100%;padding:6px;background:#111120;border:1px dashed #252540;color:#666;border-radius:5px;cursor:pointer;font-size:8px;letter-spacing:1.5px;text-align:center;transition:all .18s;margin-top:4px;font-family:'Oswald',sans-serif}
.logo-studios-wrap .bgimg-btn:hover{border-color:#f59e0b;color:#f59e0b}
.logo-studios-wrap ::-webkit-scrollbar{width:3px;height:3px}
.logo-studios-wrap ::-webkit-scrollbar-track{background:#07070f}
.logo-studios-wrap ::-webkit-scrollbar-thumb{background:#1a1a2e;border-radius:2px}

/* Responsive dentro del wrapper */
@media(max-width:700px){
  .logo-studios-wrap #app{display:flex;flex-direction:column;height:auto}
  .logo-studios-wrap .lpan,.logo-studios-wrap .rpan{max-height:250px;width:100%;border-right:none;border-left:none;border-bottom:1px solid #1a1a2e}
  .logo-studios-wrap #cpan{order:-1}
  .logo-studios-wrap #cwrap{padding:8px;min-height:240px}
  .logo-studios-wrap #hdr h1{font-size:16px;letter-spacing:3px}
  .logo-studios-wrap .hbtn{font-size:8px;padding:4px 8px}
  .logo-studios-wrap #histStrip{display:none}
}