/* =============================================================================
 * page.css — Índice de secciones (§22.6xx.656k Sprint 5)
 * =============================================================================
 * Page viewport: contenedor de la pizarra, overlays, referencias
 * =============================================================================
 */

/* === Page viewport (base + stages) === */

.page-viewport {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* §22.539 — Cursor hidden en el área pintable cuando brush está activo. */
.page-viewport[data-tool="brush"] .page-stage,
.page-viewport[data-tool="brush"] .stylus-hover-preview {
  cursor: none;
}

/* §22.6xx.541 — Color picker: cursor crosshair para feedback visual. */
.page-viewport[data-tool="colorPicker"] .page-stage {
  cursor: crosshair;
}


/* === Page wrap + shell === */

.page-wrap {
  touch-action: none;
}
.page-shell {
  position: relative;
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  overflow: hidden;
  touch-action: none;
  /* pointer-events:none para que los clicks EN ZONAS FUERA DEL page-stage */
  pointer-events: none;
  /* z-index aplicado inline desde app.js (pageShellZIndex) para quedar */
}



/* === Page stage (donde se renderiza el canvas) === */

.page-stage {
  position: relative;
  transform-origin: center center;
  transition: transform 80ms ease-out;
  will-change: transform;
  filter: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.45));
  /* Re-habilita pointer-events SOLO en la zona pintable del page, */
  pointer-events: auto;
}

.page-container {
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Sin bordes redondeados: el page es plano para look de papel/gouache. */
  border-radius: 0;
}

#paint-canvas {
  display: block;
  max-width: none;
  touch-action: none;
  /* El color del page viene del manager (pageColor). */
  background-color: transparent;
  /* Sombra muy suave: solo un toque para separar el page del fondo. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04);
  /* Aceleración GPU para zoom/pan sin repintar píxeles (PRD sección 2.2). */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}


/* === Paint canvas + stylus hover preview === */

.paint-canvas {
  touch-action: none;
  display: block;
}

/* El estilo visual del marco (border + box-shadow) se aplica vía x-bind */

/* Textura de papel: overlay por encima del paint-canvas, blend mode multiply. */

/* === Paper texture overlay === */

.paper-texture-overlay {
  inset: 0;
  /* §22.6xx.658v — background-size default = cover (100% scale).
     El tool paper-texture sobrescribe con px explícitos cuando el
     scale != 1 o cuando la imagen está cargada. */
  background-size: cover;
  background-position: center;
  /* §22.6xx.658v — repeat (no no-repeat) para que las escalas
     <100% tileen automáticamente sin dejar huecos. A scale=1 el
     repeat es invisible (cover = exacto). */
  background-repeat: repeat;
  mix-blend-mode: multiply;
  /* pointer-events: none desde el HTML para no interceptar trazos. */
  /* z-index implícito: va después del page en el DOM, antes del marco. */
  opacity: 0.85;
  /* Aislamos el contexto de mezcla para que multiply solo afecte al page. */
  isolation: isolate;
}

.stylus-hover-preview {
  opacity: 1;
  mix-blend-mode: normal;
  filter: none;
  will-change: transform, left, top, width, height;
  /* pointer-events: none ya está en el HTML, pero por seguridad */
  pointer-events: none;
}

.stylus-hover-page {
  display: block;
  width: 100%;
  height: 100%;
}



/* === Noise filter overlay === */

.noise-filter-overlay {
  inset: 0;
  background-repeat: repeat;
  background-position: center;
  mix-blend-mode: overlay;
  /* El opacity se setea inline desde JS (1 - intensity slider). */
  /* pointer-events: none desde el HTML para no interceptar trazos. */
  /* isolation: isolate para que el overlay solo afecte al page+papel. */
  isolation: isolate;
}



/* === Off-page safe area overlay (§22.6xx.656ba) ===
   Rectángulo punteado blanco translúcido que delimita el "working
   canvas" del layers-manager (3x el layer.page por defecto). El
   contenido off-page persiste dentro de este rectángulo y se
   recorta si se sale. Se posiciona en el page-stage (NO en
   page-container, que tiene overflow:hidden) para que las 3x
   dimensiones se vean completas. inset: -100% = 100% extra en
   cada lado = 3x el contenedor, centrado en el page-stage. */
.off-page-safe-area-overlay {
  position: absolute;
  inset: -100%;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 2px;
  pointer-events: none;
  z-index: 7;
  /* Sin background — solo el borde. El contenido bajo se ve a través. */
  background: transparent;
}



/* === Binder rings overlay === */

.binder-rings-overlay {
  position: absolute;
  pointer-events: none;
  /* top, left, width, height, background-*: inline. */
  z-index: 4;
}



/* === Scenic shadow overlay (textura de papel) === */

