:root {
  --ink-950:#14171a;
  --ink-900:#1c2024;
  --ink-850:#20252a;
  --ink-800:#282e34;
  --line:#3a4147;
  --line-soft:#2e3439;
  --paper:#eef0f2;
  --paper-line:#d7dbe0;
  --accent:#ff7a1a;
  --accent-dim:#c65f10;
  --text:#e7eaec;
  --text-dim:#9aa3aa;
  --text-faint:#6b7378;
  --danger:#ef5b5b;
  --ok:#37b874;
  --radius:8px;
  --font-ui:'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-mono:'JetBrains Mono', 'Consolas', monospace;
}
/* Ámbito: dentro de PrestaShop, el diseñador vive en un
   contenedor propio (#vagalume-designer-root), no en toda la
   página — sin este "encierro", estas reglas pintarían la tienda
   entera (fondo oscuro, tipografía, etc.), no solo el diseñador. */
#vagalume-designer-root, #vagalume-designer-root * { box-sizing: border-box; }
#vagalume-designer-root {
  margin:0;
  padding: 1rem 0;
  background:var(--ink-950);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:14px;
  /* La colocación a pantalla completa la aplica prestashop-bridge.js
     con position:fixed (es la única forma fiable de ignorar los
     contenedores del tema de PrestaShop). Aquí solo quedan los
     estilos base de aspecto. */
}

/* ===== App shell ===== */
.app {
  display:grid;
  grid-template-rows:auto 1fr;
  height:100vh;
}
/* Dentro de PrestaShop hay cabecera y menú por encima del diseñador,
   así que "100vh" (toda la altura de la pantalla) se queda corto y
   corta la parte de abajo. Se le da una altura generosa propia en vez
   de asumir que es dueño de toda la pantalla. */
#vagalume-designer-root .app {
  height: 85vh;
  min-height: 720px;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.65rem 1.1rem;
  background:var(--ink-900);
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  align-items:baseline;
  gap:0.55rem;
}
.brand .mark {
  width:9px;height:9px;border-radius:2px;
  background:var(--accent);
  display:inline-block;
  transform:rotate(45deg);
}
.brand .name {
  font-weight:600;
  font-size:0.95rem;
  letter-spacing:0.01em;
}
.brand .sub {
  color:var(--text-faint);
  font-size:0.78rem;
}
.topbar .price {
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--text-dim);
}
.topbar .price b {
  color:var(--accent);
  font-weight:600;
}

.workspace {
  display:grid;
  grid-template-columns:280px 1fr 250px;
  min-height:0;
  /* Altura fija (la que deja la cabecera del propio diseñador) para
     que los paneles laterales se ajusten dentro y activen su scroll
     interno en vez de crecer sin fin — si no, el menú de la izquierda
     se salía por abajo sin poder llegar a las últimas opciones. */
  height: calc(100% - 56px);
  overflow: hidden;
}

/* ===== Panels ===== */
.rail {
  background:var(--ink-900);
  border-right:1px solid var(--line);
  overflow-y:auto;
  height:100%;
  padding:1rem;
  /* Barra de scroll siempre visible y con color, para que el cliente
     vea claramente que el panel se puede desplazar hacia abajo. */
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--ink-800);
}
.rail::-webkit-scrollbar { width: 10px; }
.rail::-webkit-scrollbar-track { background: var(--ink-800); }
.rail::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 6px;
  border: 2px solid var(--ink-800);
}
.rail.right {
  border-right:none;
  border-left:1px solid var(--line);
  /* Pequeño hueco a la derecha para que la barra de scroll de este
     panel no quede pegada al borde de la ventana ni la tape el scroll
     de la página. */
  margin-right: 4px;
}
.section {
  margin-bottom:1.35rem;
}
.section-title {
  font-size:0.72rem;
  font-weight:600;
  color:var(--text-faint);
  letter-spacing:0.06em;
  margin-bottom:0.6rem;
}
.field { margin-bottom:0.65rem; }
.field label {
  display:block;
  font-size:0.75rem;
  color:var(--text-dim);
  margin-bottom:0.3rem;
}
.row { display:flex; gap:0.5rem; }
.row > .field { flex:1; }

