/* ============================================================================
   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-wrap:wrap;align-items:center;gap:var(--esp-2) var(--esp-3);padding:var(--esp-2) 0;
}
.blq-vacio-texto{margin:0;flex:1 1 16rem;max-width:48ch;font-size:var(--tipo-leyenda);line-height:1.5;color:var(--texto-3)}

/* ---------- LOS BOTONES PEQUEÑOS (escalón compacto: 31–36 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-compacto);   /* 36 px de alto: escalón de 31–36 */
  --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-compacto);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-compacto);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 (19 oct 2026, COO) ----------
   «Como escribir un mensaje en Discord»: sin cajas ni cabeceras. Cada bloque
   es una fila con el asa ⠿ a la izquierda (que es lo que lo delimita), lo
   suyo en medio, escrito en línea, y a la derecha el ⋯ (al pasar o enfocar)
   y la ✕. Al pasar, un velo muy suave enseña hasta dónde llega. */
.blq-zona{position:relative;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{
  position:relative;display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;gap:0 var(--esp-2);align-items:start;
  min-width:0;padding:var(--esp-1) 0;transition:background var(--t-rapido) var(--curva),opacity var(--t-medio) var(--curva);
}
.blq-bloque:hover:not(:has(.blq-bloque:hover)),.blq-bloque:focus-within:not(:has(.blq-bloque:focus-within)){background:var(--velo-1)}
.blq-cuerpo{display:flex;flex-direction:column;gap:var(--esp-1);min-width:0;padding-top:2px}
.blq-cuerpo > .blq-anadir{align-self:flex-start}
.blq-acciones{display:flex;align-items:center;gap:2px}
/* El asa y las dos acciones: pequeñas y sin aro hasta que se usan. */
.blq-asa,.blq-mas,.blq-borrar{width:1.5rem;min-height:1.75rem;background:transparent;--filo-color:transparent;color:var(--texto-3)}
.blq-mas,.blq-borrar{width:1.75rem}
.blq-asa{cursor:grab;touch-action:none;opacity:.6}
.blq-asa:active{cursor:grabbing}
.blq-asa .blq-ico,.blq-mas .blq-ico,.blq-borrar .blq-ico{width:.95rem;height:.95rem}
.blq-bloque:hover > .blq-asa,.blq-asa:focus-visible{opacity:1}
.blq-asa:hover,.blq-mas:hover,.blq-mas[aria-expanded="true"]{color:var(--texto-1);background:var(--velo-2);--filo-color:transparent}
.blq-borrar:hover{color:var(--texto-1);background:var(--velo-alerta);--filo-color:transparent}
/* El ⋯ aparece al pasar o al enfocar el bloque; en pantallas táctiles, siempre. */
.blq-mas{opacity:0}
.blq-bloque:hover > .blq-acciones .blq-mas,.blq-bloque:focus-within > .blq-acciones .blq-mas,.blq-mas[aria-expanded="true"]{opacity:1}
/* (hover:none) y (pointer:coarse): hay navegadores del móvil que no dicen «none». */
@media (hover:none),(pointer:coarse){ .blq-mas,.blq-asa{opacity:1} }

/* 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}

/* «+» entre bloques: una franja fina que solo enseña el botón al pasar o
   enfocar; debajo del último, siempre. */
.blq-insertar{display:flex;align-items:center;height:.75rem;padding-left:2rem;position:relative;z-index:2}
.blq-item:last-child > .blq-insertar{height:auto;min-height:1.5rem}
.blq-insertar .blq-anadir-discreto{min-height:1.25rem;opacity:0;transition:opacity var(--t-rapido) var(--curva)}
.blq-insertar::after{opacity:0}
.blq-item:hover > .blq-insertar .blq-anadir-discreto,.blq-insertar:focus-within .blq-anadir-discreto,
.blq-item:last-child > .blq-insertar .blq-anadir-discreto{opacity:1}
.blq-item:hover > .blq-insertar::after,.blq-insertar:focus-within::after{opacity:1}
@media (hover:none){ .blq-insertar .blq-anadir-discreto{opacity:.7} }
/* El de FUERA del borde del mensaje: alineado con el borde exterior y siempre a la vista. */
.blq-insertar.blq-insertar-fuera{height:auto;min-height:1.5rem;padding-left:0}
.blq-insertar-fuera .blq-anadir-discreto,.blq-insertar-fuera::after{opacity:1}
/* Bajo un contenedor, su «Añadir bloque» de fuera siempre a la vista (también si no es el último). */
.blq-item:has(> .blq-bloque-contenedor) > .blq-insertar{height:auto;min-height:1.5rem}
.blq-item:has(> .blq-bloque-contenedor) > .blq-insertar .blq-anadir-discreto,.blq-item:has(> .blq-bloque-contenedor) > .blq-insertar::after{opacity:1}

/* ---------- LA BARRA DE COLOR (contenedor y mensaje) ----------
   Una raya de 4 px a la izquierda, como en Discord; el botón es algo más
   ancho para que se pueda pulsar. Su color es dato, no matiz. */
.blq-barra-color{
  position:absolute;left:0;top:0;bottom:0;z-index:1;width:.875rem;padding:0;border:0;cursor:pointer;background:transparent;
}
.blq-barra-color::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blq-color, var(--line));
  transition:width var(--t-rapido) var(--curva);
}
.blq-barra-color:hover::before,.blq-barra-color[aria-expanded="true"]::before{width:7px}
.blq-barra-color:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
.blq-zona-mensaje{padding:var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4);background:var(--velo-1)}
.blq-zona-mensaje.con-cajas{padding:0;background:transparent}

