/* ===================================================================
   MODO S PEN — capa de escritura a mano opcional (js/spen.js).

   AISLADO a propósito: todo cuelga de .spen-* y solo se ve cuando
   js/spen.js decide activarlo (flag keepb_spen_modo + detección de
   lápiz). En un dispositivo sin S Pen esta hoja no pinta nada porque
   los nodos .spen-* nunca se crean. Se carga de ÚLTIMO en cada HTML,
   igual que movil.css / cine-inmersivo.css — si se retira el Modo S
   Pen, se borra este archivo y su <link> y no queda rastro.

   Usa los tokens de tema que ya existen (--acento, --superficie,
   --borde, --texto...) para heredar el color de cada categoría y el
   Modo Claro sin código extra.
   =================================================================== */

/* --- Botón "✍️" que abre la hoja (junto al icono de IA del campo) --- */
.spen-boton-abrir {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-tenue);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 0.35rem;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.spen-boton-abrir:hover {
  border-color: var(--acento-suave);
  color: var(--texto);
}
.spen-boton-abrir[aria-expanded="true"] {
  border-color: var(--acento-suave);
  color: var(--acento-suave);
}
/* Bug real (mismo patrón ya documentado en css/listas.css): este botón
   trae su propio display:inline-flex arriba, que gana al [hidden] del
   navegador — sin esto, boton.hidden = true (spen.js: disponible() en
   false, ej. fuera de Android) NUNCA ocultaba nada visualmente. */
.spen-boton-abrir[hidden] { display: none; }

/* Variante compacta: un botón ✍️ por viñeta dentro de una fila de lista
   (Theories / Key Highlights / Trivia). Sin etiqueta de texto, alineado
   con el textarea y el botón ✕ de esa misma fila. */
.spen-boton-fila {
  margin-top: 0;
  flex-shrink: 0;
  padding: 0.4rem 0.5rem;
  font-size: 1rem;
}

/* --- Panel de tinta (se inserta justo debajo del campo) --- */
.spen-panel {
  margin-top: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  background: var(--superficie);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Botón "🗑 Borrar" junto a la sinopsis (independiente del Modo S Pen —
   siempre visible cuando el campo tiene texto). */
.boton-limpiar-campo {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto-tenue);
  border-radius: 8px;
  padding: 0.3rem 0.6rem;
  margin-top: 0.4rem;
  margin-left: 0.4rem;
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.boton-limpiar-campo:hover {
  border-color: #f87171;
  color: #f87171;
}
/* Mismo bug que .spen-boton-abrir arriba: display:inline-flex propio
   gana al [hidden] — sin esto, el botón "🗑 Clear" quedaba visible
   incluso con el campo vacío (agregarBotonLimpiarCampo lo oculta con
   btn.hidden, en formulario.js). */
.boton-limpiar-campo[hidden] { display: none; }

.spen-cabecera {
  padding: 0.5rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto);
  background: var(--superficie-clara);
  border-bottom: 1px solid var(--borde-suave);
}

.spen-toolbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--borde-suave);
  background: var(--superficie-clara);
}
.spen-toolbar-grupo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.spen-toolbar-izq { justify-self: start; }
.spen-toolbar-der { justify-self: end; }
/* En móvil no hay sitio para 3 columnas: apila y centra. */
@media (max-width: 560px) {
  .spen-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .spen-toolbar .spen-modo { order: -1; }
}

