/* ============================================================================
   panel/assets/bloques.css — el editor de bloques de los mensajes del bot
   ============================================================================
   Lo de panel/assets/bloques.js, con el prefijo `.blq-`. No depende de la
   hoja de ningún módulo: Sorteos lo usa hoy, Cápsulas y Automatizaciones
   mañana. También la vista previa del mensaje (`.blq-dc-*`, `.blq-md-*`).

   Las reglas de siempre (skill diseno-trufas):
     · solo tokens de marca.css y panel.css; amarillo, marrón y grises. El
       color de un rol o de un contenedor es dato, no matiz: solo en su punto
       o su barra;
     · lo grande y opaco es `.caja` (capa doble); lo pequeño, el aro
       `--filo-*` en un `::after` dentro de su `@supports`, del mismo escalón
       que el recorte. Ningún `clip-path` lleva `border` ni `outline`;
     · con `prefers-reduced-motion` nada se mueve.
   ========================================================================== */

.blq-ico{width:1.25em;height:1.25em;flex:none;display:block}
.blq [hidden],.blq-sug[hidden],.blq-barra[hidden]{display:none!important}
.blq{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}

/* ---------- VACÍO: un solo botón ---------- */
.blq-vacio{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--esp-3);
  padding:var(--esp-rejilla) var(--esp-4);border:1px dashed var(--line);background:var(--velo-3);
}
.blq-vacio-texto{margin:0;max-width:40ch;font-size:var(--tipo-leyenda);line-height:1.5;color:var(--texto-3)}

/* ---------- LOS BOTONES PEQUEÑOS (escalón sm: 31–60 px) ----------
   «Añadir bloque», el asa, el ⋯, «Añadir botón», «Deshacer». */
.blq-anadir,.blq-accion,.blq-mini{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:2.25rem;padding:0 var(--esp-3) 0 var(--esp-2);border:0;cursor:pointer;
  font-family:inherit;font-size:var(--tipo-leyenda);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--texto-2);background:var(--velo-1);clip-path:var(--bevel-sm);
  --filo-color:var(--line);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
  transition:color var(--t-rapido) var(--curva),background var(--t-rapido) var(--curva),scale var(--t-rapido) var(--curva);
}
.blq-anadir .blq-ico,.blq-accion .blq-ico,.blq-mini .blq-ico{width:1.05rem;height:1.05rem}
.blq-mini{flex:none;width:2.25rem;padding:0}
.blq-anadir:hover,.blq-accion:hover,.blq-mini:hover{color:var(--texto-1);background:var(--velo-2);--filo-color:var(--texto-3)}
.blq-anadir:active,.blq-accion:active,.blq-mini:active{scale:.96}
.blq-accion{align-self:flex-start}

/* El grande, en el vacío: vivo, pero no la acción amarilla del formulario
   (esa es «Guardar»). */
.blq-anadir-grande{min-height:2.75rem;padding:0 var(--esp-4) 0 var(--esp-3);color:var(--yellow);--filo-color:var(--borde-vivo)}
.blq-anadir-grande:hover,.blq-anadir[aria-expanded="true"]{color:var(--yellow);background:var(--velo-vivo);--filo-color:var(--yellow)}
.blq-anadir-grande .blq-ico{transition:rotate var(--t-medio) var(--mov-rebote)}
.blq-anadir[aria-expanded="true"] .blq-ico{rotate:45deg}

/* El discreto: debajo de cada bloque y dentro de un contenedor. Sin caja
   hasta que se le pasa por encima; una raya fina sigue hasta el borde. */
.blq-insertar{display:flex;align-items:center;gap:var(--esp-2);min-height:1.75rem;padding:var(--esp-1) 0}
.blq-insertar::after{content:'';flex:1;height:0;border-top:1px dashed var(--linea-suave);transition:border-color var(--t-rapido) var(--curva)}
.blq-anadir-discreto{
  min-height:1.75rem;padding:0 var(--esp-2) 0 var(--esp-1);font-size:var(--tipo-etiqueta);letter-spacing:.14em;
  color:var(--texto-3);background:transparent;--filo-color:transparent;clip-path:var(--bevel-xs);
}
.blq-anadir-discreto .blq-ico{width:.95rem;height:.95rem}
.blq-anadir-discreto:hover,.blq-anadir-discreto[aria-expanded="true"]{color:var(--yellow);background:var(--velo-vivo);--filo-color:var(--borde-vivo)}
.blq-insertar:hover::after,.blq-insertar:focus-within::after{border-top-color:var(--borde-vivo)}

