/* =====================================================
DROP DESIGNER — PREMIUM DARK UI
===================================================== */

:root{
  --bg-main:#0d0f14;
  --panel:rgba(20,24,33,.78);
  --panel-border:rgba(255,255,255,.08);
  --text:#f4f6fb;
  --muted:#aab2c6;
  --accent:#7ff0d0;
  --accent-2:#d8f26e;

  --shadow-soft:0 10px 30px rgba(0,0,0,.35);
  --radius-xl:26px;
  --radius-lg:18px;
  --radius-md:12px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

body{
  font-family:Helvetica,sans-serif;
  background:#e8e8e8;
  color:#111;
}


/* =====================================================
APP SHELL
===================================================== */

.designer-app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  isolation:isolate;
}

.topbar,
.designer-main{
  position:relative;
  z-index:2;
}


/* =====================================================
TOPBAR
===================================================== */

.topbar{
  height:64px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 22px;
  border-bottom:1px solid var(--panel-border);
  background:#0f1117;
}

.brand-wrap{

display:flex;
align-items:center;

gap:12px;

}

.brand-logo{

display:flex;
align-items:center;

}

.brand-logo img{

height:30px;
width:auto;

display:block;

object-fit:contain;

}

.brand-text{

font-weight:800;
letter-spacing:.05em;

font-size:14px;

color:#e6e8ef;

}

.design-counter{
  font-weight:700;
  color:#e6e8ef;
}

.topbar-right{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.icon-btn{
  width:34px;
  height:34px;
  border-radius:10px;
  border:none;
  background:#1b1f29;
  color:#fff;
  cursor:pointer;
}

/* =====================================================
MAIN LAYOUT
===================================================== */

.designer-main{
  flex:1;
  display:grid;

  grid-template-columns:
  300px
  minmax(0,1fr)
  340px;

  gap:18px;
  padding:18px;

  align-items:start;

  width:100%;
  max-width:100vw;
  overflow:hidden;
}


/* =====================================================
SIDEBARS
===================================================== */

.sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:0;
}

.sidebar-right{
  grid-column:3;
}

.sidebar-left{
height:calc(100vh - 80px);
overflow-y:auto;
overflow-x:hidden;
}

/* =========================================
SCROLLBAR SIDEBAR LEFT
========================================= */

.sidebar-left{
scrollbar-width:thin;
scrollbar-color:#2a3142 transparent;
}

/* chrome / edge / safari */

.sidebar-left::-webkit-scrollbar{
width:6px;
}

.sidebar-left::-webkit-scrollbar-track{
background:transparent;
}

.sidebar-left::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#2a3142,
#3a445a
);

border-radius:20px;

}

.sidebar-left::-webkit-scrollbar-thumb:hover{

background:linear-gradient(
180deg,
#3a445a,
#4c5875
);

}


/* =====================================================
GLASS CARD
===================================================== */

.glass-card{
  background:var(--panel);
  border-radius:var(--radius-xl);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(12px);
  padding:18px;
  box-shadow:none;
}

/* =====================================================
SECTION HEADER
===================================================== */

.section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}

.section-header h3{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
}

.section-arrow{
  border:none;
  background:none;
  color:var(--muted);
  font-size:20px;
  cursor:pointer;
}

/* =====================================================
POPULAR DESIGNS
===================================================== */

.popular-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.design-thumb{
  background:#f0f2f6;  /* era #ebebeb */
  border-radius:12px;
  border:2px solid transparent;
  color:#fff;
  cursor:pointer;
  transition:.2s;
  position:relative;
  overflow:hidden;
  padding:0;
}

.design-thumb.active{

border:2px solid #ffe600;

}

.design-thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:0;  /* era 8px */
}

.design-thumb span{
  position:absolute;
  bottom:6px;
  left:6px;
  background:#000;
  color:#fff;
  font-size:10px;
  font-weight:700;
  width:18px;
  height:18px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.link-btn{
  margin-top:10px;
  width:100%;
  background:none;
  border:none;
  color:var(--accent);
  font-size:13px;
  cursor:pointer;
}

/* =====================================================
PALETTES
===================================================== */

.palette-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  max-height:320px;
  box-shadow:none !important;
  overflow-y:auto;
  padding:4px;
  transition:max-height .35s ease;
}

