/* ==========================================================================
   BICHOS — las animaciones sobre el tablero
   ========================================================================== */

/* LA CAPA VA SIN z-index A PROPÓSITO. Con él abriría contexto de apilado, y
   entonces el z-index del bicho ya no se compara con el de los papeles (6 a
   11) ni la tinta multiplica sobre el periódico: la mezcla se quedaría
   encerrada dentro de la capa. Sin z-index la capa no pinta nada y quien
   decide altura y mezcla es el marco. */
.bx-capa{ position:absolute; inset:0; pointer-events:none; }

/* EL MARCO. En el fondo es la caja del bicho; dentro de un papel es el filo
   de la hoja — y de ahí el overflow:hidden, que es lo que impide que el bicho
   se salga del papel al que se le ha asignado.
   La MEZCLA va aquí y no en el lienzo: el cuerpo lleva un transform propio,
   que abre contexto de apilado, así que un multiply puesto dentro sólo se
   mezclaría consigo mismo. En el marco se mezcla con lo que hay debajo, que
   es de lo que se trata: los cuatro útiles del motor de tinta pintan en
   multiply — así el subrayador deja leer el papel y el lápiz se posa en él
   en vez de taparlo. */
.bx-marco{
  position:absolute; box-sizing:border-box;
  transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  transform-origin:50% 50%;
  pointer-events:none;
  mix-blend-mode:multiply;
}
/* OJO: sólo `inset:0`. Estaba además `left:auto; top:auto; width:auto`, para
   deshacer la medida que el marco lleva cuando está en el fondo — pero esas
   medidas son estilo EN LÍNEA, que gana siempre a la hoja, así que aquí no
   deshacían nada y en cambio anulaban el `inset` (left auto + right 0 = caja
   de ancho cero pegada al canto derecho del papel). El marco se quedaba de
   0×0 y el bicho, colocado respecto a esa nada, se iba fuera de la hoja.
   Las medidas en línea las borra coloca(), que es a quien le toca. */
.bx-marco.bx-enpapel{ inset:0; transform:none; overflow:hidden; }

/* EL CUERPO. Lleva el lienzo cocido. En el fondo llena el marco; en un papel
   se coloca dentro de él y puede girar por su cuenta. */
.bx{
  position:absolute; box-sizing:border-box;
  transform:rotate(var(--rot,0deg));
  transform-origin:50% 50%;
  pointer-events:none;
  /* el mismo cuento que en las piezas: sin esto, arrastrando con la tableta
     el navegador se queda el gesto para hacer scroll y suelta el bicho a los
     cuatro píxeles */
  touch-action:none; -ms-touch-action:none;
}
.bx > canvas{ display:block; width:100%; height:100%; }

/* EL BICHO NUNCA ESCUCHA AL RATÓN, y es a propósito: encima del tablero está
   el lienzo del periódico, que ocupa la página entera y se lleva todos los
   clics — así que ponerle `pointer-events:auto` no servía de nada. Quien lo
   coge es bichos.js, buscándolo por geometría y por su tinta. El cursor lo
   avisa desde el body. */
body.bx-encima{ cursor:grab; }
body.bx-cogiendo, body.bx-cogiendo *{ cursor:grabbing !important; }
body.bx-pegando{ cursor:crosshair; }

.bx-marco.sel .bx{ outline:1.5px dashed rgba(201,138,58,.9); outline-offset:2px; }
/* dentro de una hoja el filo de selección se sale por el recorte: se dibuja
   por dentro para que se vea */
.bx-marco.bx-enpapel.sel .bx{ outline-offset:-1px; }

/* mientras se busca hoja a la que pegarlo */
body.bx-pegando .pg-papel{ outline:1.5px dashed rgba(201,138,58,.6); outline-offset:2px; }

/* y si a la hoja le han dado el lazo, al bicho le toca el mismo recorte */
.pg.pg-recortada > .bx-marco{
  -webkit-clip-path:var(--lz, none); clip-path:var(--lz, none);
}