/* Los aros de lo pequeño, en su @supports (receta de marca.css). */
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .blq-anadir::after,.blq-accion::after,.blq-mini::after{
    content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
  .blq-anadir-discreto::after,.blq-pastilla::after{
    content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-xs);background:var(--filo-color)}
  .blq-anadir:focus-visible,.blq-accion:focus-visible,.blq-mini:focus-visible{outline:none}
  .blq-anadir:focus-visible::after,.blq-accion:focus-visible::after,.blq-mini:focus-visible::after{
    clip-path:var(--filo-foco-sm);background:var(--yellow)}
  .blq-anadir-discreto:focus-visible::after{clip-path:var(--filo-foco-xs);background:var(--yellow)}
}
@supports not (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .blq-anadir:focus-visible,.blq-accion:focus-visible,.blq-mini:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
}

/* ---------- LAS LISTAS Y LOS BLOQUES ---------- */
.blq-zona{display:flex;flex-direction:column;min-width:0}
.blq-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;min-width:0}
.blq-item{display:flex;flex-direction:column;min-width:0}
.blq-bloque{
  display:flex;flex-direction:column;gap:var(--esp-3);min-width:0;
  padding:var(--esp-2) var(--esp-3) var(--esp-3);--caja-fondo:var(--sup-2);
  transition:opacity var(--t-medio) var(--curva);
}
.blq-bloque:focus-within{--filo-color:var(--borde-vivo)}
.blq-cab{display:flex;align-items:center;gap:var(--esp-2);min-width:0}
.blq-asa{cursor:grab;touch-action:none;background:transparent;--filo-color:transparent}
.blq-asa:hover{--filo-color:var(--line)}
.blq-asa:active{cursor:grabbing}
.blq-mas{margin-left:auto;background:transparent;--filo-color:transparent}
.blq-mas:hover,.blq-mas[aria-expanded="true"]{--filo-color:var(--line);background:var(--velo-2);color:var(--texto-1)}
.blq-rotulo{
  display:inline-flex;align-items:center;gap:var(--esp-2);min-width:0;
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
}
.blq-rotulo > span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blq-rotulo .blq-ico{width:1.1rem;height:1.1rem;color:var(--yellow)}
.blq-num{color:var(--texto-2);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.blq-num::before{content:'·';margin-right:var(--esp-2);color:var(--texto-3)}
.blq-cuerpo{display:flex;flex-direction:column;gap:var(--esp-3);min-width:0}

/* Arrastrando: el bloque se apaga en su sitio (estado, no nivel de texto). */
.blq-item.es-arrastrado > .blq-bloque{opacity:.4}
.blq.es-arrastrando,.blq.es-arrastrando *{cursor:grabbing!important;user-select:none}
.blq-bloque.es-movido{animation:blq-movido var(--t-lento) var(--mov-rebote) both}
@keyframes blq-movido{from{translate:0 var(--esp-2)}to{translate:0 0}}
.blq-fantasma{
  position:fixed;left:0;top:0;z-index:1000;pointer-events:none;
  display:inline-flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sobre-amarillo);background:var(--yellow);clip-path:var(--bevel-xs);
}
.blq-fantasma .blq-ico{width:1rem;height:1rem}
.blq-marca{position:fixed;left:0;top:0;z-index:999;height:3px;background:var(--yellow);pointer-events:none}

/* ---------- EL CONTENEDOR ----------
   Su lista va con la barra de su color a la izquierda, como en Discord. Al
   arrastrar algo encima, se enciende. */
.blq-fila-cont{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--esp-3) var(--esp-rejilla)}
.blq-zona-dentro{
  gap:0;padding:var(--esp-2) 0 var(--esp-1) var(--esp-3);
  border-left:3px solid var(--blq-color, var(--line));background:var(--velo-3);
  transition:background var(--t-rapido) var(--curva);
}
.blq-zona-dentro .blq-bloque{--caja-fondo:var(--sup-1)}
.blq-zona-dentro.es-destino{background:var(--velo-vivo)}
.blq.es-arrastrando .blq-zona-dentro:not(.es-destino){background:var(--velo-1)}
.blq.es-arrastrando-caja .blq-zona-dentro{background:var(--velo-3)}
.blq-dentro-vacio{display:flex;align-items:center;min-height:2.75rem;padding-right:var(--esp-3)}