.palette-grid{
  scrollbar-width:thin;
  scrollbar-color:#2a3142 transparent;
}

/* =========================================
SCROLLBAR PALETTES
========================================= */

.palette-grid::-webkit-scrollbar{
  width:6px;
}

.palette-grid::-webkit-scrollbar-track{
  background:transparent;
}

.palette-grid::-webkit-scrollbar-thumb{
  background:#2a3142;
  border-radius:10px;
}

.palette-grid::-webkit-scrollbar-thumb:hover{
  background:#3b445c;
}

.palette-grid.collapsed{
  max-height:200px;
  overflow:hidden;
}

.palette-grid.expanded{
  max-height:420px;
  overflow-y:auto;
}
.palette-grid::-webkit-scrollbar{
  width:0;
}

.palette-grid:hover::-webkit-scrollbar{
  width:6px;
}
.section-arrow{
transition:transform .25s ease;
}

.section-arrow.open{
transform:rotate(90deg);
}

.palette-card{
  border:none;
  border-radius:12px;
  padding:8px;
  box-shadow:none !important;
  background:#151923;
  cursor:pointer;
}

.palette-swatches{
  display:flex;
  height:20px;
  overflow:hidden;
  border-radius:6px;
}

.palette-swatches span{
  flex:1;
}

.palette-card small{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}

/* =====================================================
BACKGROUND SELECTOR
===================================================== */

.background-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.bg-thumb{
  height:44px;
  border-radius:10px;
  border:none;
  background:#1a1f2a;
  color:var(--muted);
  cursor:pointer;
}

.bg-thumb.active{
  border:2px solid var(--accent);
}

/* =====================================================
STAGE AREA
===================================================== */

.stage-area{
  grid-column:2;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  min-width:0;

  min-height:600px;
}

.stage-overlay{
  display:none;
}

.stage-shell{
  position:relative;

  width:100%;
  height:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:transparent;
  border:none;
  box-shadow:none;
}


/* =====================================================
STAGE CONTENT
===================================================== */

.stage-content{

display:flex;
align-items:center;
justify-content:center;

max-width:700px;
width:100%;

margin:auto;

}


/* =====================================================
NAV BUTTONS
===================================================== */

.stage-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
}

.stage-nav-left{
left:-10px;
}

.stage-nav-right{
right:-10px;
}

@media (max-width:780px){

  .stage-nav-left{
    left:4px;
  }

  .stage-nav-right{
    right:4px;
  }

}

.nav-btn{
width:40px;
height:40px;
border:none;
background:none;
color:#000;
font-size:34px;
cursor:pointer;
opacity:.85;
transition:.2s;
}

.nav-btn:hover{
opacity:1;
transform:scale(1.2);
}

/* =====================================================
MOCK CARD
===================================================== */

.premium-mock-card{
width:100%;
max-width:100%;
background:transparent;
border-radius:24px;
padding:0;
box-shadow:none;
}

.mock-card{

position:relative;

/* limitar tamaño en desktop */

max-width:520px;
width:100%;

margin:auto;

}

@media (max-width:780px){

  .premium-mock-card{
    max-width:100%;
  }

  .mock-canvas{
    aspect-ratio:3/4;
  }

  @media (max-width:780px){

  .mock-canvas{
    width:100%;
    max-width:380px;
    margin:auto;
  }

}

#mockCanvas{

position:relative;

width:100%;
max-width:520px;

margin:auto;

}

}

@media (max-width:780px){

  .editor-panel{
    max-height:none;
    overflow:visible;
  }

}

.mock-canvas{
position:relative;
width:100%;
aspect-ratio:3/4;
display:flex;
align-items:center;
justify-content:center;

transform:scale(1.18);
transform-origin:center;
}




/* =====================================================
LAYERS
===================================================== */

.layer,
.overlay-clip{
  position:absolute;
  inset:0;
}

#shadowLayer{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;

width:100%;
height:100%;

pointer-events:none;

mix-blend-mode:multiply;
opacity:.72;
filter:none;