/* ---------- EL CONTENEDOR: su barra y lo de dentro ---------- */
.blq-zona-dentro{
  gap:0;padding:var(--esp-1) var(--esp-1) var(--esp-1) var(--esp-4);background:var(--velo-1);
  transition:background var(--t-rapido) var(--curva);
}
.blq-zona-dentro.es-spoiler{background:repeating-linear-gradient(135deg,var(--velo-1) 0 10px,var(--velo-2) 10px 11px)}
.blq-zona-dentro.es-destino{background:var(--velo-vivo)}
.blq.es-arrastrando .blq-zona-dentro:not(.es-destino){background:var(--velo-2)}
.blq.es-arrastrando-caja .blq-zona-dentro{background:var(--velo-1)}
.blq-dentro-vacio{display:flex;align-items:center;min-height:2.25rem}

/* Bloques sueltos sin ningún contenedor (COO, 27 oct 2026): el bot los
   enseñará en un recuadro; una línea discreta lo dice y ofrece meterlos en uno. */
.blq-sueltos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-3);margin-top:var(--esp-2)}
.blq-sueltos[hidden]{display:none}
.blq-sueltos .blq-nota{margin:0}

/* ---------- 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)}

/* El texto, en línea: sin caja ni relleno de campo. El foco se ve con la
   raya amarilla de debajo (y el velo del bloque). */
.blq-campo-texto{display:block;min-width:0}
.blq .campo textarea.blq-area{
  display:block;width:100%;min-height:0;margin:0;padding:var(--esp-1) 0;border:0;border-radius:0;background:transparent;box-shadow:none;
  resize:none;overflow:hidden;line-height:1.5;font-size:var(--tipo-cuerpo);color:var(--texto-1);
}
.blq .campo textarea.blq-area:focus,.blq .campo textarea.blq-area:focus-visible{outline:none;box-shadow:inset 0 -1px 0 var(--yellow)}
.blq .campo textarea.blq-area::placeholder{color:var(--texto-3)}
.blq-pie{display:none;justify-content:space-between;gap:var(--esp-3);font-size:var(--tipo-etiqueta);color:var(--texto-3)}
.blq-cuerpo:focus-within > .blq-pie,.blq-pie.es-fijo{display:flex}
.blq-pistas{min-width:0}
.blq-cuenta{flex:none;font-size:var(--tipo-etiqueta);color:var(--texto-3);font-variant-numeric:tabular-nums}

/* Un campo fino: solo la raya de debajo. */
.blq-fino-campo{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.blq input.blq-fino{
  width:100%;min-width:0;margin:0;padding:var(--esp-1) 0;border:0;border-bottom:1px dashed var(--linea-suave);border-radius:0;
  background:transparent;box-shadow:none;font-family:inherit;font-size:var(--tipo-descripcion);color:var(--texto-1);
}
.blq input.blq-fino::placeholder{color:var(--texto-3)}
.blq input.blq-fino:focus,.blq input.blq-fino:focus-visible{outline:none;border-bottom:1px solid var(--yellow)}
.blq-fino-nota{font-size:var(--tipo-etiqueta)}

/* El accesorio, a la derecha del texto como en Discord. */
.blq-fila-texto{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-3);align-items:start}
.blq-fila-texto.con-accesorio{grid-template-columns:minmax(0,1fr) auto}
.blq-accesorio{display:flex;align-items:flex-start}
/* «Añadir a la derecha» (19 oct 2026): solo icono, donde Discord pinta la
   miniatura. Como el ⋯: al pasar o enfocar el bloque; en táctil, siempre. */