#vagalume-designer-root input[type="number"],
#vagalume-designer-root input[type="text"],
#vagalume-designer-root select,
#vagalume-designer-root textarea {
  width:100%;
  background:var(--ink-800);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:6px;
  padding:0.45rem 0.55rem;
  font-family:var(--font-mono);
  font-size:0.85rem;
}
#vagalume-designer-root select { font-family:var(--font-ui); }
/* Campos numéricos con botón − a la izquierda y + a la derecha, tipo
   "− [núm] +". El campo es estrecho (para ~4 dígitos) y los botones
   pequeños. Se usan estos en vez de las flechas nativas del navegador
   (que el tema de PrestaShop deja ocultas). */
#vagalume-designer-root .num-stepper {
  display: flex; align-items: stretch;
  width: 100%;
}
#vagalume-designer-root .num-stepper input[type="number"] {
  width: 4.5em; min-width: 0; flex: 0 1 auto;
  text-align: center;
  border-radius: 0;
  padding-left: 2px; padding-right: 2px;
  -moz-appearance: textfield;
}
#vagalume-designer-root .num-stepper input[type="number"]::-webkit-inner-spin-button,
#vagalume-designer-root .num-stepper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
#vagalume-designer-root .num-stepper .num-up,
#vagalume-designer-root .num-stepper .num-down {
  flex: 0 0 auto;
  width: 22px; padding: 0; margin: 0;
  background: var(--ink-850); color: var(--text-dim);
  border: 1px solid var(--line);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#vagalume-designer-root .num-stepper .num-down { border-radius: 6px 0 0 6px; border-right: none; }
#vagalume-designer-root .num-stepper .num-up { border-radius: 0 6px 6px 0; border-left: none; }
#vagalume-designer-root .num-stepper .num-up:hover,
#vagalume-designer-root .num-stepper .num-down:hover { background: var(--accent); color: #1a1200; }

/* Campo de COPIAS: formato vertical (▲ arriba, número en medio, ▼
   abajo) — distinto del "− núm +" horizontal del resto de campos. */
#vagalume-designer-root .num-stepper-vert {
  display: inline-flex; flex-direction: column; align-items: stretch;
  width: 46px; vertical-align: middle;
}
#vagalume-designer-root .num-stepper-vert input[type="number"] {
  width: 100%; text-align: center; border-radius: 0;
  padding: 2px; -moz-appearance: textfield;
  order: 2;
}
#vagalume-designer-root .num-stepper-vert input[type="number"]::-webkit-inner-spin-button,
#vagalume-designer-root .num-stepper-vert input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
#vagalume-designer-root .num-stepper-vert .num-up,
#vagalume-designer-root .num-stepper-vert .num-down {
  width: 100%; height: 16px; padding: 0; margin: 0;
  background: var(--ink-850); color: var(--text-dim);
  border: 1px solid var(--line);
  font-size: 0.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#vagalume-designer-root .num-stepper-vert .num-up { order: 1; border-radius: 6px 6px 0 0; border-bottom: none; }
#vagalume-designer-root .num-stepper-vert .num-down { order: 3; border-radius: 0 0 6px 6px; border-top: none; }
#vagalume-designer-root .num-stepper-vert .num-up:hover,
#vagalume-designer-root .num-stepper-vert .num-down:hover { background: var(--accent); color: #1a1200; }
#vagalume-designer-root textarea { font-family:var(--font-ui); resize:vertical; min-height:3.2em; }
#vagalume-designer-root input:focus,
#vagalume-designer-root select:focus,
#vagalume-designer-root textarea:focus,
#vagalume-designer-root button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:1px;
  border-color:var(--accent);
}