/* ---------- EL ESTADO: contador y deshacer ---------- */
.blq-estado{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.blq-contador{margin:0;font-size:var(--tipo-leyenda);color:var(--texto-3);font-variant-numeric:tabular-nums}
.blq-contador.es-cerca,.blq-cuenta.es-cerca{color:var(--yellow)}
.blq-contador.es-pasado,.blq-cuenta.es-pasado{color:var(--texto-1);font-weight:600;background:var(--velo-alerta);padding:0 var(--esp-1)}
.blq-deshacer{align-self:auto}

/* ---------- LOS CAMPOS ---------- */
.blq-nota{margin:0;font-size:var(--tipo-leyenda);line-height:1.45;color:var(--texto-3)}
p.blq-nota{display:flex;align-items:flex-start;gap:var(--esp-2)}
p.blq-nota .blq-ico{width:1rem;height:1rem;margin-top:.1em}
.blq-aviso{color:var(--gris-3)}
.blq-campo{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0}
.blq [aria-invalid="true"]{border-color:var(--gris-3);box-shadow:0 0 0 3px var(--velo-alerta)}
.blq-campo-texto{display:block}
.blq .campo textarea.blq-area{min-height:4.25rem;resize:none;overflow:hidden;line-height:1.5}
.blq-pie{display:flex;justify-content:flex-end;margin-top:calc(var(--esp-2) * -1)}
.blq-cuenta{font-size:var(--tipo-etiqueta);color:var(--texto-3);font-variant-numeric:tabular-nums}

/* El accesorio de un texto, debajo y con su filete. */
.blq-accesorio{display:flex;flex-direction:column;gap:var(--esp-2);padding-top:var(--esp-3);border-top:1px dashed var(--linea-suave)}

/* Imagen, archivo: la dirección con su miniatura; debajo, los extras. */
.blq-fila-img{display:grid;grid-template-columns:minmax(0,1fr) 5rem auto;gap:var(--esp-3);align-items:start}
.blq-fila-img > .blq-mini{margin-top:1.45rem}
.blq-fila-img:not(:has(> .blq-mini)){grid-template-columns:minmax(0,1fr) 5rem}
.blq-miniatura{
  position:relative;display:grid;place-items:center;width:5rem;height:3.75rem;margin-top:1.3rem;overflow:hidden;
  border:1px dashed var(--line);background:var(--sup-0);color:var(--texto-3);
}
.blq-miniatura .blq-ico{width:1.4rem;height:1.4rem}
.blq-miniatura img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.blq-miniatura.es-mal{border-color:var(--gris-3);color:var(--gris-3);background:var(--velo-alerta)}
.blq-fila-extra{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--esp-3) var(--esp-rejilla);align-items:end}
.blq-fila-extra .blq-interruptor{padding-bottom:var(--esp-2)}
.blq-fila-sep{display:flex;flex-wrap:wrap;gap:var(--esp-3) var(--esp-rejilla)}

/* Botones y opciones de un menú: una fila por cada uno. */
.blq-filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-3)}
.blq-fila-boton{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 4.5rem auto;gap:var(--esp-2);align-items:end}
.blq-fila-boton .blq-campo-url{grid-column:1 / -1;grid-row:2}
.blq-accesorio .blq-fila-boton{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 4.5rem auto}
.blq-accesorio .blq-fila-boton .blq-campo-url{grid-column:auto;grid-row:auto}
.blq-fila-opcion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 4.5rem auto;gap:var(--esp-2);align-items:end}
.blq-fila-boton > .blq-mini,.blq-fila-opcion > .blq-mini{min-height:var(--alto-control);width:var(--alto-control)}
.blq-campo-emoji input{text-align:center}