.blq-fila-texto.tiene-anadir:not(.con-accesorio){grid-template-columns:minmax(0,1fr) auto}
.blq-acc-anadir{width:1.75rem;min-height:1.75rem;background:transparent;--filo-color:transparent;color:var(--texto-3);opacity:0}
.blq-acc-anadir .blq-ico{width:.95rem;height:.95rem}
.blq-acc-anadir:hover,.blq-acc-anadir[aria-expanded="true"]{color:var(--texto-1);background:var(--velo-2);--filo-color:transparent}
.blq-bloque:hover > .blq-cuerpo .blq-acc-anadir,.blq-bloque:focus-within > .blq-cuerpo .blq-acc-anadir,.blq-acc-anadir:focus-visible,.blq-acc-anadir[aria-expanded="true"]{opacity:1}
@media (hover:none),(pointer:coarse){ .blq-acc-anadir{opacity:1} }
.blq-miniatura{
  position:relative;display:grid;place-items:center;overflow:hidden;color:var(--texto-3);background:var(--velo-2);
}
.blq-miniatura .blq-ico{width:1.4rem;height:1.4rem}
.blq-miniatura.es-mal{color:var(--gris-3);background:var(--velo-alerta)}
button.blq-acc-mini{width:4.5rem;height:4.5rem;padding:0;border:0;cursor:pointer;font:inherit}
button.blq-acc-mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
button.blq-acc-mini:hover{color:var(--texto-1);background:var(--velo-3)}
button.blq-acc-mini:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* Subir una imagen (23 oct 2026, migración 213): «Subir imagen» bajo la
   dirección, el aviso de los enlaces de adjuntos de Discord (que caducan) y
   el error de la subida. Sin `subirImagen`, solo queda el aviso. */
.blq-subir{display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-1) var(--esp-3);min-width:0}
.blq-subir [hidden]{display:none}
.blq-subir > .blq-nota{flex:1 1 100%;margin-top:var(--esp-1);overflow-wrap:anywhere}
.blq-subir-boton{margin-top:var(--esp-1);max-width:100%}
.blq-subir-boton[disabled]{cursor:progress}
.blq-subir-boton .carga-mini{--moneda:1.1rem}
.blq-subir-aviso .blq-ico{color:var(--yellow)}
.blq-subir-info .blq-ico{color:var(--yellow)}
.blq-subir-error{color:var(--texto-1)}
.blq-subir-error .blq-ico{color:var(--yellow)}
.es-soltando input,.es-soltando.blq-miniatura{box-shadow:0 0 0 2px var(--yellow)}
.blq-campo.es-soltando,.blq-fino-campo.es-soltando{outline:2px dashed var(--yellow);outline-offset:3px}
/* Imagen que no carga: icono de aviso y su frase; en la miniatura pequeña, solo el icono. */
.blq-miniatura .blq-mal-texto{font-size:var(--tipo-leyenda);line-height:1.3;color:var(--texto-3);text-align:left}
.blq-img-vista.es-mal{grid-auto-flow:column;gap:var(--esp-2);justify-content:start;align-items:center}
button.blq-acc-mini .blq-mal-texto{display:none}

/* La imagen: la propia imagen (o un hueco fino) y su dirección debajo. */
.blq-img-vista{justify-items:start;min-height:3rem;max-width:100%;padding:var(--esp-2)}
.blq-bloque-imagen .blq-fino-campo{max-width:var(--campo-l)}
.blq-pop .blq-campo-emoji{max-width:var(--campo-s)}
.blq-img-vista.con-img{padding:0;background:transparent}
.blq-img-vista img{display:block;max-width:100%;max-height:14rem;object-fit:contain}
.blq-img-vista.es-spoiler img{filter:blur(14px) brightness(.7)}

/* El archivo: como el adjunto de Discord, en una franja. */
.blq-fila-archivo{display:flex;align-items:center;gap:var(--esp-2);max-width:var(--campo-l);padding:var(--esp-1) var(--esp-3);background:var(--velo-1)}
.blq-fila-archivo > .blq-ico{width:1.25rem;height:1.25rem;color:var(--texto-3)}
.blq-fila-archivo.es-spoiler{background:repeating-linear-gradient(135deg,var(--velo-1) 0 10px,var(--velo-2) 10px 11px)}
.blq-fila-archivo .blq-fino-campo:not(:focus-within) .blq-fino-nota{display:none}

/* El separador: la casilla de la línea, la raya y el margen. */
.blq-fila-sep{display:flex;align-items:center;gap:var(--esp-3);min-height:1.75rem}
.blq-sep-casilla{flex:none;margin:0}
.blq-sep-raya{flex:1 1 auto;min-width:2rem;height:0;border-top:1px solid var(--texto-3)}
.sin-linea .blq-sep-raya{border-top:1px dashed var(--linea-suave)}
.es-grande .blq-fila-sep{padding-block:var(--esp-3)}
.blq-sep-margen{
  flex:none;min-height:1.75rem;padding:0 var(--esp-2);border:0;cursor:pointer;font-family:inherit;
  font-size:var(--tipo-leyenda);color:var(--texto-2);background:var(--velo-1);
  transition:color var(--t-rapido) var(--curva),background var(--t-rapido) var(--curva);
}
.blq-sep-margen:hover{color:var(--texto-1);background:var(--velo-2)}
.blq-sep-margen:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* Botones: como salen en Discord (rectángulos: son vista previa, no
   controles de la marca), en fila. Se pulsan para editarlos. */
