/* ==========================================================================
   CUADROS DE TEXTO
   --------------------------------------------------------------------------
   La misma cocina que los bichos: una capa sin z-index para no encerrar la
   mezcla, un marco que es la caja (o el filo del papel) y un cuerpo dentro.
   Lo que cambia es que aquí el cuerpo es texto editable, no un lienzo.
   ========================================================================== */

/* LA CAPA VA SIN z-index A PROPÓSITO — igual que la de los bichos. Con él
   abriría contexto de apilado y la altura del texto ya no se compararía con
   la de los papeles (6 a 11): todos los textos quedarían por delante o por
   detrás en bloque. Quien decide altura es el marco. */
.tx-capa{ position:absolute; inset:0; pointer-events:none; }

/* EL MARCO. En el fondo, la caja del cuadro; dentro de un papel, el filo de
   la hoja — de ahí el overflow:hidden, que es lo que recorta el texto que se
   sale. El multiply va aquí y no en el cuerpo: el cuerpo lleva transform
   propio, que abre contexto de apilado, así que un multiply puesto dentro
   sólo se mezclaría consigo mismo. Aquí se mezcla con el papel, y por eso la
   tinta se posa en la fibra en vez de taparla. */
/* EL GIRO VA EN --tx-rot Y NO EN --rot, y no es capricho. El cuadro pegado a
   una hoja vive DENTRO de ella, y la hoja lleva su propio `--rot` puesto por
   pegatinas.css para estar torcida sobre la mesa. Las variables CSS se
   heredan: un `rotate(var(--rot))` aqui cogia el giro DE LA HOJA y lo volvia
   a aplicar encima del que ya traia heredado del padre — el texto salia
   cruzado en diagonal de esquina a esquina. Con nombre propio, el cuadro solo
   gira lo suyo. */
.tx-marco{
  position:absolute; box-sizing:border-box;
  transform:rotate(var(--tx-rot,0deg));
  /* POR EL CENTRO. Girando por el canto de arriba, un cuarto de vuelta manda
     el texto fuera de la hoja; por el centro se queda donde estaba y sólo
     cambia de orientación. */
  transform-origin:50% 50%;
  pointer-events:none;
  mix-blend-mode:multiply;
}
/* dentro de un papel el marco es sólo la caja del texto; el recorte al filo
   lo pone la propia hoja (.pg-papel lleva overflow:hidden) */
.tx-marco.tx-enpapel{ transform-origin:50% 50%; }

/* EL CUERPO. Es un div contenteditable cuando toca escribir. */
.tx{
  display:block; box-sizing:border-box;
  white-space:pre-wrap; word-break:break-word;
  outline:0; margin:0; padding:0;
  /* el texto se escribe DENTRO del papel, así que hereda su giro y su escala;
     no hace falta nada más */
  -webkit-user-select:none; user-select:none;
  /* sin esto, arrastrando con la tableta el navegador se queda el gesto para
     hacer scroll y suelta el cuadro a los cuatro píxeles */
  touch-action:none; -ms-touch-action:none;
}

/* EL CUADRO NUNCA ESCUCHA AL RATÓN salvo cuando se está escribiendo en él, 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 — ponerle pointer-events:auto
   no serviría de nada. Quien lo coge es texto.js, buscándolo por geometría.
   Al escribir sí hace falta que el cursor de texto entre. */
.tx-marco.tx-escribiendo{ pointer-events:auto; }
.tx-marco.tx-escribiendo .tx{
  -webkit-user-select:text; user-select:text; cursor:text;
  background:rgba(255,252,240,.55);
  box-shadow:0 0 0 1px rgba(201,138,58,.85), 0 2px 10px rgba(0,0,0,.12);
  border-radius:2px;
}

body.tx-editando.tx-encima{ cursor:grab; }
body.tx-cogiendo, body.tx-cogiendo *{ cursor:grabbing !important; }
body.tx-pegando{ cursor:crosshair; }

/* el filo de selección: por fuera en el fondo, por dentro en un papel — si no,
   el recorte de la hoja se lo come */
.tx-marco.sel .tx{ outline:1.5px dashed rgba(201,138,58,.9); outline-offset:3px; }
.tx-marco.tx-enpapel.sel .tx{ outline-offset:-1px; }