@media (max-width:36rem){
  .blq-bloque{padding:var(--esp-2) var(--esp-2) var(--esp-3) var(--esp-3)}
  .blq-zona-dentro{padding-left:var(--esp-2)}
  .blq-fila-img{grid-template-columns:minmax(0,1fr) 4rem}
  .blq-fila-img > .blq-mini{grid-column:2;grid-row:2;margin-top:0;justify-self:end}
  .blq-miniatura{width:4rem;height:3rem}
  .blq-fila-extra{grid-template-columns:minmax(0,1fr)}
  .blq-fila-boton,.blq-accesorio .blq-fila-boton{grid-template-columns:minmax(0,1fr) 4rem auto}
  .blq-fila-boton .blq-campo-estilo{grid-column:1 / -1}
  .blq-fila-boton .blq-campo-url,.blq-accesorio .blq-fila-boton .blq-campo-url{grid-column:1 / -1;grid-row:auto}
  .blq-fila-opcion{grid-template-columns:minmax(0,1fr) 4rem auto}
  .blq-fila-opcion > .blq-campo:nth-child(2){grid-column:1 / -1;grid-row:2}
  .blq .campo textarea.blq-area,.blq .campo input,.blq .campo select{font-size:1rem}
}

/* Un interruptor: un checkbox con role="switch". */
.blq-interruptor{position:relative;display:inline-flex;align-items:flex-start;gap:var(--esp-3);cursor:pointer;min-width:0}
.blq-interruptor input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.blq-interruptor-pista{
  position:relative;flex:none;width:2.5rem;height:1.375rem;margin-top:.05rem;
  background:var(--sup-0);box-shadow:inset 0 0 0 1px var(--line);
  transition:background var(--t-rapido) var(--curva);
}
.blq-interruptor-pista::after{
  content:'';position:absolute;top:.25rem;left:.25rem;width:.875rem;height:.875rem;background:var(--texto-3);
  transition:translate var(--t-medio) var(--mov-rebote),background var(--t-rapido) var(--curva);
}
.blq-interruptor input:checked + .blq-interruptor-pista{background:var(--yellow);box-shadow:none}
.blq-interruptor input:checked + .blq-interruptor-pista::after{translate:1.125rem 0;background:var(--sobre-amarillo)}
.blq-interruptor input:focus-visible + .blq-interruptor-pista{outline:2px solid var(--yellow);outline-offset:2px}
.blq-interruptor-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.blq-interruptor-nombre{font-size:var(--tipo-descripcion);color:var(--texto-1)}

/* El color: muestras cuadradas (sin bisel: son un dato), la marcada con un
   aro amarillo por fuera. «Sin color» es un cuadro tachado. */
.blq-color{margin:0;padding:0;border:0;min-width:0;display:flex;flex-direction:column;gap:var(--esp-2)}
.blq-color legend{padding:0;margin-bottom:var(--esp-2)}
.blq-color-fila{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.blq-muestra{position:relative;display:inline-flex;align-items:center;gap:var(--esp-2);cursor:pointer;
  font-size:var(--tipo-leyenda);color:var(--texto-2)}
.blq-muestra input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.blq-muestra-cuadro{
  flex:none;display:block;width:1.75rem;height:1.75rem;background:var(--muestra, var(--velo-2));
  box-shadow:inset 0 0 0 1px var(--linea-suave);
  outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--t-rapido) var(--curva);
}
.blq-muestra-cuadro.es-nada{background:linear-gradient(135deg,transparent calc(50% - 1px),var(--texto-3) calc(50% - 1px),var(--texto-3) calc(50% + 1px),transparent calc(50% + 1px)),var(--sup-0)}
.blq-muestra.es-defecto{padding-right:var(--esp-1)}
.blq-muestra:hover .blq-muestra-cuadro{outline-color:var(--texto-3)}
.blq-muestra input:checked + .blq-muestra-cuadro{outline-color:var(--yellow)}
.blq-muestra input:checked ~ .blq-muestra-texto{color:var(--texto-1)}
.blq-muestra input:focus-visible + .blq-muestra-cuadro{outline-color:var(--texto-1);outline-style:dashed}
.blq-muestra.es-otro .blq-muestra-cuadro{display:none}
.blq-muestra.es-otro{min-height:1.75rem;padding:0 var(--esp-1)}
.blq-muestra.es-otro input:checked ~ .blq-muestra-texto{color:var(--yellow);font-weight:600}
.blq-muestra.es-otro input:focus-visible ~ .blq-muestra-texto{outline:2px dashed var(--texto-1);outline-offset:2px}
.blq-muestra.es-otro:has(input:checked) + .blq-color-elegir{outline:2px solid var(--yellow);outline-offset:2px}
.blq-color-elegir{width:2.25rem;height:1.75rem;padding:0;border:1px solid var(--line);background:var(--sup-0);cursor:pointer}
.blq-color-elegir:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ---------- LO QUE FLOTA ----------
   Menú y sugerencias son cajas opacas (`.caja`, capa doble); la barrita de
   formato mide ~40 px y lleva el aro sm. Todo en <body>, encima del panel
   (la barra de arriba va a 60) y debajo de los avisos (90). */
