/* ============================================================================
   canvas.css — Lienzo del documento: páginas A4 virtualizadas, líneas, runs,
   capas de caret y selección, y el textarea oculto de IME.

   Estas clases las genera layout/pages.js (A2) — CONTRACTS.md §layout/pages.js:

     #canvas > #page-holder
                 ├─ .page[data-page="N"] > .page-body > .line > .seg
                 ├─ .layer-selection > .sel-rect
                 └─ .layer-caret     > .caret

   TODA la geometría (left/top/width/height) la escribe pages.js como estilo
   inline en px @ zoom 1; el zoom se aplica con transform: scale() sobre
   #page-holder (NUNCA recalculando el layout). Aquí solo van los visuales.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Contenedor de scroll
   ------------------------------------------------------------------------- */

#canvas {
  position: relative;
  background: var(--wd-canvas-bg);   /* #E1DFDD — zona gris alrededor */
  cursor: default;                   /* fuera de la página: flecha */
  outline: none;                     /* tiene tabindex=0; el foco no se dibuja */
  overscroll-behavior: contain;
}

/* ---------------------------------------------------------------------------
   2. Holder: contiene todas las páginas (absolutas) y las capas
   ------------------------------------------------------------------------- */

#page-holder {
  position: relative;
  margin: 0 auto;                    /* centrado horizontal del bloque de páginas */
  transform-origin: top center;      /* punto de anclaje del zoom */
  will-change: transform;
}

/* ---------------------------------------------------------------------------
   3. Página (recicladas por la virtualización)
   ------------------------------------------------------------------------- */

.page {
  position: absolute;
  background: var(--wd-page-bg);
  box-shadow: var(--wd-page-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
  cursor: text;                      /* sobre la página: cursor de texto */
  overflow: hidden;
  font-family: var(--wd-font-doc);   /* Aptos, Calibri, 'Segoe UI', sans-serif */
  font-size: var(--wd-fontsize-doc); /* 11 pt = 14.6667px */
  color: var(--wd-text);
  -webkit-user-select: none;
  user-select: none;                 /* la selección la dibuja .layer-selection */
}

/* Zona de escritura (dentro de los márgenes). pages.js le da inset en px. */
.page-body {
  position: absolute;
  overflow: hidden;
}

/* Encabezado/pie: reservados para la oleada 2 (F13); sin estilo propio en v0.1. */
.page-header,
.page-footer {
  position: absolute;
  overflow: hidden;
  color: var(--wd-text-secondary);
}

/* ---------------------------------------------------------------------------
   4. Líneas y segmentos de texto
   ------------------------------------------------------------------------- */

/* Una línea visual del párrafo; y/height los pone el paginador. */
.line {
  position: absolute;
  left: 0;
  white-space: pre;                  /* los espacios se conservan tal cual */
}

/* Un tramo de línea con formato homogéneo (un run o parte de él).
   pages.js le añade estilo inline: font-family/size/weight/style,
   text-decoration, color, background (resaltado), vertical-align (sub/sup). */
.seg {
  position: absolute;
  white-space: pre;
  top: 0;
}

/* ---------------------------------------------------------------------------
   5. Capas de selección y caret (sobre las páginas, sin capturar el ratón)
   ------------------------------------------------------------------------- */

.layer-find,
.layer-spell,
.layer-selection,
.layer-caret {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.layer-find      { z-index: 1; }   /* resaltados de Buscar, bajo la selección */
.layer-spell     { z-index: 2; }   /* subrayado ortográfico, sobre la búsqueda */
.layer-selection { z-index: 3; }
.layer-caret     { z-index: 4; }

/* Un rectángulo de selección por línea (layout.rangeRects). */
.sel-rect {
  position: absolute;
  background: var(--wd-selection, rgba(43, 87, 154, 0.25));
  pointer-events: none;
}

/* Resaltado de una coincidencia de Buscar; la activa va en naranja (Word). */
.find-hit {
  position: absolute;
  background: var(--wd-find-hit, rgba(255, 214, 0, 0.45));
  pointer-events: none;
}
.find-hit.is-active {
  background: var(--wd-find-hit-active, rgba(255, 140, 0, 0.55));
}

/* Subrayado ondulado rojo de un error ortográfico (como Word). El rectángulo
   cubre la palabra completa y la onda se repite pegada a su borde inferior. */
.spell-hit {
  position: absolute;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3'%3E%3Cpath d='M0 2.2 Q1.5 .4 3 2.2 T6 2.2' fill='none' stroke='%23e51400' stroke-width='1'/%3E%3C/svg%3E")
    repeat-x left bottom;
}

/* Caret: barra fina parpadeante. Solo se anima la OPACIDAD. */
.caret {
  position: absolute;
  width: var(--wd-caret-w, 1.5px);
  background: var(--wd-caret);       /* #201F1E */
  pointer-events: none;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  0%,   49.99% { opacity: 1; }
  50%, 100%    { opacity: 0; }
}

/* Sin parpadeo si el usuario pide reducir el movimiento. */
@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; opacity: 1; }
}