.scenic-shadow-overlay {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* z-index alto para estar sobre todo: por encima de page-shell */
  z-index: 50;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  /* §22.6xx.656ao — multiply para TODAS las sombras (built-in + custom),
     no solo custom. El export/scene-preview usa globalCompositeOperation='multiply'
     + scenicShadowOpacity; el workspace debe usar los MISMOS parámetros para
     que el preview del dialog coincida con lo que ve el user en el workspace. */
  mix-blend-mode: multiply;
}


/* === Reference drop overlay === */

/* §22.6xx.661 — SIN z-index aquí a propósito; lo pone inline desde
 * index.html como `pageShellZIndex + 50`.
 *
 * Estaba en 19, "entre references-layer (5) y page-shell (20)", y por eso no
 * se veía: el lienzo tapaba el overlay entero. Un número fijo en CSS además
 * se desincroniza en cuanto pageShellZIndex (app.js) cambia, así que la
 * fuente de verdad es la de app.js, como ya hace `getImageRefStyle`. */
.reference-drop-overlay {
  /* No bloquea pointer events — sólo es feedback visual. */
  background: rgba(56, 189, 248, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* border dashed cinto perimetral */
  border: 2px dashed rgba(56, 189, 248, 0.45);
}

/* La tarjeta de dentro es un `dialog-panel`: mismo papel crema con textura y
 * mismo borde rasgado que el diálogo de bienvenida.
 *
 * NO añadir aquí `position`, `z-index`, `background` ni `border-radius`.
 * `body .dialog-panel` (dialogs.css:25) ya pone las cuatro cosas que hacen que
 * esto funcione:
 *   - `background: transparent !important` → el crema viene solo del ::before.
 *   - `isolation: isolate` → Crea el contexto de apilado. Es lo que hace
 *     visible el `::before` con `z-index: -1`: sin él, el rasgado se pintaría
 *     POR DETRÁS del fondo del panel y no se vería.
 *   - `position: relative` (vía `:not(.absolute)`) → ancla el ::before a la
 *     tarjeta y no al overlay, que también es `absolute`.
 *   - `border-radius: 0 !important` → el radio lo dibuja el `::before` con
 *     `border-radius: inherit` y `filter: url(#thick-torn-edge)`; poner un
 *     radio aquí no solo no se aplicaría, que además estropearía el rasgado.
 *
 * Aquí queda solo el layout y la tipografía. */
.reference-drop-overlay .drop-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.2rem 1.6rem;
  color: var(--sepia, #5C4033);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
}

/* `rp-import` del sistema de iconos propio (css/icons.css), no un Tabler.
 *
 * Los `rp-*` son máscaras SVG con `background-color: currentColor`, así que el
 * tamaño va con width/height y NO con font-size: el 1.8rem que tenía aquí era
 * el del glifo de Tabler que había antes. El color sale de `currentColor`, y
 * por eso el coral de la marca basta con ponerlo en el padre. */
.reference-drop-overlay .drop-frame i {
  width: 1.9rem;
  height: 1.9rem;
  color: var(--brass, #c85a29);
}



/* === References layer (imágenes importadas) === */

/* §22.6xx.658dm — SIN z-index, y el comentario anterior ("app.js usa
 * inline style, pero fallback defensivo") era justo lo que rompía el
 * bring-to-front: cualquier z-index aquí crea un contexto de apilado
 * PROPIO, y las referencias quedaban encerradas detrás del page-shell
 * (z-20) sin posibilidad de subir, por muy alto que fuese su z-index.
 *
 * Sin z-index, el contexto es el de `.page-wrap` y una ref con
 * `inFront` sí puede quedar por delante del lienzo. */
.references-layer {
  /* a propósito vacío: nada de z-index aquí */
}

.reference-image {
  position: absolute;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  /* Sin overflow:hidden — los handles de resize y rotación cuelgan */
  will-change: transform;
}

.reference-image > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* §22.6xx.658cm — Background transparent (antes era #000).
   * PNG/WebP con transparencia se veían con fondo negro. El wrapper
   * .reference-image ya tiene un background sutil (rgba 0.02) que
   * da suficiente contraste para el outline. */
  background: transparent;
  /* El clip de los bordes redondeados lo aplica el img, no el wrapper, */
  border-radius: 6px;
  overflow: hidden;
}

.reference-image.is-draggable {
  cursor: grab;
}

.reference-image.is-draggable:active {
  cursor: grabbing;
}

.reference-image.is-pinned {
  cursor: default;
}

/* §22.6xx.555zj — Toolbar SIN background (era transparente, pero el
   .reference-image tiene background blanco-2% que se veía como barra
   blanca al combinarse con el box-shadow de los botones). Ahora
   explícitamente transparent + sin box-shadow propio.
   §22.6xx.555zk — FIX DEFINITIVO: dialogs.css tiene reglas
   `.desk-light .reference-toolbar` que aplican background cream +
   border + border-radius 999px (diseño para el undo-redo-pill que
   compartía selector). Eso era la barra blanca visible. Sobreescribo
   con !important para que el toolbar sea invisible. */
.reference-toolbar,
.desk-light .reference-toolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  pointer-events: none;
}

.reference-image:hover .reference-toolbar,
.reference-image.is-pinned .reference-toolbar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* §22.6xx.555zj — Botones unificados al estilo btn-wood estándar
   (mismo que el resto de botones del app). Roberto: "unificar el
   estilo de los botones de pin y cerrar al estilo de botones
   consolidados". Aplico btn-wood + btn-square + btn-xs y sobreescribo
   solo los estados específicos (pinned, hover-danger para delete). */
.reference-pin-btn,
.reference-front-btn,
.reference-delete-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  min-width: 0;
}