#vagalume-designer-root button {
  font-family:var(--font-ui);
  cursor:pointer;
  border-radius:6px;
  border:1px solid var(--line);
  background:var(--ink-800);
  color:var(--text);
  padding:0.5rem 0.65rem;
  font-size:0.82rem;
  transition:border-color .15s ease, background .15s ease;
}
#vagalume-designer-root button:hover { border-color:var(--text-faint); }
button.block { display:block; width:100%; margin-bottom:0.5rem; }
button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#1a1200;
  font-weight:600;
}
button.primary:hover { background:#ff8a35; }
button.ghost {
  background:transparent;
}
button.danger {
  color:var(--danger);
  border-color:var(--line);
}
button.danger:hover { border-color:var(--danger); }
button:disabled { opacity:0.4; cursor:not-allowed; }

.icon-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.4rem;
}
.icon-btn {
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.4rem;
}
.icon-btn.active {
  border-color:var(--accent);
  color:var(--accent);
}
.icon-btn svg { width:18px; height:18px; }

/* Color swatch trigger */
.color-trigger {
  display:flex;
  align-items:center;
  gap:0.55rem;
  width:100%;
  padding:0.4rem;
}
.swatch-preview {
  width:26px;height:26px;border-radius:5px;
  border:1px solid rgba(255,255,255,0.25);
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.swatch-preview::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--sw-fg) 0 50%, var(--sw-bg) 50% 100%);
}
.color-trigger .label { font-size:0.8rem; color:var(--text-dim); }

/* Text field card */
.text-card {
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.6rem;
  margin-bottom:0.6rem;
}
.text-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:0.4rem;
}
.text-card-head span { font-size:0.72rem; color:var(--text-faint); font-weight:600; }
.icon-x {
  background:none; border:none; color:var(--text-faint);
  padding:0.1rem 0.3rem; font-size:0.95rem; line-height:1;
}
.icon-x:hover { color:var(--danger); }
.justify-row { display:flex; gap:0.35rem; margin-top:0.4rem; }
.justify-row button {
  flex:1; padding:0.35rem; font-size:0.78rem;
}
.justify-row button.active { border-color:var(--accent); color:var(--accent); }

/* ===== Canvas area ===== */
.stage {
  position:relative;
  background:
    linear-gradient(var(--paper-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--paper-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:auto;
  padding:2rem;
}
.stage canvas { box-shadow:0 8px 30px rgba(0,0,0,0.35); }
.stage-hint {
  position:absolute;
  bottom:1rem; left:50%;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--ink-900);
  background:rgba(255,255,255,0.75);
  padding:0.3rem 0.7rem;
  border-radius:20px;
}

/* ===== Design list ===== */
.design-list {
  display:flex;
  flex-direction:column;
  gap:0.55rem;
  margin-bottom:1rem;
}
.design-card {
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.4rem;
  cursor:pointer;
  display:flex;
  gap:0.5rem;
  align-items:center;
  background:var(--ink-800);
}
.design-card.active { border-color:var(--accent); }
.design-card canvas { width:64px; height:44px; background:#fff; border-radius:3px; }
.design-card .meta { font-size:0.72rem; color:var(--text-dim); font-family:var(--font-mono); flex:1; }
.design-card input[type="checkbox"] { accent-color:var(--accent); }

.price-box {
  background:var(--ink-800);
  border:1px solid var(--line);
  border-radius:6px;
  padding:0.7rem;
  font-family:var(--font-mono);
  font-size:0.8rem;
}
.price-box .line { display:flex; justify-content:space-between; padding:0.15rem 0; color:var(--text-dim); }
.price-box .total { color:var(--text); font-weight:600; border-top:1px solid var(--line); margin-top:0.35rem; padding-top:0.45rem; }
.price-box .total b { color:var(--accent); }
.price-note { font-size:0.68rem; color:var(--text-faint); margin-top:0.4rem; line-height:1.4; }

.toast {
  position:fixed; bottom:1.2rem; right:1.2rem;
  background:var(--ink-800); border:1px solid var(--line);
  color:var(--text); padding:0.7rem 1rem; border-radius:8px;
  font-size:0.82rem; max-width:320px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  z-index:999998;
  opacity:0; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0); }
.toast.error { border-color:var(--danger); }
.toast.ok { border-color:var(--ok); }

/* Modal */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.55);
  display:none; align-items:center; justify-content:center;
  /* Muy por encima de cualquier cabecera/menú "sticky" que pueda traer
     tu plantilla de PrestaShop (algunas usan z-index de 1000-1030) —
     esto es lo que hacía que la ventana se abriera de verdad (por eso
     se oscurecía la pantalla) pero quedara escondida detrás. */
  z-index:999999;
}
.modal-backdrop.show { display:flex; }
.modal {
  background:var(--ink-900); border:1px solid var(--line);
  border-radius:10px; padding:1.2rem; width:90%; max-width:520px;
  max-height:80vh; overflow-y:auto;
}
.modal h3 { margin:0 0 0.9rem; font-size:0.95rem; }
.palette-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem;
}
.palette-item {
  border:2px solid var(--line); border-radius:8px;
  padding:0.7rem 0.5rem; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
  background:var(--ink-800);
}
.palette-item:hover { border-color:var(--text-faint); }
.palette-item.selected { border-color:var(--accent); }
.palette-item .chip {
  width:40px; height:40px; border-radius:6px; position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.2);
}
.palette-item .chip::after {
  content:'Aa'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.85rem;
}
.palette-item span.name { font-size:0.7rem; color:var(--text-dim); text-align:center; }
.modal-close {
  display:block; margin-top:1rem; margin-left:auto;
}