/* ---------------------------------------------------------------------------
   6. Textarea oculto para entrada de texto e IME (editor/input.js)
   Debe estar SOBRE el caret para que el candidato del IME salga en su sitio,
   pero ser invisible y no capturar clics.
   ------------------------------------------------------------------------- */

textarea.ime-proxy {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1em;
  padding: 0;
  margin: 0;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  white-space: pre;
  background: transparent;
  color: transparent;
  z-index: 4;
}

/* ---------------------------------------------------------------------------
   7. Imágenes inline y sus tiradores de selección (Fase 12)
   ------------------------------------------------------------------------- */

/* Caja de la imagen dentro de la línea; pages.js le da posición y tamaño. */
.seg-image {
  display: inline-block;
  overflow: hidden;
  cursor: default;
}
.seg-image img {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;      /* los clics los gestiona la caja */
}

/* Capa de marcos y tiradores (sobre la selección, bajo el caret). */
.layer-handles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Marco discontinuo de la imagen seleccionada. */
.img-frame {
  position: absolute;
  outline: 1px solid var(--wd-accent);
  outline-offset: 0;
  pointer-events: none;
}

/* Tirador: cuadrado blanco con borde azul, centrado en su punto. */
.img-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;     /* centrado sobre la coordenada */
  background: #FFFFFF;
  border: 1px solid var(--wd-accent);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Letra capital: solo necesita no heredar el interlineado de la línea. */
.seg-dropcap { line-height: 1 !important; }

/* ---------------------------------------------------------------------------
   8. Encabezados y pies de página (Fase 13)

   Las bandas se pintan siempre; el modo de edición (clase en #canvas) invierte
   la atenuación: al editar la banda, el cuerpo pasa a segundo plano, como Word.
   ------------------------------------------------------------------------- */

.page-header,
.page-footer {
  position: absolute;
  overflow: visible;
  color: var(--wd-text);
  opacity: 0.65;                    /* atenuadas mientras se edita el cuerpo */
  transition: opacity 0.12s linear;
}

/* Editando una banda: la banda a plena opacidad y el cuerpo atenuado. */
#canvas.is-editing-band .page-body { opacity: 0.4; }
#canvas.is-editing-header .page-header,
#canvas.is-editing-footer .page-footer { opacity: 1; }

/* Marca de la banda activa: línea discontinua, como el «área de encabezado». */
#canvas.is-editing-header .page-header::before,
#canvas.is-editing-footer .page-footer::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: 0;
  border-top: 1px dashed var(--wd-border-strong);
}

/* ---------------------------------------------------------------------------
   9. Tablas (Fase 11)

   El texto de las celdas son líneas normales del cuerpo (el paginador ya les da
   su posición dentro de la celda); aquí solo se pintan los bordes, DEBAJO del
   texto y sin capturar el ratón.
   ------------------------------------------------------------------------- */

.table-row {
  position: absolute;
  pointer-events: none;
}

.table-cell {
  position: absolute;
  border: 1px solid var(--wd-table-border, #A6A6A6);
  /* Los bordes contiguos se solapan: así no se ven dobles. */
  margin: 0 -1px -1px 0;
  box-sizing: border-box;
}
.table-cell.no-border { border-color: transparent; }

/* Con los bordes ocultos, Word muestra líneas de división punteadas en
   pantalla (no se imprimen). */
#canvas .table-cell.no-border {
  border: 1px dashed var(--wd-separator);
}
@media print {
  .table-cell.no-border { border-color: transparent !important; }
}

/* ---------------------------------------------------------------------------
   10. Listas y copiar formato (Fase 6/7)
   ------------------------------------------------------------------------- */

/* El marcador de lista lo pinta la vista aparte de los segs (no ocupa offsets),
   así que nunca debe capturar el ratón ni poder seleccionarse. */
.seg-marker {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Pincel de formato cargado: el cursor lo anuncia sobre toda la página. */
#canvas.is-painting-format,
#canvas.is-painting-format .page {
  cursor: cell;
}