.blq-fila-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--esp-2)}
.blq-chip-li{display:flex}
.blq-chip-li[hidden]{display:none}
button.blq-chip{border:0;cursor:pointer;font-family:inherit;max-width:16rem;transition:filter var(--t-rapido) var(--curva)}
button.blq-chip:hover{filter:brightness(1.15)}
button.blq-chip:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.blq-chip-texto{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.blq-chip-texto.es-vacio{font-style:italic;font-weight:400;opacity:.75}
.blq-chip-emoji{flex:none}
.blq-chip-mas{width:2rem;min-height:2rem}

/* El menú de selección: la caja de Discord y las opciones en filas finas. */
.blq-menu-dc{display:flex;align-items:center;gap:var(--esp-2);max-width:var(--campo-l);padding:0 var(--esp-3);background:var(--sup-0);border:1px solid var(--line)}
.blq-menu-dc > .blq-ico{width:1rem;height:1rem;color:var(--texto-3)}
.blq-menu-dc input.blq-fino{border-bottom-color:transparent}
.blq-filas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-1);max-width:var(--campo-l)}
.blq-fila-opcion{display:grid;grid-template-columns:minmax(2.5rem,4.75rem) minmax(0,1fr) auto auto;gap:var(--esp-2);align-items:center}
.blq-fila-opcion > .blq-mini{width:1.75rem;min-height:1.75rem;background:transparent;--filo-color:transparent;color:var(--texto-3)}
.blq-fila-opcion > .blq-mini:hover{color:var(--texto-1);background:var(--velo-2)}
.blq-campo-emoji input{text-align:center}
.blq-campo-emoji .blq-emoji-fila{width:max-content}
/* El campo «Emoji» con su botón al lado, que abre la rejilla común
   (COO, 27 oct 2026; muestrario, «Componentes 8»). */
.blq-emoji-fila{display:flex;align-items:center;gap:var(--esp-1);min-width:0}
.blq-emoji-fila > input{flex:1 1 auto;min-width:0}
.blq-emoji-elegir{flex:none;width:2rem;min-height:2rem}
.blq-emoji-cuadro{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;cursor:pointer;
  background:var(--surface);clip-path:var(--bevel-sm);color:var(--yellow);font:inherit;transition:background .15s,transform .2s}
.blq-emoji-cuadro:hover{background:var(--velo-2);transform:translateY(-1px)}
.blq-emoji-cuadro:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.blq-emoji-cuadro .blq-chip-emoji{font-size:1.5rem;line-height:1}
.blq-emoji-cuadro .blq-chip-emoji-img{width:1.75rem;height:1.75rem}
.blq-emoji-cuadro .ico{width:1.25rem;height:1.25rem}
.blq-emoji-cuadro.es-vacio>*{opacity:var(--opacidad-apagado,.45)}
.blq-fila-opcion .blq-emoji-cuadro{width:2.25rem;height:2.25rem}
.blq-fila-opcion .blq-emoji-elegir{width:1.75rem;min-height:1.75rem}
.blq-chip-emoji-img{display:block;width:1.125rem;height:1.125rem;object-fit:contain}

/* La ventanita de opciones: los campos del panel, con su rótulo. */
.blq-pop{width:min(22rem,calc(100vw - 2 * var(--esp-4)))}
.blq-pop .blq-pop-cuerpo{display:flex;flex-direction:column;gap:var(--esp-3);padding:var(--esp-2) var(--esp-4) var(--esp-4)}
.blq-pop .blq-pop-cuerpo .blq-menu-titulo{padding:var(--esp-1) 0 0}
.blq-pop .blq-color{gap:var(--esp-1)}
.blq-pop .blq-color legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* La automatización de un botón u opción (op.flujos, migración 104): el
   desplegable con su punto de estado, «Crear una» y, si la elegida no está
   viva, una línea. Sin vínculo, el botón sale atenuado como en Discord. */
.blq-flujo{display:flex;flex-direction:column;gap:var(--esp-2);min-width:0}
.blq-flujo[hidden],.blq-flujo [hidden]{display:none}
.blq-flujo-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2)}
.blq-flujo-cab .blq-flujo-ayuda{width:1.75rem;min-height:1.75rem;background:transparent;--filo-color:transparent;color:var(--texto-3)}
.blq-flujo-cab .blq-flujo-ayuda:hover,.blq-flujo-cab .blq-flujo-ayuda[aria-expanded="true"]{color:var(--texto-1);background:var(--velo-2)}
.blq-flujo-fila{display:flex;align-items:center;gap:var(--esp-2);min-width:0}
.blq-flujo-sel{flex:1 1 auto;display:block;min-width:0}
.blq-flujo-nuevo{flex:none}
.blq-flujo-crear{align-self:flex-start}
.blq-flujo-nota{flex:1 1 auto;min-width:0}
.blq-flujo .blq-nota{overflow-wrap:anywhere}
button.blq-chip.es-sin-flujo{opacity:.6}
button.blq-chip.es-sin-flujo:hover{opacity:1}
.blq-chip-flujo{flex:none;width:.9rem;height:.9rem;margin-left:calc(var(--esp-1) * -.5);opacity:.85}
.blq-fila-opcion > .blq-mini.es-vinculada{color:var(--yellow)}
.blq-dc-menu.es-activo{opacity:1}