z-index:90; /* arriba de capas, sponsors y escudos */
transform:none;
}

#layerShortBase{z-index:4}
#layerSocks{z-index:5}
#layerShortNumber{z-index:6}
#layerBase{z-index:10}
#layerDetail1{z-index:12}
#layerDetail2{z-index:14}
#layerDrop{z-index:16}
#layerTypo{z-index:18}

.shadow{
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
opacity:.35;
filter:blur(18px);
}

.crest{
position:absolute;
z-index:70;
object-fit:contain;
object-position:center;
max-width:12%;
pointer-events:auto;
will-change: transform,left,top;
}

.crest-short{
  position:absolute;
  z-index:50;
}

#shortOverlay{
position:absolute;
inset:0;
z-index:45;
pointer-events:none;
}

.sponsor-item{
  position:absolute;
  z-index:120;
}

.sponsor-item img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  pointer-events:none;
}

.sponsor-slot.active{
  background:#ffe600;
  color:#000;
  position:relative;
}



/* =====================================================
BOTTOM TOOLBAR
===================================================== */

.glass-pill{
  background:rgba(20,24,33,.9);
  border-radius:999px;
  border:1px solid var(--panel-border);
  padding:10px 18px;
  display:flex;
  align-items:center;
  gap:14px;
}

.toolbar-btn{
  border:none;
  background:#1c212b;
  color:#fff;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
}

.quick-colors{
  display:flex;
  gap:6px;
}

.quick-color{
  width:18px;
  height:18px;
  border-radius:4px;
  border:none;
  cursor:pointer;
}

/* =====================================================
EDITOR PANEL
===================================================== */


.editor-panel{

max-height:none;
height:auto;

overflow:visible;

}

.editor-topbar{
  display:grid;
  grid-template-columns: minmax(0,1fr) 95px;
  gap:12px;
  margin-bottom:12px;
  align-items:start;
}

/* GRID IZQUIERDO */
.editor-selector{
  display:grid;
  grid-template-columns: repeat(6,1fr);
  gap:8px;
}

@media (max-width:780px){

  .dynamic-option{
    height:44px;
  }

}

/* CUELLOS */
.editor-selector > .dynamic-option:not(.selector-fit){
  grid-column: span 2;

}

/* MASCULINO / FEMENINO */
.selector-fit{
  grid-column: span 3;
}

/* base de todos los botones */
.dynamic-option{
  height:52px;
  border:none;
  border-radius:10px;
  background:#1b2230;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.18s ease;
  padding:6px;
  min-width:0;
}

.dynamic-option:hover{
  background:#273149;
}

.dynamic-option.active{
  background:#ffe600;
}

.dynamic-option.active img{
  filter:brightness(0);
}

/* iconos */
.dynamic-option img{
  width:34px;
  height:34px;
  object-fit:contain;
  pointer-events:none;
  display:block;
}

/* 
   IMPORTANTE:
   - los botones normales (cuellos) ocupan 2 columnas cada uno
   - los botones fit ocupan 3 columnas cada uno
*/
.editor-selector > .dynamic-option:not(.selector-fit){
  grid-column: span 2;
}

.editor-selector > .selector-fit{
  grid-column: span 3;
}

.selector-fit img{
  width:50px;
  height:50px;
}

.typography-section{
margin-top:14px;
}

.control-block{

padding-top:10px;
gap:6px;

}

.font-grid{

display:grid;
grid-template-columns:repeat(5,1fr);

gap:8px;

margin-top:6px;

}

.font-option{

height:38px;

border-radius:10px;

display:flex;
align-items:center;
justify-content:center;

}

.control-label{

font-size:11px;

}

.color-row{

padding:4px 8px;

}

/* escudo */
.crest-slot{
  width: 143px;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
}

.crest-btn{
  width:100%;
  height:112px; /* 52 + 8 + 52 */
  border:none;
  border-radius:12px;
  background:#1a1f2a;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  padding:10px;
}

.crest-preview{
  max-width:100px;
  max-height:80px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:none;
}

#crestLabel{
  font-size:14px;
  line-height:1.1;
  text-align:center;
  color:#fff;
}

