/* ============================================================
   ESPACIOS DE DIBUJO CON CUADROS (ver capas.js)
   ============================================================ */

/* la bandeja donde viven las capas: dentro del lienzo, para que viajen y
   escalen con el tablero, y SIN puntero, que si no taparía el tablero */
.cp-zona{ position:absolute; inset:0; pointer-events:none; z-index:9; }

.cp{
  position:absolute; box-sizing:border-box;
  pointer-events:none;                 /* sólo el asa y el lienzo activo */
  outline:1px dashed rgba(40,30,15,.22);
  outline-offset:0;
}

/* IMPRESCINDIBLE, Y SE ME OLVIDÓ OTRA VEZ.
   Sin esto el navegador se reserva el puntero para hacer scroll o zoom y manda
   pointercancel en cuanto empiezas a mover: PINTA UNA RAYITA Y PARA. Con el
   ratón no pasa nunca —un gesto de ratón no se puede cancelar—, así que el
   banco decía que todo iba bien mientras a él, con la tableta, no le pintaba.
   Está escrito palabra por palabra en anotar.css, de la vez anterior. Va en
   la capa, en el lienzo, en el asa y en el marcado, que son los cuatro sitios
   donde se arrastra. */
.cp, .cp canvas, .cp-asa{ touch-action:none; -ms-touch-action:none; }
body.cp-marcando{ touch-action:none; -ms-touch-action:none; }
.cp.sel{ outline:1px dashed rgba(201,138,58,.9); }
.cp.oculta{ display:none; }

.cp canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none;                 /* MotorTinta lo enciende al activarse */
}
/* la cebolla: el cuadro anterior por debajo y apagado, para saber de dónde
   vienes. Apagada del todo si no se ha pedido. */
.cp .cp-ceb{ opacity:0; }
.cp.con-cebolla .cp-ceb{ opacity:.26; }

/* el asa: lo único por lo que se arrastra la capa. Si se arrastrara por el
   lienzo no habría forma de dibujar dentro. */
.cp-asa{
  position:absolute; left:0; top:-19px; height:18px;
  display:flex; align-items:center; gap:5px; padding:0 6px;
  background:rgba(28,22,14,.82); color:#efe9dc; border-radius:3px 3px 0 0;
  font:600 9.5px/1 'Nunito', sans-serif; letter-spacing:.04em;
  pointer-events:auto; cursor:grab; white-space:nowrap; user-select:none;
}
.cp-asa:active{ cursor:grabbing; }
.cp.sel .cp-asa{ background:#c98a3a; color:#20180c; }
.cp-asa i{ cursor:pointer; font-style:normal; }

/* el rectángulo que se dibuja al marcar un espacio nuevo */
.cp-marco{
  position:fixed; z-index:200; pointer-events:none;
  border:1px dashed #c98a3a; background:rgba(201,138,58,.12);
}
body.cp-marcando{ cursor:crosshair; }

/* ---------------- el bloque dentro del afinador de tinta ----------------
   EL PANEL DE TINTA ES CLARO (#efece2 con borde negro), no oscuro. Lo pinte
   con letra clara sobre fondo claro y no se leia nada: los botones salian
   casi en blanco sobre crema. Aqui se usan SUS mismos colores y su misma
   tipografia, para que parezca lo que es: una parte mas de ese panel. */
#panelTinta{ max-height:78vh; overflow-y:auto; }

#cpBloque{
  border-bottom:1.5px solid #1b1409;
  margin:0 0 8px; padding-bottom:8px;
  color:#1b1409; font:600 11px/1.35 'PT Serif', serif;
}
#cpBloque .cp-cab{ display:flex; align-items:center; gap:8px; padding:0 0 6px; }
#cpBloque .cp-cab b{
  flex:1; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
  color:#6a6255;
}
#cpBloque button{
  padding:5px 7px; cursor:pointer;
  border:1.5px solid #1b1409; background:#ded9cb; color:#1b1409;
  font:600 10.5px/1 'PT Serif', serif;
}
#cpBloque button:hover{ background:#cfc9b8; }
#cpBloque button.on{ background:#1b1409; color:#efece2; }
#cpBloque button.mal:hover{ background:#8f2b22; color:#efece2; }
/* el de marcar, que es la puerta de entrada de todo esto */
#cpBloque .cp-nuevo{ background:#c98a3a; }
#cpBloque .cp-nuevo:hover{ background:#dda257; }

.cp-lista{ overflow:auto; max-height:22vh; }
/* el panel mide 266 px y la fila lleva seis botones: que envuelva, o el
   ultimo («borrar») se sale por la derecha y no se ve */
.cp-fila{
  display:flex; align-items:center; gap:3px; padding:4px 2px; cursor:pointer;
  flex-wrap:wrap; border-bottom:1px dotted rgba(27,20,9,.22);
}
.cp-fila .cp-nom{ flex:1 1 100%; order:-1; font-size:11px; }
.cp-fila:hover{ background:rgba(27,20,9,.06); }
.cp-fila.sel{ background:rgba(201,138,58,.3); }
.cp-fila.off .cp-nom{ opacity:.5; text-decoration:line-through; }
.cp-nom{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-n{ opacity:.6; font-size:9.5px; white-space:nowrap; }

.cp-cuadros{ padding-top:7px; }
.cp-cuadros .cp-linea{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:5px; }
.cp-cuadros b{ flex:1; text-align:center; font-size:11px; }
/* el botón de dibujar, a lo ancho y sin dudas */
#cpBloque .cp-pinta{
  display:block; width:100%; padding:7px; margin-bottom:2px;
  font-size:11.5px; letter-spacing:.02em;
}
#cpBloque .cp-pinta.on{ background:#3f6b26; color:#f2f7ec; border-color:#1b1409; }
.cp-tit{
  margin-top:8px; font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:#6a6255;
}
.cp-nada{ display:block; font-style:normal; font-size:10px; line-height:1.7; color:#6a6255; }
.cp-fps{ display:flex; align-items:center; gap:4px; font-size:9.5px; color:#6a6255; }
.cp-fps input{
  width:42px; border:1.5px solid #1b1409; background:#ded9cb; color:#1b1409;
  padding:3px 4px; font:600 10.5px/1 'PT Serif', serif;
}