/* ==================== EL TUNER ==================== */
/* A LA IZQUIERDA DEL DE LOS PAPELES, no encima. Los dos son fijos abajo a la
   derecha y con los dos abiertos se tapaban el uno al otro. */
.bx-tuner{
  position:fixed; z-index:100; right:358px; bottom:14px; width:330px;
  max-height:80vh; display:flex; flex-direction:column;
  background:rgba(28,22,14,.93); color:#efe9dc; border-radius:4px;
  font:600 11px/1.35 'Nunito', sans-serif;
  box-shadow:0 4px 22px rgba(0,0,0,.42);
  transition:opacity .2s ease, transform .2s ease;
}
.bx-tuner.oculto{ opacity:0; pointer-events:none; transform:translateY(10px); }
.bx-tuner header{
  display:flex; align-items:center; gap:8px; padding:9px 11px;
  border-bottom:1px solid rgba(239,233,220,.16);
}
.bx-tuner header b{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.78; }
.bx-tuner header .bx-espacio{ flex:1; }
.bx-tuner button{
  border:0; border-radius:3px; cursor:pointer; font:inherit;
  background:rgba(239,233,220,.12); color:#efe9dc; padding:4px 8px;
}
.bx-tuner button:hover{ background:rgba(239,233,220,.24); }
.bx-tuner button.act{ background:#c98a3a; color:#20180c; }
.bx-tuner button.mal:hover{ background:#a8382c; }

.bx-panel{ padding:8px 11px 2px; border-bottom:1px solid rgba(239,233,220,.12); }
.bx-nada{ margin:2px 0 8px; font-size:9.5px; opacity:.55; line-height:1.5; }
.bx-cab{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.bx-cab b{ flex:1; font-size:12px; letter-spacing:.04em; }
.bx-dice{ display:block; font-size:9px; opacity:.55; margin:-4px 0 7px 62px; }

.bx-eje{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.bx-eje > b{
  width:55px; flex:none; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; opacity:.6;
}
.bx-eje input[type=range]{ flex:1; accent-color:#c98a3a; height:16px; }
.bx-bots{ display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.bx-bots button{ padding:3px 6px; font-size:10px; }
.bx-bots input[type=color]{
  width:24px; height:19px; padding:0; border:0; border-radius:3px;
  background:none; cursor:pointer;
}
/* los colores se enseñan, no se cuentan */
.bx-tintas button{
  width:19px; height:19px; padding:0; border-radius:50%;
  background:var(--sw); box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.bx-tintas button.act{ box-shadow:0 0 0 2px #c98a3a; }

.bx-lista{
  overflow:auto; padding:8px 11px 11px;
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px;
}
.bx-chip{
  display:flex; flex-direction:column; gap:4px; align-items:stretch;
  padding:4px; border-radius:3px; background:rgba(239,233,220,.07);
  cursor:pointer; text-align:center; border:0; color:#efe9dc; font:inherit;
}
.bx-chip:hover{ background:rgba(239,233,220,.18); }
.bx-chip .bx-muestra{
  display:block; position:relative; border-radius:2px; overflow:hidden;
  background:rgba(0,0,0,.22); padding:2px;
}
.bx-chip .bx-nom{ font-size:8.5px; letter-spacing:.04em; opacity:.85; text-transform:uppercase; }
.bx-ayuda{ padding:0 11px 10px; margin:0; font-size:9.5px; line-height:1.5; opacity:.6; }

/* la lengüeta para volver a abrirlo, como la de los papeles pero más arriba */
.bx-lengueta{
  position:fixed; z-index:100; right:0; bottom:126px;
  border:0; border-radius:3px 0 0 3px; cursor:pointer;
  background:rgba(28,22,14,.9); color:#efe9dc;
  font:600 9.5px/1 'Nunito',sans-serif; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 7px;
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.bx-lengueta.se-ve{ opacity:.85; pointer-events:auto; }
.bx-lengueta:hover{ opacity:1; }

/* en una ventana estrecha no caben los dos al lado: vuelve al canto y que se
   abra uno cada vez */
@media (max-width:1100px){
  .bx-tuner{ right:14px; }
}