.spen-herramienta {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  border-radius: 8px;
  min-width: 34px;
  height: 34px;
  padding: 0 0.6rem;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.spen-herramienta-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.spen-herramienta-ico svg { display: block; }
.spen-herramienta-txt {
  font-size: 0.78rem;
  white-space: nowrap;
}
.spen-herramienta:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Botón "Cast" de la barra (auxiliar, no es herramienta de dibujo) */
.spen-herramienta-cast {
  border-color: var(--acento-suave);
  color: var(--acento-suave);
}
.spen-herramienta-cast:hover { background: var(--acento-glow); }

/* Pluma / Borrador — par segmentado, el activo resaltado con el acento */
.spen-modo {
  display: inline-flex;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
}
.spen-modo .spen-modo-boton {
  border: 0;
  border-radius: 0;
  height: 34px;
}
.spen-modo .spen-modo-boton + .spen-modo-boton {
  border-left: 1px solid var(--borde);
}
.spen-modo-boton.activo {
  color: #fff;
  background: var(--acento);
}
html[data-modo="claro"] .spen-modo-boton.activo { color: #fff; }

/* Insignia flotante "Borrador" (sobre el lienzo, no reacomoda nada) */
.spen-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  padding: 0.25rem 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 999px;
  color: #fff;
  background: var(--acento);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.spen-panel-borrando .spen-lienzo { cursor: cell; }

/* Lienzo: "papel" + renglones por CSS (NO se exportan con la tinta).
   La tinta la pinta el canvas: clara sobre papel oscuro / oscura sobre
   papel claro (js/spen.js elige el color según data-modo). --- */
.spen-lienzo-envoltura {
  --spen-papel: var(--panel-grad, #0d0d0d);
  --spen-linea: rgba(var(--acento-suave-rgb), 0.16);
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 37px,
      var(--spen-linea) 37px,
      var(--spen-linea) 38px
    ),
    var(--spen-papel);
  touch-action: none;
  overscroll-behavior: contain;
}
/* Modo Claro: papel blanco de verdad + renglones bastante más marcados
   (sobre blanco, un azul al 16% no se ve). */
html[data-modo="claro"] .spen-lienzo-envoltura {
  --spen-papel: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
  --spen-linea: rgba(var(--acento-rgb), 0.32);
}
.spen-lienzo {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: crosshair;
}
.spen-lienzo.spen-goma {
  cursor: cell;
}

/* Texto actual del campo, tenue detrás de la tinta (modo "anotar") --- */
.spen-fantasma {
  position: absolute;
  inset: 0;
  padding: 0.4rem 0.6rem;
  margin: 0;
  font: inherit;
  font-size: 0.9rem;
  line-height: 38px;
  color: var(--texto-tenue);
  opacity: 0.35;
  white-space: pre-wrap;
  overflow: hidden;
  pointer-events: none;
}

.spen-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid var(--borde-suave);
  background: var(--superficie-clara);
}
.spen-acciones .spen-principal {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.spen-acciones .spen-principal:disabled {
  opacity: 0.55;
  cursor: default;
}
.spen-acciones .spen-secundario {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.spen-estado {
  flex: 1 1 100%;
  font-size: 0.82rem;
  color: var(--texto-tenue);
  margin: 0;
}
.spen-estado.spen-error {
  color: #f87171;
}

/* Previa del texto transcrito — EDITABLE (textarea) + "Usar esta versión" */
.spen-previa {
  padding: 0.6rem;
  border-top: 1px solid var(--borde-suave);
}
.spen-previa-pista {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  color: var(--texto-tenue);
}
textarea.spen-previa-texto {
  width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;
  background: var(--superficie-clara);
  border: 1px solid var(--borde-suave);
  border-radius: 8px;
  padding: 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: 1.55;
  color: var(--texto);
  min-height: 3.5rem;
  max-height: 50vh;
  resize: vertical;
  overflow: auto;
}
textarea.spen-previa-texto:focus {
  outline: none;
  border-color: var(--acento-suave);
  box-shadow: 0 0 0 3px var(--acento-glow);
}
.spen-previa-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- Hoja flotante para campos pequeños (buscador, título...) --- */
.spen-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.spen-overlay .spen-panel {
  margin-top: 0;
  width: min(720px, 100%);
  max-height: 90vh;
  overflow: auto;
}

/* --- Ventana GRANDE para textos largos (sinopsis, Ending Explained,
   opinión...): ocupa casi toda la pantalla y el lienzo se lleva todo el
   alto disponible, con scroll interno para seguir escribiendo. En una
   tablet en horizontal esto da una superficie ancha, tipo hoja. --- */
.spen-overlay-completa {
  padding: 0.6rem;
}
.spen-overlay-completa .spen-panel {
  width: 98vw;
  height: 96vh;
  max-height: 96vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.spen-overlay-completa .spen-lienzo-envoltura,
.spen-panel-completo .spen-lienzo-envoltura {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.spen-overlay-completa .spen-previa {
  max-height: 45vh;
  overflow: auto;
}

/* Barra de scroll ANCHA y visible en la ventana grande — para poder
   subir/bajar la hoja con la punta del S Pen (además del arrastre con
   el dedo, ver js/spen.js). */
.spen-overlay-completa .spen-lienzo-envoltura,
.spen-panel-completo .spen-lienzo-envoltura {
  scrollbar-width: auto;
  scrollbar-color: var(--acento) var(--superficie-clara);
}
.spen-overlay-completa .spen-lienzo-envoltura::-webkit-scrollbar,
.spen-panel-completo .spen-lienzo-envoltura::-webkit-scrollbar {
  width: 15px;
}
.spen-overlay-completa .spen-lienzo-envoltura::-webkit-scrollbar-track,
.spen-panel-completo .spen-lienzo-envoltura::-webkit-scrollbar-track {
  background: var(--superficie-clara);
}
.spen-overlay-completa .spen-lienzo-envoltura::-webkit-scrollbar-thumb,
.spen-panel-completo .spen-lienzo-envoltura::-webkit-scrollbar-thumb {
  background: var(--acento);
  border-radius: 8px;
  border: 3px solid var(--superficie-clara);
}

/* --- Móvil --- */
@media (max-width: 480px) {
  .spen-overlay {
    padding: 0;
    align-items: stretch;
  }
  .spen-overlay .spen-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .spen-overlay-completa {
    padding: 0;
  }
  .spen-overlay-completa .spen-panel {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .spen-toolbar,
  .spen-acciones {
    gap: 0.3rem;
  }
  /* En móvil, solo Pluma/Borrador conservan texto; el resto queda como
     icono para que la barra no ocupe media pantalla. */
  .spen-herramienta:not(.spen-modo-boton) .spen-herramienta-txt {
    display: none;
  }
}