/* Estilos propios de Herramientas PDF (depende de /marca/base.css y /marca/herramienta.css). */

/* ---------- Miniaturas de páginas (rotar) ---------- */

.miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.miniatura {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--cumbre-100);
  color: var(--texto);
  font: 0.85rem var(--fuente-texto);
  cursor: pointer;
}

.miniatura:hover {
  border-color: var(--accion);
}

.miniatura__marco {
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
}

/* Cabe en el marco aunque esté girada 90° */
.miniatura canvas {
  max-width: 95px;
  max-height: 125px;
  box-shadow: var(--sombra);
  transition: transform 0.2s;
}

/* ---------- Firmar ---------- */

.firmar {
  margin-top: 1.25rem;
}

.firmar__columnas {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.selector-modo {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}

.lienzo-firma {
  display: block;
  width: 100%;
  height: 160px;
  margin-bottom: 0.75rem;
  border: 1px solid var(--cumbre-400);
  border-radius: 8px;
  background:
    linear-gradient(transparent calc(100% - 40px), var(--cumbre-200) calc(100% - 40px), var(--cumbre-200) calc(100% - 39px), transparent calc(100% - 39px)),
    #fff;
  cursor: crosshair;
  touch-action: none;
}

.vista-firma {
  display: block;
  max-height: 100px;
  margin: 0.75rem 0;
  padding: 0.5rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
}

.navegacion-paginas {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.hoja {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  cursor: crosshair;
}

.hoja canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.hoja__capa {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hoja__capa img {
  position: absolute;
  outline: 1px dashed var(--cumbre-600);
}

.contador {
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* ---------- Ordenar páginas ---------- */

.pagina-orden {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  height: 100%;
  padding: 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--cumbre-100);
  cursor: grab;
}

.pagina-orden--arrastrando {
  opacity: 0.4;
}

.pagina-orden--destino {
  border-color: var(--accion);
  box-shadow: 0 0 0 2px var(--cumbre-200);
}

.pagina-orden .miniatura__marco canvas,
.pagina-orden__blanca {
  max-width: 95px;
  max-height: 125px;
  box-shadow: var(--sombra);
}

.pagina-orden__blanca {
  width: 88px;
  height: 124px;
  background: #fff;
}

.pagina-orden__rotulo {
  font-size: 0.85rem;
}

.pagina-orden__botones {
  display: flex;
  gap: 0.25rem;
}

.pagina-orden__botones .boton-icono {
  width: 32px;
  height: 32px;
}

/* ---------- Recortar ---------- */

.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.rejilla-margenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}

.campo input[type="number"] {
  width: 100%;
  max-width: 160px;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--cumbre-400);
  border-radius: 8px;
  font: inherit;
}

.vista-previa__titulo {
  margin: 0 0 0.5rem;
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.hoja--recorte {
  overflow: hidden;
  cursor: default;
}

/* La parte que se recorta queda sombreada; el marco muestra lo que se conserva. */
.recorte__marco {
  position: absolute;
  border: 2px dashed var(--accion);
  box-shadow: 0 0 0 9999px rgb(10 25 48 / 45%);
  pointer-events: none;
}

@media (max-width: 760px) {
  .dos-columnas {
    grid-template-columns: minmax(0, 1fr);
  }

  .firmar__columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Escanear documento ---------- */

.escaner__entradas {
  margin: 0 0 1rem;
}

.escaner {
  margin-top: 1.25rem;
}

.escaner__ayuda {
  margin: 0 0 0.75rem;
  color: var(--texto-suave);
  font-size: 0.92rem;
}

/* La foto ocupa el ancho disponible sin pasar de 70 % del alto de la pantalla. */
.escaner__lienzo {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 1.25rem;
  line-height: 0;
  touch-action: none;
  user-select: none;
}

.escaner__lienzo canvas {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 6px;
}

.escaner__marco {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.escaner__marco polygon {
  fill: rgb(44 95 168 / 18%);
  stroke: var(--accion);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

/* Manija: zona táctil de 44 px con un círculo visible de 22 px al centro. */
.escaner__esquina {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
}

.escaner__esquina::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--accion);
  box-shadow: 0 1px 4px rgb(0 0 0 / 45%);
}

.escaner__esquina:active {
  cursor: grabbing;
}

/* Vista previa de la página ya enderezada, antes de sumarla al PDF. */
.escaner__resultado {
  display: flex;
  justify-content: center;
  margin: 0 0 1.25rem;
  padding: 1rem;
  border-radius: var(--radio);
  background: var(--cumbre-100);
}

.escaner__resultado canvas {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  background: #fff;
  box-shadow: var(--sombra);
}