/*! lcbad | Editor de Dedicatoria (Invitado) — V4.3 (foto contextual + contain 60%) */
:root{
  --bg:#F6F8FB; --panel:#FFFFFF; --border:#E5EAF1; --text:#0F172A; --help:#5B6573;
  --primary:#2563EB; --success:#10B981; --danger:#DC2626; --ghost:#CBD5E1;
}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:400 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
*{box-sizing:border-box}

.lcbad-editor{display:grid;grid-template-columns:1fr 560px;gap:12px;min-height:100vh;padding:24px}
.lcbad-canvas-region{position:relative;display:flex;align-items:center;justify-content:center;overflow:height:hidden}
.lcbad-canvas-wrap{position:relative;border:2px solid var(--border);border-radius:16px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.15);overflow:hidden}
.lcbad-safe-zone{position:absolute;pointer-events:none;border:1px dashed var(--ghost)}

.lcbad-fab-group{position:absolute;top:12px;left:12px;display:flex;gap:8px;z-index:3}
.btn-pill{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--ghost);background:var(--panel);color:var(--text);cursor:pointer;user-select:none;font-weight:600}
.btn-pill.primary{background:var(--primary);color:#fff;border-color:transparent}
.btn-pill.ghost{background:var(--panel);color:var(--text)}
.btn-pill:disabled{opacity:.6;cursor:not-allowed}

.lcbad-side-panel{background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:16px;overflow:hidden;max-height:calc(100vh - 48px);display:flex;flex-direction:column}
.lcbad-side-title{font-weight:700;font-size:18px;margin-bottom:10px}

.lcbad-tabs{display:flex;gap:8px}
.lcbad-tabs .segmented{display:flex;gap:6px;background:var(--panel);border:2px solid var(--border);border-radius:16px;width:100%;padding:4px}
.segmented button{flex:1;border:none;border-radius:12px;background:transparent;color:var(--text);padding:8px 10px;font-weight:700;cursor:pointer}
.segmented button.active{background:var(--primary);color:#fff}

.lcbad-tab-body{position:relative;margin-top:5px;background:#FAFBFF;border:1px solid var(--border);border-radius:12px;padding:8px 12px 12px;overflow:auto;height:100%}
.tab-panel[hidden]{display:none!important}

.lcbad-adjust-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.lcbad-footer{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}

.lcbad-grid-stickers{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.lcbad-grid-stickers img{width:100%;height:84px;object-fit:contain;background:#fff;border:1px solid var(--border);border-radius:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lcbad-grid-stickers img:hover{outline:2px solid var(--primary)}

.lcbad-bg-carousel{display:flex;gap:8px;overflow:auto;padding-bottom:4px}
.lcbad-bg-thumb{flex:0 0 72px;height:56px;border:1px solid var(--border);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lcbad-bg-thumb img{max-width:100%;max-height:100%}
.lcbad-bg-thumb.active{outline:2px solid var(--primary)}

.lcbad-mobile-adjust{margin-top:12px;background:var(--panel);border:2px solid var(--border);border-radius:16px;padding:10px 12px 12px;box-shadow:0 -10px 30px rgba(0,0,0,.06)}
.lcbad-adjust-body{position:relative;margin-top:4px;max-height:min(32vh,300px);overflow:auto;padding-right:10px;background:#FAFBFF;border:1px solid var(--border);border-radius:12px;padding:12px}
.lcbad-scroll-track{position:absolute;top:10px;right:4px;width:3px;bottom:10px;border-radius:2px;background:var(--ghost)}
.lcbad-scroll-thumb{position:absolute;top:10px;right:4px;width:3px;height:42px;border-radius:2px;background:var(--primary)}

button.lcbad-ghost{background:var(--panel);border:1px solid var(--ghost);color:var(--text);border-radius:18px;padding:10px 14px;cursor:pointer;font-weight:600}
button.lcbad-primary{background:var(--primary);border:1px solid transparent;color:#fff;border-radius:18px;padding:10px 14px;cursor:pointer;font-weight:700}
button.lcbad-danger{background:var(--danger);border:1px solid transparent;color:#fff;border-radius:18px;padding:10px 14px;cursor:pointer;font-weight:700}
input[type="range"]{width:100%}

/* Responsivo */
@media (max-width:1279px){.lcbad-editor{grid-template-columns:1fr 520px}}
@media (max-width:1023px){.lcbad-editor{grid-template-columns:1fr 440px}}
@media (max-width:767px){
  .lcbad-editor{grid-template-columns:1fr;gap:12px;padding:6px}
  .lcbad-side-panel{display:none}
  .lcbad-canvas-region{height:70vh}
  .lcbad-mobile-adjust{display:block}
}
@media (min-width:768px){.lcbad-mobile-adjust{display:none}}


/* Ajuste final móvil/tablet: acercar pestañas al canvas */
@media (max-width:1024px){
  .lcbad-editor{ gap: 0px; }                  /* 4–8px según gusto */
  .lcbad-mobile-adjust{
    margin-top: 0px;                          /* 0–8px */
    padding-top: 6px;                         /* 4–8px */
  }

  /* Opcionales:
  .lcbad-canvas-region{ height: 70vh; }       // 70–74vh
  .lcbad-tabs .segmented{ padding: 2px; }     // compacta la franja
  .segmented button{ padding: 6px 10px; }     // compacta cada pestaña
  */
}
}

/* Oculta el input de archivo de forma accesible (mejor que display:none para iOS) */
.lcbad-file-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Botón tipo píldora */
.lcbad-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 9999px;
  border: 1px solid #2563EB;     /* ajusta a tu color de marca */
  background: #fff;
  color: #2563EB;
  font-weight: 300;
  cursor: pointer;
  user-select: none;
  line-height: 1;
  min-height: 44px;               /* mejor usabilidad móvil */
  transition: transform .05s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.lcbad-btn-pill:hover { background: #f5f7ff; }
.lcbad-btn-pill:active { transform: scale(.60); }
.lcbad-btn-pill:focus { outline: 2px solid currentColor; outline-offset: 2px; }

.lcbad-file-hidden {
  display: none; /* oculta el campo */
}
/* Etiqueta tipo píldora en estilo primario (mismo azul que botones) */
.lcbad-btn-pill.lcbad-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Variante compacta para bajar altura del botón "Subir Foto" */
.lcbad-btn-pill--sm {
  padding: .45rem .85rem;  /* antes .6rem 1rem */
  min-height: 36px;        /* antes 44px */
  font-weight: 600;        /* un poco más marcado para legibilidad */
}


/* Asegura wrap relativo (por si algún build lo pierde) */
.lcbad-bg-wrap { position: relative; overflow:hidden; }

/* El wrap debe ser posicionamiento relativo */
.lcbad-bg-wrap { position: relative; }

/* Los fades laterales NO deben bloquear clics */
.lcbad-bg-wrap::before,
.lcbad-bg-wrap::after { pointer-events: none; z-index: 1; }

/* Botones por encima de todo */
.lcbad-bg-nav { z-index: 3; }

.lcbad-bg-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.15);
  background: rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.lcbad-bg-nav:hover { background: #fff; }
.lcbad-bg-nav:disabled { opacity: .4; cursor: default; }

.lcbad-bg-prev { left: 4px; }
.lcbad-bg-next { right: 4px; }

/* Ocultar scrollbar (solo flechas) */
.lcbad-bg-carousel{ scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lcbad-bg-carousel::-webkit-scrollbar{ display:none; }