.blq-menu,.blq-sug{
  position:fixed;left:0;top:0;z-index:80;overflow-y:auto;overscroll-behavior:contain;
  --caja-fondo:var(--sup-2);--filo-color:var(--borde-vivo);
}
.blq-menu{width:min(20rem,calc(100vw - 2 * var(--esp-4)));padding:var(--esp-2) 0}
.blq-menu-titulo{
  margin:0;padding:var(--esp-1) var(--esp-4) var(--esp-2);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
}
.blq-menu-sep{height:1px;margin:var(--esp-1) var(--esp-4);background:var(--linea-suave)}
.blq-menu-item{
  display:flex;align-items:center;gap:var(--esp-3);width:100%;min-height:2.5rem;padding:var(--esp-1) var(--esp-4);
  border:0;background:transparent;cursor:pointer;text-align:left;
  font-family:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);
  transition:background var(--t-rapido) var(--curva),color var(--t-rapido) var(--curva);
}
.blq-menu-item > .blq-ico{width:1.25rem;height:1.25rem;color:var(--yellow)}
.blq-menu-textos{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.blq-menu-nombre{font-weight:500}
.blq-menu-ayuda{font-size:var(--tipo-leyenda);line-height:1.35;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blq-menu-item:hover,.blq-menu-item:focus-visible{background:var(--velo-2);outline:none}
.blq-menu-item:focus-visible{box-shadow:inset 3px 0 0 var(--yellow)}
.blq-menu-item[aria-disabled="true"]{cursor:default;color:var(--texto-3)}
.blq-menu-item[aria-disabled="true"] > .blq-ico{color:var(--gris-2)}
.blq-menu-item[aria-disabled="true"]:hover{background:transparent}
.blq-menu-item.es-peligro > .blq-ico{color:var(--gris-3)}
.blq-menu-item.es-peligro:hover,.blq-menu-item.es-peligro:focus-visible{background:var(--velo-alerta)}
.blq-atajo{
  flex:none;font-family:inherit;font-size:var(--tipo-etiqueta);letter-spacing:.06em;color:var(--texto-3);
  padding:0 var(--esp-1);border:1px solid var(--linea-suave);
}
/* «Próximamente»: etiqueta secundaria (escalón xs). */
.blq-pastilla{
  position:relative;flex:none;display:inline-flex;align-items:center;min-height:1.375rem;padding:0 var(--esp-2);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
  clip-path:var(--bevel-xs);--filo-color:var(--line);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}

/* Las sugerencias de «@» y «/». */
.blq-sug{width:min(19rem,calc(100vw - 2 * var(--esp-4)));max-height:17rem;padding:var(--esp-1) 0}
.blq-sug-lista{list-style:none;margin:0;padding:0}
.blq-sug-grupo{
  padding:var(--esp-2) var(--esp-3) var(--esp-1);
  font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3);
}
.blq-sug-op{
  display:flex;align-items:center;gap:var(--esp-3);min-height:2.375rem;padding:var(--esp-1) var(--esp-3);
  cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-1);
}
.blq-sug-op.es-activa{background:var(--velo-vivo);box-shadow:inset 3px 0 0 var(--yellow)}
.blq-sug-op.es-apagada{cursor:default;color:var(--texto-3);font-size:var(--tipo-leyenda)}
.blq-sug-textos{display:flex;flex-direction:column;min-width:0;flex:1}
.blq-sug-nombre{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blq-sug-ayuda{font-size:var(--tipo-leyenda);color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blq-punto{flex:none;display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--rol, var(--gris-3))}
.blq-punto.sin-color{background:transparent;box-shadow:inset 0 0 0 2px var(--gris-3)}
.blq-glifo{
  flex:none;display:inline-grid;place-items:center;min-width:2rem;height:1.75rem;padding:0 var(--esp-1);
  font-size:var(--tipo-leyenda);color:var(--yellow);background:var(--velo-1);border:1px solid var(--linea-suave);
}
.blq-glifo b{font-weight:700}
.blq-glifo code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}