.blq-menu-marca{flex:none;display:grid;place-items:center;width:1.25rem;height:1.25rem;color:var(--yellow)}
.blq-menu-marca .blq-ico{width:1rem;height:1rem}

@media (max-width:36rem){
  /* En el móvil cada columna cuenta: el asa más estrecha, el ⋯ y la ✕ uno
     encima del otro, el accesorio debajo del texto y las pistas fuera (el
     contador sigue). */
  .blq-bloque{grid-template-columns:1.25rem minmax(0,1fr) auto;gap:0 var(--esp-1)}
  .blq-asa{width:1.25rem}
  .blq-acciones{flex-direction:column}
  .blq-pistas{display:none}
  .blq-pie{justify-content:flex-end}
  .blq-insertar{padding-left:1.5rem}
  .blq-zona-mensaje{padding-right:0;padding-left:var(--esp-3)}
  .blq-zona-dentro{padding-left:var(--esp-3)}
  .blq-fila-texto.con-accesorio{grid-template-columns:minmax(0,1fr);gap:var(--esp-2)}
  button.blq-acc-mini{width:3.5rem;height:3.5rem}
  .blq-fila-opcion{grid-template-columns:minmax(2.25rem,4.25rem) minmax(0,1fr) auto auto}
  .blq .campo textarea.blq-area,.blq .campo input,.blq .campo select,.blq input.blq-fino{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}
/* El interruptor es el común (input role="switch", componentes.css): la pista
   de antes ya no se pinta. */
.blq-interruptor-pista{display:none}
.blq-interruptor input{margin-top:.05rem}
.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 (CEO y COO, 23 y 27 oct 2026; muestrario, «Formularios 9»): un
   solo selector en todo el editor, con tres muestras cuadradas (sin bisel: son
   un dato), la marcada con un aro amarillo por fuera: amarillo, marrón y la
   personalizada, un cuadro con el degradado de varios colores que dice «aquí
   eliges el tuyo»; elegida, el campo HEX propio debajo (nunca el
   <input type=color> a la vista). «Como las demás» (el color del OP en
   Confesiones) 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.es-heredar .blq-muestra-cuadro{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: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-marca{min-height:2rem;padding-right:var(--esp-2)}
.blq-muestra.es-personal .blq-muestra-cuadro{
  background:conic-gradient(from 210deg,#FF5A5A,#FFC621,#5AD07A,#3FB6FF,#8A6BFF,#FF5ACD,#FF5A5A);
}
.blq-hex{display:flex;align-items:center;flex-wrap:wrap;gap:var(--esp-2) var(--esp-3)}
.blq-hex[hidden]{display:none}
.blq-hex-control{display:flex;align-items:center;gap:var(--esp-2);inline-size:var(--campo-s);padding-left:var(--esp-2)}
.blq-hex-control input{min-width:0;flex:1;font-variant-numeric:tabular-nums;text-transform:uppercase;letter-spacing:.04em}
.blq-hex-vivo{flex:none;width:1.125rem;height:1.125rem;background:var(--muestra,transparent);box-shadow:inset 0 0 0 1px var(--linea-suave)}
.blq-hex-nota{font-size:var(--tipo-leyenda);color:var(--texto-3)}
.blq-hex.es-mal .blq-hex-nota{color:var(--yellow)}

/* ---------- 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;
  /* LA CAJA NO SE DESLIZA, SE DESLIZA LO DE DENTRO (17 oct 2026, bug del COO).
     El relleno de `.caja` es un ::before absoluto: en una caja con scroll se
     queda del alto visible y se va con el contenido, así que lo que bajaba
     de ahí salía sobre el fondo de la caja, que es el color del contorno
     (amarillo translúcido). Ahora la caja corta y el scroll va en el hijo
     (.blq-menu-cuerpo, .blq-sug-lista), con la barra de la marca. */
  overflow:hidden;display:flex;flex-direction:column;
  --caja-fondo:var(--sup-2);--filo-color:var(--borde-vivo);
}
.blq-menu-cuerpo,.blq-sug-lista{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.blq-menu{width:min(20rem,calc(100vw - 2 * var(--esp-4)))}
.blq-menu-cuerpo{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 «/». */
/* Con el aspecto del desplegable de marca (assets/desplegable.css): filas de
   36 px (escalón 31–36 → --bevel-compacto y su aro), la activa con aro
   amarillo, y en «@» el punto del rol y el nombre en su color, como Discord. */
.blq-sug{width:min(19rem,calc(100vw - 2 * var(--esp-4)));max-height:min(20rem,70dvh)}
.blq-sug-lista{list-style:none;margin:0;padding:var(--esp-2);scroll-padding-block:var(--esp-2)}
.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{
  position:relative;display:flex;align-items:center;gap:var(--esp-3);min-height:2.25rem;padding:var(--esp-1) var(--esp-3);
  cursor:pointer;font-size:var(--tipo-descripcion);color:var(--texto-1);
  clip-path:var(--bevel-compacto);--filo-color:transparent;
}
.blq-sug-op.es-activa{background:rgba(255,198,33,.16);--filo-color:var(--yellow)}
@supports (clip-path: polygon(evenodd, 0 0, 1px 1px, 0 1px)){
  .blq-sug-op::after{content:'';position:absolute;inset:0;pointer-events:none;clip-path:var(--filo-compacto);background:var(--filo-color)}
}
.blq-sug-op.con-rol .blq-sug-nombre{color:var(--rol)}
.blq-sug .blq-punto{box-shadow:0 0 0 1px rgba(242,232,220,.28)}
/* Las personas de «@»: su cara redonda (imagen o inicial). */
.blq-sug-avatar{
  position:relative;flex:none;display:inline-grid;place-items:center;overflow:hidden;width:1.5rem;height:1.5rem;border-radius:50%;
  font-size:var(--tipo-leyenda);font-weight:600;color:var(--texto-2);background:var(--velo-2);
}
.blq-sug-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.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}
/* Los emojis de «:» (bloques.emojis.js). La lista es la de «@» y «/» (`.blq-sug`):
   una cara de 1.5rem a la izquierda —el carácter Unicode o la imagen del
   emoji propio—, el nombre, y a la derecha el otro nombre (:fuego: · :fire:)
   o de dónde viene (Servidor, App). */
/* Encima del asistente a pantalla completa (z-index 1000, assets/asistente.css):
   «:» también se usa en sus campos (el nombre de una misión, el premio de un sorteo). */
.blq-emo{z-index:1100}
.blq-emo-cara{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;font-size:1.25rem;line-height:1}
.blq-emo-img{width:1.5rem;height:1.5rem;object-fit:contain}
.blq-emo-apoyo{flex:none;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--tipo-leyenda);color:var(--texto-3)}
.blq-emo-apoyo.es-origen{font-size:var(--tipo-etiqueta);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.blq-emo .blq-sug-nombre{min-width:0}
/* En la vista previa, como Discord: del alto de la letra, un poco más. */
.blq-dc-emoji{display:inline-block;width:1.375em;height:1.375em;vertical-align:-.3em;object-fit:contain}
/* El aviso que lee el lector de pantalla no se ve (el panel lo define en
   panel.css; el dashboard no, y salía el texto en pantalla). */
.blq .solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);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, en sus colores ----------
   Los tokens --discord-* y la redefinición de los de la marca viven en el
   .blq-dc del Dashboard (dashboard.css); aquí, la reserva de cada uno. */
   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);border-radius:8px;
}
.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)}
/* Lo que va dentro (menciones, emojis) también se tapa, como en Discord. */
.blq-md-spoiler *{visibility:hidden}
.blq-md-enlace{color:var(--yellow-alto);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.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(--discord-mencion, var(--yellow)));
  background:color-mix(in srgb, var(--rol, var(--discord-primario, var(--yellow))) 30%, transparent);
}
.blq-dc-mencion-persona{--rol:var(--discord-mencion,var(--texto-2))}
.blq-dc-mencion{border-radius:3px}
.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:#fff;border-radius:8px;
  background:var(--discord-secundario,#1C1C1E);box-shadow:inset 0 0 0 1px var(--discord-secundario-borde,#2F2E33);overflow-wrap:anywhere;
}
.blq-dc-boton .blq-ico{width:.95rem;height:.95rem}
.blq-dc-boton-primario{background:var(--discord-primario,#5865F2);box-shadow:none}
.blq-dc-boton-exito{background:var(--discord-exito,#248046);box-shadow:none}
.blq-dc-boton-peligro{background:var(--discord-peligro,#DA373C);box-shadow:none}
/* 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}
}

/* ---------- EL EDITOR VIVO (op.vivo; CEO, 23 oct 2026, solo Sorteos) ----------
   No hay vista previa aparte: el editor ES el mensaje, dentro del marco de
   Discord del módulo (`.dc`, con sus colores reales). Lo que se escribe, en
   los colores de Discord; los mandos del editor (la barra de cada bloque, los
   «+»), en los de la marca: los `--blq-m-*` toman los de la marca en :root,
   antes de que `.dc` los redefina. */
:root{--blq-m-fondo:var(--surface-2);--blq-m-linea:var(--line);--blq-m-texto:var(--texto-1);--blq-m-texto-2:var(--texto-2);--blq-m-velo:var(--velo-2)}
.blq-vivo{gap:var(--esp-2)}
/* El recuadro del mensaje y el de cada contenedor, como el de Discord. */
.blq-vivo .blq-zona-mensaje,.blq-vivo .blq-zona-dentro{
  gap:0;padding:var(--esp-3) var(--esp-3) var(--esp-3) calc(var(--esp-3) + 4px);background:var(--sup-1);
  border:1px solid var(--line);border-left:0;border-radius:8px;
}
.blq-vivo .blq-zona-mensaje.con-cajas{padding:0;border:0;background:transparent}
.blq-vivo .blq-zona-dentro.es-spoiler{background:repeating-linear-gradient(135deg,var(--sup-1) 0 8px,var(--velo-2) 8px 9px)}
.blq-vivo .blq-zona-dentro.es-destino{background:color-mix(in srgb,var(--yellow) 8%,var(--sup-1))}
.blq-vivo .blq-barra-color::before{border-radius:8px 0 0 8px}
/* Cada bloque, a todo el ancho; al pasar o enfocar, un velo y su barra. */
.blq-vivo .blq-bloque{grid-template-columns:minmax(0,1fr);gap:0;padding:2px var(--esp-1);margin:0 calc(var(--esp-1) * -1);border-radius:4px}
.blq-vivo .blq-bloque:hover:not(:has(.blq-bloque:hover)),.blq-vivo .blq-bloque:focus-within:not(:has(.blq-bloque:focus-within)){background:color-mix(in srgb,var(--discord-texto,#DFE0E2) 4%,transparent)}
.blq-vivo-barra{
  flex-direction:row;flex-wrap:nowrap;
  position:absolute;top:-1.125rem;right:var(--esp-1);z-index:3;gap:1px;padding:2px;
  background:var(--blq-m-fondo);box-shadow:0 0 0 1px var(--blq-m-linea),0 4px 12px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transition:opacity var(--t-rapido) var(--curva);
}
.blq-vivo .blq-bloque:hover:not(:has(.blq-bloque:hover)) > .blq-vivo-barra,
.blq-vivo .blq-bloque:focus-within:not(:has(.blq-bloque:focus-within)) > .blq-vivo-barra,
.blq-vivo-barra:has([aria-expanded="true"]){opacity:1;pointer-events:auto}
.blq-vivo-barra .blq-mini{width:1.75rem;min-height:1.75rem;opacity:1;color:var(--blq-m-texto-2);background:transparent;--filo-color:transparent}
.blq-vivo-barra .blq-mini:hover,.blq-vivo-barra .blq-mini[aria-expanded="true"]{color:var(--yellow);background:var(--blq-m-velo)}
.blq-vivo-barra .blq-borrar:hover{color:var(--blq-m-texto);background:var(--velo-alerta)}
.blq-vivo-barra .blq-mini:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px}
.blq-vivo-barra .blq-mini[aria-disabled="true"]{opacity:var(--opacidad-apagado,.45);cursor:default;background:transparent;color:var(--blq-m-texto-2)}
.blq-vivo-barra .blq-asa{cursor:grab}
/* El «+» entre bloques: sin la sangría del asa y sin ocupar sitio (el mensaje
   se ve con su aire de Discord); el botón asoma sobre la raya al pasar. El del
   último bloque, siempre a la vista. */
.blq-vivo .blq-insertar{position:relative;min-height:0;height:.375rem;padding:0}
.blq-vivo .blq-insertar .blq-anadir-discreto{position:absolute;left:0;top:50%;translate:0 -50%;z-index:2;background:var(--blq-m-fondo)}
.blq-vivo .blq-item:last-child > .blq-insertar{height:auto;min-height:1.75rem;margin-top:var(--esp-1)}
.blq-vivo .blq-item:last-child > .blq-insertar .blq-anadir-discreto{position:static;translate:none;background:transparent}
.blq-vivo .blq-item:has(> .blq-bloque-contenedor) > .blq-insertar{height:auto;min-height:1.75rem}
.blq-vivo .blq-insertar.blq-insertar-fuera{height:auto;min-height:1.75rem;margin-top:var(--esp-1)}
.blq-vivo .blq-insertar-fuera .blq-anadir-discreto{position:static;translate:none;background:transparent}
.blq-vivo .blq-item:has(> .blq-bloque-contenedor) > .blq-insertar .blq-anadir-discreto{position:static;translate:none;background:transparent}
/* Mientras se escribe en un bloque, el «+» de debajo no tapa su contador. */
.blq-vivo .blq-item:not(:last-child):has(> .blq-bloque textarea.blq-area:focus) > .blq-insertar .blq-anadir-discreto{opacity:0}
/* EL TEXTO: pintado mientras no se escribe; el cuadro, del mismo tamaño de letra. */
.blq-vivo .blq-campo-texto{position:relative}
/* Al escribir, la barra flotante no tapa la primera línea: el bloque le hace sitio. */
.blq-vivo .blq-bloque:has(textarea.blq-area:focus):not(:has(.blq-bloque textarea.blq-area:focus)){padding-top:1.75rem}
.blq-vivo .campo textarea.blq-area{padding:0;font-size:var(--tipo-descripcion);line-height:1.45;color:var(--texto-1)}
.blq-vivo .campo textarea.blq-area:focus,.blq-vivo .campo textarea.blq-area:focus-visible{box-shadow:inset 0 -1px 0 var(--yellow)}
.blq-vivo-pintado{display:none;cursor:text;min-height:1.45em}
.blq-vivo .es-pintado > .blq-vivo-pintado{display:flex}
.blq-vivo .es-pintado > textarea.blq-area{position:absolute;top:0;left:0;width:1px;height:1px!important;opacity:0;pointer-events:none;clip-path:inset(50%);overflow:hidden}
/* Vacío: la línea de escribir de Discord y, al lado, «Añadir bloque». */
.blq-vivo .blq-vacio{padding:var(--esp-1) 0}
.blq-vivo-escribir{
  flex:1 1 100%;display:block;width:100%;min-height:2.5rem;margin:0;padding:var(--esp-1) 0;border:0;background:none;text-align:left;cursor:text;
  font:inherit;font-size:var(--tipo-descripcion);color:var(--texto-3);
}
.blq-vivo-escribir:hover{color:var(--texto-2)}
.blq-vivo-escribir:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.blq-vivo .blq-vacio-texto{flex-basis:100%;max-width:none}
/* Lo mismo dentro de un contenedor vacío (el de un mensaje nuevo): la línea
   de escribir y, debajo, «Añadir bloque dentro». */
.blq-vivo .blq-dentro-vacio{flex-wrap:wrap}
/* LA IMAGEN, como en Discord; su dirección y «Subir imagen», al enfocarla (o sin imagen). */
.blq-vivo .blq-img-vista{width:100%;min-height:5rem;padding:var(--esp-3);border-radius:8px;cursor:pointer;justify-items:center}
.blq-vivo .blq-img-vista.con-img{width:auto;max-width:100%;min-height:0;padding:0;justify-self:start}
.blq-vivo .blq-img-vista img{max-height:16rem;border-radius:8px}
.blq-vivo .blq-bloque-imagen:not(:focus-within):not(.es-editando):not(:has([aria-busy="true"])):has(.blq-img-vista.con-img) .blq-fino-campo{display:none}
.blq-vivo .blq-img-vista:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* EL SEPARADOR: la raya de Discord; la casilla y el margen, al pasar o enfocar. */
.blq-vivo .blq-sep-raya{border-top-color:var(--line)}
.blq-vivo .blq-fila-sep{position:relative;min-height:1rem}
.blq-vivo .blq-bloque-separador:not(:hover):not(:focus-within) :is(.blq-sep-casilla,.blq-sep-margen){position:absolute;opacity:0}
/* EL ARCHIVO, como el adjunto de Discord. */
.blq-vivo .blq-fila-archivo{max-width:24rem;padding:var(--esp-2) var(--esp-3);background:var(--sup-0);border:1px solid var(--line);border-radius:8px}
/* Lo que pone el bot (ed.pie): se ve, no se edita. */
.blq-vivo-pie{display:flex;flex-direction:column;gap:var(--esp-2);margin-top:var(--esp-2);font-size:var(--tipo-descripcion);color:var(--texto-1)}
.blq-vivo-pie:empty{display:none}
.blq-zona-mensaje.con-cajas ~ .blq-vivo-pie,.blq-vivo > .blq-vivo-pie{margin-top:0}
@media (hover:none),(pointer:coarse){
  .blq-vivo .blq-bloque-separador :is(.blq-sep-casilla,.blq-sep-margen){opacity:1}
  /* Sin cursor no hay «al pasar»: cada «+» ocupa su sitio y no se monta sobre los bloques. */
  .blq-vivo .blq-insertar{height:auto;min-height:1.75rem}
  .blq-vivo .blq-insertar .blq-anadir-discreto{position:static;translate:none;background:transparent}
}

@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,.blq-barra-color::before,.blq-insertar .blq-anadir-discreto,.blq-sep-margen,button.blq-chip,.blq-vivo-barra{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}
}
/* SUBIR O ELEGIR DEL ALMACENAMIENTO (COO, 27 oct 2026): «Del almacenamiento»
   junto a «Subir imagen»/«Subir archivo»; en el bloque Archivo, la nota del
   tope del servidor. En el editor vivo, el archivo con dirección enseña sus
   acciones solo al pasar o enfocarlo, como la imagen. */
.blq-subir-tope{color:var(--texto-3)}
.blq-subir-archivo{max-width:var(--campo-l)}
.blq-vivo .blq-bloque-archivo:not(:focus-within):not(:hover):has(.blq-fino-campo input:not(:placeholder-shown)) .blq-subir{display:none}