/* ============================================================================
   CAPA DE ANOTACIÓN — estilos
   ----------------------------------------------------------------------------
   Aparte de styles.css a propósito: esto es una herramienta, no la página.
   Si algún día se quita, se quita entero y no deja rastro.
   ============================================================================ */

#capaTinta, .capa-tinta{
  /* DENTRO DEL LIENZO Y DEBAJO DEL CELO. Estaba fija en la ventana con
     z 5000: los trazos no se movían con el tablero (al alejarse o panear se
     quedaban clavados en la pantalla) y se pintaban por encima de todo,
     incluido el celo. Ahora va en coordenadas del lienzo —la coloca anotar.js
     sobre la vista que se está anotando— y a z 7, o sea bajo las pegatinas
     (z 8): el celo tapa el trazo, como en el papel. */
  position:absolute; width:100%; height:100%; z-index:7;
  width:100%; height:100%;
  pointer-events:none;              /* apagada: si no, taparía la esfera */
  /* IMPRESCINDIBLE. Sin esto el navegador se reserva el puntero para hacer
     scroll o zoom y manda pointercancel en cuanto empiezas a mover: pintaba
     una rayita y paraba. Al afinador se lo puse y a esta capa se me olvidó. */
  touch-action:none;
  -ms-touch-action:none;
  /* SIN mix-blend-mode. Lo tenía en multiply, y el motor ya compone cada
     trazo en multiply por dentro: se multiplicaba dos veces y la tinta salía
     distinta de la del afinador — medido, el mismo trazo daba L=211 allí y
     L=187 aquí. Si algún día se quiere que la tinta multiplique contra el
     papel, se cambia en LOS DOS sitios a la vez, no sólo aquí. */
}

#barraTinta{
  position:fixed; right:14px; bottom:14px; z-index:5100;
  font:12px/1.3 'PT Serif', Georgia, serif; color:#1b1409;
  display:flex; flex-direction:column; align-items:flex-end; gap:8px;
}
#btTinta{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1.5px solid #1b1409; background:#e9e5d8; color:#1b1409;
  font-size:17px; line-height:1; box-shadow:0 2px 6px rgba(20,15,8,.3);
}
#barraTinta.dibujando #btTinta{ background:#1b1409; color:#efece2; }

#panelTinta{
  background:#efece2; border:1.5px solid #1b1409; padding:9px 10px 8px;
  box-shadow:0 6px 18px rgba(20,15,8,.32); width:266px;
}
#panelTinta[hidden]{ display:none; }
#panelTinta .fila{ display:flex; flex-wrap:wrap; gap:4px; }
#panelTinta .fila + .fila{ margin-top:7px; }

#panelTinta .utiles button{
  flex:1 1 46%; padding:6px 2px; cursor:pointer;
  border:1.5px solid #1b1409; background:#ded9cb; color:#1b1409;
  font:600 11.5px/1 'PT Serif', serif;
}
#panelTinta .utiles button.on{ background:#1b1409; color:#efece2; }

#panelTinta .colores button{
  width:20px; height:20px; padding:0; cursor:pointer; border:1px solid #1b1409;
}
#panelTinta .colores button.on{ outline:2px solid #1b1409; outline-offset:1.5px; }

#panelTinta .acciones button{
  flex:1 1 22%; padding:5px 2px; cursor:pointer;
  border:1.5px solid #1b1409; background:#ded9cb;
  font:600 10.5px/1 'PT Serif', serif;
}
/* los mandos, los mismos que el afinador */
#mandosTinta{ margin-top:7px; max-height:40vh; overflow-y:auto; padding-right:2px; }
#mandosTinta .mandoT{
  display:block; margin:7px 0 0; font-size:10.5px; letter-spacing:.03em;
}
#mandosTinta .mandoT b{ float:right; font-weight:400; color:#6a6255;
  font-variant-numeric:tabular-nums; }
#mandosTinta input[type=range]{ width:100%; margin:2px 0 0; accent-color:#1b1409; }

.pistaT{ margin:7px 0 0; font-size:10.5px; font-style:italic; color:#6a6255; }

@media print{ #barraTinta{ display:none; } }