/* =====================================================
EDITOR CONTROLS
===================================================== */

.editor-controls{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.control-block{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.control-label{
  font-size:12px;
  color:var(--muted);
}

.control-btn{
  border:none;
  padding:10px;
  border-radius:8px;
  background:#1a1f2a;
  color:white;
  cursor:pointer;
}

.sponsor-slots{
grid-column:span 6;
display:grid;
grid-template-columns:repeat(6,1fr);

gap:8px;
margin-top:8px;
}

@media (max-width:780px){

  .sponsor-slots{
    grid-template-columns:repeat(2,1fr);
  }

}

.sponsor-slot{
  grid-column:span 3;
  position:relative;
  height:36px;
  border:none;
  border-radius:10px;
  background:#1a1f2a;

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  padding:0;   /* 🔥 ESTE ERA EL PROBLEMA */

  overflow:hidden;
}

.sponsor-slot:hover{
background:#273149;
}

.slot-preview{
height:auto;
max-height:35px;
width:auto;
object-fit:contain;
display:none;
}

.sponsor-slot span{
font-size:10px;
color:#fff;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* =====================================================
COLOR PICKER
===================================================== */

.color-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#1a1f2a;
  border-radius:8px;
  padding:6px 10px;
}

.color-row input[type=color]{
  width:28px;
  height:28px;
  border:none;
  background:none;
}

.simple-picker{
  display:none;
}

.color-row.open + .simple-picker{
  display:block;
}

/* =====================================================
CTA
===================================================== */

.action-stack{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.premium-cta{
  border:none;
  border-radius:999px;
  padding:14px;
  font-weight:700;
  cursor:pointer;
}

.premium-cta.primary{
  background:linear-gradient(90deg,#ffe600,#d4bf00);
  color:#000;
}

.premium-cta.secondary{
  background:#1b1f29;
  color:white;
}

.sponsor-toolbar.crest-mode #sponsorColor{
pointer-events:none;
opacity:.35;
cursor:not-allowed;
filter:grayscale(100%);
}


/* =====================================================
INTRO
===================================================== */

.designer-intro{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.intro-card{
  width:360px;
  background:white;
  border-radius:22px;
  padding:26px;
  color:#111;
}

.intro-card h2{
  margin-bottom:10px;
}

.intro-sub{
  font-size:14px;
  margin-bottom:16px;
}

.intro-steps{
  list-style:none;
  margin-bottom:16px;
}

.intro-steps li{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}

.intro-steps span{
  width:20px;
  height:20px;
  background:#ffe600;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

.intro-main-btn{
  width:100%;
  padding:12px;
  border:none;
  border-radius:999px;
  background:#ffe600;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
}

.intro-secondary{
  width:100%;
  border:none;
  background:none;
  margin-top:8px;
  color:#777;
  cursor:pointer;
}

/* =====================================================
RESPONSIVE
===================================================== */

/* =====================================================
MOBILE
===================================================== */

@media (max-width:780px){

  .designer-main{

    display:flex;
    flex-direction:column;

    gap:14px;
    padding:10px;

  }

  /* ORDEN CORRECTO */

  .stage-area{
    order:1;
  }

  .sidebar-left{
    order:2;
  }

  .sidebar-right{
    order:3;
    display:block;
  }

}

/* ======================================
MOBILE LAYOUT
====================================== */

@media (max-width:780px){

  .designer-main{

    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;

    gap:14px;
    padding:12px;

  }

  /* ORDEN MOBILE */

  .stage-area{

  min-height:auto;
  width:100%;

}

  .sidebar-left{
    order:2;
    height:auto;
    overflow:visible;
  }

  .sidebar-right{
    order:3;
    display:block;
  }

}
/* colapsado */

.popular-grid.collapsed{

max-height:180px;
overflow:hidden;

}

/* expandido */

.popular-grid.expanded{

max-height:420px;
overflow-y:auto;
}

/* animacion */

.popular-grid{

transition:max-height .35s ease;

}


.palette-logo{
width: 100px;
height:100px;
object-fit:contain;
pointer-events:none;
}

@media (max-width:780px){

  .palette-logo{
    width:70px;
    height:70px;
  }

}

.palette-card{

  border:2px solid transparent;
  border-radius:12px;

  padding:6px;

  background:#0f1724;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:none;

  transition:.2s;

}

.palette-card.active{

  border:2px solid #ffe600;

  box-shadow:none;

}

.palette-card img{

  width:70%;
  height:auto;

  object-fit:contain;

  filter:none;
  box-shadow:none;

}

.palette-card:hover{

transform:scale(1.05);
border:2px solid #ffe600;

box-shadow:none;

}

.section-arrow{
transition:transform .25s ease;
}

.section-arrow.open{
transform:rotate(90deg);
}

.crest{
object-fit:contain;
object-position:center;
max-width:12%;
pointer-events:auto;
}

.sponsor-controls{
display:flex;
gap:6px;
margin-top:8px;
}

.sponsor-controls button{
border:none;
background:#1a1f2a;
color:white;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
}

.hidden{
display:none;
}

/* =================================
SPONSOR TOOLBAR
================================= */

.sponsor-toolbar{

position:absolute;

display:flex;
flex-direction:row;
gap:8px;

padding:8px 10px;

background:#ffffff;
border-radius:10px;

box-shadow:0 10px 30px rgba(0,0,0,0.25);

z-index:999;

align-items:center;

}

.sponsor-toolbar.dragging{
cursor:grabbing;
}

.sponsor-toolbar button{

width:32px;
height:32px;

border:none;
border-radius:6px;

background:#f3f3f3;

cursor:pointer;
font-size:16px;

}

#sponsorColor{

width:32px;
height:32px;

border:none;
padding:0;

cursor:pointer;

}

.sponsor-toolbar button:hover{

background:#e3e3e3;

}

.sponsor-toolbar button:hover{

background:#e4e4e4;

}

.hidden{
display:none;
}

.sponsor-delete{

position:absolute;
top:-6px;
right:-6px;

width:18px;
height:18px;

background:#ff4d4d;
color:white;

font-size:11px;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

z-index:100;

}


.slot-remove{
  position:absolute;
  top:4px;
  right:4px;
  width:16px;
  height:16px;
  background:#ff4d4d;
  color:white;
  font-size:10px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:5;
}

/* ===============================
   SPONSOR SLOT (RECTÁNGULO)
================================ */

.sponsor-item{
  position:absolute;
  z-index:55;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  cursor:grab;
  transform-origin:center;
}

.sponsor-item .sponsor-art{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  pointer-events:none;
}


/* cruz eliminar */
.sponsor-remove{
  position:absolute;
  top:-8px;
  right:-8px;

  width:20px;
  height:20px;

  background:#ff3b3b;
  color:white;
  font-size:14px;

  border-radius:50%;
  border:none;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:70;
}

.color-square{

width:28px;
height:28px;

border-radius:6px;
border:2px solid rgba(255,255,255,.2);

cursor:pointer;

background:var(--swatch-color,#fff);

transition:.15s;

}

.color-square:hover{

transform:scale(1.08);

}

.font-grid{

display:grid;
grid-template-columns:repeat(5,1fr);

gap:6px;

}

.font-option{

height:80px;
border-radius:10px;

border:2px solid transparent;

box-shadow:none;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

background:#151923;

cursor:pointer;

}

.font-option img,
.font-option span{

max-width:65%;
max-height:65%;

object-fit:contain;

}

.font-option.active{

outline:2px solid #ffe600;

}

/* GRID DE COLORES */

.color-grid{

display:grid;
grid-template-columns:repeat(4,1fr);

gap:12px;
margin-top:10px;

}

@media (max-width:780px){

  .color-grid{
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }

  .color-card{
    padding:8px;
  }

  .color-card label{
    font-size:9px;
  }

  .color-box{
    width:28px;
    height:28px;
  }

}

/* TARJETA */

.color-card{

background:#121826;

border-radius:14px;

padding:10px;

display:flex;
flex-direction:column;
align-items:center;

gap:6px;

}

/* TITULO */

.color-card label{

font-size:10px;
color:#fff;
text-align:center;

}

/* CUADRADO */

.color-box{

width:40px;
height:40px;

border-radius:12px;

border:3px solid #1f2738;

position:relative;

overflow:hidden;

background:#111;

}

/* INPUT INVISIBLE PERO ACTIVO */

.color-box input{

position:absolute;

inset:0;

width:100%;
height:100%;

opacity:0;

cursor:pointer;

}

/* =========================================
SCROLL DISEÑOS
========================================= */

.popular-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;

max-height:200px;
overflow:hidden;

transition:max-height .35s ease;
}

.popular-grid.expanded{
max-height:420px;
overflow-y:auto;
}

.popular-grid::-webkit-scrollbar{
width:0;
}

.popular-grid:hover::-webkit-scrollbar{
width:6px;
}

.popular-grid::-webkit-scrollbar-thumb{
background:#2a3142;
border-radius:10px;
}

button{
  touch-action:manipulation;
}

/* ============================
SPONSOR TOOLBAR MOBILE
============================ */

@media (max-width:780px){

  .sponsor-toolbar{

    position:absolute;

    left:50%;
    bottom:-60px;
    width:200px;
    height:60px;

    transform:translateX(-50%);

    display:flex;
    flex-direction:row;
    gap:6px;

    padding:8px;

    background:white;
    border-radius:12px;

    box-shadow:0 6px 18px rgba(0,0,0,.25);

    z-index:80;

  }

  .sponsor-toolbar button{

    width:42px;
    height:42px;

  }

}

@media (max-width:780px){

  .sponsor-toolbar{

    position:absolute;

    bottom:16px;
    left:50%;

    transform:translateX(-50%);

  }

}

.sponsor-toolbar button{
pointer-events:auto;
}

.sponsor-toolbar{
pointer-events:auto;
}

@media (min-width:1200px){

.stage-shell{

max-width:900px;
margin:auto;

}

}

/* =========================================
OCULTAR DISEÑOS + PALETAS SOLO EN MOBILE
========================================= */

@media (max-width:780px){

  /* ocultar "Diseños populares" */
  .sidebar-left .designs-card{
    display:none !important;
  }

  /* ocultar la 2da section-card de la barra izquierda
     que en tu HTML es "Paletas de colores" */
  .sidebar-left .section-card:nth-of-type(2){
    display:none !important;
  }

}

/* =========================================
FONDOS COMPACTO EN MOBILE
========================================= */

@media (max-width:780px){

  /* SOLO la card de Fondos */
  .sidebar-left .section-card:last-of-type{
    width:100%;
    max-width:100%;
    padding:12px 14px;
    border-radius:18px;
  }

  /* header más compacto */
  .sidebar-left .section-card:last-of-type .section-header{
    margin-bottom:10px;
  }

  .sidebar-left .section-card:last-of-type .section-header h3{
    font-size:14px;
  }

  /* grilla -> barra horizontal */
.sidebar-left .section-card:last-of-type .background-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;

  width:100%;
  overflow-x:auto;
  overflow-y:hidden;

  padding-bottom:2px;

  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}

  .sidebar-left .section-card:last-of-type .background-grid::-webkit-scrollbar{
    display:none;
  }

  /* botones compactos */
  .bg-thumb{
flex:1 1 0;
min-width:0;

display:flex;
align-items:center;
justify-content:center;

text-align:center;
}

}

/* =========================================
GLASS CARD COMPACTO PARA FONDOS EN MOBILE
========================================= */

@media (max-width:780px){

.sidebar-left .section-card:last-of-type{

padding:12px 14px;
border-radius:16px;

}

/* reducir espacio del header */

.sidebar-left .section-card:last-of-type .section-header{
margin-bottom:6px;
}

/* barra horizontal */

.sidebar-left .section-card:last-of-type .background-grid{
display:flex;
flex-wrap:nowrap;
gap:8px;

overflow-x:auto;
overflow-y:hidden;

}

/* botones más chicos */

.sidebar-left .section-card:last-of-type .bg-thumb{

flex:1; /* 🔥 ahora ocupan todo */

height:36px;
width:88px;


display:flex;
align-items:center;
justify-content:center;

font-size:12px;

padding:0 10px;
border-radius:10px;

}

}

/* =========================================
EDITOR LAYOUT MOBILE
========================================= */

@media (max-width:780px){

  /* GRID PRINCIPAL */

  .editor-topbar{
    display:grid;
    grid-template-columns:3fr 1.4fr;
    gap:10px;
    align-items:stretch;
  }

  /* GRID DE BOTONES */

  .editor-selector{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }

  /* CUELLOS */

.editor-selector > .dynamic-option:not(.selector-fit){
  grid-column:span 2 !important;
  height:54px;
  padding:4px;
}

.editor-selector > .dynamic-option:not(.selector-fit) img{
  width:34px;
  height:34px;
}

/* FIT */

.editor-selector > .selector-fit{
  grid-column:span 3;
  height:54px;
}

.selector-fit img{
  width:36px;
  height:36px;
}

.editor-selector{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-flow:dense;
  gap:6px;
}

  /* ESCUDO MOBILE FIX */

@media (max-width:780px){

  .crest-slot{
    width:140%;
    height:100%;
  }

  .crest-btn{
    width:100%;
    height:100%;
    min-height:110px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  .crest-btn img{
    max-width:75%;
    max-height:75%;
    object-fit:contain;
  }

}

}

/* FONDOS MOBILE WIDTH FIX */

@media (max-width:780px){

  .sidebar-left .glass-card{
    width:100%;
  }

  .background-grid{
    width:100%;
    display:flex;
    gap:8px;
  }

  .bg-thumb{
    flex:1;
    text-align:center;
  }

}

/* SPONSOR TEXT ALIGN FIX */

@media (max-width:780px){

  .sponsor-slot{

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    height:42px;
    font-size:12px;

  }

}
/* =========================================
COLORES COMPACTOS MOBILE
========================================= */

@media (max-width:780px){

  .editor-controls{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
  }

  .control-block{
    padding:8px;
    border-radius:14px;
    height:72px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
  }

  .control-label{
    font-size:10px;
    text-align:center;
    margin-bottom:6px;
  }

  .color-row input[type="color"]{
    width:28px;
    height:28px;
  }

}

/* =========================================
SPONSORS COMPACTOS MOBILE
========================================= */

@media (max-width:780px){

  .sponsor-slots{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .sponsor-slot{
    grid-column:span 1 !important;
    height:38px;
    font-size:11px;
  }

}

/* ================================
LOADER DESCARGA DISEÑO
================================ */

.download-loader{

position:fixed;
inset:0;

background:rgba(0,0,0,.55);

display:flex;
align-items:center;
justify-content:center;

z-index:9999;

}

.download-loader.hidden{
display:none;
}

.loader-box{

background:white;
padding:28px 40px;

border-radius:16px;

display:flex;
flex-direction:column;
align-items:center;
gap:14px;

font-weight:600;

}

.loader-spinner{

width:34px;
height:34px;

border:4px solid #eee;
border-top:4px solid #000;

border-radius:50%;

animation:spin .8s linear infinite;

}

@keyframes spin{

0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}

}

.sound-toggle{

position:absolute;
right:20px;
top:14px;

background:transparent;
border:none;

font-size:20px;
cursor:pointer;

opacity:.8;

}

.sound-toggle:hover{

opacity:1;

}

#overlayFront{
position:absolute;
inset:0;
z-index:40;
pointer-events:none;
overflow:hidden;
}

#overlayBack{
position:absolute;
inset:0;
z-index:39;
pointer-events:none;
}

/* =====================================================
PAGE FADE INTRO
===================================================== */

#pageFade{

position:fixed;
inset:0;

background:#000;

z-index:99999;

opacity:1;

pointer-events:none;

transition:opacity 1s ease;

}

/* estado final */

#pageFade.fade-out{

opacity:0;

}

.sponsor-front-layer{

position:absolute;
inset:0;

width:100%;
height:100%;

object-fit:contain;
object-position:center;

pointer-events:none;

/* IMPORTANTE */
opacity:0;

z-index:10;

}

.design-layer{

position:absolute;

width:100%;
height:100%;

object-fit:contain;
object-position:center;

pointer-events:none;

}

.layer-quality {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 5; /* ajustá según el orden que necesites */
}