/* ============================================================
   PÁGINAS DE BLOQUE, SELECTS DEL PANEL Y ETIQUETAS DE CLIENTE
   ============================================================ */

/* número de orden en la lista de bloques */
.bloq-n{
  width:26px;height:26px;border-radius:8px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:800;color:var(--oro);
  background:color-mix(in srgb, var(--oro) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--oro) 35%, transparent);
}

/* cabecera de la página de un bloque */
.bp-cab{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--linea);
  border-radius:var(--radio, 14px);padding:14px 16px;margin-bottom:16px;
}
.bp-tit{flex:1;min-width:200px}
.bp-tit b{display:block;font-size:1.02rem}
.bp-tit span{display:block;color:var(--txt2);font-size:.82rem;margin-top:2px}
.bp-cab .sw span{font-size:.82rem;color:var(--txt2)}
/* el interruptor y el botón de vista previa van siempre juntos, en ese
   orden, aunque la cabecera tenga que partirse en dos renglones */
.bp-cab__fin{display:inline-flex;align-items:center;gap:14px;flex-wrap:nowrap}

/* ------------------------------------------------------------
   Desplegables con el aspecto del panel (nada del navegador)
   ------------------------------------------------------------
   IMPORTANTE: la flecha se declara SIEMPRE con las cuatro
   propiedades (imagen, repetición, posición y tamaño). Si se
   deja alguna suelta, otra regla con «background:» la reinicia
   y la flechita se repite como un zigzag por todo el campo.
   ------------------------------------------------------------ */