/* mientras se busca hoja a la que pegarlo */
body.tx-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 texto le toca el mismo recorte */
.pg.pg-recortada > .tx-marco{
  -webkit-clip-path:var(--lz, none); clip-path:var(--lz, none);
}

/* ==================== EL AFINADOR ====================
   El tercero de la fila: papeles a la derecha del todo, bichos en medio,
   textos a la izquierda. Los tres son fijos abajo y con dos abiertos ya se
   tapaban, así que cada uno tiene su hueco. */
.tx-tuner{
  position:fixed; z-index:100; right:702px; bottom:14px; width:336px;
  max-height:82vh; 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;
}
.tx-tuner.oculto{ opacity:0; pointer-events:none; transform:translateY(10px); }

.tx-cab{
  display:flex; align-items:center; gap:6px; padding:9px 11px;
  border-bottom:1px solid rgba(239,233,220,.16);
}
.tx-cab > b{ flex:1; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.78; }
.tx-tuner button{
  border:0; border-radius:3px; cursor:pointer; font:inherit;
  background:rgba(239,233,220,.12); color:#efe9dc; padding:4px 8px;
}
.tx-tuner button:hover{ background:rgba(239,233,220,.24); }
.tx-tuner button.act, .tx-tuner button.on{ background:#c98a3a; color:#20180c; }
.tx-tuner button.mal:hover{ background:#a8382c; }

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

.tx-eje{ display:flex; align-items:center; gap:7px; margin-bottom:6px; }
.tx-eje > b{
  width:62px; flex:none; font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; opacity:.6;
}
.tx-eje input[type=range]{ flex:1; accent-color:#c98a3a; height:16px; }
.tx-bots{ display:flex; flex-wrap:wrap; gap:4px; flex:1; }
.tx-bots button{ padding:3px 7px; font-size:10px; }
/* negrita, cursiva y subrayado se enseñan como lo que hacen */
.tx-bots button[data-f=grueso]{ font-weight:900; }
.tx-bots button[data-f=cursiva]{ font-style:italic; font-family:Georgia,serif; }
.tx-bots button[data-f=subra]{ text-decoration:underline; }

.tx-colores{ display:flex; flex-wrap:wrap; gap:4px; align-items:center; flex:1; }
.tx-colores button{
  width:19px; height:19px; padding:0; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
/* el color va en estilo en línea, puesto por texto.js; aquí sólo la forma */
.tx-colores button.on{ box-shadow:0 0 0 2px #c98a3a; }
.tx-colores input[type=color]{
  width:26px; height:19px; padding:0; border:0; border-radius:3px;
  background:none; cursor:pointer;
}

/* ---- LA LISTA DE LETRAS ----
   Cada nombre escrito con su propia letra: es la muestra y el botón a la vez.
   Una por línea y con cuerpo generoso, que una manuscrita a 10 px no se
   distingue de otra. Al pasar el cursor, el cuadro elegido se escribe con
   ella de verdad — eso lo hace texto.js. */
.tx-letras{ overflow:auto; padding:6px 11px 10px; }
.tx-grupo{
  font-size:8.5px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.45; margin:9px 0 4px; padding-bottom:3px;
  border-bottom:1px solid rgba(239,233,220,.12);
}
.tx-grupo:first-child{ margin-top:2px; }
.tx-letra{
  display:block; width:100%; text-align:left;
  padding:3px 7px !important; margin-bottom:1px;
  font-size:17px !important; line-height:1.5;
  background:transparent !important; color:#efe9dc;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tx-letra:hover{ background:rgba(239,233,220,.16) !important; }
.tx-letra.act{ background:#c98a3a !important; color:#20180c !important; }

.tx-ayuda{ padding:0 11px 10px; margin:0; font-size:9.5px; line-height:1.5; opacity:.6; }
.tx-ayuda b{ opacity:.85; }

/* la lengüeta para volver a abrirlo, encima de la de los bichos */
.tx-lengueta{
  position:fixed; z-index:100; right:0; bottom:178px;
  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;
}
.tx-lengueta.se-ve{ opacity:.85; pointer-events:auto; }
.tx-lengueta:hover{ opacity:1; }

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