/* §22.6xx.658dm — pin y delante/fondo en un grupo a la izquierda, la
 * papelera sola a la derecha. Sin este grupo, `space-between` repartía los
 * tres botones por el ancho y el del medio quedaba centrado. */
.reference-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* §22.6xx.658dm — La imagen delante del canvas.
 *
 * NO se pone `z-index` aquí a propósito: `getImageRefStyle()` lo escribe en
 * estilo INLINE en cada referencia, y el inline gana a cualquier regla de
 * hoja. Una regla aquí se leería "correcta" en el CSS y no haría nada —
 * que es exactamente lo que pasaba. El z lo calcula
 * `image-import-controller.js`, sumando `pageShellZIndex + 1`.
 *
 * Estas dos reglas son solo el estado visual del botón. */

/* Mismo terracotta que el pin, para que los dos toggles activos se lean
   igual. */
.reference-front-btn.is-in-front {
  background-color: #D97757 !important;
  --btn-bg: #D97757;
  color: #fff !important;
}

/* Delete: hover rojo (mantenido del diseño original). */
.reference-delete-btn:hover {
  background-color: #b32d1f !important;
  color: #fff !important;
}

/* Pin pinned: fondo terracotta como el resto de is-active states. */
.reference-pin-btn.is-pinned {
  background-color: #D97757 !important;
  --btn-bg: #D97757;
  color: #fff !important;
}

.reference-image.is-pinned .reference-delete-btn {
  display: none;
}

/* Handle de resize: 4 esquinas. Visibles solo en hover y SOLO si la */
.reference-resize-handle {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--brass);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 4;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease-out, transform 140ms ease-out, background 120ms ease-out;
  /* pointer-events: none handled implicitly via parent structure */
}

.reference-image.is-draggable .reference-resize-handle {
  pointer-events: auto;
}

.reference-image.is-pinned .reference-resize-handle {
  display: none;
}

/* Solo visibles al hacer hover sobre la imagen cuando es draggable */
.reference-image.is-draggable:hover .reference-resize-handle,
.reference-image.is-draggable .reference-resize-handle:focus,
.reference-image.is-draggable .reference-resize-handle:active {
  opacity: 1;
  transform: scale(1);
}

/* Posicionamiento de las 4 esquinas */
.reference-resize-handle.handle-nw {
  top: -8px;
  left: -8px;
  cursor: nwse-resize;
}

.reference-resize-handle.handle-ne {
  top: -8px;
  right: -8px;
  cursor: nesw-resize;
}

.reference-resize-handle.handle-sw {
  bottom: -8px;
  left: -8px;
  cursor: nesw-resize;
}

.reference-resize-handle.handle-se {
  bottom: -8px;
  right: -8px;
  cursor: nwse-resize;
}

/* Hover sobre el handle: feedback */
.reference-resize-handle:hover {
  background: var(--brass);
  border-color: #ffffff;
}

.reference-resize-handle:active {
  background: #c24118;
}

/* Rotation handle: línea vertical + círculo pequeño encima del */
.reference-rotation-line {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  z-index: 4;
}

.reference-rotation-handle {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brass);
  font-size: 14px;
  cursor: alias;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out, transform 140ms ease-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.reference-image.is-draggable .reference-rotation-handle {
  pointer-events: auto;
}

.reference-image.is-draggable:hover .reference-rotation-handle {
  opacity: 1;
}

.reference-image.is-pinned .reference-rotation-handle,
.reference-image.is-pinned .reference-rotation-line {
  display: none;
}

.reference-rotation-handle:hover {
  background: var(--brass);
  color: #ffffff;
}

.reference-rotation-handle:active {
  transform: translateX(-50%) scale(0.95);
}


/* Activación: el atributo data-view se setea en <html> desde app.js */
html[data-view="grayscale"] .page-stage {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}