@media (max-width: 900px) {
  .workspace { grid-template-columns:1fr; grid-template-rows:auto auto 1fr; }
  .rail { max-height:38vh; }
}

/* Previsualización de pictogramas */
.pictogram-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 0.6rem;
  padding: 0.5rem;
}
.pictogram-preview svg {
  width: 56px;
  height: 56px;
  fill: var(--text);
}

/* Galería de pictogramas */
.modal-wide { max-width: 720px; }
.picto-category {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.06em;
  margin: 1rem 0 0.5rem;
}
.picto-category:first-child { margin-top: 0; }
.picto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 0.5rem;
}
.picto-item {
  background: var(--ink-800);
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease;
}
.picto-item:hover { border-color: var(--text-faint); }
.picto-item.selected { border-color: var(--accent); background: var(--ink-850); }
.picto-item svg {
  width: 34px; height: 34px;
  /* El fondo de la web es oscuro: se muestran en blanco en el listado
     sin tocar los colores originales del archivo — brightness(0)
     vuelve negro cualquier color con opacidad, invert(1) lo pasa a
     blanco. Al añadirlos a una placa, se recolorean aparte al color
     real de grabado (esto es solo la vista previa del listado). */
  filter: brightness(0) invert(1);
}
.picto-item img {
  width: 34px; height: 34px;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
  object-fit: contain;
}
.picto-item span {
  font-size: 0.62rem;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.2;
}

