/* =====================================================================
   bloques.css — el editor de bloques.

   Mismo lenguaje que el resto: contorno negro grueso, sombra sólida y
   los cuatro colores de la marca. Cada familia de piezas lleva su color,
   que es como el niño las reconoce de un vistazo antes de saber leerlas.
   ===================================================================== */

#bloquesView{
  flex:1; min-height:0; overflow-y:auto; padding:14px 14px 90px;
  background-color:var(--bg2);
  background-image:radial-gradient(#16161d14 1.4px, transparent 1.4px);
  background-size:18px 18px;
}

/* ------------------------------------------------------- las dos pilas */
.bl-pila{ margin-bottom:20px }
.bl-tit{
  display:flex; align-items:center; gap:8px; margin-bottom:9px;
  font:400 15px var(--f-titulo); text-transform:uppercase; color:var(--tinta);
}
.bl-tit small{
  font:800 11.5px var(--f-texto); text-transform:none; color:var(--txt2);
  letter-spacing:0;
}
.bl-tit .ico{ width:18px; height:18px }

.bl-lista{ display:flex; flex-direction:column; gap:7px }

/* --------------------------------------------------------- las piezas */
.bl-pieza{
  border:2.5px solid var(--tinta); border-radius:14px; background:var(--crema);
  box-shadow:var(--sombra-1);
}
.bl-fila{
  display:flex; align-items:center; gap:8px; padding:9px 10px;
  flex-wrap:wrap; font-size:13.5px; font-weight:700;
}
.bl-fila > .ico{ width:19px; height:19px; flex:none }
.bl-txt{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; flex:1; min-width:0 }

/* El color de cada familia va en la cabecera de la pieza, y va SOLIDO.
   Antes eran tintes del 20 al 30 por ciento: sobre crema se distinguian
   a duras penas, y sobre el panel oscuro no se distinguian en absoluto.
   Con el color entero la pieza se reconoce de un vistazo, que es justo
   para lo que esta, y la tinta encima pasa de sobra la norma de
   contraste en los cuatro (7.0 el rojo, que es el mas justo). */
.bl-rojo     > .bl-fila{ background:#ff5454 }
.bl-amarillo > .bl-fila{ background:#ffdf2b }
.bl-lila     > .bl-fila{ background:#8b97fd }
.bl-verde    > .bl-fila{ background:#00c07a }
.bl-pieza > .bl-fila{ color:var(--tinta); box-shadow:var(--brillo-boton) }
.bl-pieza > .bl-fila{ border-radius:11px }
.bl-pieza:has(.bl-dentro) > .bl-fila{ border-radius:11px 11px 0 0 }

/* ------------------------------------------------------- los huequitos */
.bl-campo{
  border:2px solid var(--tinta); border-radius:8px; background:#fff;
  font:800 13px var(--f-texto); color:var(--tinta); padding:3px 6px;
  max-width:100%;
}
.bl-num{ width:72px; text-align:center }
.bl-nom{ width:92px }
.bl-sel{ cursor:pointer; padding-right:4px }
.bl-campo:focus-visible{ outline:3px solid var(--lila); outline-offset:1px }

/* --------------------------------------------------------- los mandos */
.bl-mandos{ display:flex; gap:3px; margin-left:auto; flex:none }
.bl-m{
  width:27px; height:27px; display:grid; place-items:center; cursor:pointer;
  border:2px solid var(--tinta); border-radius:8px; background:var(--crema); padding:0;
}
.bl-m .ico{ width:14px; height:14px }
.bl-m:hover{ background:var(--amarillo) }
.bl-x:hover{ background:var(--rojo) }

/* ----------------------------------------------- lo que va por dentro */
.bl-dentro{ padding:8px 8px 8px 18px; border-left:3px solid var(--tinta); margin-left:14px }
.bl-medio{
  padding:5px 12px; font:400 13px var(--f-titulo); text-transform:uppercase;
  border-top:2.5px solid var(--tinta); border-bottom:2.5px solid var(--tinta);
  background:#ffdf2b; color:var(--tinta);
}

/* ------------------------------------------------------ añadir piezas */
.bl-mas{
  display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border:2.5px dashed var(--line2); border-radius:12px; background:none;
  padding:9px; font:800 12.5px var(--f-texto); color:var(--txt2); width:100%;
}
.bl-mas:hover{ border-color:var(--tinta); color:var(--tinta); background:var(--crema) }
.bl-mas .ico{ width:15px; height:15px }

/* ------------------------------------------------------- la bandeja */
.bl-capa{
  position:fixed; inset:0; z-index:95; background:#16161d80;
  display:flex; align-items:flex-end; justify-content:center;
}
@supports (backdrop-filter: blur(2px)){
  .bl-capa{ -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) }
}
.bl-bandeja{
  background:var(--crema); border:3px solid var(--tinta);
  border-radius:24px 24px 0 0; width:min(560px,100%); max-height:82vh;
  display:flex; flex-direction:column; box-shadow:0 -6px 0 var(--tinta);
}
@media (min-width:700px){
  .bl-capa{ align-items:center }
  .bl-bandeja{ border-radius:24px; box-shadow:0 7px 0 var(--tinta) }
}
.bl-bandeja-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:3px solid var(--tinta); flex:none;
}
.bl-bandeja-top b{ font:400 17px var(--f-titulo); text-transform:uppercase }
.bl-cerrar{
  width:32px; height:32px; display:grid; place-items:center; cursor:pointer;
  border:2.5px solid var(--tinta); border-radius:50%; background:var(--crema); padding:0;
}
.bl-cerrar .ico{ width:15px; height:15px }
.bl-bandeja-cuerpo{ overflow-y:auto; padding:14px 18px 22px }

.bl-grupo{ margin-bottom:16px }
.bl-grupo > b{
  display:block; font:800 11.5px var(--f-texto); letter-spacing:.08em;
  text-transform:uppercase; color:var(--txt2); margin-bottom:7px;
}
.bl-opciones{ display:flex; flex-direction:column; gap:7px }
.bl-op{
  display:flex; align-items:center; gap:9px; text-align:left; cursor:pointer;
  border:2.5px solid var(--tinta); border-radius:12px; background:var(--crema);
  padding:10px 12px; font:700 13.5px var(--f-texto); color:var(--tinta);
  box-shadow:var(--sombra-1);
}
.bl-op .ico{ width:19px; height:19px; flex:none }
.bl-op:hover{ translate:0 -2px; box-shadow:var(--sombra-2) }
.bl-op.bl-rojo    { background:#ff5454 }
.bl-op.bl-amarillo{ background:#ffdf2b }
.bl-op.bl-lila    { background:#8b97fd }
.bl-op.bl-verde   { background:#00c07a }

/* ------------------------------------------- el aviso de solo lectura */
.bl-aviso{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--amarillo); border-bottom:2.5px solid var(--tinta);
  font:700 12.5px var(--f-texto);
}
.bl-aviso .ico{ width:16px; height:16px; flex:none }

@media (prefers-reduced-motion: reduce){
  .bl-op:hover{ translate:none }
}

/* «Tu codigo tiene cosas que todavia no se poner en piezas.» */
.bl-desfase{
  margin:0 0 12px; background:#fff6d6; border:2px solid var(--tinta);
  border-radius:12px; padding:10px 12px;
}
.bl-desfase span{ flex:1; min-width:150px }