select,
.tarjeta select, .velo select, .bp-cab select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  border-radius:10px;
  padding-right:36px;
  font:inherit;
  cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B9AE9C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  text-overflow:ellipsis;
}
.tarjeta select, .velo select, .bp-cab select{
  background-color:var(--bg3);
  color:var(--txt);
  border:1px solid var(--linea);
  padding:9px 36px 9px 12px;
  font-size:.86rem;
}
/* Firefox: quitar el fondo azul del texto elegido y pintar bien la lista */
select option{background:#14131C;color:#E9E5F2}
body.claro select option{background:#FFFFFF;color:#1E1A16}
.tarjeta select:focus, .velo select:focus{outline:none;border-color:var(--oro);box-shadow:0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent)}
.tarjeta select:disabled{opacity:.45;cursor:not-allowed}

/* envoltorio que da color según lo elegido (estado del pedido, etiqueta del cliente) */
.sel-envuelto{display:inline-flex}
.sel-envuelto select{
  padding:6px 30px 6px 10px;font-size:.8rem;font-weight:700;
  border-width:1.5px;background-position:right 10px center;min-width:132px;
}
.sel-envuelto.est-azul  select{color:#5BA0F6;border-color:rgba(59,130,246,.55);background-color:rgba(59,130,246,.10)}
.sel-envuelto.est-oro   select{color:var(--oro);border-color:color-mix(in srgb, var(--oro) 55%, transparent);background-color:color-mix(in srgb, var(--oro) 10%, transparent)}
.sel-envuelto.est-verde select{color:var(--verde);border-color:rgba(37,211,102,.5);background-color:rgba(37,211,102,.09)}
.sel-envuelto.est-rojo  select{color:#F09098;border-color:rgba(230,72,82,.5);background-color:rgba(230,72,82,.09)}
/* dos colores más para los estados de las citas: reprogramar y no asistió */
.sel-envuelto.est-morado select{color:#C4A2F0;border-color:rgba(155,120,230,.5);background-color:rgba(155,120,230,.10)}
.sel-envuelto.est-gris   select{color:var(--txt2);border-color:var(--linea);background-color:var(--bg3)}

.sel-envuelto.etiq-vacia     select{color:var(--txt2)}
.sel-envuelto.etiq-venta     select{color:var(--verde);border-color:rgba(37,211,102,.5);background-color:rgba(37,211,102,.09)}
.sel-envuelto.etiq-pendiente select{color:var(--oro);border-color:color-mix(in srgb, var(--oro) 55%, transparent);background-color:color-mix(in srgb, var(--oro) 10%, transparent)}
.sel-envuelto.etiq-contactar select{color:var(--rosa);border-color:rgba(232,73,110,.5);background-color:rgba(232,73,110,.09)}
.sel-envuelto.etiq-cerrado    select{color:var(--txt2);border-color:var(--linea);background-color:var(--bg3)}
.sel-envuelto.etiq-devolucion select{color:#F09098;border-color:rgba(240,144,152,.5);background-color:rgba(240,144,152,.1)}

/* chips de etiqueta en la lista de clientes */
.chip.etiq-venta{background:rgba(37,211,102,.14);color:var(--verde);border-color:rgba(37,211,102,.4)}
.chip.etiq-pendiente{background:color-mix(in srgb, var(--oro) 14%, transparent);color:var(--oro);border-color:color-mix(in srgb, var(--oro) 40%, transparent)}
.chip.etiq-contactar{background:rgba(232,73,110,.13);color:var(--rosa);border-color:rgba(232,73,110,.4)}
.chip.etiq-cerrado{background:var(--bg3);color:var(--txt2);border-color:var(--linea)}
.chip.etiq-devolucion{background:rgba(240,144,152,.14);color:#F09098;border-color:rgba(240,144,152,.4)}

/* barra del filtro del informe */
.inf-filtro{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.inf-filtro__txt{flex:1;min-width:220px}
.sel-filtro select{min-width:210px;font-size:.86rem;padding:9px 34px 9px 12px}
.inf-filtro input[type="date"]{
  background:var(--bg3);color:var(--txt);
  border:1px solid var(--linea);border-radius:10px;padding:8px 10px;font:inherit;font-size:.84rem;
}

/* tarjetas de cifras sin la línea de comparación: respiran mejor */
.cifras-limpias .cifra{padding-bottom:16px}
.cifras-limpias .cifra b{margin-bottom:2px}

/* tema claro del panel */
body.claro select,
body.claro .tarjeta select, body.claro .velo select, body.claro .bp-cab select{
  background-color:#fff;
  color:#1E1A16;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A7061' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}
body.claro .inf-filtro input[type="date"]{background-color:#fff;color:#1E1A16}
body.claro .sel-envuelto.est-azul select{color:#2563EB}
body.claro .sel-envuelto.est-rojo select{color:#C22730}
body.claro .sel-envuelto.est-morado select{color:#6B3FA8}
body.claro .sel-envuelto.est-verde select{color:#0E6B37}
body.claro .bloq-n{background:rgba(217,148,47,.12)}

/* contador de elementos junto al título de un grupo (carrusel, franja…) */
.cont-n{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 6px;margin-left:4px;
  border-radius:999px;font-size:.72rem;font-weight:700;
  color:var(--txt2);background:rgba(255,255,255,.06);border:1px solid var(--linea);
  vertical-align:middle;
}
body.claro .cont-n{background:rgba(0,0,0,.045)}

/* ============================================================
   DESPLEGABLES PROPIOS (.dsp-btn / .dsp-lista)
   El <select> original queda oculto llevando el valor.
   ============================================================ */
select.dsp-oculto{position:absolute !important;width:1px;height:1px;opacity:0;
  pointer-events:none;margin:0;padding:0;border:0}

.dsp-btn{
  appearance:none;display:inline-flex;align-items:center;gap:10px;
  width:100%;text-align:left;cursor:pointer;font:inherit;font-size:.86rem;
  background:var(--bg3);color:var(--txt);
  border:1px solid var(--linea);border-radius:10px;padding:10px 12px;
  transition:border-color .2s, box-shadow .2s;
}
.dsp-btn .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsp-btn .f{width:12px;height:8px;flex:0 0 auto;color:#B9AE9C;transition:transform .18s}
.dsp-btn[aria-expanded="true"] .f{transform:rotate(180deg)}
.dsp-btn:hover{border-color:#3A3546}
/* Solo mientras está abierto de verdad: si esto incluyera también :focus-visible,
   el botón se queda con este mismo brillo después de elegir una opción (el JS
   le devuelve el foco al cerrar), pareciendo que sigue abierto o resaltado. */
.dsp-btn[aria-expanded="true"]{outline:none;border-color:var(--oro);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--oro) 22%, transparent)}
.dsp-btn:disabled{opacity:.45;cursor:not-allowed}
body.claro .dsp-btn{background:#fff;color:#1E1A16;border-color:#DED5C6}
body.claro .dsp-btn .f{color:#7A7061}
body.claro .dsp-btn:hover{border-color:#C9BCA6}

/* la lista flotante */
.dsp-lista{position:fixed;z-index:300;display:flex;flex-direction:column;gap:2px;
  max-height:min(320px,60vh);overflow-y:auto;padding:6px;
  background:var(--bg2);border:1px solid var(--linea);border-radius:13px;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.65)}
/* CAUSA DEL «SE QUEDA TRABADO»: sin esta línea, el display:flex de arriba
   le ganaba al hidden del navegador y la lista nunca desaparecía. */
.dsp-lista[hidden]{display:none !important}
.dsp-op{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;border-radius:9px;padding:9px 11px;cursor:pointer;
  font:inherit;font-size:.86rem;color:var(--txt)}
.dsp-op i{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.dsp-op span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsp-op svg{width:14px;height:14px;flex:0 0 auto;color:var(--oro)}
.dsp-op:hover,.dsp-op.foco{background:color-mix(in srgb, var(--oro) 14%, transparent);color:var(--oro)}
.dsp-op.on{color:var(--oro);font-weight:700}
.dsp-op:disabled{opacity:.4;cursor:not-allowed}
body.claro .dsp-lista{background:#FFFFFF;border-color:#DED5C6;
  box-shadow:0 24px 60px -22px rgba(90,64,20,.35)}
body.claro .dsp-op{color:#1E1A16}
body.claro .dsp-op:hover,body.claro .dsp-op.foco{background:rgba(217,148,47,.14);color:#8A5A08}
body.claro .dsp-op.on{color:#8A5A08}

/* dentro de los envoltorios de color, el botón hereda el tinte del select */
.sel-envuelto .dsp-btn{padding:7px 11px;font-size:.8rem;font-weight:700;border-width:1.5px;min-width:132px;width:auto}
.sel-envuelto.est-azul  .dsp-btn{color:#5BA0F6;border-color:rgba(59,130,246,.55);background:rgba(59,130,246,.10)}
.sel-envuelto.est-oro   .dsp-btn{color:var(--oro);border-color:color-mix(in srgb, var(--oro) 55%, transparent);background:color-mix(in srgb, var(--oro) 10%, transparent)}
.sel-envuelto.est-verde .dsp-btn{color:var(--verde);border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.09)}
.sel-envuelto.est-rojo  .dsp-btn{color:#F09098;border-color:rgba(230,72,82,.5);background:rgba(230,72,82,.09)}
.sel-envuelto.etiq-vacia     .dsp-btn{color:var(--txt2)}
.sel-envuelto.etiq-venta     .dsp-btn{color:var(--verde);border-color:rgba(37,211,102,.5);background:rgba(37,211,102,.09)}
.sel-envuelto.etiq-pendiente .dsp-btn{color:var(--oro);border-color:color-mix(in srgb, var(--oro) 55%, transparent);background:color-mix(in srgb, var(--oro) 10%, transparent)}
.sel-envuelto.etiq-contactar .dsp-btn{color:var(--rosa);border-color:rgba(232,73,110,.5);background:rgba(232,73,110,.09)}
.sel-envuelto.etiq-cerrado    .dsp-btn{color:var(--txt2);border-color:var(--linea);background:var(--bg3)}
.sel-envuelto.etiq-devolucion .dsp-btn{color:#F09098;border-color:rgba(240,144,152,.5);background:rgba(240,144,152,.1)}
.sel-envuelto.est-morado .dsp-btn{color:#C4A2F0;border-color:rgba(155,120,230,.5);background:rgba(155,120,230,.10)}
.sel-envuelto.est-gris   .dsp-btn{color:var(--txt2);border-color:var(--linea);background:var(--bg3)}
.sel-envuelto .dsp-btn .f{color:currentColor;opacity:.7}
body.claro .sel-envuelto.est-azul .dsp-btn{color:#2563EB}
body.claro .sel-envuelto.est-rojo .dsp-btn{color:#C22730}
body.claro .sel-envuelto.est-morado .dsp-btn{color:#6B3FA8}

/* el filtro del informe */
.sel-filtro .dsp-btn{min-width:210px;width:auto}

/* ============================================================
   INFORME DEL NEGOCIO
   ------------------------------------------------------------
   Estas clases las usa 11-informe.js pero nunca tuvieron estilo
   propio (solo colores sueltos en el tema claro): por eso las
   etiquetas y los números salían pegados, sin barras ni orden.
   ============================================================ */
.inf-filtro__descargas{display:flex;gap:8px;flex:0 0 auto}
.sel-mundo .dsp-btn{font-weight:700;color:var(--oro)}


.inf-detalle__resumen{color:var(--txt2);font-size:.86rem;margin:2px 0 18px}
.inf-detalle__cuerpo{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
@media(max-width:760px){.inf-detalle__cuerpo{grid-template-columns:1fr}}

.inf-barras{display:flex;flex-direction:column;gap:14px}
.barra-fila{display:flex;flex-direction:column;gap:6px}
.barra-etq{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:.82rem}
.barra-etq span{color:var(--txt2)}
.barra-etq b{color:var(--txt);font-weight:700;white-space:nowrap}
.barra-pista{height:8px;border-radius:99px;background:var(--bg3);overflow:hidden}
.barra-pista i{display:block;height:100%;border-radius:99px;transition:width .4s ease}
.barra-pista i.verde{background:linear-gradient(90deg,#25D366,#1CAE55)}
.barra-pista i.rojo{background:linear-gradient(90deg,#F09098,#E64852)}
.barra-pista i.oro{background:linear-gradient(90deg,#F7C578,#D9942F)}
.barra-pista i.azul{background:linear-gradient(90deg,#7CC5F0,#3B82F6)}
.barra-pista i.gris{background:linear-gradient(90deg,#B7B0C2,#7E7789)}

/* el reparto de etiquetas del periodo, en el Informe */
.inf-etq{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.inf-etq__x{display:inline-flex; align-items:center; gap:9px; padding:8px 14px 8px 10px;
  border:1px solid var(--linea); border-radius:999px; background:var(--bg3)}
.inf-etq__x b{font-size:1.05rem; font-variant-numeric:tabular-nums}
body.claro .barra-pista{background:#EFE7DA}

.inf-ingresos{display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:var(--bg3);border:1px solid var(--linea);border-radius:14px;padding:6px 18px}
.par-cifra{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 0;font-size:.88rem;border-bottom:1px solid var(--linea)}
.par-cifra:last-child{border-bottom:0}
.par-cifra span{color:var(--txt2)}
.par-cifra b{font-size:1.02rem;color:var(--txt)}
.par-cifra--total{padding-top:14px}
.par-cifra--total span{color:var(--txt);font-weight:600}
.par-cifra--total b{font-size:1.25rem;color:var(--verde)}

.grafico{display:flex;align-items:flex-end;gap:6px;height:150px;padding-top:10px;
  border-bottom:1px solid var(--linea)}
.gcol{flex:1;min-width:10px;max-width:46px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;gap:8px}
.gbar{width:100%;min-height:4px;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#FFE7BE,#F7C578 45%,#D9942F);
  transition:height .4s ease}
.gcol span{font-size:.68rem;color:var(--txt2);white-space:nowrap}
body.claro .gbar{background:linear-gradient(180deg,#F7C578,#D9942F)}

/* ============================================================
   Menú del botón «adjuntar» en el chat del panel
   ============================================================ */
.ch-menu-adj{position:fixed;z-index:300;display:flex;flex-direction:column;gap:2px;
  padding:6px;min-width:220px;background:var(--bg2);border:1px solid var(--linea);
  border-radius:13px;box-shadow:0 24px 60px -18px rgba(0,0,0,.65)}
.ch-menu-adj button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:9px;padding:10px 11px;cursor:pointer;
  font:inherit;font-size:.86rem;color:var(--txt)}
.ch-menu-adj button:hover{background:color-mix(in srgb, var(--oro) 14%, transparent);color:var(--oro)}
.ch-menu-adj svg{width:17px;height:17px;flex:0 0 auto}
body.claro .ch-menu-adj{background:#FFFFFF;border-color:#DED5C6;box-shadow:0 24px 60px -22px rgba(90,64,20,.35)}
body.claro .ch-menu-adj button{color:#1E1A16}
body.claro .ch-menu-adj button:hover{background:rgba(217,148,47,.14);color:#8A5A08}

/* botón del importe en Pedidos: se toca para poner el precio */
.imp-btn{min-width:88px;font-variant-numeric:tabular-nums}

/* Tarjetas de clics a las apps de delivery, en el Resumen.
   Van pintadas del color de cada marca: «--marca» es el fondo y «--tinta»
   el color del texto que contrasta encima (blanco en DoorDash, verde muy
   oscuro en Uber Eats). Al ser colores de marca, se ven igual en modo
   claro y en oscuro, que es justo lo que se busca. */
.clics-apps{display:flex;flex-wrap:wrap;gap:12px}
.clic-app{flex:1 1 200px;min-width:180px;max-width:280px;
  background:var(--marca,#8A5A08);color:var(--tinta,#fff);
  border:0;border-radius:14px;padding:16px}
.clic-app__logo{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;
  background:rgba(255,255,255,.24);margin-bottom:12px}
.clic-app__logo svg{width:24px;height:24px;display:block;color:var(--tinta,#fff)}
.clic-app__logo b{font-size:1.05rem;color:var(--tinta,#fff);margin:0}
.clic-app__cifra{display:block;font-size:1.75rem;line-height:1;letter-spacing:-.02em;color:var(--tinta,#fff)}
.clic-app__marca{display:block;font-size:.84rem;margin-top:6px;color:var(--tinta,#fff)}
.clic-app small{display:block;font-size:.75rem;margin-top:2px;color:var(--tinta,#fff);opacity:.72}

/* barra de filtro y descarga en Clientes */
.cli-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 14px}
.cli-barra p{color:var(--txt2);font-size:.86rem}

/* ============================================================
   VISTA PREVIA EN VIVO
   El panel se estrecha y la web real se enseña a la derecha.
   En pantallas pequeñas ocupa todo, porque partir en dos una
   pantalla de teléfono no deja ver nada de nada.
   ============================================================ */
.vp{position:fixed; top:0; right:0; bottom:0; width:var(--vp-w, min(54vw, 820px)); z-index:60;
  display:flex; flex-direction:column; min-width:0;
  background:var(--bg2); border-left:1px solid var(--linea); box-shadow:-14px 0 40px rgba(0,0,0,.18)}
body.con-vp .contenido, body.con-vp main{margin-right:var(--vp-w, min(54vw, 820px))}

/* ------------------------------------------------------------
   EL TIRADOR
   La raya del borde izquierdo se arrastra para repartir el espacio
   entre el editor y la vista previa, a tu gusto.
   ------------------------------------------------------------ */
.vp__tirador{position:absolute; left:-5px; top:0; bottom:0; width:12px; z-index:2;
  cursor:col-resize; display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; padding:0; touch-action:none}
.vp__tirador i{display:block; width:3px; height:56px; border-radius:999px;
  background:var(--linea); transition:background .15s ease, height .15s ease}
.vp__tirador:hover i, .vp__tirador:focus-visible i{background:var(--oro); height:96px}
.vp__tirador:focus-visible{outline:none}
body.vp-arrastrando{cursor:col-resize; user-select:none}
body.vp-arrastrando iframe{pointer-events:none}   /* el marco no se traga el arrastre */

/* ------------------------------------------------------------
   EL BOTÓN DE LA VISTA PREVIA
   Va en la cabecera del bloque, junto al interruptor «Visible en
   la web». Dorado, y se apaga cuando la vista previa está abierta.
   ------------------------------------------------------------ */
.vp-btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  color:#1A0F04; border:0;
  background:linear-gradient(135deg, var(--oro-luz, #F6D9A6), var(--oro, #F2AC5E) 58%, var(--oro-med, #D9942F));
  box-shadow:0 6px 16px -6px rgba(217,148,47,.6), 0 0 0 1px rgba(255,255,255,.32) inset;
  font-weight:700}
.vp-btn:hover{filter:brightness(1.05); box-shadow:0 8px 20px -6px rgba(217,148,47,.75), 0 0 0 1px rgba(255,255,255,.42) inset}
.vp-btn svg{width:17px; height:17px; flex:0 0 auto}
.vp-btn--on{background:var(--bg3); color:var(--txt2); box-shadow:0 0 0 1px var(--linea) inset; font-weight:600}
.vp-btn--on:hover{filter:none; color:var(--txt)}

/* --- barra de la vista previa: dos filas, ordenada y sin apreturas --- */
.vp__barra{flex:0 0 auto; padding:10px 14px 11px; border-bottom:1px solid var(--linea); background:var(--bg3)}
.vp__fila{display:flex; align-items:center; gap:10px}
.vp__fila--ctrl{margin-top:9px; flex-wrap:wrap; gap:8px}
.vp__titulo{font-weight:600; font-size:.95rem; color:var(--txt)}
.vp__sello{font-size:.7rem; padding:3px 9px; border-radius:999px; white-space:nowrap;
  background:var(--bg2); border:1px solid var(--linea); color:var(--txt2)}
.vp__sello--pend{color:#8A5A08; border-color:#E7C98A; background:#FFF7E4}
.vp__x{margin-left:auto; font:inherit; background:none; border:0; color:var(--txt2);
  cursor:pointer; padding:2px 4px; font-size:1.05rem; line-height:1}
.vp__x:hover{color:var(--txt)}

/* los botones van en grupos pegados, como pastillas segmentadas */
.vp__grupo{display:inline-flex; border:1px solid var(--linea); border-radius:999px; overflow:hidden; background:var(--bg2)}
.vp__grupo .vp__chip{border:0; border-radius:0; margin:0}
.vp__grupo .vp__chip + .vp__chip{border-left:1px solid var(--linea)}
.vp__acciones{display:inline-flex; gap:8px; margin-left:auto}
.vp__acciones .vp__chip{border-radius:999px}
.vp__chip{font:inherit; font-size:.76rem; padding:6px 12px; cursor:pointer;
  background:var(--bg2); color:var(--txt2); border:1px solid var(--linea); border-radius:999px}
.vp__chip:hover{color:var(--txt); background:var(--bg3)}
.vp__chip.on{background:var(--oro); border-color:var(--oro); color:#1A0F04; font-weight:600}
/* un bloque que solo existe en un mundo no deja elegir el otro: sería vacío */
.vp__chip[disabled]{opacity:.42; cursor:not-allowed}
.vp__chip[disabled]:hover{background:var(--bg2); color:var(--txt2)}
.vp__chip.on[disabled]{opacity:.72; background:var(--oro); color:#1A0F04}

/* ------------------------------------------------------------
   EL LIENZO
   La web se dibuja a su ancho REAL (1440 px de ordenador, 390 de
   teléfono) y luego se encoge entera con «scale». La tarima mide
   lo que mide ya encogida, así que se centra sola y nada
   sobresale. Los dos marcos van uno encima del otro: mientras
   ves uno, el otro se prepara por detrás y solo se cambia cuando
   ya está dibujado. Por eso no parpadea al guardar.
   ------------------------------------------------------------ */
.vp__cuerpo{position:relative; flex:1 1 auto; min-height:0; background:var(--bg3); overflow:hidden}

.vp__lienzo{width:100%; height:100%; overflow:hidden; background:var(--bg3);
  display:flex; justify-content:center; align-items:flex-start}
.vp__lienzo--movil{padding:14px 0}
/* Con aumento la página se recorre con la rueda o arrastrando la barra,
   y se queda CENTRADA: el «margin:auto» del recuadro es lo que deja
   alcanzable también la parte de la izquierda. */
.vp__lienzo--lupa{overflow:auto; justify-content:flex-start; scrollbar-width:thin; scroll-behavior:auto}
.vp__lienzo--lupa .vp__tarima{margin-inline:auto}

/* los botones de aumento:  −  42 %  +  */
.vp__grupo--zoom{margin-left:2px}
.vp__lupa{font-size:.95rem; line-height:1; padding:5px 11px; font-weight:700}
.vp__zoomb{min-width:58px; text-align:center; font-variant-numeric:tabular-nums}
.vp__zoom{font-size:.7rem; color:var(--txt2); padding:0 2px; white-space:nowrap}

.vp__tarima{position:relative; flex:0 0 auto; overflow:hidden; background:#fff;
  border-radius:2px; transition:width .18s ease}
.vp__tarima--movil{border-radius:24px; box-shadow:0 10px 34px rgba(0,0,0,.28),
  0 0 0 1px rgba(255,255,255,.10) inset}

.vp__pantalla{position:absolute; top:0; left:0; border:0; display:block; background:#fff;
  opacity:0; pointer-events:none; visibility:hidden}
.vp__pantalla--on{opacity:1; pointer-events:auto; visibility:visible}

/* tres puntitos mientras se genera el borrador */
.vp__cargando{position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:6px;
  background:rgba(255,255,255,.75); backdrop-filter:blur(2px); z-index:2}
body:not(.claro) .vp__cargando{background:rgba(19,19,24,.72)}
.vp__cargando span{width:8px; height:8px; border-radius:50%; background:var(--oro);
  animation:vpLatido 1.2s infinite ease-in-out}
.vp__cargando span:nth-child(2){animation-delay:.16s}
.vp__cargando span:nth-child(3){animation-delay:.32s}
@keyframes vpLatido{0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){ .vp__cargando span{animation:none; opacity:.6} }

@media(max-width:1100px){
  .vp{width:100%; left:0}
  body.con-vp .contenido, body.con-vp main{margin-right:0}
}

/* aviso cuando el marco de la vista previa no puede cargar */
.vp__fallo{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; text-align:center; padding:28px;
  background:var(--bg2); color:var(--txt2)}
.vp__fallo p{margin:0; max-width:34ch; line-height:1.5}
.vp__fallo p b{color:var(--txt)}
.vp__fallo .btn{margin-top:4px}


/* ------------------------------------------------------------
   RESUMEN · las cifras que llevan a su sitio
   Se toca el número y se está donde hay que estar.
   ------------------------------------------------------------ */
button.cifra[data-ir]{cursor:pointer; text-align:left; transition:transform .12s ease, border-color .12s ease}
button.cifra[data-ir]:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--oro) 45%, transparent)}
button.cifra[data-ir]:active{transform:translateY(0)}
.cifra.azul b{color:#5BA0F6}
body.claro .cifra.azul b{color:#2563EB}


/* ============================================================
   EL COLOR DE CADA BLOQUE
   Un tono clarito, siempre el mismo, en la lista de bloques y en
   la cabecera del bloque abierto: se reconoce dónde estás sin
   leer. El color va en una franja al borde y en una sombra suave.
   ============================================================ */
.blq{border-left:4px solid var(--blq, var(--linea)) !important;
  box-shadow:0 8px 22px -14px var(--blq-sombra, transparent)}
.bp-cab.blq{border-left-width:5px !important}
.blq--oro    {--blq:#E8B45A; --blq-sombra:rgba(232,180,90,.5)}
.blq--lila   {--blq:#B49AE8; --blq-sombra:rgba(180,154,232,.5)}
.blq--azul   {--blq:#6FAEE8; --blq-sombra:rgba(111,174,232,.5)}
.blq--ambar  {--blq:#E8975A; --blq-sombra:rgba(232,151,90,.5)}
.blq--verde  {--blq:#5FC98A; --blq-sombra:rgba(95,201,138,.5)}
.blq--rosa   {--blq:#E88AAD; --blq-sombra:rgba(232,138,173,.5)}
.blq--jade   {--blq:#4FBFB0; --blq-sombra:rgba(79,191,176,.5)}
.blq--cian   {--blq:#5AB8D9; --blq-sombra:rgba(90,184,217,.5)}
.blq--piedra {--blq:#A8A091; --blq-sombra:rgba(168,160,145,.45)}
.blq--violeta{--blq:#9A7BD9; --blq-sombra:rgba(154,123,217,.5)}
/* dentro de la tarjeta coloreada, un puntito del mismo color junto al título */
.blq .info b::before, .bp-cab.blq .bp-tit b::before{
  content:''; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--blq); margin-right:8px; vertical-align:1px}

/* ============================================================
   LAS FICHAS DEL FILTRO DE IMÁGENES (un solo filtro)
   ============================================================ */
.carp-fichas{display:inline-flex; border:1px solid var(--linea); border-radius:999px;
  overflow:hidden; background:var(--bg2)}
.carp-ficha{font:inherit; font-size:.8rem; padding:7px 14px; cursor:pointer; border:0;
  background:transparent; color:var(--txt2); white-space:nowrap}
.carp-ficha + .carp-ficha{border-left:1px solid var(--linea)}
.carp-ficha:hover{color:var(--txt); background:var(--bg3)}
.carp-ficha.on{background:var(--oro); color:#1A0F04; font-weight:700}

/* ============================================================
   LA CORTINA DE «RESTABLECIENDO…»
   Cubre el panel entero mientras corre el restablecimiento, para
   que ningún clic caiga en un panel a medio reconstruir.
   ============================================================ */
#acCortina{position:fixed; inset:0; z-index:9999; display:flex; align-items:center;
  justify-content:center; background:rgba(10,9,14,.82); backdrop-filter:blur(4px)}
.ac-cortina__caja{display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:34px 44px; border-radius:18px; background:var(--bg2);
  border:1px solid var(--linea); box-shadow:0 30px 80px rgba(0,0,0,.5); text-align:center}
.ac-cortina__caja b{font-size:1.05rem; color:var(--txt)}
.ac-cortina__caja span{color:var(--txt2); font-size:.86rem; max-width:34ch}

/* ============================================================
   LA VERSIÓN DEL PANEL
   ============================================================ */
.menu-version{margin-top:auto; padding:14px 18px 10px; font-size:.68rem;
  color:var(--txt2); opacity:.7; letter-spacing:.04em}
.ac-version{display:flex; align-items:center; gap:12px;
  border-style:dashed; opacity:.92}
.ac-version .info b{display:block}
.ac-version .info span{color:var(--txt2); font-size:.82rem}


/* ============================================================
   DISEÑO Y COLORES · la pestaña reordenada
   ============================================================ */
.dis-dos{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}
@media(max-width:900px){.dis-dos{grid-template-columns:1fr}}

.dis-grupo{margin-bottom:18px}
.dis-grupo h4{margin:0 0 2px; font-size:.86rem; color:var(--txt)}
.dis-grupo p{margin:0 0 10px; font-size:.78rem; color:var(--txt2)}
.dis-grupo__campos{display:flex; flex-wrap:wrap; gap:12px}

/* un color: la muestra grande y el código al lado */
.dis-color{display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px;
  border:1px solid var(--linea); border-radius:12px; background:var(--bg2); min-width:210px}
.dis-color input[type=color]{width:44px; height:44px; border:0; border-radius:10px;
  padding:0; background:none; cursor:pointer}
.dis-color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.dis-color input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.18); border-radius:9px}
.dis-color__t{display:flex; flex-direction:column; gap:2px; min-width:0}
.dis-color__t label{font-size:.76rem; color:var(--txt2); cursor:pointer}
.dis-color__t input[type=text]{border:0; background:none; padding:0; font:inherit;
  font-size:.82rem; font-weight:600; color:var(--txt); width:110px; letter-spacing:.02em}
.dis-color__t input[type=text]:focus{outline:none; border-bottom:1px dashed var(--oro)}

/* la muestra en vivo */
.dis-muestra{position:sticky; top:14px; display:flex; flex-direction:column; gap:8px}
.dis-muestra__fondo{border-radius:14px; padding:18px; background:var(--mf, #FCF2F2);
  border:1px solid var(--linea)}
.dis-muestra__panel{display:flex; flex-direction:column; gap:8px; border-radius:12px;
  padding:16px; background:linear-gradient(180deg, var(--mpa, #FFFBF4), var(--mpb, #FBEEDC));
  box-shadow:0 14px 30px -18px rgba(70,48,12,.4)}
.dis-muestra__ey{font-size:.6rem; letter-spacing:.16em; color:var(--mv, #E8496E); font-weight:600}
.dis-muestra__ti{font-size:1.05rem; line-height:1.25; color:var(--mt, #241F19)}
.dis-muestra__ti em{font-style:normal; color:var(--mv, #E8496E)}
.dis-muestra__tx{font-size:.78rem; color:var(--mt2, #7A7061)}
.dis-muestra__precio{font-size:.8rem; color:var(--ma, #8A5A08); font-weight:600}
.dis-muestra__precio u{text-decoration-color:var(--mv, #E8496E)}
.dis-muestra__btn{align-self:flex-start; padding:8px 16px; border-radius:999px;
  font-size:.78rem; font-weight:700; color:#1A0F04;
  background:linear-gradient(135deg, var(--mol, #F6D9A6), var(--mo, #F2AC5E) 55%, var(--mom, #D9942F))}
.dis-muestra__btn--marca{align-self:center; margin-top:2px}
.dis-muestra__pie{font-size:.68rem; color:var(--txt2); text-align:center}
.dis-muestra__barra{display:flex; align-items:center; gap:9px; padding:12px 14px;
  border-radius:12px; background:var(--mbf, #171310); color:var(--mbt, #F7F2E9)}
.dis-muestra__barra i{width:22px; height:22px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg, var(--mol, #F6D9A6), var(--mo, #F2AC5E))}
.dis-muestra__barra b{font-size:.82rem}
.dis-muestra__barra span{margin-left:auto; font-size:.66rem; opacity:.75}

.dis-pie{display:flex; gap:14px; align-items:stretch; flex-wrap:wrap; margin-top:4px}
.dis-pie > .btn{align-self:center}

/* ============================================================
   EDITOR SOBRE LA WEB · el panel lateral del elemento tocado
   ------------------------------------------------------------
   La dueña escribe directamente encima de la vista previa; esta
   tarjeta solo enseña lo del elemento que está tocando: tamaño y
   color para un texto, enlace y color para un botón.
   ============================================================ */
.ed-tarjeta #edPanel{margin-top:12px}

.ed-espera{border:1.5px dashed var(--borde, rgba(255,255,255,.14)); border-radius:14px;
  padding:16px 18px; color:var(--txt2)}
.ed-espera b{display:block; color:var(--txt); font-size:.92rem; margin-bottom:6px}
.ed-espera p{margin:0 0 6px; font-size:.82rem; line-height:1.55}

.ed-sel{border:1px solid var(--borde, rgba(255,255,255,.14)); border-radius:14px; padding:14px 16px}
.ed-sel__cab{display:flex; align-items:flex-start; gap:10px; padding-bottom:12px;
  border-bottom:1px solid var(--borde, rgba(255,255,255,.12)); margin-bottom:12px}
.ed-punto{width:10px; height:10px; border-radius:50%; margin-top:5px; flex:0 0 auto;
  background:linear-gradient(135deg,#F6D9A6,#D9942F); box-shadow:0 0 0 3px rgba(217,148,47,.22)}
.ed-sel__cab b{display:block; font-size:.95rem}
.ed-sel__cab small{color:var(--txt2); font-size:.74rem}
.ed-x{margin-left:auto; width:26px; height:26px; border:1px solid var(--borde, rgba(255,255,255,.16));
  border-radius:8px; background:transparent; color:var(--txt2); cursor:pointer; font-size:.8rem}
.ed-x:hover{color:var(--txt)}

.ed-grupo{margin-bottom:14px}
.ed-etq{display:block; font-size:.66rem; letter-spacing:.14em; font-weight:800;
  color:var(--txt2); margin-bottom:8px}
.ed-tam{display:flex; align-items:center; gap:9px}
.ed-a1{font-size:.72rem; color:var(--txt2)}
.ed-a2{font-size:1.05rem; color:var(--txt2); font-weight:700}
.ed-tam input[type=range]{flex:1; accent-color:#D9942F; min-width:90px}
.ed-tam b{font-size:.78rem; background:rgba(242,180,95,.12); border:1px solid rgba(242,180,95,.3);
  border-radius:8px; padding:4px 9px; white-space:nowrap; color:var(--oro, #F2AC5E)}

.ed-cols{display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.ed-c{width:32px; height:32px; border-radius:50%; border:2px solid rgba(255,255,255,.35);
  cursor:pointer; position:relative; padding:0}
.ed-c.on{border-color:#fff; box-shadow:0 0 0 2.5px #D9942F}
.ed-c.on::after{content:'✓'; position:absolute; inset:0; display:grid; place-items:center;
  color:#fff; font-size:.78rem; font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.ed-c-mas{width:32px; height:32px; border-radius:50%; border:1.5px dashed var(--txt2);
  color:var(--txt2); display:grid; place-items:center; cursor:pointer; position:relative; font-size:.95rem}
.ed-c-mas input[type=color]{position:absolute; inset:0; opacity:0; cursor:pointer}

.ed-fila{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px}
.ed-actual{font-size:.74rem; color:var(--txt2)}
.ed-actual b{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.72rem;
  background:rgba(255,255,255,.06); border-radius:6px; padding:2px 7px}

.ed-nota{font-size:.74rem; color:var(--txt2); margin:8px 0 0; line-height:1.5}

/* el modo clásico, plegado y discreto */
.ed-clasico{margin-top:14px; border:1px solid var(--borde, rgba(255,255,255,.12));
  border-radius:12px; padding:0}
.ed-clasico > summary{cursor:pointer; list-style:none; padding:11px 14px; font-size:.82rem;
  color:var(--txt2); user-select:none; display:flex; align-items:center; gap:8px}
.ed-clasico > summary::before{content:'▸'; transition:transform .15s}
.ed-clasico[open] > summary::before{transform:rotate(90deg)}
.ed-clasico > summary:hover{color:var(--txt)}
.ed-clasico[open]{padding-bottom:14px}
.ed-clasico[open] > summary{border-bottom:1px solid var(--borde, rgba(255,255,255,.1)); margin-bottom:4px}
.ed-clasico > div, .ed-clasico > .rejilla{padding:0 14px}

/* el select del enlace del botón, alineado con el resto del panel */
.ed-sel select{width:100%; padding:9px 11px; border-radius:10px;
  border:1px solid var(--borde, rgba(255,255,255,.16)); background:var(--fondo2, #17151d);
  color:var(--txt); font:inherit; font-size:.84rem}
body.claro .ed-sel select{background:#fff}

/* el desplegable de etiqueta cuando la elegida es una etiqueta de color
   propia (las de Ajustes → Chat): se tiñe con su color exacto */
.sel-envuelto--propia select{color:var(--etqc);
  border-color:color-mix(in srgb, var(--etqc) 55%, transparent);
  background-color:color-mix(in srgb, var(--etqc) 10%, transparent)}