/* La barrita de formato al seleccionar. */
.blq-barra{
  position:fixed;left:0;top:0;z-index:81;display:flex;gap:2px;padding:var(--esp-1);
  background:var(--sup-2);clip-path:var(--bevel-sm);
  --filo-color:var(--borde-vivo);box-shadow:inset 0 0 0 1px var(--filo-borde, var(--filo-color));
}
.blq-barra-boton{
  display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;cursor:pointer;
  background:transparent;color:var(--texto-1);font-family:inherit;
  transition:background var(--t-rapido) var(--curva),color var(--t-rapido) var(--curva);
}
.blq-barra-boton .blq-glifo{min-width:0;height:auto;padding:0;border:0;background:none;color:inherit;font-size:var(--tipo-cuerpo)}
.blq-barra-boton:hover{background:var(--velo-2);color:var(--yellow)}
.blq-barra-boton:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.blq-barra-boton:active{scale:.92}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .blq-barra::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-sm);background:var(--filo-color)}
}

/* ---------- LA VISTA PREVIA: como lo pinta Discord ----------
   Sin clip-path: el contenedor de Components V2 es un rectángulo con su
   barra de color (dato) a la izquierda. */
.blq-dc{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.blq-dc-contenedor{
  position:relative;display:flex;flex-direction:column;gap:var(--esp-2);min-width:0;
  padding:var(--esp-3) var(--esp-4);background:var(--sup-1);border:1px solid var(--line);
}
.blq-dc-contenedor.con-color{border-left:4px solid var(--dc-color)}
.blq-dc-contenedor.es-spoiler{background:repeating-linear-gradient(135deg,var(--sup-1) 0 8px,var(--velo-2) 8px 9px)}
.blq-dc-suelto{display:flex;flex-direction:column;gap:var(--esp-2)}
.blq-dc-etq{
  align-self:flex-start;font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);
}
.blq-dc-texto{display:flex;flex-direction:column;gap:var(--esp-1);font-size:var(--tipo-descripcion);line-height:1.45;color:var(--texto-1);overflow-wrap:anywhere;min-width:0}
.blq-dc-texto p,.blq-dc-texto ul,.blq-dc-texto ol,.blq-dc-texto pre,.blq-dc-texto blockquote{margin:0}
.blq-dc-texto strong{font-weight:600}
.blq-md-h1,.blq-md-h2,.blq-md-h3{font-weight:700;line-height:1.2;color:var(--texto-1)}
.blq-md-h1{font-size:var(--tipo-dato)}
.blq-md-h2{font-size:var(--tipo-entradilla)}
.blq-md-h3{font-size:var(--tipo-cuerpo)}
.blq-md-sub{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.blq-md-cita{display:flex;flex-direction:column;gap:var(--esp-1);padding-left:var(--esp-3);border-left:3px solid var(--line)}
.blq-md-lista{padding-left:1.25rem}
.blq-md-codigo{padding:0 .2em;background:var(--velo-2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.blq-md-pre{padding:var(--esp-2) var(--esp-3);background:var(--sup-0);border:1px solid var(--line);white-space:pre-wrap;font-size:var(--tipo-leyenda)}
.blq-md-pre code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.blq-md-spoiler{color:transparent;background:var(--gris-1)}
.blq-md-enlace{color:var(--yellow-alto);text-decoration:underline;text-underline-offset:2px}
.blq-md-var{padding:0 .15em;color:var(--yellow);background:var(--velo-vivo);box-shadow:inset 0 -1px 0 var(--borde-vivo)}
/* Una mención: en el color del rol (dato, no matiz), con su velo; las
   masivas, tachadas, porque el bot no las notifica. */
.blq-dc-mencion{
  padding:0 .2em;font-weight:500;color:var(--rol, var(--yellow));
  background:color-mix(in srgb, var(--rol, var(--yellow)) 16%, transparent);
}
.blq-dc-mencion-persona{--rol:var(--texto-2)}
.blq-dc-masiva{color:var(--texto-3)}
.blq-dc-aviso{display:flex;align-items:flex-start;gap:var(--esp-1);margin:0;font-size:var(--tipo-etiqueta);line-height:1.4;color:var(--gris-3)}
.blq-dc-aviso .blq-ico{width:.9rem;height:.9rem}
.blq-dc-sep{flex:none;height:0;margin:0}
.blq-dc-sep.es-grande{margin:var(--esp-3) 0}
.blq-dc-sep.con-linea{border-top:1px solid var(--line)}
.blq-dc-imagen{position:relative;display:flex;flex-direction:column;gap:var(--esp-1)}
.blq-dc-img{display:block;min-width:0}
.blq-dc-img img{display:block;max-width:100%;max-height:16rem;object-fit:contain}
.blq-dc-imagen.es-spoiler img{filter:blur(14px) brightness(.7)}
.blq-dc-imagen.es-spoiler{overflow:hidden}
.blq-dc-hueco{
  display:flex;align-items:center;justify-content:center;gap:var(--esp-2);min-height:5rem;padding:var(--esp-3);
  background:var(--velo-2);border:1px dashed var(--line);font-size:var(--tipo-leyenda);color:var(--texto-3);overflow-wrap:anywhere;text-align:center;
}
.blq-dc-hueco .blq-ico{width:1.25rem;height:1.25rem}
.blq-dc-seccion{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--esp-3);align-items:start}
.blq-dc-accesorio{display:flex;justify-content:flex-end}
.blq-dc-mini{width:4.5rem;height:4.5rem;overflow:hidden}
.blq-dc-mini img{width:100%;height:100%;max-height:none;object-fit:cover}
.blq-dc-mini .blq-dc-hueco{min-height:4.5rem;padding:var(--esp-1);font-size:var(--tipo-etiqueta)}
.blq-dc-mini .blq-dc-hueco span{display:none}
.blq-dc-archivo{
  display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-3);max-width:24rem;
  background:var(--sup-0);border:1px solid var(--line);
}
.blq-dc-archivo .blq-ico{width:1.75rem;height:1.75rem;color:var(--texto-3)}
.blq-dc-archivo-texto{display:flex;flex-direction:column;min-width:0;font-size:var(--tipo-leyenda);color:var(--texto-3)}
.blq-dc-archivo-texto b{font-weight:600;font-size:var(--tipo-descripcion);color:var(--yellow-alto);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blq-dc-fila{display:flex;flex-wrap:wrap;gap:var(--esp-2)}
.blq-dc-boton{
  display:inline-flex;align-items:center;gap:var(--esp-1);min-height:2rem;max-width:100%;padding:0 var(--esp-4);
  font-size:var(--tipo-leyenda);font-weight:600;color:var(--texto-1);background:var(--velo-2);overflow-wrap:anywhere;
}
.blq-dc-boton .blq-ico{width:.95rem;height:.95rem}
.blq-dc-boton-primario{background:var(--yellow);color:var(--sobre-amarillo)}
.blq-dc-boton-exito{background:var(--brown)}
.blq-dc-boton-peligro{background:var(--gris-2)}
/* Los que no son de enlace salen desactivados en Discord (estado). */
.blq-dc-boton.es-inactivo{opacity:.55}
.blq-dc-menu{
  display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);min-height:2.5rem;padding:0 var(--esp-3);
  font-size:var(--tipo-descripcion);color:var(--texto-3);background:var(--sup-0);border:1px solid var(--line);opacity:.7;
}
.blq-dc-menu .blq-ico{width:1rem;height:1rem}
.blq-dc-vacio{
  display:flex;align-items:flex-start;gap:var(--esp-2);margin:0;padding:var(--esp-3);border:1px dashed var(--line);
  font-size:var(--tipo-leyenda);line-height:1.45;color:var(--texto-3);
}
.blq-dc-vacio .blq-ico{width:1.1rem;height:1.1rem}
@media (max-width:36rem){
  .blq-dc-contenedor{padding:var(--esp-3)}
  .blq-dc-mini{width:3.5rem;height:3.5rem}
}

@media (prefers-reduced-motion: reduce){
  .blq-bloque.es-movido{animation:none}
  .blq-anadir,.blq-accion,.blq-mini,.blq-anadir-grande .blq-ico,.blq-interruptor-pista::after,
  .blq-muestra-cuadro,.blq-menu-item,.blq-barra-boton,.blq-bloque{transition:none}
  .blq-anadir:active,.blq-accion:active,.blq-mini:active,.blq-barra-boton:active{scale:none}
  .blq-anadir[aria-expanded="true"] .blq-ico{rotate:none}
}