/* Barra de zoom */
.zoom-toolbar {
  position: absolute;
  bottom: 1rem; right: 1rem;
  display: flex;
  gap: 0.3rem;
  background: rgba(255,255,255,0.9);
  border-radius: 8px;
  padding: 0.3rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.zoom-toolbar button {
  background: var(--ink-900);
  color: #fff;
  border: none;
  border-radius: 5px;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-toolbar button:hover { background: var(--accent); color: #1a1200; }
#zoom-fit-btn { width: auto; padding: 0 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; }

.design-copies-input {
  width: 42px !important;
  padding: 0.2rem !important;
  font-size: 0.75rem !important;
  text-align: center;
  flex-shrink: 0;
}

/* Mis Pedidos */
.order-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
}
.order-item .order-info { flex: 1; }
.order-item .order-name { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.order-item .order-meta { font-size: 0.7rem; color: var(--text-faint); font-family: var(--font-mono); margin-top: 0.15rem; }
.order-item .order-actions { display: flex; gap: 0.4rem; }
.order-item .order-actions button { padding: 0.4rem 0.6rem; font-size: 0.72rem; }
.orders-empty { color: var(--text-faint); font-size: 0.82rem; text-align: center; padding: 1.5rem 0; }

#vagalume-designer-root input:disabled, #vagalume-designer-root select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Previsualización de importación de Excel */
#excel-summary {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.5;
}
#excel-summary b { color: var(--accent); }
.excel-row-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.excel-row-table th, .excel-row-table td {
  text-align: left; padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.excel-row-table th { color: var(--text-faint); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; }
.excel-row-table tr.row-error td { color: #ff6b6b; }
.excel-row-table tr.row-warning td { color: #f4c418; }
.excel-row-ok { color: #4ade80; }

/* El cliente no debe poder guardar/cargar JSON ni exportar el SVG de
   producción directamente — esas acciones son solo para el taller,
   desde el panel de administración. Se ocultan en vez de quitarlas
   del todo del HTML, para no tener que tocar el cableado del JS. */
#save-json-btn, #load-json-btn, #export-svg-prod-btn, #json-file-input {
  display: none !important;
}

/* ===== Mis Pedidos: pedidos agrupados con miniaturas ===== */
#vagalume-designer-root .order-group {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  margin-bottom: 0.7rem;
}
#vagalume-designer-root .order-group-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.6rem;
  cursor: pointer;
}
/* Flechita de carpeta: apunta a la derecha cuando está plegada, hacia
   abajo cuando está abierta. */
#vagalume-designer-root .order-folder-arrow {
  flex: 0 0 auto; color: var(--accent); font-size: 0.7rem;
  transition: transform .15s ease;
}
#vagalume-designer-root .order-group:not(.collapsed) .order-folder-arrow { transform: rotate(90deg); }
#vagalume-designer-root .order-folder-info { flex: 1 1 auto; min-width: 0; }
/* Plegado = carpeta cerrada: se ocultan las miniaturas y el margen del
   encabezado, para que solo se vea la línea del pedido. */
#vagalume-designer-root .order-group.collapsed .order-group-head { margin-bottom: 0; }
#vagalume-designer-root .order-group.collapsed .order-thumbs { display: none; }
#vagalume-designer-root .order-group-head:hover .order-name { color: var(--accent); }
#vagalume-designer-root .order-group .order-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
#vagalume-designer-root .order-group .order-meta { font-size: 0.7rem; color: var(--text-faint); font-family: var(--font-mono); margin-top: 0.15rem; }
#vagalume-designer-root .order-reorder {
  flex: 0 0 auto; font-size: 0.72rem; white-space: nowrap;
  background: var(--accent); color: #1a1200; font-weight: 600;
  border: none; border-radius: 6px; padding: 0.4rem 0.7rem; cursor: pointer;
}
#vagalume-designer-root .order-reorder:hover { filter: brightness(1.1); }
#vagalume-designer-root .order-thumbs {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
#vagalume-designer-root .order-thumb {
  width: 84px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 6px;
  padding: 3px; background: #fff;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .15s ease;
}
#vagalume-designer-root .order-thumb:hover { border-color: var(--accent); }
#vagalume-designer-root .order-thumb img { width: 100%; height: 54px; object-fit: contain; display: block; }
#vagalume-designer-root .order-thumb .no-thumb {
  width: 100%; height: 54px; display: flex; align-items: center; justify-content: center;
  font-size: 0.6rem; color: #999;
}
#vagalume-designer-root .order-thumb span {
  font-size: 0.6rem; color: #333; text-align: center;
  margin-top: 2px; line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}

/* Barra de acción superior de Mis Pedidos (añadir seleccionados) */
#vagalume-designer-root .orders-actionbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem; flex-wrap: wrap;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
  padding: 0.6rem 0.2rem 0.7rem;
  margin-bottom: 0.6rem;
}
#vagalume-designer-root .orders-sel-count { font-size: 0.78rem; color: var(--text-dim); }
#vagalume-designer-root .orders-add-selected {
  background: var(--accent); color: #1a1200; font-weight: 600;
  border: none; border-radius: 6px; padding: 0.5rem 0.9rem;
  font-size: 0.8rem; cursor: pointer;
}
#vagalume-designer-root .orders-add-selected:disabled { opacity: 0.45; cursor: not-allowed; }
#vagalume-designer-root .orders-add-selected:not(:disabled):hover { filter: brightness(1.1); }

/* Casilla de selección sobre cada miniatura */
#vagalume-designer-root .order-thumb { position: relative; }
#vagalume-designer-root .order-thumb .order-thumb-check {
  position: absolute; top: 4px; left: 4px; z-index: 1;
  width: 18px; height: 18px; cursor: pointer;
  accent-color: var(--accent);
}
#vagalume-designer-root .order-thumb:has(.order-thumb-check:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}