.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.review-header .invoice-number {
  font-weight: 600;
}

/* Paso post-11 (feedback UI): badge de confianza clicable — permite
   volver a saltar a la página de evidencia bajo demanda (force=true en
   highlightField), ya que el foco del campo solo auto-navega una vez. */
.field-confidence--clickable {
  cursor: pointer;
  text-decoration: underline dotted;
}

.field-confidence--clickable:hover {
  color: var(--text-primary);
}

/* Paso 8.47/8.72: dos columnas a partir de escritorio — apiladas en
   pantallas estrechas, sin invertir demasiado en móvil aquí. */
.review-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 1100px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
}

.review-viewer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Navegación entre páginas del PDF — fuera de .review-viewer a propósito:
   si viviera dentro, empujaría el canvas hacia abajo y desalinearía el
   overlay de highlight (calculado en block.y * scale, relativo al borde
   superior de .review-viewer). */
.viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.viewer-toolbar span {
  color: var(--text-secondary);
  font-size: 13px;
}

.review-viewer {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  overflow: auto;
  min-height: 480px;
}

.review-viewer canvas,
.review-viewer img {
  display: block;
  width: 100%;
  height: auto;
}

/* Paso 8.54/8.57: overlay de highlight OCR — un rectángulo semitransparente
   posicionado en absoluto sobre el canvas/imagen. */
.ocr-highlight {
  position: absolute;
  background: rgba(47, 93, 138, 0.28);
  border: 1px solid var(--brand-primary);
  border-radius: 2px;
  pointer-events: none;
}

/* Bloque 14: rectángulo dibujado a mano por el revisor — visualmente
   distinto de .ocr-highlight (que es de solo lectura) y, a diferencia de
   ese, con pointer-events:auto porque necesita recibir los propios
   eventos de mousedown/mousemove/mouseup del modo dibujo. */
.manual-region {
  position: absolute;
  background: rgba(200, 90, 30, 0.15);
  border: 2px dashed #c85a1e;
  border-radius: 2px;
  pointer-events: auto;
  cursor: crosshair;
}

#draw-region-button.active {
  background: var(--brand-primary);
  color: var(--text-inverse);
}

/* Botones con icono SVG en línea (currentColor: sigue el color de texto
   del botón en cada estado — normal/activo/deshabilitado — sin reglas
   propias por estado). Sustituyen a los emoji (📐/💡) por un icono
   monocromo más acorde a una herramienta de gestión, no un adorno. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.btn-icon svg {
  flex-shrink: 0;
}

.review-form .field-row {
  margin-bottom: var(--space-3);
}

.review-form .field-row label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.review-form .hint {
  margin: var(--space-1) 0 0;
  color: var(--text-secondary);
  font-size: 13px;
}

/* .link-button (base) vive en components.css (Bloque 12) — aquí solo el
   espaciado propio de ir embebido en un .hint (p. ej. "Copiar de Sociedad"). */
.hint .link-button {
  margin-left: var(--space-2);
}

/* .link-button suelto (sin texto de .hint delante, p. ej. "+ Crear proyecto
   nuevo" bajo el desplegable de Proyecto) — mismo aspecto discreto que
   .hint, pero como bloque propio en vez de margin-left. */
.hint-link-button {
  display: block;
  margin-top: var(--space-1);
  font-size: 13px;
}

/* Paso 11.13 (Bloque 11): checkbox único de sesión de revisión — a
   diferencia de .field-row label (space-between, pensado para etiqueta +
   badge de confidence), aquí la casilla y el texto van juntos a la
   izquierda. */
.review-form .field-row.learning-checkbox-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-start;
}

.amounts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-3);
}

.tax-lines-table {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}

.tax-lines-table .tax-line-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  align-items: end;
}

.validation-panel {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin: var(--space-4) 0;
}

.review-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.review-actions .right {
  display: flex;
  gap: var(--space-2);
}

.blocking-validation-inline {
  background: var(--danger-surface);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-3);
  font-size: 13px;
}