.wcsd-fab-toggle{ display:none; }

/* AdroCrea – Minimal UI (1.0.4) */
:root{
  --ac-card: #ffffff;
  --ac-muted: rgba(0,0,0,.62);
  --ac-border: rgba(0,0,0,.10);
  --ac-shadow: 0 18px 50px rgba(0,0,0,.22);
  --ac-radius: 18px;
  --ac-radius-sm: 12px;
  --ac-pill: 999px;
}

/* Embedded fonts shipped with the plugin (.woff2 in /assets/fonts). */
@font-face{font-family:'DejaVuSans';src:url('../fonts/DejaVuSans.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'DejaVuSansMono';src:url('../fonts/DejaVuSansMono.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'DejaVuSerif';src:url('../fonts/DejaVuSerif.woff2') format('woff2');font-display:swap;}

.wcsd-wrap { margin: 14px 0; }
.wcsd-open.button.alt { border-radius: var(--ac-pill); padding: 10px 16px; }

.wcsd-mini-previews { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.wcsd-mini { border:1px solid var(--ac-border); padding:10px; border-radius: var(--ac-radius-sm); width:168px; background:#fff; }
.wcsd-mini-title { font-weight:700; margin-bottom:8px; font-size:13px; opacity:.9; }
.wcsd-mini img { width:100%; height:auto; display:block; border-radius:10px; border:1px solid rgba(0,0,0,.06); }

.wcsd-modal {
  position:fixed;
  inset:0;
  /* Be above theme overlays and chat widgets (WhatsApp, etc.). */
  z-index:2147483000;
  display:none;
  align-items:center;
  justify-content:center;
  /* Keep the backdrop fixed and scroll only the panel body to avoid nested scrollbars */
  overflow:hidden;
  padding:12px;
  box-sizing:border-box;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.wcsd-modal.is-open { display:flex; }

/* On short-height laptops, start from the top so nothing important is hidden */
@media (max-height: 760px) and (min-width: 1101px){
  .wcsd-modal{ align-items:flex-start; }
}
html.wcsd-modal-open,
body.wcsd-modal-open{ overflow:hidden !important; }
.wcsd-modal__backdrop { position:fixed; inset:0; background: rgba(12, 12, 18, .62); backdrop-filter: blur(2px); }

/* Optional vertical scroll slider (desktop)
   Disabled by default because it created confusion with the internal scrollbar.
   We now scroll the whole panel body, so the canvas + tools move together. */
.wcsd-vscroll{
  position:fixed;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  z-index:2147483001;
  display:none !important;
  background: rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  padding:10px 8px;
  box-shadow: 0 14px 38px rgba(0,0,0,.18);
}
.wcsd-vscroll button{
  width:32px; height:32px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto;
}
.wcsd-vscroll button:hover{ background: rgba(0,0,0,.04); }
.wcsd-vscroll input[type=range]{
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr;
  width:18px;
  height:150px;
  margin:8px auto;
  display:block;
}

.wcsd-modal__panel{
  position:relative;
  max-width:1120px;
  /* Always fit inside the viewport on low-height laptop screens */
  margin:0 auto;
  height: calc(100vh - 24px);
  max-height: none;
  width: min(1120px, 100%);
  display:flex;
  flex-direction:column;
  background: var(--ac-card);
  border-radius: calc(var(--ac-radius) + 4px);
  overflow:hidden;
  box-shadow: var(--ac-shadow);
  border: 1px solid rgba(255,255,255,.12);
  transform: translateY(6px);
  animation: acFadeIn .18s ease-out forwards;
}

@supports (height: 100dvh){
  .wcsd-modal__panel{ height: calc(100dvh - 24px); }
}

/* Extra safety: some themes/plugins override modal sizing.
   Force the panel to fit inside the viewport on desktop/laptop screens. */
@media (min-width: 1101px){
  .wcsd-modal__panel{
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
  }
  @supports (height: 100dvh){
    .wcsd-modal__panel{
      height: calc(100dvh - 24px) !important;
      max-height: calc(100dvh - 24px) !important;
    }
  }
}
@keyframes acFadeIn{
  from{ opacity:0; transform: translateY(10px) scale(.99); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.wcsd-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(to bottom, rgba(0,0,0,.02), rgba(0,0,0,0));
}

.wcsd-tabs{ display:flex; gap:8px; }
.wcsd-tab{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:9px 14px;
  border-radius: var(--ac-pill);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  transition:.15s ease;
}
.wcsd-tab:hover{ transform: translateY(-1px); }
.wcsd-tab.is-active{ background:#0b0b0f; color:#fff; border-color:#0b0b0f; }

.wcsd-close{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  width:38px; height:38px;
  border-radius: var(--ac-pill);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:.15s ease;
}
.wcsd-close:hover{ background: rgba(0,0,0,.06); }

.wcsd-modal__body{ display:flex; gap:16px; padding:14px; flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior: contain; }
/* Make the left column shrink safely on low-height screens (15" laptops) */
.wcsd-left{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; }
.wcsd-right{ width:360px; flex:0 0 360px; display:flex; flex-direction:column; gap:12px; min-height:0; }

/* Desktop: the modal body scrolls so canvas + tools move together */
.wcsd-right__scroll{ flex:1 1 auto; min-height:0; overflow:auto; padding-right:8px; overscroll-behavior: contain; }
.wcsd-right__footer{
  flex:0 0 auto;
  padding-top:10px;
  padding-bottom:12px;
  border-top:1px solid rgba(0,0,0,.06);
  background: linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,1));
}
.wcsd-right__footer .wcsd-selected{ margin-top:0; }

@media (min-width: 1101px){
  /* Desktop: a single scrollbar should move BOTH canvas + tools */
  .wcsd-right__footer{ position: relative; }
  .wcsd-right__scroll{ flex:0 0 auto; min-height:auto; overflow:visible; padding-right:0; }
}


.wcsd-canvas-wrap{
  background: radial-gradient(1200px 500px at 60% -20%, rgba(0,0,0,.05), transparent 55%),
              linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,.02));
  border:1px solid rgba(0,0,0,.06);
  border-radius: var(--ac-radius);
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  /* Center content so the shirt remains fully visible on low-height screens */
  justify-content:center;
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow:hidden;
  gap:12px;
}

@media (min-width: 1101px){
  .wcsd-canvas-wrap{ justify-content:flex-start; flex:0 0 auto; min-height:auto; max-height:none; overflow:visible; }
}

/* Branding under the shirt (non-interactive) */
.wcsd-brand{ width:100%; display:flex; justify-content:center; padding:2px 0 6px; pointer-events:none; }
.wcsd-brand img{ width:78%; max-width:520px; height:auto; opacity:.78; user-select:none; }

/* Watermark branding (used on short/mobile viewports without consuming layout height) */
.wcsd-brand-watermark{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:none;
  justify-content:center;
  pointer-events:none;
  z-index:2;
}
.wcsd-brand-watermark__img{
  width:56%;
  max-width:340px;
  height:auto;
  opacity:.74;
  user-select:none;
}

@media (max-width: 980px){
  .wcsd-brand img{ width:86%; max-width:420px; opacity:.82; }
}

/* Short viewports (common 15" laptops): prioritize the editor over decorative branding */
@media (max-height: 820px){
  .wcsd-brand{ display:none; }
  .wcsd-brand-watermark{ display:flex; }
}

@media (max-width: 980px){
  .wcsd-brand-watermark{ display:flex; }
  .wcsd-brand-watermark__img{ width:62%; max-width:300px; opacity:.78; }
}

@media (max-width: 520px){
  .wcsd-brand-watermark__img{ width:72%; max-width:260px; }
}
/* The shirt mockup sits behind the Fabric canvas; keep the canvas transparent so it doesn't "cover" the shirt */
canvas{ border-radius: var(--ac-radius); background:transparent; border:none; }


/* Fabric.js wrappers: prevent theme CSS collisions and ensure interactions work */
.wcsd-left{ position: relative; z-index: 1; }
.wcsd-right{ position: relative; z-index: 5; } /* keep controls above if the canvas overflows on smaller widths */
.wcsd-canvas-wrap{ position: relative; z-index: 1; }
.wcsd-canvas-wrap .canvas-container{ position: relative !important; z-index: 1; }
.wcsd-canvas-wrap .upper-canvas{ pointer-events: auto !important; touch-action: none; user-select:none; -webkit-user-select:none;   background: transparent !important;
}
.wcsd-canvas-wrap canvas{ touch-action:none; user-select:none; -webkit-user-select:none; }

/* Quick actions overlay (Undo/Redo) – desktop + mobile */
.wcsd-mobile-toolbar{
  position:absolute;
  top:10px;
  left:10px;
  z-index: 25;
  display:flex;
  gap:8px;
}
.wcsd-icon-btn{
  width:34px;
  height:34px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.wcsd-icon-btn svg{ width:16px; height:16px; fill: rgba(0,0,0,.82); }
.wcsd-icon-btn:active{ transform: translateY(1px); }
.wcsd-icon-btn:disabled{ opacity:.45; cursor:not-allowed; }


.wcsd-field label{
  font-weight:800;
  display:block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.02em;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}
.wcsd-field small{ display:block; color: var(--ac-muted); margin-top:7px; font-size:12px; }
.wcsd-field input[type="text"],
.wcsd-field input[type="number"],
.wcsd-field select{
  width:100%;
  padding:10px 12px;
  border-radius: var(--ac-radius-sm);
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* File input (avoid cropped "Ningún archivo seleccionado" in some themes/browsers) */
.wcsd-field input[type="file"]{
  width:100%;
  box-sizing:border-box;
  padding:8px 10px;
  border-radius: var(--ac-radius-sm);
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  font-size:13px;
  line-height:1.35;
}
.wcsd-field input[type="file"]::file-selector-button{
  margin-right:10px;
  border-radius: var(--ac-pill);
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:7px 10px;
  font-weight:800;
  cursor:pointer;
}
.wcsd-field input[type="file"]::-webkit-file-upload-button{
  margin-right:10px;
  border-radius: var(--ac-pill);
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  padding:7px 10px;
  font-weight:800;
  cursor:pointer;
}

.wcsd-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
#wcsd_curvature{ width:100%; }

.wcsd-sep{ border:0; border-top:1px solid rgba(0,0,0,.06); margin:6px 0; }

.wcsd-actions{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wcsd-actions .button{
  width: 100%;
  min-width: 0;
  padding-left: 10px !important;
  padding-right: 10px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Shapes toolbar: small icon buttons to save space */
.wcsd-actions--shapes{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.wcsd-actions--shapes .button{
  width:auto;
  overflow:visible;
  text-overflow:clip;
}
.wcsd-actions--shapes .wcsd-shape-btn{
  width:42px;
  height:38px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px !important;
  font-size:18px;
  line-height:1;
}
.wcsd-actions--shapes .wcsd-shape-btn span{ display:block; transform: translateY(-1px); }

/* Unicode square glyph tends to render smaller than other shapes in many fonts.
   We scale it slightly so it matches the visual weight/size of the other icons. */
#wcsd_add_square span{ transform: translateY(-1px) scale(1.18); }

.wcsd-right .button,
.wcsd-right .button.button-primary{
  border-radius: var(--ac-pill) !important;
  padding:10px 14px !important;
  font-weight:800;
  border:1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.03) !important;
  color:#0b0b0f !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.03) !important;
}
.wcsd-right .button:hover{ background: rgba(0,0,0,.06) !important; transform: translateY(-1px); }
.wcsd-right .button.button-primary{
  background:#0b0b0f !important;
  color:#fff !important;
  border-color:#0b0b0f !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

.wcsd-selected{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: var(--ac-radius-sm);
  border:1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}
.wcsd-selected__dot{ width:10px; height:10px; border-radius: var(--ac-pill); background: rgba(0,0,0,.22); }
.wcsd-selected.is-active .wcsd-selected__dot{ background:#0b0b0f; }
.wcsd-selected__label{ font-size:13px; font-weight:800; color: rgba(0,0,0,.82); }

.wcsd-save{
  position: static;
  padding-top: 8px;
}
#wcsd_status{ margin-top:10px; font-size:12px; color: var(--ac-muted); }
#wcsd_status.is-error{ color:#b00020; }

.wcsd-hint{
  padding:10px 12px;
  border-radius: var(--ac-radius-sm);
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
  font-size:12px;
  color: rgba(0,0,0,.72);
}

/* Switch */
.wcsd-row{ display:flex; align-items:center; gap:10px; }
.wcsd-switch{ position:relative; display:inline-block; width:44px; height:26px; }
.wcsd-switch input{ opacity:0; width:0; height:0; }
.wcsd-slider{ position:absolute; cursor:pointer; inset:0; background: rgba(0,0,0,.18); transition:.18s ease; border-radius: var(--ac-pill); }
.wcsd-slider:before{
  position:absolute; content:"";
  height:20px; width:20px; left:3px; bottom:3px;
  background:#fff; transition:.18s ease;
  border-radius: var(--ac-pill);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.wcsd-switch input:checked + .wcsd-slider{ background:#0b0b0f; }
.wcsd-switch input:checked + .wcsd-slider:before{ transform: translateX(18px); }
.wcsd-switch-label{ font-size:12px; color: var(--ac-muted); }

@media (max-width: 1100px){
  .wcsd-modal{ padding:0; overflow:hidden; }
  .wcsd-vscroll{ display:none !important; }

  .wcsd-modal__panel{ margin:0; border-radius:0; max-width:none; height:100vh; max-height:100vh; display:flex; flex-direction:column; }
  @supports (height: 100dvh){
    .wcsd-modal__panel{ height:100dvh; max-height:100dvh; }
  }

  .wcsd-modal__body{
    flex:1 1 auto;
    min-height:0;
    position:relative;
    overflow:hidden;
    gap:0;
    padding:12px;
  }

  .wcsd-left{
    flex:1 1 auto;
    min-width:0;
    min-height:0;
    padding-bottom:86px;
  }

  .wcsd-brand{ display:none; }

  .wcsd-right{
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    width:auto;
    height:min(250px,36vh);
    max-height:56vh;
    transform:translateY(calc(100% - 56px));
    transition:transform .22s ease;
    box-shadow:0 18px 50px rgba(0,0,0,.18);
    border-radius:18px;
    background:#fff;
    z-index:30;
    overflow:hidden;
  }

  .wcsd-right.is-open{ transform:translateY(0); }

  .wcsd-right__scroll{ padding:10px 12px 12px; -webkit-overflow-scrolling:touch; }

  .wcsd-mobile-minimal .wcsd-controls > .wcsd-mobile-hide-main{ display:none !important; }
  .wcsd-mobile-minimal .wcsd-controls > .wcsd-mobile-keep-main{ display:block !important; }
  .wcsd-mobile-minimal .wcsd-controls > .wcsd-mobile-keep-main.wcsd-save{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(0,0,0,.08);
  }

  .wcsd-mobile-minimal .wcsd-controls #wcsd_status{ display:none !important; }
  .wcsd-mobile-minimal #wcsd_save_design,
  .wcsd-mobile-minimal #wcsd_save{ width:100%; }

  .wcsd-drawer-handle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:56px;
    padding:0 14px;
    border:0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid rgba(0,0,0,.06);
    cursor:pointer;
    font-weight:700;
    border-radius:0;
  }

  .wcsd-drawer-title{ font-size:14px; letter-spacing:.2px; }
  .wcsd-drawer-chev{ font-size:16px; opacity:.7; transition:transform .22s ease; }
  .wcsd-right.is-open .wcsd-drawer-chev{ transform:rotate(180deg); }

  .wcsd-fab-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;
    right:10px;
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.14);
    background:rgba(255,255,255,.9);
    box-shadow:0 8px 20px rgba(0,0,0,.14);
    z-index:89;
  }

  .wcsd-fab-toggle__icon{
    width:18px;
    height:14px;
    display:inline-flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .wcsd-fab-toggle__icon span{
    display:block;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#1f2937;
    transition:transform .18s ease, opacity .18s ease;
  }

  .wcsd-fab-toggle.is-open .wcsd-fab-toggle__icon span:nth-child(1){
    transform:translateY(6px) rotate(45deg);
  }

  .wcsd-fab-toggle.is-open .wcsd-fab-toggle__icon span:nth-child(2){
    opacity:0;
  }

  .wcsd-fab-toggle.is-open .wcsd-fab-toggle__icon span:nth-child(3){
    transform:translateY(-6px) rotate(-45deg);
  }

  .wcsd-root.is-mobile .wcsd-fabbar,
  .wcsd-root.is-mobile .wcsd-fabmenu,
  .wcsd-root.is-mobile .wcsd-actions-sheet{
    opacity:0;
    pointer-events:none;
    transform:translateX(14px);
    transition:opacity .18s ease, transform .18s ease;
  }

  .wcsd-root.is-mobile.wcsd-fab-open .wcsd-fabbar,
  .wcsd-root.is-mobile.wcsd-fab-open .wcsd-actions-sheet{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }

  .wcsd-root.is-mobile.wcsd-fab-open .wcsd-fabmenu.is-open{
    opacity:1;
    pointer-events:auto;
    transform:translateX(0);
  }

  .wcsd-fabbar{
    position:absolute;
    top:10px;
    right:10px;
    left:auto;
    bottom:auto;
    transform:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:6px;
    border-radius:999px;
    background:rgba(255,255,255,.72);
    border:1px solid rgba(255,255,255,.78);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 10px 26px rgba(0,0,0,.14);
    z-index:86;
  }

  .wcsd-fabbtn{
    width:50px;
    height:50px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.12);
    background:rgba(255,255,255,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    color:rgba(0,0,0,.85);
    font-size:18px;
    font-weight:800;
    cursor:pointer;
    user-select:none;
  }

  .wcsd-fabbtn svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .wcsd-fabbtn .wcsd-fabicon-img{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
    pointer-events:none;
    user-select:none;
  }
  .wcsd-fabbtn .wcsd-fabicon-save,
  .wcsd-fabbtn .wcsd-fabicon-image,
  .wcsd-fabbtn .wcsd-fabicon-reset,
  .wcsd-fabbtn .wcsd-fabicon-color,
  .wcsd-fabbtn .wcsd-fabicon-shapes{
    width:32px;
    height:32px;
  }

  .wcsd-fabtxt{ font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"DejaVu Sans",sans-serif; font-weight:900; }
  .wcsd-fabbtn:active{ transform:translateY(1px); }
  .wcsd-fabbtn[disabled]{ opacity:.45; cursor:not-allowed; }

  .wcsd-fabmenu{
    position:absolute;
    top:10px;
    right:72px;
    display:none;
    flex-direction:column;
    gap:7px;
    padding:8px;
    border-radius:14px;
    background:rgba(255,255,255,.75);
    border:1px solid rgba(255,255,255,.82);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    box-shadow:0 12px 28px rgba(0,0,0,.16);
    z-index:87;
    min-width:148px;
  }

  .wcsd-fabmenu.is-open{ display:flex; }

  .wcsd-fabmenu__btn{
    width:100%;
    border:1px solid rgba(0,0,0,.10);
    background:rgba(255,255,255,.94);
    border-radius:11px;
    padding:9px 10px;
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:700;
    font-size:13px;
    cursor:pointer;
    color:rgba(0,0,0,.86);
    text-align:left;
    user-select:none;
  }

  .wcsd-fabmenu__btn svg{
    width:17px;
    height:17px;
    stroke:currentColor;
    fill:none;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:0 0 auto;
  }

  .wcsd-fabmenu__btn:active{ transform:translateY(1px); }
  .wcsd-fabmenu__btn[disabled]{ opacity:.45; cursor:not-allowed; }

  .wcsd-actions-sheet{
    position:absolute;
    left:10px;
    right:80px;
    bottom:10px;
    z-index:90;
    max-height:min(52vh,430px);
    border:1px solid rgba(0,0,0,.10);
    border-radius:14px;
    background:#fff;
    box-shadow:0 14px 30px rgba(0,0,0,.2);
    overflow:hidden;
  }

  .wcsd-actions-sheet__content{ position:relative; padding:10px; max-height:inherit; display:flex; flex-direction:column; }
  .wcsd-sheet-title{ margin:0 30px 8px 2px; font-size:14px; font-weight:800; }
  .wcsd-actions-sheet__body{ overflow:auto; -webkit-overflow-scrolling:touch; }

  .wcsd-sheet-close{
    position:absolute;
    top:8px;
    right:8px;
    width:28px;
    height:28px;
    border:0;
    border-radius:999px;
    background:#f3f4f6;
    color:#111827;
    font-size:20px;
    line-height:1;
    cursor:pointer;
  }

  .wcsd-actions-sheet .wcsd-action-buttons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .wcsd-actions-sheet .wcsd-btn,
  .wcsd-actions-sheet .wcsd-btn-save{ width:100%; }

  .wcsd-actions-sheet .wcsd-shape-tools,
  .wcsd-actions-sheet .wcsd-shape-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }

  .wcsd-actions-sheet .wcsd-font-row{ grid-template-columns:1fr 1fr; }
  .wcsd-actions-sheet .wcsd-text-style-group{ justify-content:flex-start; }
  .wcsd-actions-sheet .wcsd-upload-wrap{ display:flex; flex-direction:column; gap:6px; }

  /* Texto (mobile): CTA justo bajo input + toggle curvado junto a curvatura */
  .wcsd-actions-sheet .wcsd-addtext-field label{ display:none !important; }
  .wcsd-actions-sheet .wcsd-addtext-field{ margin-top:8px; }
  .wcsd-actions-sheet .wcsd-addtext-field #wcsd_add_text{ width:100%; min-height:44px; }
  .wcsd-actions-sheet .wcsd-textcolor-field{ margin-top:10px; }
  .wcsd-actions-sheet .wcsd-curved-field .wcsd-row{ margin-bottom:8px; }
  .wcsd-actions-sheet .wcsd-curved-field .wcsd-grid2{ margin-top:0 !important; }

  .wcsd-mobile-toolbar{ top:14px; left:14px; gap:10px; }
  .wcsd-icon-btn{ width:44px; height:44px; }
  .wcsd-icon-btn svg{ width:20px; height:20px; }
  .wcsd-actions--shapes .wcsd-shape-btn{ width:50px; height:46px; font-size:20px; }
}

@media (max-width: 520px){
  .wcsd-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wcsd-canvas-slot{
  /* Match the Fabric canvas size so the mockup doesn't "peek" outside */
  width:min(680px, 100%);
  margin:0 auto;
  display:flex;
  justify-content:center;
  position:relative;
}

/* Capa de camiseta (DOM) para mejorar rendimiento al mover/rotar/escalar */
.wcsd-shirt-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* Como en versiones anteriores: la camiseta rellena el slot y se centra sin forzar el tamaño por JS */
  object-fit:contain;
  object-position:center;
  z-index:0;
  pointer-events:none;
  user-select:none;
}


.wcsd-canvas-slot .canvas-container{
  position:relative;
  z-index:2;
}



/* Shirt color palette (predefined mockups) */
.wcsd-palette{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.wcsd-swatch{width:34px;height:34px;border-radius:999px;border:1px solid rgba(0,0,0,.25);box-shadow:0 1px 0 rgba(0,0,0,.08);cursor:pointer;padding:0;}
.wcsd-swatch.is-active{outline:3px solid rgba(0,0,0,.18);border-color:rgba(0,0,0,.45);}
.wcsd-swatch[data-color="white"]{background:#ffffff;}
.wcsd-swatch[data-color="black"]{background:#1c1c20;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="purple"]{background:#7428b4;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="navy"]{background:#0b1f3b;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="red"]{background:#e53935;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="orange"]{background:#fb8c00;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="green"]{background:#43a047;border-color:rgba(255,255,255,.35);}
.wcsd-swatch[data-color="yellow"]{background:#fdd835;border-color:rgba(0,0,0,.25);}

@media (max-width: 520px){
  .wcsd-swatch{width:40px;height:40px;}
}




/* Texto curvado: cuando está desactivado, dejamos los controles visibles pero inactivos */
.wcsd-curved.is-disabled .wcsd-grid2{ opacity: .55; }
#wcsd_curvature:disabled{ opacity: .6; cursor: not-allowed; }
.wcsd-switch input:disabled + .wcsd-slider{ opacity: .55; cursor: not-allowed; }

/* Shapes UI */
.wcsd-actions--shapes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wcsd-range{ display:flex; align-items:center; gap:10px; }
.wcsd-range input[type="range"]{ width:100%; }
.wcsd-range__val{ min-width:26px; text-align:right; font-weight:900; font-size:12px; color: rgba(0,0,0,.72); }
#wcsd_shape_fill_color:disabled{ opacity:.6; cursor:not-allowed; }
#wcsd_shape_fill_enabled:disabled + .wcsd-slider{ opacity:.55; cursor:not-allowed; }



/* --- Tipografías: barra compacta + estilo (B/I/U) + slider --- */
.wcsd-fontbar{
  display:flex;
  align-items:center;
  gap:8px;
}
.wcsd-font-select{
  flex:1 1 auto;
  min-width:0;
  height:34px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.1;
}
.wcsd-textstyle{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.wcsd-style-btn{
  width:34px;
  height:34px;
  padding:0 !important;
  border-radius: 999px !important;
  border:1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.03) !important;
  color:#0b0b0f !important;
  font-weight:900 !important;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
}
.wcsd-style-btn i{ font-style: italic; }
.wcsd-style-btn u{ text-decoration: underline; text-underline-offset: 3px; }
.wcsd-style-btn.is-active{
  background:#0b0b0f !important;
  border-color:#0b0b0f !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.16) !important;
}
.wcsd-font-slider{ margin-top:8px; flex-direction:column; align-items:stretch; gap:6px; }
#wcsd_font_slider{ touch-action: pan-x; }
.wcsd-font-slider .wcsd-range__val{
  min-width: 0;
  text-align:left;
  font-weight:900;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width: 520px){
  .wcsd-style-btn{ width:40px; height:40px; }
  .wcsd-font-select{ height:40px; }
  .wcsd-font-slider .wcsd-range__val{ min-width: 110px; }
}

/* --- Unified desktop scroll mode (theme-safe) ---
   Some themes or viewport edge cases may keep the right panel scrollable and clip the canvas.
   When JS adds .wcsd-unified-scroll to .wcsd-modal, we force a single scrollbar that moves
   BOTH the canvas (left) and the options (right). */
.wcsd-modal.wcsd-unified-scroll .wcsd-modal__body{
  overflow:auto !important;
}
.wcsd-modal.wcsd-unified-scroll .wcsd-right__scroll{
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  padding-right:0 !important;
}
.wcsd-modal.wcsd-unified-scroll .wcsd-canvas-wrap{
  flex:0 0 auto !important;
  min-height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  justify-content:flex-start !important;
}

/* Branding: keep the AdroCrea logo BELOW the shirt (never overlay on the design area). */
.wcsd-brand{ display:flex !important; }
.wcsd-brand-watermark{ display:none !important; }


/* --- Mobile/Tablet polish 1.5.38 (desktop untouched) --- */
@media (max-width: 1100px){
  /* Keep canvas dominant and visible */
  .wcsd-modal__body{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .wcsd-modal__panel.is-mobile .wcsd-canvas-wrap{
    min-height: clamp(340px, 56dvh, 620px);
  }

  /* Minimal drawer footprint: only shirt colors + Save */
  .wcsd-right{
    height: clamp(132px, 28dvh, 220px);
    max-height: 32dvh;
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .wcsd-right__scroll{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .wcsd-mobile-minimal .wcsd-controls > .wcsd-mobile-keep-main.wcsd-save{
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 8px;
    padding: 10px 0 calc(8px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, rgba(255,255,255,.9), rgba(255,255,255,1));
    border-top: 1px solid rgba(0,0,0,.08);
  }

  .wcsd-mobile-minimal .wcsd-controls #wcsd_save_design,
  .wcsd-mobile-minimal .wcsd-controls #wcsd_save{
    min-height: 44px;
  }

  /* Floating rail: slimmer and slightly transparent */
  .wcsd-fabbar{
    gap: 6px;
    padding: 4px;
    border-radius: 18px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.88);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .wcsd-fabbtn{
    width: 44px;
    height: 44px;
  }

  .wcsd-fabmenu{
    right: 60px;
    min-width: 136px;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.88);
  }

  .wcsd-fabmenu__btn{
    min-height: 44px;
    padding: 9px 10px;
  }

  /* Floating tool sheet usability */
  .wcsd-actions-sheet{
    max-height: min(55dvh, 470px);
    bottom: calc(10px + env(safe-area-inset-bottom));
  }

  .wcsd-actions-sheet__content,
  .wcsd-actions-sheet__body{
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure touch targets are finger-friendly */
  .wcsd-icon-btn,
  .wcsd-style-btn,
  .wcsd-actions-sheet button,
  .wcsd-actions-sheet input,
  .wcsd-actions-sheet select,
  .wcsd-swatch{
    min-height: 44px;
  }

  .wcsd-swatch{
    min-width: 44px;
  }
}

/* Mobile drawer simplified: colors + upload + reset + save */
@media (max-width: 1100px){
  .wcsd-modal__panel.is-mobile .wcsd-right{
    max-height:84px !important;
    background:#f8f8f8;
    border-radius:22px 22px 0 0;
  }

  .wcsd-modal__panel.is-mobile .wcsd-right.is-open{
    max-height:min(46dvh,320px) !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-right__scroll{
    max-height:0 !important;
    overflow:hidden;
  }

  .wcsd-modal__panel.is-mobile .wcsd-right.is-open .wcsd-right__scroll{
    max-height:272px !important;
    overflow-y:auto !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-mobile-minimal > .wcsd-mobile-hide-main,
  .wcsd-modal__panel.is-mobile .wcsd-mobile-minimal-footer > .wcsd-mobile-hide-main{
    display:none !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-mobile-minimal-footer{
    padding:12px 14px 14px !important;
    border-top:1px solid #ececec;
    background:transparent;
  }

  .wcsd-modal__panel.is-mobile .wcsd-mobile-minimal-footer .wcsd-save{
    display:flex !important;
    flex-direction:column;
    gap:10px;
    margin:0 !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-mobile-minimal-footer #wcsd_status{
    display:none !important;
  }

  .wcsd-modal__panel.is-mobile #wcsd_reset_mobile,
  .wcsd-modal__panel.is-mobile #wcsd_save_design,
  .wcsd-modal__panel.is-mobile #wcsd_save{
    width:100% !important;
    max-width:none !important;
  }

  .wcsd-modal__panel.is-mobile #wcsd_reset_mobile{
    background:#fff !important;
    color:#1a1c24 !important;
    border:1px solid #d9dce4 !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-right__footer .wcsd-selected,
  .wcsd-modal__panel.is-mobile .wcsd-right__footer .wcsd-actions{
    display:none !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-fabbar{
    width:58px !important;
    right:8px !important;
    background:rgba(255,255,255,.78) !important;
    backdrop-filter:saturate(1.1) blur(2px);
    -webkit-backdrop-filter:saturate(1.1) blur(2px);
  }
}


/* ===== Mobile fallback by class (sin depender de @media) ===== */
.wcsd-root.is-mobile .wcsd-fab-toggle {
  display: inline-flex !important;
  position: absolute !important;
  top: 12px !important;
  right: 10px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.70) !important;
  z-index: 1200 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.wcsd-root.is-mobile .wcsd-fabbar {
  display: flex !important;
  position: absolute !important;
  top: 62px !important;
  right: 10px !important;
  width: 52px !important;
  border-radius: 26px !important;
  background: rgba(255,255,255,.62) !important;
  z-index: 1190 !important;
  transition: opacity .18s ease, transform .18s ease;
}
.wcsd-root.is-mobile:not(.wcsd-fab-open) .wcsd-fabbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(10px) !important;
}
.wcsd-root.is-mobile.wcsd-fab-open .wcsd-fabbar {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
.wcsd-root.is-mobile .wcsd-fabmenu {
  display: none;
  position: absolute;
  top: 12px;
  right: 66px;
  z-index: 1210;
}
.wcsd-root.is-mobile .wcsd-fabmenu.is-open {
  display: flex !important;
}

/* ===== Mobile drawer disabled: tools only via floating menu/sheets ===== */
@media (max-width: 1100px){
  .wcsd-modal__panel.is-mobile .wcsd-right.wcsd-mobile-drawer-off{
    display:none !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-left{
    padding-bottom: 10px !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-fab-toggle{
    z-index: 1400 !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-fabbar{
    z-index: 1390 !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-fabmenu{
    top: 62px !important;
    right: 66px !important;
    z-index: 1410 !important;
  }

  .wcsd-modal__panel.is-mobile .wcsd-actions-sheet{
    left: 10px !important;
    right: 74px !important;
    bottom: 10px !important;
    max-height: min(62dvh, 540px) !important;
    z-index: 1420 !important;
  }
}

/* --- 1.5.48: Iconos XL en menú flotante mobile/tablet (desktop intacto) --- */
@media (max-width: 1100px){
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-img,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-save,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-image,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-reset,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-color,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-shapes{
    width: 40px !important;
    height: 40px !important;
  }

  .wcsd-root.is-mobile .wcsd-fabbtn svg{
    width: 28px !important;
    height: 28px !important;
  }

  .wcsd-root.is-mobile .wcsd-fabmenu__btn svg{
    width: 19px !important;
    height: 19px !important;
  }
}

/* Refuerzo en vista XL de móvil/tablet */
@media (min-width: 768px) and (max-width: 1100px){
  .wcsd-root.is-mobile .wcsd-fabbtn{
    width: 50px !important;
    height: 50px !important;
  }

  .wcsd-root.is-mobile .wcsd-fabbar{
    width: 60px !important;
  }
}


/* --- 1.5.52: Logo sincronizado igual que escritorio en tablet/móvil --- */
.wcsd-canvas-wrap .wcsd-brand{
  display:flex !important;
  width:min(680px, 100%) !important;
  margin:6px auto 6px !important;
  padding:0 !important;
  justify-content:center !important;
  pointer-events:none;
}
.wcsd-canvas-wrap .wcsd-brand__img{
  width:auto;
  max-width:100%;
  height:auto;
  opacity:.78;
  user-select:none;
}
.wcsd-canvas-wrap .wcsd-brand-watermark{
  display:none !important;
}

/* --- 1.5.59: Forzar tamaño visible de iconos PNG en menú flotante (tablet/móvil) --- */
@media (max-width: 1100px){
  .wcsd-root.is-mobile .wcsd-fabbtn{
    width: 56px !important;
    height: 56px !important;
    overflow: hidden !important;
  }

  .wcsd-root.is-mobile .wcsd-fabbar{
    width: 66px !important;
  }

  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-img,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-save,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-image,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-reset,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-color,
  .wcsd-root.is-mobile .wcsd-fabbtn .wcsd-fabicon-shapes{
    width: 30px !important;
    height: 30px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    transform: scale(1.3) !important; /* Compensa iconos con demasiado margen interno */
    transform-origin: center center !important;
  }

  .wcsd-root.is-mobile .wcsd-fabbtn svg{
    width: 34px !important;
    height: 34px !important;
  }
}