/* Línea de separación entre columnas (Disposición → Columnas → Más columnas). */
.column-sep {
  width: 1px;
  background: var(--wd-border-strong, #8A8886);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   11. Diseño de página (Fase 15): marca de agua y borde de página
   ------------------------------------------------------------------------- */

/* La marca de agua va DEBAJO del texto y nunca captura el ratón. */
.page-watermark {
  z-index: 0;
  -webkit-user-select: none;
  user-select: none;
}

/* El texto y las bandas se apilan por encima de la marca de agua. */
.page-body,
.page-header,
.page-footer {
  z-index: 1;
}

/* Borde de página: un pseudo-elemento con el retranqueo pedido, para no tocar
   ni el tamaño de la página ni el área de texto. */
.page.has-page-border::after {
  content: '';
  position: absolute;
  inset: var(--wd-page-border-inset, 24px);
  border: var(--wd-page-border, 1px solid #000);
  pointer-events: none;
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   12. Vista: cuadrícula y marcas de párrafo (Fase 18)
   ------------------------------------------------------------------------- */

/* Líneas de cuadrícula cada 0,5 cm sobre el área de texto (no se imprimen). */
#canvas.show-gridlines .page-body {
  background-image:
    repeating-linear-gradient(to right, var(--wd-grid, #D8E2F0) 0 1px, transparent 1px 18.9px),
    repeating-linear-gradient(to bottom, var(--wd-grid, #D8E2F0) 0 1px, transparent 1px 18.9px);
}
@media print {
  #canvas.show-gridlines .page-body { background-image: none; }
}

/* Marcas de párrafo: el ¶ al final de cada línea de cierre y la flecha del
   tabulador. Son decorativas, así que no capturan el ratón. */
#canvas.show-marks .line[data-last="1"]::after {
  content: '¶';
  position: absolute;
  left: var(--wd-mark-x, 0);
  top: 0;
  color: var(--wd-accent, #2B579A);
  opacity: 0.55;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   13. Revisar (Fase 19): comentarios y control de cambios
   ------------------------------------------------------------------------- */

/* Resaltado del texto comentado, bajo la selección y la búsqueda. */
.layer-comments > .comment-hit {
  background: rgba(255, 193, 94, 0.28);
  border-bottom: 2px solid rgba(216, 138, 0, 0.7);
  pointer-events: none;
}
.layer-comments > .comment-hit.is-active {
  background: rgba(255, 193, 94, 0.52);
}

/* Con «Mostrar marcas» apagado el documento se ve como quedaría al aceptar
   todos los cambios: lo insertado en negro y lo eliminado, oculto. */
#canvas.hide-revision-marks .seg-del { display: none; }
#canvas.hide-revision-marks .seg-ins {
  color: var(--wd-text) !important;
  text-decoration: none !important;
}

/* El documento protegido no admite caret de escritura. */
#canvas.is-readonly .page { cursor: default; }
#canvas.is-readonly .layer-caret { display: none; }

@media print {
  .layer-comments { display: none; }
  .seg-del { display: none; }
}

/* ---------------------------------------------------------------------------
   14. Referencias (Fase 17): notas al pie y notas al final
   ------------------------------------------------------------------------- */

.page-notes,
.page-endnotes {
  z-index: 1;
}

/* Rayita de separación entre el cuerpo y las notas (2 pulgadas, como Word). */
.notes-rule {
  width: 33%;
  border-top: 1px solid var(--wd-border-strong, #8A8886);
  height: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   15. Dibujar (Fase 20): capa de tinta
   ------------------------------------------------------------------------- */

/* La tinta va por encima del texto pero no captura el ratón: los eventos los
   recoge #canvas, que es quien sabe traducir a coordenadas de página. */
.layer-ink {
  z-index: 3;
  pointer-events: none;
}

/* Con una herramienta de tinta activa, el cursor lo anuncia y el texto deja de
   poder seleccionarse por arrastre. */
#canvas.is-inking .page { cursor: crosshair; }
#canvas.is-inking[data-ink-tool="eraser"] .page { cursor: cell; }
#canvas.is-inking[data-ink-tool="lasso"] .page { cursor: copy; }
#canvas.is-inking .layer-caret { display: none; }

/* ---------------------------------------------------------------------------
   16. Anchos de columna de tabla (arrastre)
   ------------------------------------------------------------------------- */

.layer-colgrips { z-index: 4; }

.col-grip {
  background: transparent;
}
.col-grip:hover {
  background: rgba(43, 87, 154, 0.18);
}
#canvas.is-resizing-col,
#canvas.is-resizing-col .page { cursor: col-resize; }