:root{
  --bbbd-primary:#C2002F;
  --bbbd-text:#111827;
  --bbbd-muted:#6b7280;
  --bbbd-border:#e5e7eb;
  --bbbd-card:#ffffff;
  --bbbd-radius:16px;
  --bbbd-shadow:0 10px 30px rgba(0,0,0,.10);
}

/* FULLSCREEN-FIRST: el diseñador manda */
.bbbd{
  font-family: Arial, sans-serif;
  color:var(--bbbd-text);
  width:100%;
  max-width:1200px;
  margin: 0 auto;
}

/* Barra superior clara y simple */
.bbbd__bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:12px;
  background:var(--bbbd-card);
  border:1px solid var(--bbbd-border);
  border-radius:var(--bbbd-radius);
  box-shadow:var(--bbbd-shadow);
}

.bbbd__barSep{ flex:1; min-width:10px; }

.bbbd-btn{
  appearance:none;
  border:1px solid var(--bbbd-border);
  background:#fff;
  color:var(--bbbd-text);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  line-height:1;
}
.bbbd-btn:hover{ transform: translateY(-1px); }
.bbbd-btn.is-active{ border-color:var(--bbbd-primary); box-shadow:0 0 0 3px rgba(194,0,47,.12); }
.bbbd-btn--ghost{ background:transparent; }
.bbbd-btn--primary{ background:var(--bbbd-primary); border-color:var(--bbbd-primary); color:#fff; }

.bbbd__zoom{ display:flex; align-items:center; gap:8px; font-weight:800; color:var(--bbbd-muted); }
.bbbd__zoom input{ width:160px; }

.bbbd__status{ margin:10px 0 0; color:var(--bbbd-muted); font-size:14px; }
.bbbd__status[data-type="error"]{ color:#b91c1c; }
.bbbd__status[data-type="ok"]{ color:#15803d; }

.bbbd__stage{
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:16px;
  margin-top:14px;
  align-items:start;
}

/* Canvas ocupa lo máximo */
.bbbd__canvasWrap{
  background:#fff;
  border:1px solid var(--bbbd-border);
  border-radius:var(--bbbd-radius);
  box-shadow:var(--bbbd-shadow);
  padding:12px;
  overflow:auto; /* scroll si haces zoom */
  min-height: min(70vh, 820px);
}

.bbbd__canvas{
  display:block;
  background:#fff;
}

/* Dock lateral sencillo */
.bbbd__dock{
  background:#fff;
  border:1px solid var(--bbbd-border);
  border-radius:var(--bbbd-radius);
  box-shadow:var(--bbbd-shadow);
  padding:12px;
  position:sticky;
  top:14px;
}

.bbbd__dockTitle{
  font-weight:900;
  margin: 0 0 10px;
}

.bbbd__palette{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}

.bbbd-color{
  display:flex; align-items:center; gap:8px;
  padding:10px;
  border:1px solid var(--bbbd-border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.bbbd-color.is-active{ border-color:var(--bbbd-primary); box-shadow:0 0 0 3px rgba(194,0,47,.12); }
.bbbd-color__dot{ width:16px;height:16px;border-radius:999px;border:1px solid rgba(0,0,0,.12); }
.bbbd-color__name{ font-size:14px; }

.bbbd__mini{ margin-top:12px; }
.bbbd__miniRow{ display:flex; align-items:center; gap:8px; color:var(--bbbd-muted); font-weight:800; }
.bbbd__swatch{ width:18px;height:18px;border-radius:999px;border:1px solid rgba(0,0,0,.12); display:inline-block; }
.bbbd__currentName{ color:var(--bbbd-text); }

.bbbd-count{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--bbbd-border);
  border-radius:12px;
  margin-top:8px;
  font-weight:800;
}
.bbbd-dot{ width:14px;height:14px;border-radius:999px;border:1px solid rgba(0,0,0,.12); display:inline-block;margin-right:8px; }
.bbbd-muted{ color:var(--bbbd-muted); font-size:14px; font-weight:700; }

.bbbd__previewWrap{ margin-top:14px; }
.bbbd__preview{ width:100%; height:auto; border-radius:14px; border:1px solid var(--bbbd-border); background:#fff; }

/* MOBILE: el panel es lo importante -> canvas full width, dock debajo */
@media (max-width: 980px){
  .bbbd{
    max-width: none;
    margin:0;
  }
  .bbbd__stage{
    grid-template-columns: 1fr;
  }
  .bbbd__canvasWrap{
    min-height: 62vh;
  }
  .bbbd__dock{
    position: static;
  }
  .bbbd__palette{
    grid-template-columns: 1fr 1fr;
  }
}